feat(accordion): add new component tokens and deprecate old tokens (#11390)

alisonailea · macandcheese · geospatialem · benelan · commit fdf3e61380d2 · 2025-03-25T18:09:20.000-07:00
**Related Issue:** #10830 ## Summary Deprecate `--calcite-accordion-item-background-color` Deprecate `--calcite-accordion-item-border-color` Deprecate `--calcite-accordion-item-icon-color` Deprecate `--calcite-accordion-item-text-color` Deprecate `--calcite-accordion-item-text-color-hover` Deprecate `--calcite-accordion-item-text-color-press` --calcite-accordion-border-color: Specifies the component's border color. --calcite-accordion-background-color: Specifies the component's background color. --calcite-accordion-text-color: Specifies the component's text color. --calcite-accordion-text-color-hover: Specifies the component's main text color on hover. --calcite-accordion-text-color-press: Specifies the component's main text color when pressed. --calcite-accordion-item-background-color: [Deprecated] Use --calcite-accordion-background-color. Specifies the component's background color. --calcite-accordion-item-border-color: [Deprecated] Use --calcite-accordion-border-color. Specifies the component's border color. --calcite-accordion-item-content-space: Specifies the component's padding. --calcite-accordion-item-end-icon-color: Specifies the component's iconEnd color. Fallback to --calcite-accordion-item-icon-color or current color. --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color. --calcite-accordion-item-header-background-color: Specifies the component's heading background color. --calcite-accordion-item-heading-text-color: Specifies the component's heading text color. --calcite-accordion-item-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's default icon color. --calcite-accordion-item-start-icon-color: Specifies the component's iconStart color. Fallback to --calcite-accordion-item-icon-color or current color. --calcite-accordion-item-text-color: [Deprecated] Use --calcite-accordion-text-color. Specifies the component's text color. --calcite-accordion-item-text-color-hover: [Deprecated] Use --calcite-accordion-text-color-hover. Specifies the component's text color on hover. --calcite-accordion-item-text-color-press: [Deprecated] Use --calcite-accordion-text-color-press. Specifies the component's text color on press. --------- Co-authored-by: Adam Tirella <adam@tirel.la> Co-authored-by: Kitty Hurley <khurley@esri.com>
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts
@@ -37,37 +37,29 @@ describe("calcite-accordion-item", () => {
           >content</calcite-accordion-item
         >`,
         {
-          "--calcite-accordion-item-text-color": {
-            shadowSelector: `.${CSS.description}`,
-            targetProp: "color",
+          "--calcite-accordion-item-content-space": {
+            targetProp: "padding",
+            shadowSelector: `.${CSS.content}`,
           },
           "--calcite-accordion-item-header-background-color": {
             targetProp: "backgroundColor",
             shadowSelector: `.${CSS.header}`,
           },
-          "--calcite-accordion-item-background-color": {
-            targetProp: "backgroundColor",
-          },
-          "--calcite-accordion-item-expand-icon-color": {
-            shadowSelector: `.${CSS.expandIcon}`,
+          "--calcite-accordion-item-heading-text-color": {
+            shadowSelector: `.${CSS.headerContent}`,
             targetProp: "color",
           },
-          "--calcite-accordion-item-icon-color": [
-            {
-              shadowSelector: `.${CSS.iconStart}`,
-              targetProp: "color",
-            },
-            {
-              shadowSelector: `.${CSS.iconEnd}`,
-              targetProp: "color",
-            },
-          ],
         },
       );
     });
     describe("icons", () => {
       themed(
-        html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
+        html`<calcite-accordion-item
+          heading="Heading"
+          description="Description"
+          icon-start="home"
+          icon-end="home"
+          expanded
           >content</calcite-accordion-item
         >`,
         {
@@ -79,9 +71,91 @@ describe("calcite-accordion-item", () => {
             shadowSelector: `.${CSS.iconEnd}`,
             targetProp: "color",
           },
+          "--calcite-accordion-item-expand-icon-color": {
+            shadowSelector: `.${CSS.expandIcon}`,
+            targetProp: "color",
+          },
         },
       );
     });
+    describe("deprecate", () => {
+      describe("default", async () => {
+        themed(
+          html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
+            >content</calcite-accordion-item
+          >`,
+          {
+            "--calcite-accordion-item-text-color": [
+              {
+                targetProp: "color",
+              },
+              {
+                targetProp: "color",
+                shadowSelector: `.${CSS.expandIcon}`,
+              },
+            ],
+            "--calcite-accordion-item-text-color-hover": [
+              {
+                targetProp: "color",
+                shadowSelector: `.${CSS.heading}`,
+              },
+            ],
+            "--calcite-accordion-item-background-color": {
+              targetProp: "backgroundColor",
+            },
+            "--calcite-accordion-border-color": [
+              {
+                shadowSelector: `.${CSS.header}`,
+                targetProp: "borderColor",
+              },
+              {
+                shadowSelector: `.${CSS.content}`,
+                targetProp: "borderColor",
+              },
+            ],
+            "--calcite-accordion-item-icon-color": [
+              {
+                shadowSelector: `.${CSS.iconStart}`,
+                targetProp: "color",
+              },
+              {
+                shadowSelector: `.${CSS.iconEnd}`,
+                targetProp: "color",
+              },
+            ],
+          },
+        );
+      });
+      describe("expanded", async () => {
+        themed(
+          html`<calcite-accordion-item
+            expanded
+            heading="Heading"
+            description="Description"
+            icon-start="home"
+            icon-end="home"
+            >content</calcite-accordion-item
+          >`,
+          {
+            "--calcite-accordion-item-text-color-hover": [
+              {
+                targetProp: "color",
+                shadowSelector: `.${CSS.expandIcon}`,
+              },
+              {
+                targetProp: "color",
+                shadowSelector: `.${CSS.description}`,
+              },
+            ],
+            "--calcite-accordion-item-heading-text-color": {
+              selector: "calcite-accordion-item",
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+            },
+          },
+        );
+      });
+    });
   });
 
   it("properly uses ARIA and roles", async () => {
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -3,22 +3,23 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-accordion-border-color: [Deprecated] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
- * @prop --calcite-accordion-item-background-color: Specifies the component's background color.
- * @prop --calcite-accordion-item-border-color: Specifies the component's border color.
- * @prop --calcite-accordion-item-icon-color-end: Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @prop --calcite-accordion-item-icon-color-start: Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
+ * @prop --calcite-accordion-border-color: Specifies the component's border color.
+ * @prop --calcite-accordion-background-color: Specifies the component's background color.
+ * @prop --calcite-accordion-text-color: Specifies the component's text color.
+ * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
+ * @prop --calcite-accordion-text-color-press: Specifies the component's main text color when pressed.
+ * @prop --calcite-accordion-item-background-color: [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color.
+ * @prop --calcite-accordion-item-border-color: [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color.
  * @prop --calcite-accordion-item-content-space: Specifies the component's padding.
- * @prop --calcite-accordion-item-end-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-end`. Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
+ * @prop --calcite-accordion-item-end-icon-color: Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
  * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.
  * @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.
  * @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.
- * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.
- * @prop --calcite-accordion-item-start-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-start`. Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @prop --calcite-accordion-item-text-color: Specifies the component's text color.
- * @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.
- * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.
- * @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.
+ * @prop --calcite-accordion-item-icon-color: [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color.
+ * @prop --calcite-accordion-item-start-icon-color: Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
+ * @prop --calcite-accordion-item-text-color: [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color.
+ * @prop --calcite-accordion-item-text-color-hover: [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover.
+ * @prop --calcite-accordion-item-text-color-press: [Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press.
  */
 
 %icon-position {
@@ -35,8 +36,8 @@
     flex-col
     no-underline;
 
-  color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));
-  background-color: var(--calcite-accordion-item-background-color);
+  color: var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));
+  background-color: var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));
   border-width: 0;
 
   .header {
@@ -72,8 +73,8 @@
   border-block-end-width: var(--calcite-border-width-sm);
   border-block-end-style: solid;
   border-color: var(
-    --calcite-accordion-item-border-color,
-    var(--calcite-accordion-border-color, theme("borderColor.color.2"))
+    --calcite-accordion-border-color,
+    var(--calcite-accordion-item-border-color, theme("borderColor.color.2"))
   );
 }
 
@@ -130,7 +131,7 @@
     .heading {
       color: var(
         --calcite-accordion-item-heading-text-color,
-        var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))
+        var(--calcite-accordion-text-color-press, var(--calcite-color-text-1))
       );
     }
   }
@@ -193,7 +194,7 @@
 .expand-icon {
   color: var(
     --calcite-accordion-item-expand-icon-color,
-    var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)))
+    var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)))
   );
   margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);
   margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);
@@ -217,15 +218,18 @@
   .heading {
     color: var(
       --calcite-accordion-item-heading-text-color,
-      var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+      var(
+        --calcite-accordion-text-color-hover,
+        var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+      )
     );
   }
 }
 
 :host([expanded]) {
   color: var(
-    --calcite-accordion-item-text-color,
-    var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))
+    --calcite-accordion-text-color-press,
+    var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1)))
   );
 
   .header {
@@ -236,8 +240,14 @@
     color: var(
       --calcite-accordion-item-expand-icon-color,
       var(
-        --calcite-accordion-item-text-color,
-        var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
+        --calcite-accordion-text-color-hover,
+        var(
+          --calcite-accordion-text-color,
+          var(
+            --calcite-accordion-item-text-color,
+            var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+          )
+        )
       )
     );
     transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation));
@@ -248,8 +258,14 @@
 
   .description {
     color: var(
-      --calcite-accordion-item-text-color,
-      var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
+      --calcite-accordion-text-color-hover,
+      var(
+        --calcite-accordion-text-color,
+        var(
+          --calcite-accordion-item-text-color,
+          var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+        )
+      )
     );
   }
 
diff --git a/packages/calcite-components/src/components/accordion/accordion.e2e.ts b/packages/calcite-components/src/components/accordion/accordion.e2e.ts
@@ -13,7 +13,9 @@ describe("calcite-accordion", () => {
       Content
       <calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
     </calcite-accordion-item>
-    <calcite-accordion-item heading="Accordion Title 1" id="2" expanded>Accordion Item Content </calcite-accordion-item>
+    <calcite-accordion-item heading="Accordion Title 1" description="A description" id="2" expanded
+      >Accordion Item Content
+    </calcite-accordion-item>
     <calcite-accordion-item heading="Accordion Title 3" id="3">Accordion Item Content </calcite-accordion-item>
   `;
 
@@ -291,14 +293,64 @@ describe("calcite-accordion", () => {
 
   describe("theme", () => {
     themed(`<calcite-accordion>${accordionContent}</calcite-accordion>`, {
-      "--calcite-accordion-background-color": {
-        shadowSelector: `.${CSS.accordion}`,
-        targetProp: "backgroundColor",
-      },
-      "--calcite-accordion-border-color": {
-        shadowSelector: `.${CSS.accordion}`,
-        targetProp: "borderColor",
-      },
+      "--calcite-accordion-background-color": [
+        {
+          shadowSelector: `.${CSS.accordion}`,
+          targetProp: "backgroundColor",
+          selector: "calcite-accordion",
+        },
+        {
+          targetProp: "backgroundColor",
+          selector: "calcite-accordion-item",
+        },
+      ],
+      "--calcite-accordion-border-color": [
+        {
+          shadowSelector: `.${CSS.accordion}`,
+          targetProp: "borderColor",
+          selector: "calcite-accordion",
+        },
+        {
+          shadowSelector: `.${ACCORDION_ITEM_CSS.header}`,
+          targetProp: "borderColor",
+          selector: "calcite-accordion-item",
+        },
+        {
+          shadowSelector: `.${ACCORDION_ITEM_CSS.content}`,
+          targetProp: "borderColor",
+          selector: "calcite-accordion-item",
+        },
+      ],
+      "--calcite-accordion-text-color": [
+        {
+          targetProp: "color",
+          selector: "calcite-accordion-item",
+        },
+        {
+          targetProp: "color",
+          shadowSelector: `.${ACCORDION_ITEM_CSS.headerContent}`,
+          selector: "calcite-accordion-item",
+        },
+      ],
+      "--calcite-accordion-text-color-hover": [
+        {
+          selector: "calcite-accordion-item[expanded]",
+          shadowSelector: `.${ACCORDION_ITEM_CSS.expandIcon}`,
+          targetProp: "color",
+        },
+        {
+          selector: "calcite-accordion-item[expanded]",
+          shadowSelector: `.${ACCORDION_ITEM_CSS.description}`,
+          targetProp: "color",
+        },
+      ],
+      "--calcite-accordion-item-heading-text-color": [
+        {
+          selector: "calcite-accordion-item",
+          shadowSelector: `.${ACCORDION_ITEM_CSS.heading}`,
+          targetProp: "color",
+        },
+      ],
     });
   });
 });
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -4,7 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-accordion-border-color: Specifies the component's border color.
- * @prop --calcite-accordion-background-color:  Specifies the component's background color.
+ * @prop --calcite-accordion-background-color: Specifies the component's background color.
+ * @prop --calcite-accordion-text-color: Specifies the component's text color.
+ * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
+ * @prop --calcite-accordion-text-color-press: Specifies the component's main text color when pressed.
 */
 
 :host {
diff --git a/packages/calcite-components/src/custom-theme/accordion-item.ts b/packages/calcite-components/src/custom-theme/accordion-item.ts
@@ -2,16 +2,12 @@ import { placeholderImage } from "../../.storybook/placeholder-image";
 import { html } from "../../support/formatting";
 
 export const accordionItemTokens = {
-  calciteAccordionItemBackgroundColor: "",
-  calciteAccordionItemBorderColor: "",
-  calciteAccordionItemIconColorEnd: "",
-  calciteAccordionItemIconColorStart: "",
   calciteAccordionItemContentSpace: "",
   calciteAccordionItemExpandIconColor: "",
   calciteAccordionItemHeaderBackgroundColor: "",
   calciteAccordionItemHeadingTextColor: "",
-  calciteAccordionItemIconColor: "",
-  calciteAccordionItemTextColor: "",
+  calciteAccordionItemIconColorEnd: "",
+  calciteAccordionItemIconColorStart: "",
 };
 
 export const accordionItem = (idx: number): string =>
diff --git a/packages/calcite-components/src/custom-theme/accordion.ts b/packages/calcite-components/src/custom-theme/accordion.ts
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
