From e19d1241baaca3a096a1222e9d62326db4729661 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 30 Apr 2024 09:01:46 +0200 Subject: [PATCH] fix(material/slide-toggle): no outline when selected in high contrast mode Fixes that the M3 slide toggle didn't have an outline when it's selected in high contrast mode. --- src/material/core/tokens/m2/mat/_switch.scss | 1 + src/material/core/tokens/m3/mat/_switch.scss | 3 ++- src/material/slide-toggle/slide-toggle.scss | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss index 3396eb80282d..6b77411d0caa 100644 --- 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 index 62b505078369..6d4762faf813 100644 --- 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 index 82b324186e2e..70adb58c62bc 100644 --- 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,