feat(switch): add component tokens

packages/calcite-components/src/components/block-section/block-section.scss

@@ -4,6 +4,15 @@
   color: var(--calcite-color-text-2);
 }
 
+calcite-switch {
+  // --calcite-switch-background-color: var(--calcite-block-section-switch-background-color);
+  // --calcite-switch-border-color: var(--calcite-block-section-switch-border-color);
+  // --calcite-switch-corner-radius: var(--calcite-block-section-switch-corner-radius);
+  // --calcite-switch-handle-background-color: var(--calcite-block-section-switch-handle-background-color);
+  // --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color);
+  // --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow);
+}
+
 :host([open]) {
   @apply border-b-color-3
     border-0

packages/calcite-components/src/components/switch/switch.e2e.ts

@@ -1,5 +1,15 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import {
+  accessible,
+  disabled,
+  formAssociated,
+  hidden,
+  HYDRATED_ATTR,
+  labelable,
+  themed,
+} from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
 
 describe("calcite-switch", () => {
   it("renders with correct default attributes", async () => {
@@ -131,4 +141,35 @@ describe("calcite-switch", () => {
     const element = await page.find("calcite-switch");
     expect(element).toEqualAttribute("scale", "m");
   });
+
+  describe("themed", () => {
+    describe("default", () => {
+      themed(html`calcite-switch`, {
+        "--calcite-switch-background-color": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-switch-border-color": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-switch-corner-radius": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-switch-handle-background-color": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-switch-handle-border-color": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-switch-handle-shadow": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "boxShadow",
+        },
+      });
+    });
+  });
 });

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

@@ -1,3 +1,16 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-switch-background-color: Specifies the component's background color.
+ * @prop --calcite-switch-border-color: Specifies the component's border color.
+ * @prop --calcite-switch-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-switch-handle-background-color: Specifies the handle's background color.
+ * @prop --calcite-switch-handle-border-color: Specifies the handle's border color.
+ * @prop --calcite-switch-handle-shadow: Specifies the handle's shadow.
+ */
+
 // sizes
 :host([scale="s"]) {
   .container {
@@ -52,60 +65,63 @@
 }
 
 .track {
-  @apply bg-foreground-2
-    border-color-2
-    pointer-events-none
+  @apply pointer-events-none
     relative
     box-border
     inline-block
-    rounded-full
     border
     border-solid
     align-top
     focus-base;
+
+  border-radius: var(--calcite-switch-corner-radius, 9999px);
+  border-color: var(--calcite-switch-border-color, var(--calcite-color-border-2));
+  background-color: var(--calcite-switch-background-color, var(--calcite-color-foreground-2));
 }
 
 .container:focus .track {
   @apply focus-outset;
 }
 
 .handle {
-  @apply bg-foreground-1
-    border-color-input
-    pointer-events-none
+  @apply pointer-events-none
     absolute
     block
-    rounded-full
     border-2
     border-solid
     transition-all
     duration-150
     ease-in-out;
   inset-block-start: -1px;
   inset-inline: -1px theme("inset.auto");
+  background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-border-input));
+  border-radius: var(--calcite-switch-corner-radius, 9999px);
+  box-shadow: var(--calcite-switch-handle-shadow);
 }
 
-.container:hover,
-.container:focus {
+:host(:hover:not([disabled])),
+:host(:focus:not([disabled])) {
   .handle {
-    @apply border-color-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
+    box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand));
   }
 }
 
 :host([checked]) {
   .track {
-    @apply bg-brand border-color-brand-hover;
+    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand-hover));
+    background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
   }
   .handle {
-    @apply border-color-brand;
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
     inset-inline: theme("inset.auto") -1px;
   }
 
-  .container:hover {
+  &:host(:hover:not([disabled])) {
     .handle {
-      @apply border-color-brand-hover;
-      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+      border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));
+      box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand-hover));
     }
   }
 }

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

@@ -32,6 +32,7 @@ import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
+import { switchTokens } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
 import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
@@ -143,6 +144,7 @@ const componentTokens = {
   ...popoverTokens,
   ...progressTokens,
   ...inputTokens,
+  ...switchTokens,
   ...textAreaTokens,
   ...tileTokens,
   ...navigationTokens,

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

@@ -1,5 +1,14 @@
 import { html } from "../../support/formatting";
 
+export const switchTokens = {
+  calciteSwitchBackgroundColor: "",
+  calciteSwitchBorderColor: "",
+  calciteSwitchHandleBorderColor: "",
+  calciteSwitchHandleBackgroundColor: "",
+  calciteSwitchHandleShadow: "",
+  calciteSwitchCornerRadius: "",
+};
+
 export const calciteSwitch = html`
   <calcite-label layout="inline">
     <calcite-switch scale="m" checked></calcite-switch>

packages/calcite-components/src/demos/switch.html

@@ -155,6 +155,32 @@ <h1 style="margin: 0 auto; text-align: center">Switch</h1>
           console.log("Basic switch changed by <calcite-switch>", e.target.checked);
         });
       </script>
+
+      <hr />
+      <!-- A horizontal line -->
+
+      <!-- Themed -->
+      <div class="parent">
+        <style>
+          .themed-switch {
+            --calcite-switch-background-color: red;
+            --calcite-switch-border-color: red;
+            --calcite-switch-handle-border-color: purple;
+            --calcite-switch-handle-background-color: purple;
+            --calcite-switch-handle-shadow: 0 0 0 2px white;
+            --calcite-switch-corner-radius: 10px;
+          }
+        </style>
+        <div class="child right-aligned-text">Themed</div>
+
+        <div class="child">
+          <calcite-switch class="themed-switch" checked></calcite-switch>
+        </div>
+
+        <div class="child">
+          <calcite-switch class="themed-switch"></calcite-switch>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>