[RUM Dashboard] Hovering on RUM core web vitals percentages showing white background in dark mode

[hendry-lim]

Kibana version: 7.10.0-SNAPSHOT

Elasticsearch version: 7.10.0-SNAPSHOT

Original install method (e.g. download page, yum, from source, etc.): Docker

Describe the bug:
White background color is displayed if hovering on core web vitals percentages in dark mode.
Also applies to the pie chart legends.

Steps to reproduce:

1. Go to Client Side Monitoring
2. Mouse over on any of the core web vitals percentages/metrics

Screenshots (if relevant):

Expand

@shahzad31 for your review.

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[cchaos]

This actually is a custom data visualization not provided by the Charts team. Tagging in the @elastic/observability-design team.

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[nickofthyme]

@cchaos This is actually a chart issue.

[nickofthyme]

@cchaos This is coming from changes made to the legend with new legend actions here. I just used the background color used in the mock ups from @miukimiu but couldn't find the color in the eui pallet. Do you know of a suitable color to use from your scss variables for #e7f0f7? Or should I just add it to the chart theme and set it that way?

[cchaos]

Ah, I didn't realize this sort of chart exists in Charts, or is it just a simple 1 bar horizontal chart? Anyway, yes this is why using hex values directly is problematic and any colors should always be a EUI SASS var or computation of. EUI has a focus background color that we use for buttons like this called $euiFocusBackgroundColor

[shahzad31]

This is a custom component, it's not using chart legends or bar. I will fix this.

[nickofthyme]

@shahzad31 Oh looks like you are correct, however this raised a similar issue in the charts legend.