[Theme] Support theme level overrides by mgadewoll · Pull Request #8558 · elastic/eui

mgadewoll · 2025-04-07T16:31:19Z

Summary

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

This PR adds support for theme-specific overrides directly on the theme definition layer.
While we already have ways to override theme tokens (using the modify prop on the EuiProvider) this way is limited to what's available to the provider (e.g. it does not have access to the primitive tokens).

Note

HCM: Currently we add overrides for high contrast mode here.
This use passes overrides via the modify prop to the provider. Anything added there currently is applied to any theme active on the provider, it's a global override.

For theme-specific overrides we instead would want to provide the overrides directly on the definition layer (e.g. here).
A use case we'll need to support this way soon: specific sets of data vis colors in high contrast mode.

The suggested change enables the current theming functionality to support an optional overrides key on the EuiThemeShape and updates the getComputed theming function to include the required overrides (the implementation so far considers HCM (high contrast mode) overrides. The approach follows what's already available for defining LIGHT and DARK variants per color mode. The overrides key is part of the EuiThemeShape (input theme) only, it will not be included on the EuiThemeComputed (output theme).

usage

Note

The code for building and updating themes is old, not that easy to follow and overall rather cumbersome. This PR only adds onto the code for now. In the future (likely once we have fully migrated off Amsterdam and finished Borealis) we might want to consider refactoring those functions in general to improve functionality and maintainability.

Changes

updates getComputed to support highContrastMode via overrides.HCM on the theme object
updates inherited color tokens to use computed values (where possible) to ensure tokens are updated accordingly by overrides they inherit from (the alternative would be to have to override each token manually, which a) is still possible but mainly b) seems less favorable in terms of devX)
removes the @deprecated mark on ink and ghost tokens - while those are not expected in the theme, there is a use case for having true black and white tokens (currently at least for HCM)
adds HCM override for ink and ghost tokens (resets them to primitive black and white to ensure highest possible contrasts)
smaller cleanups

QA

review the testing example for EuiButton with fill={true} here - the custom overrides (code) should apply (and be inherited by the button tokens)(code)

Screen.Recording.2025-04-07.at.17.51.07.mov

(optional) verify manually locally that overrides work by adding overrides to the theme

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)

tkajtoch

The changes look and work good. I want to take a quick look on how the computed works in more detail and what performance implications it has before I approve this. This code is executed early and has direct impact on initial app render

tkajtoch

I checked the computed performance and the difference is insignificant.

LGTM

- ensures inherited colors are updated if the base is changed

- while ink and ghost are not defined for the theme, there is a use case for pure black and white tokens, expecially for HCM

- updates due to ink token change in HCM

- udpate after rebase

- ensures that provider level overrides apply ontop of theme level overrides

mgadewoll · 2025-04-15T16:01:52Z

@tkajtoch I rebased with main and additionally added another update (commit) that ensures the following override order (first item = lowest level; each following item overrides the previous):

theme level
provider level
theme HCM override (applies in HCM only)
provider level HCM override (applies in HCM only)

ℹ️ HCM specific overrides in high_contrast_overrides (file) are currently internal, fixed overrides that can't be manually overridden via the provider.

elasticmachine · 2025-04-15T16:13:37Z

💚 Build Succeeded

cc @mgadewoll

kibanamachine · 2025-04-15T16:29:07Z

Preview staging links for this PR:

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

elasticmachine · 2025-04-15T16:56:27Z

💚 Build Succeeded

Buildkite Build
Commit: 95fe71d

History

💚 Build #3813 succeeded 988ed53
💔 Build #3812 failed f0b75e1
💚 Build #3806 succeeded 51648a7

cc @mgadewoll

tkajtoch · 2025-04-17T10:03:54Z

packages/eui-theme-common/src/utils.ts

+        const hcmBaseValue = _hcmBaseOverrides
+          ? _hcmBaseOverrides[key] instanceof Computed ||
+            isComputedLike<T>(_hcmBaseOverrides[key])
+            ? _hcmBaseOverrides[key].getValue(
+                base.root,
+                _hcmBaseOverrides.root,
+                output,
+                colorMode
+              )
+            : _hcmBaseOverrides[key]
+          : undefined;
+        const hcmOverValue = _hcmOverOverrides
+          ? _hcmOverOverrides[key] instanceof Computed ||
+            isComputedLike<T>(_hcmOverOverrides[key])
+            ? _hcmOverOverrides[key].getValue(
                base.root,
-                _hcmOverrides.root,
+                _hcmOverOverrides.root,
                output,
                colorMode
              )
-            : _hcmOverrides[key]
+            : _hcmOverOverrides[key]
          : undefined;

+        const hcmCombinedOverValue = hcmOverValue ?? hcmBaseValue;


This feels not easily readable but upon further inspection it's very similar to the rest of the file, so I'm good with it for now.

We probably should eventually circle back to this and the whole theming logic.

Yes, totally agree. I mentioned it in the description that for now we're just updating the existing logic but long term we should really refactor this. But I did not want to open this can of worms just now 😅

`101.3.0` ⏩ `101.4.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 This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`101.3.0` ⏩ `101.4.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 This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([elastic#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([elastic#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([elastic#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([elastic#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([elastic#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([elastic#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([elastic#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([elastic#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([elastic#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([elastic#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([elastic#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([elastic#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([elastic#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([elastic#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit d2d2765) # Conflicts: # x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/index.test.tsx # x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/uncommon_process_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_dns_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_http_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_countries_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_n_flow_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/tls_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/users_table/__snapshots__/index.test.tsx.snap

`101.3.0` ⏩ `101.4.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](#218778) 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 This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([#8558](elastic/eui#8558))

`101.3.0` ⏩ `101.4.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 This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([elastic#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([elastic#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([elastic#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([elastic#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([elastic#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([elastic#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([elastic#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([elastic#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([elastic#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([elastic#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([elastic#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([elastic#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([elastic#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([elastic#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll self-assigned this Apr 7, 2025

mgadewoll force-pushed the theme/279-support-theme-level-overrides branch 2 times, most recently from f0b75e1 to 988ed53 Compare April 8, 2025 09:12

mgadewoll marked this pull request as ready for review April 8, 2025 13:31

mgadewoll requested a review from a team as a code owner April 8, 2025 13:31

mgadewoll requested a review from tkajtoch April 8, 2025 13:31

tkajtoch reviewed Apr 14, 2025

View reviewed changes

tkajtoch approved these changes Apr 15, 2025

View reviewed changes

mgadewoll added 9 commits April 15, 2025 13:56

feat(theme): support internal theme overrides

3b53fb7

refactor(colors): use computed color token values

3317d26

- ensures inherited colors are updated if the base is changed

refactor: move theme overrides to separate file

d6d0f1c

style: remove deprecated markers

9ac920d

- while ink and ghost are not defined for the theme, there is a use case for pure black and white tokens, expecially for HCM

chore: cleanup

838d3a0

test(vrt): update reference images

186bc6a

- updates due to ink token change in HCM

chore: add changelogs

917b31d

test(vrt): update reference images

b989402

- udpate after rebase

refactor: update theme override priority

95fe71d

- ensures that provider level overrides apply ontop of theme level overrides

mgadewoll force-pushed the theme/279-support-theme-level-overrides branch from 988ed53 to 95fe71d Compare April 15, 2025 15:58

tkajtoch reviewed Apr 17, 2025

View reviewed changes

mgadewoll merged commit 8e67c21 into elastic:main Apr 17, 2025
6 checks passed

This was referenced Apr 22, 2025

Upgrade EUI to v101.4.0 elastic/kibana#218778

Merged

[8.19] Upgrade EUI to v101.4.0 elastic/kibana#218823

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Theme] Support theme level overrides#8558

[Theme] Support theme level overrides#8558
mgadewoll merged 9 commits intoelastic:mainfrom
mgadewoll:theme/279-support-theme-level-overrides

mgadewoll commented Apr 7, 2025 •

edited

Loading

Uh oh!

tkajtoch left a comment

Uh oh!

tkajtoch left a comment

Uh oh!

mgadewoll commented Apr 15, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Apr 15, 2025

Uh oh!

kibanamachine commented Apr 15, 2025

Uh oh!

elasticmachine commented Apr 15, 2025

Uh oh!

tkajtoch Apr 17, 2025

Uh oh!

mgadewoll Apr 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

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

Uh oh!

Summary

Changes

QA

General checklist

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

elasticmachine commented Apr 15, 2025

💚 Build Succeeded

Uh oh!

kibanamachine commented Apr 15, 2025

Uh oh!

elasticmachine commented Apr 15, 2025

💚 Build Succeeded

History

Uh oh!

tkajtoch Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Apr 7, 2025 •

edited

Loading

mgadewoll commented Apr 15, 2025 •

edited

Loading