From 91624bf4fb6f9fb4cfa0f335f2600551e3a4a27f Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 27 Feb 2025 14:16:39 -0600
Subject: [PATCH 1/3] feat(combobox-item): add component tokens

---
 .../combobox-item/combobox-item.e2e.ts        | 116 +++++++++++++++++-
 .../combobox-item/combobox-item.scss          |  71 +++++++----
 .../combobox-item/combobox-item.tsx           |   3 +-
 .../src/components/combobox-item/resources.ts |   2 +-
 .../src/custom-theme.stories.ts               |   4 +-
 .../src/custom-theme/combobox-item.ts         |  32 ++++-
 6 files changed, 195 insertions(+), 33 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 93ab1a303be..8e4d9e43cba 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -1,6 +1,9 @@
 import { describe } from "vitest";
-import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, hidden, reflects, renders, slots, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { SLOTS } from "./resources";
+import { CSS } from "./resources";
 
 describe("calcite-combobox-item", () => {
   describe("defaults", () => {
@@ -46,4 +49,115 @@ describe("calcite-combobox-item", () => {
   describe("disabled", () => {
     disabled("calcite-combobox-item", { focusTarget: "none" });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const comboboxHTML = html` <calcite-combobox-item
+        value="Pikachu"
+        heading="Pikachu"
+        description="Pokemon's mascot"
+        short-heading="0025"
+        icon="tree"
+      ></calcite-combobox-item>`;
+
+      const comboboxItemTokens: ComponentTestTokens = {
+        "--calcite-combobox-item-text-color": [
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-combobox-item-text-color-hover": [
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.label } },
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.custom } },
+          },
+        ],
+        "--calcite-combobox-item-background-color-active": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: { press: { attribute: "class", value: CSS.label } },
+        },
+        "--calcite-combobox-item-background-color-hover": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-combobox-item-description-text-color": {
+          shadowSelector: `.${CSS.description}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-description-text-color-hover": {
+          shadowSelector: `.${CSS.description}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-combobox-item-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+      };
+      themed(comboboxHTML, comboboxItemTokens);
+    });
+
+    describe("selected", () => {
+      const selectedComboboxItemHTML = html` <calcite-combobox-item
+        value="Pikachu"
+        heading="Pikachu"
+        description="Pokemon's mascot"
+        short-heading="0025"
+        icon="tree"
+        selected
+      ></calcite-combobox-item>`;
+      const comboboxItemTokens: ComponentTestTokens = {
+        "--calcite-combobox-item-text-color-selected": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-selected-indicator-icon-color": {
+          shadowSelector: ` .${CSS.icon} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-icon-selected": {
+          shadowSelector: ` .${CSS.custom} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+      };
+      themed(selectedComboboxItemHTML, comboboxItemTokens);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index b5d6d081e22..2cfcaeb5d0b 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -1,3 +1,20 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-item-text-color: Specifies the text color of the combobox item.
+ * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the combobox item when selected.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the combobox item when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
+ * @prop --calcite-combobox-item-icon-selected: Specifies the color of the combobox item icon when selected.
+ * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the combobox item description.
+ * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the combobox item description when hovered.
+ * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the combobox item heading.
+ */
+
 @include base-component();
 
 .scale--s {
@@ -47,8 +64,7 @@ ul:focus {
 }
 
 .label {
-  @apply text-color-3
-  focus-base
+  @apply focus-base
   relative
   box-border
   flex
@@ -57,7 +73,6 @@ ul:focus {
   cursor-pointer
   items-center
   no-underline
-  duration-150
   ease-in-out;
   @include word-break();
   justify-content: space-around;
@@ -65,6 +80,9 @@ ul:focus {
   padding-block: var(--calcite-combobox-item-spacing-unit-s);
   padding-inline-end: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline-start: var(--calcite-combobox-item-indent-value);
+
+  color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
+  transition-duration: var(--calcite-animation-timing);
 }
 
 :host([disabled]) .label {
@@ -73,9 +91,9 @@ ul:focus {
 
 // selected state
 .label--selected {
-  @apply text-color-1;
+  color: var(--calcite-combobox-item-text-color-selected, var(--calcite-color-text-1));
 
-  .title {
+  .heading {
     @apply font-medium;
   }
 }
@@ -86,22 +104,16 @@ ul:focus {
 
 .label:hover,
 .label:active {
-  @apply text-color-1
-    bg-foreground-2
-    no-underline
-    shadow-none;
+  @apply no-underline shadow-none;
+  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
 }
 
-.label:active {
-  background-color: var(--calcite-color-foreground-3);
+.label:hover {
+  background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
 }
 
-.icon {
-  @apply inline-flex
-    opacity-0
-    duration-150
-    ease-in-out;
-  color: theme("borderColor.color.1");
+.label:active {
+  background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
 }
 
 .icon--custom {
@@ -109,12 +121,19 @@ ul:focus {
 }
 
 .icon--selected {
-  @apply text-color-1;
+  color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
+}
+
+.icon {
+  @apply inline-flex
+    opacity-0
+    duration-150
+    ease-in-out;
 }
 
 .label--selected .icon {
   @apply opacity-100;
-  color: theme("backgroundColor.brand");
+  color: var(--calcite-combobox-item-selected-indicator-icon-color, var(--calcite-color-brand));
 }
 
 .center-content {
@@ -131,20 +150,24 @@ ul:focus {
 :host([selected]),
 :host(:hover) {
   .description {
-    color: var(--calcite-color-text-2);
+    color: var(--calcite-combobox-item-description-text-color-hover, var(--calcite-color-text-2));
   }
 }
 
 .short-text {
-  color: var(--calcite-color-text-3);
+  color: var(--calcite-combobox-item-short-heading-text-color, var(--calcite-color-text-3));
   white-space: nowrap;
 }
 
-.title {
-  color: var(--calcite-color-text-1);
+.heading {
+  color: var(--calcite-combobox-item-heading-text-color, var(--calcite-color-text-1));
+}
+
+.description {
+  color: var(--calcite-combobox-item-description-text-color, var(--calcite-color-text-3));
 }
 
-.title,
+.heading,
 .description,
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 6291e933e87..5e00803a957 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -251,7 +251,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
       <calcite-icon
         class={{
           [CSS.icon]: true,
-          [CSS.iconSelected]: this.selected,
         }}
         flipRtl={this.iconFlipRtl}
         icon={icon}
@@ -313,7 +312,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
             <slot name={SLOTS.contentStart} />
             {this.renderIcon(icon)}
             <div class={CSS.centerContent}>
-              <div class={CSS.title}>
+              <div class={CSS.heading}>
                 {highlightText({
                   text: headingText,
                   pattern: filterTextMatchPattern,
diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts
index 1c03a19cf25..9dfd77c7e06 100644
--- a/packages/calcite-components/src/components/combobox-item/resources.ts
+++ b/packages/calcite-components/src/components/combobox-item/resources.ts
@@ -14,7 +14,7 @@ export const CSS = {
   shortText: "short-text",
   single: "label--single",
   textContainer: "text-container",
-  title: "title",
+  heading: "heading",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index b2d8dd74ac2..6c4e46b69e3 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -21,7 +21,7 @@ import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
-import { comboboxItem } from "./custom-theme/combobox-item";
+import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item";
 import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
 import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown";
 import { flow, flowTokens } from "./custom-theme/flow";
@@ -145,6 +145,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       <div class="demo-column">
         ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
+        ${selectedComboboxItem}
       </div>
       <div class="demo-column">
         ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
@@ -175,6 +176,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...comboboxItemTokens,
   ...datePickerTokens,
   ...DropdownTokens,
   ...DropdownItemTokens,
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 1ac6f6c3966..0e8083a24c4 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -1,7 +1,31 @@
 import { html } from "../../support/formatting";
 
-export const comboboxItem = html`<calcite-combobox-item
-  icon="altitude"
-  value="altitude"
-  text-label="Altitude"
+export const comboboxItemTokens = {
+  calciteComboboxItemTextColor: "",
+  calciteComboboxItemTextColorHover: "",
+  calciteComboboxItemTextColorSelected: "",
+  calciteComboboxItemBackgroundColorActive: "",
+  calciteComboboxItemBackgroundColorHover: "",
+  calciteComboboxItemSelectedIndicatorIconColor: "",
+  calciteComboboxItemIconSelected: "",
+  calciteComboboxItemDescriptionTextColor: "",
+  calciteComboboxItemDescriptionTextColorHover: "",
+  calciteComboboxItemHeadingTextColor: "",
+};
+
+export const comboboxItem = html` <calcite-combobox-item
+  value="Pikachu"
+  heading="Pikachu"
+  description="Pokemon's mascot"
+  short-heading="0025"
+  icon="tree"
+></calcite-combobox-item>`;
+
+export const selectedComboboxItem = html`<calcite-combobox-item
+  value="Pikachu"
+  heading="Pikachu"
+  description="Pokemon's mascot"
+  short-heading="0025"
+  icon="tree"
+  selected
 ></calcite-combobox-item>`;

From f7cf758c5f3d00830606f9df8a981d9f6fcf3f6e Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 27 Feb 2025 14:25:49 -0600
Subject: [PATCH 2/3] cleanup

---
 .../combobox-item/combobox-item.e2e.ts        | 10 +++---
 .../combobox-item/combobox-item.scss          | 32 +++++++++----------
 .../combobox-item/combobox-item.tsx           |  2 +-
 .../src/components/combobox-item/resources.ts |  2 +-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 8e4d9e43cba..332f4d9e837 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -68,7 +68,7 @@ describe("calcite-combobox-item", () => {
             targetProp: "color",
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
           },
@@ -87,16 +87,16 @@ describe("calcite-combobox-item", () => {
             state: { press: { attribute: "class", value: CSS.label } },
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
             state: "hover",
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.custom } },
+            state: { press: { attribute: "class", value: CSS.iconCustom } },
           },
         ],
         "--calcite-combobox-item-background-color-active": {
@@ -152,7 +152,7 @@ describe("calcite-combobox-item", () => {
           targetProp: "color",
         },
         "--calcite-combobox-item-icon-selected": {
-          shadowSelector: ` .${CSS.custom} `,
+          shadowSelector: ` .${CSS.iconCustom} `,
           selector: "calcite-combobox-item",
           targetProp: "color",
         },
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 2cfcaeb5d0b..7439818f7dc 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -3,16 +3,16 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-combobox-item-text-color: Specifies the text color of the combobox item.
- * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the combobox item when hovered.
- * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the combobox item when selected.
- * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the combobox item when active.
- * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-text-color: Specifies the text color of the component.
+ * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the component when hovered.
+ * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the component when selected.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-item-icon-selected: Specifies the color of the combobox item icon when selected.
- * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the combobox item description.
- * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the combobox item description when hovered.
- * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the combobox item heading.
+ * @prop --calcite-combobox-item-icon-selected: Specifies the color of the component's icon when selected.
+ * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the component's description when hovered.
+ * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the component heading.
  */
 
 @include base-component();
@@ -116,6 +116,13 @@ ul:focus {
   background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
 }
 
+.icon {
+  @apply inline-flex
+    opacity-0
+    duration-150
+    ease-in-out;
+}
+
 .icon--custom {
   margin-block-start: -1px;
 }
@@ -124,13 +131,6 @@ ul:focus {
   color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
 }
 
-.icon {
-  @apply inline-flex
-    opacity-0
-    duration-150
-    ease-in-out;
-}
-
 .label--selected .icon {
   @apply opacity-100;
   color: var(--calcite-combobox-item-selected-indicator-icon-color, var(--calcite-color-brand));
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 5e00803a957..a5c351e432c 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -235,7 +235,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     return this.icon ? (
       <calcite-icon
         class={{
-          [CSS.custom]: !!this.icon,
+          [CSS.iconCustom]: !!this.icon,
           [CSS.iconSelected]: this.icon && this.selected,
         }}
         flipRtl={this.iconFlipRtl}
diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts
index 9dfd77c7e06..b3f1aea5d0b 100644
--- a/packages/calcite-components/src/components/combobox-item/resources.ts
+++ b/packages/calcite-components/src/components/combobox-item/resources.ts
@@ -4,7 +4,7 @@ export const CSS = {
   active: "label--active",
   centerContent: "center-content",
   container: "container",
-  custom: "icon--custom",
+  iconCustom: "icon--custom",
   description: "description",
   icon: "icon",
   iconSelected: "icon--selected",

From 4e79af300b6bbeebde9609af12964067a639ef8b Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Tue, 4 Mar 2025 17:47:02 -0600
Subject: [PATCH 3/3] rename item selected token

---
 .../components/combobox-item/combobox-item.e2e.ts    |  2 +-
 .../src/components/combobox-item/combobox-item.scss  | 12 ++++++------
 .../src/custom-theme/combobox-item.ts                |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 332f4d9e837..5b099e7df2f 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -151,7 +151,7 @@ describe("calcite-combobox-item", () => {
           selector: "calcite-combobox-item",
           targetProp: "color",
         },
-        "--calcite-combobox-item-icon-selected": {
+        "--calcite-combobox-icon-color-selected": {
           shadowSelector: ` .${CSS.iconCustom} `,
           selector: "calcite-combobox-item",
           targetProp: "color",
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 7439818f7dc..ecee8b023ea 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -9,9 +9,9 @@
  * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-item-icon-selected: Specifies the color of the component's icon when selected.
- * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the component's description.
- * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the component's description when hovered.
+ * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected.
+ * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-combobox-description-text-color-hover: Specifies the text color of the component's description when hovered.
  * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the component heading.
  */
 
@@ -128,7 +128,7 @@ ul:focus {
 }
 
 .icon--selected {
-  color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-icon-color-selected, var(--calcite-color-text-1));
 }
 
 .label--selected .icon {
@@ -150,7 +150,7 @@ ul:focus {
 :host([selected]),
 :host(:hover) {
   .description {
-    color: var(--calcite-combobox-item-description-text-color-hover, var(--calcite-color-text-2));
+    color: var(--calcite-combobox-description-text-color-hover, var(--calcite-color-text-2));
   }
 }
 
@@ -164,7 +164,7 @@ ul:focus {
 }
 
 .description {
-  color: var(--calcite-combobox-item-description-text-color, var(--calcite-color-text-3));
+  color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
 }
 
 .heading,
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 0e8083a24c4..ab17398e3c7 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -7,7 +7,7 @@ export const comboboxItemTokens = {
   calciteComboboxItemBackgroundColorActive: "",
   calciteComboboxItemBackgroundColorHover: "",
   calciteComboboxItemSelectedIndicatorIconColor: "",
-  calciteComboboxItemIconSelected: "",
+  calciteComboboxIconColorSelected: "",
   calciteComboboxItemDescriptionTextColor: "",
   calciteComboboxItemDescriptionTextColorHover: "",
   calciteComboboxItemHeadingTextColor: "",