Skip to content

Commit 2d43f93

Browse files
authored
fix(material/slide-toggle): Emit token values under current selector or root (#28390)
1 parent 17a7a95 commit 2d43f93

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,5 +1,6 @@
11
@use '@material/switch/switch-theme' as mdc-switch-theme;
22
@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
3+
@use '../core/style/sass-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/tokens/token-utils';
@@ -15,7 +16,7 @@
1516
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1617
}
1718
@else {
18-
.mdc-switch {
19+
@include sass-utils.current-selector-or-root() {
1920
@include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
2021
}
2122
}
@@ -35,26 +36,29 @@
3536
$mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
3637

3738
// Add values for MDC slide toggles tokens
38-
.mat-mdc-slide-toggle {
39+
@include sass-utils.current-selector-or-root() {
3940
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
40-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
4141

4242
// TODO(wagnermaciel): Use our token system to define this css variable.
43-
--mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
44-
$theme,
45-
foreground,
46-
disabled-text
47-
)};
43+
--mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
44+
$theme,
45+
foreground,
46+
disabled-text
47+
)};
4848

49-
// Change the color palette related tokens to accent or warn if applicable
50-
&.mat-accent {
51-
@include mdc-switch-theme.theme(
52-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
53-
}
49+
.mat-mdc-slide-toggle {
50+
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
51+
52+
// Change the color palette related tokens to accent or warn if applicable
53+
&.mat-accent {
54+
@include mdc-switch-theme.theme(
55+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
56+
}
5457

55-
&.mat-warn {
56-
@include mdc-switch-theme.theme(
57-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
58+
&.mat-warn {
59+
@include mdc-switch-theme.theme(
60+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
61+
}
5862
}
5963
}
6064
}
@@ -70,9 +74,12 @@
7074
$mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
7175

7276
// Add values for MDC slide toggle tokens
73-
.mat-mdc-slide-toggle {
77+
@include sass-utils.current-selector-or-root() {
7478
@include mdc-switch-theme.theme($mdc-switch-typography-tokens);
75-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
79+
80+
.mat-mdc-slide-toggle {
81+
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
82+
}
7683
}
7784
}
7885
}
@@ -84,7 +91,7 @@
8491
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
8592
}
8693
@else {
87-
.mat-mdc-slide-toggle {
94+
@include sass-utils.current-selector-or-root() {
8895
@include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
8996
}
9097
}

0 commit comments

Comments
 (0)