Skip to content

Commit d9ba9c9

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: merge m2 mdc and mat tokens (#30748)
* refactor: merge m2 mdc and mat tokens * refactor: lint --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 40d0ab4 commit d9ba9c9

File tree

82 files changed

+1034
-3341
lines changed

Some content is hidden

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

82 files changed

+1034
-3341
lines changed

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

Lines changed: 0 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -3,82 +3,50 @@
33
@use '../core/theming/validation';
44
@use '../core/tokens/token-utils';
55
@use '../core/typography/typography';
6-
@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
76
@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
8-
@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
97
@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
10-
@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
118
@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
12-
@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
139
@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
1410
@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button;
1511
@use '../core/style/sass-utils';
1612

1713
@mixin _text-button-variant($theme, $palette) {
18-
$mdc-tokens: if(
19-
$palette,
20-
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
21-
tokens-mdc-text-button.get-color-tokens($theme)
22-
);
23-
2414
$mat-tokens: if(
2515
$palette,
2616
tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
2717
tokens-mat-text-button.get-color-tokens($theme)
2818
);
2919

30-
@include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens);
3120
@include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens);
3221
}
3322

3423
@mixin _filled-button-variant($theme, $palette) {
35-
$mdc-tokens: if(
36-
$palette,
37-
tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
38-
tokens-mdc-filled-button.get-color-tokens($theme)
39-
);
40-
4124
$mat-tokens: if(
4225
$palette,
4326
tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
4427
tokens-mat-filled-button.get-color-tokens($theme)
4528
);
4629

47-
@include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens);
4830
@include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens);
4931
}
5032

5133
@mixin _protected-button-variant($theme, $palette) {
52-
$mdc-tokens: if(
53-
$palette,
54-
tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
55-
tokens-mdc-protected-button.get-color-tokens($theme)
56-
);
57-
5834
$mat-tokens: if(
5935
$palette,
6036
tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
6137
tokens-mat-protected-button.get-color-tokens($theme)
6238
);
6339

64-
@include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens);
6540
@include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens);
6641
}
6742

6843
@mixin _outlined-button-variant($theme, $palette) {
69-
$mdc-tokens: if(
70-
$palette,
71-
tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
72-
tokens-mdc-outlined-button.get-color-tokens($theme)
73-
);
74-
7544
$mat-tokens: if(
7645
$palette,
7746
tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
7847
tokens-mat-outlined-button.get-color-tokens($theme)
7948
);
8049

81-
@include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
8250
@include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens);
8351
}
8452

@@ -95,26 +63,6 @@
9563
@include validation.selector-defined(
9664
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
9765
);
98-
$mdc-text-button-tokens: token-utils.get-tokens-for(
99-
$tokens,
100-
tokens-mdc-text-button.$prefix,
101-
$options...
102-
);
103-
$mdc-protected-button-tokens: token-utils.get-tokens-for(
104-
$tokens,
105-
tokens-mdc-protected-button.$prefix,
106-
$options...
107-
);
108-
$mdc-filled-button-tokens: token-utils.get-tokens-for(
109-
$tokens,
110-
tokens-mdc-filled-button.$prefix,
111-
$options...
112-
);
113-
$mdc-outlined-button-tokens: token-utils.get-tokens-for(
114-
$tokens,
115-
tokens-mdc-outlined-button.$prefix,
116-
$options...
117-
);
11866
$mat-text-button-tokens: token-utils.get-tokens-for(
11967
$tokens,
12068
tokens-mat-text-button.$prefix,
@@ -141,19 +89,6 @@
14189
$options...
14290
);
14391

144-
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
145-
@include token-utils.create-token-values(
146-
tokens-mdc-protected-button.$prefix,
147-
$mdc-protected-button-tokens
148-
);
149-
@include token-utils.create-token-values(
150-
tokens-mdc-filled-button.$prefix,
151-
$mdc-filled-button-tokens
152-
);
153-
@include token-utils.create-token-values(
154-
tokens-mdc-outlined-button.$prefix,
155-
$mdc-outlined-button-tokens
156-
);
15792
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
15893
@include token-utils.create-token-values(
15994
tokens-mat-protected-button.$prefix,
@@ -181,23 +116,6 @@
181116
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
182117
} @else {
183118
@include sass-utils.current-selector-or-root() {
184-
@include token-utils.create-token-values-mixed(
185-
tokens-mdc-text-button.$prefix,
186-
tokens-mdc-text-button.get-unthemable-tokens()
187-
);
188-
@include token-utils.create-token-values-mixed(
189-
tokens-mdc-filled-button.$prefix,
190-
tokens-mdc-filled-button.get-unthemable-tokens()
191-
);
192-
@include token-utils.create-token-values-mixed(
193-
tokens-mdc-protected-button.$prefix,
194-
tokens-mdc-protected-button.get-unthemable-tokens()
195-
);
196-
@include token-utils.create-token-values-mixed(
197-
tokens-mdc-outlined-button.$prefix,
198-
tokens-mdc-outlined-button.get-unthemable-tokens()
199-
);
200-
201119
@include token-utils.create-token-values-mixed(
202120
tokens-mat-text-button.$prefix,
203121
tokens-mat-text-button.get-unthemable-tokens()
@@ -318,23 +236,6 @@
318236
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
319237
} @else {
320238
@include sass-utils.current-selector-or-root() {
321-
@include token-utils.create-token-values-mixed(
322-
tokens-mdc-text-button.$prefix,
323-
tokens-mdc-text-button.get-typography-tokens($theme)
324-
);
325-
@include token-utils.create-token-values-mixed(
326-
tokens-mdc-filled-button.$prefix,
327-
tokens-mdc-filled-button.get-typography-tokens($theme)
328-
);
329-
@include token-utils.create-token-values-mixed(
330-
tokens-mdc-protected-button.$prefix,
331-
tokens-mdc-protected-button.get-typography-tokens($theme)
332-
);
333-
@include token-utils.create-token-values-mixed(
334-
tokens-mdc-outlined-button.$prefix,
335-
tokens-mdc-outlined-button.get-typography-tokens($theme)
336-
);
337-
338239
@include token-utils.create-token-values-mixed(
339240
tokens-mat-text-button.$prefix,
340241
tokens-mat-text-button.get-typography-tokens($theme)
@@ -366,23 +267,6 @@
366267
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
367268
} @else {
368269
@include sass-utils.current-selector-or-root() {
369-
@include token-utils.create-token-values-mixed(
370-
tokens-mdc-text-button.$prefix,
371-
tokens-mdc-text-button.get-density-tokens($theme)
372-
);
373-
@include token-utils.create-token-values-mixed(
374-
tokens-mdc-filled-button.$prefix,
375-
tokens-mdc-filled-button.get-density-tokens($theme)
376-
);
377-
@include token-utils.create-token-values-mixed(
378-
tokens-mdc-protected-button.$prefix,
379-
tokens-mdc-protected-button.get-density-tokens($theme)
380-
);
381-
@include token-utils.create-token-values-mixed(
382-
tokens-mdc-outlined-button.$prefix,
383-
tokens-mdc-outlined-button.get-density-tokens($theme)
384-
);
385-
386270
@include token-utils.create-token-values-mixed(
387271
tokens-mat-text-button.$prefix,
388272
tokens-mat-text-button.get-density-tokens($theme)
@@ -409,52 +293,28 @@
409293

410294
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
411295
@function _define-overrides() {
412-
$mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots();
413296
$mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
414-
$mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots();
415297
$mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots();
416-
$mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots();
417298
$mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
418-
$mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
419299
$mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
420300
$mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots();
421301

422302
@return (
423-
(
424-
namespace: tokens-mdc-filled-button.$prefix,
425-
tokens: $mdc-filled-button-tokens,
426-
prefix: 'filled-',
427-
),
428303
(
429304
namespace: tokens-mat-filled-button.$prefix,
430305
tokens: $mat-filled-button-tokens,
431306
prefix: 'filled-',
432307
),
433-
(
434-
namespace: tokens-mdc-outlined-button.$prefix,
435-
tokens: $mdc-outlined-button-tokens,
436-
prefix: 'outlined-',
437-
),
438308
(
439309
namespace: tokens-mat-outlined-button.$prefix,
440310
tokens: $mat-outlined-button-tokens,
441311
prefix: 'outlined-',
442312
),
443-
(
444-
namespace: tokens-mdc-protected-button.$prefix,
445-
tokens: $mdc-protected-button-tokens,
446-
prefix: 'protected-',
447-
),
448313
(
449314
namespace: tokens-mat-protected-button.$prefix,
450315
tokens: $mat-protected-button-tokens,
451316
prefix: 'protected-',
452317
),
453-
(
454-
namespace: tokens-mdc-text-button.$prefix,
455-
tokens: $mdc-text-button-tokens,
456-
prefix: 'text-',
457-
),
458318
(
459319
namespace: tokens-mat-text-button.$prefix,
460320
tokens: $mat-text-button-tokens,

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

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
44
@use '../core/theming/validation';
5-
@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
6-
@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
7-
@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
5+
@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab;
86
@use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
97
@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
108
@use '../core/tokens/token-utils';
@@ -19,52 +17,38 @@
1917
} @else {
2018
@include sass-utils.current-selector-or-root() {
2119
@include token-utils.create-token-values-mixed(
22-
tokens-mdc-fab.$prefix,
23-
tokens-mdc-fab.get-unthemable-tokens()
20+
tokens-mat-fab.$prefix,
21+
tokens-mat-fab.get-unthemable-tokens()
2422
);
2523
@include token-utils.create-token-values-mixed(
26-
tokens-mdc-fab-small.$prefix,
27-
tokens-mdc-fab-small.get-unthemable-tokens()
24+
tokens-mat-fab-small.$prefix,
25+
tokens-mat-fab-small.get-unthemable-tokens()
2826
);
2927
@include token-utils.create-token-values-mixed(
30-
tokens-mdc-extended-fab.$prefix,
31-
tokens-mdc-extended-fab.get-unthemable-tokens()
28+
tokens-mat-extended-fab.$prefix,
29+
tokens-mat-extended-fab.get-unthemable-tokens()
3230
);
3331
}
3432
}
3533
}
3634

3735
@mixin _fab-variant($theme, $palette) {
38-
$mdc-tokens: if(
39-
$palette,
40-
tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette),
41-
tokens-mdc-fab.get-color-tokens($theme)
42-
);
43-
4436
$mat-tokens: if(
4537
$palette,
4638
tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
4739
tokens-mat-fab.get-color-tokens($theme)
4840
);
4941

50-
@include token-utils.create-token-values-mixed(tokens-mdc-fab.$prefix, $mdc-tokens);
5142
@include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens);
5243
}
5344

5445
@mixin _fab-small-variant($theme, $palette) {
55-
$mdc-tokens: if(
56-
$palette,
57-
tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
58-
tokens-mdc-fab-small.get-color-tokens($theme)
59-
);
60-
6146
$mat-tokens: if(
6247
$palette,
6348
tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
6449
tokens-mat-fab-small.get-color-tokens($theme)
6550
);
6651

67-
@include token-utils.create-token-values-mixed(tokens-mdc-fab-small.$prefix, $mdc-tokens);
6852
@include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens);
6953
}
7054

@@ -81,8 +65,8 @@
8165
@include _fab-variant($theme, null);
8266
@include _fab-small-variant($theme, null);
8367
@include token-utils.create-token-values-mixed(
84-
tokens-mdc-extended-fab.$prefix,
85-
tokens-mdc-extended-fab.get-color-tokens($theme)
68+
tokens-mat-extended-fab.$prefix,
69+
tokens-mat-extended-fab.get-color-tokens($theme)
8670
);
8771

8872
.mat-mdc-fab {
@@ -124,8 +108,8 @@
124108
} @else {
125109
@include sass-utils.current-selector-or-root() {
126110
@include token-utils.create-token-values-mixed(
127-
tokens-mdc-extended-fab.$prefix,
128-
tokens-mdc-extended-fab.get-typography-tokens($theme)
111+
tokens-mat-extended-fab.$prefix,
112+
tokens-mat-extended-fab.get-typography-tokens($theme)
129113
);
130114
@include token-utils.create-token-values-mixed(
131115
tokens-mat-fab.$prefix,
@@ -162,17 +146,8 @@
162146
@function _define-overrides() {
163147
@return (
164148
(
165-
namespace: tokens-mdc-fab.$prefix,
166-
tokens: tokens-mdc-fab.get-token-slots(),
167-
),
168-
(
169-
namespace: tokens-mdc-fab-small.$prefix,
170-
tokens: tokens-mdc-fab-small.get-token-slots(),
171-
prefix: 'small-',
172-
),
173-
(
174-
namespace: tokens-mdc-extended-fab.$prefix,
175-
tokens: tokens-mdc-extended-fab.get-token-slots(),
149+
namespace: tokens-mat-extended-fab.$prefix,
150+
tokens: tokens-mat-extended-fab.get-token-slots(),
176151
prefix: 'extended-',
177152
),
178153
(
@@ -223,13 +198,7 @@
223198
);
224199
$mdc-extended-fab-tokens: token-utils.get-tokens-for(
225200
$tokens,
226-
tokens-mdc-extended-fab.$prefix,
227-
$options...
228-
);
229-
$mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
230-
$mdc-fab-small-tokens: token-utils.get-tokens-for(
231-
$tokens,
232-
tokens-mdc-fab-small.$prefix,
201+
tokens-mat-extended-fab.$prefix,
233202
$options...
234203
);
235204
$mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
@@ -239,11 +208,9 @@
239208
$options...
240209
);
241210
@include token-utils.create-token-values(
242-
tokens-mdc-extended-fab.$prefix,
211+
tokens-mat-extended-fab.$prefix,
243212
$mdc-extended-fab-tokens
244213
);
245-
@include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens);
246-
@include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens);
247214
@include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
248215
@include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
249216
}

0 commit comments

Comments
 (0)