|
1 | 1 | @use 'sass:map'; |
2 | 2 | @use '@material/switch/switch-theme' as mdc-switch-theme; |
3 | 3 | @use '@material/form-field/form-field-theme' as mdc-form-field-theme; |
| 4 | +@use '../core/style/sass-utils'; |
4 | 5 | @use '../core/theming/theming'; |
5 | 6 | @use '../core/theming/inspection'; |
6 | 7 | @use '../core/typography/typography'; |
|
12 | 13 | @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); |
13 | 14 | } |
14 | 15 | @else { |
15 | | - .mdc-switch { |
| 16 | + @include sass-utils.current-selector-or-root() { |
16 | 17 | @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens()); |
17 | 18 | } |
18 | 19 | } |
|
27 | 28 | $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme); |
28 | 29 |
|
29 | 30 | // Add values for MDC slide toggles tokens |
30 | | - .mat-mdc-slide-toggle { |
| 31 | + @include sass-utils.current-selector-or-root() { |
31 | 32 | @include mdc-switch-theme.theme($mdc-switch-color-tokens); |
32 | | - @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme)); |
33 | 33 |
|
34 | 34 | // 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 | + )}; |
40 | 40 |
|
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 | + } |
46 | 49 |
|
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 | + } |
50 | 54 | } |
51 | 55 | } |
52 | 56 | } |
|
60 | 64 | $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme); |
61 | 65 |
|
62 | 66 | // Add values for MDC slide toggle tokens |
63 | | - .mat-mdc-slide-toggle { |
| 67 | + @include sass-utils.current-selector-or-root() { |
64 | 68 | @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 | + } |
66 | 73 | } |
67 | 74 | } |
68 | 75 | } |
|
72 | 79 | @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); |
73 | 80 | } |
74 | 81 | @else { |
75 | | - .mat-mdc-slide-toggle { |
| 82 | + @include sass-utils.current-selector-or-root() { |
76 | 83 | @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme)); |
77 | 84 | } |
78 | 85 | } |
|
0 commit comments