From e349a3bfae9c042f3436ec7303045a204e28c525 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 23 Nov 2023 16:48:31 +0000 Subject: [PATCH] feat(material-experimental/theming): add M3 chips support --- src/dev-app/theme-m3.scss | 3 + .../theming/_custom-tokens.scss | 43 +++++++++ .../theming/_m3-density.scss | 3 + .../theming/_m3-tokens.scss | 5 + src/material/chips/_chips-theme.scss | 96 ++++++++++++------- src/material/core/tokens/m2/_index.scss | 2 + 6 files changed, 120 insertions(+), 32 deletions(-) diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 65602a67f536..8691b7970785 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -40,6 +40,7 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark) html { @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); + @include mat.chips-theme($light-theme); @include mat.datepicker-theme($light-theme); @include mat.dialog-theme($light-theme); @include mat.divider-theme($light-theme); @@ -81,6 +82,7 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); + @include mat.chips-color($dark-theme); @include mat.datepicker-color($dark-theme); @include mat.dialog-color($dark-theme); @include mat.divider-color($dark-theme); @@ -121,6 +123,7 @@ html { .demo-density-#{$scale} { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); + @include mat.chips-density($scale-theme); @include mat.datepicker-density($scale-theme); @include mat.dialog-density($scale-theme); @include mat.divider-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 0ceaa43caf8b..5f0afe92028e 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -35,6 +35,49 @@ ); } +/// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they +/// seem to have made up the tokens rather than using ones generated from the token database, +/// therefore we need a custom token function for it). +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mdc-chip +@function chip($systems, $exclude-hardcoded) { + @return mat.private-merge-all( + _generate-typography-tokens($systems, label-text, label-large), + ( + container-shape: _hardcode(( + family: rounded, + radius: 8px, + ), $exclude-hardcoded), + with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded), + elevated-container-color: map.get($systems, md-sys-color, surface-container-low), + elevated-disabled-container-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.12, + ), + label-text-color: map.get($systems, md-sys-color, on-surface-variant), + disabled-label-text-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38, + ), + with-icon-icon-size: _hardcode(18px, $exclude-hardcoded), + with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant), + with-icon-disabled-icon-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38, + ), + with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), + with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), + with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38, + ), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + ), + ); +} + /// Generates custom tokens for the mat-datepicker. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index ab21b27f313b..55332d0ea382 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -19,6 +19,9 @@ $_density-tokens: ( (mdc, checkbox): ( state-layer-size: (40px, 36px, 32px, 28px), ), + (mdc, chip): ( + container-height: (32px, 28px, 24px), + ), (mdc, circular-progress): (), (mdc, dialog): (), (mdc, elevated-card): (), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index bb52db78caf5..016b3d775c76 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -177,6 +177,11 @@ _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)), $token-slots ), + _namespace-tokens( + (mdc, chip), + custom-tokens.chip($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, circular-progress), mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded), diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 8ec80b57dffe..1a0903e95157 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use 'sass:color'; @use '@material/chips/chip-theme' as mdc-chip-theme; @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip; @@ -6,63 +7,94 @@ @use '../core/typography/typography'; @mixin base($theme) { - .mat-mdc-standard-chip { - @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + .mat-mdc-standard-chip { + @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens()); + } } } @mixin color($theme) { - .mat-mdc-standard-chip { - $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme); - @include mdc-chip-theme.theme($default-color-tokens); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + .mat-mdc-standard-chip { + $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme); + @include mdc-chip-theme.theme($default-color-tokens); - &.mat-mdc-chip-selected, - &.mat-mdc-chip-highlighted { - &.mat-primary { - $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary); - @include mdc-chip-theme.theme($primary-color-tokens); - } + &.mat-mdc-chip-selected, + &.mat-mdc-chip-highlighted { + &.mat-primary { + $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary); + @include mdc-chip-theme.theme($primary-color-tokens); + } - &.mat-accent { - $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent); - @include mdc-chip-theme.theme($accent-color-tokens); - } + &.mat-accent { + $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent); + @include mdc-chip-theme.theme($accent-color-tokens); + } - &.mat-warn { - $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn); - @include mdc-chip-theme.theme($warn-color-tokens); + &.mat-warn { + $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn); + @include mdc-chip-theme.theme($warn-color-tokens); + } } } } } @mixin typography($theme) { - $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme); - .mat-mdc-standard-chip { - @include mdc-chip-theme.theme($typography-tokens); + .mat-mdc-standard-chip { + @include mdc-chip-theme.theme($typography-tokens); + } } } @mixin density($theme) { - $density-tokens: tokens-mdc-chip.get-density-tokens($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else { + $density-tokens: tokens-mdc-chip.get-density-tokens($theme); - .mat-mdc-chip.mat-mdc-standard-chip { - @include mdc-chip-theme.theme($density-tokens); + .mat-mdc-chip.mat-mdc-standard-chip { + @include mdc-chip-theme.theme($density-tokens); + } } } @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); - } - @if inspection.theme-has($theme, density) { - @include density($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($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-chip-theme.theme(map.get($tokens, tokens-mdc-chip.$prefix)); + } +} diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index 827e9cdce6c9..4c9493915b54 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -29,6 +29,7 @@ @use './mat/toolbar' as tokens-mat-toolbar; @use './mat/tree' as tokens-mat-tree; @use './mdc/checkbox' as tokens-mdc-checkbox; +@use './mdc/chip' as tokens-mdc-chip; @use './mdc/circular-progress' as tokens-mdc-circular-progress; @use './mdc/dialog' as tokens-mdc-dialog; @use './mdc/elevated-card' as tokens-mdc-elevated-card; @@ -119,6 +120,7 @@ _get-tokens-for-module($theme, tokens-mat-toolbar), _get-tokens-for-module($theme, tokens-mat-tree), _get-tokens-for-module($theme, tokens-mdc-checkbox), + _get-tokens-for-module($theme, tokens-mdc-chip), _get-tokens-for-module($theme, tokens-mdc-circular-progress), _get-tokens-for-module($theme, tokens-mdc-dialog), _get-tokens-for-module($theme, tokens-mdc-elevated-card),