fix(accordion-item): update component tokens and tests (#9033)

**Related Issue:** #7180 

## Summary

### Accordion Item

Add tests and update component tokens

--calcite-accordion-item-background-color: defines the background color
for the component.
--calcite-accordion-item-border-color: defines the border color for the
component.
--calcite-accordion-item-description-text-color: defines the text color
of the description in the component.
--calcite-accordion-item-heading-text-color: defines the text color of
the heading in the component.
--calcite-accordion-item-icon-color: defines the icon color for the
component.
--calcite-accordion-item-expand-icon-color: defines the icon color for
the component.
--calcite-accordion-item-text-color: defines the text color for the
component.

packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { accessible, renders, slots, hidden, themed } from "../../tests/commonTests";
 import { CSS, IDS, SLOTS } from "./resources";
 
 describe("calcite-accordion-item", () => {
@@ -20,6 +20,49 @@ describe("calcite-accordion-item", () => {
     slots("calcite-accordion-item", SLOTS);
   });
 
+  describe("theme", () => {
+    const tokens = {
+      "--calcite-accordion-item-text-color": {
+        selector: "calcite-accordion-item",
+        targetProp: "color",
+      },
+      "--calcite-accordion-item-background-color": {
+        selector: "calcite-accordion-item",
+        targetProp: "backgroundColor",
+      },
+      "--calcite-accordion-item-border-color": {
+        selector: "calcite-accordion-item",
+        shadowSelector: `.${CSS.header}`,
+        targetProp: "borderBottomColor",
+      },
+      "--calcite-accordion-item-description-text-color": {
+        selector: "calcite-accordion-item",
+        shadowSelector: `.${CSS.description}`,
+        targetProp: "color",
+      },
+      "--calcite-accordion-item-heading-text-color": {
+        selector: "calcite-accordion-item",
+        shadowSelector: `.${CSS.heading}`,
+        targetProp: "color",
+      },
+      "--calcite-accordion-item-icon-color": {
+        selector: "calcite-accordion-item",
+        shadowSelector: ".icon",
+        targetProp: "--calcite-icon-color",
+      },
+      "--calcite-accordion-item-expand-icon-color": {
+        selector: "calcite-accordion-item",
+        shadowSelector: ".expand-icon",
+        targetProp: "--calcite-icon-color",
+      },
+    } as const;
+
+    themed(
+      `<calcite-accordion><calcite-accordion-item description="Accordion Item Description" icon-start="brush-tip" heading="Accordion Title 1" id="2">Accordion Item Content </calcite-accordion-item></calcite-accordion>`,
+      tokens,
+    );
+  });
+
   it("properly uses ARIA and roles", async () => {
     // this test covers a11y relationships not reported by axe-core/accessible test helper