Skip to content

Commit 864fc23

Browse files
andrewseguinandrewseguin
committed
refactor: use values API for creating tokens
1 parent e462301 commit 864fc23

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
@@ -16,16 +16,6 @@
1616
@include token-utils.values($tokens);
1717
}
1818

19-
@mixin _m2-icon-button-variant($theme, $palette) {
20-
$mat-tokens: if(
21-
$palette,
22-
m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
23-
m2-icon-button.get-color-tokens($theme)
24-
);
25-
26-
@include token-utils.create-token-values-mixed($mat-tokens);
27-
}
28-
2919
/// Outputs color theme styles for the mat-icon-button.
3020
/// @param {Map} $theme The theme to generate color styles for.
3121
/// @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
@@ -32,16 +32,14 @@
3232
@if inspection.get-theme-version($theme) != 1 {
3333
.mat-mdc-checkbox {
3434
&.mat-primary {
35-
@include token-utils.create-token-values-mixed(
36-
m2-checkbox.get-color-tokens($theme, primary,
37-
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
35+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, primary,
36+
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
3837
);
3938
}
4039

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

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

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

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

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

4139
&.mat-accent {
42-
@include token-utils.create-token-values-mixed(
43-
m2-chip.get-color-tokens($theme, secondary));
40+
@include token-utils.values(m2-chip.get-color-tokens($theme, secondary));
4441
}
4542

4643
&.mat-warn {
47-
@include token-utils.create-token-values-mixed(
48-
m2-chip.get-color-tokens($theme, error));
44+
@include token-utils.values(m2-chip.get-color-tokens($theme, error));
4945
}
5046
}
5147
}
@@ -55,25 +51,23 @@
5551
/// Outputs typography theme styles for the mat-chips.
5652
/// @param {Map} $theme The theme to generate typography styles for.
5753
@mixin typography($theme) {
54+
$tokens: m2-chip.get-typography-tokens($theme);
5855
@if inspection.get-theme-version($theme) == 1 {
59-
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), typography));
60-
} @else {
61-
.mat-mdc-standard-chip {
62-
@include token-utils.create-token-values-mixed(m2-chip.get-typography-tokens($theme));
63-
}
56+
$tokens: map.get(m3-chip.get-tokens($theme), typography);
6457
}
58+
59+
@include token-utils.values($tokens);
6560
}
6661

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

7973
/// 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
@@ -5,12 +5,6 @@
55
@use './m3-icon';
66
@use 'sass:map';
77

8-
@mixin _palette-colors($theme, $palette-name) {
9-
$color: inspection.get-theme-color($theme, $palette-name, text);
10-
$tokens: m2-icon.private-get-icon-color-tokens($color);
11-
@include token-utils.create-token-values-mixed($tokens);
12-
}
13-
148
@mixin base($theme) {
159
$tokens: m2-icon.get-unthemable-tokens();
1610
@if inspection.get-theme-version($theme) == 1 {
@@ -57,19 +51,23 @@
5751
/// Outputs typography theme styles for the mat-icon.
5852
/// @param {Map} $theme The theme to generate typography styles for.
5953
@mixin typography($theme) {
54+
$tokens: m2-icon.get-typography-tokens($theme);
6055
@if inspection.get-theme-version($theme) == 1 {
61-
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), typography));
62-
} @else {
56+
$tokens: map.get(m3-icon.get-tokens($theme), typography);
6357
}
58+
59+
@include token-utils.values($tokens);
6460
}
6561

6662
/// Outputs density theme styles for the mat-icon.
6763
/// @param {Map} $theme The theme to generate density styles for.
6864
@mixin density($theme) {
65+
$tokens: m2-icon.get-density-tokens($theme);
6966
@if inspection.get-theme-version($theme) == 1 {
70-
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), density));
71-
} @else {
67+
$tokens: map.get(m3-icon.get-tokens($theme), density);
7268
}
69+
70+
@include token-utils.values($tokens);
7371
}
7472

7573
/// 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
@@ -31,13 +31,13 @@
3131

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

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

0 commit comments

Comments
 (0)