[Visual Refresh] Add borderBaseProminent and borderInteractiveFormsHoverProminent tokens

[mgadewoll]

Summary

closes #8783

This PR adds two new color tokens:

• borderBaseProminent
• borderInteractiveFormsHoverProminent

And it removes the now obsolete borderBaseFormsControl token as it's being replaced by borderBaseProminent.

Related changes

• updates EuiFilePicker styles to use the newly added tokens and align with designs
• updated form control styles to use borderBaseProminent which affects the border style for EuiRadio/EuiCheckbox

Additional Changes

• ensures EuiFlyoutMenu story VRT scope includes the entire screen
• adds updated VRT images for leftover updates

Why are we making this change?

🎨 UI consistency: Aligning with design. Adding the new tokens provides means to provide a better visual balance of borders.

Screenshots #

EuiFilePicker

LIGHT

state	BEFORE	AFTER
default
hover
disabled

DARK

state	BEFORE	AFTER
default
hover
disabled

EuiRadio/EuiCheckbox

BEFORE	AFTER

Impact to users

🔴 This PR removes the token borderBaseFormsControl. It needs to be replaced with borderBaseProminent on consumer side.

ℹ️ The specific code updates in Kibana have been prepared here. (those might still require test/snapshot updates)

QA

• verify that the new token values match design specs
• verify that the updated EuiFilePicker styles match design specs (storyboook, docs)
• verify that the updated EuiRadio (storybook) and EuiCheckbox (storybook) have updated border styles (using broderBaseProminent values)

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)

[github-actions]

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

[JoseLuisGJ]

LGTM, as commented here I'm working on populating the same changes in the new EUI Figma Borealis library to be in sync

[weronikaolejniczak]

The change looks great 👍🏻 Thanks for updating, @mgadewoll!

Testing

	Light	Dark
borderBaseProminent	shade50 (#A2B1C9)	shade80 (#6A7FA0)
borderInteractiveFormsHoverProminent	shade70 (#798EAF)	shade60 (#8E9FBC)

✅ I checked token values
✅ I tested EuiFilePicker, EuiRadio and EuiCheckbox
✅ I verified that the border colors table is complete 👍🏻

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a6db557
• Documentation website
• Storybook

History

• 💚 Build #1772 succeeded 9bfd7c7
• 💚 Build #1763 succeeded 8f8a8ab

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a6db557

History

• 💚 Build #5093 succeeded 9bfd7c7
• 💚 Build #5085 succeeded 8f8a8ab

cc @mgadewoll