Skip to content

Commit c602543

Browse files
crisbetoandrewseguin
crisbeto
authored and
andrewseguin
committed
fix(multiple): avoid repeating selectors in m3 themes
In #29596 we switched to outputting each group of tokens under a different selector in order to work around an Sass deprecation warning. Now that M3 themes are purely token-based, we can switch back to the old approach which produces smaller themes and makes the tokens easier to read in the dev tools. We have to keep the workaround in place for M2 themes, because they mixed CSS variables with other rules.
1 parent 23269f3 commit c602543

Some content is hidden

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

44 files changed

+314
-287
lines changed

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

Lines changed: 4 additions & 4 deletions
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

Lines changed: 5 additions & 5 deletions
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 8 additions & 8 deletions
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

Lines changed: 32 additions & 32 deletions
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,8 +78,8 @@
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) {
@@ -181,36 +181,36 @@
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
);
@@ -318,36 +318,36 @@
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
);
@@ -366,36 +366,36 @@
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
);

0 commit comments

Comments
 (0)