[Visual Refresh] Update of euiColorVisAsText to solve accessibility concern

[gvnmagni]

Hi all, I recently stumbled upon this use case that I believe we need to address. In Kibana Lens, when a user creates a table, we offer the possibility to color the content of cells (either background of cell, or text itself) using datavis palette.

As you can imagine and as you can see in the following image, this creates readability issues because of very light shades in datavis color palette.

We were aware of this and we know that this issue occurs only on light mode, while on dark mode all datavis colors have contrast higher than 4.5:1 with background, but still I think this is important to address since it is text and tables are one of the most used typology of charts that we have.

What I am suggesting is to use darker shades of colors for this specific features, relying on a set of tokens that we already have. Specifically, what I am suggesting, is to update the series of tokens called euiColorVisAsText currently included into _colors_vis.ts so that they can be used for this purpose.

This is what we currently have:

euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,
euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100,
euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100,
euiColorVisAsTextLight5: SEMANTIC_COLORS.success100,
euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100,

euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60,
euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60,
euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60,
euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60,
euiColorVisAsTextDark5: SEMANTIC_COLORS.success60,
euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60,

This is what I would suggest to do:

euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
euiColorVisAsTextLight1: SEMANTIC_COLORS.accentSecondary110,
euiColorVisAsTextLight2: SEMANTIC_COLORS.primary90,
euiColorVisAsTextLight3: SEMANTIC_COLORS.primary110,
euiColorVisAsTextLight4: SEMANTIC_COLORS.accent80,
euiColorVisAsTextLight5: SEMANTIC_COLORS.accent100,
euiColorVisAsTextLight6: SEMANTIC_COLORS.danger80,
euiColorVisAsTextLight7: SEMANTIC_COLORS.danger100,
euiColorVisAsTextLight8: SEMANTIC_COLORS.warning90,
euiColorVisAsTextLight9: SEMANTIC_COLORS.warning110,

euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
euiColorVisAsTextDark1: SEMANTIC_COLORS.accentSecondary30,
euiColorVisAsTextDark2: SEMANTIC_COLORS.primary60,
euiColorVisAsTextDark3: SEMANTIC_COLORS.primary30,
euiColorVisAsTextDark4: SEMANTIC_COLORS.accent60,
euiColorVisAsTextDark5: SEMANTIC_COLORS.accent30,
euiColorVisAsTextDark6: SEMANTIC_COLORS.danger60,
euiColorVisAsTextDark7: SEMANTIC_COLORS.danger30,
euiColorVisAsTextDark8: SEMANTIC_COLORS.warning60,
euiColorVisAsTextDark9: SEMANTIC_COLORS.warning30,

Now, the issues that come with this solution. As you might have noticed, instead of 7 colors we would have 10, replicating the same structure of colors that we have for default datavis palette. I believe I originally oversimplified this concept, I wanted to avoid using datavis colors for texts and I ended up having a palette that was mostly useless (since it was a duplicate of EUI text colors) without proper use case.

The positive thing is that apparently nobody is using these colors in our codebase, I checked Kibana and Elastic Charts repo and I believe nobody used these tokens, my hope is that this could not cause any issue.

I going to tag a few people to be sure that we are all aware of this proposal and we can be sure I am considering all important details, @markov00 @mgadewoll @JasonStoltz, what do you all think?

[mgadewoll]

The positive thing is that apparently nobody is using these colors in our codebase, I checked Kibana and Elastic Charts repo and I believe nobody used these tokens, my hope is that this could not cause any issue.

ℹ The reason for this is that the tokens were only added new with the Borealis color updates. The previous usage is via the EUI color palette functions euiPaletteForLightBackground and euiPaletteForDarkBackground. Those don't seem to be used either though.

[gvnmagni]

Oh, that is interesting, that confuses me because we had a set of tokens in figma called Datavis/Text but not in codebase apparently. This makes it even easier then

[mgadewoll]

ℹ Since those tokens are part of the theme now (instead of palettes only), we can also update those statically defined tokens euiColorVisAsTextLight and euiColorVisAsTextDark to follow the colorMode as other colors do too.
Similar to what was done here for the dataVis HCM overrides PoC we should now separate the datavis colors into standalone LIGHT and DARK definitions.