feat(combobox-item): add component tokens

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 -->
 

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);
+    });
+  });
 });

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,14 +71,16 @@ ul:focus {
   cursor-pointer
   items-center
   no-underline
-  duration-150
   ease-in-out;
   @include word-break();
   justify-content: space-around;
   gap: var(--calcite-combobox-item-spacing-unit-l);
   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);

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,