[HCM] Add high contrast mode overrides for data visualization and severity color tokens #8800

mgadewoll · 2025-06-16T13:37:44Z

Summary

This PR adds high contrast mode color values for data visualization and severity color tokens.

Changes

separates colors.vis and colors.severity by color mode (enables overriding token values based on color mode)
adds high contrast mode token values for colors.vis (excludes AsText tokens as they are updated here separately) and colors.severity

Why are we making this change?

The data visualization colors currently only meet expected color contrast levels for DARK color mode. Implementing high contrast mode specific color overrides for colors.vis and colors.severity colors provides higher contrast levels for LIGHT color mode.

Note

The contrast levels are only ensured for direct usages of those tokens. The usages within color palettes may still result in lower color contrast levels as it's expected to have lighter shades when generating multi-step palettes.

Screenshots

high contrast mode	LIGHT	DARK
false
true / 'preferred'
'forced'

Impact to users

🟢 There are no changes that require user updates.

QA

checkout this PR and open the story: EuiColorPaletteDisplay > Kitchen Sink (remove the tags: ['vrt-only'] in the story to view it)
- verify expected colors in Light/Dark modes and non-HCM/HCM (colors should only update for LIGHT-HCM)
ensure there are no regressions for the legacy Amsterdam 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)

gvnmagni

LGTM 🚀

- additionally add comments to use hooks instead of functions as those ensure theme colors are already updated without manual update

- due to updates story and colors

- due to previous update to ink and ghost token values in high contrast mode

mgadewoll · 2025-07-07T10:19:19Z

packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png

ℹ️ There are additional VRT images updated here. The changes are due to an earlier change that ensures HCM token overrides are in place. The changes are due to the ink and ghost colors being updated in HCM.

packages/eui-theme-common/changelogs/upcoming/8800.md

weronikaolejniczak

The code looks 👌🏻 It's not immediately visible from the VRT images what changed expectedly, and what changes unexpectedly. We assert light mode and HCM but not dark mode or Amsterdam. So to be sure, I ran some visual regression myself:

	Borealis	Amsterdam
Light
Light (HCM)
Dark
Dark (HCM)

💭 We are changing light mode in HCM but for some reason there's a difference for dark mode in HCM as well. Is this because for a dark background in light mode, we're using dark mode tokens, and for a light background in dark mode, we're using light mode tokens? Is this difference expected?

Comparison images

Light

	Borealis	Amsterdam
Before
After

Light (HCM)

	Borealis	Amsterdam
Before
After

Dark

	Borealis	Amsterdam
Before
After

Dark (HCM)

	Borealis	Amsterdam
Before
After

mgadewoll · 2025-07-07T11:31:22Z

We are changing light mode in HCM but for some reason there's a difference for dark mode in HCM as well. Is this because for a dark background in light mode, we're using dark mode tokens, and for a light background in dark mode, we're using light mode tokens? Is this difference expected?

@weronikaolejniczak I'm not entirely sure I understand the question 😅 Let me know if I answered your question.
The story was updated to include a nested EuiProvider with inverted colorMode (code) which:

a) allows us to test light and dark mode together instead of separately (we could duplicate the story and run it in dark mode only as well; I tried to keep it condensed in a single story for convenience)
b) in dark mode this one inverted section is rendered in light mode which will trigger HCM mode updates for the color tokens because those color tokens have the HCM overrides applied

weronikaolejniczak

@mgadewoll I typed that question absentmindedly, sorry for confusion 😅 I think the inverted colorMode is a bit weird in that story but I'm fine with leaving it if it makes testing easier. What I'd prefer is separate dark mode VRT images but I understand the overhead that it'd cause so even if we wanted to introduce it, it's not something for this PR.

Thanks for applying the suggestions! 💚

…mode

mgadewoll · 2025-07-07T15:19:30Z

@mgadewoll I typed that question absentmindedly, sorry for confusion 😅 I think the inverted colorMode is a bit weird in that story but I'm fine with leaving it if it makes testing easier. What I'd prefer is separate dark mode VRT images but I understand the overhead that it'd cause so even if we wanted to introduce it, it's not something for this PR.

@weronikaolejniczak But it's good feedback - if it's not clear enough what the test does we can/should update. 👍
Updated here.

...ages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx

mgadewoll · 2025-07-07T16:40:19Z

@weronikaolejniczak Thanks for the review and taking the time to run additional tests 🚀

elasticmachine · 2025-07-07T16:42:40Z

💚 Build Succeeded

History

💔 Build #688 failed 7eaca55
💚 Build #686 succeeded 442f49d
💚 Build #632 succeeded 5182cae
💚 Build #539 succeeded bfb7835
💚 Build #538 succeeded 7cb78e9
💚 Build #536 succeeded 422d21b

cc @mgadewoll

elasticmachine · 2025-07-07T16:59:51Z

💚 Build Succeeded

Buildkite Build
Commit: 8f5615a

History

💚 Build #4314 succeeded 442f49d
💚 Build #4274 succeeded 5182cae
💚 Build #4201 succeeded bfb7835

cc @mgadewoll

`105.0.0` ⏩ `106.0.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 ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| | ![Screenshot 2025-06-24 at 10 11 54](https://github.com/user-attachments/assets/7773bc67-8a8a-4099-93b7-5ac3d3a84515) | ![Screenshot 2025-06-24 at 10 11 46](https://github.com/user-attachments/assets/8ceb9cfc-b3dc-4f35-b2ba-3b879cf14ba3) | | ![Screenshot 2025-06-24 at 10 12 47](https://github.com/user-attachments/assets/95e7a20c-af0e-4015-a2cd-a63662d9f8b8) | ![Screenshot 2025-06-24 at 10 12 54](https://github.com/user-attachments/assets/0038c48b-853f-401e-a753-663c18806c4a) | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| | ![Kapture 2025-06-23 at 15 35 36](https://github.com/user-attachments/assets/a8133fc8-950d-4544-be30-2f8406054690) | ![Kapture 2025-06-23 at 15 40 44](https://github.com/user-attachments/assets/92b323fa-c237-4089-98db-1eb893fe4bfe) | | ![Kapture 2025-06-23 at 14 54 52](https://github.com/user-attachments/assets/2ff4c719-13f9-43f3-b325-45d15994c379) | ![Kapture 2025-06-23 at 14 53 26](https://github.com/user-attachments/assets/39a414b9-615b-48b1-b7f3-d6f81979b214) | | ![Kapture 2025-06-23 at 14 58 11](https://github.com/user-attachments/assets/66885b1d-e71a-46b7-95dc-4864779d7528) | ![Kapture 2025-06-23 at 15 31 53](https://github.com/user-attachments/assets/6475d86d-0da6-4e49-8f94-9281ba764554) | | ![Kapture 2025-06-23 at 15 33 09](https://github.com/user-attachments/assets/43aa099d-348c-4e48-a276-9f76379d7beb) | ![Kapture 2025-06-23 at 15 32 41](https://github.com/user-attachments/assets/bd20d6f0-7614-44b9-9a3d-4187b870e3cf) | | ![Kapture 2025-06-23 at 15 49 14](https://github.com/user-attachments/assets/7cdbc44d-7d1c-4978-9473-c886b64994d5) | ![Kapture 2025-06-23 at 15 48 47](https://github.com/user-attachments/assets/a074b827-e786-4696-ac54-21287ef053fd) | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([#8800](elastic/eui#8800)) - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([#8800](elastic/eui#8800))

`105.0.0` ⏩ `106.0.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 ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](elastic#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](elastic#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| | ![Screenshot 2025-06-24 at 10 11 54](https://github.com/user-attachments/assets/7773bc67-8a8a-4099-93b7-5ac3d3a84515) | ![Screenshot 2025-06-24 at 10 11 46](https://github.com/user-attachments/assets/8ceb9cfc-b3dc-4f35-b2ba-3b879cf14ba3) | | ![Screenshot 2025-06-24 at 10 12 47](https://github.com/user-attachments/assets/95e7a20c-af0e-4015-a2cd-a63662d9f8b8) | ![Screenshot 2025-06-24 at 10 12 54](https://github.com/user-attachments/assets/0038c48b-853f-401e-a753-663c18806c4a) | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| | ![Kapture 2025-06-23 at 15 35 36](https://github.com/user-attachments/assets/a8133fc8-950d-4544-be30-2f8406054690) | ![Kapture 2025-06-23 at 15 40 44](https://github.com/user-attachments/assets/92b323fa-c237-4089-98db-1eb893fe4bfe) | | ![Kapture 2025-06-23 at 14 54 52](https://github.com/user-attachments/assets/2ff4c719-13f9-43f3-b325-45d15994c379) | ![Kapture 2025-06-23 at 14 53 26](https://github.com/user-attachments/assets/39a414b9-615b-48b1-b7f3-d6f81979b214) | | ![Kapture 2025-06-23 at 14 58 11](https://github.com/user-attachments/assets/66885b1d-e71a-46b7-95dc-4864779d7528) | ![Kapture 2025-06-23 at 15 31 53](https://github.com/user-attachments/assets/6475d86d-0da6-4e49-8f94-9281ba764554) | | ![Kapture 2025-06-23 at 15 33 09](https://github.com/user-attachments/assets/43aa099d-348c-4e48-a276-9f76379d7beb) | ![Kapture 2025-06-23 at 15 32 41](https://github.com/user-attachments/assets/bd20d6f0-7614-44b9-9a3d-4187b870e3cf) | | ![Kapture 2025-06-23 at 15 49 14](https://github.com/user-attachments/assets/7cdbc44d-7d1c-4978-9473-c886b64994d5) | ![Kapture 2025-06-23 at 15 48 47](https://github.com/user-attachments/assets/a074b827-e786-4696-ac54-21287ef053fd) | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([elastic#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([elastic#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([elastic#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([elastic#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([elastic#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([elastic#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([elastic#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([elastic#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([elastic#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([elastic#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([elastic#8800](elastic/eui#8800))

JasonStoltz · 2025-09-08T20:01:40Z

[Adding for extra context in EUI release update]

To view view these changes:

Go to EUI docs: https://eui.elastic.co/docs/getting-started/theming/tokens/colors/index.html#data-visualization-colors
Enable "Light Mode" and "High Contrast Mode" - You'll see the datavis colors changing.

mgadewoll force-pushed the hcm/8632-add-hcm-data-vis-colors branch from 422d21b to 7cb78e9 Compare June 16, 2025 14:01

mgadewoll self-assigned this Jun 16, 2025

mgadewoll added the visual refresh label Jun 16, 2025

mgadewoll force-pushed the hcm/8632-add-hcm-data-vis-colors branch from 7cb78e9 to bfb7835 Compare June 16, 2025 14:19

mgadewoll marked this pull request as ready for review June 16, 2025 14:24

mgadewoll requested a review from a team as a code owner June 16, 2025 14:24

mgadewoll changed the title ~~[HCM] Add high contrast mode ocerrides for data visualization and severity colors~~ [HCM] Add high contrast mode overrides for data visualization and severity color tokens Jun 16, 2025

mgadewoll requested a review from gvnmagni June 18, 2025 13:55

gvnmagni reviewed Jun 19, 2025

View reviewed changes

gvnmagni approved these changes Jun 19, 2025

View reviewed changes

mgadewoll added 9 commits June 26, 2025 14:44

refactor: enable color mode separated dataVis and severity colors

0904566

feat: enable hcm overrides for data vis and severity colors

78ca341

docs(storybook): update palettes examples

70b3c86

- additionally add comments to use hooks instead of functions as those ensure theme colors are already updated without manual update

test: add unit test

167ae69

chore: add deprecation marker

390bf0b

docs: update docs

5715ffc

test(vrt): update deferenace images

50a4109

- due to updates story and colors

test(vrt): update deferenace images

ae817a5

- due to previous update to ink and ghost token values in high contrast mode

chore: add changelogs

0242dbe

tkajtoch self-requested a review June 26, 2025 12:58

refactor: update hcm tokens after rebase

5182cae

mgadewoll force-pushed the hcm/8632-add-hcm-data-vis-colors branch from bfb7835 to 5182cae Compare June 26, 2025 13:04

weronikaolejniczak self-requested a review July 7, 2025 09:41

mgadewoll commented Jul 7, 2025

View reviewed changes

weronikaolejniczak reviewed Jul 7, 2025

View reviewed changes

packages/eui-theme-common/changelogs/upcoming/8800.md Outdated Show resolved Hide resolved

chore: update changelog

442f49d

weronikaolejniczak reviewed Jul 7, 2025

View reviewed changes

weronikaolejniczak approved these changes Jul 7, 2025

View reviewed changes

docs(storybook): add separate stories for darkmode and high contrast …

416da52

…mode

test(vrt): add/update reference images

7eaca55

weronikaolejniczak reviewed Jul 7, 2025

View reviewed changes

...ages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx Show resolved Hide resolved

weronikaolejniczak reviewed Jul 7, 2025

View reviewed changes

...ages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx Show resolved Hide resolved

chore: cleanup this no-verify

8f5615a

mgadewoll enabled auto-merge (squash) July 7, 2025 16:40

mgadewoll merged commit efc463f into elastic:main Jul 7, 2025
5 checks passed

mgadewoll mentioned this pull request Jul 15, 2025

Upgrade EUI to v106.0.0 elastic/kibana#227945

Merged

JasonStoltz mentioned this pull request Sep 15, 2025

Update pull_request_template.md #9018

Closed

19 tasks

[HCM] Add high contrast mode overrides for data visualization and severity color tokens #8800

[HCM] Add high contrast mode overrides for data visualization and severity color tokens #8800

Uh oh!

Conversation

mgadewoll commented Jun 16, 2025 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

gvnmagni left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Light

Light (HCM)

Dark

Dark (HCM)

Uh oh!

mgadewoll commented Jul 7, 2025

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Jul 7, 2025

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Jul 7, 2025

Uh oh!

elasticmachine commented Jul 7, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 7, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

JasonStoltz commented Sep 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented Jun 16, 2025 •

edited by weronikaolejniczak

Loading