Skip to content

Commit 251293f

Browse files
committed
fix(material/slide-toggle): Emit token values under current selector or root (#28390)
(cherry picked from commit 2d43f93)
1 parent b6a9ac8 commit 251293f

File tree

1 file changed

+26
-19
lines changed

1 file changed

+26
-19
lines changed

src/material/slide-toggle/_slide-toggle-theme.scss

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '@material/switch/switch-theme' as mdc-switch-theme;
33
@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
4+
@use '../core/style/sass-utils';
45
@use '../core/theming/theming';
56
@use '../core/theming/inspection';
67
@use '../core/typography/typography';
@@ -12,7 +13,7 @@
1213
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1314
}
1415
@else {
15-
.mdc-switch {
16+
@include sass-utils.current-selector-or-root() {
1617
@include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
1718
}
1819
}
@@ -27,26 +28,29 @@
2728
$mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
2829

2930
// Add values for MDC slide toggles tokens
30-
.mat-mdc-slide-toggle {
31+
@include sass-utils.current-selector-or-root() {
3132
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
32-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
3333

3434
// TODO(wagnermaciel): Use our token system to define this css variable.
35-
--mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
36-
$theme,
37-
foreground,
38-
disabled-text
39-
)};
35+
--mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
36+
$theme,
37+
foreground,
38+
disabled-text
39+
)};
4040

41-
// Change the color palette related tokens to accent or warn if applicable
42-
&.mat-accent {
43-
@include mdc-switch-theme.theme(
44-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
45-
}
41+
.mat-mdc-slide-toggle {
42+
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
43+
44+
// Change the color palette related tokens to accent or warn if applicable
45+
&.mat-accent {
46+
@include mdc-switch-theme.theme(
47+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
48+
}
4649

47-
&.mat-warn {
48-
@include mdc-switch-theme.theme(
49-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
50+
&.mat-warn {
51+
@include mdc-switch-theme.theme(
52+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
53+
}
5054
}
5155
}
5256
}
@@ -60,9 +64,12 @@
6064
$mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
6165

6266
// Add values for MDC slide toggle tokens
63-
.mat-mdc-slide-toggle {
67+
@include sass-utils.current-selector-or-root() {
6468
@include mdc-switch-theme.theme($mdc-switch-typography-tokens);
65-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
69+
70+
.mat-mdc-slide-toggle {
71+
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
72+
}
6673
}
6774
}
6875
}
@@ -72,7 +79,7 @@
7279
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
7380
}
7481
@else {
75-
.mat-mdc-slide-toggle {
82+
@include sass-utils.current-selector-or-root() {
7683
@include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
7784
}
7885
}

0 commit comments

Comments
 (0)