fix(material/form-field): use system for neutral colors (#31272)

andrewseguin · Andrew Seguin · web-flow · commit 6d27e0405150 · 2025-06-03T06:24:28.000-06:00
* 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 &lt;andrewseguin@google.com&gt;
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
@@ -126,12 +126,14 @@
     background: palette.$light-theme-background-palette,
     system: (
       surface: white,
+      surface-variant: #f6f6f6,
       on-surface: rgba(black, 0.87),
       on-surface-variant: rgba(black, 0.54),
       background: map.get(palette.$grey-palette, 50),
       inverse-surface: map.get(palette.$grey-palette, 800),
       inverse-on-surface: white,
       outline: rgba(black, 0.12),
+      outline-variant: rgba(black, 0.38),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
@@ -159,12 +161,14 @@
     background: palette.$dark-theme-background-palette,
     system: (
       surface: map.get(palette.$grey-palette, 800),
+      surface-variant: #4a4a4a,
       on-surface: white,
       on-surface-variant: rgba(white, 0.7),
       background: #303030,
       inverse-surface: white,
       inverse-on-surface: rgba(black, 0.87),
       outline: rgba(white, 0.12),
+      outline-variant: rgba(white, 0.38),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
@@ -28,13 +28,11 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   $surface: map.get($system, surface);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $on-surface: if($is-dark, #fff, #000);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
-    form-field-disabled-input-text-placeholder-color:
-      inspection.get-theme-color($theme, foreground, base, 0.38),
+    form-field-disabled-input-text-placeholder-color: $disabled,
     form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
     form-field-error-text-color: inspection.get-theme-color($theme, warn),
 
@@ -62,54 +60,44 @@
     form-field-error-focus-trailing-icon-color: unset,
     form-field-error-hover-trailing-icon-color: unset,
     form-field-error-trailing-icon-color: unset,
-    form-field-enabled-select-arrow-color:
-        inspection.get-theme-color($theme, foreground, base, 0.54),
+    form-field-enabled-select-arrow-color: map.get($system, on-surface-variant),
     form-field-disabled-select-arrow-color: $disabled,
     form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
-    form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
-    form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-filled-hover-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-filled-container-color: map.get($system, surface-variant),
+    form-field-filled-disabled-container-color:
+        m3-utils.color-with-opacity(map.get($system, on-surface), 4%),
+    form-field-filled-label-text-color: map.get($system, on-surface-variant),
+    form-field-filled-hover-label-text-color: map.get($system, on-surface-variant),
     form-field-filled-disabled-label-text-color: $disabled,
-    form-field-filled-input-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    form-field-filled-input-text-color: map.get($system, on-surface),
     form-field-filled-disabled-input-text-color: $disabled,
-    form-field-filled-input-text-placeholder-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-filled-input-text-placeholder-color: map.get($system, on-surface-variant),
     form-field-filled-error-hover-label-text-color: map.get($system, error),
     form-field-filled-error-focus-label-text-color: map.get($system, error),
     form-field-filled-error-label-text-color: map.get($system, error),
     form-field-filled-error-caret-color: map.get($system, error),
-    form-field-filled-active-indicator-color:
-        inspection.get-theme-color($theme, foreground, base, 0.42),
+    form-field-filled-active-indicator-color: map.get($system, on-surface-variant),
     form-field-filled-disabled-active-indicator-color:
-        inspection.get-theme-color($theme, foreground, base, 0.06),
-    form-field-filled-hover-active-indicator-color:
-        inspection.get-theme-color($theme, system, on-surface),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    form-field-filled-hover-active-indicator-color: map.get($system, on-surface),
     form-field-filled-error-active-indicator-color: map.get($system, error),
     form-field-filled-error-focus-active-indicator-color: map.get($system, error),
     form-field-filled-error-hover-active-indicator-color: map.get($system, error),
-    form-field-outlined-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-outlined-hover-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-outlined-label-text-color: map.get($system, on-surface-variant),
+    form-field-outlined-hover-label-text-color: map.get($system, on-surface),
     form-field-outlined-disabled-label-text-color: $disabled,
-    form-field-outlined-input-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    form-field-outlined-input-text-color: map.get($system, on-surface),
     form-field-outlined-disabled-input-text-color: $disabled,
-    form-field-outlined-input-text-placeholder-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-outlined-input-text-placeholder-color: map.get($system, on-surface-variant),
     form-field-outlined-error-caret-color: map.get($system, error),
     form-field-outlined-error-focus-label-text-color: map.get($system, error),
     form-field-outlined-error-label-text-color: map.get($system, error),
     form-field-outlined-error-hover-label-text-color: map.get($system, error),
-    form-field-outlined-outline-color: inspection.get-theme-color($theme, foreground, base, 0.38),
+    form-field-outlined-outline-color: map.get($system, outline-variant),
     form-field-outlined-disabled-outline-color:
-        inspection.get-theme-color($theme, foreground, base, 0.06),
-    form-field-outlined-hover-outline-color:
-        inspection.get-theme-color($theme, system, on-surface),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    form-field-outlined-hover-outline-color: map.get($system, on-surface),
     form-field-outlined-error-focus-outline-color: map.get($system, error),
     form-field-outlined-error-hover-outline-color: map.get($system, error),
     form-field-outlined-error-outline-color: map.get($system, error),
