|
1 | 1 | @use '@material/switch/switch-theme' as mdc-switch-theme; |
2 | 2 | @use '@material/form-field/form-field-theme' as mdc-form-field-theme; |
| 3 | +@use '../core/style/sass-utils'; |
3 | 4 | @use '../core/theming/theming'; |
4 | 5 | @use '../core/theming/inspection'; |
5 | 6 | @use '../core/tokens/token-utils'; |
|
15 | 16 | @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); |
16 | 17 | } |
17 | 18 | @else { |
18 | | - .mdc-switch { |
| 19 | + @include sass-utils.current-selector-or-root() { |
19 | 20 | @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens()); |
20 | 21 | } |
21 | 22 | } |
|
35 | 36 | $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme); |
36 | 37 |
|
37 | 38 | // Add values for MDC slide toggles tokens |
38 | | - .mat-mdc-slide-toggle { |
| 39 | + @include sass-utils.current-selector-or-root() { |
39 | 40 | @include mdc-switch-theme.theme($mdc-switch-color-tokens); |
40 | | - @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme)); |
41 | 41 |
|
42 | 42 | // 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 | + )}; |
48 | 48 |
|
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 | + } |
54 | 57 |
|
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 | + } |
58 | 62 | } |
59 | 63 | } |
60 | 64 | } |
|
70 | 74 | $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme); |
71 | 75 |
|
72 | 76 | // Add values for MDC slide toggle tokens |
73 | | - .mat-mdc-slide-toggle { |
| 77 | + @include sass-utils.current-selector-or-root() { |
74 | 78 | @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 | + } |
76 | 83 | } |
77 | 84 | } |
78 | 85 | } |
|
84 | 91 | @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); |
85 | 92 | } |
86 | 93 | @else { |
87 | | - .mat-mdc-slide-toggle { |
| 94 | + @include sass-utils.current-selector-or-root() { |
88 | 95 | @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme)); |
89 | 96 | } |
90 | 97 | } |
|
0 commit comments