Skip to content

Commit 365789b

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 list support (#28122)
(cherry picked from commit d7b4543)
1 parent c5e4766 commit 365789b

File tree

4 files changed

+128
-83
lines changed

4 files changed

+128
-83
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ html {
4040
@include mat.checkbox-theme($light-theme);
4141
@include mat.form-field-theme($light-theme);
4242
@include mat.input-theme($light-theme);
43+
@include mat.list-theme($light-theme);
4344
@include mat.progress-bar-theme($light-theme);
4445
@include mat.progress-spinner-theme($light-theme);
4546
@include mat.radio-theme($light-theme);
@@ -66,6 +67,7 @@ html {
6667
@include mat.checkbox-color($dark-theme);
6768
@include mat.form-field-color($dark-theme);
6869
@include mat.input-color($dark-theme);
70+
@include mat.list-color($dark-theme);
6971
@include mat.progress-bar-color($dark-theme);
7072
@include mat.progress-spinner-color($dark-theme);
7173
@include mat.radio-color($dark-theme);
@@ -91,6 +93,7 @@ html {
9193
@include mat.checkbox-density($scale-theme);
9294
@include mat.form-field-density($scale-theme);
9395
@include mat.input-density($scale-theme);
96+
@include mat.list-density($scale-theme);
9497
@include mat.progress-bar-density($scale-theme);
9598
@include mat.progress-spinner-density($scale-theme);
9699
@include mat.radio-density($scale-theme);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ $_density-tokens: (
3131
state-layer-size: (40px, 36px, 32px, 28px),
3232
),
3333
(mdc, linear-progress): (),
34+
(mdc, list): (
35+
list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
36+
list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
37+
list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
38+
),
3439
(mdc, switch): (),
3540
(mdc, tab): (
3641
container-height: (48px, 44px, 40px, 36px, 32px)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,11 @@
187187
mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
188188
$token-slots
189189
),
190+
_namespace-tokens(
191+
(mdc, list),
192+
mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
193+
$token-slots
194+
),
190195
_namespace-tokens(
191196
(mdc, outlined-card),
192197
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),

‎src/material/list/_list-theme.scss

Lines changed: 115 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -14,139 +14,171 @@
1414

1515
@mixin base($theme) {
1616
// Add default values for tokens not related to color, typography, or density.
17-
@include sass-utils.current-selector-or-root() {
18-
@include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
17+
@if inspection.get-theme-version($theme) == 1 {
18+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
19+
}
20+
@else {
21+
@include sass-utils.current-selector-or-root() {
22+
@include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
23+
}
1924
}
2025
}
2126

2227
@mixin color($theme) {
23-
$mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);
24-
25-
// Add values for MDC list tokens.
26-
@include sass-utils.current-selector-or-root() {
27-
@include mdc-list-theme.theme($mdc-list-color-tokens);
28+
@if inspection.get-theme-version($theme) == 1 {
29+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
2830
}
31+
@else {
32+
$mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);
2933

30-
.mdc-list-item__start,
31-
.mdc-list-item__end {
32-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
33-
}
34+
// Add values for MDC list tokens.
35+
@include sass-utils.current-selector-or-root() {
36+
@include mdc-list-theme.theme($mdc-list-color-tokens);
37+
}
3438

35-
.mat-accent {
3639
.mdc-list-item__start,
3740
.mdc-list-item__end {
38-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
41+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
3942
}
40-
}
4143

42-
.mat-warn {
43-
.mdc-list-item__start,
44-
.mdc-list-item__end {
45-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
44+
.mat-accent {
45+
.mdc-list-item__start,
46+
.mdc-list-item__end {
47+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
48+
}
4649
}
47-
}
4850

49-
.mat-mdc-list-option {
50-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
51-
}
52-
.mat-mdc-list-option.mat-accent {
53-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
54-
}
55-
.mat-mdc-list-option.mat-warn {
56-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
57-
}
51+
.mat-warn {
52+
.mdc-list-item__start,
53+
.mdc-list-item__end {
54+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
55+
}
56+
}
5857

59-
// There is no token for activated color on nav list.
60-
// TODO(mmalerba): Add a token to MDC or make a custom one.
61-
.mat-mdc-list-base.mat-mdc-list-base {
62-
@include evolution-mixins.list-selected-ink-color(inspection.get-theme-color($theme, primary));
63-
}
58+
.mat-mdc-list-option {
59+
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
60+
}
61+
.mat-mdc-list-option.mat-accent {
62+
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
63+
}
64+
.mat-mdc-list-option.mat-warn {
65+
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
66+
}
6467

65-
// TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can cause
66-
// opacity issues, so we need this override for now. We can remove it when all Angular Material
67-
// components stop using the old MDC mixins.
68-
.mat-mdc-list-base .mdc-list-item--disabled {
69-
.mdc-list-item__start,
70-
.mdc-list-item__content,
71-
.mdc-list-item__end {
72-
opacity: 1;
68+
// There is no token for activated color on nav list.
69+
// TODO(mmalerba): Add a token to MDC or make a custom one.
70+
.mat-mdc-list-base.mat-mdc-list-base {
71+
@include evolution-mixins.list-selected-ink-color(
72+
inspection.get-theme-color($theme, primary));
73+
}
74+
75+
// TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can
76+
// cause opacity issues, so we need this override for now. We can remove it when all
77+
// Angular Material components stop using the old MDC mixins.
78+
.mat-mdc-list-base .mdc-list-item--disabled {
79+
.mdc-list-item__start,
80+
.mdc-list-item__content,
81+
.mdc-list-item__end {
82+
opacity: 1;
83+
}
7384
}
7485
}
7586
}
7687

7788
@mixin density($theme) {
78-
$density-scale: inspection.get-theme-density($theme);
79-
$mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);
80-
81-
// Add values for MDC list tokens.
82-
@include sass-utils.current-selector-or-root() {
83-
@include mdc-list-theme.theme($mdc-list-density-tokens);
89+
@if inspection.get-theme-version($theme) == 1 {
90+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
8491
}
92+
@else {
93+
$density-scale: inspection.get-theme-density($theme);
94+
$mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);
8595

86-
.mdc-list-item__start,
87-
.mdc-list-item__end {
88-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
89-
}
96+
// Add values for MDC list tokens.
97+
@include sass-utils.current-selector-or-root() {
98+
@include mdc-list-theme.theme($mdc-list-density-tokens);
99+
}
90100

91-
// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based API,
92-
// to avoid screenshot diffs. We should remove it in favor of following MDC's current style, or
93-
// add custom tokens for it.
94-
.mat-mdc-list-item {
95-
&.mdc-list-item--with-leading-avatar,
96-
&.mdc-list-item--with-leading-checkbox,
97-
&.mdc-list-item--with-leading-icon {
98-
&.mdc-list-item--with-one-line {
99-
height: map.get((
101+
.mdc-list-item__start,
102+
.mdc-list-item__end {
103+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
104+
}
105+
106+
// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
107+
// API, to avoid screenshot diffs. We should remove it in favor of following MDC's current
108+
// style, or add custom tokens for it.
109+
.mat-mdc-list-item {
110+
&.mdc-list-item--with-leading-avatar,
111+
&.mdc-list-item--with-leading-checkbox,
112+
&.mdc-list-item--with-leading-icon {
113+
&.mdc-list-item--with-one-line {
114+
height: map.get((
100115
0: 56px,
101116
-1: 52px,
102117
-2: 48px,
103118
-3: 44px,
104119
-4: 40px,
105120
-5: 40px,
106-
), $density-scale);
107-
}
121+
), $density-scale);
122+
}
108123

109-
&.mdc-list-item--with-two-lines {
110-
height: map.get((
124+
&.mdc-list-item--with-two-lines {
125+
height: map.get((
111126
0: 72px,
112127
-1: 68px,
113128
-2: 64px,
114129
-3: 60px,
115130
-4: 56px,
116131
-5: 56px,
117-
), $density-scale);
132+
), $density-scale);
133+
}
118134
}
119135
}
120136
}
121137
}
122138

123139
@mixin typography($theme) {
124-
$mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);
125-
126-
// Add values for MDC list tokens.
127-
@include sass-utils.current-selector-or-root() {
128-
@include mdc-list-theme.theme($mdc-list-typography-tokens);
140+
@if inspection.get-theme-version($theme) == 1 {
141+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
129142
}
143+
@else {
144+
$mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);
130145

131-
// MDC does not have tokens for the subheader.
132-
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
133-
.mdc-list-group__subheader {
134-
font: inspection.get-theme-typography($theme, subtitle-1, font);
135-
letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
146+
// Add values for MDC list tokens.
147+
@include sass-utils.current-selector-or-root() {
148+
@include mdc-list-theme.theme($mdc-list-typography-tokens);
149+
}
150+
151+
// MDC does not have tokens for the subheader.
152+
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
153+
.mdc-list-group__subheader {
154+
font: inspection.get-theme-typography($theme, subtitle-1, font);
155+
letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
156+
}
136157
}
137158
}
138159

139160
@mixin theme($theme) {
140161
@include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {
141-
@include base($theme);
142-
@if inspection.theme-has($theme, color) {
143-
@include color($theme);
162+
@if inspection.get-theme-version($theme) == 1 {
163+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
144164
}
145-
@if inspection.theme-has($theme, density) {
146-
@include density($theme);
147-
}
148-
@if inspection.theme-has($theme, typography) {
149-
@include typography($theme);
165+
@else {
166+
@include base($theme);
167+
@if inspection.theme-has($theme, color) {
168+
@include color($theme);
169+
}
170+
@if inspection.theme-has($theme, density) {
171+
@include density($theme);
172+
}
173+
@if inspection.theme-has($theme, typography) {
174+
@include typography($theme);
175+
}
150176
}
151177
}
152178
}
179+
180+
@mixin _theme-from-tokens($tokens) {
181+
@if ($tokens != ()) {
182+
@include mdc-list-theme.theme(map.get($tokens, tokens-mdc-list.$prefix));
183+
}
184+
}

0 commit comments

Comments
 (0)