Introduction of Severity Colors

[gvnmagni]

Hi all, with this issue I'll try to list all the required additions to our set of colors in order to include Severity Tokens in our system. I will go through file by file, I hope this is the best way for you to have this information, please let me know if you prefer something else, I am totally open

in _primitive_colors.ts we should add the following colors:

orange10: '#ffedd6',
orange20: '#ffdebf',
orange30: '#ffcda1',
orange40: '#ffb787',
orange50: '#ff995e',
orange60: '#fc8544',
orange70: '#ed6723',
orange80: '#db541b',
orange90: '#c24411',
orange100: '#9e3a16',
orange110: '#782e18',
orange120: '#5e281a',
orange130: '#4a221c',
orange140: '#361d18',

sky10: "#e5f6fa",
sky20: "#cfeef7",
sky30: "#b5e5f2",
sky40: "#94d8eb",
sky50: "#63c8e3",
sky60: "#37b8dc",
sky70: "#0da1c9",
sky80: "#1c8cb5",
sky90: "#19799f",
sky100: "#0f658a",
sky110: "#055476",
sky120: "#00425c",
sky130: "#003447",
sky140: "#002938",

---

In _semantic_colors.ts we should add the following colors:

risk10: PRIMITIVE_COLORS.orange10,
risk20: PRIMITIVE_COLORS.orange20,
risk30: PRIMITIVE_COLORS.orange30,
risk40: PRIMITIVE_COLORS.orange40,
risk50: PRIMITIVE_COLORS.orange50,
risk60: PRIMITIVE_COLORS.orange60,
risk70: PRIMITIVE_COLORS.orange70,
risk80: PRIMITIVE_COLORS.orange80,
risk90: PRIMITIVE_COLORS.orange90,
risk100: PRIMITIVE_COLORS.orange100,
risk110: PRIMITIVE_COLORS.orange110,
risk120: PRIMITIVE_COLORS.orange120,
risk130: PRIMITIVE_COLORS.orange130,
risk140: PRIMITIVE_COLORS.orange140,

regular10: PRIMITIVE_COLORS.sky10,
regular20: PRIMITIVE_COLORS.sky20,
regular30: PRIMITIVE_COLORS.sky30,
regular40: PRIMITIVE_COLORS.sky40,
regular50: PRIMITIVE_COLORS.sky50,
regular60: PRIMITIVE_COLORS.sky60,
regular70: PRIMITIVE_COLORS.sky70,
regular80: PRIMITIVE_COLORS.sky80,
regular90: PRIMITIVE_COLORS.sky90,
regular100: PRIMITIVE_COLORS.sky100,
regular110: PRIMITIVE_COLORS.sky110,
regular120: PRIMITIVE_COLORS.sky120,
regular130: PRIMITIVE_COLORS.sky130,
regular140: PRIMITIVE_COLORS.sky140,

---

in _color_light.ts we should add the following colors:

add following to text_colors

textRegular: SEMANTIC_COLORS.regular100,
textRisk: SEMANTIC_COLORS.risk100,


add following to background_colors

backgroundBaseRegular: SEMANTIC_COLORS.regular10,
backgroundBaseRisk: SEMANTIC_COLORS.risk10,

backgroundLightRegular: SEMANTIC_COLORS.regular20,
backgroundLightRisk: SEMANTIC_COLORS.risk20,

backgroundFilledRegular: SEMANTIC_COLORS.regular80,
backgroundFilledRisk: SEMANTIC_COLORS.risk70,


add following to transparent_background_colors

backgroundTransparentRegular: background_colors.backgroundBaseRegular,
backgroundTransparentRisk: background_colors.backgroundBaseRisk,


add following to border_colors

borderBaseRegular: SEMANTIC_COLORS.regular30,
borderBaseRisk: SEMANTIC_COLORS.risk30,

borderStrongRegular: SEMANTIC_COLORS.regular100,
borderStrongRisk: SEMANTIC_COLORS.risk100,

---

in _color_dark.ts we should add the following colors:

add following to dark_text_colors

textRegular: SEMANTIC_COLORS.regular60,
textRisk: SEMANTIC_COLORS.risk50,


add following to background_colors

backgroundBaseRegular: SEMANTIC_COLORS.regular140,
backgroundBaseRisk: SEMANTIC_COLORS.risk140,

backgroundLightRegular: SEMANTIC_COLORS.regular130,
backgroundLightRisk: SEMANTIC_COLORS.risk130,

backgroundFilledRegular: SEMANTIC_COLORS.regular50,
backgroundFilledRisk: SEMANTIC_COLORS.risk50,


add following to transparent_background_colors

backgroundTransparentRegular: dark_background_colors.backgroundBaseRegular,
backgroundTransparentRisk: dark_background_colors.backgroundBaseRisk,


add following to border_colors

borderBaseRegular: SEMANTIC_COLORS.regular120,
borderBaseRisk: SEMANTIC_COLORS.risk120,

borderStrongRegular: SEMANTIC_COLORS.regular60,
borderStrongRisk: SEMANTIC_COLORS.risk50,

---

in _colors_vis.ts we should remove all current Severity colors and replace them with the following:

euiColorSeverityUnknown: SEMANTIC_COLORS.shade20,
euiColorSeveritySuccess: SEMANTIC_COLORS.success60,
euiColorSeverityRegular: SEMANTIC_COLORS.regular30,
euiColorSeverityWarning: SEMANTIC_COLORS.warning30,
euiColorSeverityRisk: SEMANTIC_COLORS.risk50,
euiColorSeverityDanger: SEMANTIC_COLORS.danger70,

This last point brings me to a final consideration, what would you suggest to do in case somebody has already used the previous set of temporary severity colors? How can we detect if that happened already?

[JasonStoltz]

Thank you @gvnmagni!

When we add this, we'll need to add documentation for these colors to https://eui.elastic.co/#/theming/colors/values. Thinking ahead a bit, would you be able to provide a brief description in this issue for each of the new color tokens? Specifically, any of the values going into _color_light and _color_dark. For _colors_vis, a brief description of how and when the palette of severity colors should be used would suffice. Or if there's more to say about how/when individual colors should be add that as well.

what would you suggest to do in case somebody has already used the previous set of temporary severity colors?

https://github.com/elastic/kibana/blob/5bfa0564ae8af7479e27b2cddb7a91d279f0f963/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts#L53

euiColorSeverity14
euiColorSeverity12

This is owned by the @elastic/obs-ux-infra_services-team team

https://github.com/elastic/kibana/blob/5bfa0564ae8af7479e27b2cddb7a91d279f0f963/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx#L39

euiColorSeverity5
euiColorSeverity7
euiColorSeverity10
euiColorSeverity14

This is owned by the @elastic/response-ops team

https://github.com/elastic/kibana/blob/5bfa0564ae8af7479e27b2cddb7a91d279f0f963/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx#L38

euiColorSeverity5
euiColorSeverity7
euiColorSeverity10
euiColorSeverity14

This is owned by the @elastic/response-ops team

When we introduce the new version of EUI that contains these changes, we can update their usage above accordingly. @gvnmagni Are you able to provide any guidance around what we would want to map those old colors usages to?

Adding some additional context:
This issue relates to this overarching issue in Kibana: elastic/kibana#211179
This conversation in the private EUI repository touches on it as well: https://github.com/elastic/eui-private/discussions/274

[smith]

Note that all OpenTelemetry log records have a SeverityNumber, so if I saw a variable called euiColorSeverity7 I would read that as "eui color for DEBUG3 severity".

[JasonStoltz]

@smith FWIW, those colors (colors like euiColorSeverity7, which are already in your code) are being placed with semantic variables:

euiColorSeverityUnknown
euiColorSeveritySuccess
euiColorSeverityRegular
euiColorSeverityWarning
euiColorSeverityRisk
euiColorSeverityDanger

So the intent it to replace euiColorSeverity7 with something like euiColorSeverityRegular or something similar. The full proposal is here if you're curious to learn more or provide feedback.

[mgadewoll]

FYI, when adding tokens we still need to add them on Borealis and Amsterdam to prevent the code breaking between them while practically we still have two themes. We can map them to anything but we'll need to make sure to use them with Borealis only by in-code feature flagging then (as done for the examples listed by Jason above).

[gvnmagni]

Note that all OpenTelemetry log records have a SeverityNumber, so if I saw a variable called euiColorSeverity7 I would read that as "eui color for DEBUG3 severity".

thank you @smith we are in touch with @patpscal and @l-suarez to be sure that we have a good solution for log.levels. There is an ongoing conversation around the topic (image below shows usage examples that are being explored)

[gvnmagni]

I wanted to give a solution for severityColors that are already in use, for those owned by @elastic/response-ops, I propose we proceed with this update:

euiColorSeverity5  >  euiColorSeverityRegular
euiColorSeverity7  >  euiColorSeverityWarning
euiColorSeverity10  >  euiColorSeverityRisk
euiColorSeverity14 >  euiColorSeverityDanger

the ones related to @elastic/obs-ux-infra_services-team instead, I would propose:

euiColorSeverity14 >  euiColorSeverityDanger

euiColorSeverity12  >  euiColorSeverityWarning (if we prefer a Yellow/Warning tone)
or
euiColorSeverity12  >  euiColorSeverityRisk (if we prefer an Orange/Risk tone)

[gvnmagni]

@JasonStoltz regarding your comment about guidelines, I have two options in my mind and I can't figure what would be the best one:

On one side, we could add these tokens and their description in our current documentation. On the other side we could dedicate a page to Severity as a general concept, knowing that in the future this will hopefully improved/enlarged, similar to what Dynatrace has done (link) and an approach that I was already kind of structuring in this document (link)

What do you think?