fix(material/slide-toggle): m3 selected track outline

wagnermaciel · Feb 21, 2024 · 9b9cc64 · 9b9cc64
1 parent b513b50
commit 9b9cc64
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -1215,6 +1215,7 @@
     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),
+    selected-track-outline-width: 0,
     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/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss
@@ -37,6 +37,7 @@ $prefix: (mat, switch);
 
     track-outline-width: 1px,
     track-outline-color: transparent,
+    selected-track-outline-width: 1px,
     disabled-unselected-track-outline-width: 1px,
     disabled-unselected-track-outline-color: transparent,
   );

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
@@ -220,6 +220,11 @@
     @include token-utils.create-token-slot(border-color, track-outline-color);
   }
 
+  .mdc-switch--selected .mdc-switch__track::after,
+  .mdc-switch--selected .mdc-switch__track::before {
+    @include token-utils.create-token-slot(border-width, selected-track-outline-width);
+  }
+
   .mdc-switch--disabled .mdc-switch__track::after,
   .mdc-switch--disabled .mdc-switch__track::before {
     @include token-utils.create-token-slot(border-width, disabled-unselected-track-outline-width);