feat(combobox-item): add component tokens

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.iconCustom}`,
+            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.iconCustom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.iconCustom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.iconCustom } },
+          },
+        ],
+        "--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-icon-color-selected": {
+          shadowSelector: ` .${CSS.iconCustom} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+      };
+      themed(selectedComboboxItemHTML, comboboxItemTokens);
+    });
+  });
 });

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 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-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.
+ */
+
 @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,14 +73,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-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,35 +104,36 @@ 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:hover {
+  background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
 }
 
 .label:active {
-  background-color: var(--calcite-color-foreground-3);
+  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;
-  color: theme("borderColor.color.1");
 }
 
 .icon--custom {
   margin-block-start: -1px;
 }
 
 .icon--selected {
-  @apply text-color-1;
+  color: var(--calcite-combobox-icon-color-selected, var(--calcite-color-text-1));
 }
 
 .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-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-description-text-color, var(--calcite-color-text-3));
 }
 
-.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,
           [CSS.iconSelected]: this.icon && this.selected,
         }}
         flipRtl={this.iconFlipRtl}
@@ -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,

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",
@@ -14,7 +14,7 @@ export const CSS = {
   shortText: "short-text",
   single: "label--single",
   textContainer: "text-container",
-  title: "title",
+  heading: "heading",
 };
 
 export const SLOTS = {

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,

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: "",
+  calciteComboboxIconColorSelected: "",
+  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>`;