[Visual Refresh] Resolve Amsterdam specific theme imports

[mgadewoll]

Summary

Important

This PR merges into a feature branch.

closes https://github.com/elastic/eui-private/issues/128

This PR resolves any leftover direct imports from /themes/amsterdam in /eui.

Changes

1. Moves currently shared styles to eui-theme-common package

• moves shadow functions (e.g euiShadow)
  • leaves hook versions (e.g. useEuiShadow) in /eui due to the dependency on the theme hook useEuiTheme and EuiProvider component <- to move these we'll need to separate the package code further
• moves breakpoint

2. Moves types

• internally moves a types files in eui-theme-common
• duplicates UseEuiTheme type

3. Updates imports in /eui

• updates imports from themes/amsterdam for shadows, breakpoints, colorVis and buttons

Note

The changes have been tested against Kibana (testing draft PR) to ensure nothing breaks unexpectedly.
This currently still includes the weekly release upgrade, which obscures the meta stats result.
I'll rebase and rerun the Kibana testing PR once the release upgrade is merged.
✅ Currently rerunning Kibana CI after merge and rebase of the release upgrade PR

QA

• CI passes (docs & storybook build as expected)
• verify package builds run as expected
  • run yarn build in /packages/eui
  • run yarn build in /packages/eui-theme-common
• Smoke test EUI/EUI+ docs pages for shadow functionality (Amsterdam & Borealis)
• EuiCard (EUI, EUI+)
• EuiKeyPadMenu (EUI, EUI+)
• EuiFlyout (EUI, EUI+)
• EuiModal (EUI, EUI+)
• EuiPanel (EUI, EUI+)
• EuiToast (EUI, EUI+)
• EuiToolTip (EUI, EUI+)

[weronikaolejniczak]

Testing notes

CI pipeline and deployments

• Storybook ✅
• Current docs ✅
• New docs ✅

Package builds

• yarn workspace @elastic/eui build ✅
• yarn workspace @elastic/eui-theme-common build ✅

Smoke tests

• EuiCard ✅
• EuiKeyPadMenu ✅
• EuiFlyout ✅
• EuiModal ✅
• EuiPanel ✅
• EuiToast ✅
• EuiToolTip ✅

⚠️ Just noticed a small "issue" (?) with Flyout overlay outside of the changes of this PR, thought I'll mention it anyway:

There's a small 1px line at the top in the current docs. Not sure if this is on purpose to separate the header from the content? In light mode it looks a bit "off".

[mgadewoll]

⚠️ Just noticed a small "issue" (?) with Flyout overlay outside of the changes of this PR, thought I'll mention it anyway:

There's a small 1px line at the top in the current docs. Not sure if this is on purpose to separate the header from the content? In light mode it looks a bit "off".

Yes, that's expected. It was introduced in this PR (issue) that headers in dark mode have a border applied.
(we're using the dark variant header for our docs)

[mgadewoll]

ℹ️ After talking with @tkajtoch we agreed to keep the UseEuiTheme in /eui and rather duplicate it into eui-theme-common to keep concerns separate for now (theme fundamentals vs EUI theme context/consumption). (commit)

[kibanamachine]

Preview staging links for this PR:

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0c1940e

History

• 💚 Build #3440 succeeded 9e64bf6
• 💔 Build #3433 failed 61e755a

cc @mgadewoll