Skip to content

Commit 009424c

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
fix(material/datepicker): use system colors (#31300)
* fix(material/datepicker): use system colors * fix(material/datepicker): use system colors --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 010122f commit 009424c

File tree

2 files changed

+42
-163
lines changed

2 files changed

+42
-163
lines changed

‎src/material/datepicker/_datepicker-theme.scss‎

Lines changed: 16 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,6 @@
88
@use '../core/style/sass-utils';
99
@use '../core/typography/typography';
1010
@use '../button/icon-button-theme';
11-
@use '../core/tokens/m2-utils';
12-
@use '../core/tokens/m3-utils';
13-
14-
// TODO(crisbeto): these variables aren't used anymore and should be removed.
15-
$selected-today-box-shadow-width: 1px;
16-
$selected-fade-amount: 0.6;
17-
$range-fade-amount: 0.2;
18-
$today-fade-amount: 0.2;
19-
$calendar-body-font-size: 13px !default;
20-
$calendar-weekday-table-font-size: 11px !default;
21-
22-
@mixin _calendar-color($theme, $color-variant) {
23-
$system: m2-utils.get-system($theme);
24-
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
25-
26-
$range-color: m2-datepicker.private-get-range-background-color(map.get($system, primary));
27-
$range-tokens: m2-datepicker.get-range-color-tokens($range-color);
28-
$calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
29-
$theme,
30-
$color-variant
31-
);
32-
33-
@include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens));
34-
}
3511

3612
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
3713
/// for the mat-datepicker.
@@ -55,28 +31,19 @@ $calendar-weekday-table-font-size: 11px !default;
5531
map.get(m3-datepicker.get-tokens($theme, $color-variant), color));
5632
} @else {
5733
@include sass-utils.current-selector-or-root() {
58-
@include token-utils.create-token-values-mixed(m2-datepicker.get-color-tokens($theme));
59-
}
60-
61-
.mat-datepicker-content {
62-
&.mat-accent {
63-
@include _calendar-color($theme, secondary);
64-
}
65-
66-
&.mat-warn {
67-
@include _calendar-color($theme, error);
68-
}
34+
@include token-utils.create-token-values-mixed(
35+
m2-datepicker.get-color-tokens($theme, primary));
6936
}
7037

71-
.mat-datepicker-toggle-active {
38+
.mat-datepicker-content, .mat-datepicker-toggle-active {
7239
&.mat-accent {
73-
$accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
74-
@include token-utils.create-token-values-mixed($accent-tokens);
40+
@include token-utils.create-token-values-mixed(
41+
m2-datepicker.get-color-tokens($theme, secondary));
7542
}
7643

7744
&.mat-warn {
78-
$warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
79-
@include token-utils.create-token-values-mixed($warn-tokens);
45+
@include token-utils.create-token-values-mixed(
46+
m2-datepicker.get-color-tokens($theme, error));
8047
}
8148
}
8249
}
@@ -96,21 +63,16 @@ $calendar-weekday-table-font-size: 11px !default;
9663

9764
@mixin date-range-colors(
9865
$range-color,
99-
$comparison-color: m2-datepicker.$private-default-comparison-color,
100-
$overlap-color: m2-datepicker.$private-default-overlap-color,
101-
$overlap-selected-color:
102-
m2-datepicker.private-get-default-overlap-selected-color($overlap-color)
66+
$comparison-color: rgba(#f9ab00, 0.2),
67+
$overlap-color: #a8dab5,
68+
$overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)
10369
) {
104-
$tokens: m2-datepicker.get-range-color-tokens(
105-
$range-color: $range-color,
106-
$comparison-color: $comparison-color,
107-
$overlap-color: $overlap-color,
108-
$overlap-selected-color: $overlap-selected-color,
109-
);
110-
111-
@include sass-utils.current-selector-or-root() {
112-
@include token-utils.create-token-values-mixed($tokens);
113-
}
70+
@include overrides((
71+
calendar-date-in-range-state-background-color: $range-color,
72+
calendar-date-in-comparison-range-state-background-color: $comparison-color,
73+
calendar-date-in-overlap-range-state-background-color: $overlap-color,
74+
calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
75+
));
11476
}
11577

11678
/// Outputs density theme styles for the mat-datepicker.

‎src/material/datepicker/_m2-datepicker.scss‎

Lines changed: 26 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,10 @@
11
@use 'sass:color';
2-
@use 'sass:meta';
3-
@use 'sass:math';
42
@use '../core/theming/inspection';
53
@use '../core/style/elevation';
6-
@use '../core/style/sass-utils';
74
@use '../core/tokens/m3-utils';
85
@use '../core/tokens/m2-utils';
96
@use 'sass:map';
107

11-
$_selected-fade-amount: 0.6;
12-
$_today-fade-amount: 0.2;
13-
14-
// Utility that produces a range background color from a specific color.
15-
@function private-get-range-background-color($color) {
16-
@return rgba($color, 0.2);
17-
}
18-
19-
// Utility that produces the overlap selected color from an overlap color.
20-
@function private-get-default-overlap-selected-color($overlap-color) {
21-
@return color.adjust($overlap-color, $lightness: -30%);
22-
}
23-
24-
// Default range comparison color.
25-
$private-default-comparison-color: private-get-range-background-color(#f9ab00);
26-
27-
// Default range overlap color.
28-
$private-default-overlap-color: #a8dab5;
29-
308
// Tokens that can't be configured through Angular Material's current theming API,
319
// but may be in a future version of the theming API.
3210
@function get-unthemable-tokens() {
@@ -39,61 +17,50 @@ $private-default-overlap-color: #a8dab5;
3917
}
4018

4119
// Tokens that can be configured through Angular Material's color theming API.
42-
@function get-color-tokens($theme) {
20+
@function get-color-tokens($theme, $color-variant) {
4321
$system: m2-utils.get-system($theme);
44-
45-
$inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
22+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
4623
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
47-
$hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
48-
$preview-outline-color: map.get($system, outline);
49-
$today-disabled-outline-color: null;
50-
$is-dark: inspection.get-theme-type($theme) == dark;
51-
$system: m2-utils.get-system($theme);
52-
53-
$primary-color: map.get($system, primary);
54-
$range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
55-
$calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
56-
$toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
57-
58-
// The divider color is set under the assumption that it'll be used
59-
// for a solid border, but because we're using a dashed border for the
60-
// preview range, we need to bump its opacity to ensure that it's visible.
61-
@if meta.type-of($preview-outline-color) == color {
62-
$preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
63-
$preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
64-
}
6524

66-
@if (meta.type-of($hint-text-color) == color) {
67-
$today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
68-
}
69-
@else {
70-
$today-disabled-outline-color: $disabled;
71-
}
72-
73-
@return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
25+
@return (
26+
datepicker-calendar-date-in-range-state-background-color:
27+
m3-utils.color-with-opacity(map.get($system, primary), 20%),
28+
datepicker-calendar-date-in-comparison-range-state-background-color:
29+
m3-utils.color-with-opacity(map.get($system, secondary), 20%),
30+
datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5,
31+
datepicker-calendar-date-in-overlap-range-selected-state-background-color:
32+
color.adjust(#a8dab5, $lightness: -30%),
33+
datepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
34+
datepicker-calendar-date-selected-state-background-color: map.get($system, primary),
35+
datepicker-calendar-date-selected-disabled-state-background-color:
36+
m3-utils.color-with-opacity(map.get($system, primary), 38%),
37+
datepicker-calendar-date-today-selected-state-outline-color: map.get($system, on-primary),
38+
datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
39+
map.get($system, primary), map.get($system, focus-state-layer-opacity)),
40+
datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
41+
map.get($system, primary), map.get($system, hover-state-layer-opacity)),
42+
43+
datepicker-toggle-active-state-icon-color: map.get($system, primary),
7444
datepicker-toggle-icon-color: map.get($system, on-surface-variant),
7545
datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
76-
datepicker-calendar-period-button-text-color:
77-
inspection.get-theme-color($theme, foreground, base),
46+
datepicker-calendar-period-button-text-color: map.get($system, on-surface),
7847
datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
7948
datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
8049
datepicker-calendar-header-divider-color: map.get($system, outline),
8150
datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
8251

83-
// Note: though it's not text, the border is a hint about the fact
84-
// that this is today's date, so we use the hint color.
85-
datepicker-calendar-date-today-outline-color: $hint-text-color,
86-
datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
52+
datepicker-calendar-date-today-outline-color: map.get($system, on-surface-variant),
53+
datepicker-calendar-date-today-disabled-state-outline-color: $disabled,
8754
datepicker-calendar-date-text-color: map.get($system, on-surface),
8855
datepicker-calendar-date-outline-color: transparent,
8956
datepicker-calendar-date-disabled-state-text-color: $disabled,
90-
datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
57+
datepicker-calendar-date-preview-state-outline-color: map.get($system, on-surface-variant),
9158
datepicker-range-input-separator-color: map.get($system, on-surface),
9259
datepicker-range-input-disabled-state-separator-color: $disabled,
9360
datepicker-range-input-disabled-state-text-color: $disabled,
9461
datepicker-calendar-container-background-color: map.get($system, surface),
9562
datepicker-calendar-container-text-color: map.get($system, on-surface),
96-
));
63+
);
9764
}
9865

9966
// Tokens that can be configured through Angular Material's typography theming API.
@@ -122,56 +89,6 @@ $private-default-overlap-color: #a8dab5;
12289
);
12390
}
12491

125-
// Gets the tokens map that can be used to override the range colors.
126-
@function get-range-color-tokens(
127-
$range-color,
128-
$comparison-color: $private-default-comparison-color,
129-
$overlap-color: $private-default-overlap-color,
130-
$overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
131-
132-
@return (
133-
datepicker-calendar-date-in-range-state-background-color: $range-color,
134-
datepicker-calendar-date-in-comparison-range-state-background-color: $comparison-color,
135-
datepicker-calendar-date-in-overlap-range-state-background-color: $overlap-color,
136-
datepicker-calendar-date-in-overlap-range-selected-state-background-color:
137-
$overlap-selected-color,
138-
);
139-
}
140-
141-
@function private-get-calendar-color-palette-color-tokens($theme, $color-variant) {
142-
$system: m2-utils.get-system($theme);
143-
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
144-
145-
$palette-color: map.get($system, primary);
146-
$default-contrast: map.get($system, on-primary);
147-
$active-background-color: m3-utils.color-with-opacity(map.get($system, primary), 30%);
148-
$active-disabled-color: null;
149-
150-
@if (meta.type-of($palette-color) == color) {
151-
$active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
152-
}
153-
@else {
154-
$active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
155-
}
156-
157-
@return (
158-
datepicker-calendar-date-selected-state-text-color: $default-contrast,
159-
datepicker-calendar-date-selected-state-background-color: $palette-color,
160-
datepicker-calendar-date-selected-disabled-state-background-color: $active-disabled-color,
161-
datepicker-calendar-date-today-selected-state-outline-color: $default-contrast,
162-
datepicker-calendar-date-focus-state-background-color: $active-background-color,
163-
datepicker-calendar-date-hover-state-background-color: $active-background-color,
164-
);
165-
}
166-
167-
@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
168-
@return (
169-
datepicker-toggle-active-state-icon-color:
170-
inspection.get-theme-color($theme, $palette-name, text),
171-
);
172-
}
173-
174-
17592
// Tokens that can be configured through Angular Material's density theming API.
17693
@function get-density-tokens($theme) {
17794
@return ();

0 commit comments

Comments
 (0)