Autofill appearance of input elements

[ins0]

Currently when performing an autofill for an eg. TextField the Browser will use a custom color to highlight the autofilled input. This currently works well in the dark mode but the difference is barely visible in light mode.

With the CSS pseudo selector https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/:autofill we could adjust this beavior.

[Jan-Eimertenbrink]

After looking into this topic, I found that browsers apply these styles intentionally. Chrome highlights autofilled fields with a light blue background, while Safari and Firefox use yellow.

The idea behind this behavior is to clearly communicate to users which fields have been recognized and automatically filled by the browser. This gives users an opportunity to quickly verify the provided information, and the experience remains consistent across different websites.

From a usability perspective, there is therefore value in keeping these indicators visible. On the other hand, from a visual design perspective, the default browser styles can feel disconnected from our design system. This is especially noticeable in dark mode, where colors such as yellow can become very prominent and draw a lot of attention.

It is also worth noting that React Aria takes a different approach in its documentation and examples by applying custom autofill styles. They even differentiate between light and dark mode, which is likely something we would need to do as well if we want the autofill state to integrate seamlessly with our design.

In my view, this comes down to a tradeoff between the usability benefits that browsers provide out of the box and visual consistency with our design system. Ideally, we should aim for a compromise: an autofill style that remains noticeable enough for users while still fitting our design language and working well in both light and dark mode.

My main concern is reliability. Overriding browser autofill styles has historically been somewhat fragile, and there is a risk that the solution may not work consistently across browsers or could introduce issues in the future. Before making any changes, we should make sure that the approach is robust and does not create maintenance or compatibility problems.

In the meantime, I'll put together a few color options that I think could work well within our design system while still providing sufficient visual feedback for autofilled fields. We can then review the options and make a final decision together within the Flow team.