feat(switch): enhance component's colors for a11y and usability (#11951)

**Related Issue:**
[#10483](#10483)

## Summary

- Increase contrast and visual presence of idle state.
- Simplify track and handle to one color and remove strokes.
- Simplify hover & focus state: remove hover and focus ring on the
handle.

Author: aPreciado88

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

@@ -151,9 +151,10 @@ describe("calcite-switch", () => {
           shadowSelector: `.${CSS.track}`,
           targetProp: "backgroundColor",
         },
-        "--calcite-switch-border-color": {
+        "--calcite-switch-background-color-hover": {
           shadowSelector: `.${CSS.track}`,
-          targetProp: "borderColor",
+          targetProp: "backgroundColor",
+          state: "hover",
         },
         "--calcite-switch-corner-radius": {
           shadowSelector: `.${CSS.track}`,
@@ -163,6 +164,15 @@ describe("calcite-switch", () => {
           shadowSelector: `.${CSS.handle}`,
           targetProp: "backgroundColor",
         },
+      });
+    });
+
+    describe("deprecated", () => {
+      themed(html`calcite-switch`, {
+        "--calcite-switch-border-color": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "borderColor",
+        },
         "--calcite-switch-handle-border-color": {
           shadowSelector: `.${CSS.handle}`,
           targetProp: "borderColor",

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

@@ -4,11 +4,12 @@
  * 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-background-color-hover: Specifies the component's background color when hovered or pressed.
+ * @prop --calcite-switch-border-color: [Deprecated] No longer necessary. 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.
+ * @prop --calcite-switch-handle-border-color: [Deprecated] No longer necessary. Specifies the handle's border color.
+ * @prop --calcite-switch-handle-shadow: [Deprecated] No longer necessary. Specifies the handle's shadow.
  */
 
 // sizes
@@ -69,59 +70,48 @@
     relative
     box-border
     inline-block
-    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));
+  border-color: var(--calcite-switch-border-color);
+  background-color: var(--calcite-switch-background-color, var(--calcite-color-border-input));
 }
 
 .container:focus .track {
   @apply focus-outset;
 }
 
+.container:hover .track {
+  background-color: var(--calcite-switch-background-color-hover, var(--calcite-color-text-3));
+}
+
 .handle {
   @apply pointer-events-none
     absolute
     block
-    border-2
-    border-solid
     transition-all
     duration-150
     ease-in-out;
-  inset-block-start: -1px;
-  inset-inline: -1px theme("inset.auto");
+  inset-block-start: var(--calcite-spacing-base);
+  inset-inline: var(--calcite-spacing-base) 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-color: var(--calcite-switch-handle-border-color);
   border-radius: var(--calcite-switch-corner-radius, 9999px);
   box-shadow: var(--calcite-switch-handle-shadow);
 }
 
-:host(:hover:not([disabled])),
-:host(:focus:not([disabled])) {
-  .handle {
-    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 {
-    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand-hover));
     background-color: var(--calcite-switch-background-color, var(--calcite-color-brand));
   }
   .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
-    inset-inline: theme("inset.auto") -1px;
+    inset-inline: auto var(--calcite-spacing-base);
   }
 
   &:host(:hover:not([disabled])) {
-    .handle {
-      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));
+    .track {
+      background-color: var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover));
     }
   }
 }

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

@@ -2,6 +2,7 @@ import { html } from "../../support/formatting";
 
 export const switchTokens = {
   calciteSwitchBackgroundColor: "",
+  calciteSwitchBackgroundColorHover: "",
   calciteSwitchBorderColor: "",
   calciteSwitchHandleBorderColor: "",
   calciteSwitchHandleBackgroundColor: "",