[HCM] Add high contrast mode support by mgadewoll · Pull Request #8444 · elastic/eui

mgadewoll · 2025-03-14T16:19:07Z

Summary

closes https://github.com/elastic/eui-private/issues/146
closes #8133
See also #7509 (comment)

Important

This PR is an extension to this previous PR which introduced the high contrast mode support and needed component style updates. It was still developed on the base of the previous "Amsterdam" theme.

See below a list of individual included PRs for discussions, changes, and reviews:

This current PR updates the previously done changes to support high contrast mode to the latest state of main and applies a few additional adjustments to ensure high contrast mode works as expected for the new "Borealis" theme.

Additional Changes

updated component styles to use component tokens were needed to support 2 themes
updates component styles where needed to ensure expected high contrast output within Borealis theme
fixes a visual scaling issue for loading skeleton components (left: fixed, right: prod)

Screen.Recording.2025-03-19.at.10.57.17.mov

updated all VRT reference images with high contrast & Borealis combined
adds a high contrast mode toggle to the EUI+ docs (design/placement is temporary and can be adjusted as follow-up if needed)

Screenshots

Some example screenshots ...

Left images show the initial high contrast mode implementation on basis of Amsterdam
Right images show the current high contrast mode implementation on basis of Borealis

EuiPanel

prefers-contrast	forced-colors

EuiButton

prefers-contrast	forced-colors

Inputs

prefers-contrast	forced-colors

Forms & color picker

prefers-contrast	forced-colors

EuiSuperDatePicker

prefers-contrast	forced-colors

QA

Note

All base changes were QAed as part of the separate PRs mentioned in this barrel PR.

ℹ️ I checked all components again 1:1 with the previous high contrast mode changes here against this PRs state.

How to test

You can test high contrast mode e.g. in Chrome browser by opening the devTools and then:

prefers-contrast setting (applied in macOS): Rendering > Emulate CSS media feature prefers-contrast
forced-colors setting (applied in Windows high contrast themes): Rendering > Emulate CSS media feature forced-colors

Make sure to test different scenarios of light/dark colorMode with prefers-contrast and forced-colors

verify the high contrast mode toggle functionality works in Storybook, EUI docs and EUI+ docs
(optional) smoke test some components in high contrast mode (e.g. most used ones like buttons, forms, panels etc)

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
- 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 - N/A - no designs for high contrast mode (currently)

cee-chen · 2025-03-14T19:09:32Z

…tation (elastic#8142)

- at this point it's creating more false positives with nested template literals than it is being helpful

…ooltips (elastic#8174)

…#8199)

…color mode (elastic#8200)

…ars (elastic#8210)

…bs (elastic#8218)

…#8219)

…omBar, EuiToken (elastic#8225)

packages/docusaurus-theme/src/components/guideline/guideline.tsx

tkajtoch

The changes look and work great! Thank you for the countless rebases and fixes you did 🚀

- update changelog to indicate availability

kibanamachine · 2025-03-21T14:38:59Z

Preview staging links for this PR:

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

elasticmachine · 2025-03-21T14:39:53Z

💚 Build Succeeded

Buildkite Build
Commit: 515de4c

History

💚 Build #3676 succeeded 1471ac2
💚 Build #3672 succeeded 9855680
💚 Build #3664 succeeded 9439736
💚 Build #3653 succeeded 5f8b10f
💚 Build #3651 succeeded d6f19be

cc @mgadewoll

mgadewoll · 2025-03-21T16:54:08Z

ℹ️ I ran the changes against Kibana. There will be some need to adjust styles on Kibana side for their custom styles and specific composition but generally everything seems to work as expected.

Initially high contrast mode will be disabled until the required UI is implemented on Kibana side.

cee-chen · 2025-03-21T23:33:40Z

`100.0.0` ⏩ `101.0.1` [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) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`100.0.0` ⏩ `101.0.1` [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) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 2cd777d) # Conflicts: # src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.test.tsx

`100.0.0` ⏩ `101.0.1` [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) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

>[!IMPORtANT] This PR is the direct, manual backport to `8.x` for [this PR](#215698) that's being merged to `main`. The reason it's handled manually is that `8.x` receives a custom EUI release that still has the "Amsterdam" theme as default theme enabled. --- `100.0.0` ⏩ `101.1.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) ## Package updates ### `@elastic/eui` [`v101.1.0`](https://github.com/elastic/eui/releases/v101.1.0) - Updates `EuiTableRow` styles to check support for `:has(+)` selector ([#8498](elastic/eui#8498)) ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets the root `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). Cloud-UI can enable this whenever it's tested and supported from their end. ## QA Adding high contrast mode in disabled state should result in no visual changes to the UI.

mgadewoll self-assigned this Mar 14, 2025

mgadewoll force-pushed the feat/high-contrast-mode branch from d6f19be to 5f8b10f Compare March 14, 2025 18:15

This was referenced Mar 14, 2025

(Accessibility) breadcrumb contrast too low elastic/kibana#214597

Closed

High contrast mode support #8232

Closed

mgadewoll marked this pull request as ready for review March 14, 2025 18:50

mgadewoll requested a review from a team as a code owner March 14, 2025 18:50

tkajtoch self-requested a review March 18, 2025 13:45

mgadewoll force-pushed the feat/high-contrast-mode branch 2 times, most recently from 764d23a to 9439736 Compare March 18, 2025 19:45

cee-chen and others added 20 commits March 20, 2025 12:21

[EuiProvider][EuiThemeProvider] highContrastMode set up and documen…

1f77bf7

…tation (elastic#8142)

Remove no-extra-semicolons stylelint rule

2ade74c

- at this point it's creating more false positives with nested template literals than it is being helpful

[High Contrast Mode] Panels, modals, flyouts, toasts, popovers, and t…

c5696ec

…ooltips (elastic#8174)

[High Contrast Mode] Form controls (elastic#8193)

3d45f5b

[High Contrast Mode] Ranges, color pickers, and date pickers (elastic…

a7bfe92

…#8199)

[High Contrast Mode] Allow forced high contrast themes to also force …

6222262

…color mode (elastic#8200)

[High contrast mode] DRY utilities (elastic#8205)

40c475e

[High Contrast Mode] Buttons, datepicker redux, code blocks, and avat…

e9f4340

…ars (elastic#8210)

[High Contrast Mode] Horizontal rules, side navs, tabs, and breadcrum…

f1c9517

…bs (elastic#8218)

[High Contrast Mode] Loading components and beacons (elastic#8215)

191a646

[High Contrast Mode] Markdown, highlighting, misc text fixes (elastic…

439fcc5

…#8219)

[High Contrast Mode] EuiKeyPadMenu, EuiImage, EuiOverlayMask, EuiBott…

3bbdf93

…omBar, EuiToken (elastic#8225)

[High Contrast Mode] Steps, timelines, and comment lists (elastic#8223)

c946559

[High Contrast Mode] Tables and data grid (elastic#8226)

dff3f77

Update changelog file

2a94f49

[PR feedback] Changelog typo

6c8cf71

[High Contrast Mode] new_final_final(2).psd (elastic#8234)

c248569

chore: rebase cleanup

ad8f0b1

chore: update token usages of renamed tokens in EUI

eafb00a

refactor: additional high contrast adjustments

4c9994d

mgadewoll added 7 commits March 20, 2025 12:23

docs(eui+): add high contrast mode toggle support

e895d15

chore: cleanup incorrectly added styles

261c92d

chore: update changelog

ccdf738

refactor: align updated panel styles with high contrast mode

abb3236

test(vrt): update reference images

753f3b0

test(vrt) update loading chart reference images

7d82e15

chore: rebase cleanup

9855680

mgadewoll force-pushed the feat/high-contrast-mode branch from 9439736 to 9855680 Compare March 20, 2025 11:54

tkajtoch reviewed Mar 20, 2025

View reviewed changes

packages/docusaurus-theme/src/components/guideline/guideline.tsx Outdated Show resolved Hide resolved

tkajtoch approved these changes Mar 20, 2025

View reviewed changes

mgadewoll added 2 commits March 20, 2025 16:48

chore: export high contrast mode styling utils

f7787e9

- update changelog to indicate availability

docs: update highContrastModeStyles imports

1471ac2

mgadewoll mentioned this pull request Mar 21, 2025

feat(website): no global docusaurus styles #8482

Merged

refactor: ensure global search uses default border token in HCM

515de4c

mgadewoll merged commit 791ead0 into elastic:main Mar 21, 2025
5 checks passed

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Mar 24, 2025

chore: add missing changelogs for theme packages after elastic#8444

10c1254

JasonStoltz mentioned this pull request Apr 8, 2025

[BETA] High Contrast Mode #8567

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HCM] Add high contrast mode support#8444

[HCM] Add high contrast mode support#8444
mgadewoll merged 33 commits intoelastic:mainfrom
mgadewoll:feat/high-contrast-mode

mgadewoll commented Mar 14, 2025 •

edited

Loading

cee-chen commented Mar 14, 2025

Uh oh!

tkajtoch left a comment

kibanamachine commented Mar 21, 2025

elasticmachine commented Mar 21, 2025

mgadewoll commented Mar 21, 2025

Uh oh!

cee-chen commented Mar 21, 2025

Labels

5 participants

Conversation

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

Uh oh!

Summary

Additional Changes

Screenshots

QA

How to test

General checklist

cee-chen commented Mar 14, 2025

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 21, 2025

elasticmachine commented Mar 21, 2025

💚 Build Succeeded

History

mgadewoll commented Mar 21, 2025

Uh oh!

cee-chen commented Mar 21, 2025

Labels

5 participants

mgadewoll commented Mar 14, 2025 •

edited

Loading