Skip to content

Commit b20b46c

Browse files
andrewseguinandrewseguin
authored
refactor: use values API for creating tokens (angular#31362)
1 parent 97d60c5 commit b20b46c

File tree

7 files changed

+35
-86
lines changed

7 files changed

+35
-86
lines changed

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,6 @@
1414
@include token-utils.values($tokens);
1515
}
1616

17-
@mixin _m2-icon-button-variant($theme, $palette) {
18-
$mat-tokens: if(
19-
$palette,
20-
m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
21-
m2-icon-button.get-color-tokens($theme)
22-
);
23-
24-
@include token-utils.create-token-values-mixed($mat-tokens);
25-
}
26-
2717
/// Outputs color theme styles for the mat-icon-button.
2818
/// @param {Map} $theme The theme to generate color styles for.
2919
/// @param {String} $color-variant: The color variant to use for the

‎src/material/checkbox/_checkbox-theme.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,14 @@
3131
@if inspection.get-theme-version($theme) != 1 {
3232
.mat-mdc-checkbox {
3333
&.mat-primary {
34-
@include token-utils.create-token-values-mixed(
35-
m2-checkbox.get-color-tokens($theme, primary,
36-
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
34+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, primary,
35+
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
3736
);
3837
}
3938

4039
&.mat-warn {
41-
@include token-utils.create-token-values-mixed(
42-
m2-checkbox.get-color-tokens($theme, error,
43-
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
40+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, error,
41+
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
4442
);
4543
}
4644
}

‎src/material/chips/_chips-theme.scss‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,37 @@
1010
/// for the mat-chips.
1111
/// @param {Map} $theme The theme to generate base styles for.
1212
@mixin base($theme) {
13+
$tokens: m2-chip.get-unthemable-tokens($theme);
1314
@if inspection.get-theme-version($theme) == 1 {
14-
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
15-
} @else {
16-
.mat-mdc-standard-chip {
17-
@include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
18-
}
15+
$tokens: map.get(m3-chip.get-tokens($theme), base);
1916
}
17+
18+
@include token-utils.values($tokens);
2019
}
2120

2221
/// Outputs color theme styles for the mat-chips.
2322
/// @param {Map} $theme The theme to generate color styles for.
2423
/// @param {String} $color-variant The color variant to use for the component (M3 only)
2524
@mixin color($theme, $color-variant: null) {
2625
@if inspection.get-theme-version($theme) == 1 {
27-
@include token-utils.create-token-values(
26+
@include token-utils.values(
2827
map.get(m3-chip.get-tokens($theme, $color-variant), color));
2928
} @else {
3029
.mat-mdc-standard-chip {
31-
@include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme));
30+
@include token-utils.values(m2-chip.get-color-tokens($theme));
3231

3332
&.mat-mdc-chip-selected,
3433
&.mat-mdc-chip-highlighted {
3534
&.mat-primary {
36-
@include token-utils.create-token-values-mixed(
37-
m2-chip.get-color-tokens($theme, primary));
35+
@include token-utils.values(m2-chip.get-color-tokens($theme, primary));
3836
}
3937

4038
&.mat-accent {
41-
@include token-utils.create-token-values-mixed(
42-
m2-chip.get-color-tokens($theme, secondary));
39+
@include token-utils.values(m2-chip.get-color-tokens($theme, secondary));
4340
}
4441

4542
&.mat-warn {
46-
@include token-utils.create-token-values-mixed(
47-
m2-chip.get-color-tokens($theme, error));
43+
@include token-utils.values(m2-chip.get-color-tokens($theme, error));
4844
}
4945
}
5046
}
@@ -54,25 +50,23 @@
5450
/// Outputs typography theme styles for the mat-chips.
5551
/// @param {Map} $theme The theme to generate typography styles for.
5652
@mixin typography($theme) {
53+
$tokens: m2-chip.get-typography-tokens($theme);
5754
@if inspection.get-theme-version($theme) == 1 {
58-
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), typography));
59-
} @else {
60-
.mat-mdc-standard-chip {
61-
@include token-utils.create-token-values-mixed(m2-chip.get-typography-tokens($theme));
62-
}
55+
$tokens: map.get(m3-chip.get-tokens($theme), typography);
6356
}
57+
58+
@include token-utils.values($tokens);
6459
}
6560

6661
/// Outputs density theme styles for the mat-chips.
6762
/// @param {Map} $theme The theme to generate density styles for.
6863
@mixin density($theme) {
64+
$tokens: m2-chip.get-density-tokens($theme);
6965
@if inspection.get-theme-version($theme) == 1 {
70-
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), density));
71-
} @else {
72-
.mat-mdc-chip.mat-mdc-standard-chip {
73-
@include token-utils.create-token-values-mixed(m2-chip.get-density-tokens($theme));
74-
}
66+
$tokens: map.get(m3-chip.get-tokens($theme), density);
7567
}
68+
69+
@include token-utils.values($tokens);
7670
}
7771

7872
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

‎src/material/core/tokens/_token-utils.scss‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -80,37 +80,6 @@
8080
}
8181
}
8282

83-
// Outputs a map of tokens.
84-
@mixin create-token-values($tokens) {
85-
@include _create-token-values-internal($tokens, false);
86-
}
87-
88-
// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
89-
// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
90-
@mixin create-token-values-mixed($tokens) {
91-
@include _create-token-values-internal($tokens, true);
92-
}
93-
94-
@mixin _create-token-values-internal($tokens, $in-place) {
95-
@if ($tokens != null) {
96-
@if ($in-place) {
97-
& {
98-
@each $key, $value in $tokens {
99-
@if $value != null {
100-
--mat-#{$key}: #{$value};
101-
}
102-
}
103-
}
104-
} @else {
105-
@each $key, $value in $tokens {
106-
@if $value != null {
107-
--mat-#{$key}: #{$value};
108-
}
109-
}
110-
}
111-
}
112-
}
113-
11483
/// Emits new token values for the given token overrides.
11584
/// Verifies that the overrides passed in are valid tokens.
11685
/// New token values are emitted under the current selector or root.
@@ -136,7 +105,7 @@
136105
$namespace: list.nth($data, 1);
137106
$name: list.nth($data, 2);
138107
$prefixed-name: $namespace + '-' + $name;
139-
@include create-token-values(($prefixed-name: $value));
108+
@include values(($prefixed-name: $value));
140109
} @else {
141110
@error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
142111
}

‎src/material/icon/_icon-theme.scss‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,6 @@
44
@use './m3-icon';
55
@use 'sass:map';
66

7-
@mixin _palette-colors($theme, $palette-name) {
8-
$color: inspection.get-theme-color($theme, $palette-name, text);
9-
$tokens: m2-icon.private-get-icon-color-tokens($color);
10-
@include token-utils.create-token-values-mixed($tokens);
11-
}
12-
137
@mixin base($theme) {
148
$tokens: m2-icon.get-unthemable-tokens();
159
@if inspection.get-theme-version($theme) == 1 {
@@ -56,19 +50,23 @@
5650
/// Outputs typography theme styles for the mat-icon.
5751
/// @param {Map} $theme The theme to generate typography styles for.
5852
@mixin typography($theme) {
53+
$tokens: m2-icon.get-typography-tokens($theme);
5954
@if inspection.get-theme-version($theme) == 1 {
60-
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), typography));
61-
} @else {
55+
$tokens: map.get(m3-icon.get-tokens($theme), typography);
6256
}
57+
58+
@include token-utils.values($tokens);
6359
}
6460

6561
/// Outputs density theme styles for the mat-icon.
6662
/// @param {Map} $theme The theme to generate density styles for.
6763
@mixin density($theme) {
64+
$tokens: m2-icon.get-density-tokens($theme);
6865
@if inspection.get-theme-version($theme) == 1 {
69-
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), density));
70-
} @else {
66+
$tokens: map.get(m3-icon.get-tokens($theme), density);
7167
}
68+
69+
@include token-utils.values($tokens);
7270
}
7371

7472
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

‎src/material/snack-bar/snack-bar-container.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ $fallbacks: m3-snack-bar.get-tokens();
142142
}
143143

144144
// Darken the ripples in the button so they're visible against the dark background.
145-
@include token-utils.create-token-values-mixed((
145+
@include token-utils.values((
146146
button-text-state-layer-color: currentColor,
147147
button-text-ripple-color: currentColor,
148148
));

‎src/material/stepper/_stepper-theme.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@
3030

3131
@if inspection.get-theme-version($theme) != 1 {
3232
.mat-step-header.mat-accent {
33-
@include token-utils.create-token-values-mixed(
34-
m2-stepper.private-get-color-palette-color-tokens($theme, secondary));
33+
$tokens: m2-stepper.private-get-color-palette-color-tokens($theme, secondary);
34+
@include token-utils.values($tokens);
3535
}
3636

3737
.mat-step-header.mat-warn {
38-
@include token-utils.create-token-values-mixed(
39-
m2-stepper.private-get-color-palette-color-tokens($theme, error));
38+
$tokens: m2-stepper.private-get-color-palette-color-tokens($theme, error);
39+
@include token-utils.values($tokens);
4040
}
4141
}
4242
}

0 commit comments

Comments
 (0)