[EuiPalettes] Add additional color palettes #8725

mgadewoll · 2025-05-30T14:30:38Z

Summary

This PR introduces three new color palettes: euiPaletteSkyBlue, euiPaletteYellow and euiPaletteOrange.

Changes

adds euiPaletteSkyBlue, euiPaletteYellow and euiPaletteOrange palette functions and respective hooks:
- useEuiPaletteSkyBlue
- useEuiPaletteYellow
- useEuiPaletteOrange
renames vis.euiColorVisNeutral0 to euiColorVisBase0 - with the introduction of a neutral color, we need a different naming for the palette base color (⚠️ requires consumer update)
adds new tokens for the palettes:
- euiColorVisNeutral0
- euiColorVisNeutral1
  -euiColorVisWarning1
- euiColorVisRisk0
- euiColorVisRisk1
updates value of euiColorVisWarning0 - effectively moves the value to token euiColorVisWarning1 to align with the existing naming (⚠️ requires consumer update)

Important

The marked changes on token naming/value require updates on consumers but are not technically breaking but visually. The tokens are available but the values changed.
The changes required on Kibana are prepared here. There are no usages on Cloud-UI.

Note

The new tokens have been added for Amsterdam as well to ensure parity. The values have been derived from available vis colors (there is no design spec for these) but they are not expected to be used as Amsterdam is the legacy theme.

QA

ci and new tests pass
review added palettes in the docs

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)

- aligns namings and adds additional required tokens

- adds palettes euiPaletteSkyBlue/yellow/Orange

elasticmachine · 2025-05-30T15:05:52Z

💚 Build Succeeded

History

💚 Build #345 succeeded 5797327

cc @mgadewoll

elasticmachine · 2025-05-30T15:21:15Z

💚 Build Succeeded

Buildkite Build
Commit: 34aad8a

cc @mgadewoll

acstll

From the code side it's looking good! (even commit messages ;)) 🟢

[feel free to ignore completely] I found it a bit peculiar that the palettes are generated using vis colors with semantic names (warning) but are exposed with the color name (yellow); in the case of "sky blue" it made me think, what if the "neutral" colors change at some point to something different (another blue or something else), wouldn't the euiPaletteSkyBlue API become "obsolete"?

mgadewoll · 2025-06-02T14:10:00Z

[feel free to ignore completely] I found it a bit peculiar that the palettes are generated using vis colors with semantic names (warning) but are exposed with the color name (yellow); in the case of "sky blue" it made me think, what if the "neutral" colors change at some point to something different (another blue or something else), wouldn't the euiPaletteSkyBlue API become "obsolete"?

@acstll Yes, that's a good point. And I agree: the naming doesn't really fit together (anymore). 🫠 For palettes it was decided that names are more agnostic in that sense as they could be used in different contexts and with different meanings.
Currently the vis colors are not quite correct anymore. Now that we start separating severity colors out, some of the (temp-ish) tokens don't really make full sense anymore there. The actual vis colors are only the main datavis colors, everything else is palettes then.
My plan was for those to be moved out of colors.vis into their own grouping, similar to we now also have colors.severity.
But that would require a bit more consolidation to check how are they in use (since the datavis colors couldn't support all color needs initially). I'd like for the color needs and updates to first settle into a more stable form before getting back to this, otherwise we might touch it multiple times and palettes are not that critical 😄

acstll · 2025-06-03T08:22:29Z

I'd like for the color needs and updates to first settle into a more stable form before getting back to this, otherwise we might touch it multiple times and palettes are not that critical 😄

I agree, I wouldn't change anything now either (but it caught my attention); so thank you @mgadewoll for the explanation 🙂

gvnmagni

From the design perspective everything looks good 👌

github-actions · 2025-06-06T19:10:20Z

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

`102.3.0` ⏩ `103.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 [#8736](elastic/eui#8736), [#8732](elastic/eui#8732), and [#8732](elastic/eui#8732) include a number of small style tweaks `EuiResizableCollapseButton`, `EuiTitle`, and `EuiListGroupItem`. [#8756](elastic/eui#8756) and [#8744](elastic/eui#8744) rename a couple of icons: `questionInCircle` -> `question` `iInCircle` > `info` In both cases, the old name is **backwards-compatible** (unless importing directly from `assets` folder (see more in the release notes regarding that). However, the old name will eventually be deprecated as a part of a larger set of deprecations. **No action is required at this time to handle this renaming. We will issue a dedicated PR to Kibana to replace the old names with the new names in the future** [#8725](elastic/eui#8725) adds Sky Blue, Yellow, and Orange palettes to EUI's [color palettes](https://eui.elastic.co/docs/utilities/color-palettes/#recommended-quantitative-palettes), as well as new tokens for Risk, Neutral, and Warning. **[Breaking change]** Please note that as part of this change, the following tokens have been renamed: `euiColorVisNeutral0` -> `euiColorVisBase0` `euiColorVisWarning0` -> `euiColorVisWarning1` The original tokens still exist, but have been updated to use new colors in a way that would be breaking. This PR updates the existing references in 0b21d2d. ## Package updates ### `@elastic/eui` ## [`v103.0.0`](https://github.com/elastic/eui/releases/v103.0.0) - Replaced `question` icon glyph ([#8756](elastic/eui#8756)) - Updated `EuiResizableCollapseButton` to use an empty button ([#8736](elastic/eui#8736)) - Added `info` icon glyph ([#8744](elastic/eui#8744)) - Removed uppercase styling from `EuiText` `h6` headings to match `EuiTitle` ([#8732](elastic/eui#8732)) - Removed heavier font weight from `xs` and `s` `EuiListGroupItem` sizes for consistency ([#8732](elastic/eui#8732)) - Updated the `font-weight` of default `EuiFilterButton` and `EuiButtonGroupButton` to `450` ([#8734](elastic/eui#8734)) - Added color pallete functions and related hooks: ([#8725](elastic/eui#8725)) - `euiPaletteSkyBlue`, `useEuiPaletteSkyBlue` - `euiPaletteYellow`, `useEuiPaletteYellow` - `euiPaletteOrange`, `useEuiPaletteOrange` - Added new tokens on `colors.vis`: ([#8725](elastic/eui#8725)) - `euiColorVisNeutral0` - `euiColorVisNeutral1` - `euiColorVisWarning1` - `euiColorVisRisk0` - `euiColorVisRisk1` - Updated the value of token `colors.vis.euiColorVisWarning0` ([#8725](elastic/eui#8725)) - Updated EuiFilterButton's `numActiveFilters` prop to accept percentage values ([#8705](elastic/eui#8705)) **Bug fixes** - Fixed visual positioning issue for notifications in `EuiHeaderSectionItemButton` ([#8736](elastic/eui#8736)) - Fixed a visual issue where `EuiCollabsibleNavItem` did not have a visible selected state ([#8736](elastic/eui#8736)) - Fixed handling of unregistered code block languages in `EuiMarkdownFormat` ([#8729](elastic/eui#8729)) **Breaking changes** - Renamed `colors.vis.euiColorVisNeutral0` to `euiColorVisBase0` ([#8725](elastic/eui#8725)) ### `@elastic/eui-theme-borealis` ## [`v2.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v200) - Added new tokens on `colors.vis`: ([#8725](elastic/eui#8725)) - `euiColorVisNeutral0` - `euiColorVisNeutral1` - `euiColorVisWarning1` - `euiColorVisRisk0` - `euiColorVisRisk1` - Updated the value of token `colors.vis.euiColorVisWarning0` ([#8725](elastic/eui#8725)) **Bug fixes** - Fixed missing source map warnings emitted by some bundlers by excluding source maps from being published ([#8764](elastic/eui#8764)) - To align with `@elastic/eui` and many other popular packages, we made a call to not ship source maps anymore **Breaking changes** - Renamed `colors.vis.euiColorVisNeutral0` to `euiColorVisBase0` ([#8725](elastic/eui#8725))  --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: Elastic Machine <[email protected]>

# Backport This will backport the following commits from `main` to `8.19`: - [Upgrade EUI to v103.0.0 (#223414)](#223414)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)

mgadewoll added 5 commits May 30, 2025 15:14

refactor: update/add vis colors

c515833

- aligns namings and adds additional required tokens

feat: add new color palettes

faa06be

- adds palettes euiPaletteSkyBlue/yellow/Orange

test: update tests

89c6444

test(vrt): add reference images

c1886b4

docs: add new palettes to docs

5797327

mgadewoll requested a review from gvnmagni May 30, 2025 14:30

mgadewoll self-assigned this May 30, 2025

mgadewoll added breaking change PRs with breaking changes. (Don't delete - used for automation) visual refresh and removed breaking change PRs with breaking changes. (Don't delete - used for automation) labels May 30, 2025

elastic deleted a comment from github-actions bot May 30, 2025

chore: add changelogs

34aad8a

mgadewoll marked this pull request as ready for review May 30, 2025 17:28

mgadewoll requested a review from a team as a code owner May 30, 2025 17:28

acstll self-requested a review June 2, 2025 08:17

acstll approved these changes Jun 2, 2025

View reviewed changes

gvnmagni approved these changes Jun 3, 2025

View reviewed changes

mgadewoll merged commit 0596135 into elastic:main Jun 3, 2025
6 checks passed

This was referenced Jun 6, 2025

[OneDiscover] Histogram log.level color indication elastic/kibana#186273

Open

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

Open

[ML] New Severity colors alignment ML features elastic/kibana#217508

Closed

mgadewoll added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Jun 6, 2025

mgadewoll mentioned this pull request Jun 6, 2025

[Changelog] Update #8725 changelogs #8766

Merged

mgadewoll added a commit that referenced this pull request Jun 6, 2025

[Changelog] Update #8725 changelogs (#8766)

d8fb450

mgadewoll mentioned this pull request Jun 10, 2025

[Amsterdam] Fix circular import #8780

Merged

14 tasks

JasonStoltz mentioned this pull request Jun 11, 2025

Upgrade EUI to v103.0.0 elastic/kibana#223414

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiPalettes] Add additional color palettes #8725

[EuiPalettes] Add additional color palettes #8725

Uh oh!

mgadewoll commented May 30, 2025 •

edited

Loading

Uh oh!

elasticmachine commented May 30, 2025

Uh oh!

elasticmachine commented May 30, 2025

Uh oh!

acstll left a comment

Uh oh!

mgadewoll commented Jun 2, 2025 •

edited

Loading

Uh oh!

acstll commented Jun 3, 2025

Uh oh!

gvnmagni left a comment

Uh oh!

Uh oh!

github-actions bot commented Jun 6, 2025 •

edited by mgadewoll

Loading

Uh oh!

Uh oh!

[EuiPalettes] Add additional color palettes #8725

[EuiPalettes] Add additional color palettes #8725

Uh oh!

Conversation

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

Uh oh!

Summary

Changes

QA

General checklist

Uh oh!

elasticmachine commented May 30, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented May 30, 2025

💚 Build Succeeded

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

acstll commented Jun 3, 2025

Uh oh!

gvnmagni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented May 30, 2025 •

edited

Loading

mgadewoll commented Jun 2, 2025 •

edited

Loading

github-actions bot commented Jun 6, 2025 •

edited by mgadewoll

Loading