diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 1c114eb41467..42289c67eead 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -8,30 +8,6 @@ @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../button/icon-button-theme'; -@use '../core/tokens/m2-utils'; -@use '../core/tokens/m3-utils'; - -// TODO(crisbeto): these variables aren't used anymore and should be removed. -$selected-today-box-shadow-width: 1px; -$selected-fade-amount: 0.6; -$range-fade-amount: 0.2; -$today-fade-amount: 0.2; -$calendar-body-font-size: 13px !default; -$calendar-weekday-table-font-size: 11px !default; - -@mixin _calendar-color($theme, $color-variant) { - $system: m2-utils.get-system($theme); - $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); - - $range-color: m2-datepicker.private-get-range-background-color(map.get($system, primary)); - $range-tokens: m2-datepicker.get-range-color-tokens($range-color); - $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens( - $theme, - $color-variant - ); - - @include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens)); -} /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-datepicker. @@ -55,28 +31,19 @@ $calendar-weekday-table-font-size: 11px !default; map.get(m3-datepicker.get-tokens($theme, $color-variant), color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(m2-datepicker.get-color-tokens($theme)); - } - - .mat-datepicker-content { - &.mat-accent { - @include _calendar-color($theme, secondary); - } - - &.mat-warn { - @include _calendar-color($theme, error); - } + @include token-utils.create-token-values-mixed( + m2-datepicker.get-color-tokens($theme, primary)); } - .mat-datepicker-toggle-active { + .mat-datepicker-content, .mat-datepicker-toggle-active { &.mat-accent { - $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent); - @include token-utils.create-token-values-mixed($accent-tokens); + @include token-utils.create-token-values-mixed( + m2-datepicker.get-color-tokens($theme, secondary)); } &.mat-warn { - $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn); - @include token-utils.create-token-values-mixed($warn-tokens); + @include token-utils.create-token-values-mixed( + m2-datepicker.get-color-tokens($theme, error)); } } } @@ -96,21 +63,16 @@ $calendar-weekday-table-font-size: 11px !default; @mixin date-range-colors( $range-color, - $comparison-color: m2-datepicker.$private-default-comparison-color, - $overlap-color: m2-datepicker.$private-default-overlap-color, - $overlap-selected-color: - m2-datepicker.private-get-default-overlap-selected-color($overlap-color) + $comparison-color: rgba(#f9ab00, 0.2), + $overlap-color: #a8dab5, + $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%) ) { - $tokens: m2-datepicker.get-range-color-tokens( - $range-color: $range-color, - $comparison-color: $comparison-color, - $overlap-color: $overlap-color, - $overlap-selected-color: $overlap-selected-color, - ); - - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed($tokens); - } + @include overrides(( + calendar-date-in-range-state-background-color: $range-color, + calendar-date-in-comparison-range-state-background-color: $comparison-color, + calendar-date-in-overlap-range-state-background-color: $overlap-color, + calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color, + )); } /// Outputs density theme styles for the mat-datepicker. diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index 9eba5a503753..f6df2314d5a3 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -1,32 +1,10 @@ @use 'sass:color'; -@use 'sass:meta'; -@use 'sass:math'; @use '../core/theming/inspection'; @use '../core/style/elevation'; -@use '../core/style/sass-utils'; @use '../core/tokens/m3-utils'; @use '../core/tokens/m2-utils'; @use 'sass:map'; -$_selected-fade-amount: 0.6; -$_today-fade-amount: 0.2; - -// Utility that produces a range background color from a specific color. -@function private-get-range-background-color($color) { - @return rgba($color, 0.2); -} - -// Utility that produces the overlap selected color from an overlap color. -@function private-get-default-overlap-selected-color($overlap-color) { - @return color.adjust($overlap-color, $lightness: -30%); -} - -// Default range comparison color. -$private-default-comparison-color: private-get-range-background-color(#f9ab00); - -// Default range overlap color. -$private-default-overlap-color: #a8dab5; - // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { @@ -39,61 +17,50 @@ $private-default-overlap-color: #a8dab5; } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { +@function get-color-tokens($theme, $color-variant) { $system: m2-utils.get-system($theme); - - $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon); + $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); - $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text); - $preview-outline-color: map.get($system, outline); - $today-disabled-outline-color: null; - $is-dark: inspection.get-theme-type($theme) == dark; - $system: m2-utils.get-system($theme); - - $primary-color: map.get($system, primary); - $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color)); - $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary); - $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary); - - // The divider color is set under the assumption that it'll be used - // for a solid border, but because we're using a dashed border for the - // preview range, we need to bump its opacity to ensure that it's visible. - @if meta.type-of($preview-outline-color) == color { - $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1); - $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity); - } - @if (meta.type-of($hint-text-color) == color) { - $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount); - } - @else { - $today-disabled-outline-color: $disabled; - } - - @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, ( + @return ( + datepicker-calendar-date-in-range-state-background-color: + m3-utils.color-with-opacity(map.get($system, primary), 20%), + datepicker-calendar-date-in-comparison-range-state-background-color: + m3-utils.color-with-opacity(map.get($system, secondary), 20%), + datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5, + datepicker-calendar-date-in-overlap-range-selected-state-background-color: + color.adjust(#a8dab5, $lightness: -30%), + datepicker-calendar-date-selected-state-text-color: map.get($system, on-primary), + datepicker-calendar-date-selected-state-background-color: map.get($system, primary), + datepicker-calendar-date-selected-disabled-state-background-color: + m3-utils.color-with-opacity(map.get($system, primary), 38%), + datepicker-calendar-date-today-selected-state-outline-color: map.get($system, on-primary), + datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, focus-state-layer-opacity)), + datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, hover-state-layer-opacity)), + + datepicker-toggle-active-state-icon-color: map.get($system, primary), datepicker-toggle-icon-color: map.get($system, on-surface-variant), datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant), - datepicker-calendar-period-button-text-color: - inspection.get-theme-color($theme, foreground, base), + datepicker-calendar-period-button-text-color: map.get($system, on-surface), datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant), datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant), datepicker-calendar-header-divider-color: map.get($system, outline), datepicker-calendar-header-text-color: map.get($system, on-surface-variant), - // Note: though it's not text, the border is a hint about the fact - // that this is today's date, so we use the hint color. - datepicker-calendar-date-today-outline-color: $hint-text-color, - datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color, + datepicker-calendar-date-today-outline-color: map.get($system, on-surface-variant), + datepicker-calendar-date-today-disabled-state-outline-color: $disabled, datepicker-calendar-date-text-color: map.get($system, on-surface), datepicker-calendar-date-outline-color: transparent, datepicker-calendar-date-disabled-state-text-color: $disabled, - datepicker-calendar-date-preview-state-outline-color: $preview-outline-color, + datepicker-calendar-date-preview-state-outline-color: map.get($system, on-surface-variant), datepicker-range-input-separator-color: map.get($system, on-surface), datepicker-range-input-disabled-state-separator-color: $disabled, datepicker-range-input-disabled-state-text-color: $disabled, datepicker-calendar-container-background-color: map.get($system, surface), datepicker-calendar-container-text-color: map.get($system, on-surface), - )); + ); } // Tokens that can be configured through Angular Material's typography theming API. @@ -122,56 +89,6 @@ $private-default-overlap-color: #a8dab5; ); } -// Gets the tokens map that can be used to override the range colors. -@function get-range-color-tokens( - $range-color, - $comparison-color: $private-default-comparison-color, - $overlap-color: $private-default-overlap-color, - $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) { - - @return ( - datepicker-calendar-date-in-range-state-background-color: $range-color, - datepicker-calendar-date-in-comparison-range-state-background-color: $comparison-color, - datepicker-calendar-date-in-overlap-range-state-background-color: $overlap-color, - datepicker-calendar-date-in-overlap-range-selected-state-background-color: - $overlap-selected-color, - ); -} - -@function private-get-calendar-color-palette-color-tokens($theme, $color-variant) { - $system: m2-utils.get-system($theme); - $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); - - $palette-color: map.get($system, primary); - $default-contrast: map.get($system, on-primary); - $active-background-color: m3-utils.color-with-opacity(map.get($system, primary), 30%); - $active-disabled-color: null; - - @if (meta.type-of($palette-color) == color) { - $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount); - } - @else { - $active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); - } - - @return ( - datepicker-calendar-date-selected-state-text-color: $default-contrast, - datepicker-calendar-date-selected-state-background-color: $palette-color, - datepicker-calendar-date-selected-disabled-state-background-color: $active-disabled-color, - datepicker-calendar-date-today-selected-state-outline-color: $default-contrast, - datepicker-calendar-date-focus-state-background-color: $active-background-color, - datepicker-calendar-date-hover-state-background-color: $active-background-color, - ); -} - -@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) { - @return ( - datepicker-toggle-active-state-icon-color: - inspection.get-theme-color($theme, $palette-name, text), - ); -} - - // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { @return ();