From 72368774066385160c318b0773d9e3c5891b45d8 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 8 Feb 2024 10:33:19 -0800
Subject: [PATCH 1/2] feat(checkbox): add component totkens

---
 .../src/components/checkbox/checkbox.scss     | 34 +++++++++++--------
 .../src/components/checkbox/checkbox.tsx      |  3 +-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index a96fabbcaa7..01d4462fcf8 100644
--- 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-box-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-box-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,8 +39,7 @@
   }
 
   .check-svg {
-    @apply bg-foreground-1
-      pointer-events-none
+    @apply pointer-events-none
       box-border
       block
       overflow-hidden
@@ -39,15 +47,15 @@
       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-box-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-box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
+
   .toggle:focus {
     @apply focus-outset-danger;
   }
@@ -55,16 +63,12 @@
 
 :host([checked]),
 :host([indeterminate]) {
-  .check-svg {
-    @apply bg-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
-  }
+  --calcite-checkbox-box-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-box-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
index 2049fffbb5e..12dcff6735b 100644
--- 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;

From 9f2e77c3970d6409f12f35cf07cef17fe4a6d86a Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 22 Feb 2024 11:01:19 -0800
Subject: [PATCH 2/2] fix(checkbox): shadow component token

---
 .../src/components/checkbox/checkbox.scss            | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index 01d4462fcf8..2ee668f6eb6 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.scss
+++ b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -5,13 +5,13 @@
  *
  * @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-box-shadow: defines the box shadow 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-box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
   --calcite-checkbox-icon-color: var(--calcite-color-background);
 }
 
@@ -48,13 +48,13 @@
       stroke-1
       transition-default;
     background-color: var(--calcite-checkbox-background-color);
-    box-shadow: var(--calcite-checkbox-box-shadow);
+    box-shadow: var(--calcite-checkbox-shadow);
     color: var(--calcite-checkbox-icon-color);
   }
 }
 
 :host([status="invalid"]:not([checked])) {
-  --calcite-checkbox-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;
@@ -63,12 +63,12 @@
 
 :host([checked]),
 :host([indeterminate]) {
-  --calcite-checkbox-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 {
-  --calcite-checkbox-box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
+  --calcite-checkbox-shadow: inset 0 0 0 2px var(--calcite-color-brand);
 }
 
 .toggle {