Skip to content

Commit ac62b42

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 sort support (#28105)
* feat(material-experimental/theming): add M3 tree support * feat(material-experimental/theming): add M3 tabs support * refactor(material-experimental/theming): Fix typo and adjust some colors * feat(material-experimental/theming): add M3 ripple support * feat(material-experimental/theming): add M3 table support * feat(material-experimental/theming): add M3 stepper support * feat(material-experimental/theming): add M3 sort support (cherry picked from commit eca4117)
1 parent cfded8c commit ac62b42

File tree

11 files changed

+698
-281
lines changed

11 files changed

+698
-281
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,17 @@ html {
4141
@include mat.progress-bar-theme($light-theme);
4242
@include mat.progress-spinner-theme($light-theme);
4343
@include mat.radio-theme($light-theme);
44+
@include mat.ripple-theme($light-theme);
4445
@include mat.slide-toggle-theme($light-theme);
4546
@include mat.slider-theme($light-theme);
4647
@include mat.snack-bar-theme($light-theme);
48+
@include mat.sort-theme($light-theme);
49+
@include mat.stepper-theme($light-theme);
50+
@include mat.table-theme($light-theme);
51+
@include mat.tabs-theme($light-theme);
4752
@include mat.toolbar-theme($light-theme);
4853
@include mat.tooltip-theme($light-theme);
54+
@include mat.tree-theme($light-theme);
4955
}
5056

5157
// Emit dark theme styles.
@@ -59,11 +65,17 @@ html {
5965
@include mat.progress-bar-color($dark-theme);
6066
@include mat.progress-spinner-color($dark-theme);
6167
@include mat.radio-color($dark-theme);
68+
@include mat.ripple-color($dark-theme);
6269
@include mat.slide-toggle-color($dark-theme);
6370
@include mat.slider-color($dark-theme);
6471
@include mat.snack-bar-color($dark-theme);
72+
@include mat.sort-color($dark-theme);
73+
@include mat.stepper-color($dark-theme);
74+
@include mat.table-color($dark-theme);
75+
@include mat.tabs-color($dark-theme);
6576
@include mat.toolbar-color($dark-theme);
6677
@include mat.tooltip-color($dark-theme);
78+
@include mat.tree-color($dark-theme);
6779
}
6880

6981
// Emit density styles for each scale.
@@ -79,7 +91,12 @@ html {
7991
@include mat.slide-toggle-density($scale-theme);
8092
@include mat.slider-density($scale-theme);
8193
@include mat.snack-bar-density($scale-theme);
94+
@include mat.sort-density($scale-theme);
95+
@include mat.stepper-density($scale-theme);
96+
@include mat.table-density($scale-theme);
97+
@include mat.tabs-density($scale-theme);
8298
@include mat.toolbar-density($scale-theme);
8399
@include mat.tooltip-density($scale-theme);
100+
@include mat.tree-density($scale-theme);
84101
}
85102
}

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 144 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
@use 'sass:map';
22
@use '@angular/material' as mat;
33

4+
/// Hardcode the given value, or null if hardcoded values are excluded.
5+
@function _hardcode($value, $exclude-hardcoded) {
6+
@return if($exclude-hardcoded, null, $value);
7+
}
8+
49
/// Sets all of the standard typography tokens for the given token base name to the given typography
510
/// level.
611
/// @param {Map} $systems The MDC system tokens
@@ -22,11 +27,11 @@
2227
/// @return {Map} A set of custom tokens for the mat-card
2328
@function card($systems, $exclude-hardcoded) {
2429
@return mat.private-merge-all(
25-
_generate-typography-tokens($systems, title-text, title-large),
26-
_generate-typography-tokens($systems, subtitle-text, title-medium),
27-
(
28-
subtitle-text-color: map.get($systems, md-sys-color, on-surface)
29-
)
30+
_generate-typography-tokens($systems, title-text, title-large),
31+
_generate-typography-tokens($systems, subtitle-text, title-medium),
32+
(
33+
subtitle-text-color: map.get($systems, md-sys-color, on-surface)
34+
)
3035
);
3136
}
3237

@@ -36,11 +41,11 @@
3641
/// @return {Map} A set of custom tokens for the mat-toolbar
3742
@function toolbar($systems, $exclude-hardcoded) {
3843
@return mat.private-merge-all(
39-
_generate-typography-tokens($systems, title-text, title-large),
40-
(
41-
container-background-color: map.get($systems, md-sys-color, surface),
42-
container-text-color: map.get($systems, md-sys-color, on-surface),
43-
)
44+
_generate-typography-tokens($systems, title-text, title-large),
45+
(
46+
container-background-color: map.get($systems, md-sys-color, surface),
47+
container-text-color: map.get($systems, md-sys-color, on-surface),
48+
)
4449
);
4550
}
4651

@@ -58,7 +63,7 @@
5863
/// @return {Map} A set of custom tokens for the mat-slider
5964
@function slider($systems, $exclude-hardcoded) {
6065
@return (
61-
value-indicator-opacity: 1,
66+
value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
6267
);
6368
}
6469

@@ -83,3 +88,131 @@
8388
disabled-label-color: map.get($systems, md-sys-color, on-surface),
8489
);
8590
}
91+
92+
/// Generates custom tokens for the mat-ripple.
93+
/// @param {Map} $systems The MDC system tokens
94+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
95+
/// @return {Map} A set of custom tokens for the mat-ripple
96+
@function ripple($systems, $exclude-hardcoded) {
97+
@return (
98+
color: mat.private-safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1),
99+
);
100+
}
101+
102+
/// Generates custom tokens for the mat-sort.
103+
/// @param {Map} $systems The MDC system tokens
104+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
105+
/// @return {Map} A set of custom tokens for the mat-sort
106+
@function sort($systems, $exclude-hardcoded) {
107+
@return (
108+
arrow-color: map.get($systems, md-sys-color, on-surface),
109+
);
110+
}
111+
112+
/// Generates custom tokens for the mat-stepper.
113+
/// @param {Map} $systems The MDC system tokens
114+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
115+
/// @return {Map} A set of custom tokens for the mat-stepper
116+
@function stepper($systems, $exclude-hardcoded) {
117+
@return mat.private-merge-all(
118+
(
119+
container-color: map.get($systems, md-sys-color, surface),
120+
line-color: map.get($systems, md-sys-color, outline-variant),
121+
header-hover-state-layer-color: mat.private-safe-color-change(
122+
map.get($systems, md-sys-color, inverse-surface),
123+
$alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
124+
),
125+
header-focus-state-layer-color: mat.private-safe-color-change(
126+
map.get($systems, md-sys-color, inverse-surface),
127+
$alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
128+
),
129+
header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
130+
header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
131+
header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface),
132+
header-icon-background-color: map.get($systems, md-sys-color, inverse-surface),
133+
header-icon-foreground-color: map.get($systems, md-sys-color, inverse-on-surface),
134+
header-error-state-label-text-color: map.get($systems, md-sys-color, error),
135+
header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
136+
header-error-state-icon-background-color: _hardcode(transparent, $exclude-hardcoded),
137+
container-text-font: map.get($systems, md-sys-typescale, body-medium-font),
138+
header-label-text-font: map.get($systems, md-sys-typescale, title-small-font),
139+
header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
140+
header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
141+
header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
142+
header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-szie),
143+
header-selected-state-label-text-weight: map.get(
144+
$systems, md-sys-typescale, title-small-weight),
145+
),
146+
);
147+
}
148+
149+
/// Generates custom tokens for the mat-tab-header.
150+
/// @param {Map} $systems The MDC system tokens
151+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
152+
/// @return {Map} A set of custom tokens for the mat-tab-header
153+
@function tab-header($systems, $exclude-hardcoded) {
154+
@return mat.private-merge-all(
155+
_generate-typography-tokens($systems, label-text, title-small),
156+
(
157+
disabled-ripple-color: blue, // TODO(mmalerba): Figure out correct value.
158+
pagination-icon-color: map.get($systems, md-sys-color, on-surface),
159+
inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
160+
active-label-text-color: map.get($systems, md-sys-color, on-surface),
161+
active-ripple-color: map.get($systems, md-sys-color, on-surface),
162+
inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
163+
inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
164+
inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
165+
active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
166+
active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
167+
active-focus-indicator-color: map.get($systems, md-sys-color, primary),
168+
active-hover-indicator-color: map.get($systems, md-sys-color, primary),
169+
),
170+
);
171+
}
172+
173+
/// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator component, but they
174+
/// seem to have made up the tokens rather than using ones generated from the token database,
175+
/// therefore we need a custom token function for it).
176+
/// @param {Map} $systems The MDC system tokens
177+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
178+
/// @return {Map} A set of custom tokens for the mdc-tab-indicator
179+
@function tab-indicator($systems, $exclude-hardcoded) {
180+
@return (
181+
active-indicator-height: _hardcode(2px, $exclude-hardcoded),
182+
active-indicator-shape: _hardcode(0, $exclude-hardcoded),
183+
active-indicator-color: map.get($systems, md-sys-color, primary),
184+
);
185+
}
186+
187+
/// Generates custom tokens for the mat-table.
188+
/// @param {Map} $systems The MDC system tokens
189+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
190+
/// @return {Map} A set of custom tokens for the mat-table
191+
@function table($systems, $exclude-hardcoded) {
192+
@return mat.private-merge-all(
193+
_generate-typography-tokens($systems, header-headline, title-small),
194+
_generate-typography-tokens($systems, row-item-label-text, body-medium),
195+
_generate-typography-tokens($systems, footer-supporting-text, body-medium),
196+
(
197+
row-item-outline-width: _hardcode(1px, $exclude-hardcoded),
198+
background-color: map.get($systems, md-sys-color, surface),
199+
header-headline-color: map.get($systems, md-sys-color, on-surface),
200+
row-item-label-text-color: map.get($systems, md-sys-color, on-surface),
201+
row-item-outline-color: map.get($systems, md-sys-color, outline-variant),
202+
),
203+
);
204+
}
205+
206+
/// Generates custom tokens for the mat-tree.
207+
/// @param {Map} $systems The MDC system tokens
208+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
209+
/// @return {Map} A set of custom tokens for the mat-tree
210+
@function tree($systems, $exclude-hardcoded) {
211+
@return (
212+
container-background-color: map.get($systems, md-sys-color, surface),
213+
node-text-color: map.get($systems, md-sys-color, on-surface),
214+
node-text-font: map.get($systems, md-sys-typescale, body-large-font),
215+
node-text-size: map.get($systems, md-sys-typescale, body-large-size),
216+
node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
217+
);
218+
}

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,49 @@
1616
// TODO(mmalerba): Add density tokens for remaining components.
1717
$_density-tokens: (
1818
// MDC tokens
19-
(mdc, checkbox): (
19+
(mdc, checkbox): (
2020
state-layer-size: (40px, 36px, 32px, 28px),
2121
),
22-
(mdc, elevated-card): (),
23-
(mdc, outlined-card): (),
24-
(mdc, slider): (),
25-
(mdc, snackbar): (),
26-
(mdc, plain-tooltip): (),
27-
(mdc, circular-progress): (),
28-
(mdc, radio): (
22+
(mdc, elevated-card): (),
23+
(mdc, outlined-card): (),
24+
(mdc, slider): (),
25+
(mdc, snackbar): (),
26+
(mdc, plain-tooltip): (),
27+
(mdc, circular-progress): (),
28+
(mdc, radio): (
2929
state-layer-size: (40px, 36px, 32px, 28px),
3030
),
31-
(mdc, linear-progress): (),
32-
(mdc, switch): (),
31+
(mdc, linear-progress): (),
32+
(mdc, switch): (),
33+
(mdc, tab): (
34+
container-height: (48px, 44px, 40px, 36px, 32px)
35+
),
36+
(mdc, tab-indicator): (),
37+
3338
// Custom Angular Material tokens
34-
(mat, card): (),
35-
(mat, toolbar): (
39+
(mat, card): (),
40+
(mat, toolbar): (
3641
standard-height: (64px, 60px, 56px, 52px),
3742
mobile-height: (56px, 52px, 48px, 44px),
3843
),
39-
(mat, slider): (),
40-
(mat, snack-bar): (),
41-
(mat, radio): (),
42-
(mat, slide-toggle): (),
44+
(mat, slider): (),
45+
(mat, snack-bar): (),
46+
(mat, radio): (),
47+
(mat, ripple): (),
48+
(mat, slide-toggle): (),
49+
(mat, sort): (),
50+
(mat, stepper): (
51+
header-height: (72px, 68px, 64px, 60px, 42px),
52+
),
53+
(mat, tab-header): (),
54+
(mat, table): (
55+
header-container-height: (56px, 52px, 48px, 44px, 40px),
56+
footer-container-height: (52px, 48px, 44px, 40px, 36px),
57+
row-item-container-height: (52px, 48px, 44px, 40px, 36px),
58+
),
59+
(mat, tree): (
60+
node-min-height: (48px, 44px, 40px, 36px, 28px),
61+
),
4362
);
4463

4564
/// Gets the value for the given density scale from the given set of density values.

0 commit comments

Comments
 (0)