Skip to content

Commit 750d95f

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 select, option, and optgroup support (#28148)
* feat(material-experimental/theming): add M3 select support * feat(material-experimental/theming): add M3 option & optgroup support (cherry picked from commit 0f3a55f)
1 parent 04ceccf commit 750d95f

File tree

8 files changed

+263
-77
lines changed

8 files changed

+263
-77
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,13 @@ html {
4545
@include mat.input-theme($light-theme);
4646
@include mat.list-theme($light-theme);
4747
@include mat.menu-theme($light-theme);
48+
@include mat.optgroup-theme($light-theme);
49+
@include mat.option-theme($light-theme);
4850
@include mat.progress-bar-theme($light-theme);
4951
@include mat.progress-spinner-theme($light-theme);
5052
@include mat.radio-theme($light-theme);
5153
@include mat.ripple-theme($light-theme);
54+
@include mat.select-theme($light-theme);
5255
@include mat.sidenav-theme($light-theme);
5356
@include mat.slide-toggle-theme($light-theme);
5457
@include mat.slider-theme($light-theme);
@@ -77,10 +80,13 @@ html {
7780
@include mat.input-color($dark-theme);
7881
@include mat.list-color($dark-theme);
7982
@include mat.menu-color($dark-theme);
83+
@include mat.optgroup-color($dark-theme);
84+
@include mat.option-color($dark-theme);
8085
@include mat.progress-bar-color($dark-theme);
8186
@include mat.progress-spinner-color($dark-theme);
8287
@include mat.radio-color($dark-theme);
8388
@include mat.ripple-color($dark-theme);
89+
@include mat.select-color($dark-theme);
8490
@include mat.sidenav-color($dark-theme);
8591
@include mat.slide-toggle-color($dark-theme);
8692
@include mat.slider-color($dark-theme);
@@ -108,9 +114,12 @@ html {
108114
@include mat.input-density($scale-theme);
109115
@include mat.list-density($scale-theme);
110116
@include mat.menu-density($scale-theme);
117+
@include mat.optgroup-density($scale-theme);
118+
@include mat.option-density($scale-theme);
111119
@include mat.progress-bar-density($scale-theme);
112120
@include mat.progress-spinner-density($scale-theme);
113121
@include mat.radio-density($scale-theme);
122+
@include mat.select-density($scale-theme);
114123
@include mat.sidenav-density($scale-theme);
115124
@include mat.slide-toggle-density($scale-theme);
116125
@include mat.slider-density($scale-theme);

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,42 @@
120120
);
121121
}
122122

123+
/// Generates custom tokens for the mat-optgroup.
124+
/// @param {Map} $systems The MDC system tokens
125+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
126+
/// @return {Map} A set of custom tokens for the mat-optgroup
127+
@function optgroup($systems, $exclude-hardcoded) {
128+
@return mat.private-merge-all(
129+
_generate-typography-tokens($systems, label-text, title-small),
130+
(
131+
label-text-color: map.get($systems, md-sys-color, on-surface-variant),
132+
)
133+
);
134+
}
135+
136+
/// Generates custom tokens for the mat-option.
137+
/// @param {Map} $systems The MDC system tokens
138+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
139+
/// @return {Map} A set of custom tokens for the mat-option
140+
@function option($systems, $exclude-hardcoded) {
141+
@return mat.private-merge-all(
142+
_generate-typography-tokens($systems, label-text, label-large),
143+
(
144+
selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
145+
label-text-color: map.get($systems, md-sys-color, on-surface),
146+
hover-state-layer-color: mat.private-safe-color-change(
147+
map.get($systems, md-sys-color, on-surface),
148+
$alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
149+
),
150+
focus-state-layer-color: mat.private-safe-color-change(
151+
map.get($systems, md-sys-color, on-surface),
152+
$alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
153+
),
154+
selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
155+
),
156+
);
157+
}
158+
123159
/// Generates custom tokens for the mat-radio.
124160
/// @param {Map} $systems The MDC system tokens
125161
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -142,6 +178,28 @@
142178
);
143179
}
144180

181+
/// Generates custom tokens for the mat-select.
182+
/// @param {Map} $systems The MDC system tokens
183+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
184+
/// @return {Map} A set of custom tokens for the mat-select
185+
@function select($systems, $exclude-hardcoded) {
186+
@return mat.private-merge-all(
187+
_generate-typography-tokens($systems, trigger-text, body-large),
188+
(
189+
panel-background-color: map.get($systems, md-sys-color, surface-container),
190+
enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface),
191+
disabled-trigger-text-color: mat.private-safe-color-change(
192+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
193+
placeholder-text-color: map.get($systems, md-sys-color, on-surface-variant),
194+
enabled-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
195+
disabled-arrow-color: mat.private-safe-color-change(
196+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
197+
focused-arrow-color: map.get($systems, md-sys-color, primary),
198+
invalid-arrow-color: map.get($systems, md-sys-color, error),
199+
)
200+
);
201+
}
202+
145203
/// Generates custom tokens for the mat-sidenav.
146204
/// @param {Map} $systems The MDC system tokens
147205
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,11 @@ $_density-tokens: (
4949
(mat, grid-list): (),
5050
(mat, icon): (),
5151
(mat, menu): (),
52+
(mat, optgroup): (),
53+
(mat, option): (),
5254
(mat, radio): (),
5355
(mat, ripple): (),
56+
(mat, select): (),
5457
(mat, sidenav): (),
5558
(mat, slide-toggle): (),
5659
(mat, slider): (),

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,16 @@
280280
custom-tokens.menu($systems, $exclude-hardcoded),
281281
$token-slots
282282
),
283+
_namespace-tokens(
284+
(mat, optgroup),
285+
custom-tokens.optgroup($systems, $exclude-hardcoded),
286+
$token-slots
287+
),
288+
_namespace-tokens(
289+
(mat, option),
290+
custom-tokens.option($systems, $exclude-hardcoded),
291+
$token-slots
292+
),
283293
_namespace-tokens(
284294
(mat, radio),
285295
custom-tokens.radio($systems, $exclude-hardcoded),
@@ -290,6 +300,11 @@
290300
custom-tokens.ripple($systems, $exclude-hardcoded),
291301
$token-slots
292302
),
303+
_namespace-tokens(
304+
(mat, select),
305+
custom-tokens.select($systems, $exclude-hardcoded),
306+
$token-slots
307+
),
293308
_namespace-tokens(
294309
(mat, sidenav),
295310
custom-tokens.sidenav($systems, $exclude-hardcoded),

‎src/material/core/option/_optgroup-theme.scss

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,72 @@
1+
@use 'sass:map';
12
@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
23
@use '../tokens/token-utils';
34
@use '../style/sass-utils';
4-
55
@use '../theming/theming';
66
@use '../theming/inspection';
77
@use '../typography/typography';
88

9-
@mixin base($theme) {}
9+
@mixin base($theme) {
10+
@if inspection.get-theme-version($theme) == 1 {
11+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
}
13+
@else {}
14+
}
1015

1116
@mixin color($theme) {
12-
@include sass-utils.current-selector-or-root() {
13-
@include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
14-
tokens-mat-optgroup.get-color-tokens($theme));
17+
@if inspection.get-theme-version($theme) == 1 {
18+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
19+
}
20+
@else {
21+
@include sass-utils.current-selector-or-root() {
22+
@include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
23+
tokens-mat-optgroup.get-color-tokens($theme));
24+
}
1525
}
1626
}
1727

1828
@mixin typography($theme) {
19-
@include sass-utils.current-selector-or-root() {
20-
@include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
21-
tokens-mat-optgroup.get-typography-tokens($theme));
29+
@if inspection.get-theme-version($theme) == 1 {
30+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
31+
}
32+
@else {
33+
@include sass-utils.current-selector-or-root() {
34+
@include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
35+
tokens-mat-optgroup.get-typography-tokens($theme));
36+
}
2237
}
2338
}
2439

2540
@mixin density($theme) {
41+
@if inspection.get-theme-version($theme) == 1 {
42+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
43+
}
44+
@else {}
2645
}
2746

2847
@mixin theme($theme) {
2948
@include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
30-
@include base($theme);
31-
@if inspection.theme-has($theme, color) {
32-
@include color($theme);
33-
}
34-
@if inspection.theme-has($theme, density) {
35-
@include density($theme);
49+
@if inspection.get-theme-version($theme) == 1 {
50+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
3651
}
37-
@if inspection.theme-has($theme, typography) {
38-
@include typography($theme);
52+
@else {
53+
@include base($theme);
54+
@if inspection.theme-has($theme, color) {
55+
@include color($theme);
56+
}
57+
@if inspection.theme-has($theme, density) {
58+
@include density($theme);
59+
}
60+
@if inspection.theme-has($theme, typography) {
61+
@include typography($theme);
62+
}
3963
}
4064
}
4165
}
66+
67+
@mixin _theme-from-tokens($tokens) {
68+
@if ($tokens != ()) {
69+
@include token-utils.create-token-values(
70+
tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));
71+
}
72+
}

‎src/material/core/option/_option-theme.scss

Lines changed: 54 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,82 @@
1+
@use 'sass:map';
12
@use '../tokens/m2/mat/option' as tokens-mat-option;
23
@use '../tokens/token-utils';
34
@use '../style/sass-utils';
4-
55
@use '../theming/theming';
66
@use '../theming/inspection';
77
@use '../typography/typography';
88

9-
@mixin base($theme) {}
9+
@mixin base($theme) {
10+
@if inspection.get-theme-version($theme) == 1 {
11+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
}
13+
@else {}
14+
}
1015

1116
@mixin color($theme) {
12-
@include sass-utils.current-selector-or-root() {
13-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
14-
tokens-mat-option.get-color-tokens($theme));
17+
@if inspection.get-theme-version($theme) == 1 {
18+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
1519
}
20+
@else {
21+
@include sass-utils.current-selector-or-root() {
22+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
23+
tokens-mat-option.get-color-tokens($theme));
24+
}
1625

17-
.mat-accent {
18-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
19-
tokens-mat-option.get-color-tokens($theme, accent));
20-
}
26+
.mat-accent {
27+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
28+
tokens-mat-option.get-color-tokens($theme, accent));
29+
}
2130

22-
.mat-warn {
23-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
24-
tokens-mat-option.get-color-tokens($theme, warn));
31+
.mat-warn {
32+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
33+
tokens-mat-option.get-color-tokens($theme, warn));
34+
}
2535
}
2636
}
2737

2838
@mixin typography($theme) {
29-
@include sass-utils.current-selector-or-root() {
30-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
31-
tokens-mat-option.get-typography-tokens($theme));
39+
@if inspection.get-theme-version($theme) == 1 {
40+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
41+
}
42+
@else {
43+
@include sass-utils.current-selector-or-root() {
44+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
45+
tokens-mat-option.get-typography-tokens($theme));
46+
}
3247
}
3348
}
3449

3550
@mixin density($theme) {
51+
@if inspection.get-theme-version($theme) == 1 {
52+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
53+
}
54+
@else {}
3655
}
3756

3857
@mixin theme($theme) {
3958
@include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
40-
@include base($theme);
41-
@if inspection.theme-has($theme, color) {
42-
@include color($theme);
43-
}
44-
@if inspection.theme-has($theme, density) {
45-
@include density($theme);
59+
@if inspection.get-theme-version($theme) == 1 {
60+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
4661
}
47-
@if inspection.theme-has($theme, typography) {
48-
@include typography($theme);
62+
@else {
63+
@include base($theme);
64+
@if inspection.theme-has($theme, color) {
65+
@include color($theme);
66+
}
67+
@if inspection.theme-has($theme, density) {
68+
@include density($theme);
69+
}
70+
@if inspection.theme-has($theme, typography) {
71+
@include typography($theme);
72+
}
4973
}
5074
}
5175
}
76+
77+
@mixin _theme-from-tokens($tokens) {
78+
@if ($tokens != ()) {
79+
@include token-utils.create-token-values(
80+
tokens-mat-option.$prefix, map.get($tokens, tokens-mat-option.$prefix));
81+
}
82+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
@use './mat/grid-list' as tokens-mat-grid-list;
88
@use './mat/icon' as tokens-mat-icon;
99
@use './mat/menu' as tokens-mat-menu;
10+
@use './mat/option' as tokens-mat-option;
11+
@use './mat/optgroup' as tokens-mat-optgroup;
1012
@use './mat/radio' as tokens-mat-radio;
1113
@use './mat/ripple' as tokens-mat-ripple;
14+
@use './mat/select' as tokens-mat-select;
1215
@use './mat/sidenav' as tokens-mat-sidenav;
1316
@use './mat/slide-toggle' as tokens-mat-slide-toggle;
1417
@use './mat/slider' as tokens-mat-slider;
@@ -87,8 +90,11 @@
8790
_get-tokens-for-module($theme, tokens-mat-grid-list),
8891
_get-tokens-for-module($theme, tokens-mat-icon),
8992
_get-tokens-for-module($theme, tokens-mat-menu),
93+
_get-tokens-for-module($theme, tokens-mat-optgroup),
94+
_get-tokens-for-module($theme, tokens-mat-option),
9095
_get-tokens-for-module($theme, tokens-mat-radio),
9196
_get-tokens-for-module($theme, tokens-mat-ripple),
97+
_get-tokens-for-module($theme, tokens-mat-select),
9298
_get-tokens-for-module($theme, tokens-mat-sidenav),
9399
_get-tokens-for-module($theme, tokens-mat-slide-toggle),
94100
_get-tokens-for-module($theme, tokens-mat-slider),

0 commit comments

Comments
 (0)