Skip to content

Commit feff721

Browse files
asyncLizcopybara-github
asyncLiz
authored and
copybara-github
committed
feat(tokens): add component custom properties to Sass values
These are excluded by default, but will be enabled by default in 2.0. Example: `tokens.md-comp-checkbox-values($exclude-custom-properties: false)` PiperOrigin-RevId: 601596085
1 parent c9e72ce commit feff721

Some content is hidden

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

47 files changed

+811
-63
lines changed

‎tokens/_md-comp-assist-chip.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,11 @@ $_default: (
8585
'md-sys-typescale': md-sys-typescale.values(),
8686
);
8787

88-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
88+
@function values(
89+
$deps: $_default,
90+
$exclude-hardcoded-values: false,
91+
$exclude-custom-properties: true
92+
) {
8993
$tokens: validate.values(
9094
md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
9195
$supported-tokens: $supported-tokens,
@@ -118,5 +122,17 @@ $_default: (
118122
)
119123
);
120124

125+
// Default to `$exclude-custom-properties: false` in the next breaking change.
126+
// See b/321816473.
127+
@if not $exclude-custom-properties {
128+
@each $token, $value in $tokens {
129+
$tokens: map.set(
130+
$tokens,
131+
$token,
132+
var(--md-assist-chip-#{$token}, #{$value})
133+
);
134+
}
135+
}
136+
121137
@return $tokens;
122138
}

‎tokens/_md-comp-badge.scss

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,21 @@ $_default: (
2121

2222
$_unsupported-tokens: ('large-label-text-tracking', 'large-label-text-type');
2323

24-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
24+
@function values(
25+
$deps: $_default,
26+
$exclude-hardcoded-values: false,
27+
$exclude-custom-properties: true
28+
) {
2529
$tokens: md-comp-badge.values($deps, $exclude-hardcoded-values);
2630
$tokens: map.remove($tokens, $_unsupported-tokens...);
31+
32+
// Default to `$exclude-custom-properties: false` in the next breaking change.
33+
// See b/321816473.
34+
@if not $exclude-custom-properties {
35+
@each $token, $value in $tokens {
36+
$tokens: map.set($tokens, $token, var(--md-badge-#{$token}, #{$value}));
37+
}
38+
}
39+
2740
@return $tokens;
2841
}

‎tokens/_md-comp-checkbox.scss

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
// SPDX-License-Identifier: Apache-2.0
44
//
55

6+
// go/keep-sorted start
7+
@use 'sass:map';
8+
// go/keep-sorted end
69
// go/keep-sorted start
710
@use './internal/validate';
811
@use './md-sys-color';
@@ -89,9 +92,15 @@ $_default: (
8992
'md-sys-state': md-sys-state.values(),
9093
);
9194

92-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
95+
@function values(
96+
$deps: $_default,
97+
$exclude-hardcoded-values: false,
98+
$exclude-custom-properties: true
99+
) {
100+
$tokens: md-comp-checkbox.values($deps, $exclude-hardcoded-values);
101+
93102
$tokens: validate.values(
94-
md-comp-checkbox.values($deps, $exclude-hardcoded-values),
103+
$tokens,
95104
$supported-tokens: $supported-tokens,
96105
$unsupported-tokens: $unsupported-tokens,
97106
$renamed-tokens: (
@@ -120,5 +129,17 @@ $_default: (
120129
)
121130
);
122131

132+
// Default to `$exclude-custom-properties: false` in the next breaking change.
133+
// See b/321816473.
134+
@if not $exclude-custom-properties {
135+
@each $token, $value in $tokens {
136+
$tokens: map.set(
137+
$tokens,
138+
$token,
139+
var(--md-checkbox-#{$token}, #{$value})
140+
);
141+
}
142+
}
143+
123144
@return $tokens;
124145
}

‎tokens/_md-comp-circular-progress.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,11 @@ $_default: (
3838
'md-sys-shape': md-sys-shape.values(),
3939
);
4040

41-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
41+
@function values(
42+
$deps: $_default,
43+
$exclude-hardcoded-values: false,
44+
$exclude-custom-properties: true
45+
) {
4246
$tokens: validate.values(
4347
md-comp-circular-progress-indicator.values(
4448
$deps,
@@ -61,5 +65,17 @@ $_default: (
6165
);
6266
}
6367

68+
// Default to `$exclude-custom-properties: false` in the next breaking change.
69+
// See b/321816473.
70+
@if not $exclude-custom-properties {
71+
@each $token, $value in $tokens {
72+
$tokens: map.set(
73+
$tokens,
74+
$token,
75+
var(--md-circular-progress-#{$token}, #{$value})
76+
);
77+
}
78+
}
79+
6480
@return $tokens;
6581
}

‎tokens/_md-comp-dialog.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,11 @@ $unsupported-tokens: (
7272
// go/keep-sorted end
7373
);
7474

75-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
75+
@function values(
76+
$deps: $_default,
77+
$exclude-hardcoded-values: false,
78+
$exclude-custom-properties: true
79+
) {
7680
$tokens: validate.values(
7781
md-comp-dialog.values($deps, $exclude-hardcoded-values),
7882
$supported-tokens: $supported-tokens,
@@ -84,5 +88,13 @@ $unsupported-tokens: (
8488
)
8589
);
8690

91+
// Default to `$exclude-custom-properties: false` in the next breaking change.
92+
// See b/321816473.
93+
@if not $exclude-custom-properties {
94+
@each $token, $value in $tokens {
95+
$tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
96+
}
97+
}
98+
8799
@return $tokens;
88100
}

‎tokens/_md-comp-divider.scss

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
// SPDX-License-Identifier: Apache-2.0
44
//
55

6+
// go/keep-sorted start
7+
@use 'sass:map';
8+
// go/keep-sorted end
69
// go/keep-sorted start
710
@use './internal/validate';
811
@use './md-sys-color';
@@ -20,9 +23,23 @@ $_default: (
2023
'md-sys-color': md-sys-color.values-light(),
2124
);
2225

23-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
24-
@return validate.values(
26+
@function values(
27+
$deps: $_default,
28+
$exclude-hardcoded-values: false,
29+
$exclude-custom-properties: true
30+
) {
31+
$tokens: validate.values(
2532
md-comp-divider.values($deps, $exclude-hardcoded-values),
2633
$supported-tokens: $supported-tokens
2734
);
35+
36+
// Default to `$exclude-custom-properties: false` in the next breaking change.
37+
// See b/321816473.
38+
@if not $exclude-custom-properties {
39+
@each $token, $value in $tokens {
40+
$tokens: map.set($tokens, $token, var(--md-divider-#{$token}, #{$value}));
41+
}
42+
}
43+
44+
@return $tokens;
2845
}

‎tokens/_md-comp-elevated-button.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,11 @@ $_default: (
7676
'md-sys-typescale': md-sys-typescale.values(),
7777
);
7878

79-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
79+
@function values(
80+
$deps: $_default,
81+
$exclude-hardcoded-values: false,
82+
$exclude-custom-properties: true
83+
) {
8084
$tokens: validate.values(
8185
md-comp-elevated-button.values($deps, $exclude-hardcoded-values),
8286
$supported-tokens: $supported-tokens,
@@ -108,5 +112,17 @@ $_default: (
108112
)
109113
);
110114

115+
// Default to `$exclude-custom-properties: false` in the next breaking change.
116+
// See b/321816473.
117+
@if not $exclude-custom-properties {
118+
@each $token, $value in $tokens {
119+
$tokens: map.set(
120+
$tokens,
121+
$token,
122+
var(--md-elevated-button-#{$token}, #{$value})
123+
);
124+
}
125+
}
126+
111127
@return $tokens;
112128
}

‎tokens/_md-comp-elevated-card.scss

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
// SPDX-License-Identifier: Apache-2.0
44
//
55

6+
// go/keep-sorted start
7+
@use 'sass:map';
8+
// go/keep-sorted end
69
// go/keep-sorted start
710
@use './internal/validate';
811
@use './md-sys-color';
@@ -52,12 +55,28 @@ $_default: (
5255
'md-sys-state': md-sys-state.values(),
5356
);
5457

55-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
58+
@function values(
59+
$deps: $_default,
60+
$exclude-hardcoded-values: false,
61+
$exclude-custom-properties: true
62+
) {
5663
$tokens: validate.values(
5764
md-comp-elevated-card.values($deps, $exclude-hardcoded-values),
5865
$supported-tokens: $supported-tokens,
5966
$unsupported-tokens: $unsupported-tokens
6067
);
6168

69+
// Default to `$exclude-custom-properties: false` in the next breaking change.
70+
// See b/321816473.
71+
@if not $exclude-custom-properties {
72+
@each $token, $value in $tokens {
73+
$tokens: map.set(
74+
$tokens,
75+
$token,
76+
var(--md-elevated-card-#{$token}, #{$value})
77+
);
78+
}
79+
}
80+
6281
@return $tokens;
6382
}

‎tokens/_md-comp-elevation.scss

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,27 @@ $_default: (
2424
'md-sys-elevation': md-sys-elevation.values(),
2525
);
2626

27-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
27+
@function values(
28+
$deps: $_default,
29+
$exclude-hardcoded-values: false,
30+
$exclude-custom-properties: true
31+
) {
2832
$tokens: (
2933
'level': map.get($deps, 'md-sys-elevation', 'level0'),
3034
'shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
3135
);
36+
37+
// Default to `$exclude-custom-properties: false` in the next breaking change.
38+
// See b/321816473.
39+
@if not $exclude-custom-properties {
40+
@each $token, $value in $tokens {
41+
$tokens: map.set(
42+
$tokens,
43+
$token,
44+
var(--md-elevation-#{$token}, #{$value})
45+
);
46+
}
47+
}
48+
3249
@return validate.values($tokens, $supported-tokens: $supported-tokens);
3350
}

‎tokens/_md-comp-fab-branded.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,29 @@ $_default: (
9999
'md-sys-typescale': md-sys-typescale.values(),
100100
);
101101

102-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
102+
@function values(
103+
$deps: $_default,
104+
$exclude-hardcoded-values: false,
105+
$exclude-custom-properties: true
106+
) {
103107
$tokens: validate.values(
104108
md-comp-fab-branded.values($deps, $exclude-hardcoded-values),
105109
$supported-tokens: $supported-tokens,
106110
$unsupported-tokens: $unsupported-tokens,
107111
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
108112
);
109113

114+
// Default to `$exclude-custom-properties: false` in the next breaking change.
115+
// See b/321816473.
116+
@if not $exclude-custom-properties {
117+
@each $token, $value in $tokens {
118+
$tokens: map.set(
119+
$tokens,
120+
$token,
121+
var(--md-fab-branded-#{$token}, #{$value})
122+
);
123+
}
124+
}
125+
110126
@return $tokens;
111127
}

‎tokens/_md-comp-fab.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,11 @@ $_default: (
231231
'md-sys-typescale': md-sys-typescale.values(),
232232
);
233233

234-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
234+
@function values(
235+
$deps: $_default,
236+
$exclude-hardcoded-values: false,
237+
$exclude-custom-properties: true
238+
) {
235239
$tokens: md-comp-fab-surface.values($deps, $exclude-hardcoded-values);
236240

237241
$tokens: validate.values(
@@ -241,5 +245,13 @@ $_default: (
241245
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
242246
);
243247

248+
// Default to `$exclude-custom-properties: false` in the next breaking change.
249+
// See b/321816473.
250+
@if not $exclude-custom-properties {
251+
@each $token, $value in $tokens {
252+
$tokens: map.set($tokens, $token, var(--md-fab-#{$token}, #{$value}));
253+
}
254+
}
255+
244256
@return $tokens;
245257
}

‎tokens/_md-comp-filled-button.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,11 @@ $_default: (
7676
'md-sys-typescale': md-sys-typescale.values(),
7777
);
7878

79-
@function values($deps: $_default, $exclude-hardcoded-values: false) {
79+
@function values(
80+
$deps: $_default,
81+
$exclude-hardcoded-values: false,
82+
$exclude-custom-properties: true
83+
) {
8084
$tokens: validate.values(
8185
md-comp-filled-button.values($deps, $exclude-hardcoded-values),
8286
$supported-tokens: $supported-tokens,
@@ -108,5 +112,17 @@ $_default: (
108112
)
109113
);
110114

115+
// Default to `$exclude-custom-properties: false` in the next breaking change.
116+
// See b/321816473.
117+
@if not $exclude-custom-properties {
118+
@each $token, $value in $tokens {
119+
$tokens: map.set(
120+
$tokens,
121+
$token,
122+
var(--md-filled-button-#{$token}, #{$value})
123+
);
124+
}
125+
}
126+
111127
@return $tokens;
112128
}

0 commit comments

Comments
 (0)