fix(material/slide-toggle): wrap hardcoded custom tokens

angular · Feb 12, 2024 · f85db9b · f85db9b
1 parent e9582a6
commit f85db9b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -1174,6 +1174,8 @@
 /// @return {Map} A set of custom tokens for the mat-slide-toggle
 @function switch($systems, $exclude-hardcoded) {
   @return (
+    disabled-selected-handle-opacity: _hardcode(1, $exclude-hardcoded),
+    disabled-unselected-handle-opacity: _hardcode(0.38, $exclude-hardcoded),
     unselected-handle-size: _hardcode(16px, $exclude-hardcoded),
     selected-handle-size: _hardcode(24px, $exclude-hardcoded),
     with-icon-handle-size: _hardcode(24px, $exclude-hardcoded),
@@ -1190,12 +1192,14 @@
     //
     // 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,
-    track-outline: 2px solid map.get($systems, md-sys-color, outline),
-    disabled-unselected-track-outline: 2px solid map.get($systems, md-sys-color, on-surface),
+    visible-track-opacity: _hardcode(1, $exclude-hardcoded),
+    hidden-track-opacity: _hardcode(0, $exclude-hardcoded),
+    visible-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    hidden-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    track-outline-color:  map.get($systems, md-sys-color, outline),
+    disabled-unselected-track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
   ), ();
 }
 

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
@@ -216,12 +216,14 @@
 @include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
   .mdc-switch__track::after,
   .mdc-switch__track::before {
-    @include token-utils.create-token-slot(border, track-outline);
+    @include token-utils.create-token-slot(border-width, track-outline-width);
+    @include token-utils.create-token-slot(border-color, track-outline-color);
   }
 
   .mdc-switch--disabled .mdc-switch__track::after,
   .mdc-switch--disabled .mdc-switch__track::before {
-    @include token-utils.create-token-slot(border, disabled-unselected-track-outline);
+    @include token-utils.create-token-slot(border-width, disabled-unselected-track-outline-width);
+    @include token-utils.create-token-slot(border-color, disabled-unselected-track-outline-color);
   }
 }