Skip to content

Commit 5db4fcf

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: remove component m3 tokens from theme config (#31111)
* refactor: remove component m3 tokens from theme config * refactor: fixes found during internal testing * refactor: more fixes --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 5397b38 commit 5db4fcf

File tree

149 files changed

+2750
-3531
lines changed

Some content is hidden

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

149 files changed

+2750
-3531
lines changed

‎src/material/autocomplete/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ sass_binary(
5656
src = "autocomplete.scss",
5757
deps = [
5858
":m2",
59+
":m3",
5960
"//src/cdk:sass_lib",
6061
"//src/material/core/tokens:token_utils",
6162
],

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
4-
@use '../core/theming/validation';
54
@use '../core/typography/typography';
65
@use '../core/style/sass-utils';
76
@use '../core/tokens/token-utils';
87
@use 'm2-autocomplete';
8+
@use 'm3-autocomplete';
99

1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
12-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
@include token-utils.create-token-values(
13+
m3-autocomplete.$prefix,
14+
map.get(m3-autocomplete.get-tokens($theme), base));
1315
} @else {
1416
@include sass-utils.current-selector-or-root() {
1517
@include token-utils.create-token-values-mixed(
@@ -22,7 +24,9 @@
2224

2325
@mixin color($theme) {
2426
@if inspection.get-theme-version($theme) == 1 {
25-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
27+
@include token-utils.create-token-values(
28+
m3-autocomplete.$prefix,
29+
map.get(m3-autocomplete.get-tokens($theme), color));
2630
} @else {
2731
@include sass-utils.current-selector-or-root() {
2832
@include token-utils.create-token-values-mixed(
@@ -35,7 +39,9 @@
3539

3640
@mixin typography($theme) {
3741
@if inspection.get-theme-version($theme) == 1 {
38-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
42+
@include token-utils.create-token-values(
43+
m3-autocomplete.$prefix,
44+
map.get(m3-autocomplete.get-tokens($theme), typography));
3945
} @else {
4046
@include sass-utils.current-selector-or-root() {
4147
@include token-utils.create-token-values-mixed(
@@ -48,7 +54,9 @@
4854

4955
@mixin density($theme) {
5056
@if inspection.get-theme-version($theme) == 1 {
51-
// There are no M3 density tokens for this component
57+
@include token-utils.create-token-values(
58+
m3-autocomplete.$prefix,
59+
map.get(m3-autocomplete.get-tokens($theme), density));
5260
} @else {
5361
@include sass-utils.current-selector-or-root() {
5462
@include token-utils.create-token-values-mixed(
@@ -76,7 +84,10 @@
7684
@mixin theme($theme) {
7785
@include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
7886
@if inspection.get-theme-version($theme) == 1 {
79-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
87+
@include base($theme);
88+
@include color($theme);
89+
@include density($theme);
90+
@include typography($theme);
8091
} @else {
8192
@include base($theme);
8293
@if inspection.theme-has($theme, color) {
@@ -91,15 +102,3 @@
91102
}
92103
}
93104
}
94-
95-
@mixin _theme-from-tokens($tokens) {
96-
@include validation.selector-defined(
97-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
98-
);
99-
@if ($tokens != ()) {
100-
@include token-utils.create-token-values(
101-
m2-autocomplete.$prefix,
102-
map.get($tokens, m2-autocomplete.$prefix)
103-
);
104-
}
105-
}

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,19 @@ $prefix: (mat, autocomplete);
1010
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1111
/// @param {Map} $token-slots Possible token slots
1212
/// @return {Map} A set of custom tokens for the mat-autocomplete
13-
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
13+
@function get-tokens($theme) {
14+
$system: m3-utils.get-system($theme);
1415
$tokens: (
15-
background-color: map.get($systems, md-sys-color, surface-container),
16-
container-shape: map.get($systems, md-sys-shape, corner-extra-small),
17-
container-elevation-shadow:
18-
m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
16+
base: (
17+
container-shape: map.get($system, corner-extra-small),
18+
container-elevation-shadow: elevation.get-box-shadow(2),
19+
),
20+
color: (
21+
background-color: map.get($system, surface-container),
22+
),
23+
typography: (),
24+
density: (),
1925
);
20-
@return m3-utils.namespace($prefix, $tokens, $token-slots);
26+
27+
@return $tokens;
2128
}

‎src/material/autocomplete/autocomplete.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
@use '@angular/cdk';
22
@use './m2-autocomplete';
3+
@use './m3-autocomplete';
34
@use '../core/tokens/token-utils';
5+
@use '../core/tokens/m3-system';
46

57
$token-prefix: m2-autocomplete.$prefix;
68
$token-slots: m2-autocomplete.get-token-slots();
9+
$fallbacks: m3-autocomplete.get-tokens(m3-system.$theme-with-system-vars);
710

811
// Even though we don't use the MDC styles, we need to keep the classes in the
912
// DOM for the Gmat versions to work. We need to bump up the specificity here
@@ -21,7 +24,7 @@ div.mat-mdc-autocomplete-panel {
2124
// panel which is required for scroll calculations (see #30974).
2225
position: relative;
2326

24-
@include token-utils.use-tokens($token-prefix, $token-slots) {
27+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
2528
border-radius: token-utils.slot(container-shape);
2629
box-shadow: token-utils.slot(container-elevation-shadow);
2730
background-color: token-utils.slot(background-color);

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use '../core/style/sass-utils';
22
@use '../core/theming/inspection';
33
@use '../core/theming/theming';
4-
@use '../core/theming/validation';
54
@use '../core/tokens/token-utils';
65
@use '../core/typography/typography';
76
@use './m2-badge';
@@ -107,9 +106,7 @@
107106

108107
/// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
109108
/// @param {Map} $theme The theme to generate styles for.
110-
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
111-
/// $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
112-
/// or error (If not specified, default error color will be used).
109+
/// @param {String} $color-variant The color variant to use for the component
113110
@mixin theme($theme, $color-variant: null) {
114111
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
115112
@if inspection.get-theme-version($theme) == 1 {
@@ -131,11 +128,3 @@
131128
}
132129
}
133130
}
134-
135-
@mixin _theme-from-tokens($tokens, $options...) {
136-
@include validation.selector-defined(
137-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
138-
);
139-
$mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...);
140-
@include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
141-
}

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,38 @@ $prefix: (mat, badge);
1313

1414
$tokens: (
1515
base: (
16-
container-shape: map.get($system, corner-full),
17-
container-size: 16px,
18-
legacy-container-size: unset,
19-
legacy-small-size-container-size: unset,
20-
small-size-container-size: 6px,
21-
container-padding: 0 4px,
22-
small-size-container-padding: 0,
2316
container-offset: -12px 0,
24-
small-size-container-offset: -6px 0,
2517
container-overlap-offset: -12px,
26-
small-size-container-overlap-offset: -6px,
27-
large-size-container-size: 16px,
18+
container-padding: 0 4px,
19+
container-shape: map.get($system, corner-full),
20+
container-size: 16px,
2821
large-size-container-offset: -12px 0,
2922
large-size-container-overlap-offset: -12px,
3023
large-size-container-padding: 0 4px,
24+
large-size-container-size: 16px,
25+
legacy-container-size: unset,
3126
legacy-large-size-container-size: unset,
27+
legacy-small-size-container-size: unset,
28+
small-size-container-offset: -6px 0,
29+
small-size-container-overlap-offset: -6px,
30+
small-size-container-padding: 0,
31+
small-size-container-size: 6px,
3232
),
3333
color: (
3434
background-color: map.get($system, error),
35-
text-color: map.get($system, on-error),
3635
disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
3736
disabled-state-text-color: map.get($system, on-error),
37+
text-color: map.get($system, on-error),
3838
),
3939
typography: (
40-
text-font: map.get($system, label-small-font),
41-
text-size: map.get($system, label-small-size),
42-
text-weight: map.get($system, label-small-weight),
40+
large-size-line-height: 16px,
4341
large-size-text-size: map.get($system, label-small-size),
44-
small-size-text-size: 0,
4542
line-height: 16px,
4643
small-size-line-height: 6px,
47-
large-size-line-height: 16px,
44+
small-size-text-size: 0,
45+
text-font: map.get($system, label-small-font),
46+
text-size: map.get($system, label-small-size),
47+
text-weight: map.get($system, label-small-weight),
4848
),
4949
density: (),
5050
);

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

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

1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
12-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
@include token-utils.create-token-values(
13+
m3-bottom-sheet.$prefix,
14+
map.get(m3-bottom-sheet.get-tokens($theme), base));
1315
} @else {
1416
@include sass-utils.current-selector-or-root() {
1517
@include token-utils.create-token-values-mixed(
@@ -22,7 +24,9 @@
2224

2325
@mixin color($theme) {
2426
@if inspection.get-theme-version($theme) == 1 {
25-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
27+
@include token-utils.create-token-values(
28+
m3-bottom-sheet.$prefix,
29+
map.get(m3-bottom-sheet.get-tokens($theme), color));
2630
} @else {
2731
@include sass-utils.current-selector-or-root() {
2832
@include token-utils.create-token-values-mixed(
@@ -35,7 +39,9 @@
3539

3640
@mixin typography($theme) {
3741
@if inspection.get-theme-version($theme) == 1 {
38-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
42+
@include token-utils.create-token-values(
43+
m3-bottom-sheet.$prefix,
44+
map.get(m3-bottom-sheet.get-tokens($theme), typography));
3945
} @else {
4046
@include sass-utils.current-selector-or-root() {
4147
@include token-utils.create-token-values-mixed(
@@ -48,7 +54,9 @@
4854

4955
@mixin density($theme) {
5056
@if inspection.get-theme-version($theme) == 1 {
51-
// There are no M3 density tokens for this component
57+
@include token-utils.create-token-values(
58+
m3-bottom-sheet.$prefix,
59+
map.get(m3-bottom-sheet.get-tokens($theme), density));
5260
} @else {
5361
}
5462
}
@@ -70,7 +78,10 @@
7078
@mixin theme($theme) {
7179
@include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
7280
@if inspection.get-theme-version($theme) == 1 {
73-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
81+
@include base($theme);
82+
@include color($theme);
83+
@include density($theme);
84+
@include typography($theme);
7485
} @else {
7586
@include base($theme);
7687
@if inspection.theme-has($theme, color) {
@@ -85,15 +96,3 @@
8596
}
8697
}
8798
}
88-
89-
@mixin _theme-from-tokens($tokens) {
90-
@include validation.selector-defined(
91-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
92-
);
93-
@if ($tokens != ()) {
94-
@include token-utils.create-token-values(
95-
m2-bottom-sheet.$prefix,
96-
map.get($tokens, m2-bottom-sheet.$prefix)
97-
);
98-
}
99-
}

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
@use 'sass:map';
2-
@use '../core/style/sass-utils';
32
@use '../core/tokens/m3-utils';
43

54
// The prefix used to generate the fully qualified name for tokens in this file.
65
$prefix: (mat, bottom-sheet);
76

87
/// Generates custom tokens for the mat-bottom-sheet.
9-
/// @param {Map} $systems The MDC system tokens
10-
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
11-
/// @param {Map} $token-slots Possible token slots
12-
/// @return {Map} A set of custom tokens for the mat-bottom-sheet
13-
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
14-
$tokens: sass-utils.merge-all(
15-
m3-utils.generate-typography-tokens($systems, container-text, body-large),
16-
(
17-
container-shape: m3-utils.hardcode(28px, $exclude-hardcoded),
18-
container-text-color: map.get($systems, md-sys-color, on-surface),
19-
container-background-color: map.get($systems, md-sys-color, surface-container-low),
8+
@function get-tokens($theme) {
9+
$system: m3-utils.get-system($theme);
10+
@return (
11+
base: (
12+
container-shape: 28px,
2013
),
14+
color: (
15+
container-text-color: map.get($system, on-surface),
16+
container-background-color: map.get($system, surface-container-low),
17+
),
18+
typography: (
19+
container-text-font: map.get($system, body-large-font),
20+
container-text-line-height: map.get($system, body-large-line-height),
21+
container-text-size: map.get($system, body-large-size),
22+
container-text-tracking: map.get($system, body-large-tracking),
23+
container-text-weight: map.get($system, body-large-weight),
24+
),
25+
density: (),
2126
);
22-
23-
@return m3-utils.namespace($prefix, $tokens, $token-slots);
2427
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@use '@angular/cdk';
22
@use '../core/style/elevation';
33
@use './m2-bottom-sheet';
4+
@use './m3-bottom-sheet';
45
@use '../core/tokens/token-utils';
6+
@use '../core/tokens/m3-system';
57

68
// The bottom sheet minimum width on larger screen sizes is based
79
// on increments of the toolbar, according to the spec. See:
@@ -12,6 +14,7 @@ $container-horizontal-padding: 16px !default;
1214

1315
$token-prefix: m2-bottom-sheet.$prefix;
1416
$token-slots: m2-bottom-sheet.get-token-slots();
17+
$fallbacks: m3-bottom-sheet.get-tokens(m3-system.$theme-with-system-vars);
1518

1619
@keyframes _mat-bottom-sheet-enter {
1720
from {
@@ -48,7 +51,7 @@ $token-slots: m2-bottom-sheet.get-token-slots();
4851
// elements (e.g. close buttons) inside the bottom sheet.
4952
position: relative;
5053

51-
@include token-utils.use-tokens($token-prefix, $token-slots) {
54+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
5255
background: token-utils.slot(container-background-color);
5356
color: token-utils.slot(container-text-color);
5457
font-family: token-utils.slot(container-text-font);
@@ -77,7 +80,7 @@ $token-slots: m2-bottom-sheet.get-token-slots();
7780

7881
// Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen.
7982
%_mat-bottom-sheet-container-border-radius {
80-
@include token-utils.use-tokens($token-prefix, $token-slots) {
83+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
8184
border-top-left-radius: token-utils.slot(container-shape);
8285
border-top-right-radius: token-utils.slot(container-shape);
8386
}

0 commit comments

Comments
 (0)