[Visual Refresh][EuiSelectableTemplateSitewide] Add colorModes prop

packages/eui/changelogs/upcoming/8806.md

@@ -0,0 +1,6 @@
+- Added `theme` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components
+
+**Breaking changes**
+
+- Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `theme` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output.
+

packages/eui/src/components/header/header.stories.tsx

@@ -151,6 +151,10 @@ export const DarkThemeWithSitewideSearch: Story = {
               isOpen: true,
               repositionOnScroll: true, // Necessary when placing search in a fixed component
             }}
+            colorModes={{
+              search: 'dark',
+              popover: 'global',
+            }}
           />,
         ],
       },
@@ -477,6 +481,10 @@ const ElasticNavigationPatternExample = () => {
   const search = (
     <EuiSelectableTemplateSitewide
       options={[]}
+      colorModes={{
+        search: 'dark',
+        popover: 'global',
+      }}
       searchProps={{
         append: '⌘K',
         compressed: true,

packages/eui/src/components/header/header.styles.ts

@@ -10,7 +10,11 @@ import { css } from '@emotion/react';
 import { euiShadowXSmall } from '@elastic/eui-theme-common';
 
 import { logicalCSS } from '../../global_styling';
-import { UseEuiTheme, makeHighContrastColor } from '../../services';
+import {
+  UseEuiTheme,
+  isEuiThemeRefreshVariant,
+  makeHighContrastColor,
+} from '../../services';
 
 export const euiHeaderVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -69,6 +73,10 @@ import { euiFormVariables } from '../form/form.styles';
 
 const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, highContrastMode } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
   const { controlPlaceholderText } = euiFormVariables(euiThemeContext);
 
   const backgroundColor = euiTheme.components.headerDarkBackground;
@@ -83,37 +91,7 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
     )(backgroundColor),
   };
 
-  return `
-    background-color: ${backgroundColor};
-
-    .euiHeaderLogo__text,
-    .euiHeaderLink,
-    .euiHeaderSectionItemButton {
-      color: ${euiTheme.colors.ghost};
-    }
-
-    .euiHeaderLink-isActive {
-      color: ${makeHighContrastColor(euiTheme.colors.primary)(backgroundColor)};
-    }
-
-    .euiHeaderLogo,
-    .euiHeaderLink,
-    .euiHeaderSectionItemButton {
-      &:focus {
-        background-color: ${
-          euiTheme.components.headerDarkSectionItemBackgroundFocus
-        };
-      }
-    }
-
-    .euiHeaderSectionItemButton__notification--badge {
-      box-shadow: 0 0 0 ${euiTheme.border.width.thin} ${backgroundColor};
-    }
-
-    .euiHeaderSectionItemButton__notification--dot {
-      stroke: ${backgroundColor};
-    }
-
+  const formLayoutStyles = `
     .euiSelectableTemplateSitewide .euiFormControlLayout {
       background-color: transparent;
 
@@ -165,6 +143,40 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
           color: inherit;
         }
       }
+  }
+  `;
+
+  return `
+    background-color: ${backgroundColor};
+
+    .euiHeaderLogo__text,
+    .euiHeaderLink,
+    .euiHeaderSectionItemButton {
+      color: ${euiTheme.colors.ghost};
     }
+
+    .euiHeaderLink-isActive {
+      color: ${makeHighContrastColor(euiTheme.colors.primary)(backgroundColor)};
+    }
+
+    .euiHeaderLogo,
+    .euiHeaderLink,
+    .euiHeaderSectionItemButton {
+      &:focus {
+        background-color: ${
+          euiTheme.components.headerDarkSectionItemBackgroundFocus
+        };
+      }
+    }
+
+    .euiHeaderSectionItemButton__notification--badge {
+      box-shadow: 0 0 0 ${euiTheme.border.width.thin} ${backgroundColor};
+    }
+
+    .euiHeaderSectionItemButton__notification--dot {
+      stroke: ${backgroundColor};
+    }
+
+    ${!isRefreshVariant && formLayoutStyles} 
   `;
 };