[EuiBadge] Increase color contrast of selected text (+ bonus cleanup)

[cee-chen]

Summary

closes #7722

This PR changes the ::selection color & background color of badges in order to make the selection more apparent to users. It also accomplishes some CSS cleanup (via utilizing CSS variables) at the same time. As always, I recommend following along by commit.

Light mode	Dark mode

QA

• Go to https://eui.elastic.co/pr_7752/#/display/badge or https://eui.elastic.co/pr_7752/storybook/?path=/story/display-euibadge-euibadge--custom-colors
• Select any badge/color combo, and confirm the text/background colors are inverted when highlighted for maximum color contrast

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in Chrome, Safari, Edge, and Firefox - NOTE: Firefox does not show ::selection on <button> elements, this is not a bug(?)
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
    - [ ] Checked in mobile
• Docs site QA - N/A
• Code quality checklist
  • Added visual regression test (since jsdom doesn't support CSS variables yet - see .toHaveStyle() does not get font-size w/ css variable testing-library/jest-dom#322)
    - [ ] Added or updated jest and cypress tests
• 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 - Skipped, not sure selection is something we've ever documented in Figma

[cee-chen]

@MichaelMarcialis and @1Copenut, I think I'd like your input on this before moving forward further with this PR. It certainly accomplishes the goal of increasing selection color contrast, but I don't know if it looks... good... precisely either (see screenshots in PR description) 🙈

I'm worried the change is a little too startling to ship with as a change and I'm wondering if we should consider other approaches. Maybe using CSS color functions like https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast as an alternative?

[kibanamachine]

Preview staging links for this PR:

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 79f0858

[1Copenut]

@cee-chen I appreciate the ping on this one. I looked at your screenshots and live preview in light and dark themes a few times. I highlighted all badges and did spot checks for contrast ratios. All were at least 5:1, many significantly higher.

That's my objective measure. My subjective measure is, I love the look of these when text is selected. It's bold, and that's a good thing. It was immediately clear to me what text was highlighted and what was not. The high-contrast aesthetic made the UI more usable, and that's my primary concern.

I'll defer to @MichaelMarcialis for the final call if this is too bold for a first release, but for my part it's 💯 with zero qualifications.

[cee-chen]

Haha, it's fascinating how subjective visuals are! Definitely would appreciate feedback from all corners on this one!

[MichaelMarcialis]

Thanks for the ping, @cee-chen. I largely agree with @1Copenut's assessment here. I think it's more important that the text highlighting is clear/obvious than it is to be aesthetically pleasing. That said, I think the idea of inverting the text and background colors is a simple and elegant way to achieve this. CCing the rest of the @elastic/platform-design team in case they have any thoughts as well.

Forgive a potentially silly follow-up question: Since color is our only means of indicating the text highlighting, does that mean that text highlighting background colors must have a contrast ratio of 3:1 with the page background (in addition to the 4.5:1 contrast between highlight text and background colors)? If so, do we need to update our general text highlighting styles as well?

[1Copenut]

Forgive a potentially silly follow-up question: Since color is our only means of indicating the text highlighting, does that mean that text highlighting background colors must have a contrast ratio of 3:1 with the page background (in addition to the 4.5:1 contrast between highlight text and background colors)? If so, do we need to update our general text highlighting styles as well?

Not a silly question at all. I think there may be some requirement for this with respect to adjacent colors. I read through SC 1.4.11: Non-text Contrast (Level AA) and there's a whole section on Adjacent Colors and the 3:1 contrast requirement. The example uses a text input compared to the background color around it, but there's probably a case for background color to selected (highlighted) background color too.

[cee-chen]

Thanks for chiming in y'all! It sounds like for the purposes of this PR we're good merging this as-is without any visual changes - am I reading that correctly? Let's continue further selection/color contrast discussions in a separate issue or possibly an actual GH discussion!

[cee-chen]

@1Copenut Could I get an approval from you on this PR if it's good to ship?

[1Copenut]

👍 LGTM!

I added a new discussion for testing non-text contrast ratio, will post it in the relevant Slack channel.

[cee-chen]

Discussion link for completeness: #7766