refactor(switch): simplify switch CSS props (#8966)

**Related Issue:** #7180 ## Summary Drops shadow CSS prop in favor of border for thumb border effect. Removes the following component tokens (CSS props): * `--calcite-switch-handle-shadow` * `--calcite-block-section-switch-handle-shadow` * `--calcite-block-section-switch-handle-shadow-hover` Stems from #8899 (comment).
Esri · Mar 19, 2024 · e81013b · e81013b
1 parent ceb60da
commit e81013b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -11,8 +11,6 @@
  * @prop --calcite-block-section-switch-handle-background-color: Specifies the background color of the switch handle.
  * @prop --calcite-block-section-switch-handle-border-color-hover: Specifies the border color of the switch handle on hover.
  * @prop --calcite-block-section-switch-handle-border-color: Specifies the border color of the switch handle.
- * @prop --calcite-block-section-switch-handle-shadow-hover: Specifies the shadow of the switch handle on hover.
- * @prop --calcite-block-section-switch-handle-shadow: Specifies the shadow of the switch handle.
  * @prop --calcite-block-section-switch-track-background-color-checked: Specifies the background color of the switch track when checked.
  * @prop --calcite-block-section-switch-track-background-color: Specifies the background color of the switch track.
  * @prop --calcite-block-section-switch-track-border-color-checked: Specifies the border color of the switch track when checked.
@@ -132,14 +130,12 @@ calcite-switch {
   --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);
   --calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color);
   --calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color);
 
   &:focus,
   &:hover {
     --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color-hover);
-    --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow-hover);
   }
 
   &[checked] {

diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
@@ -6,13 +6,16 @@
  * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-switch-handle-background-color: Specifies the background color of the component handle.
  * @prop --calcite-switch-handle-border-color: Specifies the border color of the component handle.
- * @prop --calcite-switch-handle-shadow: Specifies the shadow of the component handle.
  * @prop --calcite-switch-track-background-color: Specifies the background color of the component track.
  * @prop --calcite-switch-track-border-color: Specifies the border color of the component track.
  */
 
 :host {
   --calcite-internal-switch-border-radius: 9999px; // TODO: drop once --calcite-corner-radius is updated
+  --calcite-internal-switch-handle-border-color: var(
+    --calcite-switch-handle-border-color,
+    var(--calcite-color-border-input)
+  );
 
   @apply relative
   inline-block
@@ -59,13 +62,13 @@
   inset-block-start: -1px;
   inset-inline: -1px theme("inset.auto");
 
-  border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-border-input));
+  border-color: var(--calcite-internal-switch-handle-border-color);
   background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));
   border-radius: var(
     --calcite-switch-corner-radius,
     var(--calcite-internal-switch-border-radius, var(--calcite-corner-radius-pill))
   );
-  box-shadow: var(--calcite-switch-handle-shadow, none);
+  box-shadow: var(--calcite-internal-switch-handle-box-shadow);
   block-size: var(--calcite-internal-switch-handle-height);
   inline-size: var(--calcite-internal-switch-handle-width);
 }
@@ -95,12 +98,10 @@
   @apply focus-outset;
 }
 
+:host([checked]),
 :host(:hover),
 :host(:focus) {
-  .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));
-  }
+  --calcite-internal-switch-handle-border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
 }
 
 :host([checked]) {
@@ -110,16 +111,21 @@
   }
 
   .handle {
-    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
     inset-inline: theme("inset.auto") -1px;
   }
 }
 
+:host(:hover),
+:host(:focus),
 :host([checked]:hover) {
-  .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));
-  }
+  --calcite-internal-switch-handle-box-shadow: inset 0 0 0 1px var(--calcite-internal-switch-handle-border-color);
+}
+
+:host([checked]:hover) {
+  --calcite-internal-switch-handle-border-color: var(
+    --calcite-switch-handle-border-color,
+    var(--calcite-color-brand-hover)
+  );
 }
 
 @media (forced-colors: active) {