[Security Solution][EUI visual refresh] remove custom colors when possible

[PhilippeOberti]

Context

Changes are made to EUI that will be visible to end-users in Kibana:

• Updated all colors in EUI
• Reduce the topmost font weights and sizes (think titles and headings)
  These changes are available in a new theme called Borealis.

See parent ticket for how to use the new theme and labels to add to the PR for tracking

Important

Make sure that you use the backport:skip label on the PR!!

Description

All "Custom colors" have been replaced with EUI color tokens.

Important

We are asking all teams to remove all hardcoded color values (i.e., any CSS color defined explicitly rather than using an EUI token) when adopting the color changes defined in this document.

The EUI team hopes to iterate on color faster in the future. In order to do so, it is imperative teams strive to use EUI tokens for colors exclusively.

Hardcoded colors create issues when we iterate on the Kibana UI as a whole -- they break the system. By consistently using color tokens from the EUI library, we enable seamless updates and iterations on colors without requiring additional work from Kibana teams. With this approach, we can update a single token in EUI, and the color change will automatically apply across all of Kibana.

The EUI team is fundamentally changing the library by adding a comprehensive suite of Semantic Tokens. A semantic token is defined as such:

Semantic tokens in design systems are a type of design token that provide context and guidance on how to use them. They are named based on their purpose or meaning within the user interface (UI), rather than their appearance.

A practical example of this can be seen by looking at our shade colors. The naming of these tokens is based on their appearance -- dark. light, darkest, etc. Over time, we will deprecate these tokens in favor of tokens that are based on usage -- "border", "background", etc. This will be a key concept that allows us to iterate and evolve the Kibana UI over time -- cleanly and easily.

This same concept flows through to component customizations as well. In order for the EUI team to modernize UI at an atomic level (buttons, inputs, forms, layout, etc.), we will be asking teams to clean up CSS customizations to these elements as well. We realize that this is a big ask, but it is an important one. Simply put, if you are applying custom styles to our components, we are not able to update them without breaking UI.

[elasticmachine]

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)

[maxcold]

Cloud Security team tracks the migration in https://github.com/elastic/security-team/issues/11230