Skip to content

Commit 6d27e04

Browse files
andrewseguinAndrew Seguin
and
Andrew Seguin
authored
fix(material/form-field): use system for neutral colors (#31272)
* fix(material/form-field): use system for neutral colors # Conflicts: # src/material/form-field/_m2-form-field.scss * refactor: use f6f6f6 for surface-variant --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 01ec1e0 commit 6d27e04

File tree

2 files changed

+23
-31
lines changed

2 files changed

+23
-31
lines changed

src/material/core/m2/_theming.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,12 +126,14 @@
126126
background: palette.$light-theme-background-palette,
127127
system: (
128128
surface: white,
129+
surface-variant: #f6f6f6,
129130
on-surface: rgba(black, 0.87),
130131
on-surface-variant: rgba(black, 0.54),
131132
background: map.get(palette.$grey-palette, 50),
132133
inverse-surface: map.get(palette.$grey-palette, 800),
133134
inverse-on-surface: white,
134135
outline: rgba(black, 0.12),
136+
outline-variant: rgba(black, 0.38),
135137
hover-state-layer-opacity: 0.04,
136138
focus-state-layer-opacity: 0.12,
137139
pressed-state-layer-opacity: 0.12,
@@ -159,12 +161,14 @@
159161
background: palette.$dark-theme-background-palette,
160162
system: (
161163
surface: map.get(palette.$grey-palette, 800),
164+
surface-variant: #4a4a4a,
162165
on-surface: white,
163166
on-surface-variant: rgba(white, 0.7),
164167
background: #303030,
165168
inverse-surface: white,
166169
inverse-on-surface: rgba(black, 0.87),
167170
outline: rgba(white, 0.12),
171+
outline-variant: rgba(white, 0.38),
168172
hover-state-layer-opacity: 0.04,
169173
focus-state-layer-opacity: 0.12,
170174
pressed-state-layer-opacity: 0.12,

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

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,11 @@
2828
$is-dark: inspection.get-theme-type($theme) == dark;
2929
$surface: map.get($system, surface);
3030
$color-tokens: private-get-color-palette-color-tokens($theme, primary);
31-
$on-surface: if($is-dark, #fff, #000);
3231
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
3332

3433
@return map.merge($color-tokens, (
3534
// MDC has a token for the enabled placeholder, but not for the disabled one.
36-
form-field-disabled-input-text-placeholder-color:
37-
inspection.get-theme-color($theme, foreground, base, 0.38),
35+
form-field-disabled-input-text-placeholder-color: $disabled,
3836
form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
3937
form-field-error-text-color: inspection.get-theme-color($theme, warn),
4038

@@ -62,54 +60,44 @@
6260
form-field-error-focus-trailing-icon-color: unset,
6361
form-field-error-hover-trailing-icon-color: unset,
6462
form-field-error-trailing-icon-color: unset,
65-
form-field-enabled-select-arrow-color:
66-
inspection.get-theme-color($theme, foreground, base, 0.54),
63+
form-field-enabled-select-arrow-color: map.get($system, on-surface-variant),
6764
form-field-disabled-select-arrow-color: $disabled,
6865
form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
6966
form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
70-
form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
71-
form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
72-
form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
73-
form-field-filled-hover-label-text-color:
74-
inspection.get-theme-color($theme, foreground, base, 0.6),
67+
form-field-filled-container-color: map.get($system, surface-variant),
68+
form-field-filled-disabled-container-color:
69+
m3-utils.color-with-opacity(map.get($system, on-surface), 4%),
70+
form-field-filled-label-text-color: map.get($system, on-surface-variant),
71+
form-field-filled-hover-label-text-color: map.get($system, on-surface-variant),
7572
form-field-filled-disabled-label-text-color: $disabled,
76-
form-field-filled-input-text-color:
77-
inspection.get-theme-color($theme, system, on-surface),
73+
form-field-filled-input-text-color: map.get($system, on-surface),
7874
form-field-filled-disabled-input-text-color: $disabled,
79-
form-field-filled-input-text-placeholder-color:
80-
inspection.get-theme-color($theme, foreground, base, 0.6),
75+
form-field-filled-input-text-placeholder-color: map.get($system, on-surface-variant),
8176
form-field-filled-error-hover-label-text-color: map.get($system, error),
8277
form-field-filled-error-focus-label-text-color: map.get($system, error),
8378
form-field-filled-error-label-text-color: map.get($system, error),
8479
form-field-filled-error-caret-color: map.get($system, error),
85-
form-field-filled-active-indicator-color:
86-
inspection.get-theme-color($theme, foreground, base, 0.42),
80+
form-field-filled-active-indicator-color: map.get($system, on-surface-variant),
8781
form-field-filled-disabled-active-indicator-color:
88-
inspection.get-theme-color($theme, foreground, base, 0.06),
89-
form-field-filled-hover-active-indicator-color:
90-
inspection.get-theme-color($theme, system, on-surface),
82+
m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
83+
form-field-filled-hover-active-indicator-color: map.get($system, on-surface),
9184
form-field-filled-error-active-indicator-color: map.get($system, error),
9285
form-field-filled-error-focus-active-indicator-color: map.get($system, error),
9386
form-field-filled-error-hover-active-indicator-color: map.get($system, error),
94-
form-field-outlined-label-text-color:
95-
inspection.get-theme-color($theme, foreground, base, 0.6),
96-
form-field-outlined-hover-label-text-color:
97-
inspection.get-theme-color($theme, foreground, base, 0.6),
87+
form-field-outlined-label-text-color: map.get($system, on-surface-variant),
88+
form-field-outlined-hover-label-text-color: map.get($system, on-surface),
9889
form-field-outlined-disabled-label-text-color: $disabled,
99-
form-field-outlined-input-text-color:
100-
inspection.get-theme-color($theme, system, on-surface),
90+
form-field-outlined-input-text-color: map.get($system, on-surface),
10191
form-field-outlined-disabled-input-text-color: $disabled,
102-
form-field-outlined-input-text-placeholder-color:
103-
inspection.get-theme-color($theme, foreground, base, 0.6),
92+
form-field-outlined-input-text-placeholder-color: map.get($system, on-surface-variant),
10493
form-field-outlined-error-caret-color: map.get($system, error),
10594
form-field-outlined-error-focus-label-text-color: map.get($system, error),
10695
form-field-outlined-error-label-text-color: map.get($system, error),
10796
form-field-outlined-error-hover-label-text-color: map.get($system, error),
108-
form-field-outlined-outline-color: inspection.get-theme-color($theme, foreground, base, 0.38),
97+
form-field-outlined-outline-color: map.get($system, outline-variant),
10998
form-field-outlined-disabled-outline-color:
110-
inspection.get-theme-color($theme, foreground, base, 0.06),
111-
form-field-outlined-hover-outline-color:
112-
inspection.get-theme-color($theme, system, on-surface),
99+
m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
100+
form-field-outlined-hover-outline-color: map.get($system, on-surface),
113101
form-field-outlined-error-focus-outline-color: map.get($system, error),
114102
form-field-outlined-error-hover-outline-color: map.get($system, error),
115103
form-field-outlined-error-outline-color: map.get($system, error),

0 commit comments

Comments
 (0)