diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 7a0002fc360d..583475de54af 100644 --- 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), @@ -1194,7 +1196,11 @@ 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), + ), (); } /// Generates custom tokens for the mat-snack-bar. diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss index 6b95cf7c2e2a..193d59fddbd3 100644 --- a/src/material/core/tokens/m2/mat/_switch.scss +++ b/src/material/core/tokens/m2/mat/_switch.scss @@ -8,6 +8,9 @@ $prefix: (mat, switch); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( + disabled-selected-handle-opacity: 0.38, + disabled-unselected-handle-opacity: 0.38, + unselected-handle-size: 20px, selected-handle-size: 20px, pressed-handle-size: 20px, @@ -31,6 +34,11 @@ $prefix: (mat, switch); hidden-track-opacity: 1, visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), + + track-outline-width: 1px, + track-outline-color: transparent, + disabled-unselected-track-outline-width: 1px, + disabled-unselected-track-outline-color: transparent, ); } diff --git a/src/material/core/tokens/m2/mdc/_switch.scss b/src/material/core/tokens/m2/mdc/_switch.scss index 5f46c3126d88..c840b69e8c16 100644 --- a/src/material/core/tokens/m2/mdc/_switch.scss +++ b/src/material/core/tokens/m2/mdc/_switch.scss @@ -18,7 +18,7 @@ $prefix: (mdc, switch); @function get-unthemable-tokens() { @return ( // Opacity of handle when disabled. - disabled-handle-opacity: 0.38, + disabled-handle-opacity: null, // Opacity of icon when disabled and selected. disabled-selected-icon-opacity: 0.38, // Opacity of track when disabled. diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index e5b4217f2131..4c7b668babba 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -212,3 +212,27 @@ } } } + +@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-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-width, disabled-unselected-track-outline-width); + @include token-utils.create-token-slot(border-color, disabled-unselected-track-outline-color); + } +} + +@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) { + .mdc-switch--disabled.mdc-switch--selected .mdc-switch__handle::after { + @include token-utils.create-token-slot(opacity, disabled-selected-handle-opacity); + } + + .mdc-switch--disabled.mdc-switch--unselected .mdc-switch__handle::after { + @include token-utils.create-token-slot(opacity, disabled-unselected-handle-opacity); + } +}