Update form autofill colors on webkit browsers

[cee-chen]

Summary

This request was sparked from a Slack conversation from the Observability folks. Chrome sets a custom light blue autofill color on inputs that doesn't obey EUI's light/dark mode theme - we can hackily override this background color via some -webkit-box-shadow trickery.

Light mode	Dark mode

More resources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1
• https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied

QA

• https://eui.elastic.co/pr_7776/storybook/index.html?path=/story/forms-euifieldtext--auto-fill
• https://eui.elastic.co/pr_7776/#/forms/form-layouts

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
    - [ ] Checked in mobile
• Docs site QA - N/A
• Code quality checklist - N/A, CSS only
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist - I don't think this state is documented in Figma
  - [ ] Updated the Figma library counterpart

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7776/
• Storybook: https://eui.elastic.co/pr_7776/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a71bed3

History

• 💚 Build #2003 succeeded a71bed3
• 💚 Build #2002 succeeded f3df267

[mgadewoll]

🚢 🐈‍⬛ The changes and output generally look good to me 👍
One small side question: I'm assuming we add VRT for the added story later on the feature branch? Or the story might be completely removed again?

And thanks for the added information about the needed hack (pfft Chrome, why 🙄)

[cee-chen]

We've received a thumbs up of approval from @galaxxyz who made this original request, so I'll go ahead and merge it!

I'll also go ahead and leave the storybook un-reverted as I think it's helpful for QA testing!

[cee-chen]

One small side question: I'm assuming we add VRT for the added story later on the feature branch? Or the story might be completely removed again?

Shoot sorry I totally missed this question 🤦

I might skip VRT for this one autofill story if that's an easy thing to do, since that will be hard/annoying to programmatically achieve state for. Any objections?

[mgadewoll]

@cee-chen Sure, that's reasonable. Not sure how far we might be able to get with loki interactions but in any case I think it's fair to skip.

parameters: {
  loki: {
    skip: true,
  }
}