[Visual Refresh][EuiButton] Add Refresh design update #1

[mgadewoll]

Summary

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

Important

This PR merged into a feature branch.
This is to allow for a more scoped review on parts of the updates as well as providing time for visual reviews before merging to main.

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

Changes

• adds theme flag buttonVariant to enable toggling between refresh and classic design variants
• updates EuiProvider to support rebuilding the theme on theme flags change
• adds utils isEuiThemeRefreshVariant and useEuiThemeRefreshVariant to enable in-code feature flagging
• adds more button specific component tokens
• updates backgroundLightText token value from shade130 to shade120
• adds and updates transparent semantic color tokens (used for button hovers)
• updates common (shared) button styles in _button.ts
  • updated min-width
  • updated hover and active states
  • removed animation on focus
  • updated color/border for base text button

Note

Focus style changes are not included. Those will be handled as standalone update (https://github.com/elastic/eui-private/issues/267).

Note

This PR only updates base button components. Related components like EuiButtonGroup or EuiFilterGroup etc will be updated in a separate PR.

Screenshots

ℹ️ Left: new; Right: previous

• base EuiButton (primary)

Screen.Recording.2025-04-15.at.10.22.00.mov

• base EuiButton (text)

Screen.Recording.2025-04-15.at.10.22.24.mov

• filled EuiButton (primary)

Screen.Recording.2025-04-15.at.10.22.57.mov

• EuiButtonEmpty

Screen.Recording.2025-04-15.at.10.24.27.mov

• flush EuiButtonEmpty

Screen.Recording.2025-04-15.at.10.28.22.mov

• empty EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.19.mov

• base EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.44.mov

• filled EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.33.mov

• disabled
  

QA

ℹ️ Provided testing stories that display "refresh" and "classic" design variants next to each other:
EuiButton
EuiButtonEmpty
EuiButtonIcon

• verify there is no visual regression for buttons in Amsterdam theme between staging and production
• verify the refresh variant buttons look according to design specs
  (ℹ️ provided test stories have both "refresh" and "classic" variants displayed for easier review)

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)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 075cc28
• Documentation website

History

• 💚 Build #66 succeeded e213698
• 💚 Build #65 succeeded 452a7b0

cc @mgadewoll

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8595/
• Storybook: https://eui.elastic.co/pr_8595/storybook
• New docs: https://eui.elastic.co/pr_8595/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 075cc28

History

• 💚 Build #3872 succeeded e213698

cc @mgadewoll