[Seybel]

• I have followed (at least) the PR section of the contributing guide.

#47472 added a palette.Input.autofillWebkitBoxShadow token so the autofill background on outlined and filled inputs can follow the theme, but the docs don't mention it anywhere, so right now the only way to find it is reading the source.

This adds a short "Autofill styles" section to the Text Field customization docs:

• what the token does, and its defaults in the light and dark color schemes
• that it's only applied when CSS theme variables are enabled (without them, palette.Input is ignored and dark mode keeps the hardcoded #266798)
• an example that sets it for both color schemes
• a note that the token doesn't change the text and caret color, which stay white in dark mode

I checked the generated CSS variables and :-webkit-autofill rules with a quick local test, with and without cssVariables, and type-checked the example.

Refs #44665, #47472

[code-infra-dashboard]

Deploy preview

• docs/data/material/components/text-fields/text-fields.md

  
  

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

No regressions in 32 benchmarks · ran 3m 11s · details

---

Check out the code infra dashboard for more information about this PR.