Skip to content

Commit af0d082

Browse files
andrewseguinandrewseguin
committed
fix(material/list): remove custom m2 theme styles
1 parent 50b8270 commit af0d082

File tree

4 files changed

+34
-102
lines changed

4 files changed

+34
-102
lines changed

‎src/material/list/_list-inherited-structure.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,14 @@ $fallbacks: m3-list.get-tokens();
8484
}
8585
}
8686

87+
&.mdc-list-item--selected.mdc-list-item--selected,
88+
&.mdc-list-item--activated.mdc-list-item--activated {
89+
.mdc-list-item__primary-text,
90+
.mdc-list-item__start {
91+
color: token-utils.slot(list-list-item-selected-label-text-color, $fallbacks);
92+
}
93+
}
94+
8795
// Not used in Material, but some internal tests seem to depend on it.
8896
&.mdc-list-item--selected::before,
8997
&.mdc-list-item--selected:focus::before,
@@ -443,6 +451,11 @@ $fallbacks: m3-list.get-tokens();
443451

444452
.mdc-list-group__subheader {
445453
margin: 0.75rem 16px;
454+
font-family: token-utils.slot(list-list-item-subheader-text-font, $fallbacks);
455+
line-height: token-utils.slot(list-list-item-subheader-text-line-height, $fallbacks);
456+
font-size: token-utils.slot(list-list-item-subheader-text-size, $fallbacks);
457+
font-weight: token-utils.slot(list-list-item-subheader-text-weight, $fallbacks);
458+
letter-spacing: token-utils.slot(list-list-item-subheader-text-tracking, $fallbacks);
446459
}
447460

448461
.mdc-list-item--disabled {

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

Lines changed: 9 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
@use '../radio/m2-radio';
99
@use './m2-list';
1010
@use './m3-list';
11-
@use '../core/tokens/m2-utils';
1211

1312
@mixin base($theme) {
1413
$tokens: m2-list.get-unthemable-tokens();
@@ -28,63 +27,18 @@
2827
@include token-utils.values($tokens);
2928

3029
@if inspection.get-theme-version($theme) != 1 {
31-
.mdc-list-item__start,
32-
.mdc-list-item__end {
33-
$tokens: m2-radio.get-color-tokens($theme, primary);
34-
@include token-utils.values($tokens);
35-
}
30+
.mat-mdc-selection-list {
31+
@include token-utils.values(m2-radio.get-color-tokens($theme, primary));
32+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, primary));
3633

37-
.mat-accent {
38-
.mdc-list-item__start,
39-
.mdc-list-item__end {
40-
$tokens: m2-radio.get-color-tokens($theme, secondary);
41-
@include token-utils.values($tokens);
34+
.mat-accent {
35+
@include token-utils.values(m2-radio.get-color-tokens($theme, secondary));
36+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, secondary));
4237
}
43-
}
4438

45-
.mat-warn {
46-
.mdc-list-item__start,
47-
.mdc-list-item__end {
48-
$tokens: m2-radio.get-color-tokens($theme, error);
49-
@include token-utils.values($tokens);
50-
}
51-
}
52-
53-
.mat-mdc-list-option {
54-
$tokens: m2-checkbox.get-color-tokens($theme, primary);
55-
@include token-utils.values($tokens);
56-
}
57-
58-
.mat-mdc-list-option.mat-accent {
59-
$tokens: m2-checkbox.get-color-tokens($theme, secondary);
60-
@include token-utils.values($tokens);
61-
}
62-
63-
.mat-mdc-list-option.mat-warn {
64-
$tokens: m2-checkbox.get-color-tokens($theme, error);
65-
@include token-utils.values($tokens);
66-
}
67-
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-
.mdc-list-item--selected,
72-
.mdc-list-item--activated {
73-
.mdc-list-item__primary-text,
74-
.mdc-list-item__start {
75-
color: inspection.get-theme-color($theme, primary);
76-
}
77-
}
78-
}
79-
80-
// TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can
81-
// cause opacity issues, so we need this override for now. We can remove it when all
82-
// Angular Material components stop using the old MDC mixins.
83-
.mat-mdc-list-base .mdc-list-item--disabled {
84-
.mdc-list-item__start,
85-
.mdc-list-item__content,
86-
.mdc-list-item__end {
87-
opacity: 1;
39+
.mat-warn {
40+
@include token-utils.values(m2-radio.get-color-tokens($theme, error));
41+
@include token-utils.values(m2-checkbox.get-color-tokens($theme, error));
8842
}
8943
}
9044
}
@@ -106,43 +60,6 @@
10660
$tokens: m2-radio.get-density-tokens($theme);
10761
@include token-utils.values($tokens);
10862
}
109-
110-
// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
111-
// API, to avoid screenshot diffs. We should remove it in favor of following MDC's current
112-
// style, or add custom tokens for it.
113-
.mat-mdc-list-item {
114-
&.mdc-list-item--with-leading-avatar,
115-
&.mdc-list-item--with-leading-checkbox,
116-
&.mdc-list-item--with-leading-icon {
117-
&.mdc-list-item--with-one-line {
118-
height: map.get(
119-
(
120-
0: 56px,
121-
-1: 52px,
122-
-2: 48px,
123-
-3: 44px,
124-
-4: 40px,
125-
-5: 40px,
126-
),
127-
$density-scale
128-
);
129-
}
130-
131-
&.mdc-list-item--with-two-lines {
132-
height: map.get(
133-
(
134-
0: 72px,
135-
-1: 68px,
136-
-2: 64px,
137-
-3: 60px,
138-
-4: 56px,
139-
-5: 56px,
140-
),
141-
$density-scale
142-
);
143-
}
144-
}
145-
}
14663
}
14764
}
14865

@@ -153,16 +70,6 @@
15370
}
15471

15572
@include token-utils.values($tokens);
156-
157-
@if inspection.get-theme-version($theme) != 1 {
158-
// MDC does not have tokens for the subheader.
159-
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
160-
.mdc-list-group__subheader {
161-
$system: m2-utils.get-system($theme);
162-
font: map.get($system, label-large);
163-
letter-spacing: map.get($system, label-large-tracking);
164-
}
165-
}
16673
}
16774

16875
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

‎src/material/list/_m2-list.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
list-list-item-focus-label-text-color: map.get($system, on-surface),
4747
list-list-item-focus-state-layer-color: map.get($system, on-surface),
4848
list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
49+
list-list-item-selected-label-text-color: map.get($system, primary),
4950
);
5051
}
5152

@@ -68,6 +69,11 @@
6869
list-list-item-trailing-supporting-text-size: map.get($system, body-small-size),
6970
list-list-item-trailing-supporting-text-tracking: map.get($system, body-small-tracking),
7071
list-list-item-trailing-supporting-text-weight: map.get($system, body-small-weight),
72+
list-list-item-subheader-text-font: map.get($system, label-large-font),
73+
list-list-item-subheader-text-line-height: map.get($system, label-large-line-height),
74+
list-list-item-subheader-text-size: map.get($system, label-large-size),
75+
list-list-item-subheader-text-tracking: map.get($system, label-large-tracking),
76+
list-list-item-subheader-text-weight: map.get($system, label-large-weight),
7177
);
7278
}
7379

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
list-list-item-leading-icon-color: map.get($system, on-surface-variant),
4747
list-list-item-leading-icon-size: 24px,
4848
list-list-item-selected-trailing-icon-color: map.get($system, primary),
49+
list-list-item-selected-label-text-color: map.get($system, on-surface),
4950
list-list-item-supporting-text-color: map.get($system, on-surface-variant),
5051
list-list-item-trailing-icon-color: map.get($system, on-surface-variant),
5152
list-list-item-trailing-icon-size: 24px,
@@ -71,6 +72,11 @@
7172
list-list-item-trailing-supporting-text-size: map.get($system, label-small-size),
7273
list-list-item-trailing-supporting-text-tracking: map.get($system, label-small-tracking),
7374
list-list-item-trailing-supporting-text-weight: map.get($system, label-small-weight),
75+
list-list-item-subheader-text-font: inherit,
76+
list-list-item-subheader-text-line-height: inherit,
77+
list-list-item-subheader-text-size: inherit,
78+
list-list-item-subheader-text-tracking: inherit,
79+
list-list-item-subheader-text-weight: inherit,
7480
),
7581
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
7682
);

0 commit comments

Comments
 (0)