fix(material/slide-toggle): no outline when selected in high contrast…

… mode (#28979) Fixes that the M3 slide toggle didn't have an outline when it's selected in high contrast mode.
angular · Apr 30, 2024 · dde3793 · dde3793
1 parent 58fa9b7
commit dde3793
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss
@@ -38,6 +38,7 @@ $prefix: (mat, switch);
     track-outline-width: 1px,
     track-outline-color: transparent,
     selected-track-outline-width: 1px,
+    selected-track-outline-color: transparent,
     disabled-unselected-track-outline-width: 1px,
     disabled-unselected-track-outline-color: transparent,
   );

diff --git a/src/material/core/tokens/m3/mat/_switch.scss b/src/material/core/tokens/m3/mat/_switch.scss
@@ -35,7 +35,8 @@ $prefix: (mat, switch);
     hidden-track-transition: token-utils.hardcode(opacity 75ms, $exclude-hardcoded),
     track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
     track-outline-color:  map.get($systems, md-sys-color, outline),
-    selected-track-outline-width: token-utils.hardcode(0, $exclude-hardcoded),
+    selected-track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
+    selected-track-outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
     disabled-unselected-track-outline-width: token-utils.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
@@ -223,6 +223,7 @@
   .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);
+    @include token-utils.create-token-slot(border-color, selected-track-outline-color);
   }
 
   .mdc-switch--disabled .mdc-switch__track::after,