Summary

closes #9407

This PR updates EuiBadge by updating/adding hover styles.

Changes

• Exports button interaction styles as euiButtonInteractionStyles
• Added background color change for :hover and :active states (uses euiButtonInteractionStyles)
  • Added background color change for custom badge colors as well, using "guesstimated" color calculations
• Removed text-decoration: underline style on hover by default, leaving it only for high contrast mode (HCM) styles

Why are we making this change?

💅 UI redesign: This update is part of the overall redesign of badges as well as selectable items (https://github.com/elastic/platform-ux-team/issues/1050)

Screenshots #

• Example custom colors

• High contrast mode

Impact to users

🟢 No updates required on consumer side.

ℹ️ Due to the style changes, DOM snapshots might require updates due to changed Emotion class names.

QA

Design specs: https://www.figma.com/design/FHys7gLzyvD1gc9DrJM6D8/Elastic-UI--Borealis-?node-id=7272-30925&p=f&t=liHyqo3oLOHvDB4J-0

• verify that EuiBadge with onClick has hover and active styles that match button styles
• verify that EuiBadge with iconOnClick has hover and active styles that match button styles
• verify that EuiBadge in HCM has text-decoration: underline styles for hover, active and focus states

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)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• 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)