From f2ed553130953ec9db143197a94c5d38c6b132e8 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 24 Jan 2024 11:12:50 -0800
Subject: [PATCH 1/6] feat(accordion): refactor for custom props

---
 .../calcite-components/src/components.d.ts    |  80 ++---
 .../accordion-item/accordion-item.scss        | 314 +++++++++---------
 .../src/components/accordion/accordion.scss   |  84 +++--
 3 files changed, 264 insertions(+), 214 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 2313e55d846..5327f8610ef 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -660,7 +660,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -775,7 +775,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The 'ID' of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -1070,7 +1070,7 @@ export namespace Components {
          */
         "flipPlacements": EffectivePlacement[];
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -1898,7 +1898,7 @@ export namespace Components {
          */
         "files": FileList | undefined;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -2075,7 +2075,7 @@ export namespace Components {
          */
         "focusTrapDisabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -2231,7 +2231,7 @@ export namespace Components {
          */
         "enterKeyHint": string;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -2401,7 +2401,7 @@ export namespace Components {
          */
         "enterKeyHint": string;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -2520,7 +2520,7 @@ export namespace Components {
          */
         "focusTrapDisabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -2600,7 +2600,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -3040,7 +3040,7 @@ export namespace Components {
          */
         "fillType": "single" | "range";
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -3722,7 +3722,7 @@ export namespace Components {
          */
         "focused": boolean;
         /**
-          * The 'ID' of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -3811,7 +3811,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -3875,7 +3875,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -3952,7 +3952,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -4096,7 +4096,7 @@ export namespace Components {
          */
         "detachedHeightScale": Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` full height, displays adjacent to center content,  `"float"` not full height, content is separated detached from `calcite-action-bar`, displays on top of center content, and  `"overlay"` full height, displays on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
          */
         "displayMode": DisplayMode1;
         /**
@@ -4134,7 +4134,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -4473,7 +4473,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -4817,7 +4817,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
         /**
@@ -5169,6 +5169,7 @@ export namespace Components {
         "selectedItems": HTMLCalciteTreeItemElement[];
         /**
           * Specifies the selection mode of the component, where:  `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,  `"children"` allows any number of selections from one parent from corresponding parent and child selections,  `"multichildren"` allows any number of selections from corresponding parent and child selections,  `"multiple"` allows any number of selections,  `"none"` allows no selections,  `"single"` allows one selection, and  `"single-persist"` allows and requires one selection.
+          * @default "single"
          */
         "selectionMode": SelectionMode;
     }
@@ -7914,7 +7915,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -8029,7 +8030,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The 'ID' of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -8341,7 +8342,7 @@ declare namespace LocalJSX {
          */
         "flipPlacements"?: EffectivePlacement[];
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9230,7 +9231,7 @@ declare namespace LocalJSX {
          */
         "files"?: FileList | undefined;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9409,7 +9410,7 @@ declare namespace LocalJSX {
          */
         "focusTrapDisabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9461,7 +9462,7 @@ declare namespace LocalJSX {
          */
         "onCalciteInputDatePickerBeforeOpen"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
         /**
-          * Fires when the component's value changes.
+          * Fires when the component's `value` changes.
          */
         "onCalciteInputDatePickerChange"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
         /**
@@ -9576,7 +9577,7 @@ declare namespace LocalJSX {
          */
         "enterKeyHint"?: string;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9748,7 +9749,7 @@ declare namespace LocalJSX {
          */
         "enterKeyHint"?: string;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9872,7 +9873,7 @@ declare namespace LocalJSX {
          */
         "focusTrapDisabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9900,7 +9901,7 @@ declare namespace LocalJSX {
          */
         "onCalciteInputTimePickerBeforeOpen"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
         /**
-          * Fires when the time value is changed as a result of user input.
+          * Fires when the component's `value` is changes.
          */
         "onCalciteInputTimePickerChange"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
         /**
@@ -9963,7 +9964,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -9996,7 +9997,7 @@ declare namespace LocalJSX {
          */
         "onCalciteInputTimeZoneBeforeOpen"?: (event: CalciteInputTimeZoneCustomEvent<void>) => void;
         /**
-          * Fires when the component's value changes.
+          * Fires when the component's `value` changes.
          */
         "onCalciteInputTimeZoneChange"?: (event: CalciteInputTimeZoneCustomEvent<void>) => void;
         /**
@@ -10460,7 +10461,7 @@ declare namespace LocalJSX {
          */
         "fillType"?: "single" | "range";
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11159,7 +11160,7 @@ declare namespace LocalJSX {
          */
         "focused"?: boolean;
         /**
-          * The 'ID' of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11260,7 +11261,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11324,7 +11325,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11405,7 +11406,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11557,7 +11558,7 @@ declare namespace LocalJSX {
          */
         "detachedHeightScale"?: Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` full height, displays adjacent to center content,  `"float"` not full height, content is separated detached from `calcite-action-bar`, displays on top of center content, and  `"overlay"` full height, displays on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
          */
         "displayMode"?: DisplayMode1;
         /**
@@ -11597,7 +11598,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -11935,7 +11936,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -12291,7 +12292,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The `ID` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
+          * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
         /**
@@ -12657,6 +12658,7 @@ declare namespace LocalJSX {
         "selectedItems"?: HTMLCalciteTreeItemElement[];
         /**
           * Specifies the selection mode of the component, where:  `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,  `"children"` allows any number of selections from one parent from corresponding parent and child selections,  `"multichildren"` allows any number of selections from corresponding parent and child selections,  `"multiple"` allows any number of selections,  `"none"` allows no selections,  `"single"` allows one selection, and  `"single-persist"` allows and requires one selection.
+          * @default "single"
          */
         "selectionMode"?: SelectionMode;
     }
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index f214f886e3d..0eba1fe514f 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -1,195 +1,207 @@
-%icon-position {
-  /* icon rotation variables */
-  --calcite-accordion-item-icon-rotation: calc(theme("rotate.90") * -1);
-  --calcite-accordion-item-active-icon-rotation: theme("rotate.0");
-  --calcite-accordion-item-icon-rotation-rtl: theme("rotate.90");
-  --calcite-accordion-item-active-icon-rotation-rtl: theme("rotate.0");
-}
-
-// icon position variants for child
-.icon-position--start {
-  @extend %icon-position;
-  --calcite-accordion-item-flex-direction: row-reverse;
-  --calcite-accordion-item-icon-spacing-start: 0;
-  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);
-}
-
-.icon-position--end {
-  @extend %icon-position;
-  --calcite-accordion-item-flex-direction: row;
-  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);
-  --calcite-accordion-item-icon-spacing-end: 0;
-}
-
-.icon-position--end:not(.icon-type--plus-minus) {
-  --calcite-accordion-item-icon-rotation: theme("rotate.0");
-  --calcite-accordion-item-active-icon-rotation: theme("rotate.180");
-  --calcite-accordion-item-icon-rotation-rtl: theme("rotate.0");
-  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme("rotate.180") * -1);
-}
+/**
+ * CSS Custom Properties
+ *
+ * @prop --calcite-accordion-item-background: The background color of the accordion item.
+ * @prop --calcite-accordion-item-border-color: The border color of the accordion item.
+ * @prop --calcite-accordion-item-outline-color-focus: The outline color of an accordion item when it is in focus;
+ * @prop --calcite-accordion-item-outline-color: The outline color of an accordion item;
+ * @prop --calcite-accordion-item-padding: Deprecated. Please use --calcite-accordion-spacing instead.
+ * @prop --calcite-accordion-item-secondary-text-color-selected: The text color of the secondary text in the accordion item when selected.
+ * @prop --calcite-accordion-item-text-color-selected: The text color of the accordion item when it is selected.
+ * @prop --calcite-accordion-item-text-color: The text color of the accordion item.
+ *
+ */
+
+/*
+ * Internal
+ *
+ * --calcite-internal-accordion-item-icon-rotation: defines the rotation of the icon element. This is altered by setting classes within the ShadowDom.
+ * --calcite-internal-accordion-item-flex-direction: defines the flex layout direction of the elements within the accordion item.
+ * --calcite-internal-accordion-item-padding: defines the padding around the header and content elements within the accordion item ShadowDom.
+ */
 
 :host {
-  @apply text-color-3
-    relative
+  @apply relative
     flex
     flex-col
     no-underline;
-  background-color: var(--calcite-accordion-item-background, theme("backgroundColor.foreground.1"));
-}
 
-// focus styles
-:host .header-content {
-  @apply focus-base;
-}
+  // Component Tokens
+  --calcite-accordion-item-background: var(--calcite-accordion-background, var(--calcite-color-foreground-1));
+  --calcite-accordion-item-border-color: var(--calcite-accordion-border-color, var(--calcite-color-border-2));
+  --calcite-accordion-item-outline-color-focus: var(
+    --calcite-accordion-outline-color-focus,
+    var(--calcite-color-brand)
+  );
+  --calcite-accordion-item-outline-color: var(--calcite-accordion-outline-color, var(--calcite-color-transparent));
+  --calcite-accordion-item-secondary-text-color-selected: var(
+    --calcite-accordion-item-secondary-text-color-selected,
+    var(--calcite-color-text-2)
+  );
+  --calcite-accordion-item-text-color-selected: var(
+    --calcite-accordion-text-color-selected,
+    var(--calcite-color-text-1)
+  );
+  --calcite-accordion-item-text-color: var(--calcite-accordion-text-color, var(--calcite-color-text-3));
+
+  // Internal variables
+  --calcite-internal-accordion-item-icon-rotation: -90deg;
+  --calcite-internal-accordion-item-padding: var(
+    --calcite-accordion-item-padding,
+    var(--calcite-internal-accordion-padding)
+  );
+
+  background-color: var(--calcite-accordion-item-background, var(--calcite-accordion-background));
+  color: var(--calcite-accordion-item-text-color);
+
+  .icon,
+  .description,
+  .expand-icon,
+  .content,
+  .heading {
+    color: var(--calcite-accordion-item-text-color);
+  }
 
-:host(:focus) .header-content {
-  @apply focus-inset
-  outline-none;
-}
+  .content,
+  .header {
+    border-block-end-width: var(--calcite-border-width-sm);
+    border-block-end-style: solid;
+    border-block-end-color: var(--calcite-accordion-item-border-color);
+  }
 
-:host([expanded]) {
-  @apply text-color-1;
-  & .content {
-    @apply text-color-1 block;
+  .header {
+    @apply flex items-stretch;
+
+    * {
+      @apply inline-flex
+        items-center
+        duration-150
+        ease-in-out;
+      @include word-break();
+    }
   }
-  & .header {
-    border-block-end-color: transparent;
+
+  .heading,
+  .description {
+    @apply flex w-full;
   }
-}
 
-// .header / content
-:host .header {
-  @apply flex items-stretch;
-}
+  .heading {
+    --calcite-accordion-item-text-color: var(--calcite-accordion-secondary-text-color-highlight);
 
-:host .icon {
-  @apply text-color-3
-    relative
-    m-0
-    inline-flex
-    duration-150
-    ease-in-out;
-  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);
-  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);
-}
+    font-weight: var(--calcite-font-weight-medium);
+  }
 
-.icon--start {
-  @apply flex items-center;
-  margin-inline-end: var(--calcite-accordion-icon-margin);
-}
+  .header-container {
+    inline-size: 100%;
+  }
 
-.icon--end {
-  @apply flex items-center;
-  margin-inline-end: var(--calcite-accordion-icon-margin);
-  margin-inline-start: var(--calcite-accordion-icon-margin);
-}
+  .header-content {
+    @apply flex-grow cursor-pointer;
+    outline: 2px solid var(--calcite-accordion-item-outline-color);
+    outline-offset: calc(-2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
+    padding: var(--calcite-internal-accordion-item-padding);
+    flex-direction: var(--calcite-internal-accordion-item-flex-direction);
+  }
 
-.header-container {
-  inline-size: 100%;
-}
+  .header-text {
+    @apply my-0 flex-grow flex-col py-0;
+    text-align: initial;
+    margin-inline-end: theme("margin.auto");
+  }
 
-.content {
-  padding: var(--calcite-accordion-item-padding);
-}
+  .icon--start {
+    @apply flex items-center;
+    margin-inline-end: var(--calcite-internal-accordion-icon-margin);
+  }
 
-:host .content,
-:host .header {
-  border-block-end: 1px solid var(--calcite-accordion-item-border, theme("borderColor.color.2"));
-}
+  .icon--end {
+    @apply flex items-center;
+    margin-inline-end: var(--calcite-internal-accordion-icon-margin);
+    margin-inline-start: var(--calcite-internal-accordion-icon-margin);
+  }
 
-:host .header * {
-  @apply inline-flex
-    items-center
-    duration-150
-    ease-in-out;
-  @include word-break();
-}
+  .content {
+    @apply hidden pt-0;
+    padding: var(--calcite-internal-accordion-item-padding);
+    text-align: initial;
+  }
 
-:host .content {
-  @apply text-color-3 hidden pt-0;
-  text-align: initial;
-}
+  .description {
+    margin-block-start: var(--calcite-spacing-xxs);
+  }
 
-// accordion item icon
-:host .expand-icon {
-  @apply text-color-3;
-  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);
-  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);
-  transform: rotate(var(--calcite-accordion-item-icon-rotation));
-}
+  // accordion item icon
+  .expand-icon {
+    margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);
+    margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);
+    transform: rotate(var(--calcite-internal-accordion-item-icon-rotation, 0deg));
+  }
 
-.calcite--rtl .expand-icon {
-  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));
-}
+  .actions-start,
+  .actions-end {
+    @apply flex items-center;
+  }
 
-:host([expanded]) .expand-icon {
-  @apply text-color-3;
-  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));
-}
+  // icon position variants for child
+  .icon-position--start {
+    --calcite-internal-accordion-item-flex-direction: row-reverse;
+    --calcite-internal-accordion-item-icon-spacing-start: 0;
+    --calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin);
+  }
 
-:host([expanded]) .calcite--rtl .expand-icon {
-  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));
-}
+  .icon-position--end {
+    --calcite-internal-accordion-item-flex-direction: row;
+    --calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);
+    --calcite-internal-accordion-item-icon-spacing-end: 0;
+  }
 
-// accordion item title
-:host .header-text {
-  @apply my-0 flex-grow flex-col py-0;
-  text-align: initial;
-  margin-inline-end: theme("margin.auto");
+  .icon-position--end:not(.icon-type--plus-minus) {
+    --calcite-internal-accordion-item-icon-rotation: 0deg;
+  }
 }
 
-:host .heading,
-:host .description {
-  @apply flex w-full;
+:host(:focus) {
+  .header-content {
+    --calcite-accordion-item-outline-color: var(--calcite-accordion-item-outline-color-focus);
+  }
 }
 
-:host .heading {
-  @apply text-color-2 font-medium;
-}
-:host .description {
-  @apply text-color-3 mt-1;
-}
+:host([expanded]) {
+  --calcite-accordion-item-text-color: var(----calcite-accordion-text-color-selected);
+  // --calcite-internal-accordion-item-icon-rotation: 180deg;
 
-:host(:focus),
-:host(:hover) {
-  & .heading {
-    @apply text-color-1;
+  .content {
+    @apply block;
+  }
+  .header {
+    --calcite-accordion-item-border-color: var(--calcite-color-transparent);
   }
-  & .icon {
-    @apply text-color-1;
+
+  .calcite--rtl {
+    --calcite-internal-accordion-item-icon-rotation: 180deg;
   }
 
-  & .expand-icon {
-    @apply text-color-1;
+  .icon-position--start {
+    --calcite-internal-accordion-item-icon-rotation: -180deg;
   }
-  & .description {
-    @apply text-color-2;
+  .icon-position--end:not(.icon-type--plus-minus) {
+    --calcite-internal-accordion-item-icon-rotation: 180deg;
   }
 }
 
 :host(:focus),
+:host(:hover),
 :host(:active),
 :host([expanded]) {
-  & .heading {
-    @apply text-color-1;
-  }
-  & .icon {
-    @apply text-color-1;
+  .heading,
+  .expand-icon {
+    --calcite-accordion-item-text-color: var(--calcite-accordion-text-color-selected);
   }
-  & .description {
-    @apply text-color-2;
-  }
-}
 
-.header-content {
-  @apply flex-grow cursor-pointer;
-  padding: var(--calcite-accordion-item-padding);
-  flex-direction: var(--calcite-accordion-item-flex-direction);
-}
-
-.actions-start,
-.actions-end {
-  @apply flex items-center;
+  .description {
+    --calcite-accordion-item-text-color: var(--calcite-accordion-secondary-text-color-highlight);
+  }
 }
 
 @media (forced-colors: active) {
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 896e5da332a..31079e737dc 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -1,41 +1,77 @@
+/**
+ * CSS Custom Properties
+ *
+ * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated at a +4.
+ * @prop --calcite-accordion-border-color: The border around an accordion.
+ * @prop --calcite-accordion-background: The background color of the accordion and accordion items.
+ * @prop --calcite-accordion-header-text-color: The header text color for accordion items.
+ * @prop --calcite-accordion-description-text-color: The description text color for accordion items.
+ * @prop --calcite-accordion-content-text-color: The content text color for accordion items.
+ * @prop --calcite-accordion-header-text-color-selected: The text color of selected accordion item headers
+ * @prop --calcite-accordion-description-text-color-selected: The description text color of selected accordion items.
+ */
+
+/*
+ * Internal
+ *
+ * --calcite-internal-accordion-icon-space: space around the accordion icon. Calculated from --calcite-accordion-space
+ * --calcite-internal-accordion-padding: space around the accordion. Calculated from --calcite-accordion-space
+ * --calcite-internal-accordion-icon-margin: space between the accordion items' icons and other ShadowDom elements. Calculated from --calcite-accordion-space
+ * --calcite-internal-accordion-font-size: font size. Inherited from global font-size variables. Set based on the component scale prop.
+ * --calcite-internal-accordion-line-height
+ */
+
+:host {
+  @apply relative
+    block
+    max-w-full;
+
+  --calcite-accordion-space: unset;
+  --calcite-accordion-border-color: var(--calcite-color-border-2);
+  --calcite-accordion-background: var(--calcite-color-foreground-1);
+  --calcite-accordion-text-color: var(--calcite-color-text-3);
+  --calcite-accordion-text-color-selected: var(--calcite-color-text-1);
+  --calcite-accordion-secondary-text-color-highlight: var(--calcite-color-text-2);
+
+  font-size: var(--calcite-internal-accordion-font-size);
+  line-height: var(--calcite-internal-accordion-line-height, var(--calcite-font-size-xxl));
+}
+
 // scale variants for child
 :host([scale="s"]) {
-  --calcite-accordion-item-spacing-unit: theme("spacing.1");
-  --calcite-accordion-icon-margin: theme("spacing.2");
-  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) theme("spacing.2");
-  @apply text-n2h;
+  --calcite-accordion-space: var(--calcite-spacing-xxs);
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-font-size: var(--calcite-font-size-sm);
+  --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="m"]) {
-  --calcite-accordion-item-spacing-unit: theme("spacing.2");
-  --calcite-accordion-icon-margin: theme("spacing.3");
-  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) theme("spacing.3");
-  @apply text-n1h;
+  --calcite-accordion-space: var(--calcite-spacing-sm);
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-font-size: var(--calcite-font-size);
+  --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="l"]) {
-  --calcite-accordion-item-spacing-unit: theme("spacing.3");
-  --calcite-accordion-icon-margin: theme("spacing.4");
-  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) theme("spacing.4");
-  @apply text-0h;
-}
-
-:host {
-  @apply relative
-    block
-    max-w-full
-    leading-6;
-  --calcite-accordion-item-border: theme("borderColor.color.2");
-  --calcite-accordion-item-background: theme("backgroundColor.foreground.1");
+  --calcite-accordion-space: var(--calcite-spacing-md);
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-font-size: var(--calcite-font-size-md);
+  --calcite-internal-accordion-line-height: var(--calcite-font-line-height-relative-tight);
 }
 
 .accordion--transparent {
-  --calcite-accordion-item-border: transparent;
-  --calcite-accordion-item-background: transparent;
+  --calcite-accordion-border-color: var(--calcite-color-transparent);
+  --calcite-accordion-background: var(--calcite-color-transparent);
 }
 
 .accordion {
-  @apply border border-solid border-color-2 border-b-0;
+  border-width: var(--calcite-border-width-sm);
+  border-style: solid;
+  border-color: var(--calcite-accordion-border-color);
+  border-block-end-width: var(--calcite-border-width-none);
 }
 
 @include base-component();

From dc363ec322f5e68f9fce9529b1de48042d24f58e Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 25 Jan 2024 14:03:47 -0800
Subject: [PATCH 2/6] fix(accordion): simplify accordion tokens

---
 .../accordion-item/accordion-item.scss        | 59 ++++++-------------
 .../src/components/accordion/accordion.scss   | 20 ++-----
 2 files changed, 23 insertions(+), 56 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index 0eba1fe514f..b38e2434f0b 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -27,22 +27,14 @@
     no-underline;
 
   // Component Tokens
-  --calcite-accordion-item-background: var(--calcite-accordion-background, var(--calcite-color-foreground-1));
-  --calcite-accordion-item-border-color: var(--calcite-accordion-border-color, var(--calcite-color-border-2));
-  --calcite-accordion-item-outline-color-focus: var(
-    --calcite-accordion-outline-color-focus,
-    var(--calcite-color-brand)
-  );
-  --calcite-accordion-item-outline-color: var(--calcite-accordion-outline-color, var(--calcite-color-transparent));
-  --calcite-accordion-item-secondary-text-color-selected: var(
-    --calcite-accordion-item-secondary-text-color-selected,
-    var(--calcite-color-text-2)
-  );
-  --calcite-accordion-item-text-color-selected: var(
-    --calcite-accordion-text-color-selected,
-    var(--calcite-color-text-1)
-  );
-  --calcite-accordion-item-text-color: var(--calcite-accordion-text-color, var(--calcite-color-text-3));
+  --calcite-accordion-item-background: var(--calcite-color-foreground-1);
+  --calcite-accordion-item-border-color: var(--calcite-color-border-2);
+  --calcite-accordion-item-outline-color: var(--calcite-outline-color, var(--calcite-color-transparent));
+  --calcite-accordion-item-heading-color: var(--calcite-color-text-2);
+  --calcite-accordion-item-icon-color: var(--calcite-color-text-3);
+  --calcite-accordion-item-description-color: var(--calcite-color-text-3);
+  --calcite-accordion-item-content-color: var(--calcite-color-text-3);
+  --calcite-accordion-item-text-color: var(--calcite-color-text-3);
 
   // Internal variables
   --calcite-internal-accordion-item-icon-rotation: -90deg;
@@ -51,16 +43,7 @@
     var(--calcite-internal-accordion-padding)
   );
 
-  background-color: var(--calcite-accordion-item-background, var(--calcite-accordion-background));
-  color: var(--calcite-accordion-item-text-color);
-
-  .icon,
-  .description,
-  .expand-icon,
-  .content,
-  .heading {
-    color: var(--calcite-accordion-item-text-color);
-  }
+  background-color: var(--calcite-accordion-item-background);
 
   .content,
   .header {
@@ -87,8 +70,7 @@
   }
 
   .heading {
-    --calcite-accordion-item-text-color: var(--calcite-accordion-secondary-text-color-highlight);
-
+    color: var(--calcite-accordion-item-heading-color);
     font-weight: var(--calcite-font-weight-medium);
   }
 
@@ -125,14 +107,17 @@
     @apply hidden pt-0;
     padding: var(--calcite-internal-accordion-item-padding);
     text-align: initial;
+    color: var(--calcite-accordion-item-content-color);
   }
 
   .description {
     margin-block-start: var(--calcite-spacing-xxs);
+    color: var(--calcite-accordion-item-description-color);
   }
 
   // accordion item icon
   .expand-icon {
+    color: var(--calcite-accordion-item-icon-color);
     margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);
     margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);
     transform: rotate(var(--calcite-internal-accordion-item-icon-rotation, 0deg));
@@ -162,15 +147,10 @@
 }
 
 :host(:focus) {
-  .header-content {
-    --calcite-accordion-item-outline-color: var(--calcite-accordion-item-outline-color-focus);
-  }
+  --calcite-accordion-item-outline-color: var(--calcite-color-brand);
 }
 
 :host([expanded]) {
-  --calcite-accordion-item-text-color: var(----calcite-accordion-text-color-selected);
-  // --calcite-internal-accordion-item-icon-rotation: 180deg;
-
   .content {
     @apply block;
   }
@@ -194,14 +174,9 @@
 :host(:hover),
 :host(:active),
 :host([expanded]) {
-  .heading,
-  .expand-icon {
-    --calcite-accordion-item-text-color: var(--calcite-accordion-text-color-selected);
-  }
-
-  .description {
-    --calcite-accordion-item-text-color: var(--calcite-accordion-secondary-text-color-highlight);
-  }
+  --calcite-accordion-item-description-color: var(--calcite-color-text-2);
+  --calcite-accordion-item-heading-color: var(--calcite-color-text-1);
+  --calcite-accordion-item-icon-color: var(--calcite-color-text-1);
 }
 
 @media (forced-colors: active) {
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 31079e737dc..72bf617fabc 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -27,11 +27,9 @@
     max-w-full;
 
   --calcite-accordion-space: unset;
-  --calcite-accordion-border-color: var(--calcite-color-border-2);
-  --calcite-accordion-background: var(--calcite-color-foreground-1);
-  --calcite-accordion-text-color: var(--calcite-color-text-3);
-  --calcite-accordion-text-color-selected: var(--calcite-color-text-1);
-  --calcite-accordion-secondary-text-color-highlight: var(--calcite-color-text-2);
+
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
 
   font-size: var(--calcite-internal-accordion-font-size);
   line-height: var(--calcite-internal-accordion-line-height, var(--calcite-font-size-xxl));
@@ -40,24 +38,18 @@
 // scale variants for child
 :host([scale="s"]) {
   --calcite-accordion-space: var(--calcite-spacing-xxs);
-  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
-  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
   --calcite-internal-accordion-font-size: var(--calcite-font-size-sm);
   --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="m"]) {
   --calcite-accordion-space: var(--calcite-spacing-sm);
-  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
-  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
   --calcite-internal-accordion-font-size: var(--calcite-font-size);
   --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="l"]) {
   --calcite-accordion-space: var(--calcite-spacing-md);
-  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
-  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
   --calcite-internal-accordion-font-size: var(--calcite-font-size-md);
   --calcite-internal-accordion-line-height: var(--calcite-font-line-height-relative-tight);
 }
@@ -68,10 +60,10 @@
 }
 
 .accordion {
-  border-width: var(--calcite-border-width-sm);
+  border-width: 1px;
   border-style: solid;
-  border-color: var(--calcite-accordion-border-color);
-  border-block-end-width: var(--calcite-border-width-none);
+  border-color: var(--calcite-color-border-2);
+  border-block-end-width: 0;
 }
 
 @include base-component();

From 8408c1571d230fa49fc5a709521049442ee50d7f Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 8 Feb 2024 09:40:01 -0800
Subject: [PATCH 3/6] docs(accordion, accordion-item): update JSDocs for tokens

---
 .../accordion-item/accordion-item.scss        | 50 ++++++++++---------
 .../src/components/accordion/accordion.scss   | 11 ++--
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index b38e2434f0b..da2b91133ce 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -1,20 +1,20 @@
 /**
  * CSS Custom Properties
  *
- * @prop --calcite-accordion-item-background: The background color of the accordion item.
- * @prop --calcite-accordion-item-border-color: The border color of the accordion item.
- * @prop --calcite-accordion-item-outline-color-focus: The outline color of an accordion item when it is in focus;
- * @prop --calcite-accordion-item-outline-color: The outline color of an accordion item;
+ * @prop --calcite-accordion-item-background-color: defines the background color of the accordion item. May be set by the accordion parent.
+ * @prop --calcite-accordion-item-border-color: defines the border color of the accordion item. May be set by the accordion parent.
+ * @prop --calcite-accordion-item-heading-text-color: defines the color of heading text.
+ * @prop --calcite-accordion-item-heading-background-color: defines the background color of the heading. Defaults to --calcite-accordion-item-background-color.
  * @prop --calcite-accordion-item-padding: Deprecated. Please use --calcite-accordion-spacing instead.
- * @prop --calcite-accordion-item-secondary-text-color-selected: The text color of the secondary text in the accordion item when selected.
- * @prop --calcite-accordion-item-text-color-selected: The text color of the accordion item when it is selected.
- * @prop --calcite-accordion-item-text-color: The text color of the accordion item.
+ * @prop --calcite-accordion-item-icon-color: defines the color of the icons in an accordion item.
+ * @prop --calcite-accordion-item-description-text-color: defines the color of the accordion item's description text.
+ * @prop --calcite-accordion-item-content-text-color: defines the color of the accordion item's content text.
  *
  */
 
 /*
  * Internal
- *
+ * --calcite-internal-accordion-item-outline-color: defines the outline color of an accordion item.
  * --calcite-internal-accordion-item-icon-rotation: defines the rotation of the icon element. This is altered by setting classes within the ShadowDom.
  * --calcite-internal-accordion-item-flex-direction: defines the flex layout direction of the elements within the accordion item.
  * --calcite-internal-accordion-item-padding: defines the padding around the header and content elements within the accordion item ShadowDom.
@@ -27,23 +27,26 @@
     no-underline;
 
   // Component Tokens
-  --calcite-accordion-item-background: var(--calcite-color-foreground-1);
-  --calcite-accordion-item-border-color: var(--calcite-color-border-2);
-  --calcite-accordion-item-outline-color: var(--calcite-outline-color, var(--calcite-color-transparent));
-  --calcite-accordion-item-heading-color: var(--calcite-color-text-2);
+  --calcite-accordion-item-background-color: var(--calcite-accordion-background, var(--calcite-color-foreground-1));
+  --calcite-accordion-item-border-color: var(--calcite-accordion-border-color, var(--calcite-color-border-2));
+  --calcite-accordion-item-heading-text-color: var(--calcite-accordion-header-text-color, var(--calcite-color-text-2));
+  --calcite-accordion-item-heading-background-color: var(
+    --calcite-accordion-item-background-color,
+    var(--calcite-color-foreground-1)
+  );
   --calcite-accordion-item-icon-color: var(--calcite-color-text-3);
-  --calcite-accordion-item-description-color: var(--calcite-color-text-3);
-  --calcite-accordion-item-content-color: var(--calcite-color-text-3);
-  --calcite-accordion-item-text-color: var(--calcite-color-text-3);
+  --calcite-accordion-item-description-text-color: var(--calcite-color-text-3);
+  --calcite-accordion-item-content-text-color: var(--calcite-color-text-3);
 
   // Internal variables
+  --calcite-internal-accordion-item-outline-color: var(--calcite-color-transparent);
   --calcite-internal-accordion-item-icon-rotation: -90deg;
   --calcite-internal-accordion-item-padding: var(
     --calcite-accordion-item-padding,
     var(--calcite-internal-accordion-padding)
   );
 
-  background-color: var(--calcite-accordion-item-background);
+  background-color: var(--calcite-accordion-item-background-color);
 
   .content,
   .header {
@@ -54,6 +57,7 @@
 
   .header {
     @apply flex items-stretch;
+    background-color: var(--calcite-accordion-item-heading-background-color);
 
     * {
       @apply inline-flex
@@ -70,7 +74,7 @@
   }
 
   .heading {
-    color: var(--calcite-accordion-item-heading-color);
+    color: var(--calcite-accordion-item-heading-text-color);
     font-weight: var(--calcite-font-weight-medium);
   }
 
@@ -80,7 +84,7 @@
 
   .header-content {
     @apply flex-grow cursor-pointer;
-    outline: 2px solid var(--calcite-accordion-item-outline-color);
+    outline: 2px solid var(--calcite-internal-accordion-item-outline-color);
     outline-offset: calc(-2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
     padding: var(--calcite-internal-accordion-item-padding);
     flex-direction: var(--calcite-internal-accordion-item-flex-direction);
@@ -107,12 +111,12 @@
     @apply hidden pt-0;
     padding: var(--calcite-internal-accordion-item-padding);
     text-align: initial;
-    color: var(--calcite-accordion-item-content-color);
+    color: var(--calcite-accordion-item-content-text-color);
   }
 
   .description {
     margin-block-start: var(--calcite-spacing-xxs);
-    color: var(--calcite-accordion-item-description-color);
+    color: var(--calcite-accordion-item-description-text-color);
   }
 
   // accordion item icon
@@ -147,7 +151,7 @@
 }
 
 :host(:focus) {
-  --calcite-accordion-item-outline-color: var(--calcite-color-brand);
+  --calcite-internal-accordion-item-outline-color: var(--calcite-color-brand);
 }
 
 :host([expanded]) {
@@ -174,8 +178,8 @@
 :host(:hover),
 :host(:active),
 :host([expanded]) {
-  --calcite-accordion-item-description-color: var(--calcite-color-text-2);
-  --calcite-accordion-item-heading-color: var(--calcite-color-text-1);
+  --calcite-accordion-item-description-text-color: var(--calcite-color-text-2);
+  --calcite-accordion-item-heading-text-color: var(--calcite-color-text-1);
   --calcite-accordion-item-icon-color: var(--calcite-color-text-1);
 }
 
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 72bf617fabc..84ffae48fe4 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -2,13 +2,8 @@
  * CSS Custom Properties
  *
  * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated at a +4.
- * @prop --calcite-accordion-border-color: The border around an accordion.
+ * @prop --calcite-accordion-border-color: The border around an accordion and accordion items.
  * @prop --calcite-accordion-background: The background color of the accordion and accordion items.
- * @prop --calcite-accordion-header-text-color: The header text color for accordion items.
- * @prop --calcite-accordion-description-text-color: The description text color for accordion items.
- * @prop --calcite-accordion-content-text-color: The content text color for accordion items.
- * @prop --calcite-accordion-header-text-color-selected: The text color of selected accordion item headers
- * @prop --calcite-accordion-description-text-color-selected: The description text color of selected accordion items.
  */
 
 /*
@@ -17,8 +12,8 @@
  * --calcite-internal-accordion-icon-space: space around the accordion icon. Calculated from --calcite-accordion-space
  * --calcite-internal-accordion-padding: space around the accordion. Calculated from --calcite-accordion-space
  * --calcite-internal-accordion-icon-margin: space between the accordion items' icons and other ShadowDom elements. Calculated from --calcite-accordion-space
- * --calcite-internal-accordion-font-size: font size. Inherited from global font-size variables. Set based on the component scale prop.
- * --calcite-internal-accordion-line-height
+ * --calcite-internal-accordion-font-size: Inherited from global font-size variables. Set based on the component scale prop.
+ * --calcite-internal-accordion-line-height: References global line-height variables. Set based on the component scale prop.
  */
 
 :host {

From 453cbf3d92c459a884dfb737dbf062e4c75f8899 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 8 Feb 2024 13:32:19 -0800
Subject: [PATCH 4/6] fix(accordion): update token name for
 accordion-background-color

---
 .../src/components/accordion-item/accordion-item.scss        | 5 ++++-
 .../src/components/accordion/accordion.scss                  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index da2b91133ce..5ffc29c7eeb 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -27,7 +27,10 @@
     no-underline;
 
   // Component Tokens
-  --calcite-accordion-item-background-color: var(--calcite-accordion-background, var(--calcite-color-foreground-1));
+  --calcite-accordion-item-background-color: var(
+    --calcite-accordion-background-color,
+    var(--calcite-color-foreground-1)
+  );
   --calcite-accordion-item-border-color: var(--calcite-accordion-border-color, var(--calcite-color-border-2));
   --calcite-accordion-item-heading-text-color: var(--calcite-accordion-header-text-color, var(--calcite-color-text-2));
   --calcite-accordion-item-heading-background-color: var(
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 84ffae48fe4..daf5af0e168 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  *
  * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated at a +4.
  * @prop --calcite-accordion-border-color: The border around an accordion and accordion items.
- * @prop --calcite-accordion-background: The background color of the accordion and accordion items.
+ * @prop --calcite-accordion-background-color: The background color of the accordion and accordion items.
  */
 
 /*
@@ -51,7 +51,7 @@
 
 .accordion--transparent {
   --calcite-accordion-border-color: var(--calcite-color-transparent);
-  --calcite-accordion-background: var(--calcite-color-transparent);
+  --calcite-accordion-background-color: var(--calcite-color-transparent);
 }
 
 .accordion {

From b4931bf2d2b523dc9ae9aee3731d746cafa02005 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 8 Feb 2024 13:40:14 -0800
Subject: [PATCH 5/6] fix(accordion): add semantic token for space calcultion

---
 .../src/components/accordion/accordion.scss                | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index daf5af0e168..6d626cb4733 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -1,7 +1,7 @@
 /**
  * CSS Custom Properties
  *
- * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated at a +4.
+ * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated from --calcite-size-xxs.
  * @prop --calcite-accordion-border-color: The border around an accordion and accordion items.
  * @prop --calcite-accordion-background-color: The background color of the accordion and accordion items.
  */
@@ -23,8 +23,9 @@
 
   --calcite-accordion-space: unset;
 
-  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + 4px);
-  --calcite-internal-accordion-padding: var(--calcite-accordion-space) calc(var(--calcite-accordion-space) + 4px);
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + var(--calcite-size-xxs));
+  --calcite-internal-accordion-padding: var(--calcite-accordion-space)
+    calc(var(--calcite-accordion-space) + var(--calcite-size-xxs));
 
   font-size: var(--calcite-internal-accordion-font-size);
   line-height: var(--calcite-internal-accordion-line-height, var(--calcite-font-size-xxl));

From f3c41529b35e31c063723cfeff011e0018c9360a Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 8 Feb 2024 16:52:28 -0800
Subject: [PATCH 6/6] fix(accordion): make space token internal

---
 .../src/components/accordion/accordion.scss   | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 6d626cb4733..b7e8857c3f4 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -1,7 +1,6 @@
 /**
  * CSS Custom Properties
  *
- * @prop --calcite-accordion-space: defines space around and between accordion item elements. Other spacing is calculated from --calcite-size-xxs.
  * @prop --calcite-accordion-border-color: The border around an accordion and accordion items.
  * @prop --calcite-accordion-background-color: The background color of the accordion and accordion items.
  */
@@ -9,9 +8,10 @@
 /*
  * Internal
  *
- * --calcite-internal-accordion-icon-space: space around the accordion icon. Calculated from --calcite-accordion-space
- * --calcite-internal-accordion-padding: space around the accordion. Calculated from --calcite-accordion-space
- * --calcite-internal-accordion-icon-margin: space between the accordion items' icons and other ShadowDom elements. Calculated from --calcite-accordion-space
+ * --calcite-internal-accordion-space: defines space around and between accordion item elements. Other spacing is calculated from --calcite-size-xxs.
+ * --calcite-internal-accordion-icon-space: space around the accordion icon. Calculated from --calcite-internal-accordion-space
+ * --calcite-internal-accordion-padding: space around the accordion. Calculated from --calcite-internal-accordion-space
+ * --calcite-internal-accordion-icon-margin: space between the accordion items' icons and other ShadowDom elements. Calculated from --calcite-internal-accordion-space
  * --calcite-internal-accordion-font-size: Inherited from global font-size variables. Set based on the component scale prop.
  * --calcite-internal-accordion-line-height: References global line-height variables. Set based on the component scale prop.
  */
@@ -21,11 +21,10 @@
     block
     max-w-full;
 
-  --calcite-accordion-space: unset;
-
-  --calcite-internal-accordion-icon-margin: calc(var(--calcite-accordion-space) + var(--calcite-size-xxs));
-  --calcite-internal-accordion-padding: var(--calcite-accordion-space)
-    calc(var(--calcite-accordion-space) + var(--calcite-size-xxs));
+  --calcite-internal-accordion-space: unset;
+  --calcite-internal-accordion-icon-margin: calc(var(--calcite-internal-accordion-space) + var(--calcite-size-xxs));
+  --calcite-internal-accordion-padding: var(--calcite-internal-accordion-space)
+    calc(var(--calcite-internal-accordion-space) + var(--calcite-size-xxs));
 
   font-size: var(--calcite-internal-accordion-font-size);
   line-height: var(--calcite-internal-accordion-line-height, var(--calcite-font-size-xxl));
@@ -33,19 +32,19 @@
 
 // scale variants for child
 :host([scale="s"]) {
-  --calcite-accordion-space: var(--calcite-spacing-xxs);
+  --calcite-internal-accordion-space: var(--calcite-spacing-xxs);
   --calcite-internal-accordion-font-size: var(--calcite-font-size-sm);
   --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="m"]) {
-  --calcite-accordion-space: var(--calcite-spacing-sm);
+  --calcite-internal-accordion-space: var(--calcite-spacing-sm);
   --calcite-internal-accordion-font-size: var(--calcite-font-size);
   --calcite-internal-accordion-line-height: var(--calcite-font-size-md);
 }
 
 :host([scale="l"]) {
-  --calcite-accordion-space: var(--calcite-spacing-md);
+  --calcite-internal-accordion-space: var(--calcite-spacing-md);
   --calcite-internal-accordion-font-size: var(--calcite-font-size-md);
   --calcite-internal-accordion-line-height: var(--calcite-font-line-height-relative-tight);
 }