diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss index f5963e864a42..cbab6010a1c9 100644 --- a/src/material/slide-toggle/_m2-slide-toggle.scss +++ b/src/material/slide-toggle/_m2-slide-toggle.scss @@ -69,6 +69,8 @@ @return map.merge( private-get-color-palette-color-tokens($theme, primary), ( + slide-toggle-disabled-label-text-color: + m3-utils.color-with-opacity(map.get($system, on-surface), 38%), slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(0), slide-toggle-disabled-selected-handle-color: map.get($system, on-surface), slide-toggle-disabled-selected-track-color: map.get($system, on-surface), diff --git a/src/material/slide-toggle/_m3-slide-toggle.scss b/src/material/slide-toggle/_m3-slide-toggle.scss index 6371df9a3784..52088b6fdbfc 100644 --- a/src/material/slide-toggle/_m3-slide-toggle.scss +++ b/src/material/slide-toggle/_m3-slide-toggle.scss @@ -60,6 +60,7 @@ slide-toggle-handle-height: null, ), color: ( + slide-toggle-disabled-label-text-color: map.get($system, on-surface), slide-toggle-disabled-selected-handle-color: map.get($system, surface), slide-toggle-disabled-selected-icon-color: map.get($system, on-surface), slide-toggle-disabled-selected-track-color: map.get($system, on-surface), diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 42dba4270f8f..e3835b9eed06 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -6,7 +6,6 @@ @use './m2-slide-toggle'; @use './m3-slide-toggle'; @use '../core/tokens/m2-utils'; -@use '../core/tokens/m3-utils'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-slide-toggle. @@ -35,20 +34,7 @@ $mat-tokens: m2-slide-toggle.get-color-tokens($theme); $system: m2-utils.get-system($theme); - @include sass-utils.current-selector-or-root() { - // TODO(andrewjs): Remove this once all tokens are migrated to - // mat internally. - --mdc-slide-toggle-disabled-label-text-color: #{ - m3-utils.color-with-opacity(map.get($system, on-surface), 38%)}; - // TODO(wagnermaciel): Use our token system to define this css variable. - --mat-slide-toggle-disabled-label-text-color: #{ - m3-utils.color-with-opacity(map.get($system, on-surface), 38%)}; - } - .mat-mdc-slide-toggle { - // TODO(wagnermaciel): Use our token system to define this css variable. - --mat-slide-toggle-label-text-color: #{map.get($system, on-surface)}; - // Change the color palette related tokens to accent or warn if applicable &.mat-accent { $tokens: m2-slide-toggle.private-get-color-palette-color-tokens($theme, secondary); diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 2626d0f068cf..addcad65d2f1 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -538,8 +538,7 @@ $fallbacks: m3-slide-toggle.get-tokens(); cursor: pointer; } - // TODO(wagnermaciel): Use our custom token system to emit this css rule. .mdc-switch--disabled + label { - color: var(--mat-slide-toggle-disabled-label-text-color); + color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks); } }