diff --git a/README.md b/README.md
index 8f1d25d1474..38c57bbee61 100644
--- a/README.md
+++ b/README.md
@@ -16,8 +16,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
 
 <!-- readme: contributors,calcite-admin/- -start -->
 <table>
-	<tbody>
-		<tr>
+ <tbody>
+  <tr>
             <td align="center">
                 <a href="https://github.com/driskull">
                     <img src="https://avatars.githubusercontent.com/u/1231455?v=4" width="100;" alt="driskull"/>
@@ -60,8 +60,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Erik Harper</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/anveshmekala">
                     <img src="https://avatars.githubusercontent.com/u/88453586?v=4" width="100;" alt="anveshmekala"/>
@@ -104,8 +104,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Ali Stump</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/caripizza">
                     <img src="https://avatars.githubusercontent.com/u/42423180?v=4" width="100;" alt="caripizza"/>
@@ -148,8 +148,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Kumar Jayaram Gayatri</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/kat10140">
                     <img src="https://avatars.githubusercontent.com/u/48069902?v=4" width="100;" alt="kat10140"/>
@@ -192,8 +192,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Max Patiiuk</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/ffaubry">
                     <img src="https://avatars.githubusercontent.com/u/3506166?v=4" width="100;" alt="ffaubry"/>
@@ -236,8 +236,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Jack Rowlingson</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/crowjonah">
                     <img src="https://avatars.githubusercontent.com/u/1634397?v=4" width="100;" alt="crowjonah"/>
@@ -280,8 +280,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Mike Horn</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/Apahadi73">
                     <img src="https://avatars.githubusercontent.com/u/36856709?v=4" width="100;" alt="Apahadi73"/>
@@ -324,8 +324,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Aine Fitzgerald Coleman</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/anveshrmekala">
                     <img src="https://avatars.githubusercontent.com/u/107427943?v=4" width="100;" alt="anveshrmekala"/>
@@ -368,8 +368,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Nathan Whittaker</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/oknoway">
                     <img src="https://avatars.githubusercontent.com/u/354970?v=4" width="100;" alt="oknoway"/>
@@ -412,8 +412,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Drew Tate</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/allieorth">
                     <img src="https://avatars.githubusercontent.com/u/48034760?v=4" width="100;" alt="allieorth"/>
@@ -428,8 +428,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Aaron Shetland</b></sub>
                 </a>
             </td>
-		</tr>
-	<tbody>
+  </tr>
+ <tbody>
 </table>
 <!-- readme: contributors,calcite-admin/- -end -->
 
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..739db527b3b 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,120 @@ 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-text-color": [
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.iconCustom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-combobox-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: `calcite-combobox-item >>> .${CSS.label} ` },
+          },
+          {
+            shadowSelector: `.${CSS.iconCustom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.iconCustom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: `calcite-combobox-item >>> .${CSS.iconCustom} ` },
+          },
+        ],
+        "--calcite-combobox-item-background-color-active": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: { press: `calcite-combobox-item >>> .${CSS.label} ` },
+        },
+        "--calcite-combobox-item-background-color-hover": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-combobox-description-text-color": [
+          {
+            shadowSelector: `.${CSS.description}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.shortText}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-combobox-description-text-color-press": [
+          {
+            shadowSelector: `.${CSS.description}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: `calcite-combobox-item >>> .${CSS.description} ` },
+          },
+          {
+            shadowSelector: `.${CSS.shortText}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: `calcite-combobox-item >>> .${CSS.shortText} ` },
+          },
+        ],
+        "--calcite-combobox-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-selected-icon-color": {
+          shadowSelector: ` .${CSS.icon} `,
+          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 b523d6461ca..9123f25c3c4 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,18 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-text-color: Specifies the component's text color.
+ * @prop --calcite-combobox-text-color-hover: Specifies the component's text color when hovered.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the component's background color when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the component's background color when hovered.
+ * @prop --calcite-combobox-selected-icon-color: Specifies the component's selected indicator icon color.
+ * @prop --calcite-combobox-description-text-color: Specifies the component's `description` and `shortHeading` text color.
+ * @prop --calcite-combobox-description-text-color-press: Specifies the component's `description` and `shortHeading` text color when hovered.
+ * @prop --calcite-combobox-heading-text-color: Specifies the component's `heading` text color.
+ */
+
 @include base-component();
 
 .scale--s {
@@ -47,8 +62,7 @@ ul:focus {
 }
 
 .label {
-  @apply text-color-3
-  focus-base
+  @apply focus-base
   relative
   box-border
   flex
@@ -57,7 +71,6 @@ ul:focus {
   cursor-pointer
   items-center
   no-underline
-  duration-150
   ease-in-out;
   @include word-break();
   justify-content: space-around;
@@ -65,6 +78,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-text-color, var(--calcite-color-text-3));
+  transition-duration: var(--calcite-animation-timing);
 }
 
 :host([disabled]) .label {
@@ -75,24 +91,25 @@ ul:focus {
   @apply focus-inset;
 }
 
+.label:hover {
+  background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
+  color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
+}
+
+.label:active {
+  background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
+}
+
 :host([selected]) .label,
 .label:active {
-  @apply text-color-1;
+  color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
 
   .description,
   .short-text {
-    @apply text-color-2;
+    color: var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2));
   }
 }
 
-.label:hover {
-  @apply text-color-1 bg-foreground-2;
-}
-
-.label:active {
-  background-color: var(--calcite-color-foreground-3);
-}
-
 .icon {
   @apply inline-flex
     opacity-0
@@ -102,7 +119,7 @@ ul:focus {
 
 :host([selected]) .icon {
   @apply opacity-100;
-  color: theme("backgroundColor.brand");
+  color: var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand));
 }
 
 .icon--custom {
@@ -124,25 +141,22 @@ ul:focus {
   white-space: nowrap;
 }
 
-.title {
-  color: var(--calcite-color-text-1);
+.heading {
+  color: var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1));
 }
 
-:host([selected]) {
-  .title {
-    @apply font-medium;
-  }
+.description,
+.short-text {
+  color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
 }
 
-.label,
-.label:hover {
-  .description,
-  .short-text {
-    @apply text-color-3;
+:host([selected]) {
+  .heading {
+    @apply font-medium;
   }
 }
 
-.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 e8b09a22735..f23a311e7df 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,
         }}
         flipRtl={this.iconFlipRtl}
         icon={this.icon || iconPath}
@@ -310,7 +310,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 362e554208a..ec6fdcf2275 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",
   label: "label",
@@ -12,7 +12,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 bd62f5b06ab..1449ee14770 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";
@@ -153,6 +153,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} ${shellPanel}
@@ -183,6 +184,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...comboboxItemTokens,
   ...comboboxTokens,
   ...datePickerTokens,
   ...DropdownTokens,
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 1ac6f6c3966..4328f6dc6c3 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -1,7 +1,29 @@
 import { html } from "../../support/formatting";
 
-export const comboboxItem = html`<calcite-combobox-item
-  icon="altitude"
-  value="altitude"
-  text-label="Altitude"
+export const comboboxItemTokens = {
+  calciteComboboxTextColor: "",
+  calciteComboboxTextColorHover: "",
+  calciteComboboxItemBackgroundColorActive: "",
+  calciteComboboxItemBackgroundColorHover: "",
+  calciteComboboxSelectedIconColor: "",
+  calciteComboboxDescriptionTextColor: "",
+  calciteComboboxDescriptionTextColorPress: "",
+  calciteComboboxHeadingTextColor: "",
+};
+
+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>`;