From 63a764de6147a5c1cb09f388de454eda9ee3414a Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 23 Feb 2024 15:42:32 +0000 Subject: [PATCH] fix(material/slide-toggle): m3 selected track outline (#28625) * fix(material/slide-toggle): m3 selected track outline * fixup! fix(material/slide-toggle): m3 selected track outline --- src/material-experimental/theming/_custom-tokens.scss | 1 + src/material/core/tokens/m2/mat/_switch.scss | 1 + src/material/slide-toggle/slide-toggle.scss | 5 +++++ 3 files changed, 7 insertions(+) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 583e8fc938f9..54c98dd2229b 100644 --- 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: _hardcode(0, $exclude-hardcoded), 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 index 193d59fddbd3..3396eb80282d 100644 --- 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 index 4c7b668babba..82b324186e2e 100644 --- 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);