Skip to content

Commit f3f277a

Browse files
andrewseguinandrewseguin
authored
refactor: add system-variant system color (#31230)
# Conflicts: # src/material/button-toggle/_m2-button-toggle.scss # src/material/datepicker/_m2-datepicker.scss # src/material/expansion/_m2-expansion.scss # src/material/list/_m2-list.scss # Conflicts: # src/material/core/m2/_theming.scss # src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
1 parent 3b3a9b4 commit f3f277a

File tree

9 files changed

+56
-54
lines changed

9 files changed

+56
-54
lines changed

‎src/material/button-toggle/_m2-button-toggle.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919

2020
// Tokens that can be configured through Angular Material's color theming API.
2121
@function get-color-tokens($theme) {
22+
$system: m2-utils.get-system($theme);
23+
2224
@return (
23-
button-toggle-background-color: inspection.get-theme-color($theme, system, surface),
25+
button-toggle-background-color: map.get($system, surface),
2426
button-toggle-disabled-selected-state-background-color:
2527
inspection.get-theme-color($theme, background, selected-disabled-button),
26-
button-toggle-disabled-selected-state-text-color:
27-
inspection.get-theme-color($theme, system, on-surface),
28-
button-toggle-disabled-state-background-color:
29-
inspection.get-theme-color($theme, system, surface),
28+
button-toggle-disabled-selected-state-text-color: map.get($system, on-surface),
29+
button-toggle-disabled-state-background-color: map.get($system, surface),
3030
button-toggle-disabled-state-text-color:
3131
inspection.get-theme-color($theme, foreground, disabled-button),
32-
button-toggle-divider-color: inspection.get-theme-color($theme, system, outline),
32+
button-toggle-divider-color: map.get($system, outline),
3333
button-toggle-legacy-disabled-selected-state-background-color:
3434
inspection.get-theme-color($theme, background, selected-disabled-button),
3535
button-toggle-legacy-disabled-state-background-color:
@@ -38,16 +38,15 @@
3838
inspection.get-theme-color($theme, foreground, disabled-button),
3939
button-toggle-legacy-selected-state-background-color:
4040
inspection.get-theme-color($theme, background, selected-button),
41-
button-toggle-legacy-selected-state-text-color:
42-
inspection.get-theme-color($theme, foreground, secondary-text),
41+
button-toggle-legacy-selected-state-text-color: map.get($system, surface-variant),
4342
button-toggle-legacy-state-layer-color:
4443
inspection.get-theme-color($theme, background, focused-button),
4544
button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
4645
button-toggle-selected-state-background-color:
4746
inspection.get-theme-color($theme, background, selected-button),
48-
button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
47+
button-toggle-selected-state-text-color: map.get($system, on-surface),
4948
button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
50-
button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
49+
button-toggle-text-color: map.get($system, on-surface),
5150
);
5251
}
5352

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use '../core/theming/inspection';
22
@use '../core/style/elevation';
3+
@use '../core/tokens/m2-utils';
4+
@use 'sass:map';
35

46
// Tokens that can't be configured through Angular Material's current theming API,
57
// but may be in a future version of the theming API.
@@ -14,14 +16,16 @@
1416

1517
// Tokens that can be configured through Angular Material's color theming API.
1618
@function get-color-tokens($theme) {
19+
$system: m2-utils.get-system($theme);
20+
1721
@return (
18-
card-elevated-container-color: inspection.get-theme-color($theme, system, surface),
22+
card-elevated-container-color: map.get($system, surface),
1923
card-elevated-container-elevation: elevation.get-box-shadow(1),
20-
card-outlined-container-color: inspection.get-theme-color($theme, system, surface),
24+
card-outlined-container-color: map.get($system, surface),
2125
card-outlined-container-elevation: elevation.get-box-shadow(0),
2226
card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
23-
card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
24-
card-filled-container-color: inspection.get-theme-color($theme, system, surface),
27+
card-subtitle-text-color: map.get($system, surface-variant),
28+
card-filled-container-color: map.get($system, surface),
2529
card-filled-container-elevation: elevation.get-box-shadow(0)
2630
);
2731
}

‎src/material/core/m2/_theming.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
system: (
127127
surface: white,
128128
on-surface: rgba(black, 0.87),
129+
on-surface-variant: rgba(black, 0.54),
129130
background: map.get(palette.$grey-palette, 50),
130131
inverse-surface: map.get(palette.$grey-palette, 800),
131132
inverse-on-surface: white,
@@ -150,6 +151,7 @@
150151
system: (
151152
surface: map.get(palette.$grey-palette, 800),
152153
on-surface: white,
154+
on-surface-variant: rgba(white, 0.7),
153155
background: #303030,
154156
inverse-surface: white,
155157
inverse-on-surface: rgba(black, 0.87),

‎src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use '../../theming/inspection';
2+
@use '../../tokens/m2-utils';
3+
@use 'sass:map';
24

35
// Tokens that can't be configured through Angular Material's current theming API,
46
// but may be in a future version of the theming API.
@@ -11,12 +13,12 @@
1113
$is-dark: inspection.get-theme-type($theme) == dark;
1214
$disabled-color: if($is-dark, #686868, #b0b0b0);
1315
$checkmark-color: inspection.get-theme-color($theme, system, background);
16+
$system: m2-utils.get-system($theme);
1417

1518
@return (
1619
pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
1720
pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
18-
pseudo-checkbox-full-unselected-icon-color:
19-
inspection.get-theme-color($theme, foreground, secondary-text),
21+
pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
2022
pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
2123
pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
2224
pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,

‎src/material/core/tokens/_m2-utils.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ $private-is-internal-build: false;
1818
@return $system;
1919
}
2020

21+
$system: map.get($theme, color, system);
22+
@if $system {
23+
@return $system;
24+
}
25+
2126
@return ();
2227
}
2328

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

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@use 'sass:color';
22
@use 'sass:meta';
33
@use 'sass:math';
4-
@use 'sass:map';
54
@use '../core/theming/inspection';
65
@use '../core/style/elevation';
76
@use '../core/style/sass-utils';
8-
@use '../core/tokens/m2-utils';
97
@use '../core/tokens/m3-utils';
8+
@use '../core/tokens/m2-utils';
9+
@use 'sass:map';
1010

1111
$_selected-fade-amount: 0.6;
1212
$_today-fade-amount: 0.2;
@@ -41,11 +41,11 @@ $private-default-overlap-color: #a8dab5;
4141
// Tokens that can be configured through Angular Material's color theming API.
4242
@function get-color-tokens($theme) {
4343
$system: m2-utils.get-system($theme);
44+
4445
$inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
45-
$secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
4646
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
4747
$hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
48-
$preview-outline-color: inspection.get-theme-color($theme, system, outline);
48+
$preview-outline-color: map.get($system, outline);
4949
$today-disabled-outline-color: null;
5050
$is-dark: inspection.get-theme-type($theme) == dark;
5151

@@ -71,32 +71,27 @@ $private-default-overlap-color: #a8dab5;
7171

7272
@return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
7373
datepicker-toggle-icon-color: $inactive-icon-color,
74-
datepicker-calendar-body-label-text-color: $secondary-text-color,
74+
datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
7575
datepicker-calendar-period-button-text-color:
7676
inspection.get-theme-color($theme, foreground, base),
7777
datepicker-calendar-period-button-icon-color: $inactive-icon-color,
7878
datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
79-
datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
80-
datepicker-calendar-header-text-color: $secondary-text-color,
79+
datepicker-calendar-header-divider-color: map.get($system, outline),
80+
datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
8181

8282
// Note: though it's not text, the border is a hint about the fact
8383
// that this is today's date, so we use the hint color.
8484
datepicker-calendar-date-today-outline-color: $hint-text-color,
8585
datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
86-
datepicker-calendar-date-text-color: inspection.get-theme-color($theme, system, on-surface),
86+
datepicker-calendar-date-text-color: map.get($system, on-surface),
8787
datepicker-calendar-date-outline-color: transparent,
8888
datepicker-calendar-date-disabled-state-text-color: $disabled,
8989
datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
90-
91-
datepicker-range-input-separator-color:
92-
inspection.get-theme-color($theme, system, on-surface),
90+
datepicker-range-input-separator-color: map.get($system, on-surface),
9391
datepicker-range-input-disabled-state-separator-color: $disabled,
9492
datepicker-range-input-disabled-state-text-color: $disabled,
95-
96-
datepicker-calendar-container-background-color:
97-
inspection.get-theme-color($theme, system, surface),
98-
datepicker-calendar-container-text-color:
99-
inspection.get-theme-color($theme, system, on-surface),
93+
datepicker-calendar-container-background-color: map.get($system, surface),
94+
datepicker-calendar-container-text-color: map.get($system, on-surface),
10095
));
10196
}
10297

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,18 @@
1717
// Tokens that can be configured through Angular Material's color theming API.
1818
@function get-color-tokens($theme) {
1919
$system: m2-utils.get-system($theme);
20-
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
2120

2221
@return (
23-
expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
24-
expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
25-
expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
22+
expansion-container-background-color: map.get($system, surface),
23+
expansion-container-text-color: map.get($system, on-surface),
24+
expansion-actions-divider-color: map.get($system, outline),
2625
expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
2726
expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
2827
expansion-header-disabled-state-text-color:
2928
m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
30-
expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface),
31-
expansion-header-description-color:
32-
inspection.get-theme-color($theme, foreground, secondary-text),
33-
expansion-header-indicator-color:
34-
inspection.get-theme-color($theme, foreground, secondary-text),
29+
expansion-header-text-color: map.get($system, on-surface),
30+
expansion-header-description-color: map.get($system, on-surface-variant),
31+
expansion-header-indicator-color: map.get($system, on-surface-variant),
3532
);
3633
}
3734

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,15 @@
2929
$system: m2-utils.get-system($theme);
3030

3131
$is-dark: inspection.get-theme-type($theme) == dark;
32-
$foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
33-
$foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
3432
$text-icon-on-background:
3533
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38));
3634

3735
@return (
3836
list-list-item-label-text-color: map.get($system, on-surface),
39-
list-list-item-supporting-text-color: $foreground-secondary-text,
37+
list-list-item-supporting-text-color: map.get($system, on-surface-variant),
4038
list-list-item-leading-icon-color: $text-icon-on-background,
41-
list-list-item-trailing-supporting-text-color: $foreground-hint-text,
39+
list-list-item-trailing-supporting-text-color:
40+
inspection.get-theme-color($theme, foreground, hint-text),
4241
list-list-item-trailing-icon-color: $text-icon-on-background,
4342
list-list-item-selected-trailing-icon-color: $text-icon-on-background,
4443
list-list-item-disabled-label-text-color: map.get($system, on-surface),

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
4+
@use '../core/tokens/m2-utils';
45

56
// Tokens that can't be configured through Angular Material's current theming API,
67
// but may be in a future version of the theming API.
@@ -13,19 +14,17 @@
1314

1415
// Tokens that can be configured through Angular Material's color theming API.
1516
@function get-color-tokens($theme) {
17+
$system: m2-utils.get-system($theme);
1618
@return map.merge(private-get-color-palette-color-tokens($theme, primary), (
17-
stepper-container-color: inspection.get-theme-color($theme, system, surface),
18-
stepper-line-color: inspection.get-theme-color($theme, system, outline),
19+
stepper-container-color: map.get($system, surface),
20+
stepper-line-color: map.get($system, outline),
1921
stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
2022
stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
21-
stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
22-
stepper-header-optional-label-text-color: inspection.get-theme-color(
23-
$theme, foreground, secondary-text),
24-
stepper-header-selected-state-label-text-color:
25-
inspection.get-theme-color($theme, system, on-surface),
23+
stepper-header-label-text-color: map.get($system, on-surface-variant),
24+
stepper-header-optional-label-text-color: map.get($system, on-surface-variant),
25+
stepper-header-selected-state-label-text-color: map.get($system, on-surface),
2626
stepper-header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
27-
stepper-header-icon-background-color:
28-
inspection.get-theme-color($theme, foreground, secondary-text),
27+
stepper-header-icon-background-color: map.get($system, on-surface-variant),
2928
stepper-header-error-state-icon-foreground-color:
3029
inspection.get-theme-color($theme, warn, text),
3130
stepper-header-error-state-icon-background-color: transparent,

0 commit comments

Comments
 (0)