Skip to content

Commit 76cda42

Browse files
mmalerbammalerba
authored
feat(material-experimental/theming): add M3 slide-toggle support (#28014)
1 parent 7f301a8 commit 76cda42

File tree

6 files changed

+123
-63
lines changed

6 files changed

+123
-63
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,16 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
3636

3737
// Emit default theme styles.
3838
html {
39-
@include mat.checkbox-theme($light-theme);
4039
@include mat.card-theme($light-theme);
41-
@include mat.tooltip-theme($light-theme);
42-
@include mat.toolbar-theme($light-theme);
43-
@include mat.slider-theme($light-theme);
44-
@include mat.snack-bar-theme($light-theme);
40+
@include mat.checkbox-theme($light-theme);
41+
@include mat.progress-bar-theme($light-theme);
4542
@include mat.progress-spinner-theme($light-theme);
4643
@include mat.radio-theme($light-theme);
47-
@include mat.progress-bar-theme($light-theme);
44+
@include mat.slide-toggle-theme($light-theme);
45+
@include mat.slider-theme($light-theme);
46+
@include mat.snack-bar-theme($light-theme);
47+
@include mat.toolbar-theme($light-theme);
48+
@include mat.tooltip-theme($light-theme);
4849
}
4950

5051
// Emit dark theme styles.
@@ -53,31 +54,32 @@ html {
5354
background: black;
5455
color: white;
5556

56-
@include mat.checkbox-color($dark-theme);
5757
@include mat.card-color($dark-theme);
58-
@include mat.tooltip-color($dark-theme);
59-
@include mat.toolbar-color($dark-theme);
60-
@include mat.slider-color($dark-theme);
61-
@include mat.snack-bar-color($dark-theme);
58+
@include mat.checkbox-color($dark-theme);
59+
@include mat.progress-bar-color($dark-theme);
6260
@include mat.progress-spinner-color($dark-theme);
6361
@include mat.radio-color($dark-theme);
64-
@include mat.progress-bar-color($dark-theme);
65-
62+
@include mat.slide-toggle-color($dark-theme);
63+
@include mat.slider-color($dark-theme);
64+
@include mat.snack-bar-color($dark-theme);
65+
@include mat.toolbar-color($dark-theme);
66+
@include mat.tooltip-color($dark-theme);
6667
}
6768

6869
// Emit density styles for each scale.
6970
@each $scale in (maximum, 0, -1, -2, -3, minimum) {
7071
$scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));
7172

7273
.demo-density-#{$scale} {
73-
@include mat.checkbox-density($scale-theme);
7474
@include mat.card-density($scale-theme);
75-
@include mat.tooltip-density($scale-theme);
76-
@include mat.toolbar-density($scale-theme);
77-
@include mat.slider-density($scale-theme);
78-
@include mat.snack-bar-density($scale-theme);
75+
@include mat.checkbox-density($scale-theme);
76+
@include mat.progress-bar-density($scale-theme);
7977
@include mat.progress-spinner-density($scale-theme);
8078
@include mat.radio-density($scale-theme);
81-
@include mat.progress-bar-density($scale-theme);
79+
@include mat.slide-toggle-density($scale-theme);
80+
@include mat.slider-density($scale-theme);
81+
@include mat.snack-bar-density($scale-theme);
82+
@include mat.toolbar-density($scale-theme);
83+
@include mat.tooltip-density($scale-theme);
8284
}
8385
}

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@
4444
);
4545
}
4646

47+
/// Generates custom tokens for the mat-slide-toggle.
48+
/// @param {Map} $systems The MDC system tokens
49+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
50+
/// @return {Map} A set of custom tokens for the mat-slide-toggle
51+
@function slide-toggle($systems, $exclude-hardcoded) {
52+
@return _generate-typography-tokens($systems, label-text, label-large);
53+
}
54+
4755
/// Generates custom tokens for the mat-slider.
4856
/// @param {Map} $systems The MDC system tokens
4957
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ $_density-tokens: (
2929
state-layer-size: (40px, 36px, 32px, 28px),
3030
),
3131
(mdc, linear-progress): (),
32+
(mdc, switch): (),
3233
// Custom Angular Material tokens
3334
(mat, card): (),
3435
(mat, toolbar): (
@@ -38,6 +39,7 @@ $_density-tokens: (
3839
(mat, slider): (),
3940
(mat, snack-bar): (),
4041
(mat, radio): (),
42+
(mat, slide-toggle): (),
4143
);
4244

4345
/// Gets the value for the given density scale from the given set of density values.

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,11 @@
198198
mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
199199
$token-slots,
200200
),
201+
_namespace-tokens(
202+
(mdc, switch),
203+
mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
204+
$token-slots
205+
),
201206
_namespace-tokens(
202207
(mdc, plain-tooltip),
203208
mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
@@ -229,6 +234,11 @@
229234
custom-tokens.toolbar($systems, $exclude-hardcoded),
230235
$token-slots,
231236
),
237+
_namespace-tokens(
238+
(mat, slide-toggle),
239+
custom-tokens.slide-toggle($systems, $exclude-hardcoded),
240+
$token-slots
241+
),
232242
_namespace-tokens(
233243
(mat, slider),
234244
custom-tokens.slider($systems, $exclude-hardcoded),

‎src/material/core/tokens/m2/_index.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@use './mat/tab-header' as tokens-mat-tab-header;
1010
@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
1111
@use './mat/slider' as tokens-mat-slider;
12+
@use './mat/slide-toggle' as tokens-mat-slide-toggle;
1213
@use './mdc/checkbox' as tokens-mdc-checkbox;
1314
@use './mdc/circular-progress' as tokens-mdc-circular-progress;
1415
@use './mdc/dialog' as tokens-mdc-dialog;
@@ -22,6 +23,7 @@
2223
@use './mdc/tab' as tokens-mdc-tab;
2324
@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
2425
@use './mdc/slider' as tokens-mdc-slider;
26+
@use './mdc/switch' as tokens-mdc-switch;
2527
@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
2628

2729
/// Gets the tokens for the given theme, m2 tokens module, and theming system.
@@ -73,6 +75,7 @@
7375
_get-tokens-for-module($theme, tokens-mat-tab-header),
7476
_get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
7577
_get-tokens-for-module($theme, tokens-mat-toolbar),
78+
_get-tokens-for-module($theme, tokens-mat-slide-toggle),
7679
_get-tokens-for-module($theme, tokens-mat-slider),
7780
_get-tokens-for-module($theme, tokens-mdc-checkbox),
7881
_get-tokens-for-module($theme, tokens-mdc-circular-progress),
@@ -87,6 +90,7 @@
8790
_get-tokens-for-module($theme, tokens-mdc-tab),
8891
_get-tokens-for-module($theme, tokens-mdc-tab-indicator),
8992
_get-tokens-for-module($theme, tokens-mdc-slider),
93+
_get-tokens-for-module($theme, tokens-mdc-switch),
9094
_get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
9195
);
9296
}

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

Lines changed: 78 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,116 @@
1+
@use 'sass:map';
12
@use '@material/switch/switch-theme' as mdc-switch-theme;
23
@use '@material/form-field' as mdc-form-field;
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/mdc-helpers/mdc-helpers';
67
@use '../core/typography/typography';
7-
@use '../core/tokens/m2/mdc/switch' as m2-mdc-switch;
8-
@use '../core/tokens/m2/mat/slide-toggle' as m2-mat-slide-toggle;
8+
@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
9+
@use '../core/tokens/m2/mat/slide-toggle' as tokens-mat-slide-toggle;
910
@use '../core/tokens/token-utils';
1011

1112
@mixin base($theme) {
12-
.mdc-switch {
13-
@include mdc-switch-theme.theme(m2-mdc-switch.get-unthemable-tokens());
13+
@if inspection.get-theme-version($theme) == 1 {
14+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
15+
}
16+
@else {
17+
.mdc-switch {
18+
@include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
19+
}
1420
}
1521
}
1622

1723
@mixin color($theme) {
18-
$is-dark: inspection.get-theme-type($theme) == dark;
19-
$mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($theme);
24+
@if inspection.get-theme-version($theme) == 1 {
25+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
26+
}
27+
@else {
28+
$is-dark: inspection.get-theme-type($theme) == dark;
29+
$mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
2030

21-
@include mdc-helpers.using-mdc-theme($theme) {
22-
// Add values for MDC slide toggles tokens
23-
.mat-mdc-slide-toggle {
24-
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
25-
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
31+
@include mdc-helpers.using-mdc-theme($theme) {
32+
// Add values for MDC slide toggles tokens
33+
.mat-mdc-slide-toggle {
34+
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
35+
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
2636

27-
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
28-
.mdc-switch--disabled + label {
29-
color: inspection.get-theme-color($theme, foreground, disabled-text);
30-
}
37+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
38+
.mdc-switch--disabled + label {
39+
color: inspection.get-theme-color($theme, foreground, disabled-text);
40+
}
3141

32-
// Change the color palette related tokens to accent or warn if applicable
33-
&.mat-accent {
34-
@include mdc-switch-theme.theme(
35-
m2-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
36-
}
42+
// Change the color palette related tokens to accent or warn if applicable
43+
&.mat-accent {
44+
@include mdc-switch-theme.theme(
45+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
46+
}
3747

38-
&.mat-warn {
39-
@include mdc-switch-theme.theme(
40-
m2-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
48+
&.mat-warn {
49+
@include mdc-switch-theme.theme(
50+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
51+
}
4152
}
4253
}
4354
}
4455
}
4556

4657
@mixin typography($theme) {
47-
$mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($theme);
48-
$mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($theme);
58+
@if inspection.get-theme-version($theme) == 1 {
59+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
60+
}
61+
@else {
62+
$mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
63+
$mat-slide-toggle-typography-tokens: tokens-mat-slide-toggle.get-typography-tokens($theme);
4964

50-
//Add values for MDC slide toggle tokens
51-
.mat-mdc-slide-toggle {
52-
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
53-
@include mdc-switch-theme.theme($mdc-switch-typography-tokens);
54-
@include token-utils.create-token-values(
55-
m2-mat-slide-toggle.$prefix,
56-
$mat-slide-toggle-typography-tokens
57-
);
65+
//Add values for MDC slide toggle tokens
66+
.mat-mdc-slide-toggle {
67+
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
68+
@include mdc-switch-theme.theme($mdc-switch-typography-tokens);
69+
@include token-utils.create-token-values(
70+
tokens-mat-slide-toggle.$prefix,
71+
$mat-slide-toggle-typography-tokens
72+
);
73+
}
5874
}
5975
}
6076

6177
@mixin density($theme) {
62-
$density-scale: inspection.get-theme-density($theme);
78+
@if inspection.get-theme-version($theme) == 1 {
79+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
80+
}
81+
@else {
82+
$density-scale: inspection.get-theme-density($theme);
6383

64-
.mat-mdc-slide-toggle {
65-
@include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
84+
.mat-mdc-slide-toggle {
85+
@include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
86+
}
6687
}
6788
}
6889

6990
@mixin theme($theme) {
7091
@include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
71-
@include base($theme);
72-
@if inspection.theme-has($theme, color) {
73-
@include color($theme);
74-
}
75-
@if inspection.theme-has($theme, density) {
76-
@include density($theme);
92+
@if inspection.get-theme-version($theme) == 1 {
93+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
7794
}
78-
@if inspection.theme-has($theme, typography) {
79-
@include typography($theme);
95+
@else {
96+
@include base($theme);
97+
@if inspection.theme-has($theme, color) {
98+
@include color($theme);
99+
}
100+
@if inspection.theme-has($theme, density) {
101+
@include density($theme);
102+
}
103+
@if inspection.theme-has($theme, typography) {
104+
@include typography($theme);
105+
}
80106
}
81107
}
82108
}
109+
110+
@mixin _theme-from-tokens($tokens) {
111+
@if ($tokens != ()) {
112+
@include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
113+
@include token-utils.create-token-values(
114+
tokens-mat-slide-toggle.$prefix, map.get($tokens, tokens-mat-slide-toggle.$prefix));
115+
}
116+
}

0 commit comments

Comments
 (0)