Skip to content

Commit b5bbda4

Browse files
andrewseguinandrewseguin
authored
refactor(material/core): use util to build token vars (#29497)
* refactor(material/core): use util to build token vars * remove todo
1 parent 0af3b61 commit b5bbda4

File tree

21 files changed

+96
-105
lines changed

21 files changed

+96
-105
lines changed

‎src/material/badge/badge.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ $large-size: $default-size + 6;
1010
@mixin _badge-size($size) {
1111
@include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
1212
$prefix: if($size == 'medium', '', $size + '-size-');
13-
$legacy-size-var: token-utils.get-token-variable('legacy-#{$prefix}container-size');
14-
$size-var: token-utils.get-token-variable('#{$prefix}container-size');
13+
$legacy-size-var-name: 'legacy-#{$prefix}container-size';
14+
$size-var-name: '#{$prefix}container-size';
1515

1616
.mat-badge-content {
1717
// The M2 badge is implemented incorrectly because it uses `width` and `height` for its
@@ -22,11 +22,12 @@ $large-size: $default-size + 6;
2222
// * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy
2323
// behavior while in M3 it targets `min-width` and `min-height` which allows the badge to
2424
// grow with the content.
25-
width: var(#{$legacy-size-var}, unset);
26-
height: var(#{$legacy-size-var}, unset);
27-
min-width: var(#{$size-var}, unset);
28-
min-height: var(#{$size-var}, unset);
29-
line-height: var($legacy-size-var, var(#{$size-var}));
25+
width: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
26+
height: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
27+
min-width: token-utils.get-token-variable($size-var-name, $fallback: unset);
28+
min-height: token-utils.get-token-variable($size-var-name, $fallback: unset);
29+
line-height: token-utils.get-token-variable(
30+
$legacy-size-var-name, $fallback: token-utils.get-token-variable($size-var-name));
3031
@include token-utils.create-token-slot(padding, '#{$prefix}container-padding');
3132
@include token-utils.create-token-slot(font-size, '#{$prefix}text-size');
3233
@include token-utils.create-token-slot(margin, '#{$prefix}container-offset');

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,11 @@ $_standard-tokens: (
5252
.mat-button-toggle-group-appearance-standard {
5353
@include token-utils.use-tokens($_standard-tokens...) {
5454
@include token-utils.create-token-slot(border-radius, shape);
55-
border: solid 1px var(#{token-utils.get-token-variable(divider-color)});
55+
border: solid 1px token-utils.get-token-variable(divider-color);
5656

5757
.mat-pseudo-checkbox {
58-
--mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
59-
#{token-utils.get-token-variable(selected-state-text-color)}
60-
);
58+
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
59+
token-utils.get-token-variable(selected-state-text-color)};
6160
}
6261
}
6362

@@ -92,9 +91,8 @@ $_standard-tokens: (
9291
@include token-utils.create-token-slot(font-weight, label-text-weight);
9392
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
9493

95-
--mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
96-
#{token-utils.get-token-variable(selected-state-text-color)}
97-
);
94+
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
95+
token-utils.get-token-variable(selected-state-text-color)};
9896

9997
&.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
10098
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
@@ -126,9 +124,8 @@ $_standard-tokens: (
126124
@include token-utils.use-tokens($_legacy-tokens...) {
127125
@include token-utils.create-token-slot(color, disabled-state-text-color);
128126
@include token-utils.create-token-slot(background-color, disabled-state-background-color);
129-
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
130-
#{token-utils.get-token-variable(disabled-state-text-color)}
131-
);
127+
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
128+
token-utils.get-token-variable(disabled-state-text-color)};
132129

133130
&.mat-button-toggle-checked {
134131
@include token-utils.create-token-slot(background-color,
@@ -139,7 +136,7 @@ $_standard-tokens: (
139136

140137
.mat-button-toggle-appearance-standard {
141138
@include token-utils.use-tokens($_standard-tokens...) {
142-
$divider-color: var(#{token-utils.get-token-variable(divider-color)});
139+
$divider-color: token-utils.get-token-variable(divider-color);
143140
@include token-utils.create-token-slot(color, text-color);
144141
@include token-utils.create-token-slot(background-color, background-color);
145142
@include token-utils.create-token-slot(font-family, label-text-font);
@@ -173,9 +170,8 @@ $_standard-tokens: (
173170
@include token-utils.create-token-slot(background-color, disabled-state-background-color);
174171

175172
.mat-pseudo-checkbox {
176-
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
177-
#{token-utils.get-token-variable(disabled-selected-state-text-color)}
178-
);
173+
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
174+
token-utils.get-token-variable(disabled-selected-state-text-color)};
179175
}
180176

181177
&.mat-button-toggle-checked {

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
// Adds an elevation shadow to a button.
113113
@mixin mat-private-button-elevation($token-name) {
114114
// MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
115-
box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
115+
box-shadow: token-utils.get-token-variable($token-name + '-shadow');
116116
}
117117

118118
@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
@@ -139,14 +139,14 @@
139139

140140
@mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
141141
@include token-utils.use-tokens($prefix, $slots) {
142-
$icon-spacing: token-utils.get-token-variable-reference(icon-spacing, true);
143-
$icon-offset: token-utils.get-token-variable-reference(icon-offset, true);
144-
$horizontal-padding: token-utils.get-token-variable-reference(horizontal-padding, true);
142+
$icon-spacing: token-utils.get-token-variable(icon-spacing, true);
143+
$icon-offset: token-utils.get-token-variable(icon-offset, true);
144+
$horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
145145
padding: 0 $horizontal-padding;
146146

147147
@if ($has-with-icon-padding) {
148148
$with-icon-horizontal-padding:
149-
token-utils.get-token-variable-reference(with-icon-horizontal-padding, true);
149+
token-utils.get-token-variable(with-icon-horizontal-padding, true);
150150

151151
// stylelint-disable-next-line selector-class-pattern
152152
&:has(.material-icons, mat-icon, [matButtonIcon]) {

‎src/material/button/icon-button.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333

3434
@include token-utils.use-tokens(
3535
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
36-
$button-size: var(#{token-utils.get-token-variable(state-layer-size)}, 48px);
37-
$icon-size: var(#{token-utils.get-token-variable(icon-size)}, 24px);
36+
$button-size: token-utils.get-token-variable(state-layer-size, $fallback: 48px);
37+
$icon-size: token-utils.get-token-variable(icon-size, $fallback: 24px);
3838

3939
// We emit these tokens ourselves here so we can provide a default value.
4040
// This avoids a lot internal breakages in apps that didn't include the icon button theme.

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ $_fallback-size: 40px;
3131
vertical-align: bottom;
3232

3333
@include token-utils.use-tokens($prefix, $slots) {
34-
$layer-size: token-utils.get-token-variable(state-layer-size);
35-
padding: calc((var(#{$layer-size}, #{$_fallback-size}) - #{$_icon-size}) / 2);
36-
margin: calc((var(#{$layer-size}, #{$_fallback-size}) -
37-
var(#{$layer-size}, #{$_fallback-size})) / 2);
34+
$layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
35+
padding: calc((#{$layer-size} - #{$_icon-size}) / 2);
36+
margin: calc((#{$layer-size} - #{$layer-size}) / 2);
3837

3938
@if ($include-state-layer-styles) {
4039
@include _state-layer-styles;
@@ -51,11 +50,10 @@ $_fallback-size: 40px;
5150
cursor: inherit;
5251

5352
@include token-utils.use-tokens($prefix, $slots) {
54-
$layer-size: token-utils.get-token-variable(state-layer-size);
55-
$offset: calc((var(#{$layer-size}, #{$_fallback-size}) -
56-
var(#{$layer-size}, #{$_fallback-size})) / 2);
57-
width: var(#{$layer-size}, #{$_fallback-size});
58-
height: var(#{$layer-size}, #{$_fallback-size});
53+
$layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
54+
$offset: calc((#{$layer-size} - #{$layer-size}) / 2);
55+
width: $layer-size;
56+
height: $layer-size;
5957
top: $offset;
6058
right: $offset;
6159
left: $offset;
@@ -85,8 +83,8 @@ $_fallback-size: 40px;
8583
border-color $_transition-duration $_exit-curve;
8684

8785
@include token-utils.use-tokens($prefix, $slots) {
88-
$layer-size: token-utils.get-token-variable(state-layer-size);
89-
$offset: calc((var(#{$layer-size}, $_fallback-size) - #{$_icon-size}) / 2);
86+
$layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
87+
$offset: calc((#{$layer-size} - #{$_icon-size}) / 2);
9088

9189
@include token-utils.create-token-slot(border-color, unselected-icon-color);
9290
top: $offset;

‎src/material/chips/chip.scss

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -370,23 +370,19 @@ $_avatar-trailing-padding: 8px;
370370
$disabled-icon-opacity: null;
371371
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
372372
$disabled-icon-opacity:
373-
#{token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity)};
373+
token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity);
374374
}
375375

376376
// If the trailing icon is a chip-remove button, we have to factor in the trailing action
377377
// opacity as well as the disabled opacity.
378378
.mdc-evolution-chip--disabled &.mat-mdc-chip-remove {
379379
@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) {
380-
opacity: calc(
381-
var(#{token-utils.get-token-variable(trailing-action-opacity)}) *
382-
var(#{$disabled-icon-opacity})
383-
);
380+
$action-opacity: token-utils.get-token-variable(trailing-action-opacity);
381+
opacity: calc(#{$action-opacity} * #{$disabled-icon-opacity});
384382

385383
&:focus {
386-
opacity: calc(
387-
var(#{token-utils.get-token-variable(trailing-action-focus-opacity)}) *
388-
var(#{$disabled-icon-opacity})
389-
);
384+
$action-focus-opacity: token-utils.get-token-variable(trailing-action-focus-opacity);
385+
opacity: calc(#{$action-focus-opacity} * #{$disabled-icon-opacity});
390386
}
391387
}
392388
}
@@ -458,7 +454,7 @@ $_avatar-trailing-padding: 8px;
458454
);
459455

460456
@each $selected, $base in $highlighted-remapped-tokens {
461-
#{token-utils.get-token-variable($selected)}: var(token-utils.get-token-variable($base));
457+
#{token-utils.get-token-variable-name($selected)}: token-utils.get-token-variable($base);
462458
}
463459
}
464460
}

‎src/material/core/option/option.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,9 @@ $_side-padding: 16px;
185185
// due to `list-item-selected-container-color` being the same as `list-item-container-color`,
186186
// but that's no longer the case in M3. This overrides ensures that the appearance is consistent.
187187
@include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) {
188-
$selected-token: token-utils.get-token-variable(list-item-selected-container-color);
189-
$base-token: token-utils.get-token-variable(list-item-container-color);
190-
#{$selected-token}: var(#{$base-token}, transparent);
188+
$selected-token: token-utils.get-token-variable-name(list-item-selected-container-color);
189+
$base-token: token-utils.get-token-variable(list-item-container-color, $fallback: transparent);
190+
#{$selected-token}: $base-token;
191191
}
192192
}
193193

‎src/material/core/ripple/_ripple.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
@include token-utils.use-tokens(
4141
tokens-mat-ripple.$prefix, tokens-mat-ripple.get-token-slots()) {
4242
// We have to emit a fallback value here, because some internal builds depend on it.
43-
background-color: var(#{token-utils.get-token-variable(color)}, rgba(#000, 0.1));
43+
background-color: token-utils.get-token-variable(color, $fallback: rgba(#000, 0.1));
4444
}
4545

4646
// In high contrast mode the ripple is opaque, causing it to obstruct the content.

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ $_component-prefix: null;
111111

112112
// Returns the name of a token including the current prefix. Intended to be used in calculations
113113
// involving tokens. `create-token-slot` should be used when outputting tokens.
114-
@function get-token-variable($token) {
114+
@function get-token-variable-name($token) {
115115
@if $_component-prefix == null or $_tokens == null {
116116
@error '`get-token-variable` must be used within `use-tokens`';
117117
}
@@ -122,19 +122,21 @@ $_component-prefix: null;
122122
@return _get-css-variable($_component-prefix, $token);
123123
}
124124

125-
// TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
126125
// Returns a `var()` reference to a specific token. Intended for declarations
127126
// where the token has to be referenced as a part of a larger expression.
128-
@function get-token-variable-reference($token, $emit-fallback: false) {
127+
@function get-token-variable($token, $use-tokens-fallback: false, $fallback: null) {
129128
@if $_component-prefix == null or $_tokens == null {
130129
@error '`get-token-variable-reference` must be used within `use-tokens`';
131130
}
132131
@if not map.has-key($_tokens, $token) {
133132
@error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
134133
}
135134

136-
$var: get-token-variable($token);
137-
$fallback: if($emit-fallback, map.get($_tokens, $token), null);
135+
$var: get-token-variable-name($token);
136+
137+
@if ($use-tokens-fallback) {
138+
$fallback: map.get($_tokens, $token);
139+
}
138140

139141
@if ($fallback != null) {
140142
@return var($var, $fallback);

‎src/material/datepicker/calendar-body.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -303,18 +303,16 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(
303303

304304
&.mat-calendar-body-today {
305305
$shadow: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
306-
box-shadow: inset 0 0 0 1px var(#{$shadow});
306+
box-shadow: inset 0 0 0 1px #{$shadow};
307307
}
308308
}
309309
}
310310

311311
@include token-utils.use-tokens($_tokens...) {
312-
$range-var-name:
312+
$range-color:
313313
token-utils.get-token-variable(calendar-date-in-range-state-background-color);
314-
$comparison-var-name:
314+
$comparison-color:
315315
token-utils.get-token-variable(calendar-date-in-comparison-range-state-background-color);
316-
$comparison-color: var(#{$comparison-var-name});
317-
$range-color: var(#{$range-var-name});
318316

319317
.mat-calendar-body-in-range::before {
320318
@include token-utils.create-token-slot(background,

‎src/material/form-field/_mdc-text-field-density-overrides.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
.mat-mdc-form-field-infix {
1717
// We add a minimum height to the infix container to ensure that custom controls have the
1818
// same default vertical space as text-field inputs (with respect to the vertical padding).
19-
min-height: var(#{$height});
19+
min-height: #{$height};
2020

2121
@include token-utils.create-token-slot(padding-top,
2222
filled-with-label-container-padding-top);
@@ -35,12 +35,12 @@
3535
// form-field because we do not know what type of form-field control is set up. Hence
3636
// we always use a fixed position for the label. This does not have any implications.
3737
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
38-
top: calc(var(#{$height}) / 2);
38+
top: calc(#{$height} / 2);
3939
}
4040

4141
// We need to conditionally hide the floating label based on the height of the form field.
4242
.mdc-text-field--filled .mat-mdc-floating-label {
43-
display: var(#{token-utils.get-token-variable(filled-label-display)}, block);
43+
display: token-utils.get-token-variable(filled-label-display, $fallback: block);
4444
}
4545

4646
// For the outline appearance, we re-create the active floating label transform. This is
@@ -50,7 +50,7 @@
5050
.mdc-floating-label--float-above {
5151
// Needs to be in a string form to work around an internal check that incorrectly flags this
5252
// interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
53-
$offset: 'calc(6.75px + var(#{$height}) / 2)';
53+
$offset: 'calc(6.75px + #{$height} / 2)';
5454
$translate: 'calc(#{$offset} * -1)';
5555
--mat-mdc-form-field-label-transform: translateY(#{$translate})
5656
scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));

‎src/material/form-field/_mdc-text-field-structure.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,12 @@
130130
@include _supports-max {
131131
@include token-utils.use-tokens($outlined-slots...) {
132132
$shape-var: token-utils.get-token-variable(container-shape);
133-
padding-right: max(16px, var(#{$shape-var}));
134-
padding-left: max(16px, calc(var(#{$shape-var}) + 4px));
133+
padding-right: max(16px, #{$shape-var});
134+
padding-left: max(16px, calc(#{$shape-var} + 4px));
135135

136136
[dir='rtl'] & {
137-
padding-right: max(16px, calc(var(#{$shape-var}) + 4px));
138-
padding-left: max(16px, var(#{$shape-var}));
137+
padding-right: max(16px, calc(#{$shape-var} + 4px));
138+
padding-left: max(16px, #{$shape-var});
139139
}
140140
}
141141
}
@@ -345,7 +345,7 @@
345345
@include _supports-max {
346346
.mdc-text-field--outlined .mdc-notched-outline & {
347347
$shape-var: token-utils.get-token-variable(container-shape);
348-
width: max(12px, var(#{$shape-var}));
348+
width: max(12px, #{$shape-var});
349349
}
350350
}
351351
}
@@ -397,7 +397,7 @@
397397
@include _supports-max {
398398
.mdc-text-field--outlined .mdc-notched-outline & {
399399
$shape-var: token-utils.get-token-variable(container-shape);
400-
max-width: calc(100% - max(12px, var(#{$shape-var})) * 2);
400+
max-width: calc(100% - max(12px, #{$shape-var}) * 2);
401401
}
402402
}
403403
}

‎src/material/form-field/form-field.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ $_icon-prefix-infix-padding: 4px;
5959
@include token-utils.create-token-slot(font-weight, container-text-weight);
6060

6161
.mdc-text-field--outlined {
62-
$token-value: var(#{token-utils.get-token-variable(outlined-label-text-populated-size)});
62+
$token-value: token-utils.get-token-variable(outlined-label-text-populated-size);
6363

6464
// For the non-upgraded notch label (i.e. when rendered on the server), also
6565
// use the correct typography.

‎src/material/grid-list/grid-list.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ $text-padding: 16px;
7474
@include token-utils.use-tokens(
7575
tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
7676
$secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size);
77-
@include list-common.base(var(#{$secondary-token-name}));
77+
@include list-common.base(#{$secondary-token-name});
7878
@include token-utils.create-token-slot(font-size, tile-header-primary-text-size);
7979
}
8080
}
@@ -83,7 +83,7 @@ $text-padding: 16px;
8383
@include token-utils.use-tokens(
8484
tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
8585
$secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size);
86-
@include list-common.base(var(#{$secondary-token-name}));
86+
@include list-common.base(#{$secondary-token-name});
8787
@include token-utils.create-token-slot(font-size, tile-footer-primary-text-size);
8888
}
8989
}

0 commit comments

Comments
 (0)