[Meta] EUI Visual Refresh integration and QA

The EUI team is making updates to EUI that require updates and QA by all Kibana Codeowners. This issue defines the ask for teams and provides a means to track progress.

Key Points

Instructions to run Kibana with Borealis are below.
Make outlined changes to your codebase.
Make changes in main.
Label PRs with EUI VIsual Reresh.
Please test and ensure your UI looks good in both Borealis and Amsterdam.
Update your progress in this issue accordingly.
Work with your corresponding Design QA assignee on design questions and final approval.
When in doubt, reach out! Direct questions to #eui in Slack.

Codeowners, we are asking you to "own" the upgrade of your particular code area and ensure the tasks listed below are completed. Please mark yourself as "Done" when you have completed the work. A "Definition of Done" is included in the next section.

Codeowner	Status ( Not Started, In Progress, Done )	Point of contact	Design QA
@elastic/search-kibana	Not Started		@mdefazio
@elastic/kibana-management	In Progress	@mattkime	@andreadelrio
@elastic/ml-ui	In Progress	@peteharverson	@andreadelrio
@elastic/response-ops	Not Started	@cnasikas	@andreadelrio
@elastic/kibana-visualizations	Not Started	@markov00	@andreadelrio
@elastic/fleet	Not Started	@criamico	@andreadelrio
@elastic/kibana-presentation	Not Started	@nreese	@andreadelrio
@elastic/kibana-security	In Progress	@SiddharthMantri	@andreadelrio
@elastic/appex-sharedux	Not Started	@tsullivan	@andreadelrio
@elastic/kibana-data-discovery	Not Started	@kertal	@l-suarez
@elastic/stack-monitoring	Not Started	@consulthys	@andreadelrio
@elastic/kibana-core	Not Started		@andreadelrio
@elastic/kibana-esql	Not Started		@andreadelrio
@elastic/appex-ai-infra	Done / no UI	@pgayvallet	@andreadelrio
@elastic/logstash	Not Started		@andreadelrio
@elastic/kibana-gis	Not Started	@jsanz	@andreadelrio
@elastic/eui-team	Not Started	@JasonStoltz	@andreadelrio
@elastic/obs-ux-infra_services-team	In Progress	@MiriamAparicio	@kkurstak @patpscal
@elastic/obs-ux-management-team	Not Started	@jasonrhodes	@kkurstak @patpscal
@elastic/obs-ux-logs-team	Not Started	@gbamparop	@kkurstak @patpscal
@elastic/obs-ai-assistant	In Progress	@viduni94	@kkurstak @patpscal
@elastic/obs-ux-onboarding-team	Not Started	@gbamparop	@kkurstak @patpscal
@elastic/observability-ui	Not Started	@jasonrhodes	@kkurstak @patpscal
@elastic/obs-knowledge-team	In Progress	@viduni94	@kkurstak @patpscal
@elastic/security-defend-workflows	Not Started		@codearos
@elastic/security-threat-hunting-investigations	Not Started		@codearos
@elastic/kibana-cloud-security-posture	Not Started	@opauloh	@codearos
@elastic/security-detection-engine	Not Started		@codearos
@elastic/security-generative-ai	Not Started		@codearos
@elastic/security-threat-hunting-explore	Not Started		@codearos
@elastic/security-detection-rule-management	Not Started		@codearos
@elastic/security-solution	Not Started		@codearos
@elastic/security-entity-analytics	Not Started	@CAWilson94	@codearos
@elastic/security-scalability	In Progress	@ebeahan	@codearos
@elastic/security-service-integrations	In Progress	@ebeahan	@codearos
@elastic/security-detections-response	Not Started		@codearos

Definition of Done

Things marked as Required must be completed. Everything else we would really like teams to give their best effort to resolve, but are ultimately non-blocking.

More detail on each of these steps is noted in detail below.

[ ] (Required) All usages of "success" colors have been updated to "accentSecondary" and "textAccentSecondary" as needed (details).
[ ] (Required) All usages of "successText" colors have been updated to "textAccentSecondary" as needed (details).
[ ] (Required) All references to renamed tokens have been updated to use the new token name. (details)
[ ] (Required) All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa. (details)
[ ] (Required) The person assigned to "Design QA" has reviewed the UI with the new changes and is ready to ship.
[ ] All usages of vis colors for non-visulalization usage have been removed in favor of other EUI color tokens, where possible. (details)
[ ] All "Custom colors" have been replaced with EUI color tokens. (details)
[ ] All usages of color functions have been removed in favor of color tokens, where possible. (details)
[ ] All usages of JSON tokens have been removed in favor of color tokens, where possible. (details)

Intro

We have made the following changes 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)

In addition, we are attempting to clean up existing color usage in order to help iterate on these colors faster in the future. So in addition to QA, there are also system-level changes that will need to be accounted for in Kibana's codebase.

If you have questions, please do not hesitate to reach out to the EUI team in the #eui Slack channel (Elastic internal). If you would like guidance from the EUI team on your implementation, you may also add the @elastic/eui-team as reviewers on your PR.

As you update and QA in Kibana with these changes, please indicate your status as a Codeowner in the table above.

Instructions for updating and QA

These changes are available in a new theme called Borealis. The current theme from which we are updating is called Amsterdam. Borealis will be available in Kibana for testing. It will not be turned on by default. You'll need to enable it following the instructions below.

When testing, please test your changes in both Borealis and Amsterdam. We will keep Kibana on Amsterdam for a period of time until we're ready to switch to Borealis. Additionally, 8.x will remain on Amsterdam. For this reason, we want to ensure Kibana UI works with both themes applied.

[!NOTE] Changes can be applied directly in Kibana main. Please label your PRs with the "EUI Visual Refresh" label, for tracking.

Throughout this section, tokens are referred to by their root name (e.g. primary). In practice, the primary token exists in Sass as $euiColorPrimary and in Emotion as colors.primary. Keep this in mind for all tokens mentioned below.

Running Kibana with the Borealis theme

In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start

This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

Color changes

We have updated nearly every color provided by EUI.

[!NOTE] For the most part, as long as you are using the tokens provided by EUI to apply colors, no effort is required beyond QAing your UI with the new color changes. Exceptions are noted below.

The Following is a list of color changes that require work beyond QA.

`Success` and `accentSecondary`

[!IMPORTANT] Success is changing from teal to a semantic green. We are asking all teams to now only use success to convey affirmative, semantic meaning. If you were using it as a means of displaying a teal brand color, you can continue doing so with the accentSecondary color. Please look at each instance where you are using the "success" color.

If conveying some affirmative meaning - success, a positive action, etc. -- continue using the success color

If not -- please update the color to accentSecondary

If you are unsure, ask your assigned "Design QA" team member or the EUI Team

# previous color token -> new color token
success -> success // Semantic green conveys an affirmative meaning
success ->  accentSecondary // Teal green for non-semantic purposes; aligns to brand

An example of an affirmative meaning would be this confirmation dialog. This would use the success color:

An example of a non-affirmative meaning would be the background of the "Security" badge. This would use the accentSeoncary color.

`successText` and `textAccentSecondary`

[!IMPORTANT] Please following the same guide provided for the success color above to update successText to textAccentSecondary where needed.

# previous color token -> new color token
successText -> textSuccess
successText -> textAccentSecondary // This is new, follow the same instructions above for the "success" color to determine usage

Renamed color variables

[!IMPORTANT] The naming of these tokens has changed as well. Please update all references to use the new token name. The old token names are now deprecated.

# previous color token -> new color token
primaryText -> textPrimary
accentText -> textAccent
between this and textSuccess.
warningText -> textWarning
dangerText -> textDanger
text -> textParagraph
title -> textHeading
subduedText -> textSubdued
disabledText -> textDisabled

Color palettes should now be theme aware

[!IMPORTANT] Key point: Make sure that if you are using colors from our color palette options, that your UI correctly updates to use the correct colors whenever you change themes.

https://eui.elastic.co/#/utilities/color-palettes

euiColorVis0
euiColorVis1
euiColorVis2
euiColorVis3
euiColorVis4
euiColorVis5
euiColorVis6
euiColorVis7
euiColorVis8
euiColorVis9

Vis color tokens are now available through the EUI theme: euiTheme.colors.vis:

These were not previously part of the theme. This means that they would not change when the theme was changed. They are now part of the theme and should change when the theme is changed.

If you were using any of the above tokens directly, please change your code to pull them directly from euiTheme.colors.vis.

If you were using any of our color palette functions:

either ensure the color palette function is called inside a React component under the EuiProvider context and is hence connected to rerender (called on rerender or connected to a state)
otherwise if it’s used outside of the EuiProvider context you can use the new EUI_VIS_COLOR_STORE.subscribe() function to listen to changes and update usages manually

const storeId = EUI_VIS_COLOR_STORE.subscribe(
  VIS_COLOR_STORE_EVENTS.UPDATE,
  () => {
    setPalette(euiPaletteColorBlind());
  }
);

Don't use vis colors anywhere other than visualizations

The color palettes above should be reserved for coloring visualizations. Please do not use them for other UI element styling.

[!IMPORTANT] A number of places in Kibana use euiColorVis0 to style something with a teal color. Please discontinue doing this and use accentSecondary instead.

If you are using vis colors like this, please change to use another color token from EUI.

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.

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.

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.

JSON tokens

Exported legacy JSON tokens will be deprecated in the future and will eventually be replaced with tokens from the EUI theme. We'd appreciate it if teams could spend some time migrating away from these.

Please discontinue use of these and replace them with a JS variable from our theme context.

JSON tokens are anything from:

@elastic/eui/dist/eui_theme_light.json
@elastic/eui/dist/eui_theme_dark.json
import { euiThemeVars } from '@kbn/ui-theme'

For example: https://github.com/elastic/kibana/blob/main/packages/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx#L32

Before:

import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui';
...
height: ${euiThemeVars.euiSizeXS} / 2;

After:

import { useEuiTheme } from '@elastic/eui'
....
const { euiTheme } = useEuiTheme();
...
height: ${euiTheme.size.xs} / 2;

Typography

https://eui.elastic.co/#/theming/typography/values

Our l, xl, and xxl font sizes are now smaller. Our medium, semiBold, and bold font weights are now slightly less bold.

Please QA to ensure your UI still looks good with these changes. If you have hardcoded font sizes or weights rather than using EUI tokens, please update your code to use an EUI token.

elastic / kibana