[TextField] Default Webkit autofill color does not use variables or palette

[JeffBaumgardt]

material-ui/packages/mui-material/src/OutlinedInput/OutlinedInput.js

Line 141 in 6389642

WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',

Looking at this I was having issue with the color of the TextField when autofill was put in (Chrome). The color is hardcoded in and not referenced to any css var or theme.palette. I can of course override this with sx props on the slotProps.htmlInput or globally override in the theme.

It seems like a very odd choice to do a very solid dark blue when someone could have a completely different color theme than the default blue.

Search keywords:

[mj12albert]

Do you think this could be part of the theme too @zanivan ?

[JeffBaumgardt]

Poking around too. It's only the OutlinedInput that has any kind of autofill behaviour. I'm wondering if/why it can be removed entirely? Not sure if there was something in the material spec that called out for this.

The user agent also does apply styles in Chrome at least and they are marked as !important which is not ideal so even the CSSBaseline can't do much to reset that.

[zanivan]

Hey @mj12albert, in my opinion, I think this should be part of the theme. I had a hard time to customize this while working on the new templates—specially for the OutlinedInput—so, if we could make it easier for users, it'd be a great improvement. Marking @siriwatknp and @DiegoAndai so they can triage this issue.

[JeffBaumgardt]

Honestly unless there is a spec requirement on Material I don't think there should be a webkit autofill style on the OutlinedInput. For UX consistency the other input variants do not have this behaviour and it's a weird edge case that designers don't normally account for. We found this in a customer demo where they have autofill enabled.

[mj12albert]

Some more context, the color choice intends to be a dark mode alternative for Chrome's built-in autofill color: #14427 (comment)

They're present on both the Filled and Outlined inputs: https://github.com/search?q=repo%3Amui%2Fmaterial-ui%20path%3A%2F%5Epackages%5C%2Fmui-material%5C%2Fsrc%5C%2F%2F%20WebkitBoxShadow&type=code

[DiegoAndai]

@zanivan we could add a variable for it. It could work like palette.FilledInput.bg: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/createThemeWithVars.js#L271.

Would you be willing to work on this? I'll also add the ready to take label in case someone else wants to pick it up.