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

**Related Issue:** #7180 ## Summary Adds Checkbox Component tokens
Esri · Feb 22, 2024 · 45eedc7 · 45eedc7
1 parent d8d2bdd
commit 45eedc7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -3,9 +3,18 @@
  *
  * 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-size: defines the checkbox's size vertically and horizontally.
+ * @prop --calcite-checkbox-background-color: defines the background color of the checkbox.
+ * @prop --calcite-checkbox-shadow: defines the box shadow of the checkbox.
+ * @prop --calcite-checkbox-icon-color: defines the icon color of the checkbox.
  */
 
+:host {
+  --calcite-checkbox-background-color: var(--calcite-color-foreground-1);
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
+  --calcite-checkbox-icon-color: var(--calcite-color-background);
+}
+
 :host([scale="s"]) {
   --calcite-checkbox-size: theme("spacing.3");
 }
@@ -30,41 +39,36 @@
   }
 
   .check-svg {
-    @apply bg-foreground-1
-      pointer-events-none
+    @apply pointer-events-none
       box-border
       block
       overflow-hidden
       fill-current
       stroke-current
       stroke-1
       transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
-    color: theme("backgroundColor.background");
+    background-color: var(--calcite-checkbox-background-color);
+    box-shadow: var(--calcite-checkbox-shadow);
+    color: var(--calcite-checkbox-icon-color);
   }
 }
 
 :host([status="invalid"]:not([checked])) {
-  .check-svg {
-    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
+
   .toggle:focus {
     @apply focus-outset-danger;
   }
 }
 
 :host([checked]),
 :host([indeterminate]) {
-  .check-svg {
-    @apply bg-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+  --calcite-checkbox-background-color: var(--calcite-color-brand);
 }
 :host([hovered]) .toggle,
 :host .toggle:hover {
-  .check-svg {
-    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 2px var(--calcite-color-brand);
 }
 
 .toggle {

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -59,8 +59,7 @@ export class Checkbox
    *
    * When not set, the component will be associated with its ancestor form element, if any.
    */
-  @Prop({ reflect: true })
-  form: string;
+  @Prop({ reflect: true }) form: string;
 
   /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
   @Prop({ reflect: true, mutable: true }) guid: string;