Skip to content

Commit 020c6af

Browse files
andrewseguinandrewseguin
authored
refactor: align on disabled colors (angular#31237)
1 parent 53d4e3d commit 020c6af

File tree

8 files changed

+61
-50
lines changed

8 files changed

+61
-50
lines changed

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:meta';
22
@use 'sass:map';
33
@use '../core/tokens/m2-utils';
4+
@use '../core/tokens/m3-utils';
45
@use '../core/theming/theming';
56
@use '../core/theming/inspection';
67
@use '../core/style/elevation';
@@ -45,21 +46,21 @@
4546
$system: m2-utils.get-system($theme);
4647
$is-dark: inspection.get-theme-type($theme) == dark;
4748
$outline: inspection.get-theme-color($theme, system, outline);
49+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
50+
$disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
51+
4852
@return (
4953
button-filled-container-color: map.get($system, surface),
50-
button-filled-disabled-container-color:
51-
inspection.get-theme-color($theme, foreground, base, 0.12),
52-
button-filled-disabled-label-text-color:
53-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
54+
button-filled-disabled-container-color: $disabled-container,
55+
button-filled-disabled-label-text-color: $disabled,
5456
button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
5557
button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5658
button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
5759
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
5860
button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
5961
button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
6062
button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
61-
button-outlined-disabled-label-text-color:
62-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
63+
button-outlined-disabled-label-text-color: $disabled,
6364
button-outlined-disabled-outline-color: $outline,
6465
button-outlined-disabled-state-layer-color:
6566
inspection.get-theme-color($theme, foreground, base),
@@ -72,10 +73,8 @@
7273
button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
7374
button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
7475
button-protected-container-color: map.get($system, surface),
75-
button-protected-disabled-container-color:
76-
inspection.get-theme-color($theme, foreground, base, 0.12),
77-
button-protected-disabled-label-text-color:
78-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
76+
button-protected-disabled-container-color: $disabled-container,
77+
button-protected-disabled-label-text-color: $disabled,
7978
button-protected-disabled-state-layer-color:
8079
inspection.get-theme-color($theme, foreground, base),
8180
button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
@@ -85,8 +84,7 @@
8584
map.get($system, pressed-state-layer-opacity),
8685
button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
8786
button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
88-
button-text-disabled-label-text-color:
89-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
87+
button-text-disabled-label-text-color: $disabled,
9088
button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
9189
button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
9290
button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
@@ -95,10 +93,8 @@
9593
button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
9694
button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
9795
button-tonal-container-color: map.get($system, surface),
98-
button-tonal-disabled-container-color:
99-
inspection.get-theme-color($theme, foreground, base, 0.12),
100-
button-tonal-disabled-label-text-color:
101-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
96+
button-tonal-disabled-container-color: $disabled-container,
97+
button-tonal-disabled-label-text-color: $disabled,
10298
button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
10399
button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
104100
button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
22
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/style/elevation';
@@ -31,24 +32,22 @@
3132
@function get-color-tokens($theme) {
3233
$system: m2-utils.get-system($theme);
3334
$is-dark: inspection.get-theme-type($theme) == dark;
35+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
36+
$disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
3437

3538
@return (
3639
fab-container-color: map.get($system, surface),
37-
fab-disabled-state-container-color:
38-
inspection.get-theme-color($theme, foreground, base, 0.12),
39-
fab-disabled-state-foreground-color:
40-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
40+
fab-disabled-state-container-color: $disabled-container,
41+
fab-disabled-state-foreground-color: $disabled,
4142
fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
4243
fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
4344
fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
4445
fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
4546
fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
4647
fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
4748
fab-small-container-color: map.get($system, surface),
48-
fab-small-disabled-state-container-color:
49-
inspection.get-theme-color($theme, foreground, base, 0.12),
50-
fab-small-disabled-state-foreground-color:
51-
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
49+
fab-small-disabled-state-container-color: $disabled-container,
50+
fab-small-disabled-state-foreground-color: $disabled,
5251
fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
5352
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5453
fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
22
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/m2/theming' as m2-theming;
@@ -28,7 +29,7 @@
2829
$is-dark: inspection.get-theme-type($theme) == dark;
2930
$foreground-base: inspection.get-theme-color($theme, foreground, base);
3031
$palette-default: inspection.get-theme-color($theme, $palette-name, default);
31-
$disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
32+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
3233
$palette-selected: inspection.get-theme-color($theme, $palette-name);
3334
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
3435
$active-border-color:
@@ -37,10 +38,10 @@
3738
inspection.get-theme-color($theme, $palette-name, default-contrast);
3839

3940
$tokens: (
40-
checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
41+
checkbox-disabled-label-color: $disabled,
4142
checkbox-label-text-color: map.get($system, on-surface),
42-
checkbox-disabled-selected-icon-color: $disabled-color,
43-
checkbox-disabled-unselected-icon-color: $disabled-color,
43+
checkbox-disabled-selected-icon-color: $disabled,
44+
checkbox-disabled-unselected-icon-color: $disabled,
4445
checkbox-selected-checkmark-color: $selected-checkmark-color,
4546
checkbox-selected-focus-icon-color: $palette-selected,
4647
checkbox-selected-hover-icon-color: $palette-selected,

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
@use 'sass:color';
22
@use 'sass:meta';
33
@use 'sass:math';
4+
@use 'sass:map';
45
@use '../core/theming/inspection';
56
@use '../core/style/elevation';
67
@use '../core/style/sass-utils';
8+
@use '../core/tokens/m2-utils';
9+
@use '../core/tokens/m3-utils';
710

811
$_selected-fade-amount: 0.6;
912
$_today-fade-amount: 0.2;
@@ -37,10 +40,11 @@ $private-default-overlap-color: #a8dab5;
3740

3841
// Tokens that can be configured through Angular Material's color theming API.
3942
@function get-color-tokens($theme) {
43+
$system: m2-utils.get-system($theme);
4044
$inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
4145
$text-color: inspection.get-theme-color($theme, system, on-surface);
4246
$secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
43-
$disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
47+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
4448
$hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
4549
$preview-outline-color: inspection.get-theme-color($theme, system, outline);
4650
$today-disabled-outline-color: null;
@@ -63,7 +67,7 @@ $private-default-overlap-color: #a8dab5;
6367
$today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
6468
}
6569
@else {
66-
$today-disabled-outline-color: $disabled-text-color;
70+
$today-disabled-outline-color: $disabled;
6771
}
6872

6973
@return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
@@ -82,12 +86,12 @@ $private-default-overlap-color: #a8dab5;
8286
datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
8387
datepicker-calendar-date-text-color: $text-color,
8488
datepicker-calendar-date-outline-color: transparent,
85-
datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
89+
datepicker-calendar-date-disabled-state-text-color: $disabled,
8690
datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
8791

8892
datepicker-range-input-separator-color: $text-color,
89-
datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
90-
datepicker-range-input-disabled-state-text-color: $disabled-text-color,
93+
datepicker-range-input-disabled-state-separator-color: $disabled,
94+
datepicker-range-input-disabled-state-text-color: $disabled,
9195

9296
datepicker-calendar-container-background-color:
9397
inspection.get-theme-color($theme, system, surface),
@@ -138,6 +142,7 @@ $private-default-overlap-color: #a8dab5;
138142
}
139143

140144
@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
145+
$system: m2-utils.get-system($theme);
141146
$palette-color: inspection.get-theme-color($theme, $palette-name);
142147
$default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
143148
$active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3);
@@ -147,7 +152,7 @@ $private-default-overlap-color: #a8dab5;
147152
$active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
148153
}
149154
@else {
150-
$active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button);
155+
$active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
151156
}
152157

153158
@return (

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

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

57
// Tokens that can't be configured through Angular Material's current theming API,
68
// but may be in a future version of the theming API.
@@ -14,14 +16,17 @@
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+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
21+
1722
@return (
1823
expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
1924
expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
2025
expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
2126
expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
2227
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),
28+
expansion-header-disabled-state-text-color:
29+
m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
2530
expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface),
2631
expansion-header-description-color:
2732
inspection.get-theme-color($theme, foreground, secondary-text),

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../core/m2/palette' as m2-palette;
22
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
34
@use '../core/theming/inspection';
45
@use '../core/theming/theming';
56
@use 'sass:color';
@@ -29,7 +30,7 @@
2930
$warn-color: inspection.get-theme-color($theme, warn);
3031
$color-tokens: private-get-color-palette-color-tokens($theme, primary);
3132
$on-surface: if($is-dark, #fff, #000);
32-
$disabled: inspection.get-theme-color($theme, foreground, base, 0.38);
33+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
3334

3435
@return map.merge($color-tokens, (
3536
// MDC has a token for the enabled placeholder, but not for the disabled one.
@@ -64,21 +65,18 @@
6465
form-field-error-trailing-icon-color: unset,
6566
form-field-enabled-select-arrow-color:
6667
inspection.get-theme-color($theme, foreground, base, 0.54),
67-
form-field-disabled-select-arrow-color:
68-
inspection.get-theme-color($theme, foreground, base, 0.38),
68+
form-field-disabled-select-arrow-color: $disabled,
6969
form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
7070
form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
7171
form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
7272
form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
7373
form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
7474
form-field-filled-hover-label-text-color:
7575
inspection.get-theme-color($theme, foreground, base, 0.6),
76-
form-field-filled-disabled-label-text-color:
77-
inspection.get-theme-color($theme, foreground, base, 0.38),
76+
form-field-filled-disabled-label-text-color: $disabled,
7877
form-field-filled-input-text-color:
7978
inspection.get-theme-color($theme, foreground, base, 0.87),
80-
form-field-filled-disabled-input-text-color:
81-
inspection.get-theme-color($theme, foreground, base, 0.38),
79+
form-field-filled-disabled-input-text-color: $disabled,
8280
form-field-filled-input-text-placeholder-color:
8381
inspection.get-theme-color($theme, foreground, base, 0.6),
8482
form-field-filled-error-hover-label-text-color: $warn-color,
@@ -98,12 +96,10 @@
9896
inspection.get-theme-color($theme, foreground, base, 0.6),
9997
form-field-outlined-hover-label-text-color:
10098
inspection.get-theme-color($theme, foreground, base, 0.6),
101-
form-field-outlined-disabled-label-text-color:
102-
inspection.get-theme-color($theme, foreground, base, 0.38),
99+
form-field-outlined-disabled-label-text-color: $disabled,
103100
form-field-outlined-input-text-color:
104101
inspection.get-theme-color($theme, foreground, base, 0.87),
105-
form-field-outlined-disabled-input-text-color:
106-
inspection.get-theme-color($theme, foreground, base, 0.38),
102+
form-field-outlined-disabled-input-text-color: $disabled,
107103
form-field-outlined-input-text-placeholder-color:
108104
inspection.get-theme-color($theme, foreground, base, 0.6),
109105
form-field-outlined-error-caret-color: $warn-color,

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

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

79
// Tokens that can't be configured through Angular Material's current theming API,
810
// but may be in a future version of the theming API.
@@ -19,13 +21,15 @@
1921

2022
// Tokens that can be configured through Angular Material's color theming API.
2123
@function get-color-tokens($theme, $palette-name: accent) {
24+
$system: m2-utils.get-system($theme);
2225
$is-dark: inspection.get-theme-type($theme) == dark;
2326
$palette-color: inspection.get-theme-color($theme, $palette-name, default);
2427
$icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
28+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
2529

2630
@return (
2731
radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
28-
radio-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
32+
radio-disabled-label-color: $disabled,
2933
radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, base),
3034
radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, base),
3135
radio-label-text-color: inspection.get-theme-color($theme, system, on-surface),

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@use '../core/theming/inspection';
33
@use '../core/theming/theming';
44
@use '../core/style/elevation';
5+
@use '../core/tokens/m2-utils';
6+
@use '../core/tokens/m3-utils';
57

68
// Tokens that can't be configured through Angular Material's current theming API,
79
// but may be in a future version of the theming API.
@@ -13,13 +15,16 @@
1315

1416
// Tokens that can be configured through Angular Material's color theming API.
1517
@function get-color-tokens($theme, $palette-name: primary) {
18+
$system: m2-utils.get-system($theme);
19+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
20+
1621
@return (
1722
select-panel-background-color: inspection.get-theme-color($theme, system, surface),
1823
select-enabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.87),
19-
select-disabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.38),
24+
select-disabled-trigger-text-color: $disabled,
2025
select-placeholder-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
2126
select-enabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.54),
22-
select-disabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.38),
27+
select-disabled-arrow-color: $disabled,
2328
select-focused-arrow-color: inspection.get-theme-color($theme, $palette-name, default, 0.87),
2429
select-invalid-arrow-color: inspection.get-theme-color($theme, warn, default, 0.87),
2530
);

0 commit comments

Comments
 (0)