[Visual Refresh] Update severity colors #8601

mgadewoll · 2025-04-17T10:20:43Z

Summary

Closes https://github.com/elastic/eui-private/issues/277

This PR adds updates to colors tokens by adding new primitive colors, new semantic tokens for "neutral" and "risk" states as well as removing previous tokens. Additionally this PR adds changes to a few components to enable the usage of the new semantic color variants "neutral" and "risk".

Important

The initial naming of "regular" and "risk" as token variants has been changed to "neutral" and "risk" to align better with the intended usage of severity and prevent potential misunderstandings of the work "regular" as kind of standard variant.

Changes

Added new primitive color ranges (10 - 140) for sky and orange (internal only, not exported on the theme)
Added new severity tokens

colors.severity.unknown
colors.severity.success
colors.severity.neutral
colors.severity.warning
colors.severity.risk
colors.severity.danger

Removed previous severity tokens:

colors.vis.euiColorSeverity0
colors.vis.euiColorSeverity1
colors.vis.euiColorSeverity2
colors.vis.euiColorSeverity3
colors.vis.euiColorSeverity4
colors.vis.euiColorSeverity5
colors.vis.euiColorSeverity6
colors.vis.euiColorSeverity7
colors.vis.euiColorSeverity8
colors.vis.euiColorSeverity9
colors.vis.euiColorSeverity10
colors.vis.euiColorSeverity11
colors.vis.euiColorSeverity12
colors.vis.euiColorSeverity13
colors.vis.euiColorSeverity14

Added new semantic color tokes

colors.textNeutral
colors.textRisk
colors.backgroundBaseNeutral
colors.backgroundBaseRisk
colors.backgroundLightNeutral
colors.backgroundLightRisk
colors.backgroundFilledNeutral
colors.backgroundFilledRisk
colors.borderBaseNeutral
colors.borderBaseRisk
colors.borderStrongNeutral
colors.borderStrongRisk

Added new button component tokens for "neutral" and "risk" variants

components.buttons.backgroundNeutral
components.buttons.backgroundRisk
components.buttons.backgroundFilledNeutral
components.buttons.backgroundFilledRisk
components.buttons.backgroundEmptyNeutralHover
components.buttons.backgroundEmptyRiskHover
components.buttons.textColorNeutral
components.buttons.textColorRisk
components.buttons.textColorFilledNeutral
components.buttons.textColorFilledRisk

Added component updates to support usage of "neutral" and "risk" color variants for EuiButton, EuiButtonIcon, EuiButtonEmpty, EuiBadge, EuiIcon, EuiPanel (and any further components that inherit from these updated components)

📷 Component screenshots

component	LIGHT	DARK
EuiButton (filled)
EuiButton (base)
EuiButtonEmpty
EuiButtonIcon (empty)
EuiButtonIcon (filled)
EuiButtonIcon (base)
EuiBadge
EuiIcon
EuiPanel

Amsterdam

Note

To ensure theme parity token changes have been ported to Amsterdam and the values have been manually aligned by using the available data vis colors.

QA

review the new tokens (EUI docs, EUI+ docs) and ensure they align with the definitions provided here
review the updated components and ensure the new variants "neutral" and "risk" are available and displayed correctly

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

github-actions · 2025-04-17T10:20:58Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

mgadewoll · 2025-04-17T13:00:57Z

ℹ️ Breaking change impact:

The severity token usages so far are limited because they were only recently introduced with the new Borealis color tokens.
There are 3 usages on Kibana and none on CloudUI.

Kibana usages:

x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx
x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx
x-pack/solutions/observability/plugins/apm/common/service_health_status.ts

The required mapping from old to new tokens was provided here.

The Kibana replacement changes were already prepared on this branch (commit) and deployed for testing here.

- removes previous severity tokens

- adds new colors variants tokens for Neutral and Risk

- adds support for EuiPanel and related components, EuiIcon, EuiBadge

- update because of rebase alignment which actually fixed a wrong mapping for components.buttons.textColorRisk in light mode

elasticmachine · 2025-04-17T15:50:18Z

💚 Build Succeeded

History

💚 Build #89 succeeded 716dc55
💚 Build #87 succeeded 403f54c
💚 Build #83 succeeded 939f9a4
💚 Build #82 succeeded 1681205

cc @mgadewoll

gvnmagni

LGTM 🚀

kibanamachine · 2025-04-17T16:07:09Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8601/
Storybook: https://eui.elastic.co/pr_8601/storybook
New docs: https://eui.elastic.co/pr_8601/new-docs

elasticmachine · 2025-04-17T16:08:31Z

💚 Build Succeeded

Buildkite Build
Commit: 3291022

History

💚 Build #3890 succeeded 403f54c
💚 Build #3886 succeeded 939f9a4

cc @mgadewoll

acstll

thank you! 🟢

required after elastic#8601

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit ec008b0)

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) >[!IMPORTANT] This PR is a direct sibling to this [upgrade PR](#219482) to `main`. The difference is that it adds a standalone EUI package with the previous "Amsterdam" theme. Apart from the theme difference, **there are no further changes added**. ## Changes - ~~Update severity colors 4c852f13f98c33e83484540a1192f4e65a8cce05~~ (not needed in `8.19`) - Types fix regarding `euiTheme.colors` e15b9cd ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14`

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

## Summary Map asset criticality status in `<AssetCriticalityBadge>` component to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Screenshots | | Before | After | |--------|--------|--------| | Light mode | <img width="203" alt="_before_light" src="https://github.com/user-attachments/assets/ca09f950-8cd3-42d6-b82c-2dc4c775cdab" /> | <img width="188" alt="_after_light" src="https://github.com/user-attachments/assets/168b78c7-5a0f-42d1-918d-448d8ce242ac" /> | | Dark mode | <img width="163" alt="_before_dark" src="https://github.com/user-attachments/assets/b2f89d25-578a-4e77-8033-9e3df5d7f9a6" /> | <img width="176" alt="_after_dark" src="https://github.com/user-attachments/assets/e915b0e8-8b81-4cd7-9edd-5de58f8b7d90" /> | ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where badges are used.

## Summary Solves this issue in relation to Risk severity in the context of Security solution: - elastic/security-team#11516 Map risk severity color map to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where risk severity is used.

## Summary Map asset criticality status in `<AssetCriticalityBadge>` component to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Screenshots | | Before | After | |--------|--------|--------| | Light mode | <img width="203" alt="_before_light" src="https://github.com/user-attachments/assets/ca09f950-8cd3-42d6-b82c-2dc4c775cdab" /> | <img width="188" alt="_after_light" src="https://github.com/user-attachments/assets/168b78c7-5a0f-42d1-918d-448d8ce242ac" /> | | Dark mode | <img width="163" alt="_before_dark" src="https://github.com/user-attachments/assets/b2f89d25-578a-4e77-8033-9e3df5d7f9a6" /> | <img width="176" alt="_after_dark" src="https://github.com/user-attachments/assets/e915b0e8-8b81-4cd7-9edd-5de58f8b7d90" /> | ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where badges are used.

## Summary Solves this issue in relation to Risk severity in the context of Security solution: - elastic/security-team#11516 Map risk severity color map to the new color tokens in EUI Borealis ([see new pattern](https://eui.elastic.co/docs/patterns/severity/index.html)). These new color tokens were introduced through this PR: - elastic/eui#8601 ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This is a low-risk change that only presents different colors where risk severity is used.

mgadewoll added breaking change PRs with breaking changes. (Don't delete - used for automation) visual refresh labels Apr 17, 2025

mgadewoll self-assigned this Apr 17, 2025

mgadewoll force-pushed the theme/277-severity-token-update branch from 939f9a4 to 403f54c Compare April 17, 2025 12:40

mgadewoll requested a review from gvnmagni April 17, 2025 14:25

mgadewoll marked this pull request as ready for review April 17, 2025 14:25

mgadewoll requested a review from a team as a code owner April 17, 2025 14:25

mgadewoll added 9 commits April 17, 2025 17:07

feat(colors): add new severity tokens

1a3f90c

- removes previous severity tokens

feat(colors): add new semantic color tokens

63c52d5

- adds new colors variants tokens for Neutral and Risk

docs: add new token output to docs

7c6a6b0

feat(button): support neutral and risk variants

197d8e5

feat: support neutral and risk variants for more components

fd7cfbd

- adds support for EuiPanel and related components, EuiIcon, EuiBadge

test: update snapshots

2d88169

chore: add changelogs

1ce3c60

fix(website): fix token reference typo

b2c909c

test: update snapshots

3291022

- update because of rebase alignment which actually fixed a wrong mapping for components.buttons.textColorRisk in light mode

mgadewoll force-pushed the theme/277-severity-token-update branch from 716dc55 to 3291022 Compare April 17, 2025 15:36

gvnmagni approved these changes Apr 17, 2025

View reviewed changes

gvnmagni mentioned this pull request Apr 18, 2025

[Meta] Status, Health & Severity elastic/kibana#211179

Open

acstll self-requested a review April 22, 2025 08:27

acstll approved these changes Apr 23, 2025

View reviewed changes

mgadewoll merged commit 569be27 into elastic:main Apr 24, 2025
6 checks passed

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Apr 28, 2025

feat: add additional neutral and risk tokens

156fca7

required after elastic#8601

mgadewoll mentioned this pull request Apr 28, 2025

[Visual Refresh][EuiButton] Add Refresh design update #1 #8595

Merged

15 tasks

acstll mentioned this pull request Apr 28, 2025

Upgrade EUI to v102.0.0 elastic/kibana#219421

Closed

acstll mentioned this pull request Apr 29, 2025

Update EUI to v102.0.0 elastic/kibana#219482

Merged

mgadewoll mentioned this pull request Apr 29, 2025

Severity pattern page #8650

Merged

acstll mentioned this pull request Apr 29, 2025

[8.19] Upgrade EUI to v102.0.0 elastic/kibana#219532

Merged

This was referenced May 30, 2025

Update AssetCriticalityBadge color map to EUI Borealis elastic/kibana#222024

Merged

Update Risk severity color map to EUI Borealis elastic/kibana#222061

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Visual Refresh] Update severity colors #8601

[Visual Refresh] Update severity colors #8601

Uh oh!

mgadewoll commented Apr 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 17, 2025 •

edited by mgadewoll

Loading

Uh oh!

mgadewoll commented Apr 17, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Apr 17, 2025

Uh oh!

gvnmagni left a comment

Uh oh!

kibanamachine commented Apr 17, 2025

Uh oh!

elasticmachine commented Apr 17, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[Visual Refresh] Update severity colors #8601

[Visual Refresh] Update severity colors #8601

Uh oh!

Conversation

mgadewoll commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Amsterdam

QA

General checklist

Uh oh!

github-actions bot commented Apr 17, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented Apr 17, 2025

💚 Build Succeeded

History

Uh oh!

gvnmagni left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 17, 2025

Uh oh!

elasticmachine commented Apr 17, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented Apr 17, 2025 •

edited

Loading

github-actions bot commented Apr 17, 2025 •

edited by mgadewoll

Loading

mgadewoll commented Apr 17, 2025 •

edited

Loading