fix(material/slide-toggle): m3 slide-toggle track (#28539)

* fix(material/slide-toggle): m3 slide-toggle track * fixup! fix(material/slide-toggle): m3 slide-toggle track
angular · Feb 6, 2024 · 130afed · 130afed
1 parent b6e0b20
commit 130afed
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -1171,6 +1171,16 @@
     unselected-handle-horizontal-margin: 0 8px,
     unselected-with-icon-handle-horizontal-margin: 0 4px,
     unselected-pressed-handle-horizontal-margin: 0 2px,
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+    visible-track-opacity: 1,
+    hidden-track-opacity: 0,
+    visible-track-transition: opacity 75ms,
+    hidden-track-transition: opacity 75ms,
   ), ());
 }
 

diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss
@@ -19,6 +19,18 @@ $prefix: (mat, switch);
     unselected-handle-horizontal-margin: 0,
     unselected-with-icon-handle-horizontal-margin: 0,
     unselected-pressed-handle-horizontal-margin: 0,
+
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+
+    visible-track-opacity: 1,
+    hidden-track-opacity: 1,
+    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
+    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
   );
 }
 

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
@@ -127,6 +127,37 @@
     margin 75ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+// The hidden and visible track represent whichever track is visible or
+// hidden in the ui. This could be the .mdc-switch__track :before or
+// :after depending on whether the switch is selected or unselected.
+//
+// The m2 slide-toggle uses transforms to hide & show the tracks while
+// the m3 slide-toggle uses opacity.
+
+@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
+  .mdc-switch--selected .mdc-switch__track {
+    &::before {
+      @include token-utils.create-token-slot(opacity, hidden-track-opacity);
+      @include token-utils.create-token-slot(transition, hidden-track-transition);
+    }
+    &::after {
+      @include token-utils.create-token-slot(opacity, visible-track-opacity);
+      @include token-utils.create-token-slot(transition, visible-track-transition);
+    }
+  }
+
+  .mdc-switch--unselected .mdc-switch__track {
+    &::before {
+      @include token-utils.create-token-slot(opacity, visible-track-opacity);
+      @include token-utils.create-token-slot(transition, visible-track-transition);
+    }
+    &::after {
+      @include token-utils.create-token-slot(opacity, hidden-track-opacity);
+      @include token-utils.create-token-slot(transition, hidden-track-transition);
+    }
+  }
+}
+
 @include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
   .mat-mdc-slide-toggle {
     .mdc-switch--unselected .mdc-switch__handle {