Skip to content

Commit 3db4f23

Browse files
andrewseguinandrewseguin
authored
refactor: align m2 and m3 token file functions by using get-tokens (#31425)
1 parent b5fbf52 commit 3db4f23

File tree

82 files changed

+1597
-2134
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

+1597
-2134
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@use 'm3-autocomplete';
77

88
@mixin base($theme) {
9-
$tokens: m2-autocomplete.get-unthemable-tokens();
9+
$tokens: map.get(m2-autocomplete.get-tokens($theme), base);
1010
@if inspection.get-theme-version($theme) == 1 {
1111
$tokens: map.get(m3-autocomplete.get-tokens($theme), base);
1212
}
@@ -15,7 +15,7 @@
1515
}
1616

1717
@mixin color($theme) {
18-
$tokens: m2-autocomplete.get-color-tokens($theme);
18+
$tokens: map.get(m2-autocomplete.get-tokens($theme), color);
1919
@if inspection.get-theme-version($theme) == 1 {
2020
$tokens: map.get(m3-autocomplete.get-tokens($theme), color);
2121
}
@@ -24,7 +24,7 @@
2424
}
2525

2626
@mixin typography($theme) {
27-
$tokens: m2-autocomplete.get-typography-tokens($theme);
27+
$tokens: map.get(m2-autocomplete.get-tokens($theme), typography);
2828
@if inspection.get-theme-version($theme) == 1 {
2929
$tokens: map.get(m3-autocomplete.get-tokens($theme), typography);
3030
}
@@ -33,7 +33,7 @@
3333
}
3434

3535
@mixin density($theme) {
36-
$tokens: m2-autocomplete.get-density-tokens($theme);
36+
$tokens: map.get(m2-autocomplete.get-tokens($theme), density);
3737
@if inspection.get-theme-version($theme) == 1 {
3838
$tokens: map.get(m3-autocomplete.get-tokens($theme), density);
3939
}

‎src/material/autocomplete/_m2-autocomplete.scss‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,18 @@
22
@use '../core/tokens/m2-utils';
33
@use 'sass:map';
44

5-
// Tokens that can't be configured through Angular Material's current theming API,
6-
// but may be in a future version of the theming API.
7-
@function get-unthemable-tokens() {
8-
@return (
9-
autocomplete-container-shape: 4px,
10-
autocomplete-container-elevation-shadow: elevation.get-box-shadow(8),
11-
);
12-
}
13-
14-
// Tokens that can be configured through Angular Material's color theming API.
15-
@function get-color-tokens($theme) {
5+
@function get-tokens($theme) {
166
$system: m2-utils.get-system($theme);
177

188
@return (
19-
autocomplete-background-color: map.get($system, surface)
9+
base: (
10+
autocomplete-container-shape: 4px,
11+
autocomplete-container-elevation-shadow: elevation.get-box-shadow(8),
12+
),
13+
color: (
14+
autocomplete-background-color: map.get($system, surface)
15+
),
16+
typography: (),
17+
density: (),
2018
);
2119
}
22-
23-
// Tokens that can be configured through Angular Material's typography theming API.
24-
@function get-typography-tokens($theme) {
25-
@return ();
26-
}
27-
28-
// Tokens that can be configured through Angular Material's density theming API.
29-
@function get-density-tokens($theme) {
30-
@return ();
31-
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
/// for the mat-badge.
1111
/// @param {Map} $theme The theme to generate base styles for.
1212
@mixin base($theme) {
13-
$tokens: m2-badge.get-unthemable-tokens();
13+
$tokens: map.get(m2-badge.get-tokens($theme), base);
1414
@if inspection.get-theme-version($theme) == 1 {
1515
$tokens: map.get(m3-badge.get-tokens($theme), base);
1616
}
@@ -24,7 +24,7 @@
2424
/// the badge: primary, secondary, tertiary, or error (If not specified,
2525
/// default error color will be used).
2626
@mixin color($theme, $color-variant: null) {
27-
$tokens: m2-badge.get-color-tokens($theme);
27+
$tokens: map.get(m2-badge.get-tokens($theme), color);
2828
@if inspection.get-theme-version($theme) == 1 {
2929
$tokens: map.get(m3-badge.get-tokens($theme, $color-variant), color);
3030
}
@@ -47,7 +47,7 @@
4747
/// Outputs typography theme styles for the mat-badge.
4848
/// @param {Map} $theme The theme to generate typography styles for.
4949
@mixin typography($theme) {
50-
$tokens: m2-badge.get-typography-tokens($theme);
50+
$tokens: map.get(m2-badge.get-tokens($theme), typography);
5151
@if inspection.get-theme-version($theme) == 1 {
5252
$tokens: map.get(m3-badge.get-tokens($theme), typography);
5353
}
@@ -58,7 +58,7 @@
5858
/// Outputs density theme styles for the mat-badge.
5959
/// @param {Map} $theme The theme to generate density styles for.
6060
@mixin density($theme) {
61-
$tokens: m2-badge.get-density-tokens($theme);
61+
$tokens: map.get(m2-badge.get-tokens($theme), density);
6262
@if inspection.get-theme-version($theme) == 1 {
6363
$tokens: map.get(m3-badge.get-tokens($theme), density);
6464
}

‎src/material/badge/_m2-badge.scss‎

Lines changed: 49 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,59 @@ $_default-size: 22px;
77
$_small-size: $_default-size - 6px;
88
$_large-size: $_default-size + 6px;
99

10-
// Tokens that can't be configured through Angular Material's current theming API,
11-
// but may be in a future version of the theming API.
12-
@function get-unthemable-tokens() {
13-
$default-size: $_default-size;
14-
$small-size: $_small-size;
15-
$large-size: $_large-size;
16-
17-
@return (
18-
badge-container-shape: 50%,
19-
badge-container-size: unset,
20-
badge-small-size-container-size: unset,
21-
badge-large-size-container-size: unset,
22-
23-
badge-legacy-container-size: $default-size,
24-
badge-legacy-small-size-container-size: $small-size,
25-
badge-legacy-large-size-container-size: $large-size,
26-
27-
badge-container-offset: math.div($default-size, -2) 0,
28-
badge-small-size-container-offset: math.div($small-size, -2) 0,
29-
badge-large-size-container-offset: math.div($large-size, -2) 0,
30-
31-
badge-container-overlap-offset: math.div($default-size, -2),
32-
badge-small-size-container-overlap-offset: math.div($small-size, -2),
33-
badge-large-size-container-overlap-offset: math.div($large-size, -2),
34-
35-
badge-container-padding: 0,
36-
badge-small-size-container-padding: 0,
37-
badge-large-size-container-padding: 0,
38-
);
39-
}
10+
@function get-tokens($theme) {
11+
$default-size: 22px;
12+
$small-size: $default-size - 6px;
13+
$large-size: $default-size + 6px;
14+
$base-size: 12px;
4015

41-
// Tokens that can be configured through Angular Material's color theming API.
42-
@function get-color-tokens($theme) {
4316
$system: m2-utils.get-system($theme);
4417
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
45-
$disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
18+
$disabled-container: m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
4619
$primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
47-
@return map.merge($primary-color-tokens, (
48-
badge-disabled-state-background-color: $disabled-container,
49-
badge-disabled-state-text-color: $disabled,
50-
));
51-
}
20+
21+
@return (
22+
base: (
23+
badge-container-shape: 50%,
24+
badge-container-size: unset,
25+
badge-small-size-container-size: unset,
26+
badge-large-size-container-size: unset,
27+
28+
badge-legacy-container-size: $default-size,
29+
badge-legacy-small-size-container-size: $small-size,
30+
badge-legacy-large-size-container-size: $large-size,
31+
32+
badge-container-offset: math.div($default-size, -2) 0,
33+
badge-small-size-container-offset: math.div($small-size, -2) 0,
34+
badge-large-size-container-offset: math.div($large-size, -2) 0,
35+
36+
badge-container-overlap-offset: math.div($default-size, -2),
37+
badge-small-size-container-overlap-offset: math.div($small-size, -2),
38+
badge-large-size-container-overlap-offset: math.div($large-size, -2),
39+
40+
badge-container-padding: 0,
41+
badge-small-size-container-padding: 0,
42+
badge-large-size-container-padding: 0,
43+
),
44+
color: map.merge($primary-color-tokens, (
45+
badge-disabled-state-background-color: $disabled-container,
46+
badge-disabled-state-text-color: $disabled,
47+
)),
48+
typography: (
49+
badge-text-font: map.get($system, body-medium-font),
50+
badge-line-height: $_default-size,
51+
badge-text-size: $base-size,
52+
badge-text-weight: 600,
53+
54+
badge-small-size-text-size: $base-size * 0.75,
55+
badge-small-size-line-height: $_small-size,
56+
57+
badge-large-size-text-size: $base-size * 2,
58+
badge-large-size-line-height: $_large-size,
59+
),
60+
density: (),
61+
);
62+
};
5263

5364
// Generates the tokens used to theme the badge based on a palette.
5465
@function private-get-color-palette-color-tokens($theme, $color-variant) {
@@ -60,28 +71,3 @@ $_large-size: $_default-size + 6px;
6071
badge-text-color: map.get($system, on-primary),
6172
);
6273
}
63-
64-
// Tokens that can be configured through Angular Material's typography theming API.
65-
@function get-typography-tokens($theme) {
66-
$system: m2-utils.get-system($theme);
67-
68-
$base-size: 12px;
69-
70-
@return (
71-
badge-text-font: map.get($system, body-medium-font),
72-
badge-line-height: $_default-size,
73-
badge-text-size: $base-size,
74-
badge-text-weight: 600,
75-
76-
badge-small-size-text-size: $base-size * 0.75,
77-
badge-small-size-line-height: $_small-size,
78-
79-
badge-large-size-text-size: $base-size * 2,
80-
badge-large-size-line-height: $_large-size,
81-
);
82-
}
83-
84-
// Tokens that can be configured through Angular Material's density theming API.
85-
@function get-density-tokens($theme) {
86-
@return ();
87-
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@use './m3-bottom-sheet';
77

88
@mixin base($theme) {
9-
$tokens: m2-bottom-sheet.get-unthemable-tokens();
9+
$tokens: map.get(m2-bottom-sheet.get-tokens($theme), base);
1010
@if inspection.get-theme-version($theme) == 1 {
1111
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), base);
1212
}
@@ -15,7 +15,7 @@
1515
}
1616

1717
@mixin color($theme) {
18-
$tokens: m2-bottom-sheet.get-color-tokens($theme);
18+
$tokens: map.get(m2-bottom-sheet.get-tokens($theme), color);
1919
@if inspection.get-theme-version($theme) == 1 {
2020
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), color);
2121
}
@@ -24,7 +24,7 @@
2424
}
2525

2626
@mixin typography($theme) {
27-
$tokens: m2-bottom-sheet.get-typography-tokens($theme);
27+
$tokens: map.get(m2-bottom-sheet.get-tokens($theme), typography);
2828
@if inspection.get-theme-version($theme) == 1 {
2929
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), typography);
3030
}
@@ -33,7 +33,7 @@
3333
}
3434

3535
@mixin density($theme) {
36-
$tokens: m2-bottom-sheet.get-density-tokens($theme);
36+
$tokens: map.get(m2-bottom-sheet.get-tokens($theme), density);
3737
@if inspection.get-theme-version($theme) == 1 {
3838
$tokens: map.get(m3-bottom-sheet.get-tokens($theme), density);
3939
}

‎src/material/bottom-sheet/_m2-bottom-sheet.scss‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,24 @@
11
@use '../core/tokens/m2-utils';
22
@use 'sass:map';
33

4-
// Tokens that can't be configured through Angular Material's current theming API,
5-
// but may be in a future version of the theming API.
6-
@function get-unthemable-tokens() {
7-
@return (
8-
// TODO: will be necessary for M3.
9-
bottom-sheet-container-shape: 4px,
10-
);
11-
}
12-
13-
// Tokens that can be configured through Angular Material's color theming API.
14-
@function get-color-tokens($theme) {
4+
@function get-tokens($theme) {
155
$system: m2-utils.get-system($theme);
166

177
@return (
18-
bottom-sheet-container-text-color: map.get($system, on-surface),
19-
bottom-sheet-container-background-color: map.get($system, surface),
8+
base: (
9+
bottom-sheet-container-shape: 4px,
10+
),
11+
color: (
12+
bottom-sheet-container-text-color: map.get($system, on-surface),
13+
bottom-sheet-container-background-color: map.get($system, surface),
14+
),
15+
typography: (
16+
bottom-sheet-container-text-font: map.get($system, body-medium-font),
17+
bottom-sheet-container-text-line-height: map.get($system, body-medium-line-height),
18+
bottom-sheet-container-text-size: map.get($system, body-medium-size),
19+
bottom-sheet-container-text-tracking: map.get($system, body-medium-tracking),
20+
bottom-sheet-container-text-weight: map.get($system, body-medium-weight),
21+
),
22+
density: (),
2023
);
2124
}
22-
23-
// Tokens that can be configured through Angular Material's typography theming API.
24-
@function get-typography-tokens($theme) {
25-
$system: m2-utils.get-system($theme);
26-
@return (
27-
bottom-sheet-container-text-font: map.get($system, body-medium-font),
28-
bottom-sheet-container-text-line-height: map.get($system, body-medium-line-height),
29-
bottom-sheet-container-text-size: map.get($system, body-medium-size),
30-
bottom-sheet-container-text-tracking: map.get($system, body-medium-tracking),
31-
bottom-sheet-container-text-weight: map.get($system, body-medium-weight),
32-
);
33-
}
34-
35-
// Tokens that can be configured through Angular Material's density theming API.
36-
@function get-density-tokens($theme) {
37-
@return ();
38-
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
/// for the mat-button-toggle.
1010
/// @param {Map} $theme The theme to generate base styles for.
1111
@mixin base($theme) {
12-
$tokens: m2-button-toggle.get-unthemable-tokens($theme);
12+
$tokens: map.get(m2-button-toggle.get-tokens($theme), base);
1313
@if inspection.get-theme-version($theme) == 1 {
1414
$tokens: map.get(m3-button-toggle.get-tokens($theme), base);
1515
}
@@ -22,7 +22,7 @@
2222
/// @param {String} $color-variant: The color variant to use for the button toggle: primary,
2323
/// secondary, tertiary, or error (If not specified, default secondary color will be used).
2424
@mixin color($theme, $color-variant: null) {
25-
$tokens: m2-button-toggle.get-color-tokens($theme);
25+
$tokens: map.get(m2-button-toggle.get-tokens($theme), color);
2626
@if inspection.get-theme-version($theme) == 1 {
2727
$tokens: map.get(m3-button-toggle.get-tokens($theme, $color-variant), color);
2828
}
@@ -33,7 +33,7 @@
3333
/// Outputs typography theme styles for the mat-button-toggle.
3434
/// @param {Map} $theme The theme to generate typography styles for.
3535
@mixin typography($theme) {
36-
$tokens: m2-button-toggle.get-typography-tokens($theme);
36+
$tokens: map.get(m2-button-toggle.get-tokens($theme), typography);
3737
@if inspection.get-theme-version($theme) == 1 {
3838
$tokens: map.get(m3-button-toggle.get-tokens($theme), typography);
3939
}
@@ -44,7 +44,7 @@
4444
/// Outputs density theme styles for the mat-button-toggle.
4545
/// @param {Map} $theme The theme to generate density styles for.
4646
@mixin density($theme) {
47-
$tokens: m2-button-toggle.get-density-tokens($theme);
47+
$tokens: map.get(m2-button-toggle.get-tokens($theme), density);
4848
@if inspection.get-theme-version($theme) == 1 {
4949
$tokens: map.get(m3-button-toggle.get-tokens($theme), density);
5050
}

0 commit comments

Comments
 (0)