Skip to content

fix(material/list): remove custom m2 theme styles #31365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(material/list): remove custom m2 theme styles #31365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/material/list/_list-inherited-structure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,14 @@ $fallbacks: m3-list.get-tokens();
}
}

&.mdc-list-item--selected.mdc-list-item--selected,
&.mdc-list-item--activated.mdc-list-item--activated {
.mdc-list-item__primary-text,
.mdc-list-item__start {
color: token-utils.slot(list-list-item-selected-label-text-color, $fallbacks);
}
}

// Not used in Material, but some internal tests seem to depend on it.
&.mdc-list-item--selected::before,
&.mdc-list-item--selected:focus::before,
Expand Down Expand Up @@ -443,6 +451,11 @@ $fallbacks: m3-list.get-tokens();

.mdc-list-group__subheader {
margin: 0.75rem 16px;
font-family: token-utils.slot(list-list-item-subheader-text-font, $fallbacks);
line-height: token-utils.slot(list-list-item-subheader-text-line-height, $fallbacks);
font-size: token-utils.slot(list-list-item-subheader-text-size, $fallbacks);
font-weight: token-utils.slot(list-list-item-subheader-text-weight, $fallbacks);
letter-spacing: token-utils.slot(list-list-item-subheader-text-tracking, $fallbacks);
}

.mdc-list-item--disabled {
Expand Down
111 changes: 9 additions & 102 deletions src/material/list/_list-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
@use '../radio/m2-radio';
@use './m2-list';
@use './m3-list';
@use '../core/tokens/m2-utils';

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

@if inspection.get-theme-version($theme) != 1 {
.mdc-list-item__start,
.mdc-list-item__end {
$tokens: m2-radio.get-color-tokens($theme, primary);
@include token-utils.values($tokens);
}
.mat-mdc-selection-list {
@include token-utils.values(m2-radio.get-color-tokens($theme, primary));
@include token-utils.values(m2-checkbox.get-color-tokens($theme, primary));

.mat-accent {
.mdc-list-item__start,
.mdc-list-item__end {
$tokens: m2-radio.get-color-tokens($theme, secondary);
@include token-utils.values($tokens);
.mat-accent {
@include token-utils.values(m2-radio.get-color-tokens($theme, secondary));
@include token-utils.values(m2-checkbox.get-color-tokens($theme, secondary));
}
}

.mat-warn {
.mdc-list-item__start,
.mdc-list-item__end {
$tokens: m2-radio.get-color-tokens($theme, error);
@include token-utils.values($tokens);
}
}

.mat-mdc-list-option {
$tokens: m2-checkbox.get-color-tokens($theme, primary);
@include token-utils.values($tokens);
}

.mat-mdc-list-option.mat-accent {
$tokens: m2-checkbox.get-color-tokens($theme, secondary);
@include token-utils.values($tokens);
}

.mat-mdc-list-option.mat-warn {
$tokens: m2-checkbox.get-color-tokens($theme, error);
@include token-utils.values($tokens);
}

// There is no token for activated color on nav list.
// TODO(mmalerba): Add a token to MDC or make a custom one.
.mat-mdc-list-base.mat-mdc-list-base {
.mdc-list-item--selected,
.mdc-list-item--activated {
.mdc-list-item__primary-text,
.mdc-list-item__start {
color: inspection.get-theme-color($theme, primary);
}
}
}

// TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can
// cause opacity issues, so we need this override for now. We can remove it when all
// Angular Material components stop using the old MDC mixins.
.mat-mdc-list-base .mdc-list-item--disabled {
.mdc-list-item__start,
.mdc-list-item__content,
.mdc-list-item__end {
opacity: 1;
.mat-warn {
@include token-utils.values(m2-radio.get-color-tokens($theme, error));
@include token-utils.values(m2-checkbox.get-color-tokens($theme, error));
}
}
}
Expand All @@ -106,43 +60,6 @@
$tokens: m2-radio.get-density-tokens($theme);
@include token-utils.values($tokens);
}

// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
// API, to avoid screenshot diffs. We should remove it in favor of following MDC's current
// style, or add custom tokens for it.
.mat-mdc-list-item {
&.mdc-list-item--with-leading-avatar,
&.mdc-list-item--with-leading-checkbox,
&.mdc-list-item--with-leading-icon {
&.mdc-list-item--with-one-line {
height: map.get(
(
0: 56px,
-1: 52px,
-2: 48px,
-3: 44px,
-4: 40px,
-5: 40px,
),
$density-scale
);
}

&.mdc-list-item--with-two-lines {
height: map.get(
(
0: 72px,
-1: 68px,
-2: 64px,
-3: 60px,
-4: 56px,
-5: 56px,
),
$density-scale
);
}
}
}
}
}

Expand All @@ -153,16 +70,6 @@
}

@include token-utils.values($tokens);

@if inspection.get-theme-version($theme) != 1 {
// MDC does not have tokens for the subheader.
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
.mdc-list-group__subheader {
$system: m2-utils.get-system($theme);
font: map.get($system, label-large);
letter-spacing: map.get($system, label-large-tracking);
}
}
}

/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
Expand Down
6 changes: 6 additions & 0 deletions src/material/list/_m2-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
list-list-item-focus-label-text-color: map.get($system, on-surface),
list-list-item-focus-state-layer-color: map.get($system, on-surface),
list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
list-list-item-selected-label-text-color: map.get($system, primary),
);
}

Expand All @@ -68,6 +69,11 @@
list-list-item-trailing-supporting-text-size: map.get($system, body-small-size),
list-list-item-trailing-supporting-text-tracking: map.get($system, body-small-tracking),
list-list-item-trailing-supporting-text-weight: map.get($system, body-small-weight),
list-list-item-subheader-text-font: map.get($system, label-large-font),
list-list-item-subheader-text-line-height: map.get($system, label-large-line-height),
list-list-item-subheader-text-size: map.get($system, label-large-size),
list-list-item-subheader-text-tracking: map.get($system, label-large-tracking),
list-list-item-subheader-text-weight: map.get($system, label-large-weight),
);
}

Expand Down
6 changes: 6 additions & 0 deletions src/material/list/_m3-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
list-list-item-leading-icon-color: map.get($system, on-surface-variant),
list-list-item-leading-icon-size: 24px,
list-list-item-selected-trailing-icon-color: map.get($system, primary),
list-list-item-selected-label-text-color: map.get($system, on-surface),
list-list-item-supporting-text-color: map.get($system, on-surface-variant),
list-list-item-trailing-icon-color: map.get($system, on-surface-variant),
list-list-item-trailing-icon-size: 24px,
Expand All @@ -71,6 +72,11 @@
list-list-item-trailing-supporting-text-size: map.get($system, label-small-size),
list-list-item-trailing-supporting-text-tracking: map.get($system, label-small-tracking),
list-list-item-trailing-supporting-text-weight: map.get($system, label-small-weight),
list-list-item-subheader-text-font: inherit,
list-list-item-subheader-text-line-height: inherit,
list-list-item-subheader-text-size: inherit,
list-list-item-subheader-text-tracking: inherit,
list-list-item-subheader-text-weight: inherit,
),
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
);
Expand Down
Loading