Skip to content

Commit f8ba137

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: merge m3 mdc and mat tokens (#30755)
* refactor: merge m3 mdc and mat tokens * refactor: missing tokens * refactor: missing token * refactor: lint --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 2d86ad4 commit f8ba137

Some content is hidden

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

63 files changed

+1348
-3350
lines changed

Diff for: ‎src/material/core/tokens/_token-definition.scss

-36
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
@use '../m2/palette' as m2-palette;
77
@use '../m2/theming' as m2-theming;
88
@use '../m2/typography' as m2-typography;
9-
@use '../style/sass-utils';
109

1110
// Indicates whether we're building internally. Used for backwards compatibility.
1211
$private-is-internal-build: false;
@@ -136,41 +135,6 @@ $_system-fallbacks: null;
136135
@return $result;
137136
}
138137

139-
/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
140-
/// token and a separate opacity token. This function applies the opacity to the color and drops the
141-
/// opacity key from the map. Can be removed once b/213331407 is resolved.
142-
/// @param {Map} $tokens The map of tokens currently being generated
143-
/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
144-
/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
145-
/// `((color: 'color-key', opacity: 'opacity-key'))`.
146-
/// @return {Map} The initial tokens with the combined color values.
147-
@function combine-color-tokens($tokens, $opacity-lookup, $pairs) {
148-
$result: $tokens;
149-
150-
@each $pair in $pairs {
151-
$color-key: map.get($pair, color);
152-
$opacity-key: map.get($pair, opacity);
153-
$color: map.get($tokens, $color-key);
154-
155-
@if (sass-utils.is-css-var-name($color)) {
156-
$color: var(#{$color});
157-
}
158-
159-
$opacity: map.get($opacity-lookup, $opacity-key);
160-
161-
@if(meta.type-of($color) == 'color') {
162-
$result: map.remove($result, $opacity-key);
163-
$result: map.set($result, $color-key, rgba($color, $opacity));
164-
} @else if($color != null) {
165-
$result: map.remove($result, $opacity-key);
166-
$combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
167-
$result: map.set($result, $color-key, $combined-color);
168-
}
169-
}
170-
171-
@return $result;
172-
}
173-
174138
/// Inherited function from MDC that computes which contrast tone to use on top of a color.
175139
/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
176140
/// backwards compatibility.

Diff for: ‎src/material/core/tokens/m3/_index.scss

+114-153
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,126 @@
1-
@use 'sass:meta';
21
@use 'sass:map';
3-
@use './mat/app' as tokens-mat-app;
4-
@use './mat/autocomplete' as tokens-mat-autocomplete;
5-
@use './mat/badge' as tokens-mat-badge;
6-
@use './mat/text-button' as tokens-mat-text-button;
7-
@use './mat/protected-button' as tokens-mat-protected-button;
8-
@use './mat/filled-button' as tokens-mat-filled-button;
9-
@use './mat/outlined-button' as tokens-mat-outlined-button;
10-
@use './mat/dialog' as tokens-mat-dialog;
11-
@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
12-
@use './mat/card' as tokens-mat-card;
13-
@use './mat/chip' as tokens-mat-chip;
14-
@use './mat/datepicker' as tokens-mat-datepicker;
15-
@use './mat/divider' as tokens-mat-divider;
16-
@use './mat/expansion' as tokens-mat-expansion;
17-
@use './mat/fab' as tokens-mat-fab;
18-
@use './mat/fab-small' as tokens-mat-fab-small;
19-
@use './mat/form-field' as tokens-mat-form-field;
20-
@use './mat/grid-list' as tokens-mat-grid-list;
21-
@use './mat/icon' as tokens-mat-icon;
22-
@use './mat/icon-button' as tokens-mat-icon-button;
23-
@use './mat/list' as tokens-mat-list;
24-
@use './mat/menu' as tokens-mat-menu;
25-
@use './mat/option' as tokens-mat-option;
26-
@use './mat/optgroup' as tokens-mat-optgroup;
27-
@use './mat/paginator' as tokens-mat-paginator;
28-
@use './mat/checkbox' as tokens-mat-checkbox;
29-
@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
30-
@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
31-
@use './mat/radio' as tokens-mat-radio;
32-
@use './mat/ripple' as tokens-mat-ripple;
33-
@use './mat/select' as tokens-mat-select;
34-
@use './mat/sidenav' as tokens-mat-sidenav;
35-
@use './mat/slider' as tokens-mat-slider;
36-
@use './mat/switch' as tokens-mat-switch;
37-
@use './mat/snack-bar' as tokens-mat-snack-bar;
38-
@use './mat/sort' as tokens-mat-sort;
39-
@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
40-
@use './mat/stepper' as tokens-mat-stepper;
41-
@use './mat/tab-header' as tokens-mat-tab-header;
42-
@use './mat/table' as tokens-mat-table;
43-
@use './mat/toolbar' as tokens-mat-toolbar;
44-
@use './mat/tree' as tokens-mat-tree;
45-
@use './mat/timepicker' as tokens-mat-timepicker;
46-
@use './mat/tonal-button' as tokens-mat-tonal-button;
47-
@use './mdc/checkbox' as tokens-mdc-checkbox;
48-
@use './mdc/text-button' as tokens-mdc-text-button;
49-
@use './mdc/protected-button' as tokens-mdc-protected-button;
50-
@use './mdc/filled-button' as tokens-mdc-filled-button;
51-
@use './mdc/outlined-button' as tokens-mdc-outlined-button;
52-
@use './mdc/chip' as tokens-mdc-chip;
53-
@use './mdc/circular-progress' as tokens-mdc-circular-progress;
54-
@use './mdc/dialog' as tokens-mdc-dialog;
55-
@use './mdc/elevated-card' as tokens-mdc-elevated-card;
56-
@use './mdc/extended-fab' as tokens-mdc-extended-fab;
57-
@use './mdc/fab' as tokens-mdc-fab;
58-
@use './mdc/fab-small' as tokens-mdc-fab-small;
59-
@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
60-
@use './mdc/icon-button' as tokens-mdc-icon-button;
61-
@use './mdc/linear-progress' as tokens-mdc-linear-progress;
62-
@use './mdc/list' as tokens-mdc-list;
63-
@use './mdc/outlined-card' as tokens-mdc-outlined-card;
64-
@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
65-
@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
66-
@use './mdc/radio' as tokens-mdc-radio;
67-
@use './mdc/slider' as tokens-mdc-slider;
68-
@use './mdc/snack-bar' as tokens-mdc-snack-bar;
69-
@use './mdc/switch' as tokens-mdc-switch;
70-
@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
71-
@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
72-
73-
$_module-names: (
74-
// Custom tokens
75-
tokens-mat-app,
76-
tokens-mat-autocomplete,
77-
tokens-mat-badge,
78-
tokens-mat-bottom-sheet,
79-
tokens-mat-button-toggle,
80-
tokens-mat-card,
81-
tokens-mat-chip,
82-
tokens-mat-datepicker,
83-
tokens-mat-dialog,
84-
tokens-mat-divider,
85-
tokens-mat-expansion,
86-
tokens-mat-fab,
87-
tokens-mat-fab-small,
88-
tokens-mat-filled-button,
89-
tokens-mat-tonal-button,
90-
tokens-mat-form-field,
91-
tokens-mat-grid-list,
92-
tokens-mat-icon-button,
93-
tokens-mat-icon,
94-
tokens-mat-menu,
95-
tokens-mat-optgroup,
96-
tokens-mat-option,
97-
tokens-mat-outlined-button,
98-
tokens-mat-paginator,
99-
tokens-mat-checkbox,
100-
tokens-mat-full-pseudo-checkbox,
101-
tokens-mat-list,
102-
tokens-mat-minimal-pseudo-checkbox,
103-
tokens-mat-protected-button,
104-
tokens-mat-radio,
105-
tokens-mat-ripple,
106-
tokens-mat-select,
107-
tokens-mat-sidenav,
108-
tokens-mat-slider,
109-
tokens-mat-switch,
110-
tokens-mat-snack-bar,
111-
tokens-mat-sort,
112-
tokens-mat-stepper,
113-
tokens-mat-tab-header,
114-
tokens-mat-table,
115-
tokens-mat-text-button,
116-
tokens-mat-toolbar,
117-
tokens-mat-tree,
118-
tokens-mat-timepicker,
119-
// MDC tokens
120-
tokens-mdc-checkbox,
121-
tokens-mdc-chip,
122-
tokens-mdc-text-button,
123-
tokens-mdc-protected-button,
124-
tokens-mdc-filled-button,
125-
tokens-mdc-outlined-button,
126-
tokens-mdc-chip,
127-
tokens-mdc-circular-progress,
128-
tokens-mdc-dialog,
129-
tokens-mdc-elevated-card,
130-
tokens-mdc-extended-fab,
131-
tokens-mdc-fab,
132-
tokens-mdc-fab-small,
133-
tokens-mdc-filled-text-field,
134-
tokens-mdc-icon-button,
135-
tokens-mdc-linear-progress,
136-
tokens-mdc-list,
137-
tokens-mdc-outlined-card,
138-
tokens-mdc-outlined-text-field,
139-
tokens-mdc-plain-tooltip,
140-
tokens-mdc-radio,
141-
tokens-mdc-slider,
142-
tokens-mdc-snack-bar,
143-
tokens-mdc-switch,
144-
tokens-mdc-secondary-navigation-tab,
145-
tokens-mdc-tab-indicator
146-
);
2+
@use './mat/app';
3+
@use './mat/autocomplete';
4+
@use './mat/badge';
5+
@use './mat/bottom-sheet';
6+
@use './mat/card';
7+
@use './mat/checkbox';
8+
@use './mat/chip';
9+
@use './mat/circular-progress';
10+
@use './mat/datepicker';
11+
@use './mat/dialog';
12+
@use './mat/divider';
13+
@use './mat/elevated-card';
14+
@use './mat/expansion';
15+
@use './mat/extended-fab';
16+
@use './mat/fab';
17+
@use './mat/fab-small';
18+
@use './mat/filled-button';
19+
@use './mat/filled-text-field';
20+
@use './mat/form-field';
21+
@use './mat/full-pseudo-checkbox';
22+
@use './mat/grid-list';
23+
@use './mat/icon';
24+
@use './mat/icon-button';
25+
@use './mat/linear-progress';
26+
@use './mat/list';
27+
@use './mat/menu';
28+
@use './mat/minimal-pseudo-checkbox';
29+
@use './mat/optgroup';
30+
@use './mat/option';
31+
@use './mat/outlined-button';
32+
@use './mat/outlined-card';
33+
@use './mat/outlined-text-field';
34+
@use './mat/paginator';
35+
@use './mat/plain-tooltip';
36+
@use './mat/protected-button';
37+
@use './mat/radio';
38+
@use './mat/ripple';
39+
@use './mat/secondary-navigation-tab';
40+
@use './mat/select';
41+
@use './mat/sidenav';
42+
@use './mat/slider';
43+
@use './mat/snack-bar';
44+
@use './mat/sort';
45+
@use './mat/standard-button-toggle';
46+
@use './mat/stepper';
47+
@use './mat/switch';
48+
@use './mat/tab-header';
49+
@use './mat/tab-indicator';
50+
@use './mat/table';
51+
@use './mat/text-button';
52+
@use './mat/timepicker';
53+
@use './mat/tonal-button';
54+
@use './mat/toolbar';
55+
@use './mat/tree';
14756

14857
/// Gets the full set of M3 tokens for the given theme object.
14958
/// @param {Map} $systems The MDC system tokens
15059
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
15160
/// @param {Map} $token-slots Possible token slots
15261
/// @return {Map} Full set of M3 tokens
15362
@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
154-
$tokens: ();
63+
$tokens-list: (
64+
app.get-tokens($systems, $exclude-hardcoded, $token-slots),
65+
autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
66+
badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
67+
bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
68+
card.get-tokens($systems, $exclude-hardcoded, $token-slots),
69+
checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
70+
chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
71+
circular-progress.get-tokens($systems, $exclude-hardcoded, $token-slots),
72+
datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
73+
dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
74+
divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
75+
elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
76+
expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
77+
extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
78+
fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
79+
fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots),
80+
filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
81+
filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
82+
form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
83+
full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
84+
grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
85+
icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
86+
icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
87+
linear-progress.get-tokens($systems, $exclude-hardcoded, $token-slots),
88+
list.get-tokens($systems, $exclude-hardcoded, $token-slots),
89+
menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
90+
minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
91+
optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
92+
option.get-tokens($systems, $exclude-hardcoded, $token-slots),
93+
outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
94+
outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
95+
outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
96+
paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
97+
plain-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
98+
protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
99+
radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
100+
ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
101+
secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots),
102+
select.get-tokens($systems, $exclude-hardcoded, $token-slots),
103+
sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
104+
slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
105+
snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
106+
sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
107+
standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
108+
stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
109+
switch.get-tokens($systems, $exclude-hardcoded, $token-slots),
110+
tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots),
111+
tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots),
112+
table.get-tokens($systems, $exclude-hardcoded, $token-slots),
113+
text-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
114+
timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
115+
tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
116+
toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
117+
tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
118+
);
155119

156-
@each $module-name in $_module-names {
157-
$fn: meta.get-function(
158-
$name: 'get-tokens',
159-
$module: $module-name,
160-
);
161-
$tokens: map.deep-merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
120+
$merged-tokens: ();
121+
@each $tokens in $tokens-list {
122+
$merged-tokens: map.deep-merge($merged-tokens, $tokens);
162123
}
163124

164-
@return $tokens;
125+
@return $merged-tokens;
165126
}

Diff for: ‎src/material/core/tokens/m3/mat/_app.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ $prefix: (mat, app);
1212
/// @param {Map} $token-slots Possible token slots
1313
/// @return {Map} A set of custom tokens for the app
1414
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
15-
$shadow-color: map.get($systems, md-sys-color, shadow);
1615
$tokens: (
1716
background-color: map.get($systems, md-sys-color, background),
1817
text-color: map.get($systems, md-sys-color, on-background),
1918
);
2019

2120
// If the shadow-color is an actual color, convert it to a box-shadow value. Otherwise
2221
// use the token value as itself (e,g. as a CSS var name).
22+
$shadow-color: map.get($systems, md-sys-color, shadow);
2323
@if (meta.type-of($shadow-color) == color) {
2424
@for $zValue from 0 through 24 {
2525
$shadow: elevation.get-box-shadow($zValue, $shadow-color);

Diff for: ‎src/material/core/tokens/m3/mat/_badge.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@ $prefix: (mat, badge);
1111
/// @param {Map} $token-slots Possible token slots
1212
/// @return {Map} A set of custom tokens for the mat-badge
1313
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
14-
$tokens: ((
14+
$tokens: (
1515
background-color: map.get($systems, md-sys-color, error),
1616
text-color: map.get($systems, md-sys-color, on-error),
1717
disabled-state-background-color: sass-utils.safe-color-change(
1818
map.get($systems, md-sys-color, error),
19-
$alpha: 0.38,
20-
),
19+
$alpha: 0.38),
2120
disabled-state-text-color: map.get($systems, md-sys-color, on-error),
2221
text-font: map.get($systems, md-sys-typescale, label-small-font),
2322
text-size: map.get($systems, md-sys-typescale, label-small-size),
@@ -45,7 +44,9 @@ $prefix: (mat, badge);
4544
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
4645
large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
4746
legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
48-
), (
47+
);
48+
49+
$variant-tokens: (
4950
primary: (
5051
background-color: map.get($systems, md-sys-color, primary),
5152
text-color: map.get($systems, md-sys-color, on-primary),
@@ -74,7 +75,7 @@ $prefix: (mat, badge);
7475
disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
7576
),
7677
error: () // Default, no overrides needed
77-
));
78+
);
7879

79-
@return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
80+
@return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
8081
}

0 commit comments

Comments
 (0)