Skip to content

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Mar 14, 2025

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)

Screenshot 2025-03-14 at 19 43 56

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
Screenshot 2025-03-13 at 20 49 19 Screenshot 2025-03-13 at 20 49 13
Screenshot 2025-03-13 at 20 49 26 Screenshot 2025-03-13 at 20 49 07

EuiButton

prefers-contrast forced-colors
Screenshot 2025-03-13 at 20 06 12 Screenshot 2025-03-13 at 20 05 41
Screenshot 2025-03-13 at 20 06 05 Screenshot 2025-03-13 at 20 05 57

Inputs

prefers-contrast forced-colors
Screenshot 2025-03-14 at 16 52 20 Screenshot 2025-03-14 at 16 52 59
Screenshot 2025-03-14 at 16 52 28 Screenshot 2025-03-14 at 16 52 48

Forms & color picker

prefers-contrast forced-colors
Screenshot 2025-03-13 at 20 01 35 Screenshot 2025-03-13 at 20 03 05
Screenshot 2025-03-13 at 20 01 41 Screenshot 2025-03-13 at 20 03 29

EuiSuperDatePicker

prefers-contrast forced-colors
Screenshot 2025-03-14 at 16 56 37 Screenshot 2025-03-14 at 16 56 07
Screenshot 2025-03-14 at 16 56 28 Screenshot 2025-03-14 at 16 56 19

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

Screenshot 2025-03-14 at 16 37 43

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
  • Code quality checklist
  • 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)

@mgadewoll mgadewoll self-assigned this Mar 14, 2025
@mgadewoll mgadewoll force-pushed the feat/high-contrast-mode branch from d6f19be to 5f8b10f Compare March 14, 2025 18:15
@mgadewoll mgadewoll marked this pull request as ready for review March 14, 2025 18:50
@mgadewoll mgadewoll requested a review from a team as a code owner March 14, 2025 18:50
@cee-chen
Copy link
Contributor

Oh! It's happening. It's really happening

@tkajtoch tkajtoch self-requested a review March 18, 2025 13:45
@mgadewoll 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
- at this point it's creating more false positives with nested template literals than it is being helpful
@mgadewoll mgadewoll force-pushed the feat/high-contrast-mode branch from 9439736 to 9855680 Compare March 20, 2025 11:54
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@mgadewoll
Copy link
Contributor Author

ℹ️ 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.

@mgadewoll mgadewoll merged commit 791ead0 into elastic:main Mar 21, 2025
5 checks passed
@cee-chen
Copy link
Contributor

Animated gif of Brooklyn 99 office members cheering and raising their hands

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Mar 24, 2025
mgadewoll added a commit to elastic/kibana that referenced this pull request Mar 28, 2025
`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>
mgadewoll added a commit to mgadewoll/kibana that referenced this pull request Mar 28, 2025
`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
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
`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>
mgadewoll added a commit to elastic/kibana that referenced this pull request Apr 3, 2025
>[!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.
@JasonStoltz JasonStoltz mentioned this pull request Apr 8, 2025
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Epic] Add High contrast mode

5 participants