test(checkbox): add component token E2E tests (#9603)

**Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · dc89196 · dc89196
1 parent c8cc2d2
commit dc89196
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 9 deletions.
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", () => {
@@ -211,4 +213,60 @@ describe("calcite-checkbox", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-checkbox", {
+        "--calcite-checkbox-background-color": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-checkbox-icon-color": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "color",
+        },
+        "--calcite-checkbox-border-color": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "boxShadow",
+        },
+        "--calcite-checkbox-border-color-hover": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "boxShadow",
+          state: "hover",
+        },
+        "--calcite-checkbox-size": [
+          {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "inlineSize",
+          },
+          {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "blockSize",
+          },
+        ],
+      });
+    });
+
+    describe("checked", () => {
+      themed(html`<calcite-checkbox checked></calcite-checkbox>`, {
+        "--calcite-checkbox-background-color-checked": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-checkbox-border-color-checked": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "boxShadow",
+        },
+      });
+    });
+
+    describe("invalid", () => {
+      themed(html`<calcite-checkbox status="invalid"></calcite-checkbox>`, {
+        "--calcite-checkbox-border-color-invalid": {
+          shadowSelector: `.${CSS.check}`,
+          targetProp: "boxShadow",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -3,13 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-checkbox-background-color: defines the background color of the component
  * @prop --calcite-checkbox-background-color-checked: defines the background color of the component when it's in a ::checked state
+ * @prop --calcite-checkbox-background-color: defines the background color of the component
+ * @prop --calcite-checkbox-border-color-checked: defines the border color of the component in a ::checked state
+ * @prop --calcite-checkbox-border-color-hover: defines the border color of the component in a :hover state.
+ * @prop --calcite-checkbox-border-color-invalid: defines the border color of the component in an invalid state.
+ * @prop --calcite-checkbox-border-color: defines the border color of the component
  * @prop --calcite-checkbox-icon-color: defines the icon color of the checkbox.
- * @prop --calcite-checkbox-shadow: defines the shadow of the component
- * @prop --calcite-checkbox-shadow-checked: defines the shadow of the component in a ::checked state
- * @prop --calcite-checkbox-shadow-hover: defines the shadow of the component in a :hover state.
- * @prop --calcite-checkbox-shadow-invalid: defines the shadow of the component in an invalid state.
  * @prop --calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
  */
 
@@ -31,7 +31,7 @@
     stroke-1
     transition-default;
   background-color: var(--calcite-checkbox-background-color, var(--calcite-color-foreground-1));
-  box-shadow: var(--calcite-checkbox-shadow, inset 0 0 0 1px var(--calcite-color-border-input));
+  box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));
   color: var(--calcite-checkbox-icon-color, var(--calcite-color-background));
 }
 
@@ -92,7 +92,7 @@
 
 :host([status="invalid"]:not([checked])) {
   .check-svg {
-    box-shadow: var(--calcite-checkbox-shadow-invalid, inset 0 0 0 1px var(--calcite-color-status-danger));
+    box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color-invalid, var(--calcite-color-status-danger));
   }
 
   .toggle:focus {
@@ -103,12 +103,12 @@
 :host([indeterminate]) {
   .check-svg {
     background-color: var(--calcite-checkbox-background-color-checked, var(--calcite-color-brand));
-    box-shadow: var(--calcite-checkbox-shadow-checked, inset 0 0 0 1px var(--calcite-color-brand));
+    box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color-checked, var(--calcite-color-brand));
   }
 }
 :host([hovered]) .toggle,
 :host .toggle:hover {
-  box-shadow: var(--calcite-checkbox-shadow-hover, 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));
 }
 
 @include disabled();