Skip to content

Commit ea0ad82

Browse files
andrewseguinandrewseguin
committed
refactor: define m2 token values inline
1 parent c771a01 commit ea0ad82

Some content is hidden

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

44 files changed

+917
-1060
lines changed

‎src/dev-app/theme.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,10 @@ $density-scales: (-1, -2, -3, -4, minimum, maximum);
7979
@include mat.all-component-densities($density);
8080
}
8181
}
82+
83+
@include mat.all-component-themes((density: -1));
84+
85+
.dddddark-theme {
86+
@include mat.all-component-themes((density: -2));
87+
}
88+

‎src/material/autocomplete/_autocomplete-theme.scss

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,44 @@
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
44
@use '../core/typography/typography';
5-
@use '../core/style/sass-utils';
65
@use '../core/tokens/token-utils';
76
@use 'm2-autocomplete';
87
@use 'm3-autocomplete';
98

109
@mixin base($theme) {
10+
$tokens: m2-autocomplete.get-unthemable-tokens();
1111
@if inspection.get-theme-version($theme) == 1 {
12-
@include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), base));
13-
} @else {
14-
@include sass-utils.current-selector-or-root() {
15-
@include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens());
16-
}
12+
$tokens: map.get(m3-autocomplete.get-tokens($theme), base);
1713
}
14+
15+
@include token-utils.values($tokens);
1816
}
1917

2018
@mixin color($theme) {
19+
$tokens: m2-autocomplete.get-color-tokens($theme);
2120
@if inspection.get-theme-version($theme) == 1 {
22-
@include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), color));
23-
} @else {
24-
@include sass-utils.current-selector-or-root() {
25-
@include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme));
26-
}
21+
$tokens: map.get(m3-autocomplete.get-tokens($theme), color);
2722
}
23+
24+
@include token-utils.values($tokens);
2825
}
2926

3027
@mixin typography($theme) {
28+
$tokens: m2-autocomplete.get-typography-tokens($theme);
3129
@if inspection.get-theme-version($theme) == 1 {
32-
@include token-utils.create-token-values(
33-
map.get(m3-autocomplete.get-tokens($theme), typography));
34-
} @else {
35-
@include sass-utils.current-selector-or-root() {
36-
@include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme));
37-
}
30+
$tokens: map.get(m3-autocomplete.get-tokens($theme), typography);
3831
}
32+
33+
@include token-utils.values($tokens);
3934
}
4035

4136
@mixin density($theme) {
37+
$tokens: m2-autocomplete.get-density-tokens($theme);
4238
@if inspection.get-theme-version($theme) == 1 {
43-
@include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), density));
44-
} @else {
45-
@include sass-utils.current-selector-or-root() {
46-
@include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme));
47-
}
39+
$tokens: map.get(m3-autocomplete.get-tokens($theme), density);
4840
}
41+
42+
@include token-utils.values($tokens);
4943
}
5044

5145
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

‎src/material/badge/_badge-theme.scss

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../core/style/sass-utils';
21
@use '../core/theming/inspection';
32
@use '../core/theming/theming';
43
@use '../core/tokens/token-utils';
@@ -12,14 +11,12 @@
1211
/// for the mat-badge.
1312
/// @param {Map} $theme The theme to generate base styles for.
1413
@mixin base($theme) {
14+
$tokens: m2-badge.get-unthemable-tokens();
1515
@if inspection.get-theme-version($theme) == 1 {
16-
@include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), base));
17-
} @else {
18-
@include sass-utils.current-selector-or-root() {
19-
@include token-utils.create-token-values-mixed(m2-badge.get-unthemable-tokens()
20-
);
21-
}
16+
$tokens: map.get(m3-badge.get-tokens($theme), base);
2217
}
18+
19+
@include token-utils.values($tokens);
2320
}
2421

2522
/// Outputs color theme styles for the mat-badge.
@@ -28,49 +25,46 @@
2825
/// the badge: primary, secondary, tertiary, or error (If not specified,
2926
/// default error color will be used).
3027
@mixin color($theme, $color-variant: null) {
28+
$tokens: m2-badge.get-color-tokens($theme);
3129
@if inspection.get-theme-version($theme) == 1 {
32-
@include token-utils.create-token-values(
33-
map.get(m3-badge.get-tokens($theme, $color-variant), color));
34-
} @else {
35-
@include sass-utils.current-selector-or-root() {
36-
@include token-utils.create-token-values-mixed(m2-badge.get-color-tokens($theme));
37-
}
30+
$tokens: map.get(m3-badge.get-tokens($theme, $color-variant), color);
31+
}
3832

33+
@include token-utils.values($tokens);
34+
35+
@if inspection.get-theme-version($theme) != 1 {
3936
.mat-badge-accent {
40-
@include token-utils.create-token-values-mixed(
41-
m2-badge.private-get-color-palette-color-tokens($theme, secondary)
42-
);
37+
$tokens: m2-badge.private-get-color-palette-color-tokens($theme, secondary);
38+
@include token-utils.values($tokens);
4339
}
4440

4541
.mat-badge-warn {
46-
@include token-utils.create-token-values-mixed(
47-
m2-badge.private-get-color-palette-color-tokens($theme, error)
48-
);
42+
$tokens: m2-badge.private-get-color-palette-color-tokens($theme, error);
43+
@include token-utils.values($tokens);
4944
}
5045
}
5146
}
5247

5348
/// Outputs typography theme styles for the mat-badge.
5449
/// @param {Map} $theme The theme to generate typography styles for.
5550
@mixin typography($theme) {
51+
$tokens: m2-badge.get-typography-tokens($theme);
5652
@if inspection.get-theme-version($theme) == 1 {
57-
@include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), typography));
58-
} @else {
59-
@include sass-utils.current-selector-or-root() {
60-
@include token-utils.create-token-values-mixed(
61-
m2-badge.get-typography-tokens($theme)
62-
);
63-
}
53+
$tokens: map.get(m3-badge.get-tokens($theme), typography);
6454
}
55+
56+
@include token-utils.values($tokens);
6557
}
6658

6759
/// Outputs density theme styles for the mat-badge.
6860
/// @param {Map} $theme The theme to generate density styles for.
6961
@mixin density($theme) {
62+
$tokens: m2-badge.get-density-tokens($theme);
7063
@if inspection.get-theme-version($theme) == 1 {
71-
@include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), density));
72-
} @else {
64+
$tokens: map.get(m3-badge.get-tokens($theme), density);
7365
}
66+
67+
@include token-utils.values($tokens);
7468
}
7569

7670
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

‎src/material/bottom-sheet/_bottom-sheet-theme.scss

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,44 @@
22
@use '../core/typography/typography';
33
@use '../core/theming/theming';
44
@use '../core/theming/inspection';
5-
@use '../core/style/sass-utils';
65
@use '../core/tokens/token-utils';
76
@use './m2-bottom-sheet';
87
@use './m3-bottom-sheet';
98

109
@mixin base($theme) {
10+
$tokens: m2-bottom-sheet.get-unthemable-tokens();
1111
@if inspection.get-theme-version($theme) == 1 {
12-
@include token-utils.create-token-values(map.get(m3-bottom-sheet.get-tokens($theme), base));
13-
} @else {
14-
@include sass-utils.current-selector-or-root() {
15-
@include token-utils.create-token-values-mixed(m2-bottom-sheet.get-unthemable-tokens());
16-
}
12+
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), base);
1713
}
14+
15+
@include token-utils.values($tokens);
1816
}
1917

2018
@mixin color($theme) {
19+
$tokens: m2-bottom-sheet.get-color-tokens($theme);
2120
@if inspection.get-theme-version($theme) == 1 {
22-
@include token-utils.create-token-values(
23-
map.get(m3-bottom-sheet.get-tokens($theme), color));
24-
} @else {
25-
@include sass-utils.current-selector-or-root() {
26-
@include token-utils.create-token-values-mixed(
27-
m2-bottom-sheet.get-color-tokens($theme)
28-
);
29-
}
21+
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), color);
3022
}
23+
24+
@include token-utils.values($tokens);
3125
}
3226

3327
@mixin typography($theme) {
28+
$tokens: m2-bottom-sheet.get-typography-tokens($theme);
3429
@if inspection.get-theme-version($theme) == 1 {
35-
@include token-utils.create-token-values(
36-
map.get(m3-bottom-sheet.get-tokens($theme), typography));
37-
} @else {
38-
@include sass-utils.current-selector-or-root() {
39-
@include token-utils.create-token-values-mixed(
40-
m2-bottom-sheet.get-typography-tokens($theme)
41-
);
42-
}
30+
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), typography);
4331
}
32+
33+
@include token-utils.values($tokens);
4434
}
4535

4636
@mixin density($theme) {
37+
$tokens: m2-bottom-sheet.get-density-tokens($theme);
4738
@if inspection.get-theme-version($theme) == 1 {
48-
@include token-utils.create-token-values(
49-
map.get(m3-bottom-sheet.get-tokens($theme), density));
50-
} @else {
39+
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), density);
5140
}
41+
42+
@include token-utils.values($tokens);
5243
}
5344

5445
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

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

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../core/style/sass-utils';
21
@use '../core/theming/inspection';
32
@use '../core/theming/theming';
43
@use '../core/tokens/token-utils';
@@ -11,58 +10,47 @@
1110
/// for the mat-button-toggle.
1211
/// @param {Map} $theme The theme to generate base styles for.
1312
@mixin base($theme) {
13+
$tokens: m2-button-toggle.get-unthemable-tokens($theme);
1414
@if inspection.get-theme-version($theme) == 1 {
15-
@include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base));
16-
} @else {
17-
@include sass-utils.current-selector-or-root() {
18-
@include token-utils.create-token-values-mixed(
19-
m2-button-toggle.get-unthemable-tokens($theme));
20-
}
15+
$tokens: map.get(m3-button-toggle.get-tokens($theme), base);
2116
}
17+
18+
@include token-utils.values($tokens);
2219
}
2320

2421
/// Outputs color theme styles for the mat-button-toggle.
2522
/// @param {Map} $theme The theme to generate color styles for.
2623
/// @param {String} $color-variant: The color variant to use for the button toggle: primary,
2724
/// secondary, tertiary, or error (If not specified, default secondary color will be used).
2825
@mixin color($theme, $color-variant: null) {
26+
$tokens: m2-button-toggle.get-color-tokens($theme);
2927
@if inspection.get-theme-version($theme) == 1 {
30-
@include token-utils.create-token-values(
31-
map.get(m3-button-toggle.get-tokens($theme, $color-variant), color));
32-
} @else {
33-
@include sass-utils.current-selector-or-root() {
34-
@include token-utils.create-token-values-mixed(
35-
m2-button-toggle.get-color-tokens($theme)
36-
);
37-
}
28+
$tokens: map.get(m3-button-toggle.get-tokens($theme, $color-variant), color);
3829
}
30+
31+
@include token-utils.values($tokens);
3932
}
4033

4134
/// Outputs typography theme styles for the mat-button-toggle.
4235
/// @param {Map} $theme The theme to generate typography styles for.
4336
@mixin typography($theme) {
37+
$tokens: m2-button-toggle.get-typography-tokens($theme);
4438
@if inspection.get-theme-version($theme) == 1 {
45-
@include token-utils.create-token-values(
46-
map.get(m3-button-toggle.get-tokens($theme), typography));
47-
} @else {
48-
@include sass-utils.current-selector-or-root() {
49-
@include token-utils.create-token-values-mixed(
50-
m2-button-toggle.get-typography-tokens($theme));
51-
}
39+
$tokens: map.get(m3-button-toggle.get-tokens($theme), typography);
5240
}
41+
42+
@include token-utils.values($tokens);
5343
}
5444

5545
/// Outputs density theme styles for the mat-button-toggle.
5646
/// @param {Map} $theme The theme to generate density styles for.
5747
@mixin density($theme) {
48+
$tokens: m2-button-toggle.get-density-tokens($theme);
5849
@if inspection.get-theme-version($theme) == 1 {
59-
@include token-utils.create-token-values(
60-
map.get(m3-button-toggle.get-tokens($theme), density));
61-
} @else {
62-
@include sass-utils.current-selector-or-root() {
63-
@include token-utils.create-token-values-mixed(m2-button-toggle.get-density-tokens($theme));
64-
}
50+
$tokens: map.get(m3-button-toggle.get-tokens($theme), density);
6551
}
52+
53+
@include token-utils.values($tokens);
6654
}
6755

6856
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

0 commit comments

Comments
 (0)