feat(checkbox): add component tokens (#10221)

**Related Issue:** [#7180](#7180) ## Summary Add `checkbox` component tokens. `--calcite-checkbox-shadow-color`: Specifies the component's color. `--calcite-checkbox-shadow-color-hover`: Specifies the component's color when hovered. `--calcite-checkbox-color`: Specifies the component's font color.
Esri · Sep 13, 2024 · 1d87dcf · 1d87dcf
1 parent 0e7b0ae
commit 1d87dcf
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -7852,9 +7852,7 @@ declare global {
         new (): HTMLCalciteTileSelectGroupElement;
     };
     interface HTMLCalciteTimePickerElementEventMap {
-        "calciteInternalTimePickerBlur": void;
         "calciteInternalTimePickerChange": string;
-        "calciteInternalTimePickerFocus": void;
     }
     interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteTimePickerElementEventMap>(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent<HTMLCalciteTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -13817,9 +13815,7 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
-        "onCalciteInternalTimePickerBlur"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<string>) => void;
-        "onCalciteInternalTimePickerFocus"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts
@@ -7,10 +7,12 @@ import {
   HYDRATED_ATTR,
   labelable,
   hidden,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { Scale } from "../interfaces";
 import { Direction } from "../../utils/dom";
+import { CSS } from "./resources";
 
 describe("calcite-checkbox", () => {
   describe("honors hidden attribute", () => {
@@ -219,4 +221,23 @@ describe("calcite-checkbox", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    themed(html` <calcite-checkbox name="s-unchecked" scale="s"></calcite-checkbox> `, {
+      "--calcite-checkbox-size": [
+        {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "inlineSize",
+        },
+        {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "blockSize",
+        },
+      ],
+      "--calcite-checkbox-icon-color": {
+        shadowSelector: `.${CSS.check}`,
+        targetProp: "color",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -4,16 +4,31 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-checkbox-size: Specifies the component's height and width.
+ * @prop --calcite-checkbox-border-color: Specifies the component's color.
+ * @prop --calcite-checkbox-border-color-hover: Specifies the component's color when hovered.
+ * @prop --calcite-checkbox-icon-color: Specifies the component's font color.
  */
 
 :host([scale="s"]) {
-  --calcite-checkbox-size: theme("spacing.3");
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("spacing.3"));
+    block-size: var(--calcite-checkbox-size, theme("spacing.3"));
+  }
 }
 :host([scale="m"]) {
-  --calcite-checkbox-size: theme("fontSize.n1");
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
+    block-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
+  }
 }
 :host([scale="l"]) {
-  --calcite-checkbox-size: theme("spacing.4");
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("spacing.4"));
+    block-size: var(--calcite-checkbox-size, theme("spacing.4"));
+  }
 }
 
 :host {
@@ -23,12 +38,6 @@
     select-none;
   -webkit-tap-highlight-color: transparent;
 
-  .check-svg,
-  .toggle {
-    inline-size: var(--calcite-checkbox-size);
-    block-size: var(--calcite-checkbox-size);
-  }
-
   .check-svg {
     @apply bg-foreground-1
       pointer-events-none
@@ -39,8 +48,8 @@
       stroke-current
       stroke-1
       transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
-    color: theme("backgroundColor.background");
+    box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));
+    color: var(--calcite-checkbox-icon-color, theme("backgroundColor.background"));
   }
 }
 
@@ -63,7 +72,7 @@
 :host([hovered]) .toggle,
 :host .toggle:hover {
   .check-svg {
-    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand));
   }
 }
 

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -14,7 +14,7 @@ import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
-import { checkbox } from "./custom-theme/checkbox";
+import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
@@ -128,6 +128,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...checkboxTokens,
     ...handleTokens,
     ...progressTokens,
     ...inputTokens,
@@ -149,6 +150,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...checkboxTokens,
       ...handleTokens,
       ...progressTokens,
       ...inputTokens,

diff --git a/packages/calcite-components/src/custom-theme/checkbox.ts b/packages/calcite-components/src/custom-theme/checkbox.ts
@@ -1,5 +1,11 @@
 import { html } from "../../support/formatting";
 
+export const checkboxTokens = {
+  calciteCheckboxSize: "",
+  calciteCheckboxColor: "",
+  calciteCheckboxBorderColor: "",
+};
+
 export const checkbox = html`<label>
   <calcite-checkbox indeterminate></calcite-checkbox>
   Initially indeterminate and unchecked