feat(switch): add disabled track tokens

PiperOrigin-RevId: 530932722
material-components · May 10, 2023 · a2045f5 · a2045f5
1 parent 61550d2
commit a2045f5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 43 deletions.
diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss
@@ -192,19 +192,6 @@ $_forced-colors-theme: (
       (
         color-key: disabled-unselected-handle-color,
         opacity-key: disabled-unselected-handle-opacity
-      ),
-      // Disabled Track
-      (
-          color-key: disabled-selected-track-color,
-          opacity-key: disabled-track-opacity
-        ),
-      (
-        color-key: disabled-unselected-track-color,
-        opacity-key: disabled-track-opacity
-      ),
-      (
-        color-key: disabled-unselected-track-outline-color,
-        opacity-key: disabled-track-opacity
       )
     )
   );

diff --git a/switch/lib/_track.scss b/switch/lib/_track.scss
@@ -20,55 +20,53 @@
     display: flex;
     justify-content: center;
     align-items: center;
+  }
 
-    transition: background-color 67ms linear;
-    background-color: var(--_selected-track-color);
+  // Separate node for background/outline colors to support opacity changes.
+  .track::before {
+    content: '';
+    display: flex;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    box-sizing: border-box;
+    transition-property: opacity, background-color;
+    transition-timing-function: linear;
+    transition-duration: 67ms;
   }
-  .switch:disabled .track {
+
+  .switch:disabled .track::before,
+  .switch:disabled .track::after {
     transition: none;
+    opacity: var(--_disabled-track-opacity);
+  }
+
+  .switch--selected .track::before {
+    background-color: var(--_selected-track-color);
   }
 
-  .switch--selected:hover .track {
+  .switch--selected:hover .track::before {
     background-color: var(--_selected-hover-track-color);
   }
 
-  .switch--selected:focus-visible .track {
+  .switch--selected:focus-visible .track::before {
     background-color: var(--_selected-focus-track-color);
   }
 
-  .switch--selected:active .track {
+  .switch--selected:active .track::before {
     background-color: var(--_selected-pressed-track-color);
   }
 
-  .switch--selected:disabled .track {
+  .switch--selected:disabled .track::before {
     background-color: var(--_disabled-selected-track-color);
   }
 
-  .track::before {
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    box-sizing: border-box;
-    border-style: solid;
-
-    transition-property: opacity, background-color;
-    transition-timing-function: linear;
-    transition-duration: 67ms;
-
-    border-width: var(--_track-outline-width);
+  .switch--unselected .track::before {
     background-color: var(--_unselected-track-color);
     border-color: var(--_unselected-track-outline-color);
-  }
-  .switch:disabled .track::before {
-    transition: none;
-  }
-
-  .switch--selected .track::before {
-    // When selected, turn off ::before
-    opacity: 0;
+    border-style: solid;
+    border-width: var(--_track-outline-width);
   }
 
   .switch--unselected:hover .track::before {