Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 list support (#28122)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba
mmalerba authored Nov 15, 2023
1 parent 1735032 commit d7b4543
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 83 deletions.
3 changes: 3 additions & 0 deletions src/dev-app/theme-m3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ html {
@include mat.checkbox-theme($light-theme);
@include mat.form-field-theme($light-theme);
@include mat.input-theme($light-theme);
@include mat.list-theme($light-theme);
@include mat.progress-bar-theme($light-theme);
@include mat.progress-spinner-theme($light-theme);
@include mat.radio-theme($light-theme);
Expand All @@ -66,6 +67,7 @@ html {
@include mat.checkbox-color($dark-theme);
@include mat.form-field-color($dark-theme);
@include mat.input-color($dark-theme);
@include mat.list-color($dark-theme);
@include mat.progress-bar-color($dark-theme);
@include mat.progress-spinner-color($dark-theme);
@include mat.radio-color($dark-theme);
Expand All @@ -91,6 +93,7 @@ html {
@include mat.checkbox-density($scale-theme);
@include mat.form-field-density($scale-theme);
@include mat.input-density($scale-theme);
@include mat.list-density($scale-theme);
@include mat.progress-bar-density($scale-theme);
@include mat.progress-spinner-density($scale-theme);
@include mat.radio-density($scale-theme);
Expand Down
5 changes: 5 additions & 0 deletions src/material-experimental/theming/_m3-density.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ $_density-tokens: (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, linear-progress): (),
(mdc, list): (
list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
),
(mdc, switch): (),
(mdc, tab): (
container-height: (48px, 44px, 40px, 36px, 32px)
Expand Down
5 changes: 5 additions & 0 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,11 @@
mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, list),
mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, outlined-card),
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
Expand Down
198 changes: 115 additions & 83 deletions src/material/list/_list-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,139 +14,171 @@

@mixin base($theme) {
// Add default values for tokens not related to color, typography, or density.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
}
@else {
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
}
}
}

@mixin color($theme) {
$mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);

// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-color-tokens);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
}
@else {
$mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);

.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
}
// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-color-tokens);
}

.mat-accent {
.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
}
}

.mat-warn {
.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
.mat-accent {
.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
}
}
}

.mat-mdc-list-option {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
}
.mat-mdc-list-option.mat-accent {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
}
.mat-mdc-list-option.mat-warn {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
}
.mat-warn {
.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
}
}

// 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 {
@include evolution-mixins.list-selected-ink-color(inspection.get-theme-color($theme, primary));
}
.mat-mdc-list-option {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
}
.mat-mdc-list-option.mat-accent {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
}
.mat-mdc-list-option.mat-warn {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
}

// 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;
// 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 {
@include evolution-mixins.list-selected-ink-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;
}
}
}
}

@mixin density($theme) {
$density-scale: inspection.get-theme-density($theme);
$mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);

// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-density-tokens);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
}
@else {
$density-scale: inspection.get-theme-density($theme);
$mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);

.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
}
// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-density-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((
.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
}

// 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);
}
), $density-scale);
}

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

@mixin typography($theme) {
$mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);

// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-typography-tokens);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
}
@else {
$mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);

// MDC does not have tokens for the subheader.
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
.mdc-list-group__subheader {
font: inspection.get-theme-typography($theme, subtitle-1, font);
letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
// Add values for MDC list tokens.
@include sass-utils.current-selector-or-root() {
@include mdc-list-theme.theme($mdc-list-typography-tokens);
}

// MDC does not have tokens for the subheader.
// TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
.mdc-list-group__subheader {
font: inspection.get-theme-typography($theme, subtitle-1, font);
letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
}
}
}

@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
}
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
@else {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
}

@mixin _theme-from-tokens($tokens) {
@if ($tokens != ()) {
@include mdc-list-theme.theme(map.get($tokens, tokens-mdc-list.$prefix));
}
}

0 comments on commit d7b4543

Please sign in to comment.