Time period is not visible in dark mode on profiler

[bhavyarm]

Kibana version: 7.6.0 BC4

Elasticsearch version: 7.6.0 BC4

Server OS version: darwin_x86_64

Browser version: chrome latest

Browser OS version: OS X

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

Describe the bug: When you profile a query in dark mode - the time is not visible under ConstantScoreQuery.

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[jkelastic]

This looks to be fixed in a later version

 info Installing from snapshot
   │ info version: 8.0.0
   │ info install path: /Users/jkuang/Downloads/devRepo/kibana/.es/8.0.0
   │ info license: trial
   │ info Downloading snapshot manifest from https://storage.googleapis.com/kibana-ci-es-snapshots-daily/8.0.0/manifest-latest-verified.json
   │ info verifying cache of https://storage.googleapis.com/kibana-ci-es-snapshots-daily/8.0.0/archives/20200602-194017_9479ec1d1cd/elasticsearch-8.0.0-SNAPSHOT-darwin-x86_64.tar.gz
   │ info cache invalid, redownloading
   │ info downloading artifact checksum from https://storage.googleapis.com/kibana-ci-es-snapshots-daily/8.0.0/archives/20200602-194017_9479ec1d1cd/elasticsearch-8.0.0-SNAPSHOT-darwin-x86_64.tar.gz.sha512
   │ info checksum verified
   │ info install directory already exists, removing
   │ info extracting /Users/jkuang/Downloads/devRepo/kibana/.es/cache/elasticsearch-8.0.0-SNAPSHOT-darwin-x86_64.tar.gz
   │ info extracted to /Users/jkuang/Downloads/devRepo/kibana/.es/8.0.0
   │ info created /Users/jkuang/Downloads/devRepo/kibana/.es/8.0.0/ES_TMPDIR
   │ info setting secure setting bootstrap.password to changeme
 info Starting
   │ debg bin/elasticsearch 

[cjcenizal]

@jkelastic Agreed that now the contrast is better under the "Time" column, but unfortunately now under the "Percentage" column the text is unreadable in your screenshot. 😅

[jkelastic]

@cjcenizal you're absolutely right, what do you think of updating the font color to green? I've tried several different colors, but found this one to fit both the pink and blue background.

[cjcenizal]

@jkelastic Thanks for taking a stab at solving this! I'm worried about color contrast accessibility for colorblind users, though. It's hard for me to judge this with my limited experience in that area. I know that @elastic/kibana-design has spent a lot of time exploring this problem and is familiar with how we've solved it throughout Kibana and the rest of the Stack. I think we should reach out to them for help with this. It's possible we can solve this out-of-the-box with EUI, but we're just not aware of it.

[snide]

You can take a look over at the Sass guidelines for EUI. Likely you'll want to use one of our handy color functions to apply these changes. https://elastic.github.io/eui/#/guidelines/sass

The three offhand that are useful for these kinds of checks are:

// Will provide a high contrast color given a foreground and background
makeHighContrastColor($someForegroundColor, $someBackgroundColor);

// Will use the first color if it's the light theme, the second if dark
lightOrDarkTheme($lightColor, $darkColor); 

// Takes any color and either tints (add white) or shades (add black) based upon which theme it is.
tintOrShade($color, .2, .6);

Give it a shot! I bet you'll figure it out.

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)