[EuiPopover] Background in dark mode isn't different from the main background

[formgeist]

Summary

In the many components that use EuiPopover for showing additional content, in dark mode the popover background blends completely with the background color and this makes the popover harder to distinguish.

Examples

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[cee-chen]

This still seems valid. @miukimiu, do you mind responding?

[miukimiu]

The EuiPopover uses a EuiPanel. By default, de EuiPanel uses the useEuiBackgroundColor('plain'). Most of the backgrounds also use useEuiBackgroundColor('plain').

The popover useEuiBackgroundColor('plain') on top of a background plain works well in the light mode because we can see properly the popover shadow.

In dark mode, I have to agree it's hard to see the shadow. The contrast between the popover and the background it is not good.

I think we need to introduce better design practices to solve this issue.

For example, in Material Design Dark Mode higher elevation gets a lighter surface. I think this concept can solve our portal component's lack of contrast issues.

I created a CodeSandbox exploring this concept (please ignore the arrows not getting the right color 😅 ): https://codesandbox.io/s/keen-sun-sdbh6t?file=/demo.js.

Examples 3 and 4 use a lighter background.

• The shadow gets more visible
• The contrast with the background increases

@formgeist, let me know your thoughts. Do you agree with this approach?

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

[cee-chen]

Re-opening as still valid. IMO, this would be a quick and easy fix for someone to grab (just changing the color of popovers, either via CSS or prop)