Skip to content

Commit 371446a

Browse files
mmalerbammalerba
authored
feat(material/theming): Disambiguate token names in theme overrides (angular#29859)
Prior to this change a single key in the theme overrides map sometimes resulted in mutliple tokens being overridden. This change gives every token a unique name, by prefixing when necessary. The old ambiguous keys are still allowed for compatibility, but will now log a warning when they're used.
1 parent 9c3af28 commit 371446a

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

+1964
-1050
lines changed

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

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,64 +10,70 @@
1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13-
}
14-
@else {
13+
} @else {
1514
@include sass-utils.current-selector-or-root() {
16-
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
17-
tokens-mat-autocomplete.get-unthemable-tokens());
15+
@include token-utils.create-token-values(
16+
tokens-mat-autocomplete.$prefix,
17+
tokens-mat-autocomplete.get-unthemable-tokens()
18+
);
1819
}
1920
}
2021
}
2122

2223
@mixin color($theme) {
2324
@if inspection.get-theme-version($theme) == 1 {
2425
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
25-
}
26-
@else {
26+
} @else {
2727
@include sass-utils.current-selector-or-root() {
28-
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
29-
tokens-mat-autocomplete.get-color-tokens($theme));
28+
@include token-utils.create-token-values(
29+
tokens-mat-autocomplete.$prefix,
30+
tokens-mat-autocomplete.get-color-tokens($theme)
31+
);
3032
}
3133
}
3234
}
3335

3436
@mixin typography($theme) {
3537
@if inspection.get-theme-version($theme) == 1 {
3638
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
37-
}
38-
@else {
39+
} @else {
3940
@include sass-utils.current-selector-or-root() {
40-
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
41-
tokens-mat-autocomplete.get-typography-tokens($theme));
41+
@include token-utils.create-token-values(
42+
tokens-mat-autocomplete.$prefix,
43+
tokens-mat-autocomplete.get-typography-tokens($theme)
44+
);
4245
}
4346
}
4447
}
4548

4649
@mixin density($theme) {
4750
@if inspection.get-theme-version($theme) == 1 {
4851
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
49-
}
50-
@else {
52+
} @else {
5153
@include sass-utils.current-selector-or-root() {
52-
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
53-
tokens-mat-autocomplete.get-density-tokens($theme));
54+
@include token-utils.create-token-values(
55+
tokens-mat-autocomplete.$prefix,
56+
tokens-mat-autocomplete.get-density-tokens($theme)
57+
);
5458
}
5559
}
5660
}
5761

5862
@mixin overrides($tokens: ()) {
5963
@include token-utils.batch-create-token-values(
6064
$tokens,
61-
(prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
65+
(
66+
namespace: tokens-mat-autocomplete.$prefix,
67+
tokens: tokens-mat-autocomplete.get-token-slots(),
68+
)
6269
);
6370
}
6471

6572
@mixin theme($theme) {
6673
@include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
6774
@if inspection.get-theme-version($theme) == 1 {
6875
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
69-
}
70-
@else {
76+
} @else {
7177
@include base($theme);
7278
@if inspection.theme-has($theme, color) {
7379
@include color($theme);
@@ -84,9 +90,12 @@
8490

8591
@mixin _theme-from-tokens($tokens) {
8692
@include validation.selector-defined(
87-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
93+
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
94+
);
8895
@if ($tokens != ()) {
8996
@include token-utils.create-token-values(
90-
tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
97+
tokens-mat-autocomplete.$prefix,
98+
map.get($tokens, tokens-mat-autocomplete.$prefix)
99+
);
91100
}
92101
}

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@
1313
@mixin base($theme) {
1414
@if inspection.get-theme-version($theme) == 1 {
1515
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
16-
}
17-
@else {
16+
} @else {
1817
@include sass-utils.current-selector-or-root() {
19-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
20-
tokens-mat-badge.get-unthemable-tokens());
18+
@include token-utils.create-token-values(
19+
tokens-mat-badge.$prefix,
20+
tokens-mat-badge.get-unthemable-tokens()
21+
);
2122
}
2223
}
2324
}
@@ -30,21 +31,26 @@
3031
@mixin color($theme, $options...) {
3132
@if inspection.get-theme-version($theme) == 1 {
3233
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
33-
}
34-
@else {
34+
} @else {
3535
@include sass-utils.current-selector-or-root() {
36-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
37-
tokens-mat-badge.get-color-tokens($theme));
36+
@include token-utils.create-token-values(
37+
tokens-mat-badge.$prefix,
38+
tokens-mat-badge.get-color-tokens($theme)
39+
);
3840
}
3941

4042
.mat-badge-accent {
41-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
42-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
43+
@include token-utils.create-token-values(
44+
tokens-mat-badge.$prefix,
45+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
46+
);
4347
}
4448

4549
.mat-badge-warn {
46-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
47-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
50+
@include token-utils.create-token-values(
51+
tokens-mat-badge.$prefix,
52+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
53+
);
4854
}
4955
}
5056
}
@@ -54,11 +60,12 @@
5460
@mixin typography($theme) {
5561
@if inspection.get-theme-version($theme) == 1 {
5662
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
57-
}
58-
@else {
63+
} @else {
5964
@include sass-utils.current-selector-or-root() {
60-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
61-
tokens-mat-badge.get-typography-tokens($theme));
65+
@include token-utils.create-token-values(
66+
tokens-mat-badge.$prefix,
67+
tokens-mat-badge.get-typography-tokens($theme)
68+
);
6269
}
6370
}
6471
}
@@ -68,16 +75,19 @@
6875
@mixin density($theme) {
6976
@if inspection.get-theme-version($theme) == 1 {
7077
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
78+
} @else {
7179
}
72-
@else {}
7380
}
7481

7582
/// Outputs the CSS variable values for the given tokens.
7683
/// @param {Map} $tokens The token values to emit.
7784
@mixin overrides($tokens: ()) {
7885
@include token-utils.batch-create-token-values(
7986
$tokens,
80-
(prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
87+
(
88+
namespace: tokens-mat-badge.$prefix,
89+
tokens: tokens-mat-badge.get-token-slots(),
90+
)
8191
);
8292
}
8393

@@ -90,8 +100,7 @@
90100
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
91101
@if inspection.get-theme-version($theme) == 1 {
92102
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
93-
}
94-
@else {
103+
} @else {
95104
@include base($theme);
96105
@if inspection.theme-has($theme, color) {
97106
@include color($theme);
@@ -108,7 +117,8 @@
108117

109118
@mixin _theme-from-tokens($tokens, $options...) {
110119
@include validation.selector-defined(
111-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
120+
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
121+
);
112122
$mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
113123
@include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
114124
}

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

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,59 +10,64 @@
1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13-
}
14-
@else {
13+
} @else {
1514
@include sass-utils.current-selector-or-root() {
1615
@include token-utils.create-token-values(
17-
tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
16+
tokens-mat-bottom-sheet.$prefix,
17+
tokens-mat-bottom-sheet.get-unthemable-tokens()
18+
);
1819
}
1920
}
2021
}
2122

2223
@mixin color($theme) {
2324
@if inspection.get-theme-version($theme) == 1 {
2425
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
25-
}
26-
@else {
26+
} @else {
2727
@include sass-utils.current-selector-or-root() {
28-
@include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
29-
tokens-mat-bottom-sheet.get-color-tokens($theme));
28+
@include token-utils.create-token-values(
29+
tokens-mat-bottom-sheet.$prefix,
30+
tokens-mat-bottom-sheet.get-color-tokens($theme)
31+
);
3032
}
3133
}
3234
}
3335

3436
@mixin typography($theme) {
3537
@if inspection.get-theme-version($theme) == 1 {
3638
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
37-
}
38-
@else {
39+
} @else {
3940
@include sass-utils.current-selector-or-root() {
40-
@include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
41-
tokens-mat-bottom-sheet.get-typography-tokens($theme));
41+
@include token-utils.create-token-values(
42+
tokens-mat-bottom-sheet.$prefix,
43+
tokens-mat-bottom-sheet.get-typography-tokens($theme)
44+
);
4245
}
4346
}
4447
}
4548

4649
@mixin density($theme) {
4750
@if inspection.get-theme-version($theme) == 1 {
4851
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
52+
} @else {
4953
}
50-
@else {}
5154
}
5255

5356
@mixin overrides($tokens: ()) {
5457
@include token-utils.batch-create-token-values(
5558
$tokens,
56-
(prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
59+
(
60+
namespace: tokens-mat-bottom-sheet.$prefix,
61+
tokens: tokens-mat-bottom-sheet.get-token-slots(),
62+
)
5763
);
5864
}
5965

6066
@mixin theme($theme) {
6167
@include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
6268
@if inspection.get-theme-version($theme) == 1 {
6369
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
64-
}
65-
@else {
70+
} @else {
6671
@include base($theme);
6772
@if inspection.theme-has($theme, color) {
6873
@include color($theme);
@@ -79,9 +84,12 @@
7984

8085
@mixin _theme-from-tokens($tokens) {
8186
@include validation.selector-defined(
82-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
87+
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
88+
);
8389
@if ($tokens != ()) {
8490
@include token-utils.create-token-values(
85-
tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
91+
tokens-mat-bottom-sheet.$prefix,
92+
map.get($tokens, tokens-mat-bottom-sheet.$prefix)
93+
);
8694
}
8795
}

0 commit comments

Comments
 (0)