From 4b5a48786f084ae9881b333c873fe46a5bdf3b9a Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 21 Nov 2023 21:51:30 +0000 Subject: [PATCH] feat(material-experimental/theming): add M3 datepicker support --- src/dev-app/theme-m3.scss | 7 +- .../theming/_custom-tokens.scss | 70 ++++++++++++ .../theming/_m3-density.scss | 1 + .../theming/_m3-tokens.scss | 5 + src/material/core/tokens/m2/_index.scss | 2 + .../datepicker/_datepicker-theme.scss | 108 ++++++++++++------ 6 files changed, 154 insertions(+), 39 deletions(-) diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 4825f5a53f9b..65602a67f536 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -24,7 +24,9 @@ dev-app { // Base theme configuration for our M3 theme. $m3-base-config: ( color: ( - primary: matx.$m3-green-palette + primary: matx.$m3-green-palette, + secondary: matx.$m3-blue-palette, + tertiary: matx.$m3-yellow-palette, ), ); @@ -38,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.datepicker-theme($light-theme); @include mat.dialog-theme($light-theme); @include mat.divider-theme($light-theme); @include mat.expansion-theme($light-theme); @@ -78,6 +81,7 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); + @include mat.datepicker-color($dark-theme); @include mat.dialog-color($dark-theme); @include mat.divider-color($dark-theme); @include mat.expansion-color($dark-theme); @@ -117,6 +121,7 @@ html { .demo-density-#{$scale} { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); + @include mat.datepicker-density($scale-theme); @include mat.dialog-density($scale-theme); @include mat.divider-density($scale-theme); @include mat.expansion-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 073beefd9689..0ceaa43caf8b 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -35,6 +35,76 @@ ); } +/// Generates custom tokens for the mat-datepicker. +/// @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 mat-datepicker +@function datepicker($systems, $exclude-hardcoded) { + @return ( + calendar-date-in-range-state-background-color: + map.get($systems, md-sys-color, primary-container), + calendar-date-in-comparison-range-state-background-color: + map.get($systems, md-sys-color, secondary-container), + calendar-date-in-overlap-range-state-background-color: + map.get($systems, md-sys-color, tertiary-container), + calendar-date-in-overlap-range-selected-state-background-color: + map.get($systems, md-sys-color, tertiary), + calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary), + calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary), + calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38 + ), + calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary), + calendar-date-focus-state-background-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) + ), + calendar-date-hover-state-background-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) + ), + toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant), + toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant), + calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface), + calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant), + calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant), + calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant), + calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant), + calendar-date-today-outline-color: map.get($systems, md-sys-color, primary), + calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38 + ), + calendar-date-text-color: map.get($systems, md-sys-color, on-surface), + calendar-date-outline-color: _hardcode(transparent, $exclude-hardcoded), + calendar-date-disabled-state-text-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38 + ), + calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, primary), + range-input-separator-color: map.get($systems, md-sys-color, on-surface), + range-input-disabled-state-separator-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38 + ), + range-input-disabled-state-text-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38 + ), + calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high), + calendar-container-text-color: map.get($systems, md-sys-color, on-surface), + calendar-text-font: map.get($systems, md-sys-typescale, body-large-font), + calendar-text-size: map.get($systems, md-sys-typescale, body-large-size), + calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size), + calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight), + calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size), + calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight), + calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size), + calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight), + ); +} + /// Generates custom tokens for the mat-divider. /// @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 df9ceec3e8eb..ab21b27f313b 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -50,6 +50,7 @@ $_density-tokens: ( // Custom Angular Material tokens (mat, card): (), + (mat, datepicker): (), (mat, divider): (), (mat, expansion): ( header-collapsed-state-height: (48px, 44px, 40px, 36px), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 26c6182c7056..bb52db78caf5 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -275,6 +275,11 @@ custom-tokens.card($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, datepicker), + custom-tokens.datepicker($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, divider), custom-tokens.divider($systems, $exclude-hardcoded), diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index c7cc2afb46e4..827e9cdce6c9 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -2,6 +2,7 @@ @use 'sass:meta'; @use '../../style/sass-utils'; @use './mat/card' as tokens-mat-card; +@use './mat/datepicker' as tokens-mat-datepicker; @use './mat/divider' as tokens-mat-divider; @use './mat/expansion' as tokens-mat-expansion; @use './mat/fab' as tokens-mat-fab; @@ -91,6 +92,7 @@ @function m2-tokens-from-theme($theme) { @return sass-utils.deep-merge-all( _get-tokens-for-module($theme, tokens-mat-card), + _get-tokens-for-module($theme, tokens-mat-datepicker), _get-tokens-for-module($theme, tokens-mat-divider), _get-tokens-for-module($theme, tokens-mat-expansion), _get-tokens-for-module($theme, tokens-mat-fab), diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index bebaf88969a1..4c8d92fe68f2 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -27,43 +27,58 @@ $calendar-weekday-table-font-size: 11px !default; map.merge($calendar-tokens, $range-tokens)); } -@mixin base($theme) {} +@mixin base($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else {} +} @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } - - .mat-datepicker-content { - &.mat-accent { - @include _calendar-color($theme, accent); + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, + tokens-mat-datepicker.get-color-tokens($theme)); } - &.mat-warn { - @include _calendar-color($theme, warn); - } - } + .mat-datepicker-content { + &.mat-accent { + @include _calendar-color($theme, accent); + } - .mat-datepicker-toggle-active { - &.mat-accent { - $accent-tokens: - tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens); + &.mat-warn { + @include _calendar-color($theme, warn); + } } - &.mat-warn { - $warn-tokens: - tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens); + .mat-datepicker-toggle-active { + &.mat-accent { + $accent-tokens: + tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent); + @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens); + } + + &.mat-warn { + $warn-tokens: + tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn); + @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens); + } } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-typography-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, + tokens-mat-datepicker.get-typography-tokens($theme)); + } } } @@ -86,27 +101,44 @@ $calendar-weekday-table-font-size: 11px !default; } @mixin density($theme) { - // TODO(crisbeto): move this into the structural styles - // once the icon button density is switched to tokens. + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else { + // TODO(crisbeto): move this into the structural styles + // once the icon button density is switched to tokens. - // Regardless of the user-passed density, we want the calendar - // previous/next buttons to remain at density -2 - .mat-calendar-controls { - @include icon-button-theme.density(-2); + // Regardless of the user-passed density, we want the calendar + // previous/next buttons to remain at density -2 + .mat-calendar-controls { + @include icon-button-theme.density(-2); + } } } @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') { - @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 token-utils.create-token-values( + tokens-mat-datepicker.$prefix, map.get($tokens, tokens-mat-datepicker.$prefix)); + } +}