[Visual Refresh][EuiSelectableTemplateSitewide] Add `colorModes` prop #8806

mgadewoll · 2025-06-19T08:14:55Z

Summary

Important

This PR merges into a feature branch.
This PR should be rebased after the second update PR is merged.

Relates to https://github.com/elastic/eui-private/issues/324
Closes #8802

Changes

adds theme prop on EuiSelectableTemplateSitewide
- theme supports the provider colorMode values light, dark, inverse as well as more generic default and global (default will apply the nearest context's colorMode while global apply the outermost (global) context's colorMode)
removes custom style overrides in EuiHeader for EuiSelectableTemplateSitewide search
added a section about theming in the docs

Why are we making this change?

Note

TL;DR: Aligning EuiSelectableTemplateSitewide styles with new Visual Refresh specs.

The Visual Refresh updates for inputs triggered also a change for how the EuiSelectableTemplateSitewide search input should be displayed inside EuiHeader. Previously the input would be displayed as faux-dark theme when non-focused, but displayed as light theme when focused.

previous	expected

ℹ️ EuiHeader currently implements a visual-only dark mode (docs) when it has is theme="dark". It does not use a EuiThemeProvider to apply color context. Meaning it's theme="dark" looks like dark mode but is actually still light mode.

With the Visual Refresh this changes towards using the expected visual colorMode based on context: The EuiHeader is (visually only) in dark mode therefore the search input should be in dark mode too for any state, using the form element specific scoped styles instead of usage specific overrides in EuiHeader. The search popover however should follow the overall global colorMode (as it did previously).

ℹ️ Eventually this should mean that EuiHeader uses a context provider to apply proper color modes, but this requires more investigation as it has bigger implications to consider based on Kibana usage (issue)

Screenshots #

Toggle screenshots

LIGHT mode

view	before	after
EUI
Kibana classic
Kibana classic
Kibana Serverless
Kibana Serverless

DARK mode

view	before	after
EUI
Kibana classic
Kibana classic
Kibana Serverless
Kibana Serverless

Impact to users

⚠️ This PR contains breaking changes as we're removing custom styles for EuiSelectableTemplateSitewide inside EuiHeader. The expected new usage is to use the colorModes prop to adjust EuiSelectableTemplateSitewide as needed depending on use case.

QA

checkout this PR and run Storybook:
- open the "Playground" story for EuiSelectableTemplateSitewide:
  - using the control for theme verify that all possible values ('light', 'dark', 'inverse', 'default', 'global') can be applied and result in expected output
  - verify EuiSelectableTemplateSitewide uses default input styles (design specs)
- open EuiHeader story "Dark Theme with Sitewide Search":
  - verify expected themes are applied (LIGHT mode: search = dark (desktop) and light (mobile), popover = light; DARK mode: search = dark, popover = dark)
verify there is no regression for Amsterdam

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)

- allows for granular control over which theme is applied to search and popover elements

- makes use of the new theme prop instead to handle different colorMode requirements

acstll

I went through all the steps in the suggested QA process and it's working perfectly as expected 👌 — I only have one question regarding the prop name…

packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx

elasticmachine · 2025-06-20T15:31:51Z

💚 Build Succeeded

History

💚 Build #575 succeeded c4dacbd

cc @mgadewoll

elasticmachine · 2025-06-20T15:49:30Z

💚 Build Succeeded

Buildkite Build
Commit: a5ed247

History

💚 Build #4231 succeeded c4dacbd

cc @mgadewoll

acstll

🟢

github-actions · 2025-07-09T08:45:24Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

…stic#8806)

`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))

mgadewoll added 4 commits June 18, 2025 17:51

feat(selectableTemplateSitewide): add theme prop

b66ee6e

- allows for granular control over which theme is applied to search and popover elements

refactor(header): remove custom search input style overrides

c6795aa

- makes use of the new theme prop instead to handle different colorMode requirements

test(vrt): updare reference iamges

1c7f725

docs: update docs

f9662f6

mgadewoll self-assigned this Jun 19, 2025

mgadewoll added the visual refresh label Jun 19, 2025

chore: add changelog

c4dacbd

mgadewoll mentioned this pull request Jun 19, 2025

[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop #8804

Closed

17 tasks

mgadewoll linked an issue Jun 19, 2025 that may be closed by this pull request

[EuiSelectableTemplateSitewide][Visual Refresh] Support theme prop #8802

Closed

mgadewoll requested a review from acstll June 19, 2025 08:29

mgadewoll marked this pull request as ready for review June 19, 2025 10:43

mgadewoll requested a review from a team as a code owner June 19, 2025 10:43

acstll reviewed Jun 20, 2025

View reviewed changes

packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx Outdated Show resolved Hide resolved

refactor: rename theme prop to colorModes

a5ed247

acstll approved these changes Jun 20, 2025

View reviewed changes

mgadewoll merged commit f704eb8 into elastic:feat/inputs-visual-refresh Jun 23, 2025
4 checks passed

mgadewoll changed the title ~~[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop~~ [Visual Refresh][EuiSelectableTemplateSitewide] Add colorModes prop Jun 23, 2025

mgadewoll mentioned this pull request Jun 24, 2025

[DO NOT MERGE][Visual Refresh] Input design changes elastic/kibana#224382

Closed

mgadewoll added a commit that referenced this pull request Jul 1, 2025

[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop (#8806)

ee6e23a

mgadewoll added a commit that referenced this pull request Jul 8, 2025

[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop (#8806)

d42985e

mgadewoll mentioned this pull request Jul 8, 2025

[Visual Refresh] Implement input design changes #8850

Merged

15 tasks

mgadewoll added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Jul 9, 2025

mgadewoll mentioned this pull request Jul 15, 2025

Upgrade EUI to v106.0.0 elastic/kibana#227945

Merged

acstll pushed a commit to acstll/eui that referenced this pull request Jul 17, 2025

[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop (ela…

d1e047c

…stic#8806)

acstll pushed a commit to acstll/eui that referenced this pull request Jul 17, 2025

[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop (ela…

dbc2ddc

…stic#8806)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Visual Refresh][EuiSelectableTemplateSitewide] Add `colorModes` prop #8806

[Visual Refresh][EuiSelectableTemplateSitewide] Add `colorModes` prop #8806

Uh oh!

mgadewoll commented Jun 19, 2025 •

edited by JasonStoltz

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

elasticmachine commented Jun 20, 2025

Uh oh!

elasticmachine commented Jun 20, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

github-actions bot commented Jul 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Visual Refresh][EuiSelectableTemplateSitewide] Add colorModes prop #8806

[Visual Refresh][EuiSelectableTemplateSitewide] Add colorModes prop #8806

Uh oh!

Conversation

mgadewoll commented Jun 19, 2025 • edited by JasonStoltz 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!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Jun 20, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jun 20, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jul 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Visual Refresh][EuiSelectableTemplateSitewide] Add `colorModes` prop #8806

[Visual Refresh][EuiSelectableTemplateSitewide] Add `colorModes` prop #8806

mgadewoll commented Jun 19, 2025 •

edited by JasonStoltz

Loading