Skip to content

Commit 8f80188

Browse files
andrewseguinAndrew Seguin
andrewseguin
authored and
Andrew Seguin
committed
fix(multiple): use system on-surface
1 parent 020c6af commit 8f80188

File tree

13 files changed

+42
-52
lines changed

13 files changed

+42
-52
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
button-toggle-selected-state-background-color:
4747
inspection.get-theme-color($theme, background, selected-button),
4848
button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
49-
button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),
49+
button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
5050
button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
5151
);
5252
}

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
55
@use '../core/theming/inspection';
6-
@use '../core/m2/theming' as m2-theming;
7-
@use '../core/m2/palette' as m2-palette;
86

97
// Tokens that can't be configured through Angular Material's current theming API,
108
// but may be in a future version of the theming API.
@@ -32,8 +30,6 @@
3230
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
3331
$palette-selected: inspection.get-theme-color($theme, $palette-name);
3432
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
35-
$active-border-color:
36-
m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
3733
$selected-checkmark-color:
3834
inspection.get-theme-color($theme, $palette-name, default-contrast);
3935

@@ -47,14 +43,14 @@
4743
checkbox-selected-hover-icon-color: $palette-selected,
4844
checkbox-selected-icon-color: $palette-selected,
4945
checkbox-selected-pressed-icon-color: $palette-selected,
50-
checkbox-unselected-focus-icon-color: $active-border-color,
51-
checkbox-unselected-hover-icon-color: $active-border-color,
46+
checkbox-unselected-focus-icon-color: map.get($system, on-surface),
47+
checkbox-unselected-hover-icon-color: map.get($system, on-surface),
5248
checkbox-unselected-icon-color: $border-color,
5349
checkbox-selected-focus-state-layer-color: $palette-default,
5450
checkbox-selected-hover-state-layer-color: $palette-default,
5551
checkbox-selected-pressed-state-layer-color: $palette-default,
56-
checkbox-unselected-focus-state-layer-color: $foreground-base,
57-
checkbox-unselected-hover-state-layer-color: $foreground-base,
52+
checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
53+
checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
5854
checkbox-unselected-pressed-state-layer-color: $foreground-base,
5955
);
6056

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ $private-default-overlap-color: #a8dab5;
4242
@function get-color-tokens($theme) {
4343
$system: m2-utils.get-system($theme);
4444
$inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
45-
$text-color: inspection.get-theme-color($theme, system, on-surface);
4645
$secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
4746
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
4847
$hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
@@ -84,18 +83,20 @@ $private-default-overlap-color: #a8dab5;
8483
// that this is today's date, so we use the hint color.
8584
datepicker-calendar-date-today-outline-color: $hint-text-color,
8685
datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
87-
datepicker-calendar-date-text-color: $text-color,
86+
datepicker-calendar-date-text-color: inspection.get-theme-color($theme, system, on-surface),
8887
datepicker-calendar-date-outline-color: transparent,
8988
datepicker-calendar-date-disabled-state-text-color: $disabled,
9089
datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
9190

92-
datepicker-range-input-separator-color: $text-color,
91+
datepicker-range-input-separator-color:
92+
inspection.get-theme-color($theme, system, on-surface),
9393
datepicker-range-input-disabled-state-separator-color: $disabled,
9494
datepicker-range-input-disabled-state-text-color: $disabled,
9595

9696
datepicker-calendar-container-background-color:
9797
inspection.get-theme-color($theme, system, surface),
98-
datepicker-calendar-container-text-color: $text-color,
98+
datepicker-calendar-container-text-color:
99+
inspection.get-theme-color($theme, system, on-surface),
99100
));
100101
}
101102

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
$is-dark: inspection.get-theme-type($theme) == dark;
2727
@return (
2828
dialog-container-color: inspection.get-theme-color($theme, system, surface),
29-
dialog-subhead-color: inspection.get-theme-color($theme, foreground, base, 0.87),
29+
dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface),
3030
dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
3131
);
3232
}

‎src/material/form-field/_m2-form-field.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
// MDC has a token for the enabled placeholder, but not for the disabled one.
3737
form-field-disabled-input-text-placeholder-color:
3838
inspection.get-theme-color($theme, foreground, base, 0.38),
39-
form-field-state-layer-color: inspection.get-theme-color($theme, foreground, base, 0.87),
39+
form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
4040
form-field-error-text-color: inspection.get-theme-color($theme, warn),
4141

4242
// On dark themes we set the native `select` color to some shade of white,
@@ -75,7 +75,7 @@
7575
inspection.get-theme-color($theme, foreground, base, 0.6),
7676
form-field-filled-disabled-label-text-color: $disabled,
7777
form-field-filled-input-text-color:
78-
inspection.get-theme-color($theme, foreground, base, 0.87),
78+
inspection.get-theme-color($theme, system, on-surface),
7979
form-field-filled-disabled-input-text-color: $disabled,
8080
form-field-filled-input-text-placeholder-color:
8181
inspection.get-theme-color($theme, foreground, base, 0.6),
@@ -88,7 +88,7 @@
8888
form-field-filled-disabled-active-indicator-color:
8989
inspection.get-theme-color($theme, foreground, base, 0.06),
9090
form-field-filled-hover-active-indicator-color:
91-
inspection.get-theme-color($theme, foreground, base, 0.87),
91+
inspection.get-theme-color($theme, system, on-surface),
9292
form-field-filled-error-active-indicator-color: $warn-color,
9393
form-field-filled-error-focus-active-indicator-color: $warn-color,
9494
form-field-filled-error-hover-active-indicator-color: $warn-color,
@@ -98,7 +98,7 @@
9898
inspection.get-theme-color($theme, foreground, base, 0.6),
9999
form-field-outlined-disabled-label-text-color: $disabled,
100100
form-field-outlined-input-text-color:
101-
inspection.get-theme-color($theme, foreground, base, 0.87),
101+
inspection.get-theme-color($theme, system, on-surface),
102102
form-field-outlined-disabled-input-text-color: $disabled,
103103
form-field-outlined-input-text-placeholder-color:
104104
inspection.get-theme-color($theme, foreground, base, 0.6),
@@ -110,7 +110,7 @@
110110
form-field-outlined-disabled-outline-color:
111111
inspection.get-theme-color($theme, foreground, base, 0.06),
112112
form-field-outlined-hover-outline-color:
113-
inspection.get-theme-color($theme, foreground, base, 0.87),
113+
inspection.get-theme-color($theme, system, on-surface),
114114
form-field-outlined-error-focus-outline-color: $warn-color,
115115
form-field-outlined-error-hover-outline-color: $warn-color,
116116
form-field-outlined-error-outline-color: $warn-color,

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,30 +29,28 @@
2929
$system: m2-utils.get-system($theme);
3030

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

3937
@return (
40-
list-list-item-label-text-color: $foreground-text,
38+
list-list-item-label-text-color: map.get($system, on-surface),
4139
list-list-item-supporting-text-color: $foreground-secondary-text,
4240
list-list-item-leading-icon-color: $text-icon-on-background,
4341
list-list-item-trailing-supporting-text-color: $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,
46-
list-list-item-disabled-label-text-color: $foreground-base,
47-
list-list-item-disabled-leading-icon-color: $foreground-base,
48-
list-list-item-disabled-trailing-icon-color: $foreground-base,
49-
list-list-item-hover-label-text-color: $foreground-text,
44+
list-list-item-disabled-label-text-color: map.get($system, on-surface),
45+
list-list-item-disabled-leading-icon-color: map.get($system, on-surface),
46+
list-list-item-disabled-trailing-icon-color: map.get($system, on-surface),
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,
51-
list-list-item-hover-state-layer-color: $foreground-base,
49+
list-list-item-hover-state-layer-color: map.get($system, on-surface),
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,
55-
list-list-item-focus-state-layer-color: $foreground-base,
52+
list-list-item-focus-label-text-color: map.get($system, on-surface),
53+
list-list-item-focus-state-layer-color: map.get($system, on-surface),
5654
list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5755
);
5856
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@
2626
$is-dark: inspection.get-theme-type($theme) == dark;
2727
$active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
2828
if($is-dark, 0.08, 0.04));
29-
$text-color: inspection.get-theme-color($theme, system, on-surface);
3029

3130
@return (
32-
menu-item-label-text-color: $text-color,
33-
menu-item-icon-color: $text-color,
31+
menu-item-label-text-color: inspection.get-theme-color($theme, system, on-surface),
32+
menu-item-icon-color: inspection.get-theme-color($theme, system, on-surface),
3433
menu-item-hover-state-layer-color: $active-state-layer-color,
3534
menu-item-focus-state-layer-color: $active-state-layer-color,
3635
menu-container-color: inspection.get-theme-color($theme, system, surface),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
// Tokens that can be configured through Angular Material's color theming API.
1313
@function get-color-tokens($theme) {
1414
@return (
15-
paginator-container-text-color: inspection.get-theme-color($theme, foreground, base, 0.87),
15+
paginator-container-text-color: inspection.get-theme-color($theme, system, on-surface),
1616
paginator-container-background-color: inspection.get-theme-color($theme, system, surface),
1717
paginator-enabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
1818
paginator-disabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.12),

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
4-
@use '../core/m2/palette' as m2-palette;
5-
@use '../core/m2/theming' as m2-theming;
4+
@use '../core/tokens/m2-utils';
65
@use '../core/tokens/m2-utils';
76
@use '../core/tokens/m3-utils';
87

@@ -24,24 +23,23 @@
2423
$system: m2-utils.get-system($theme);
2524
$is-dark: inspection.get-theme-type($theme) == dark;
2625
$palette-color: inspection.get-theme-color($theme, $palette-name, default);
27-
$icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
2826
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
2927

3028
@return (
3129
radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
3230
radio-disabled-label-color: $disabled,
33-
radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, base),
34-
radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, base),
35-
radio-label-text-color: inspection.get-theme-color($theme, system, on-surface),
36-
radio-ripple-color: inspection.get-theme-color($theme, foreground, base),
31+
radio-disabled-selected-icon-color: map.get($system, on-surface),
32+
radio-disabled-unselected-icon-color: map.get($system, on-surface),
33+
radio-label-text-color: map.get($system, on-surface),
34+
radio-ripple-color: map.get($system, on-surface),
3735
radio-selected-focus-icon-color: $palette-color,
3836
radio-selected-hover-icon-color: $palette-color,
3937
radio-selected-icon-color: $palette-color,
4038
radio-selected-pressed-icon-color: $palette-color,
41-
radio-unselected-focus-icon-color: $icon-color,
42-
radio-unselected-hover-icon-color: $icon-color,
39+
radio-unselected-focus-icon-color: map.get($system, on-surface),
40+
radio-unselected-hover-icon-color: map.get($system, on-surface),
4341
radio-unselected-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
44-
radio-unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
42+
radio-unselected-pressed-icon-color: map.get($system, on-surface),
4543
);
4644
}
4745

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
@return (
2222
select-panel-background-color: inspection.get-theme-color($theme, system, surface),
23-
select-enabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.87),
23+
select-enabled-trigger-text-color: inspection.get-theme-color($theme, system, on-surface),
2424
select-disabled-trigger-text-color: $disabled,
2525
select-placeholder-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
2626
select-enabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.54),

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,20 @@
3333
@function get-color-tokens($theme) {
3434
$theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
3535
$is-dark: inspection.get-theme-type($theme) == dark;
36-
$elevation: inspection.get-theme-color($theme, foreground, elevation);
3736
$on-surface: if($is-dark, #fff, #000);
3837

3938
@return map.merge(
4039
$theme-color-tokens,
4140
(
42-
slider-disabled-active-track-color: $on-surface,
43-
slider-disabled-handle-color: $on-surface,
44-
slider-disabled-inactive-track-color: $on-surface,
41+
slider-disabled-active-track-color: inspection.get-theme-color($theme, system, on-surface),
42+
slider-disabled-handle-color: inspection.get-theme-color($theme, system, on-surface),
43+
slider-disabled-inactive-track-color: inspection.get-theme-color($theme, system, on-surface),
4544
slider-label-container-color: $on-surface,
4645
slider-label-label-text-color: if($is-dark, #000, #fff),
4746
slider-value-indicator-opacity: if($is-dark, 0.9, 0.6),
4847
slider-with-overlap-handle-outline-color: #fff,
49-
slider-with-tick-marks-disabled-container-color: $on-surface,
48+
slider-with-tick-marks-disabled-container-color:
49+
inspection.get-theme-color($theme, system, on-surface),
5050
),
5151
);
5252
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
$tokens: (
3434
tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
35-
tab-pagination-icon-color: inspection.get-theme-color($theme, foreground, base),
35+
tab-pagination-icon-color: inspection.get-theme-color($theme, system, on-surface),
3636

3737
// Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
3838
tab-inactive-label-text-color: $inactive-label-text-color,

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010

1111
// Tokens that can be configured through Angular Material's color theming API.
1212
@function get-color-tokens($theme) {
13-
$foreground-base: inspection.get-theme-color($theme, foreground, base);
14-
1513
@return (
1614
tree-container-background-color: inspection.get-theme-color($theme, system, surface),
1715
tree-node-text-color: inspection.get-theme-color($theme, system, on-surface),

0 commit comments

Comments
 (0)