[ML] New Severity colors alignment ML features

[joana-cps]

Mapping of the New Severity colors for ML features

New color mapping:

Color mapping	Value
#EE4C48 Red/70	75-100
#FF995E Orange/50	50-75
#FCD883 Yellow/30	25-50
#94D8EB Sky/40	3-25
#CFEEF7 Sky/20	0-3

This is the base color mapping, however, there are small variants in components that need stroke or backgrounds:

Color mapping per component:

Swimlane

⚠️ Variations in the blue colors in Ligh-mode

Color mapping	Light-mode	Dark-mode
75-100	#EE4C48 Red/70	#EE4C48 Red/70
50-75	#FF995E Orange/50	#FF995E Orange/50
25-50	#FCD883 Yellow/30	#FCD883 Yellow/30
3-25	#94D8EB Sky/30	#94D8EB Sky/40
0-3	#CFEEF7 Sky/10	#CFEEF7 Sky/20

Single Metric Viewer

⚠️ New base colors, see: https://github.com/elastic/platform-ux-team/issues/647
⚠️ Stroke goes 1 level up

Color mapping Light/Dark mode	Background	Stroke
75-100	#EE4C48 Red/70	#DA3737 Red/80
50-75	#FF995E Orange/50	#FC8544 Orange/60
25-50	#FCD883 Yellow/30	#FACB3D Yellow/40
3-25	#94D8EB Sky/40	#63C8E3 Sky/50
0-3	#CFEEF7 Sky/20	#B5E5F2 Sky/30

Influencers sidebar and Anomalies table

Uses the base colors

Color mapping	Value
#EE4C48 Red/70	75-100
#FF995E Orange/50	50-75
#FCD883 Yellow/30	25-50
#94D8EB Sky/40	3-25
#CFEEF7 Sky/20	0-3

Color mapping	Light mode	Dark mode	Name
Progress bar background	#ECF1F9	#172336	Shades/Lightest

EUI Badges with Severity colors

Color mapping Light/Dark mode	Text	name	Background	name
75-100	#A71627	Text/Base/Danger	#FDDDD8	Backgrounds/Light/Danger
50-75	#9E3A16	Text/Base/Risk	#FFDEBF	Backgrounds/Light/Risk
25-50	#825803	Text/Base/Warning	#FDE9B5	Backgrounds/Light/Warning
3-25	#0F658A	Text/Base/Neutral	#CFEEF7	Backgrounds/Light/Neutral
0-3	#0F658A	Text/Base/Neutral	#CFEEF7	Backgrounds/Light/Neutral

Anomalies table

Uses the base colors

Color mapping	Value
#EE4C48 Red/70	75-100
#FF995E Orange/50	50-75
#FCD883 Yellow/30	25-50
#94D8EB Sky/40	3-25
#CFEEF7 Sky/20	0-3

How it looks in context:

For implementation, please follow EUI guidance and avoid using hardcoded color values: elastic/eui#8537
Any question, reach out to me or @gvnmagni :)

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[gvnmagni]

One detail about those color variables, these tokens will be soon included into EUI (elastic/eui#8537) and instead of pointing to primitives such as Red/70 we would be able to directly point to euiColorSeverityDanger

If I got all this correctly, the only tokens we will not able to find will be Sky/20 and Sky/40 but the EUI team is already aware that for ML we might need these and we will find a way to expose them

[rbrtj]

Hey, @gvnmagni any updates here?
I'm mainly asking about the Sky/20, Sky/40 and the Stroke colors (I think the rest is already available in EUI):

Are all of these expected to be exposed by EUI soon, or should we create custom mappings for them?

[gvnmagni]

Hey Robert, now that the PR has been merged with the default severity tokens, I think it is time to ask EUI to expose these additional ones you are mentioning. Let me do that, I'll tag Lene who is the best person to ask about this

@mgadewoll this is one of those cases in which the severity tokens can't cover all needs and we need to expose a few additional tokens, they will be used only in this case and they don't need to be used elsewhere. I remember we talked about creating a list of needed tokens that would have bee exposed in case of need, what do you think would be the best way to proceed here?

[mgadewoll]

@gvnmagni Does it make sense to define more severity color shades as part of colors.severity to cover these cases more generically?

If we have more specific semantic usages they can be named as needed, otherwise maybe we just expose a pre-determined subset (or are all needed?) of the severity color shades (neutral, success, warning, risk, danger) as part of colors.severity.{shade}{level}, e.g. colors.severity.neutral20? 🤔

[gvnmagni]

It is a slightly complicated matter but I would love to discuss more about this. The reason why we opted for a limited number of tokens is because we wanted to give people a more rigid guidelines, with less options to pick from. This way we would ensure a more consistent result since we would not rely on people making choices in all the different context

ML is, with Discover, one of the only 2 contexts in which we need to expand this palette. Given its very complex nature (tables, custom charts, badges...) all living in the same page and with the need to communicate a higher number of Severity levels (two shades of Neutral to be displayed)

All other cases (Security, OBS...) should be covered by the tokens that we included into the codebase.

Said all this, I am not against a flexible approach that would give people the possibility the customise this further, we just need to understand how to offer this and if it is needed more generally

[gvnmagni]

Hi all, I had the chance to talk with @mgadewoll about this and we come to the conclusion that we should replicate what the Discover team has been doing (issue)

Creating dedicated tokens for these cases (either on the EUI side or on the ML side) will backfire eventually since we need something that changes according to settings (High Contrast mode is coming) and we need to have color tokens that are responding to that.

DIscover did something clever, they relied on Color Palette which are provided by EUI and therefore the already adjust according to settings, these are mathematical functions that generate steps of colors in between a starting point and an end.
The generated colors in between are not exactly the ones provided by the Borealis color spectrum but they are very very close and we just need a bit of design work to decide how to apply them. (I will assist @joana-cps in doing this, so that we can get as close as possible to the desired colors already picked)

So, what is happening is that EUI will add the missing color palettes to the codebase, namely euiPaletteSkyBlue, euiPaletteYellow and euiPaletteOrange... from these we will adjust them in order to obtain those Sky Blue 40 and 20 that we need and we will ask you to point to these values directly from EUI palettes.

Happy to explain this further, I am not sure I have been able to explain myself very well, I hope so! :)