feat(combobox, combobox-item-group): add component tokens

packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss

@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-item-group-text-color: Specifies the text color of the component.
+ * @prop --calcite-combobox-item-group-border-color: Specifies the border color of the component.
+ */
+
 .scale--s {
   @apply text-n2h;
   --calcite-combobox-item-spacing-unit: theme("spacing.2");
@@ -24,23 +33,23 @@
 }
 
 .label {
-  @apply text-color-3 box-border flex w-full min-w-0 max-w-full;
+  @apply box-border flex w-full min-w-0 max-w-full;
 }
 
 .title {
   --calcite-combobox-item-indent-value: calc(
     var(--calcite-combobox-item-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier)
   );
   border: 0 solid;
-  @apply border-b-color-3
-    text-color-2
-    word-break
+  @apply word-break
     block
     flex-1
     border-b
     font-bold;
   padding: var(--calcite-combobox-item-spacing-unit);
   margin-inline-start: var(--calcite-combobox-item-indent-value);
+  color: var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-2));
+  border-block-end-color: var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3));
 }
 
 ::slotted(calcite-combobox-item-group:not([after-empty-group])) {

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -26,6 +26,7 @@ import {
   skipAnimations,
 } from "../../tests/utils";
 import { DEBOUNCE } from "../../utils/resources";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 import { Combobox } from "./combobox";
 
@@ -2973,4 +2974,131 @@ describe("calcite-combobox", () => {
     const combobox = await page.find("calcite-combobox");
     expect((await combobox.getProperty("selectedItems")).length).toBe(1);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const comboboxHTML = html`<calcite-combobox label="test" max-items="6" open>
+        <calcite-combobox-item-group value="Trees" label="Trees">
+          <calcite-combobox-item value="Pine" text-label="Pine">
+            <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+          </calcite-combobox-item>
+        </calcite-combobox-item-group>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
+      </calcite-combobox>`;
+
+      const comboboxTokens: ComponentTestTokens = {
+        "--calcite-combobox-input-height": {
+          shadowSelector: `.${CSS.input}`,
+          selector: "calcite-combobox",
+          targetProp: "height",
+        },
+        "--calcite-combobox-background-color": {
+          shadowSelector: `.${CSS.wrapper}`,
+          selector: "calcite-combobox",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-combobox-border-color": {
+          shadowSelector: `.${CSS.wrapper}`,
+          selector: "calcite-combobox",
+          targetProp: "borderColor",
+        },
+        "--calcite-combobox-text-color": {
+          shadowSelector: `.${CSS.wrapper}`,
+          selector: "calcite-combobox",
+          targetProp: "color",
+        },
+        "--calcite-combobox-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          selector: "calcite-combobox",
+          targetProp: "color",
+        },
+        "--calcite-combobox-icon-color-hover": {
+          shadowSelector: `.${CSS.icon}`,
+          selector: "calcite-combobox",
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-combobox-listbox-background-color": {
+          shadowSelector: `.${CSS.listContainer}`,
+          selector: "calcite-combobox",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-combobox-chip-background-color": {
+          shadowSelector: `.${CSS.chip}`,
+          selector: "calcite-combobox",
+          targetProp: "--calcite-chip-background-color",
+        },
+        "--calcite-combobox-chip-close-icon-color": {
+          shadowSelector: `.${CSS.chip}`,
+          selector: "calcite-combobox",
+          targetProp: "--calcite-chip-close-icon-color",
+        },
+        "--calcite-combobox-chip-corner-radius": {
+          shadowSelector: `.${CSS.chip}`,
+          selector: "calcite-combobox",
+          targetProp: "--calcite-chip-corner-radius",
+        },
+        "--calcite-combobox-chip-icon-color": {
+          shadowSelector: `.${CSS.chip}`,
+          selector: "calcite-combobox",
+          targetProp: "--calcite-chip-icon-color",
+        },
+        "--calcite-combobox-chip-text-color": {
+          shadowSelector: `.${CSS.chip}`,
+          selector: "calcite-combobox",
+          targetProp: "--calcite-chip-text-color",
+        },
+        "--calcite-combobox-item-group-text-color": {
+          selector: "calcite-combobox-item-group",
+          shadowSelector: ".title",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-group-border-color": {
+          selector: "calcite-combobox-item-group",
+          shadowSelector: ".title",
+          targetProp: "borderBottomColor",
+        },
+      };
+      themed(comboboxHTML, comboboxTokens);
+    });
+
+    describe("placeholder icon", () => {
+      const comboboxWithPlaceHolderIconHTML = html` <calcite-combobox
+        label="test"
+        placeholder="select element"
+        placeholder-icon="layers"
+      >
+        <calcite-combobox-item value="Trees" text-label="Trees"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox>`;
+
+      const comboboxTokens: ComponentTestTokens = {
+        "--calcite-combobox-placeholder-icon-color": {
+          shadowSelector: `.${CSS.placeholderIcon}`,
+          selector: "calcite-combobox",
+          targetProp: "color",
+        },
+      };
+      themed(comboboxWithPlaceHolderIconHTML, comboboxTokens);
+    });
+
+    describe("single select", () => {
+      const singleSelectComboboxHTML = html` <calcite-combobox label="test" selection-mode="single">
+        <calcite-combobox-item value="Trees" text-label="Trees"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
+      </calcite-combobox>`;
+
+      const comboboxTokens: ComponentTestTokens = {
+        "--calcite-combobox-text-color": {
+          shadowSelector: `.${CSS.wrapper}`,
+          selector: "calcite-combobox",
+          targetProp: "color",
+        },
+      };
+      themed(singleSelectComboboxHTML, comboboxTokens);
+    });
+  });
 });

packages/calcite-components/src/components/combobox/combobox.scss

@@ -4,6 +4,19 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-combobox-input-height: Specifies the height of the component's input.
+ * @prop --calcite-combobox-background-color: Specifies the component's background color.
+ * @prop --calcite-combobox-text-color: Specifies the component's text color.
+ * @prop --calcite-combobox-border-color: Specifies the component's border color.
+ * @prop --calcite-combobox-icon-color: Specifies the component's icon color.
+ * @prop --calcite-combobox-icon-color-hover: Specifies the component's icon color when hovered.
+ * @prop --calcite-combobox-placeholder-icon-color: Specifies the component's placeholder icon color.
+ * @prop --calcite-combobox-listbox-background-color: Specifies the background color of the component's listbox.
+ * @prop --calcite-combobox-chip-background-color: Specifies the background color of the component's chips.
+ * @prop --calcite-combobox-chip-background-color-active: Specifies the background color of the component's chips when close icon is focused with Arrow keys.
+ * @prop --calcite-combobox-chip-close-icon-color: Specifies the close icon color of the component's chips.
+ * @prop --calcite-combobox-chip-corner-radius: Specifies the corner radius of the component's chips.
+ * @prop --calcite-combobox-chip-icon-color: Specifies the icon color of the component's chips.
+ * @prop --calcite-combobox-chip-text-color: Specifies the text color of the component's chips.
  */
 
 :host {
@@ -50,19 +63,20 @@
 }
 
 .wrapper {
-  @apply bg-foreground-1
-    text-color-1
-    focus-base
+  @apply focus-base
     flex
-    border-color-input
     border
     border-solid;
   padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 
+  background-color: var(--calcite-combobox-background-color, var(--calcite-color-foreground-1));
+  color: var(--calcite-combobox-text-color, var(--calcite-color-text-1));
+  border-color: var(--calcite-combobox-border-color, var(--calcite-color-border-input));
+
   &:hover {
     .icon {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-combobox-icon-color-hover, var(--calcite-color-text-1));
     }
   }
 }
@@ -161,7 +175,7 @@
 }
 
 .placeholder-icon {
-  color: var(--calcite-color-text-3);
+  color: var(--calcite-combobox-placeholder-icon-color, var(--calcite-color-text-3));
 }
 
 .input-wrap {
@@ -196,7 +210,7 @@
   @apply flex-none;
 
   .icon {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-combobox-icon-color, var(--calcite-color-text-3));
   }
 }
 
@@ -219,10 +233,10 @@
 }
 
 .list-container {
-  @apply bg-foreground-1
-    max-h-menu
+  @apply max-h-menu
     overflow-y-auto;
   inline-size: var(--calcite-dropdown-width, 100%);
+  background-color: var(--calcite-combobox-listbox-background-color, var(--calcite-color-foreground-1));
 }
 
 .list {
@@ -235,15 +249,22 @@
 
 calcite-chip {
   --calcite-animation-timing: 0;
+  --calcite-chip-background-color: var(--calcite-combobox-chip-background-color);
+  --calcite-chip-close-icon-color: var(--calcite-combobox-chip-close-icon-color);
+  --calcite-chip-corner-radius: var(--calcite-combobox-chip-corner-radius);
+  --calcite-chip-icon-color: var(--calcite-combobox-chip-icon-color);
+  --calcite-chip-text-color: var(--calcite-combobox-chip-text-color);
 }
-
 .chip {
   margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   max-inline-size: 100%;
 }
 
 .chip--active {
-  @apply bg-foreground-3;
+  --calcite-chip-background-color: var(
+    --calcite-combobox-chip-background-color-active,
+    var(--calcite-color-foreground-3)
+  );
 }
 
 .chip--invisible {

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1418,8 +1418,8 @@ export class Combobox
     const { activeChipIndex, readOnly, scale, selectionMode, messages } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
-        chip: true,
-        "chip--active": activeChipIndex === i,
+        [CSS.chip]: true,
+        [CSS.chipActive]: activeChipIndex === i,
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const itemLabel = getLabel(item);
@@ -1739,9 +1739,9 @@ export class Combobox
         <div
           ariaLive="polite"
           class={{
-            wrapper: true,
-            "wrapper--single": singleSelectionMode || !this.selectedItems.length,
-            "wrapper--active": open,
+            [CSS.wrapper]: true,
+            [CSS.wrapperSingle]: singleSelectionMode || !this.selectedItems.length,
+            [CSS.wrapperActive]: open,
           }}
           onClick={this.clickHandler}
           onKeyDown={this.keyDownHandler}

packages/calcite-components/src/components/combobox/resources.ts

@@ -5,7 +5,9 @@ export const AllComboboxChildrenSelector = `${ComboboxItemSelector}, ${ComboboxI
 export const CSS = {
   input: "input",
   inputHidden: "input--hidden",
+  chip: "chip",
   chipInvisible: "chip--invisible",
+  chipActive: "chip--active",
   selectionDisplayFit: "selection-display-fit",
   selectionDisplaySingle: "selection-display-single",
   listContainer: "list-container",
@@ -14,6 +16,9 @@ export const CSS = {
   selectedIcon: "selected-icon",
   floatingUIContainer: "floating-ui-container",
   screenReadersOnly: "screen-readers-only",
+  wrapper: "wrapper",
+  wrapperSingle: "wrapper--single",
+  wrapperActive: "wrapper--active",
 };
 
 export const IDS = {

packages/calcite-components/src/custom-theme.stories.ts

@@ -54,6 +54,12 @@ import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 import { menuItem, menuItemTokens } from "./custom-theme/menu-item";
+import {
+  comboboxTokens,
+  comboboxWithPlaceHolderIcon,
+  defaultCombobox,
+  singleSelectCombobox,
+} from "./custom-theme/combobox";
 import { panel, panelTokens } from "./custom-theme/panel";
 
 const globalTokens = {
@@ -151,6 +157,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       </div>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
       <div class="demo-column">${menuItem}</div>
+      <div class="demo-column">${defaultCombobox} ${singleSelectCombobox} ${comboboxWithPlaceHolderIcon}</div>
     </div>
     <div class="demo-row">
       <div class="demo-column">${datePicker}</div>
@@ -175,6 +182,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...comboboxTokens,
   ...datePickerTokens,
   ...DropdownTokens,
   ...DropdownItemTokens,

packages/calcite-components/src/custom-theme/combobox.ts

@@ -0,0 +1,41 @@
+import { html } from "../../support/formatting";
+
+export const comboboxTokens = {
+  calciteComboboxInputHeight: "",
+  calciteComboboxBackgroundColor: "",
+  calciteComboboxTextColor: "",
+  calciteComboboxBorderColor: "",
+  calciteComboboxIconColor: "",
+  calciteComboboxIconColorHover: "",
+  calciteComboboxPlaceholderIconColor: "",
+  calciteComboboxListboxBackgroundColor: "",
+  calciteComboboxChipBackgroundColor: "",
+  calciteComboboxChipTextColor: "",
+  calciteComboboxChipIconColor: "",
+  calciteComboboxChipCloseIconColor: "",
+  calciteComboboxChipCornerRadius: "",
+  calciteComboboxItemGroupTextColor: "",
+  calciteComboboxItemGroupBorderColor: "",
+};
+
+export const defaultCombobox = html`<calcite-combobox label="test" max-items="6" open>
+  <calcite-combobox-item-group value="Trees" label="Trees">
+    <calcite-combobox-item value="Pine" text-label="Pine">
+      <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+    </calcite-combobox-item>
+  </calcite-combobox-item-group>
+  <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+  <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
+</calcite-combobox>`;
+
+export const singleSelectCombobox = html`<calcite-combobox label="test" selection-mode="single">
+  <calcite-combobox-item value="Trees" text-label="Trees"></calcite-combobox-item>
+  <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+  <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
+</calcite-combobox>`;
+
+export const comboboxWithPlaceHolderIcon = html`<calcite-combobox label="test" placeholder-icon="layers">
+  <calcite-combobox-item value="Trees" text-label="Trees"></calcite-combobox-item>
+  <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+  <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+</calcite-combobox>`;