Skip to content

Commit cf6ab1c

Browse files
mmalerbammalerba
authored
feat(material-experimental/theming): add M3 expansion support (#28159)
1 parent e0414b1 commit cf6ab1c

File tree

6 files changed

+100
-22
lines changed

6 files changed

+100
-22
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ html {
3939
@include mat.card-theme($light-theme);
4040
@include mat.checkbox-theme($light-theme);
4141
@include mat.divider-theme($light-theme);
42+
@include mat.expansion-theme($light-theme);
4243
@include mat.fab-theme($light-theme);
4344
@include mat.form-field-theme($light-theme);
4445
@include mat.grid-list-theme($light-theme);
@@ -76,6 +77,7 @@ html {
7677
@include mat.card-color($dark-theme);
7778
@include mat.checkbox-color($dark-theme);
7879
@include mat.divider-color($dark-theme);
80+
@include mat.expansion-color($dark-theme);
7981
@include mat.fab-color($dark-theme);
8082
@include mat.form-field-color($dark-theme);
8183
@include mat.grid-list-color($dark-theme);
@@ -112,6 +114,7 @@ html {
112114
@include mat.card-density($scale-theme);
113115
@include mat.checkbox-density($scale-theme);
114116
@include mat.divider-density($scale-theme);
117+
@include mat.expansion-density($scale-theme);
115118
@include mat.fab-density($scale-theme);
116119
@include mat.form-field-density($scale-theme);
117120
@include mat.grid-list-density($scale-theme);

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,36 @@
4646
);
4747
}
4848

49+
/// Generates custom tokens for the mat-expansion.
50+
/// @param {Map} $systems The MDC system tokens
51+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
52+
/// @return {Map} A set of custom tokens for the mat-expansion
53+
@function expansion($systems, $exclude-hardcoded) {
54+
@return mat.private-merge-all(
55+
_generate-typography-tokens($systems, header-text, title-medium),
56+
_generate-typography-tokens($systems, container-text, body-large),
57+
(
58+
container-shape: _hardcode(12px, $exclude-hardcoded),
59+
container-background-color: map.get($systems, md-sys-color, surface),
60+
container-text-color: map.get($systems, md-sys-color, on-surface),
61+
actions-divider-color: map.get($systems, md-sys-color, outline-variant),
62+
header-hover-state-layer-color: mat.private-safe-color-change(
63+
map.get($systems, md-sys-color, on-surface),
64+
$alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
65+
),
66+
header-focus-state-layer-color: mat.private-safe-color-change(
67+
map.get($systems, md-sys-color, on-surface),
68+
$alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
69+
),
70+
header-disabled-state-text-color: mat.private-safe-color-change(
71+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
72+
header-text-color: map.get($systems, md-sys-color, on-surface),
73+
header-description-color: map.get($systems, md-sys-color, on-surface-variant),
74+
header-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
75+
)
76+
);
77+
}
78+
4979
/// Generates custom tokens for the mat-fab.
5080
/// @param {Map} $systems The MDC system tokens
5181
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ $_density-tokens: (
5050
// Custom Angular Material tokens
5151
(mat, card): (),
5252
(mat, divider): (),
53+
(mat, expansion): (
54+
header-collapsed-state-height: (48px, 44px, 40px, 36px),
55+
header-expanded-state-height: (64px, 60px, 56px, 48px),
56+
),
5357
(mat, fab): (),
5458
(mat, form-fild): (),
5559
(mat, grid-list): (),

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,11 @@
285285
custom-tokens.form-field($systems, $exclude-hardcoded),
286286
$token-slots
287287
),
288+
_namespace-tokens(
289+
(mat, expansion),
290+
custom-tokens.expansion($systems, $exclude-hardcoded),
291+
$token-slots
292+
),
288293
_namespace-tokens(
289294
(mat, grid-list),
290295
custom-tokens.grid-list($systems, $exclude-hardcoded),

‎src/material/core/tokens/m2/_index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '../../style/sass-utils';
44
@use './mat/card' as tokens-mat-card;
55
@use './mat/divider' as tokens-mat-divider;
6+
@use './mat/expansion' as tokens-mat-expansion;
67
@use './mat/fab' as tokens-mat-fab;
78
@use './mat/form-field' as tokens-mat-form-field;
89
@use './mat/grid-list' as tokens-mat-grid-list;
@@ -90,6 +91,7 @@
9091
@return sass-utils.deep-merge-all(
9192
_get-tokens-for-module($theme, tokens-mat-card),
9293
_get-tokens-for-module($theme, tokens-mat-divider),
94+
_get-tokens-for-module($theme, tokens-mat-expansion),
9395
_get-tokens-for-module($theme, tokens-mat-fab),
9496
_get-tokens-for-module($theme, tokens-mat-form-field),
9597
_get-tokens-for-module($theme, tokens-mat-grid-list),

‎src/material/expansion/_expansion-theme.scss

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '../core/theming/theming';
23
@use '../core/theming/inspection';
34
@use '../core/typography/typography';
@@ -6,47 +7,80 @@
67
@use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion;
78

89
@mixin base($theme) {
9-
@include sass-utils.current-selector-or-root() {
10-
@include token-utils.create-token-values(
11-
tokens-mat-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens());
10+
@if inspection.get-theme-version($theme) == 1 {
11+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
}
13+
@else {
14+
@include sass-utils.current-selector-or-root() {
15+
@include token-utils.create-token-values(
16+
tokens-mat-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens());
17+
}
1218
}
1319
}
1420

1521
@mixin color($theme) {
16-
@include sass-utils.current-selector-or-root() {
17-
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
18-
tokens-mat-expansion.get-color-tokens($theme));
22+
@if inspection.get-theme-version($theme) == 1 {
23+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
24+
}
25+
@else {
26+
@include sass-utils.current-selector-or-root() {
27+
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
28+
tokens-mat-expansion.get-color-tokens($theme));
29+
}
1930
}
2031
}
2132

2233
@mixin typography($theme) {
23-
// TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
24-
$theme: inspection.private-get-typography-back-compat-theme($theme);
34+
@if inspection.get-theme-version($theme) == 1 {
35+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
36+
}
37+
@else {
38+
// TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
39+
$theme: inspection.private-get-typography-back-compat-theme($theme);
2540

26-
@include sass-utils.current-selector-or-root() {
27-
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
28-
tokens-mat-expansion.get-typography-tokens($theme));
41+
@include sass-utils.current-selector-or-root() {
42+
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
43+
tokens-mat-expansion.get-typography-tokens($theme));
44+
}
2945
}
3046
}
3147

3248
@mixin density($theme) {
33-
@include sass-utils.current-selector-or-root() {
34-
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
35-
tokens-mat-expansion.get-density-tokens($theme));
49+
@if inspection.get-theme-version($theme) == 1 {
50+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
51+
}
52+
@else {
53+
@include sass-utils.current-selector-or-root() {
54+
@include token-utils.create-token-values(tokens-mat-expansion.$prefix,
55+
tokens-mat-expansion.get-density-tokens($theme));
56+
}
3657
}
3758
}
3859

3960
@mixin theme($theme) {
4061
@include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {
41-
@include base($theme);
42-
@if inspection.theme-has($theme, color) {
43-
@include color($theme);
44-
}
45-
@if inspection.theme-has($theme, density) {
46-
@include density($theme);
62+
@if inspection.get-theme-version($theme) == 1 {
63+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
4764
}
48-
@if inspection.theme-has($theme, typography) {
49-
@include typography($theme);
65+
@else {
66+
@include base($theme);
67+
@if inspection.theme-has($theme, color) {
68+
@include color($theme);
69+
}
70+
@if inspection.theme-has($theme, density) {
71+
@include density($theme);
72+
}
73+
@if inspection.theme-has($theme, typography) {
74+
@include typography($theme);
75+
}
5076
}
5177
}
5278
}
79+
80+
81+
@mixin _theme-from-tokens($tokens) {
82+
@if ($tokens != ()) {
83+
@include token-utils.create-token-values(
84+
tokens-mat-expansion.$prefix, map.get($tokens, tokens-mat-expansion.$prefix));
85+
}
86+
}

0 commit comments

Comments
 (0)