feat(accordion, accordion-item): add component tokens

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

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden, focusable } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden, themed, focusable } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, IDS, SLOTS } from "./resources";
 
@@ -24,6 +24,67 @@ describe("calcite-accordion-item", () => {
     focusable("calcite-accordion-item");
   });
 
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
+          >content</calcite-accordion-item
+        >`,
+        {
+          "--calcite-accordion-text-color": [
+            {
+              shadowSelector: `.${CSS.content}`,
+              targetProp: "color",
+            },
+            {
+              shadowSelector: `.${CSS.expandIcon}`,
+              targetProp: "color",
+            },
+            {
+              shadowSelector: `.${CSS.description}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-border-color": [
+            {
+              shadowSelector: `.${CSS.content}`,
+              targetProp: "borderBlockEndColor",
+            },
+            {
+              shadowSelector: `.${CSS.header}`,
+              targetProp: "borderBlockEndColor",
+            },
+          ],
+        },
+      );
+    });
+    describe("expanded", () => {
+      themed(
+        html`<calcite-accordion-item heading="Heading" description="Description" expanded
+          >content</calcite-accordion-item
+        >`,
+        {
+          "--calcite-accordion-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.description}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-text-color-pressed": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+          },
+        },
+      );
+    });
+  });
+
   it("properly uses ARIA and roles", async () => {
     // this test covers a11y relationships not reported by axe-core/accessible test helper