[Visual Refresh][EuiSelectableTemplateSitewide] Add theme prop

[mgadewoll]

Summary

Important

This PR merges into a feature branch.
This PR should be rebased after the second update PR is merged.

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

Changes

• adds theme prop on EuiSelectableTemplateSitewide
  • theme supports the provider colorMode values light, dark, inverse as well as more generic default and global (default will apply the nearest context's colorMode while global apply the outermost (global) context's colorMode)
• removes custom style overrides in EuiHeader for EuiSelectableTemplateSitewide search

Why are we making this change?

Note

TL;DR: Aligning EuiSelectableTemplateSitewide styles with new Visual Refresh specs.

The Visual Refresh updates for inputs triggered also a change for how the EuiSelectableTemplateSitewide search input should be displayed inside EuiHeader. Previously the input would be displayed as faux-dark theme when non-focused, but displayed as light theme when focused.

ℹ️ EuiHeader currently implements a visual-only dark mode (docs) when it has is theme="dark". It does not use a EuiThemeProvider to apply color context. Meaning it's theme="dark" looks like dark mode but is actually still light mode.

With the Visual Refresh this changes towards using the expected visual colorMode based on context: The EuiHeader is (visually only) in dark mode therefore the search input should be in dark mode too for any state, using the form element specific scoped styles instead of usage specific overrides in EuiHeader. The search popover however should follow the overall global colorMode (as it did previously).

ℹ️ Eventually this should mean that EuiHeader uses a context provider to apply proper color modes, but this requires more investigation as it has bigger implications to consider based on Kibana usage (issue)

Screenshots

Toggle screenshots

LIGHT mode

view	before	after
EUI
Kibana classic
Kibana classic
Kibana Serverless
Kibana Serverless

DARK mode

view	before	after
EUI
Kibana classic
Kibana classic
Kibana Serverless
Kibana Serverless

Impact to users

QA

• checkout this PR and run Storybook:
  • open the "Playground" story for EuiSelectableTemplateSitewide:
    • using the control for theme verify that all possible values ('light', 'dark', 'inverse', 'default', 'global') can be applied and result in expected output
    • verify EuiSelectableTemplateSitewide uses default input styles and matches design specs
  • open EuiHeader story "Dark Theme with Sitewide Search":
    • verify expected themes are applied (LIGHT mode: search = dark (desktop) and light (mobile), popover = light; DARK mode: search = dark, popover = dark)
• verify there is no regression 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)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1c7f725
• Documentation website

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1c7f725

cc @mgadewoll

[mgadewoll]

ℹ️ Added new as #8806 due to mismatch in branches.