feat(select): add component tokens

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,61 @@ 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-weight": {
+          shadowSelector: `.${CSS.select}`,
+          targetProp: "fontWeight",
+        },*/
+        /*"--calcite-select-spacing-inline": {
+          shadowSelector: `.${CSS.select}`,
+          targetProp: "paddingInline",
+        },*/
+        "--calcite-select-text-color": {
+          shadowSelector: `.${CSS.select}`,
+          targetProp: "color",
+        },
+        "--calcite-select-size": {
+          shadowSelector: `.${CSS.wrapper}`,
+          targetProp: "inlineSize",
+        },
+        "--calcite-select-block-size": {
+          shadowSelector: `.${CSS.wrapper}`,
+          targetProp: "blockSize",
+        },
+        "--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.wrapper}`,
+          targetProp: "color",
+          state: { hover: { attribute: "class", value: CSS.icon } },
+        },*/
+      },
+    );
+  });
 });

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

@@ -3,49 +3,54 @@
  *
  * 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-weight: Specifies the font weight of `calcite-option`s in the component.
+ * @prop --calcite-select-spacing-inline: Specifies the inline padding 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-size: Specifies the component's width.
+ * @prop --calcite-select-block-size: Specifies the component's height.
+ * @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 {
   @extend %component-spacing;
   @apply flex flex-col;
-  font-size: var(--calcite-select-font-size);
-  font-weight: var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular));
 }
 
 .wrapper {
   @apply relative flex items-stretch;
-  inline-size: var(--select-width);
-  block-size: var(--calcite-internal-select-block-size, #{$calcite-size-32});
+  inline-size: var(--calcite-select-size);
+  block-size: var(--calcite-select-block-size, var(--calcite-internal-select-block-size));
   &:focus-within,
   &: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-select-spacing-inline: theme("spacing.2") theme("spacing.8");
+  --calcite-internal-font-size: theme("fontSize.n2h");
+  --calcite-internal-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-select-spacing-inline: theme("spacing.3") theme("spacing.10");
+  --calcite-internal-font-size: theme("fontSize.n1h");
+  --calcite-internal-spacing-inline: theme("spacing.3") theme("spacing.10");
   --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md);
+  --calcite-internal-select-block-size: #{$calcite-size-32};
 }
 
 :host([scale="l"]) {
-  --calcite-select-font-size: theme("fontSize.0h");
-  --calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12");
+  --calcite-internal-font-size: theme("fontSize.0h");
+  --calcite-internal-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 +69,6 @@
 
 .select {
   @apply bg-foreground-1
-    border-color-input
-    text-color-2
     font-inherit
     focus-base
     m-0
@@ -76,11 +79,12 @@
     truncate
     rounded-none
     border-solid;
-  font-size: inherit;
-  font-weight: inherit;
+  font-size: var(--calcite-select-font-size, var(--calcite-internal-font-size));
+  font-weight: var(--calcite-select-text-weight, var(--calcite-font-weight-regular));
   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-inline: var(--calcite-select-spacing-inline, var(--calcite-internal-spacing-inline));
   padding-block: var(--calcite-internal-select-spacing-block);
   border-inline-end-width: theme("borderWidth.0");
   line-height: var(--calcite-select-line-height, normal);
@@ -97,11 +101,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));
   }
 }
 

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 { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
 import { tabs, tabsBordered, tabsTokens } from "./custom-theme/tabs";
@@ -119,7 +120,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>
@@ -167,6 +168,7 @@ const componentTokens = {
   ...noticeTokens,
   ...popoverTokens,
   ...progressTokens,
+  ...selectTokens,
   ...sliderTokens,
   ...switchTokens,
   ...tabsTokens,

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

@@ -0,0 +1,19 @@
+import { html } from "../../support/formatting";
+
+export const selectTokens = {
+  calciteSelectFontSize: "",
+  calciteSelectTextWeight: "",
+  calciteSelectSpacingInline: "",
+  calciteSelectTextColor: "",
+  calciteSelectSelectSize: "",
+  calciteSelectBlockSize: "",
+  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>`;