Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

ek-so · 2025-12-16T10:20:41Z

Summary

I have added new component-level color tokens for EuiTour (matching shades-50/shades-100 and also matching backgroundFillSuccess for inactive and active states respectively) and used it there.
I have remapped EuiBeacon success variant to the right token

Why are we making this change?

The problem we currently have: the dot that indicates current step is almost not different from the dots that indicate other steps (non-active):

Also, the beacon color doesn't match the "success" color token and uses accentSecondary instead.

Screenshots #

Impact to users

Should be no impact

QA

Remove or strikethrough items that do not apply to your PR.

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)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
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)

packages/eui/changelogs/upcoming/9271.md

packages/eui-theme-borealis/src/variables/_components.ts

ek-so · 2025-12-16T13:47:58Z

Thank you @mgadewoll! I applied the changes you proposed, and also noticed that our EuiBeacon that's used in a tour is mapped to a wrong color (access Secondary instead of success), there fore the beacon color and the active tour step color don't match. Since it seemed to be a small change, I added it to this PR too. I hope that works 🤔

elasticmachine · 2025-12-16T14:33:03Z

💚 Build Succeeded

History

💚 Build #2216 succeeded 02fa920
💚 Build #2212 succeeded 43a806c

elasticmachine · 2025-12-16T14:50:39Z

💚 Build Succeeded

Buildkite Build
Commit: 6b8fe95

History

💚 Build #5426 succeeded 02fa920
💚 Build #5422 succeeded 43a806c

mgadewoll · 2025-12-16T15:17:41Z

packages/eui-theme-borealis/src/variables/_components.ts

    tableFooterBackground: SEMANTIC_COLORS.shade135,
+
+    tourStepIndicatorInactiveColor: SEMANTIC_COLORS.shade100,
+    tourStepIndicatorActiveColor: computed(


FYI: If light and dark have the same computed token, it's not needed to define it for dark again as the token already switches accordingly. You can keep it, or remove it as you prefer.

mgadewoll

🟢 The changes are LGTM. Thanks for contributing and adding updates! 🎉

## Dependency updates - `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0` - `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0` --- ## Changes - Removed `euiBasicTable.tableCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithPagination`, `euiBasicTable.tableSimpleAutoCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens - Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`, `euiBasicTable.caption.paginationPart.withPageCount`, `euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState` i18n tokens - Updated snapshot tests - Updated a couple of Jest assertions due to [this EUI change](https://github.com/elastic/eui/pull/9254/changes)), see 127ab80 ## Package updates ### `@elastic/eui` [v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0) - Added `dashedCircle` icon ([#9278](elastic/eui#9278)) - Added `crossProjectSearch` icon ([#9275](elastic/eui#9275)) - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([#9271](elastic/eui#9271)) - Remapped `EuiBeacon` component `success` variant to use `success` color token instead of `accentSecondary` ([#9271](elastic/eui#9271)) - Added `EuiSplitButton` and its respective sub-components `EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary` ([#9269](elastic/eui#9269)) - Added `productRobot` icon ([#9259](elastic/eui#9259)) - Added beta `euiContainer()`, `euiContainerCSS()`, and `euiContainerQuery()` Emotion utilities to help work with CSS Container Queries ([#9264](elastic/eui#9264)) - Added `useEuiContainerQuery` hook to observe container query changes in JavaScript ([#9251](elastic/eui#9251)) - Updated EuiFlexGroup's `gutterSize` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiSpacer's `size` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiHorizontalRule's `margin` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiPageHeader's tab `size` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiEmptyPrompt's spacer `size` between title and text from `m` to `s` ([#9132](elastic/eui#9132)) - Updated EuiSearchBar's `gutterSize` from `m` to `s` ([#9132](elastic/eui#9132)) <img width="2158" height="392" alt="image" src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945" /> <img width="1692" height="608" alt="image" src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616" /> <img width="2182" height="302" alt="image" src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00" /> <img width="1904" height="1066" alt="image" src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7" /> <img width="1566" height="128" alt="image" src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495" /> **Bug fixes** - Fixed flyout overlay masks not being visible for `EuiDataGrid`'s fullscreen mode by reducing the `z-index` of the fullscreen mode overlay ([#9267](elastic/eui#9267)) **Accessibility** - Added information about the empty state of `EuiBasicTable` in the table caption ([#9265](elastic/eui#9265)) - Improved `EuiBasicTable` accessibility by ensuring a fallback `tableCaption` is applied if none is provided ([#9254](elastic/eui#9254)) ### `@elastic/eui-theme-borealis` v5.3.0 - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([#9271](elastic/eui#9271))

## Dependency updates - `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0` - `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0` --- ## Changes - Removed `euiBasicTable.tableCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithPagination`, `euiBasicTable.tableSimpleAutoCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens - Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`, `euiBasicTable.caption.paginationPart.withPageCount`, `euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState` i18n tokens - Updated snapshot tests - Updated a couple of Jest assertions due to [this EUI change](https://github.com/elastic/eui/pull/9254/changes)), see elastic@127ab80 ## Package updates ### `@elastic/eui` [v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0) - Added `dashedCircle` icon ([elastic#9278](elastic/eui#9278)) - Added `crossProjectSearch` icon ([elastic#9275](elastic/eui#9275)) - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([elastic#9271](elastic/eui#9271)) - Remapped `EuiBeacon` component `success` variant to use `success` color token instead of `accentSecondary` ([elastic#9271](elastic/eui#9271)) - Added `EuiSplitButton` and its respective sub-components `EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary` ([elastic#9269](elastic/eui#9269)) - Added `productRobot` icon ([elastic#9259](elastic/eui#9259)) - Added beta `euiContainer()`, `euiContainerCSS()`, and `euiContainerQuery()` Emotion utilities to help work with CSS Container Queries ([elastic#9264](elastic/eui#9264)) - Added `useEuiContainerQuery` hook to observe container query changes in JavaScript ([elastic#9251](elastic/eui#9251)) - Updated EuiFlexGroup's `gutterSize` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiSpacer's `size` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiHorizontalRule's `margin` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiPageHeader's tab `size` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiEmptyPrompt's spacer `size` between title and text from `m` to `s` ([elastic#9132](elastic/eui#9132)) - Updated EuiSearchBar's `gutterSize` from `m` to `s` ([elastic#9132](elastic/eui#9132)) <img width="2158" height="392" alt="image" src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945" /> <img width="1692" height="608" alt="image" src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616" /> <img width="2182" height="302" alt="image" src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00" /> <img width="1904" height="1066" alt="image" src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7" /> <img width="1566" height="128" alt="image" src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495" /> **Bug fixes** - Fixed flyout overlay masks not being visible for `EuiDataGrid`'s fullscreen mode by reducing the `z-index` of the fullscreen mode overlay ([elastic#9267](elastic/eui#9267)) **Accessibility** - Added information about the empty state of `EuiBasicTable` in the table caption ([elastic#9265](elastic/eui#9265)) - Improved `EuiBasicTable` accessibility by ensuring a fallback `tableCaption` is applied if none is provided ([elastic#9254](elastic/eui#9254)) ### `@elastic/eui-theme-borealis` v5.3.0 - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([elastic#9271](elastic/eui#9271))

elastic#9271)

ek-so added 3 commits December 16, 2025 11:13

Changes added

82842d3

Visual regression

d54c779

Changelog

43a806c

ek-so marked this pull request as ready for review December 16, 2025 10:58

ek-so requested a review from a team as a code owner December 16, 2025 10:58

mgadewoll reviewed Dec 16, 2025

View reviewed changes

packages/eui/changelogs/upcoming/9271.md Outdated Show resolved Hide resolved

packages/eui-theme-borealis/src/variables/_components.ts Outdated Show resolved Hide resolved

ek-so added 8 commits December 16, 2025 13:31

Proposed changes

ab582a4

Changed back to text (for the dot)

49d1d9a

Used a background fill instead of icon text color

bdf94b2

Remapped the beacon to a right color

04b7b80

Changelog

99de620

Visual tests

cd49aa2

Unit tests

0b28dfc

Typo

02fa920

ek-so changed the title ~~Created a new token for EuiTour non-active dots state~~ Tokens clean-up for EuiTour (non-active dots color and beacon color) Dec 16, 2025

ek-so added 2 commits December 16, 2025 15:09

Changelogs

2df549f

Changelog fixes

6b8fe95

ek-so requested a review from mgadewoll December 16, 2025 15:04

mgadewoll reviewed Dec 16, 2025

View reviewed changes

mgadewoll approved these changes Dec 16, 2025

View reviewed changes

ek-so merged commit 6c6cafd into elastic:main Dec 16, 2025
5 checks passed

weronikaolejniczak mentioned this pull request Jan 5, 2026

Update EUI to 111.1.0 elastic/kibana#247843

Merged

ek-so deleted the ekso-eui-tour-fix branch January 15, 2026 12:58

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

Tokens clean-up for EuiTour (non-active dots color and beacon color) (

c73e84c

elastic#9271)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

Uh oh!

ek-so commented Dec 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

ek-so commented Dec 16, 2025

Uh oh!

elasticmachine commented Dec 16, 2025

Uh oh!

elasticmachine commented Dec 16, 2025

Uh oh!

mgadewoll Dec 16, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Tokens clean-up for EuiTour (non-active dots color and beacon color) #9271

Tokens clean-up for EuiTour (non-active dots color and beacon color) #9271

Uh oh!

Conversation

ek-so commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

ek-so commented Dec 16, 2025

Uh oh!

elasticmachine commented Dec 16, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Dec 16, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

Tokens clean-up for `EuiTour` (non-active dots color and beacon color) #9271

ek-so commented Dec 16, 2025 •

edited

Loading