[EuiPopover] Increase visibility in dark mode

[cee-chen]

Summary

closes #5788

This PR very slightly (.25%) tints the empty shade background of EuiPopovers in dark mode to increase visibility / contrast against existing page/panel backgrounds.

Unlike Elizabet's suggestion in #5788 (comment), we cannot simply change the background from emptyShade to lightShade - this completely blows out borders and other elements that use lightShade (see below screenshot of the border between "dark" and the switch).

Before	After

QA

• Go to https://eui.elastic.co/pr_7310/#/layout/popover
• Switch to dark mode
• Confirm that popovers feel more visually distinguishable from the background compared to production

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 color contrast
    - [ ] Checked in mobile
• Docs site QA - N/A
• Code quality checklist - N/A
• 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
  • Updated the Figma library counterpart

[cee-chen]

@MichaelMarcialis @andreadelrio @ryankeairns @kyrspl (pinging multiple designers since we don't have one assigned to EUI) - I'd appreciate your sanity check and feedback on this PR, in particular if any of you have any blocking concerns about this change.

[kibanamachine]

Preview staging links for this PR:

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 445dae8

History

• 💚 Build #883 succeeded 03f8f15
• 💔 Build #882 failed 2f19a06

[1Copenut]

👍 LGTM! Verified the difference in background color in four evergreen browsers.

[cee-chen]

Thanks Trevor! Hoping to hear from at least one designer before merge. If I don't hear anything or no one vetoes or makes any change requests, I'll merge this PR on Friday.

[mdefazio]

Sneaking in here...but I like it!

[kyrspl]

I like the idea of playing with the tint level. This is also described in Material 2.
Do we have other situations where this would apply to which we’ll need to take into account? I’m thinking: Cards inside flyouts or modals, dashboards etc?

Material 3 has an interesting take on this issue: Their newest approach focuses on a robust colour system that emphasizes separation through surface colors. Looking at the previous version of Material, hierarchy of depth was primarily established through elevation (i.e. shadows). They describe how to use light to solve the issue we experience here: “The higher a surface's elevation (raising it closer to an implied light source), the lighter that surface becomes.”

In contrast (no pun intended), the newer version leans heavily on specific surface colours to define contained areas and suggests to use shadows only when required (e.g. suggesting an interaction).

In light of the above (again, no pun intended), it’s worth exploring these ideas when looking at a new theme.

[ryankeairns]

I like the idea of playing with the tint level. This is also described in Material 2. Do we have other situations where this would apply to which we’ll need to take into account? I’m thinking: Cards inside flyouts or modals, dashboards etc?

Material 3 has an interesting take on this issue: Their newest approach focuses on a robust colour system that emphasizes separation through surface colors. Looking at the previous version of Material, hierarchy of depth was primarily established through elevation (i.e. shadows). They describe how to use light to solve the issue we experience here: “The higher a surface's elevation (raising it closer to an implied light source), the lighter that surface becomes.”

In contrast (no pun intended), the newer version leans heavily on specific surface colours to define contained areas and suggests to use shadows only when required (e.g. suggesting an interaction).

In light of the above (again, no pun intended), it’s worth exploring these ideas when looking at a new theme.

Yes, I'm confident there are other spots. Using dark mode myself, this is quite evident - that it could use some shading tweaks as it all sort of runs together, imo. Likely a good future exercise to comb through and/or test this layer:shading approach... separate from this PR :)