Skip to content

Commit 8768d99

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 list support
1 parent 13629b0 commit 8768d99

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
@@ -38,6 +38,7 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
3838
html {
3939
@include mat.card-theme($light-theme);
4040
@include mat.checkbox-theme($light-theme);
41+
@include mat.list-theme($light-theme);
4142
@include mat.progress-bar-theme($light-theme);
4243
@include mat.progress-spinner-theme($light-theme);
4344
@include mat.radio-theme($light-theme);
@@ -62,6 +63,7 @@ html {
6263

6364
@include mat.card-color($dark-theme);
6465
@include mat.checkbox-color($dark-theme);
66+
@include mat.list-color($dark-theme);
6567
@include mat.progress-bar-color($dark-theme);
6668
@include mat.progress-spinner-color($dark-theme);
6769
@include mat.radio-color($dark-theme);
@@ -85,6 +87,7 @@ html {
8587
.demo-density-#{$scale} {
8688
@include mat.card-density($scale-theme);
8789
@include mat.checkbox-density($scale-theme);
90+
@include mat.list-density($scale-theme);
8891
@include mat.progress-bar-density($scale-theme);
8992
@include mat.progress-spinner-density($scale-theme);
9093
@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
@@ -29,6 +29,11 @@ $_density-tokens: (
2929
state-layer-size: (40px, 36px, 32px, 28px),
3030
),
3131
(mdc, linear-progress): (),
32+
(mdc, list): (
33+
list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
34+
list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
35+
list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
36+
),
3237
(mdc, switch): (),
3338
(mdc, tab): (
3439
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
@@ -183,6 +183,11 @@
183183
mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
184184
$token-slots
185185
),
186+
_namespace-tokens(
187+
(mdc, list),
188+
mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
189+
$token-slots
190+
),
186191
_namespace-tokens(
187192
(mdc, outlined-card),
188193
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)