[Theme] Update `textSubdued` token value in dark mode #9071

mgadewoll · 2025-10-01T12:02:42Z

Summary

Relates to https://github.com/elastic/eui-private/issues/421#issuecomment-3353921371

This PR updates the value for textSubdued (and legacy subduedText) in dark mode to prevent color contrast issues for small text on backgroundLightText (shade120, #2B394F) (e.g. used for breadcrumbs)

Changes

Note

The changes are scoped to eui-theme-borealis only

changes textSubdued in dark mode from shade60 (#8E9FBC) to shade55 (#98A8C3)
adds additional vrt-only stories for breadcrumbs

Why are we making this change?

Accessibility: Ensuring required color contrast for text of 4.5:1

Screenshots #

before	after

Impact to users

🟢 No updates required on consumer side.

QA

verify textSubdued and legacy subduedText tokens are updated to use #98A8C3
verify that (non-interactive) EuiBreadcrumbs (story) do not have color contrast violations

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)

- change introduced due to color contrast issues on backgroundLightText

elasticmachine · 2025-10-01T13:07:57Z

💚 Build Succeeded

History

💚 Build #1421 succeeded 3d001ef

cc @mgadewoll

elasticmachine · 2025-10-01T13:30:19Z

💚 Build Succeeded

Buildkite Build
Commit: 01f6c3f

History

💚 Build #4840 succeeded 3d001ef

cc @mgadewoll

acstll

🟢 Followed the QA steps using Storybook, double-checked the values. Looks good to merge!

packages/eui/src/components/breadcrumbs/breadcrumbs.stories.tsx

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.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 - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.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 - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [elastic#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([elastic#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([elastic#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([elastic#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([elastic#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([elastic#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([elastic#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([elastic#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([elastic#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([elastic#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([elastic#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([elastic#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([elastic#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([elastic#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([elastic#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([elastic#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

refactor: update textSubdued color value in dark mode

6bd00d4

- change introduced due to color contrast issues on backgroundLightText

mgadewoll self-assigned this Oct 1, 2025

mgadewoll added 2 commits October 1, 2025 14:49

test(vrt): add reference images

0c21e04

chore: add changelogs

01f6c3f

mgadewoll force-pushed the theme/update-dark-mode-text-subdued branch from 3d001ef to 01f6c3f Compare October 1, 2025 12:49

mgadewoll marked this pull request as ready for review October 1, 2025 14:36

mgadewoll requested a review from a team as a code owner October 1, 2025 14:36

acstll self-requested a review October 2, 2025 08:15

acstll approved these changes Oct 2, 2025

View reviewed changes

packages/eui/src/components/breadcrumbs/breadcrumbs.stories.tsx Show resolved Hide resolved

mgadewoll merged commit 5834791 into elastic:main Oct 2, 2025
6 checks passed

acstll mentioned this pull request Oct 6, 2025

Upgrade EUI to v106.7.0 elastic/kibana#237661

Merged

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

[Theme] Update textSubdued token value in dark mode (#9071)

1901e85

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Theme] Update `textSubdued` token value in dark mode #9071

[Theme] Update `textSubdued` token value in dark mode #9071

Uh oh!

mgadewoll commented Oct 1, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Oct 1, 2025

Uh oh!

elasticmachine commented Oct 1, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Theme] Update textSubdued token value in dark mode #9071

[Theme] Update textSubdued token value in dark mode #9071

Uh oh!

Conversation

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

Uh oh!

Summary

Changes

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

elasticmachine commented Oct 1, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 1, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Theme] Update `textSubdued` token value in dark mode #9071

[Theme] Update `textSubdued` token value in dark mode #9071

mgadewoll commented Oct 1, 2025 •

edited

Loading