[Colors] Create text-ink and text-ghost tokens by weronikaolejniczak · Pull Request #9379 · elastic/eui

weronikaolejniczak · 2026-02-12T12:24:46Z

Summary

Added textInk and textGhost color tokens.
Removed ink and ghost color tokens and euiColorInk and euiColorGhost Sass variables.
Replaced all references of ink and ghost with textInk and textGhost for text and icon color, otherwise plainDark and plainLight.
Updated documentation.

Why are we making this change?

Resolves #8968

ink and ghost color tokens are Amsterdam remnants. We want to remove them in favor of:

textInk and textGhost color tokens used specifically for text and icon color,
plainDark and plainLight in all other cases.

Screenshots # (WIP)

There are no visual changes. No regression. Verified with VRT.

Impact to users

🔴 This is a breaking change. Even though the usage on consumer side is minimal.

Kibana

Usages:

euiColorInk (3 files)
euiColorGhost (5 files)
colors.ink (5 files)
colors.ghost (11 files)

Update commit: elastic/kibana@b17eb9e

Cloud UI

Usages:

✅ euiColorInk (0 files)
✅ euiColorGhost (0 files)
✅ colors.ink (0 files)
colors.ghost (1 file)

Update commit: https://github.com/weronikaolejniczak/cloud-ui/commit/6e111016ae9fc2b830aa0438daab7d24454bc733

QA

Specific checklist

Verify textInk and textGhost are available and ink and ghost are not
Run VRT locally and verify there is no visual regression: yarn workspace @elastic/eui test-visual-regression
Verify the documentation changes make sense, see staging
Double-check all Kibana and Cloud UI usages have been addressed in ☝🏻 commits

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)

github-actions · 2026-02-12T12:25:03Z

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

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx

weronikaolejniczak · 2026-02-12T13:27:25Z

packages/website/docs/getting-started/theming/tokens/colors/index.mdx

+      color: ${euiTheme.colors.disabledText};
+      background-color: ${euiTheme.colors.disabled};


context:

This is not a 1:1 replacement. textInk and textGhost are meant to be used solely with texts and icons (as indicated by the text prefix), so it only makes sense to keep them grouped with the text colors (which is also how they’re organized in Figma), even if they are color-mode-independent. Using them here (or the constants plainDark / plainLight) would be confusing given the current topology.

This means we need to use other “special colors” here. disabledText and disabled work well enough.

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss

packages/eui-theme-borealis/src/variables/_buttons.scss

packages/eui-theme-common/src/global_styling/variables/_buttons.scss

ek-so

Thank you! Looks good to me, and I also wanted to tag @JoseLuisGJ for awareness

JoseLuisGJ · 2026-02-13T09:13:57Z

Thanks for making this work. Confirming that in Figma we are now only using Text/Ghost and Text/Ink color variable tokens, so that we will be in sync.

packages/website/docs/getting-started/theming/tokens/colors/index.mdx

mgadewoll · 2026-02-13T09:31:53Z

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

  "euiColorChartLines": "#7186A8",
  "euiColorChartBand": "#243147",
-  "euiColorGhost": "#FFFFFF",
-  "euiColorInk": "#000000",


Blocking: We'll need to add the new tokens textInk and textGhost as JSON tokens euiColorTextInk and euiColorTextGhost since we still support the usage of those.

If I see it correctly, then these should use the text JSON tokens?

I treated the JSON in a similar way like Sass but you are absolutely right we should add them here. I will go through the Kibana usage again and correct as needed.

Just as additional context: JSON tokens used to be mapped from Sass and the original intention was to remove them as well but while rolling out Borealis we noticed that we need to support them for static use cases where the react theme is not available 🫠

Updated 86f5e1d and elastic/kibana@b17eb9e#diff-ed4ad57637e8f15062e068a18e43b2392cb4b0128a14705f98f6b23a4d198573

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx

mgadewoll · 2026-02-13T10:00:25Z

ℹ️ Note for transparency: We have a tiny regression in the A11y color contrast for badges with mid-tone custom colors (e.g. #777777, as #07101F provides a slightly shorter range.

before	after

That being said, I think the update is fine as is anyway.
The perceived difference is not noticeable and it's difficult to match all possible colors with a sufficient color contrast anyway. Additionally, we provide High Contrast Mode which does use true black. 👍

…ecial_colors_preview.tsx

weronikaolejniczak · 2026-02-13T12:37:01Z

@mgadewoll thank you for the review, I addressed your feedback 😄

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx

packages/eui-theme-borealis/changelogs/upcoming/9379.md

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx

This reverts commit 61074c5.

elasticmachine · 2026-02-13T13:19:02Z

💚 Build Succeeded

History

💚 Build #2657 succeeded 61074c5
💚 Build #2654 succeeded 86f5e1d
💚 Build #2651 succeeded c5ca2bc
💚 Build #2645 succeeded 9a30969
💚 Build #2643 succeeded 2f9edd1
💚 Build #2639 succeeded 476c4e7

cc @weronikaolejniczak

elasticmachine · 2026-02-13T13:38:34Z

💚 Build Succeeded

Buildkite Build
Commit: 3171c50

History

💚 Build #5771 succeeded 86f5e1d
💚 Build #5764 succeeded 9a30969
💚 Build #5762 succeeded 2f9edd1
💚 Build #5759 succeeded 476c4e7
💔 Build #5756 failed 0355974

cc @weronikaolejniczak

mgadewoll

🟢 Thanks for the additional updates! All changes are LGTM and look/work as expected. Nice work! 🎉

mgadewoll · 2026-02-16T08:17:00Z

packages/eui-theme-borealis/changelogs/upcoming/9379.md

@@ -0,0 +1,5 @@
+- Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode.


ℹ️ I just realized that this PR had the skip-changelog-eui label. I missed that in the review 🫠

We should add a changelog for this on eui as well as the tokens are consumed through the theme from eui.
I added a PR for it here.

## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

weronikaolejniczak self-assigned this Feb 12, 2026

weronikaolejniczak added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Feb 12, 2026

weronikaolejniczak force-pushed the feat/text-ink-ghost branch from b717dce to 201069a Compare February 12, 2026 12:42

weronikaolejniczak commented Feb 12, 2026

View reviewed changes

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx Outdated Show resolved Hide resolved

weronikaolejniczak force-pushed the feat/text-ink-ghost branch 2 times, most recently from df1d2d9 to 75f0774 Compare February 12, 2026 13:15

weronikaolejniczak commented Feb 12, 2026

View reviewed changes

weronikaolejniczak force-pushed the feat/text-ink-ghost branch from 75f0774 to 0355974 Compare February 12, 2026 13:47

weronikaolejniczak mentioned this pull request Feb 12, 2026

chore(eui): update VRT references #9380

Merged

15 tasks

weronikaolejniczak force-pushed the feat/text-ink-ghost branch from 0355974 to cd864e2 Compare February 12, 2026 14:40

weronikaolejniczak added the skip-changelog-eui Use on PRs to skip changelog requirement (for @elastic/eui) label Feb 12, 2026

weronikaolejniczak added 9 commits February 12, 2026 18:26

feat(common): add textInk and textGhost tokens

5daa3d5

feat(borealis): add textInk and textGhost tokens

9bef391

feat(common): remove ghost and ink tokens

26254b6

feat(borealis): remove ghost and ink tokens

7955fb0

feat(eui): replace ghost and ink token usages

e058a61

feat(website): update documentation around ink and ghost tokens

0509b65

feat(borealis): add textInk and textGhost HCM overrides

1413552

chore(borealis): add changelog

670265d

chore(common): add changelog

2f9edd1

weronikaolejniczak force-pushed the feat/text-ink-ghost branch from 476c4e7 to 2f9edd1 Compare February 12, 2026 17:26

weronikaolejniczak requested a review from ek-so February 12, 2026 17:48

weronikaolejniczak commented Feb 12, 2026

View reviewed changes

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss Show resolved Hide resolved

weronikaolejniczak commented Feb 12, 2026

View reviewed changes

packages/eui-theme-borealis/src/variables/_buttons.scss Outdated Show resolved Hide resolved

weronikaolejniczak commented Feb 12, 2026

View reviewed changes

packages/eui-theme-common/src/global_styling/variables/_buttons.scss Outdated Show resolved Hide resolved

weronikaolejniczak mentioned this pull request Feb 12, 2026

[Test] Replace ink and ghost tokens elastic/kibana#252951

Closed

weronikaolejniczak marked this pull request as ready for review February 12, 2026 18:50

weronikaolejniczak requested a review from a team as a code owner February 12, 2026 18:50

chore(borealis): update comment

1c00d97

chore(common): update comment

9a30969

ek-so approved these changes Feb 13, 2026

View reviewed changes

mgadewoll self-requested a review February 13, 2026 09:45

weronikaolejniczak commented Feb 13, 2026

View reviewed changes

packages/website/docs/getting-started/theming/tokens/colors/index.mdx Show resolved Hide resolved

mgadewoll reviewed Feb 13, 2026

View reviewed changes

weronikaolejniczak and others added 3 commits February 13, 2026 11:46

Update packages/website/docs/getting-started/theming/tokens/colors/sp…

c5ca2bc

…ecial_colors_preview.tsx

feat(borealis): add euiColorTextGhost and euiColorTextInk JSON tokens

86f5e1d

chore(borealis): update changelog

61074c5

weronikaolejniczak requested a review from mgadewoll February 13, 2026 12:16

mgadewoll reviewed Feb 13, 2026

View reviewed changes

weronikaolejniczak added 2 commits February 13, 2026 13:42

chore(borealis): add new token types

4a9d892

chore(website): update example css

0522786

mgadewoll reviewed Feb 13, 2026

View reviewed changes

packages/website/docs/getting-started/theming/tokens/colors/special_colors_preview.tsx Outdated Show resolved Hide resolved

weronikaolejniczak added 2 commits February 13, 2026 13:49

Revert "chore(borealis): update changelog"

a0ca2b5

This reverts commit 61074c5.

chore(website): use deprecated special token

3171c50

mgadewoll approved these changes Feb 13, 2026

View reviewed changes

weronikaolejniczak merged commit eb3e12e into elastic:main Feb 13, 2026
5 checks passed

mgadewoll mentioned this pull request Feb 16, 2026

Add missing changelog for #9379 #9386

Merged

mgadewoll reviewed Feb 16, 2026

View reviewed changes

mgadewoll added a commit that referenced this pull request Feb 16, 2026

Add missing changelog for #9379 (#9386)

c67fe5c

mgadewoll mentioned this pull request Feb 16, 2026

Upgrade EUI to v113.0.0 elastic/kibana#253286

Merged

		color: ${euiTheme.colors.disabledText};
		background-color: ${euiTheme.colors.disabled};

		@@ -0,0 +1,5 @@
		- Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode.

Conversation

weronikaolejniczak commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots # (WIP)

Impact to users

Kibana

Cloud UI

QA

Specific checklist

General checklist

Uh oh!

github-actions bot commented Feb 12, 2026 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ek-so left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JoseLuisGJ commented Feb 13, 2026

Uh oh!

Uh oh!

mgadewoll Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

mgadewoll Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Feb 13, 2026

Uh oh!

weronikaolejniczak commented Feb 13, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Feb 13, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Feb 13, 2026

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mgadewoll Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

weronikaolejniczak commented Feb 12, 2026 •

edited

Loading

github-actions bot commented Feb 12, 2026 •

edited by weronikaolejniczak

Loading

weronikaolejniczak Feb 12, 2026 •

edited

Loading

ek-so left a comment •

edited

Loading