[Visual Refresh] Inputs: Add refresh design update #1 #8767

mgadewoll · 2025-06-06T20:06:07Z

Summary

Important

This PR merges into a feature branch.
This is to allow a more scoped review on parts of the updates as well as providing time for visual reviews before merging to main.
There will be 1 - 2 more PRs following that update styles for more specific components (e.g. EuiCombobox and EuiDatePicker/EuiSuperDatePicker)

Implements https://github.com/elastic/eui-private/issues/324

This PR adds the first part to implement the new input design. (figma)

The main changes for inputs are updates to:

base styles
state indication styles
smaller form layout adjustments

The state styles mainly concern how indicators are shown as visible borders. We're moving away from the underline indicator towards a full all-side bordered indicator.
We generally keep the already available approach to use local CSS variables to style the indicator. This way we're able to reuse the base form styles and adjust mainly via CSS variables in composing components.

Why use outline as indicator style?

The proposed hover/focus/invalid styling uses outline to apply the needed state indication. The reason for this is:

regular border introduces dimension shifts when the focus style is applied inside a form layout
box-shadow is typically ignored or overridden in Windows forced-colors high contrast mode. If applied in HCM it doesn't allow for enough adjustments and would require us to do 2 separate approaches (HCM and non-HCM)
applying border via pseudo-elements ::before/::after is not possible as some form elements (e.g. <input />) don't except those pseudo-elements
outline does not apply dimension changes and provides enough control to be useful still in Windows high contrast mode (though color is overridden, which is why invalid/focus states require anyway a separate solution with background-image)

Updated components

touched

EuiFieldText
EuiFieldNumber
EuiFormControlLayout
EuiFormControlLayoutDelimited
EuiFormControlLayoutClearButton
EuiFormControlLayoutIcons
EuiFormLabel
EuiFormErrorText
EuiMarkdownEditor (not a base form component but needed update to ensure expected base invalid style)

ℹ️ Additionally the changes to base form styles affect other components that either use the above components or use or inherit form styles. This includes, but is not limited to:

EuiFieldPassword
EuiFieldSearch
EuiTextarea
EuiSelect
...

Changes

added theme flag formVariant to enable toggling between "refresh" and "classic" design variants
updated base form input styles
- updated text, placeholder, border colors
- updated hover, focus, invalid, disabled, readonly styles
updated form control layout styles
- increased size of state icons in compressed form control layouts
- lighter background color for form clear buttons
- updated form validation styling
- updated focused form label text color (form labels are not highlighted as focused anymore)
- added visible borders between append/prepend and inputs
- updated paddings on append/prepend
- increased spacing on delimited form layout center delimiter
added semantic tokens: euiColorBorderInteractiveFormsHoverPlain and euiColorBorderInteractiveFormsHoverDanger
added form component tokens:
- components.forms.backgroundDropping
- components.forms.borderFocused
- components.forms.borderInvalid
- components.forms.borderHovered
- components.forms.borderInvalidHovered
- components.forms.borderAutofilledHovered
updated value for the following tokens (Borealis only):
- borderStrongPrimary
- borderStrongAccent
- borderStrongAccentSecondary
- borderStrongNeutral
- borderStrongSuccess
- borderStrongWarning
- borderStrongRisk
- borderStrongDanger
updated value for textWarning (Borealis only)
updated value for components.forms.backgroundReadOnly (Borealis only)

Screenshots #

Toggle screenshots

LIGHT mode

base input and states

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

variant	classic	refresh
regular
delimited
compressed

form validation

classic	refresh

DARK mode

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

variant	classic	refresh
regular
delimited
compressed

form validation

classic	refresh

High contrast mode

`preferred` HCM

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

classic	refresh

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

classic	refresh

`forced` HCM (Windows)

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

classic	refresh

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

classic	refresh

QA

EuiFieldText
EuiFieldNumber
EuiFormControlLayout
EuiFormControlLayoutDelimited
Form validation
review the directly affected components and verify:
- they matches the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode
- there are no unexpected visual issues in HCM
- there are no regressions 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)

ek-so · 2025-06-10T11:58:58Z

Thank you Lene! The changes lgtm overall (very good actually 😊)

Small note: inside the date picker, we have 2 more "inputs" that do not behave like they are inputs (what I mean is January 2013, that do not get blue outline when clicking on them). Is that smth we can quickly fix? If no, it's tiny — we can leave as is.

And a question: We have a file picker that didn't change as far as I see. At some point we discussed it might mirror better the behaviour of other inputs + reflect better the state when smth is being dragged into this area. See specs here. I assume it's smth we want to tackle in a separate task. So the questions is, should we create a follow up task to deal with that specifically for the inputs, or for example this one is enough to also include file uploader change?
cc. @ryankeairns

ps. @mgadewoll I would change the border token for the file uploader however, as far as I see it's not border-base-plain now, as in other inputs.

mgadewoll · 2025-06-10T13:00:11Z

@ek-so Thanks for the review! 🎉

The current states for EuiDatePicker, EuiSuperDatePicker and EuiFilePicker are currently expected. This PR only updates the base input components and styles, not those specialized components yet. It'll be updated in a second PR.
I mentioned this in the description, but maybe it's not clear enough 🙈 Please feel free to let me know what might work better for you in case 🙂

ℹ️ If you want to, you can check the complete update state on this test PR for the Visual Refresh PoC (deployed docs)

ryankeairns · 2025-06-10T17:01:25Z

Exciting!
The full border is so much nicer :)

acstll

I checked in both the docs and Storybook, in Borealis/Amsterdam, light/dark modes and HCM.

I went through the code once but not exhaustively, I think I should do that once more, but I wanted to share this feedback upfront:

they match the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode

the inline spacing for prepend/append is not exactly matching the spec: in Figma start and end have 12px (m) and a gap of 6px; in code it's 8px and 4px respectively (if I'm not mistaken) — I can imagine it's not easy to adjust while keeping Amsterdam? also it could be you agreed to keep it this way

Toggle screenshot

there are no unexpected visual issues in HCM

found none 👍

there are no regressions for Amsterdam

in the invalid state for EuiFormControlLayoutDelimited, the red underline does not fill the entire control, only the actual <input>s — is that expected? (I wouldn't mind this change personally)

`main`	PR

mgadewoll · 2025-06-17T11:03:59Z

they matches the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode

the inline spacing for prepend/append is not exactly matching the spec: in Figma start and end have 12px (m) and a gap of 6px; in code it's 8px and 4px respectively (if I'm not mistaken) — I can imagine it's not easy to adjust while keeping Amsterdam? also it could be you agreed to keep it this way

@acstll Urgh. Tbh, I don't actually know if there was another change and if Figma is up-to-date or not here 🙈. I'll check back with design ⌛

there are no regressions for Amsterdam

in the invalid state for EuiFormControlLayoutDelimited, the red underline does not fill the entire control, only the actual <input>s — is that expected? (I wouldn't mind this change personally)

Ah, that's a good catch. No it's not expected - I removed the Amsterdam styles here by mistake 💀
It's fixed in 5050919

mgadewoll · 2025-06-17T15:07:17Z

Urgh. Tbh, I don't actually know if there was another change and if Figma is up-to-date or not here 🙈. I'll check back with design ⌛

@acstll We started a discussion about this on design side with @ek-so. This is a larger topic that would generally include alignment on spacing that includes append/prepend but goes further to include buttons as those are used within append/prepend extensively as well. Therefore we agreed to align and handle those as separate topic and keep input updates here as they are.

- based on token changes

- additionally fixes isInvalid not being passed for the FormControlLayout story

… elements

-contains components that directly or indirectly were affected by form style changes

- adding alternativ focus styling to ensure focus is more visible, especially on non-form components (e.g. pickers) - renames helper to align with updated style usage

…terdam

mgadewoll · 2025-06-17T17:27:15Z

ℹ️ Rebased the input feature branch and this PR with latest main.

acstll

I went through the code exhaustively this time, it's looking pretty good. I couldn't find any ~~typos~~ or mistakes or anything I would do differently.

There's only one question regarding the clear button. And probably the semantic token typo in the changelogs.

(Thanks for the patience!)

packages/eui-theme-borealis/changelogs/upcoming/8767.md

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

packages/eui/changelogs/upcoming/8767.md

packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts

- the mistake happened due to copying the file

…en, update token values - token values were updated for light mode from shade40 to shade60 after alignment with design

- changes due to clear button background color change

elasticmachine · 2025-06-18T12:51:00Z

💚 Build Succeeded

History

💚 Build #554 succeeded c366af1
💚 Build #553 succeeded 5050919
💚 Build #492 succeeded f734b9b
💚 Build #473 succeeded 3cc6792
💚 Build #445 succeeded c7812c5
💚 Build #444 succeeded c1b9a1b

cc @mgadewoll

elasticmachine · 2025-06-18T13:07:48Z

💚 Build Succeeded

Buildkite Build
Commit: fb5adda

History

💚 Build #4215 succeeded c366af1
💚 Build #4214 succeeded 5050919
💚 Build #4163 succeeded f734b9b
💚 Build #4149 succeeded 3cc6792
💚 Build #4129 succeeded c7812c5
💚 Build #4128 succeeded c1b9a1b

cc @mgadewoll

acstll

🟢 Amazing work

…#8767)

`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 self-assigned this Jun 6, 2025

mgadewoll added the visual refresh label Jun 6, 2025

mgadewoll force-pushed the input/324-visual-refresh-1 branch 4 times, most recently from 9d94195 to ab28e43 Compare June 8, 2025 11:09

mgadewoll requested review from acstll and ek-so June 8, 2025 11:34

mgadewoll force-pushed the input/324-visual-refresh-1 branch from c1b9a1b to c7812c5 Compare June 8, 2025 12:18

mgadewoll marked this pull request as ready for review June 9, 2025 07:10

mgadewoll requested a review from a team as a code owner June 9, 2025 07:10

ek-so approved these changes Jun 10, 2025

View reviewed changes

mgadewoll mentioned this pull request Jun 10, 2025

[Visual Refresh] Inputs: Add refresh design update #2 #8778

Merged

16 tasks

acstll reviewed Jun 17, 2025

View reviewed changes

mgadewoll added 11 commits June 17, 2025 19:07

feat: add formVariant theme flag

9b7bad8

feat: add/update tokens

0c6401c

test: update snapshots

ad6bf1d

- based on token changes

fix(token): update leftover value

5605de4

feat: update base form styles

99f2cf7

feat: update form control layout styles

3c9ccac

- additionally fixes isInvalid not being passed for the FormControlLayout story

refactor(formLayoutDelimited): ensure correct focus styles for nested…

5f76d9f

… elements

feat: update form label and error styles

9bc33d0

refactor(markdownEditor): ensure invalid style

cc85f94

test(vrt): update reference images

f1224ea

-contains components that directly or indirectly were affected by form style changes

chore: add changelogs

867eb27

mgadewoll added 3 commits June 17, 2025 19:22

refactor: add missing amsterdam token updates in scss and json

826c470

refactor: adjust HCM focus styling

c5d4938

- adding alternativ focus styling to ensure focus is more visible, especially on non-form components (e.g. pickers) - renames helper to align with updated style usage

fix(formControlLayoutDelimited): revert missing invalid style for Ams…

c366af1

…terdam

mgadewoll force-pushed the input/324-visual-refresh-1 branch from 5050919 to c366af1 Compare June 17, 2025 17:26

acstll reviewed Jun 18, 2025

View reviewed changes

mgadewoll added 4 commits June 18, 2025 13:41

fix: revert incorrect json module path change

dae88ad

- the mistake happened due to copying the file

refactor(formControlLayoutClearButton): add clearButtonBackground tok…

531fb6c

…en, update token values - token values were updated for light mode from shade40 to shade60 after alignment with design

chore: update changelogs

c0b7b01

test(vrt) update reference images

fb5adda

- changes due to clear button background color change

acstll self-requested a review June 18, 2025 13:24

acstll approved these changes Jun 18, 2025

View reviewed changes

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

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] Inputs: Add refresh design update #1 (#8767)

8309636

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

[Visual Refresh] Inputs: Add refresh design update #1 (#8767)

c6dccba

This was referenced Jul 8, 2025

[Visual Refresh] Implement input design changes #8850

Merged

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] Inputs: Add refresh design update elastic#1 (elastic…

3630f89

…#8767)

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

[Visual Refresh] Inputs: Add refresh design update elastic#1 (elastic…

ecc1c79

…#8767)

[Visual Refresh] Inputs: Add refresh design update #1 #8767

[Visual Refresh] Inputs: Add refresh design update #1 #8767

Uh oh!

Conversation

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

Uh oh!

Summary

Changes

Screenshots #

LIGHT mode

base input and states

form control layout

form validation

DARK mode

form control layout

form validation

High contrast mode

preferred HCM

form control layout

form control layout

forced HCM (Windows)

QA

General checklist

Uh oh!

ek-so commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Jun 10, 2025

Uh oh!

ryankeairns commented Jun 10, 2025

Uh oh!

acstll left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

they match the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode

there are no unexpected visual issues in HCM

there are no regressions for Amsterdam

Uh oh!

mgadewoll commented Jun 17, 2025

they matches the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode

there are no regressions for Amsterdam

Uh oh!

mgadewoll commented Jun 17, 2025

Uh oh!

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

Uh oh!

Uh oh!

acstll left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jun 18, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jun 18, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented Jun 6, 2025 •

edited by JasonStoltz

Loading

`preferred` HCM

`forced` HCM (Windows)

ek-so commented Jun 10, 2025 •

edited

Loading

acstll left a comment •

edited

Loading

mgadewoll commented Jun 17, 2025 •

edited

Loading

acstll left a comment •

edited

Loading