[Obs Logs UX][EUI Visual Refresh] Update usages of custom colors/function and replace with EUI color tokens

[tonyghiani]

📓 Summary

The described visual changes should be applied to the following plugins/packages UI elements:

• Dataset Quality
• Infra (logs features)
• Logs Data Access
• Logs Explorer
• Logs Shared
• Observability Logs Explorer
• Observability onboarding
• Unified Doc Viewer (Logs overview tab)
• packages/kbn-custom-integrations
• packages/kbn-saved-search-component
• x-pack/packages/observability/logs_overview

Custom colors

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.

To determine what color to use when replacing a custom color the best reference we at this time can be found in this document(Elastic internal). It's still a WIP that we've evolving. In the meantime, if it's not clear what you to use, simply reach out to us at #eui and we'll help you decide. Your "Design QA" partner would also be a good person to ask.

For some additional context on this change -- 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. We have deprecated many of 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.

Color calculation functions

shade()
tint()
shadeOrTint()
tintOrShade()
transparentize()

EUI provides color utility functions. Please discontinue use of these and replace them with an EUI color token. These will be deprecated as they create unpredictable results.

[elasticmachine]

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)