Give outlined inputs a surface background

changelog.md

@@ -10,6 +10,7 @@
 
 ### Changed
 
+- Outlined inputs (TextField, Select, Autocomplete) now have a `surface` background, so they stay distinct on container or elevated surfaces.
 - _Dialog_ now defaults to elevation 16 (`surface.strong`'s tone) instead of MUI's 24, and temporary _Drawer_ to elevation 4 instead of 16, so floating surfaces order Drawer < Menu < Dialog and dialog text keeps more contrast.
 - **Breaking** _Dialog_'s deprecated `PaperProps` is now ignored. Move it to `slotProps.paper`, e.g. with `npx @mui/codemod@latest deprecations/dialog-props <path>`. If you use MRT, also check `muiEditRowDialogProps` and `muiCreateRowModalProps` by hand, as the codemod won't reach them.
 

src/components/MUI/Inputs/Select.stories.tsx

@@ -88,6 +88,24 @@ export const FilledAndStandard: Story = {
   ),
 };
 
+export const OnSurfaces: Story = {
+  name: "On surfaces",
+  render: (args: SelectArgs) => (
+    <Box style={{ display: "grid", gap: 12, maxWidth: 420 }}>
+      {[
+        ["Background", "var(--ds-background)"],
+        ["Surface", "var(--ds-surface)"],
+        ["Surface container", "var(--ds-surface-container)"],
+        ["Surface container high", "var(--ds-surface-container-high)"],
+      ].map(([name, background]) => (
+        <Box key={name} sx={{ p: 2, backgroundColor: background }}>
+          {renderSelectWithLabel({ ...args, variant: "outlined", label: name })}
+        </Box>
+      ))}
+    </Box>
+  ),
+};
+
 export const States: Story = {
   render: (args: SelectArgs) => (
     <Box style={{ display: "grid", gap: 12 }}>

src/components/MUI/Inputs/TextField.stories.tsx

@@ -184,6 +184,30 @@ export const States: Story = {
   },
 };
 
+export const OnSurfaces: Story = {
+  name: "On surfaces",
+  render: (_args) => (
+    <Box style={{ display: "grid", gap: 12, maxWidth: 420 }}>
+      {[
+        ["Background", "var(--ds-background)"],
+        ["Surface", "var(--ds-surface)"],
+        ["Surface container", "var(--ds-surface-container)"],
+        ["Surface container high", "var(--ds-surface-container-high)"],
+      ].map(([name, background]) => (
+        <Box key={name} sx={{ p: 2, backgroundColor: background }}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            label={name}
+            placeholder="Enter a value"
+            helperText="Outlined fields keep their own surface background"
+          />
+        </Box>
+      ))}
+    </Box>
+  ),
+};
+
 export const Validation: Story = {
   render: (_args) => (
     <Box style={{ display: "grid", gap: 12, maxWidth: 420 }}>

src/themes/DiamondDSTheme.test.ts

@@ -787,6 +787,12 @@ describe("DiamondDS component overrides", () => {
     });
 
     // Rest
+    expect(styles.backgroundColor).toBe("var(--ds-surface)");
+    expect(
+      styles[
+        "&:not(.Mui-disabled):not(.MuiInputBase-readOnly) .MuiOutlinedInput-notchedOutline legend > span"
+      ],
+    ).toEqual(expect.objectContaining({ backgroundColor: "inherit" }));
     expect(styles["& .MuiOutlinedInput-notchedOutline"]).toEqual(
       expect.objectContaining({
         borderColor: "var(--ds-border-emphasis)",

src/themes/DiamondDSTheme.ts

@@ -1453,8 +1453,51 @@ const DiamondDSTheme = extendTheme({
           const accent = `var(--ds-${tokenName}-accent)`;
 
           return {
+            /** Opaque fill so the field stays distinct on container or elevated surfaces. */
+            backgroundColor: "var(--ds-surface)",
+
             "& .MuiOutlinedInput-notchedOutline": {
               borderColor: "var(--ds-border-emphasis)",
+              top: -7,
+            },
+
+            /** Notch 2px higher and 4px taller than MUI's, so the border line stays put. */
+            "& .MuiOutlinedInput-notchedOutline legend": {
+              height: 15,
+            },
+
+            /**
+             * Fills the notch so the straddling label sits on one tone. Editable
+             * fields inherit the field background; `background-clip: text` keeps
+             * the fieldset and legend from painting it over the value.
+             */
+            "& .MuiOutlinedInput-notchedOutline legend > span": {
+              borderRadius: "4px 4px 0 0",
+              color: "transparent",
+              opacity: 1,
+            },
+
+            "&:not(.Mui-disabled):not(.MuiInputBase-readOnly) .MuiOutlinedInput-notchedOutline, &:not(.Mui-disabled):not(.MuiInputBase-readOnly) .MuiOutlinedInput-notchedOutline legend":
+              {
+                backgroundColor: "inherit",
+                backgroundClip: "text",
+              },
+
+            "&:not(.Mui-disabled):not(.MuiInputBase-readOnly) .MuiOutlinedInput-notchedOutline legend > span":
+              {
+                backgroundColor: "inherit",
+              },
+
+            /** Washes are translucent, so paint only above the field edge to avoid doubling. */
+            "&.MuiInputBase-readOnly:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline legend > span":
+              {
+                backgroundColor: "var(--ds-surface-readonly)",
+                height: 7,
+              },
+
+            "&.Mui-disabled .MuiOutlinedInput-notchedOutline legend > span": {
+              backgroundColor: "var(--ds-surface-disabled)",
+              height: 7,
             },
 
             "&:hover:not(.Mui-disabled):not(.Mui-error):not(.Mui-focused):not(.MuiInputBase-readOnly) .MuiOutlinedInput-notchedOutline":
@@ -1649,6 +1692,11 @@ const DiamondDSTheme = extendTheme({
             color: "var(--ds-on-surface-disabled)",
           },
 
+          /** 1px below MUI's -9px, for room above the label in the filled notch. */
+          "&.MuiInputLabel-outlined.MuiInputLabel-shrink": {
+            transform: "translate(14px, -8px) scale(0.75)",
+          },
+
           "&.Mui-focused": {
             color: "var(--ds-primary)",
           },