feat(select): add component tokens (#11178)

**Related Issue:** [#7180](#7180) ## Summary Add `select` component tokens. `--calcite-select-font-size`: Specifies the font size of `calcite-option`s in the component. `--calcite-select-text-weight`: Specifies the font weight of `calcite-option`s in the component. `--calcite-select-text-color`: Specifies the text color of `calcite-option`s in the component. `--calcite-select-border-color`: Specifies the component's border color. `--calcite-select-icon-color`: Specifies the component's icon color. `--calcite-select-icon-color-hover`: Specifies the component's icon color when hovered or active.
Esri · Jan 10, 2025 · e878e07 · e878e07
1 parent fb7f6ae
commit e878e07
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 12 deletions.
diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts
@@ -11,6 +11,7 @@ import {
   labelable,
   reflects,
   renders,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -439,4 +440,45 @@ describe("calcite-select", () => {
       },
     );
   });
+
+  describe("theme", () => {
+    themed(
+      html`
+        <calcite-select label="calcite select">
+          <calcite-option value="high">uno</calcite-option>
+          <calcite-option value="medium">dos</calcite-option>
+          <calcite-option value="low">tres</calcite-option>
+        </calcite-select>
+      `,
+      {
+        "--calcite-select-font-size": {
+          shadowSelector: `.${CSS.select}`,
+          targetProp: "fontSize",
+        },
+        "--calcite-select-text-color": {
+          shadowSelector: `.${CSS.select}`,
+          targetProp: "color",
+        },
+        "--calcite-select-border-color": [
+          {
+            shadowSelector: `.${CSS.select}`,
+            targetProp: "borderColor",
+          },
+          {
+            shadowSelector: `.${CSS.iconContainer}`,
+            targetProp: "borderColor",
+          },
+        ],
+        "--calcite-select-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-select-icon-color-hover": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+          state: "hover",
+        },
+      },
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
@@ -3,9 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-select-font-size: The font size of `calcite-option`s in the component.
- * @prop --calcite-select-spacing: The padding around the selected option text.
- * @prop --calcite-select-text-color: The text color of the component.
+ * @prop --calcite-select-font-size: Specifies the font size of `calcite-option`s in the component.
+ * @prop --calcite-select-text-color: Specifies the text color of `calcite-option`s in the component.
+ * @prop --calcite-select-border-color: Specifies the component's border color.
+ * @prop --calcite-select-icon-color: Specifies the component's icon color.
+ * @prop --calcite-select-icon-color-hover: Specifies the component's icon color when hovered or active.
  */
 
 :host {
@@ -23,28 +25,28 @@
   &:active,
   &:hover {
     .icon {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-select-icon-color-hover, var(--calcite-color-text-1));
     }
   }
 }
 
 @include disabled();
 
 :host([scale="s"]) {
-  --calcite-select-font-size: theme("fontSize.n2h");
+  --calcite-internal-select-font-size: theme("fontSize.n2h");
   --calcite-select-spacing-inline: theme("spacing.2") theme("spacing.8");
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);
   --calcite-internal-select-block-size: #{$calcite-size-24};
 }
 
 :host([scale="m"]) {
-  --calcite-select-font-size: theme("fontSize.n1h");
+  --calcite-internal-select-font-size: theme("fontSize.n1h");
   --calcite-select-spacing-inline: theme("spacing.3") theme("spacing.10");
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md);
 }
 
 :host([scale="l"]) {
-  --calcite-select-font-size: theme("fontSize.0h");
+  --calcite-internal-select-font-size: theme("fontSize.0h");
   --calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12");
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg);
   --calcite-internal-select-block-size: #{$calcite-size-44};
@@ -64,8 +66,6 @@
 
 .select {
   @apply bg-foreground-1
-    border-color-input
-    text-color-2
     font-inherit
     focus-base
     m-0
@@ -76,9 +76,10 @@
     truncate
     rounded-none
     border-solid;
-  font-size: inherit;
   font-weight: inherit;
+  font-size: var(--calcite-select-font-size, var(--calcite-internal-select-font-size));
   color: var(--calcite-select-text-color, var(--calcite-color-text-2));
+  border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
   border-width: var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));
   padding-inline: var(--calcite-select-spacing-inline);
   padding-block: var(--calcite-internal-select-spacing-block);
@@ -97,11 +98,12 @@ select:disabled {
 .icon-container {
   @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;
   inset-inline-end: theme("inset.0");
+  border-color: var(--calcite-select-border-color, var(--calcite-color-border-input));
   border-inline-width: theme("borderWidth.0")
     var(--calcite-select-internal-icon-border-inline-end-width, theme("borderWidth.DEFAULT"));
   padding-inline: var(--calcite-internal-select-icon-container-padding-inline);
   .icon {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-select-icon-color, var(--calcite-color-text-3));
   }
 }
 

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -38,6 +38,7 @@ import { pagination } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
+import { select, selectTokens } from "./custom-theme/select";
 import { rating, ratingTokens } from "./custom-theme/rating";
 import { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
@@ -121,7 +122,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div style="width: 40px; height: 40px;">${actionMenu}</div>
           ${icon}
         </div>
-        ${input} ${inputNumber} ${inputText}
+        ${input} ${inputNumber} ${inputText} ${select}
       </div>
       <div class="demo-column">
         <div>${card}</div>
@@ -173,6 +174,7 @@ const componentTokens = {
   ...popoverTokens,
   ...progressTokens,
   ...ratingTokens,
+  ...selectTokens,
   ...sliderTokens,
   ...switchTokens,
   ...tabsTokens,

diff --git a/packages/calcite-components/src/custom-theme/select.ts b/packages/calcite-components/src/custom-theme/select.ts
@@ -0,0 +1,15 @@
+import { html } from "../../support/formatting";
+
+export const selectTokens = {
+  calciteSelectFontSize: "",
+  calciteSelectTextColor: "",
+  calciteSelectBorderColor: "",
+  calciteSelectIconColor: "",
+  calciteSelectIconColorHover: "",
+};
+
+export const select = html`<calcite-select>
+  <calcite-option>uno</calcite-option>
+  <calcite-option>dos</calcite-option>
+  <calcite-option>tres</calcite-option>
+</calcite-select>`;