Skip to content

Commit 7faae30

Browse files
andrewseguinandrewseguin
committed
refactor: add system-variant system color
1 parent 6082c1f commit 7faae30

File tree

8 files changed

+60
-56
lines changed

8 files changed

+60
-56
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, background, base),
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.7),
129130
outline: rgba(black, 0.12),
130131
hover-state-layer-opacity: 0.04,
131132
focus-state-layer-opacity: 0.12,
@@ -147,6 +148,7 @@
147148
system: (
148149
surface: map.get(palette.$grey-palette, 800),
149150
on-surface: white,
151+
on-surface-variant: rgba(black, 0.54),
150152
outline: rgba(white, 0.12),
151153
hover-state-layer-opacity: 0.04,
152154
focus-state-layer-opacity: 0.12,

‎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, background, 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/datepicker/_m2-datepicker.scss‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@use '../core/theming/inspection';
55
@use '../core/style/elevation';
66
@use '../core/style/sass-utils';
7+
@use '../core/tokens/m2-utils';
8+
@use 'sass:map';
79

810
$_selected-fade-amount: 0.6;
911
$_today-fade-amount: 0.2;
@@ -37,12 +39,12 @@ $private-default-overlap-color: #a8dab5;
3739

3840
// Tokens that can be configured through Angular Material's color theming API.
3941
@function get-color-tokens($theme) {
42+
$system: m2-utils.get-system($theme);
43+
4044
$inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
41-
$text-color: inspection.get-theme-color($theme, system, on-surface);
42-
$secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
4345
$disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
4446
$hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
45-
$preview-outline-color: inspection.get-theme-color($theme, system, outline);
47+
$preview-outline-color: map.get($system, outline);
4648
$today-disabled-outline-color: null;
4749
$is-dark: inspection.get-theme-type($theme) == dark;
4850

@@ -68,30 +70,27 @@ $private-default-overlap-color: #a8dab5;
6870

6971
@return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
7072
datepicker-toggle-icon-color: $inactive-icon-color,
71-
datepicker-calendar-body-label-text-color: $secondary-text-color,
73+
datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
7274
datepicker-calendar-period-button-text-color:
7375
inspection.get-theme-color($theme, foreground, base),
7476
datepicker-calendar-period-button-icon-color: $inactive-icon-color,
7577
datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
76-
datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
77-
datepicker-calendar-header-text-color: $secondary-text-color,
78+
datepicker-calendar-header-divider-color: map.get($system, outline),
79+
datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
7880

7981
// Note: though it's not text, the border is a hint about the fact
8082
// that this is today's date, so we use the hint color.
8183
datepicker-calendar-date-today-outline-color: $hint-text-color,
8284
datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
83-
datepicker-calendar-date-text-color: $text-color,
85+
datepicker-calendar-date-text-color: map.get($system, on-surface),
8486
datepicker-calendar-date-outline-color: transparent,
8587
datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
8688
datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
87-
88-
datepicker-range-input-separator-color: $text-color,
89+
datepicker-range-input-separator-color: map.get($system, on-surface),
8990
datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
9091
datepicker-range-input-disabled-state-text-color: $disabled-text-color,
91-
92-
datepicker-calendar-container-background-color:
93-
inspection.get-theme-color($theme, system, surface),
94-
datepicker-calendar-container-text-color: $text-color,
92+
datepicker-calendar-container-background-color: map.get($system, surface),
93+
datepicker-calendar-container-text-color: map.get($system, on-surface),
9594
));
9695
}
9796

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

Lines changed: 11 additions & 10 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.
@@ -14,19 +15,19 @@
1415

1516
// Tokens that can be configured through Angular Material's color theming API.
1617
@function get-color-tokens($theme) {
18+
$system: m2-utils.get-system($theme);
19+
1720
@return (
18-
expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
19-
expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
20-
expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
21+
expansion-container-background-color: map.get($system, surface),
22+
expansion-container-text-color: map.get($system, on-surface),
23+
expansion-actions-divider-color: map.get($system, outline),
2124
expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
2225
expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
23-
expansion-header-disabled-state-text-color: inspection.get-theme-color(
24-
$theme, foreground, disabled-button),
25-
expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface),
26-
expansion-header-description-color:
27-
inspection.get-theme-color($theme, foreground, secondary-text),
28-
expansion-header-indicator-color:
29-
inspection.get-theme-color($theme, foreground, secondary-text),
26+
expansion-header-disabled-state-text-color:
27+
inspection.get-theme-color($theme, foreground, disabled-button),
28+
expansion-header-text-color: map.get($system, on-surface),
29+
expansion-header-description-color: map.get($system, on-surface-variant),
30+
expansion-header-indicator-color: map.get($system, on-surface-variant),
3031
);
3132
}
3233

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,26 @@
3030

3131
$is-dark: inspection.get-theme-type($theme) == dark;
3232
$foreground-base: inspection.get-theme-color($theme, foreground, base);
33-
$foreground-text: map.get($system, on-surface);
34-
$foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
35-
$foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
3633
$text-icon-on-background:
3734
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38));
3835

3936
@return (
40-
list-list-item-label-text-color: $foreground-text,
41-
list-list-item-supporting-text-color: $foreground-secondary-text,
37+
list-list-item-label-text-color: map.get($system, on-surface),
38+
list-list-item-supporting-text-color: map.get($system, on-surface-variant),
4239
list-list-item-leading-icon-color: $text-icon-on-background,
43-
list-list-item-trailing-supporting-text-color: $foreground-hint-text,
40+
list-list-item-trailing-supporting-text-color:
41+
inspection.get-theme-color($theme, foreground, hint-text),
4442
list-list-item-trailing-icon-color: $text-icon-on-background,
4543
list-list-item-selected-trailing-icon-color: $text-icon-on-background,
4644
list-list-item-disabled-label-text-color: $foreground-base,
4745
list-list-item-disabled-leading-icon-color: $foreground-base,
4846
list-list-item-disabled-trailing-icon-color: $foreground-base,
49-
list-list-item-hover-label-text-color: $foreground-text,
47+
list-list-item-hover-label-text-color: map.get($system, on-surface),
5048
list-list-item-hover-leading-icon-color: $text-icon-on-background,
5149
list-list-item-hover-state-layer-color: $foreground-base,
5250
list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
5351
list-list-item-hover-trailing-icon-color: $text-icon-on-background,
54-
list-list-item-focus-label-text-color: $foreground-text,
52+
list-list-item-focus-label-text-color: map.get($system, on-surface),
5553
list-list-item-focus-state-layer-color: $foreground-base,
5654
list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5755
);

‎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)