feat(switch): add disabled handle opacity tokens

PiperOrigin-RevId: 531346467
material-components · May 12, 2023 · c623c94 · c623c94
1 parent a631ea9
commit c623c94
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 41 deletions.
diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss
@@ -12,7 +12,7 @@
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
-$_easing-standard: map.get($_md-sys-motion, easing-standard);
+$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
   .handle-container {
@@ -44,30 +44,22 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     border-end-start-radius: var(--_handle-shape-end-start);
     height: var(--_unselected-handle-height);
     width: var(--_unselected-handle-width);
-    background-color: var(--_selected-handle-color);
 
     transform-origin: center;
-    transition-property: height, width, background-color;
-    transition-duration: 250ms, 250ms, 67ms;
-    transition-timing-function: $_easing-standard, $_easing-standard, linear;
+    transition-property: height, width;
+    transition-duration: 250ms, 250ms;
+    transition-timing-function: $_easing-standard, $_easing-standard;
     z-index: 0;
   }
 
   .handle::before {
     content: '';
     display: flex;
+    inset: 0;
     position: absolute;
-    height: 100%;
-    width: 100%;
     border-radius: inherit;
     box-sizing: border-box;
-
-    transition: opacity 67ms linear;
-  }
-
-  .switch--selected .handle::before {
-    // When selected, turn off ::before
-    opacity: 0;
+    transition: background-color 67ms linear;
   }
 
   .switch:disabled .handle,
@@ -89,23 +81,28 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     transition-duration: 100ms;
   }
 
-  .switch--selected:hover .handle {
+  .switch--selected .handle::before {
+    background-color: var(--_selected-handle-color);
+  }
+
+  .switch--selected:hover .handle::before {
     background-color: var(--_selected-hover-handle-color);
   }
 
-  .switch--selected:focus-visible .handle {
+  .switch--selected:focus-visible .handle::before {
     background-color: var(--_selected-focus-handle-color);
   }
 
-  .switch--selected:active .handle {
+  .switch--selected:active .handle::before {
     background-color: var(--_selected-pressed-handle-color);
   }
 
-  .switch--selected:disabled .handle {
+  .switch--selected:disabled .handle::before {
     background-color: var(--_disabled-selected-handle-color);
+    opacity: var(--_disabled-selected-handle-opacity);
   }
 
-  .handle::before {
+  .switch--unselected .handle::before {
     background-color: var(--_unselected-handle-color);
   }
 
@@ -123,6 +120,7 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
 
   .switch--unselected:disabled .handle::before {
     background-color: var(--_disabled-unselected-handle-color);
+    opacity: var(--_disabled-unselected-handle-opacity);
   }
 
   .ripple {

diff --git a/switch/lib/_icon.scss b/switch/lib/_icon.scss
@@ -11,7 +11,7 @@
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
-$_easing-standard: map.get($_md-sys-motion, easing-standard);
+$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
   .icons {

diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss
@@ -9,7 +9,6 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../focus/focus-ring';
-@use '../../sass/color';
 @use '../../sass/touch-target';
 @use '../../tokens';
 @use './handle';
@@ -53,8 +52,6 @@ $_forced-colors-theme: (
     )
   );
 
-  $tokens: _flatten-disable-colors($tokens);
-
   @each $token, $value in $tokens {
     @if list.index($supported-tokens, $token) == null {
       @error 'Token `#{$token}` is not a supported token.';
@@ -68,7 +65,6 @@ $_forced-colors-theme: (
 
 @mixin styles() {
   $tokens: tokens.md-comp-switch-values();
-  $tokens: _flatten-disable-colors($tokens);
 
   :host {
     @each $token, $value in $tokens {
@@ -179,20 +175,3 @@ $_forced-colors-theme: (
   @include handle.styles();
   @include icon.styles();
 }
-
-@function _flatten-disable-colors($theme) {
-  @return color.join-color-and-opacity-pairs(
-    $theme,
-    (
-      // Disabled Handle
-      (
-          color-key: disabled-selected-handle-color,
-          opacity-key: disabled-selected-handle-opacity
-        ),
-      (
-        color-key: disabled-unselected-handle-color,
-        opacity-key: disabled-unselected-handle-opacity
-      )
-    )
-  );
-}