Skip to content

Commit e1cf284

Browse files
andrewseguinandrewseguin
authored
fix(multiple): avoid repeating selectors in m3 themes (#30645)
1 parent fb6a38f commit e1cf284

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+322
-291
lines changed

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

+4
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ html {
3535
color-scheme: light;
3636
body:not(.demo-experimental-theme) {
3737
@include mat.all-component-themes($light-theme);
38+
@include mat.checkbox-overrides((
39+
disabled-label-color: orange,
40+
label-text-color: red,
41+
));
3842
@include mat.system-level-colors($light-theme);
3943
@include mat.system-level-typography($light-theme);
4044
// TODO(mmalerba): Support M3 for experimental components.

‎src/material/autocomplete/_autocomplete-theme.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1313
} @else {
1414
@include sass-utils.current-selector-or-root() {
15-
@include token-utils.create-token-values(
15+
@include token-utils.create-token-values-mixed(
1616
tokens-mat-autocomplete.$prefix,
1717
tokens-mat-autocomplete.get-unthemable-tokens()
1818
);
@@ -25,7 +25,7 @@
2525
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
2626
} @else {
2727
@include sass-utils.current-selector-or-root() {
28-
@include token-utils.create-token-values(
28+
@include token-utils.create-token-values-mixed(
2929
tokens-mat-autocomplete.$prefix,
3030
tokens-mat-autocomplete.get-color-tokens($theme)
3131
);
@@ -38,7 +38,7 @@
3838
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
3939
} @else {
4040
@include sass-utils.current-selector-or-root() {
41-
@include token-utils.create-token-values(
41+
@include token-utils.create-token-values-mixed(
4242
tokens-mat-autocomplete.$prefix,
4343
tokens-mat-autocomplete.get-typography-tokens($theme)
4444
);
@@ -51,7 +51,7 @@
5151
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
5252
} @else {
5353
@include sass-utils.current-selector-or-root() {
54-
@include token-utils.create-token-values(
54+
@include token-utils.create-token-values-mixed(
5555
tokens-mat-autocomplete.$prefix,
5656
tokens-mat-autocomplete.get-density-tokens($theme)
5757
);

‎src/material/badge/_badge-theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1616
} @else {
1717
@include sass-utils.current-selector-or-root() {
18-
@include token-utils.create-token-values(
18+
@include token-utils.create-token-values-mixed(
1919
tokens-mat-badge.$prefix,
2020
tokens-mat-badge.get-unthemable-tokens()
2121
);
@@ -33,21 +33,21 @@
3333
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
3434
} @else {
3535
@include sass-utils.current-selector-or-root() {
36-
@include token-utils.create-token-values(
36+
@include token-utils.create-token-values-mixed(
3737
tokens-mat-badge.$prefix,
3838
tokens-mat-badge.get-color-tokens($theme)
3939
);
4040
}
4141

4242
.mat-badge-accent {
43-
@include token-utils.create-token-values(
43+
@include token-utils.create-token-values-mixed(
4444
tokens-mat-badge.$prefix,
4545
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
4646
);
4747
}
4848

4949
.mat-badge-warn {
50-
@include token-utils.create-token-values(
50+
@include token-utils.create-token-values-mixed(
5151
tokens-mat-badge.$prefix,
5252
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
5353
);
@@ -62,7 +62,7 @@
6262
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
6363
} @else {
6464
@include sass-utils.current-selector-or-root() {
65-
@include token-utils.create-token-values(
65+
@include token-utils.create-token-values-mixed(
6666
tokens-mat-badge.$prefix,
6767
tokens-mat-badge.get-typography-tokens($theme)
6868
);

‎src/material/bottom-sheet/_bottom-sheet-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1313
} @else {
1414
@include sass-utils.current-selector-or-root() {
15-
@include token-utils.create-token-values(
15+
@include token-utils.create-token-values-mixed(
1616
tokens-mat-bottom-sheet.$prefix,
1717
tokens-mat-bottom-sheet.get-unthemable-tokens()
1818
);
@@ -25,7 +25,7 @@
2525
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
2626
} @else {
2727
@include sass-utils.current-selector-or-root() {
28-
@include token-utils.create-token-values(
28+
@include token-utils.create-token-values-mixed(
2929
tokens-mat-bottom-sheet.$prefix,
3030
tokens-mat-bottom-sheet.get-color-tokens($theme)
3131
);
@@ -38,7 +38,7 @@
3838
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
3939
} @else {
4040
@include sass-utils.current-selector-or-root() {
41-
@include token-utils.create-token-values(
41+
@include token-utils.create-token-values-mixed(
4242
tokens-mat-bottom-sheet.$prefix,
4343
tokens-mat-bottom-sheet.get-typography-tokens($theme)
4444
);

‎src/material/button-toggle/_button-toggle-theme.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1616
} @else {
1717
@include sass-utils.current-selector-or-root() {
18-
@include token-utils.create-token-values(
18+
@include token-utils.create-token-values-mixed(
1919
tokens-mat-legacy-button-toggle.$prefix,
2020
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
2121
);
22-
@include token-utils.create-token-values(
22+
@include token-utils.create-token-values-mixed(
2323
tokens-mat-standard-button-toggle.$prefix,
2424
tokens-mat-standard-button-toggle.get-unthemable-tokens()
2525
);
@@ -37,11 +37,11 @@
3737
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
3838
} @else {
3939
@include sass-utils.current-selector-or-root() {
40-
@include token-utils.create-token-values(
40+
@include token-utils.create-token-values-mixed(
4141
tokens-mat-legacy-button-toggle.$prefix,
4242
tokens-mat-legacy-button-toggle.get-color-tokens($theme)
4343
);
44-
@include token-utils.create-token-values(
44+
@include token-utils.create-token-values-mixed(
4545
tokens-mat-standard-button-toggle.$prefix,
4646
tokens-mat-standard-button-toggle.get-color-tokens($theme)
4747
);
@@ -56,11 +56,11 @@
5656
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
5757
} @else {
5858
@include sass-utils.current-selector-or-root() {
59-
@include token-utils.create-token-values(
59+
@include token-utils.create-token-values-mixed(
6060
tokens-mat-legacy-button-toggle.$prefix,
6161
tokens-mat-legacy-button-toggle.get-typography-tokens($theme)
6262
);
63-
@include token-utils.create-token-values(
63+
@include token-utils.create-token-values-mixed(
6464
tokens-mat-standard-button-toggle.$prefix,
6565
tokens-mat-standard-button-toggle.get-typography-tokens($theme)
6666
);
@@ -75,11 +75,11 @@
7575
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
7676
} @else {
7777
@include sass-utils.current-selector-or-root() {
78-
@include token-utils.create-token-values(
78+
@include token-utils.create-token-values-mixed(
7979
tokens-mat-legacy-button-toggle.$prefix,
8080
tokens-mat-legacy-button-toggle.get-density-tokens($theme)
8181
);
82-
@include token-utils.create-token-values(
82+
@include token-utils.create-token-values-mixed(
8383
tokens-mat-standard-button-toggle.$prefix,
8484
tokens-mat-standard-button-toggle.get-density-tokens($theme)
8585
);

‎src/material/button/_button-theme.scss

+36-36
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
tokens-mat-text-button.get-color-tokens($theme)
2828
);
2929

30-
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
31-
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
30+
@include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens);
31+
@include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens);
3232
}
3333

3434
@mixin _filled-button-variant($theme, $palette) {
@@ -44,8 +44,8 @@
4444
tokens-mat-filled-button.get-color-tokens($theme)
4545
);
4646

47-
@include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
48-
@include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
47+
@include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens);
48+
@include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens);
4949
}
5050

5151
@mixin _protected-button-variant($theme, $palette) {
@@ -61,8 +61,8 @@
6161
tokens-mat-protected-button.get-color-tokens($theme)
6262
);
6363

64-
@include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
65-
@include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
64+
@include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens);
65+
@include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens);
6666
}
6767

6868
@mixin _outlined-button-variant($theme, $palette) {
@@ -78,12 +78,12 @@
7878
tokens-mat-outlined-button.get-color-tokens($theme)
7979
);
8080

81-
@include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
82-
@include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
81+
@include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
82+
@include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens);
8383
}
8484

8585
@mixin _tonal-button-variant($theme, $palette) {
86-
@include token-utils.create-token-values(tokens-mat-tonal-button.$prefix, if(
86+
@include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if(
8787
$palette,
8888
tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
8989
tokens-mat-tonal-button.get-color-tokens($theme)
@@ -181,40 +181,40 @@
181181
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
182182
} @else {
183183
@include sass-utils.current-selector-or-root() {
184-
@include token-utils.create-token-values(
184+
@include token-utils.create-token-values-mixed(
185185
tokens-mdc-text-button.$prefix,
186186
tokens-mdc-text-button.get-unthemable-tokens()
187187
);
188-
@include token-utils.create-token-values(
188+
@include token-utils.create-token-values-mixed(
189189
tokens-mdc-filled-button.$prefix,
190190
tokens-mdc-filled-button.get-unthemable-tokens()
191191
);
192-
@include token-utils.create-token-values(
192+
@include token-utils.create-token-values-mixed(
193193
tokens-mdc-protected-button.$prefix,
194194
tokens-mdc-protected-button.get-unthemable-tokens()
195195
);
196-
@include token-utils.create-token-values(
196+
@include token-utils.create-token-values-mixed(
197197
tokens-mdc-outlined-button.$prefix,
198198
tokens-mdc-outlined-button.get-unthemable-tokens()
199199
);
200200

201-
@include token-utils.create-token-values(
201+
@include token-utils.create-token-values-mixed(
202202
tokens-mat-text-button.$prefix,
203203
tokens-mat-text-button.get-unthemable-tokens()
204204
);
205-
@include token-utils.create-token-values(
205+
@include token-utils.create-token-values-mixed(
206206
tokens-mat-filled-button.$prefix,
207207
tokens-mat-filled-button.get-unthemable-tokens()
208208
);
209-
@include token-utils.create-token-values(
209+
@include token-utils.create-token-values-mixed(
210210
tokens-mat-protected-button.$prefix,
211211
tokens-mat-protected-button.get-unthemable-tokens()
212212
);
213-
@include token-utils.create-token-values(
213+
@include token-utils.create-token-values-mixed(
214214
tokens-mat-outlined-button.$prefix,
215215
tokens-mat-outlined-button.get-unthemable-tokens()
216216
);
217-
@include token-utils.create-token-values(
217+
@include token-utils.create-token-values-mixed(
218218
tokens-mat-tonal-button.$prefix,
219219
tokens-mat-tonal-button.get-unthemable-tokens()
220220
);
@@ -318,40 +318,40 @@
318318
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
319319
} @else {
320320
@include sass-utils.current-selector-or-root() {
321-
@include token-utils.create-token-values(
321+
@include token-utils.create-token-values-mixed(
322322
tokens-mdc-text-button.$prefix,
323323
tokens-mdc-text-button.get-typography-tokens($theme)
324324
);
325-
@include token-utils.create-token-values(
325+
@include token-utils.create-token-values-mixed(
326326
tokens-mdc-filled-button.$prefix,
327327
tokens-mdc-filled-button.get-typography-tokens($theme)
328328
);
329-
@include token-utils.create-token-values(
329+
@include token-utils.create-token-values-mixed(
330330
tokens-mdc-protected-button.$prefix,
331331
tokens-mdc-protected-button.get-typography-tokens($theme)
332332
);
333-
@include token-utils.create-token-values(
333+
@include token-utils.create-token-values-mixed(
334334
tokens-mdc-outlined-button.$prefix,
335335
tokens-mdc-outlined-button.get-typography-tokens($theme)
336336
);
337337

338-
@include token-utils.create-token-values(
338+
@include token-utils.create-token-values-mixed(
339339
tokens-mat-text-button.$prefix,
340340
tokens-mat-text-button.get-typography-tokens($theme)
341341
);
342-
@include token-utils.create-token-values(
342+
@include token-utils.create-token-values-mixed(
343343
tokens-mat-filled-button.$prefix,
344344
tokens-mat-filled-button.get-typography-tokens($theme)
345345
);
346-
@include token-utils.create-token-values(
346+
@include token-utils.create-token-values-mixed(
347347
tokens-mat-protected-button.$prefix,
348348
tokens-mat-protected-button.get-typography-tokens($theme)
349349
);
350-
@include token-utils.create-token-values(
350+
@include token-utils.create-token-values-mixed(
351351
tokens-mat-outlined-button.$prefix,
352352
tokens-mat-outlined-button.get-typography-tokens($theme)
353353
);
354-
@include token-utils.create-token-values(
354+
@include token-utils.create-token-values-mixed(
355355
tokens-mat-tonal-button.$prefix,
356356
tokens-mat-tonal-button.get-typography-tokens($theme)
357357
);
@@ -366,40 +366,40 @@
366366
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
367367
} @else {
368368
@include sass-utils.current-selector-or-root() {
369-
@include token-utils.create-token-values(
369+
@include token-utils.create-token-values-mixed(
370370
tokens-mdc-text-button.$prefix,
371371
tokens-mdc-text-button.get-density-tokens($theme)
372372
);
373-
@include token-utils.create-token-values(
373+
@include token-utils.create-token-values-mixed(
374374
tokens-mdc-filled-button.$prefix,
375375
tokens-mdc-filled-button.get-density-tokens($theme)
376376
);
377-
@include token-utils.create-token-values(
377+
@include token-utils.create-token-values-mixed(
378378
tokens-mdc-protected-button.$prefix,
379379
tokens-mdc-protected-button.get-density-tokens($theme)
380380
);
381-
@include token-utils.create-token-values(
381+
@include token-utils.create-token-values-mixed(
382382
tokens-mdc-outlined-button.$prefix,
383383
tokens-mdc-outlined-button.get-density-tokens($theme)
384384
);
385385

386-
@include token-utils.create-token-values(
386+
@include token-utils.create-token-values-mixed(
387387
tokens-mat-text-button.$prefix,
388388
tokens-mat-text-button.get-density-tokens($theme)
389389
);
390-
@include token-utils.create-token-values(
390+
@include token-utils.create-token-values-mixed(
391391
tokens-mat-filled-button.$prefix,
392392
tokens-mat-filled-button.get-density-tokens($theme)
393393
);
394-
@include token-utils.create-token-values(
394+
@include token-utils.create-token-values-mixed(
395395
tokens-mat-protected-button.$prefix,
396396
tokens-mat-protected-button.get-density-tokens($theme)
397397
);
398-
@include token-utils.create-token-values(
398+
@include token-utils.create-token-values-mixed(
399399
tokens-mat-outlined-button.$prefix,
400400
tokens-mat-outlined-button.get-density-tokens($theme)
401401
);
402-
@include token-utils.create-token-values(
402+
@include token-utils.create-token-values-mixed(
403403
tokens-mat-tonal-button.$prefix,
404404
tokens-mat-tonal-button.get-density-tokens($theme)
405405
);

0 commit comments

Comments
 (0)