Skip to content

Conversation

@cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Dec 13, 2024

Summary

Note

This PR merges into a feature branch.

Me: I'll just scan through the docs and push up any minor bugfixes directly to the feature branch, I'm sure there's not that many
Me, 20 commits later: ...okay yeah I'm just going to go ahead and open a new PR 🥹

This is the last high contrast PR, I swear(??) - about half component updates and half tweaks/cleanups to docs/themes. Follow along by commit if you dare 🫠

QA

  • EuiPanel with color="transparent" hasBorder={false} should no longer render high contrast borders (the same way that EuiButtonEmptys do not render borders)

  • EuiSplitPanel now renders a dividing border between each inner panel, which attempts to inherit its color from the parent outer panel. I'm not 100% sure the amount of code/context required was worth it, but ah well, it looks real nice 😅

  • EuiEmptyPrompt's border behavior has been updated in light of the transparent panel changes

  • EuiFlyout had some extra high contrast borders added

  • EuiErrorBoundary was missed during my original component pass and now has high contrast styles

  • EuiImage's hover shadows was missed and is now fixed in high contrast mode

  • EuiCodeBlock's border/margin rendering has been fixed within EuiText, and also in Windows high contrast with scrolling content

  • Docs changes: I recommend following along by commit. The general theme was fixing/reducing duplicated borders where it made sense to, but I also made some larger copy updates to the Colors, Border, and Shadows theming pages as they related to high contrast mode.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • [ ] Checked in Chrome, Safari, Edge, and Firefox
    • [ ] Checked for accessibility including keyboard-only and screenreader modes
    • [ ] Checked in mobile
  • 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) - open to feedback if I yolo'd too hard on this one for the last commit 😅
  • Designer checklist - N/A

- I *think* this is worth the extra overhead (context, CSS, etc.) for visibility/contrast benefits, but I'm open to being yelled at about it not being worth it 😅

+ update VRT
…st used for padding

- similar to how we do not render borders for `EuiButtonEmpty`

- otherwise we have to deal with a lot of odd looking borders etc in our docs
- to account for new `transparent` panel style updates

+ update VRT
- footer is the biggest one

- banner is sorta terrible when combined with other components that also render borders in high contrast mode... but fuck it, since the banner should have important info, let's go all in on double borders

+ update other VRT screenshots while here
- looks a bit silly on hover otherwise
- this fixes the issue for EuiMarkdownFormat as well (which dogfoods EuiText)
- while improving dividing border rendering
… playgrounds

- honestly not sure what that CSS is even doing or why it's needed. tables look fine without it
- replace EuiPanel by applying props directly to `<Compiler>` instead

- `playgroundPanelProps` usage should be replaced with `playgroundCssStyles`
- mostly duplicate panels+code blocks
@cee-chen cee-chen force-pushed the high-contrast-mode-11 branch from 89e726f to 4423c20 Compare December 13, 2024 07:22
@cee-chen cee-chen mentioned this pull request Dec 13, 2024
10 tasks
- no usages of second argument in Kibana so I'm just gonna sneak this in as a non-breaking change 🤞

- improve argument documentation and add a note about high contrast behavior

- no EUI+ page to update ¯\_(ツ)_/¯
@cee-chen cee-chen force-pushed the high-contrast-mode-11 branch from 4423c20 to 9f031ff Compare December 13, 2024 07:48
@cee-chen cee-chen marked this pull request as ready for review December 13, 2024 07:48
@cee-chen cee-chen requested a review from a team as a code owner December 13, 2024 07:48
@weronikaolejniczak
Copy link
Contributor

the name 🤣

this custom background color just ain't doin it for me
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ Thanks for the few additional fixes and improvements!
And (maybe even more) thanks for the highly entertaining commit messages and PR name! 😆 ❤️

@cee-chen cee-chen merged commit 34e5db8 into elastic:high-contrast-mode Dec 13, 2024
4 checks passed
@cee-chen cee-chen deleted the high-contrast-mode-11 branch December 13, 2024 12:34
mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 14, 2025
mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025
mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025
mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 20, 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.
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.

5 participants