From af0d08291a1c33fb379505a02587feafa80543c5 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 16 Jun 2025 14:58:47 -0600 Subject: [PATCH] fix(material/list): remove custom m2 theme styles --- .../list/_list-inherited-structure.scss | 13 ++ src/material/list/_list-theme.scss | 111 ++---------------- src/material/list/_m2-list.scss | 6 + src/material/list/_m3-list.scss | 6 + 4 files changed, 34 insertions(+), 102 deletions(-) diff --git a/src/material/list/_list-inherited-structure.scss b/src/material/list/_list-inherited-structure.scss index 1572eb7e69bc..53c51f8e6f6f 100644 --- a/src/material/list/_list-inherited-structure.scss +++ b/src/material/list/_list-inherited-structure.scss @@ -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, @@ -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 { diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 400208bcdad9..27d0f1deb71d 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -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(); @@ -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)); } } } @@ -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 - ); - } - } - } } } @@ -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. diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss index 062600bac2c8..68593652fcda 100644 --- a/src/material/list/_m2-list.scss +++ b/src/material/list/_m2-list.scss @@ -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), ); } @@ -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), ); } diff --git a/src/material/list/_m3-list.scss b/src/material/list/_m3-list.scss index d23e154502f2..6f914470e121 100644 --- a/src/material/list/_m3-list.scss +++ b/src/material/list/_m3-list.scss @@ -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, @@ -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)), );