[Meta] EUI Visual Refresh integration and QA

[JasonStoltz]

Quick links:
❓ FAQ
📖 JSON token migration table
🎨 Borealis color token overview
🧹 Deprecated token overview

We have added a new EUI theme to Kibana. In preparation to make it live, we are asking all Kibana codeowners to do the following two things.

1. QA your UI with the Borealis theme enabled.
   • QA instructions can be found here.
   • Please mark your team as Done in the QA Status column when complete. ( Not Started, ⏳ In Progress, ✅ Done )
2. Update your code to comply with the new Borealis color system.
   • Instructions can be found here.
   • Please mark your team as Done in the Code Status column when complete. ( Not Started, ⏳ In Progress, ✅ Done )

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.

Codeowner	QA Status	Code Status	Point of contact	Design QA
@elastic/search-kibana	✅ Done	✅ Done	@sphilipse	@mdefazio
@elastic/kibana-management	⏳ In Progress	⏳ In Progress	@mattkime	@andreadelrio @jovana-andjelkovic
@elastic/ml-ui	✅ Done	✅ Done	@peteharverson	@andreadelrio @joana-cps
@elastic/response-ops	✅ Done	✅ Done	@cnasikas	@andreadelrio @joana-cps
@elastic/kibana-visualizations	⏳ In Progress	⏳ In Progress	@markov00	@andreadelrio @gvnmagni @MichaelMarcialis
@elastic/fleet	✅ Done	✅ Done	@criamico	@andreadelrio @simosilvestri
@elastic/kibana-presentation	✅ Done	⏳ In Progress	@cqliu1	@andreadelrio
@elastic/kibana-security	✅ Done	✅ Done	@SiddharthMantri	@andreadelrio @jovana-andjelkovic
@elastic/appex-sharedux	⏳ In Progress	⏳ In Progress	@tsullivan	@andreadelrio @ek-so
@elastic/kibana-data-discovery	✅ Done	⏳ In Progress	@kertal	@andreadelrio @l-suarez
@elastic/stack-monitoring	✅ Done	✅ Done	@consulthys (with @weronikaolejniczak)	@andreadelrio
@elastic/kibana-core	✅ Done	✅ Done	@TinaHeiligers	@andreadelrio
@elastic/kibana-esql	✅ Done	✅ Done	@stratoula	@andreadelrio @ryankeairns
@elastic/appex-ai-infra	✅ Done / no UI	✅ Done / no UI	@pgayvallet	@andreadelrio
@elastic/logstash	⏳ In Progress	⏳ In Progress	@jsvd (with @weronikaolejniczak)	@andreadelrio
@elastic/kibana-gis	⏳ In Progress	⏳ In Progress	@jsanz	@andreadelrio @gvnmagni
@elastic/obs-ux-infra_services-team	⏳ In Progress	✅ Done	@MiriamAparicio	@kkurstak @patpscal
@elastic/obs-ux-management-team	⏳ In Progress	⏳ In Progress	@jasonrhodes	@kkurstak @patpscal
@elastic/obs-ux-logs-team	✅ Done	✅ Done	@tonyghiani	@kkurstak @patpscal
@elastic/obs-ai-assistant	✅ Done	✅ Done	@viduni94	@kkurstak @patpscal
@elastic/observability-ui	⏳ In Progress	⏳ In Progress	@smith / @MiriamAparicio	@kkurstak @patpscal
@elastic/obs-knowledge-team	✅ Done	✅ Done	@viduni94	@kkurstak @patpscal
@elastic/security-defend-workflows	Not Started	⏳ In Progress	@dasansol92	@codearos
@elastic/security-threat-hunting-investigations	Not Started	Not Started	@PhilippeOberti	@codearos
@elastic/kibana-cloud-security-posture	⏳ In Progress	⏳ In Progress	@opauloh @maxcold	@codearos
@elastic/security-detection-engine	✅ Done	⏳ In Progress	@rylnd	@codearos
@elastic/security-generative-ai	⏳ In Progress	⏳ In Progress	@patrykkopycinski	@codearos
@elastic/security-threat-hunting-explore	⏳ In Progress	⏳ In Progress	@angorayc	@codearos
@elastic/security-detection-rule-management	Not Started	Not Started	@banderror	@codearos
@elastic/security-solution	Not Started	⏳ In Progress		@codearos
@elastic/security-entity-analytics	⏳ In Progress	⏳ In Progress	@CAWilson94	@codearos
@elastic/security-scalability	✅ Done	✅ Done	@ebeahan	@codearos
@elastic/security-service-integrations	✅ Done	✅ Done	@ebeahan	@codearos
@elastic/security-detections-response	Not Started	Not Started	@yctercero @banderror	@codearos

Running Kibana with the Borealis theme

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

1. Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
2. 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.

QA Instructions

Please QA your UI throughly with the Borealis theme enabled.

If you find an issue caused by Borealis that would block the release, please be sure to create an issue with the label Borealis: Blocker. Our expectation is that you will fix these issues yourself using the provided guidance, leveraging us as a resource if you can't find a solution. The label will let us track progress toward overall readiness.

When QA has been completed, and all critical bugs have been either fixed or logged with the Borealis: Blocker label, please indicate that by changing marking your team as ✅ Done in the QA Status column.

This Design QA doc(Elastic internal) serves as a helpful reference for designers running QA.

Making code changes

Please follow the following guidelines when making changes for Borealis:

Changes may be made directly in Kibana main. Please label your PR with EUI Visual Refresh -- for our own visibility and tracking.

Please also be sure to test your changes in both Amsterdam and Borealis. This is important for two reasons:

• Borealis will remain behind a feature flag for a period of time. This is particularly important for Serverless, which will continue to use Amsterdam for a period of time.
• 8.x will continue to use Amsterdam. So testing in Amsterdam before backporting changes will also help prevent introducing visual regressions in 8.x.

Regarding backporting -- 8.x will not use Borealis. Only 9.x will use Borealis. 8.x will continue to run Amsterdam. To minimize impact and risk to 8.x, if you are making the changes we outlined below, you may want to consider the backport:skip label.

One issue you may encounter specifically, is that the new tokens we provide are not currently available in 8.x, which will cause backport failures.

Requested Code Changes

We are asking all teams to make the following changes to their Kibana UI code. These are not necessarily blockers for the Borealis rollout. However, skipping ones marked as (Important) may result in bugs.

• (Important) Review usage of "success" colors for positive, semantic intent.(details).
• (Important) Review and update color palette usage. (details)
• (Important) Replace vis colors used outside of visualizations with color tokens . (details)
• (Important) Replace custom colors with semantic tokens (details)
• (Important) Replace color calculation functions with semantic tokens. (details)
• Update tokens to use the new naming scheme. (details)
• Replace euiThemeVars and eui_theme_*.json usage with semantic tokens(details)
  The following

Note:
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, or could even be passed as prop to an EUI component like color="primary" Keep this in mind for all tokens mentioned below.

💡 Tip:
Many of these changes requires searching for certain text in the code you own. To filter a search in VS Code to just the code you (i.e., a codeowner like security-detection-engine) own, you can try running the following command and then manually pasting it into the "include" box in the VS Code search:

cat .github/CODEOWNERS | grep "security-detection-engine" | cut -d" " -f1 | sed "s@^/@@" | uniq | paste -sd "," - | pbcopy

(Important) Review usage of "success" colors for positive, semantic intent.

(Important): This is marked as important because the "success" color has changed. Things that were meant to appear as teal previously will appear a dark vibrant green. This will likely cause unexpected results.

success and successText have been updated to use a semantic green color, rather than a more subtle teal color.

We would like to reserve the usage of success and successText for semantic use cases, meaning cases that are meant to convey something positive.

We are asking teams to review their usage of the success and successText colors to ensure that they are only using it to convey positive meaning.

Some possibilities to consider:

• There were cases where success was used simply because it was teal, and teal is one of our brand colors. If that is the case, consider switching to accentSecondary, which is a new token that uses a similar teal. However, accentSecondary should be used sparingly, so consider taking it a step further and switching to something like primary.
• For buttons, you're likely bet is to switch to primary, or text (gray). accentSecondary should generally not be used on a button.
• Semantically, components like EuiHealth are never meant to convey anything other than health. Do not switch EuiHealth to use colors like accentSecondary

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 accentSecondary color, for the teal brand color.

Currently, This doc(Elastic Internal) is the best source for choosing a new token. Scroll down to the "Applying color tokens in product" table. This table can serve as a more comprehensive reference of what colors exist in Borealis: #199715 (comment)

The intent is to use "tokens" that match your intended use case. So rather than selecting an arbitrary color that matches what you had previously, select a "token" that matches how that color is used.

So for instance -- is the color used as a border? You can switch that to something from the borderBase or borderStrong collection -- i.e., euiTheme.colors.borderBase, euiTheme.colors.subdued, etc.

If you give us some more context on the colors you're trying to replace we can help ya pick.

(Important) Review and update color palette usage

(Important): This is marked as important because these colors are now theme aware. Not pulling them from the current them may cause bugs when switching between themes.

All usage of color palette tokens and functions should now be accessed from the EUI theme.

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

This includes any of the color tokens and functions mentioned here: https://eui.elastic.co/#/utilities/color-palettes

A simple test would be to locate your usage of these and use the provided Amsterdam/Borealis toggle to test this whether or not they change.

Vis color tokens (euiColorVis0, euiColorVis1, etc.) are now available through the EUI theme as tokens: euiTheme.colors.vis.*. Please update references to these variables to pull from the theme.

NOTE: _behindText variants of these tokens are no longer included in Borealis. For Borealis you can use the regular vis colors instead now. But for Amsterdam you should use the respective color from euiPaletteColorBlindBehindText() to ensure color parity.

The default visualization colors have been improved in Borealis to ensure the regular vis colors provide enough color contrast, which removes the need for _behindText variants.

theme.eui.euiColorVis0_behindText  -> isAmsterdam ? euiPaletteColorBlindBehindText()[0] : euiTheme.colors.vis.euiColorVis0

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());
  }
);

(Important) Replace vis colors used outside of visualizations with color tokens

(Important): This is marked as important because the visualization colors have changed. If you were using these colors for things outside of visualizations, you will likely now have unexpected results. For example, these are commonly used to show severity levels, if you had been doing this previously, your UI will no longer appear as expected.

Data visualization colors provided by EUI should be reserved for just that, data visualization. It is important to limit their usage so that we can iterate on these colors in the future without unintentionally affecting other UI.

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

euiColorVis0
euiColorVis1
euiColorVis2
euiColorVis3
euiColorVis4
euiColorVis5
euiColorVis6
euiColorVis7
euiColorVis8
euiColorVis9

For example: 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.

Currently, This doc(Elastic Internal) is the best source for choosing a new token. Scroll down to the "Applying color tokens in product" table. This table can serve as a more comprehensive reference of what colors exist in Borealis: #199715 (comment)

The intent is to use "tokens" that match your intended use case. So rather than selecting an arbitrary color that matches what you had previously, select a "token" that matches how that color is used.

So for instance -- is the color used as a border? You can switch that to something from the borderBase or borderStrong collection -- i.e., euiTheme.colors.borderBase, euiTheme.colors.subdued, etc.

If you give us some more context on the colors you're trying to replace we can help ya pick.

(Important) Replace custom colors with semantic tokens

(Important): This is marked as important because there is a high likelyhood that custom colors will no longer look correct in relation to the new Borealis color palette.

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. This could be a hex, rgb, hsl, etc.

To facilitate detecting instances where custom colors are used within the code an eslint rule as been prepared for this, it is currently set to provide warning to developers during development, this same rule can however be leverage to detect occurrences that declare custom colors at a go, by run lint targeting the directory of interest and setting the rule to raise it's report as an error like so;

yarn lint:es <path/to/directory/to/evaluate> --rule '@kbn/css/no_css_color: error'

This would return a familiar output of files that contain code that declares custom colors that needs to be attended to.

It's worth mentioning that instances where some component receives a prop that is then passed as a custom color will not be caught by this lint rule, the onus is on the developer to deter from such patterns.

Note that there are certain cases where it's totally acceptable to have custom color values. SVG source that you paste into a file, for instance.

NOTE: Kibana will soon include a lint rule for this: #200703

Currently, This doc(Elastic Internal) is the best source for choosing a new token. Scroll down to the "Applying color tokens in product" table. This table can serve as a more comprehensive reference of what colors exist in Borealis: #199715 (comment)

The intent is to use "tokens" that match your intended use case. So rather than selecting an arbitrary color that matches what you had previously, select a "token" that matches how that color is used.

So for instance -- is the color used as a border? You can switch that to something from the borderBase or borderStrong collection -- i.e., euiTheme.colors.borderBase, euiTheme.colors.subdued, etc.

If you give us some more context on the colors you're trying to replace we can help ya pick.

---

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.

(Important) Replace color calculation functions with semantic tokens

(Important): This is marked as important because there is a high likelyhood that these color calculation functions will no longer produce a result that will look correct in relation to the new Borealis color palette.

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.

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

Currently, This doc(Elastic Internal) is the best source for choosing a new token. Scroll down to the "Applying color tokens in product" table. This table can serve as a more comprehensive reference of what colors exist in Borealis: #199715 (comment)

The intent is to use "tokens" that match your intended use case. So rather than selecting an arbitrary color that matches what you had previously, select a "token" that matches how that color is used.

So for instance -- is the color used as a border? You can switch that to something from the borderBase or borderStrong collection -- i.e., euiTheme.colors.borderBase, euiTheme.colors.subdued, etc.

If you give us some more context on the colors you're trying to replace we can help ya pick.

Update tokens to use the new naming scheme

Many of our old tokens have been renamed, and we're asking folks to simply update their usage to use the new names.

Realistically, we could probably do one big find/replace PR, but if you're able to handle these while you're making other changes, that would be great. Otherwise, we'll probably do a follow up to catch everything in bulk afterwards.

# 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
successText -> textSuccess

Replace euiThemeVars and eui_theme_*.json usage with semantic tokens

JSON tokens exported by EUI are being deprecated for usages in React components, and we need to start replacing them with semantic tokens from the EUI theme. We would appreciate it if teams could spend some time migrating away from these.

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

ℹ If you're using the JSON tokens in a static non-react context (e.g. server-side), it is expected to keep using the JSON tokens and no update is needed.

JSON tokens are anything from:

@elastic/eui/dist/eui_theme_amsterdam_light.json
@elastic/eui/dist/eui_theme_amsterdam_dark.json
@elastic/eui/dist/eui_theme_borealis_light.json
@elastic/eui/dist/eui_theme_borealis_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;

[!IMPORTANT]
See the tables in this comment when mapping from old tokens to new. (e.g. from euiSizeXS to size.xs)

A note for folks using the styled syntax

If you are replacing usage of euiThemeVars within the styled syntax from @emotion/styled, it may look something like this:

Before:

const LogStreamContainer = styled.div`
  display: flex;
  background-color: ${euiThemeVars.euiColorEmptyShade};
`;

After:

const LogStreamContainer = styled.div`
  display: flex;
  background-color: ${props => props.theme.euiTheme.colors.emptyShade};
`;

If you see type errors related to props.theme, you may have to set up an emotion.d.ts

Here's some guidance related to that, plucked from our Emotion FAQ:

Please note, that if you encounter type errors with the theme parameter inside of the css function, you'll need to make your Plugin is set up to use Kibana's emotion.d.ts file.

To do this, add in the aforementioned emotion.d.ts with it's path relative to location of the typings directory as the value of the include property for the tsconfig.json file that exists within your plugin.
file for your Kibana plugin for the parameter in css functions to be properly typed as EUI's theme. See the osquery plugin for an example of their tsconfig setup.

[!IMPORTANT]
Please use this table as point of reference when migrating import { euiThemeVars } from '@kbn/ui-theme' to the useEuiTheme() theme hook.

If a token might be missing or unfitting for your use case, please reach out to the EUI team in the #eui slack channel.
We'll update this list as needed.

[JasonStoltz]

@elastic/kibana-core
@elastic/kibana-esql
@elastic/appex-ai-infra
@elastic/logstash
@elastic/security-defend-workflows
@elastic/security-threat-hunting-investigations
@elastic/security-detection-engine
@elastic/security-generative-ai
@elastic/security-threat-hunting-explore
@elastic/security-detection-rule-management
@elastic/security-solution

Hi folks 👋 . Could you all please add a contact/owner from your team to the table above? It's helpful for coordinate and serves as an acknowledgement of this work from your team.

Let me know if you have any questions.

[MiriamAparicio]

obs-ux-infra_services-team done as part of #200580, we are lacking the Design QA as we couldn’t get a test environment stable to test. The team tested the UI, we can open follow-up issues if something is wrong in the UI after Design QA.

[mgadewoll]

🎨 Borealis color token values

This overview shows what base color values are defined for the available color tokens.

Brand colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.primary	#0B64DD	#3788FF
euiTheme.colors.accent	#BC1E70	#E54A91
euiTheme.colors.accentSecondary	#008B87	#00B0AA
euiTheme.colors.success	#008A5E	#04AE7E
euiTheme.colors.warning	#FACB3D	#FACB3D
euiTheme.colors.danger	#C61E25	#EE4C48

Text colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.textPrimary	#1750BA	#61A2FF
euiTheme.colors.textAccent	#A11262	#EE72A6
euiTheme.colors.textAccentSecondary	#047471	#16C5C0
euiTheme.colors.textSuccess	#09724D	#24C292
euiTheme.colors.textWarning	#6A4906	#FCD883
euiTheme.colors.textDanger	#A71627	#F6726A
euiTheme.colors.textParagraph	#1D2A3E	#CAD3E2
euiTheme.colors.textHeading	#111C2C	#E3E8F2
euiTheme.colors.textSubdued	#516381	#8E9FBC
euiTheme.colors.textDisabled	#798EAF	#6A7FA0
euiTheme.colors.textInverse	#FFFFFF	#07101F
euiTheme.colors.link	#1750BA	#61A2FF
euiTheme.colors.text (deprecated)	#1D2A3E	#CAD3E2
euiTheme.colors.title (deprecated)	#111C2C	#E3E8F2
euiTheme.colors.primaryText (deprecated)	#1750BA	#61A2FF
euiTheme.colors.accentText (deprecated)	#A11262	#EE72A6
euiTheme.colors.successText (deprecated)	#09724D	#24C292
euiTheme.colors.warningText (deprecated)	#6A4906	#FCD883
euiTheme.colors.dangerText (deprecated)	#A71627	#F6726A
euiTheme.colors.subduedText (deprecated)	#516381	#8E9FBC
euiTheme.colors.disabledText (deprecated)	#798EAF	#6A7FA0

Background colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.backgroundBasePrimary	#E8F1FF	#0A2342
euiTheme.colors.backgroundBaseAccent	#FFEBF5	#351725
euiTheme.colors.backgroundBaseAccentSecondary	#E2F9F7	#03282B
euiTheme.colors.backgroundBaseSuccess	#E2F8F0	#092A26
euiTheme.colors.backgroundBaseWarning	#FDF3D8	#2C2721
euiTheme.colors.backgroundBaseDanger	#FFE8E5	#351721
euiTheme.colors.backgroundBaseSubdued	#F6F9FC	#07101F
euiTheme.colors.backgroundBasePlain	#FFFFFF	#0B1628
euiTheme.colors.backgroundBaseDisabled	#ECF1F9	#111C2C
euiTheme.colors.backgroundBaseHighlighted	#F6F9FC	#172336
euiTheme.colors.backgroundBaseFormsPrepend	#ECF1F9	#243147
euiTheme.colors.backgroundBaseFormsControlDisabled	#CAD3E2	#2B394F
euiTheme.colors.backgroundBaseInteractiveHover	rgba(23,80,186, 0.04)	rgba(255,255,255, 0.08)
euiTheme.colors.backgroundBaseInteractiveSelect	#F6F9FC	#1D2A3E
euiTheme.colors.backgroundBaseInteractiveOverlay	rgba(72,89,117, 0.7)	rgba(43,57,79, 0.7)
euiTheme.colors.backgroundBaseSkeletonEdge	rgba(55,136,255, 0.16)	rgba(255,255,255, 0.16)
euiTheme.colors.backgroundBaseSkeletonMiddle	rgba(72,89,117, 0.04)	rgba(255,255,255, 0.08)
euiTheme.colors.backgroundLightPrimary	#D9E8FFs	#0D2F5E
euiTheme.colors.backgroundLightAccent	#FDDDE9	#481E32
euiTheme.colors.backgroundLightAccentSecondary	#A6EDEA	#023436
euiTheme.colors.backgroundLightSuccess	#C9F3E3	#0D362B
euiTheme.colors.backgroundLightWarning	#FDE9B5	#3D3014
euiTheme.colors.backgroundLightDanger	#FDDDD8	#491D27
euiTheme.colors.backgroundLightText	#E3E8F2	#1D2A3E
euiTheme.colors.backgroundFilledPrimary	#0B64DD	#61A2FF
euiTheme.colors.backgroundFilledAccent	#BC1E70	#EE72A6
euiTheme.colors.backgroundFilledAccentSecondary	#008B87	#16C5C0
euiTheme.colors.backgroundFilledSuccess	#008A5E	#24C292
euiTheme.colors.backgroundFilledWarning	#FACB3D	#FACB3D
euiTheme.colors.backgroundFilledDanger	#C61E25	#F6726A
euiTheme.colors.backgroundFilledText	#5A6D8C	#8E9FBC

Background colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.borderBasePrimary	#BFDBFF	#123778
euiTheme.colors.borderBaseAccent	#FFC7DB	#5E2140
euiTheme.colors.borderBaseAccentSecondary	#A6EDEA	#044949
euiTheme.colors.borderBaseSuccess	#AEE8D2	#094837
euiTheme.colors.borderBaseWarning	#FCD883	#513910
euiTheme.colors.borderBaseDanger	#FFC9C2	#5E2129
euiTheme.colors.borderBasePlain	#CAD3E2	#485975
euiTheme.colors.borderBaseSubdued	#E3E8F2	#2B394F
euiTheme.colors.borderBaseDisabled	#CAD3E2	#485975
euiTheme.colors.borderBaseFloating	transparent	#2B394F
euiTheme.colors.borderBaseFormsColorSwatch	rgba(72,89,117, 0.24)	rgba(255,255,255, 0.32)
euiTheme.colors.borderBaseFormsControl	#8E9FBC	#6A7FA0
euiTheme.colors.borderStrongPrimary	#1750BA	#61A2FF
euiTheme.colors.borderStrongAccent	#A11262	#EE72A6
euiTheme.colors.borderStrongAccentSecondary	#047471	#16C5C0
euiTheme.colors.borderStrongSuccess	#09724D	#24C292
euiTheme.colors.borderStrongWarning	#825803	#FACB3D
euiTheme.colors.borderStrongDanger	#A71627	#F6726A

Special colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.body	#F6F9FC	#07101F
euiTheme.colors.highlight	#E8F1FF	#1750BA
euiTheme.colors.disabled	#E3E8F2	#1D2A3E
euiTheme.colors.shadow	#000000	#000000
euiTheme.colors.plainLight	#FFFFFF	#FFFFFF
euiTheme.colors.plainDark	#07101F	#07101F
euiTheme.colors.ghost	#FFFFFF	#FFFFFF
euiTheme.colors.ink	#000000	#000000

Legacy shade colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.emptyShade	#FFFFFF	#0B1628
euiTheme.colors.lightestShade	#ECF1F9	#172336
euiTheme.colors.lightShade	#CAD3E2	#243147
euiTheme.colors.mediumShade	#8E9FBC	#516381
euiTheme.colors.darkShade	#5A6D8C	#7186A8
euiTheme.colors.darkestShade	#2B394F	#CAD3E2
euiTheme.colors.fullShade	#07101F	#FFFFFF

Visualization colors

Token	Borealis (LIGHT)	Borealis (DARK)
euiTheme.colors.euiColorVis0	#16C5C0	#16C5C0
euiTheme.colors.euiColorVis1	#A6EDEA	#A6EDEA
euiTheme.colors.euiColorVis2	#61A2FF	#61A2FF
euiTheme.colors.euiColorVis3	#BFDBFF	#BFDBFF
euiTheme.colors.euiColorVis4	#EE72A6	#EE72A6
euiTheme.colors.euiColorVis5	#FFC7DB	#FFC7DB
euiTheme.colors.euiColorVis6	#F6726A	#F6726A
euiTheme.colors.euiColorVis7	#FFC9C2	#FFC9C2
euiTheme.colors.euiColorVis8	#EAAE01	#EAAE01
euiTheme.colors.euiColorVis9	#FCD883	#FCD883
euiTheme.colors.euiColorSeverity0	#E3E6EB	#E3E6EB
euiTheme.colors.euiColorSeverity1	#5A6D8C	#5A6D8C
euiTheme.colors.euiColorSeverity2	#7186A8	#7186A8
euiTheme.colors.euiColorSeverity3	#8E9FBC	#8E9FBC
euiTheme.colors.euiColorSeverity4	#ABB9D0	#ABB9D0
euiTheme.colors.euiColorSeverity5	#CAD3E2	#CAD3E2
euiTheme.colors.euiColorSeverity6	#FDE9B5	#FDE9B5
euiTheme.colors.euiColorSeverity7	#FCD883	#FCD883
euiTheme.colors.euiColorSeverity8	#FFC9C2	#FFC9C2
euiTheme.colors.euiColorSeverity9	#FFB5AD	#FFB5AD
euiTheme.colors.euiColorSeverity10	#FC9188	#FC9188
euiTheme.colors.euiColorSeverity11	#F6726A	#F6726A
euiTheme.colors.euiColorSeverity12	#EE4C48	#EE4C48
euiTheme.colors.euiColorSeverity13	#DA3737	#DA3737
euiTheme.colors.euiColorSeverity14	#C61E25	#C61E25

[JasonStoltz]

Hey folks.

I tried to slim down this Meta issue a bit to make it more digestible. I also tried to enhance the specific guidance we give for each code change we are requesting. I'm hoping this helps alleviate confusion and serves as a better aid.

Please note that I wanted to make a distinction in this issue between two things:

• The immediate need for QA in preparation for release - This is the most immediate need.
• The requested code changes. - We need these to fully implement our new color system in Kibana, but they are not blockers to releasing Borealis in Kibana.

I explicitly separated those two things in our tracking table above, so that we can get a better sense of which teams have completed QA irregardless of whether or not our requested code changes have been made.

Hope that helps.

[clintandrewhall]

🧹 Deprecated Tokens

Expected to update

Deprecated Token	Replacement
euiTheme.colors.text (deprecated)	euiTheme.colors.textParagraph
euiTheme.colors.title (deprecated)	euiTheme.colors.textHeading
euiTheme.colors.primaryText (deprecated)	euiTheme.colors.textPrimary
euiTheme.colors.accentText (deprecated)	euiTheme.colors.textAccent
euiTheme.colors.successText (deprecated)	euiTheme.colors.textSuccess
euiTheme.colors.warningText (deprecated)	euiTheme.colors.textWarning
euiTheme.colors.dangerText (deprecated)	euiTheme.colors.textDanger
euiTheme.colors.subduedText (deprecated)	euiTheme.colors.textSubdued
euiTheme.colors.disabledText (deprecated)	euiTheme.colors.textDisabled

Not expected to update yet

Deprecated Token	Replacement
euiTheme.colors.ghost (deprecated)	euiTheme.colors.plainLight
euiTheme.colors.ink (deprecated)	euiTheme.colors.plainDark or check if you might be able to use an appropriate token (e.g. for text euiTheme.colors.textParagraph or shadow euiTheme.colors.shadow)
euiTheme.colors.disabled (deprecated)	depends on use case, backgroundBaseDisabled or borderbaseDisabled or textDisabled etc.
euiTheme.colors.body (deprecated)	depends on use case, backgroundBaseSubdued or backgroundBasePlain
euiTheme.colors.emptyShade (deprecated)	TBD
euiTheme.colors.lightestShade (deprecated)	TBD
euiTheme.colors.lightShade (deprecated)	TBD
euiTheme.colors.mediumShade (deprecated)	TBD
euiTheme.colors.darkShade (deprecated)	TBD
euiTheme.colors.darkestShade (deprecated)	TBD

Important

Legacy shade tokens (e.g. lightestShade or darkShade) do not need to be exchanged yet, as there are no complete guidelines on how to change them.
If your use case is clear, you may update them but it's not required. We advice aligning with the responsible designer on the updates.

Examples:
If lightShade is used for a border color, you might be able to migrate to euiTheme.border.color or euiTheme.colors.borderBasePlain for form elements or when a stronger border color is required in general.

If emptyShade is used as a background color, you might be able to migrate to euiTheme.colors.backgroundBasePlain.

If lightestShade is used as background color, you might be able to migrate to use either euiTheme.colors.backgroundBaseDisabled (for disabled states) or euiTheme.colors.backgroundBaseSubdued or euiTheme.colors.backgroundBaseHighlighted.