From 179d5f9f7be898cd5013c518de89c896ec884cb6 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:12:25 -0700
Subject: [PATCH] [EuiSelectableTemplateSitewide] Fix border bug in Kibana when
 used in dark-themed EuiHeaders (#8100)

---
 packages/eui/changelogs/upcoming/8100.md      |  3 ++
 .../src/components/header/header.styles.ts    | 29 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/8100.md

diff --git a/packages/eui/changelogs/upcoming/8100.md b/packages/eui/changelogs/upcoming/8100.md
new file mode 100644
index 00000000000..374b49b9826
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8100.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
index c976e718b34..cda6c17b122 100644
--- a/packages/eui/src/components/header/header.styles.ts
+++ b/packages/eui/src/components/header/header.styles.ts
@@ -95,6 +95,16 @@ const euiHeaderDarkStyles = (
   const borderColor =
     colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
 
+  // Specific color overrides for EuiSelectableTemplateSitewide
+  const selectableSitewide = {
+    color: euiTheme.colors.ghost,
+    borderColor: transparentize(euiTheme.colors.ghost, 0.3),
+    placeholderColor: makeHighContrastColor(
+      controlPlaceholderText,
+      8
+    )(backgroundColor),
+  };
+
   return `
     background-color: ${backgroundColor};
     ${logicalCSS('border-bottom-color', borderColor)}
@@ -128,21 +138,28 @@ const euiHeaderDarkStyles = (
     .euiSelectableTemplateSitewide .euiFormControlLayout {
       background-color: transparent;
 
+      input {
+        box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${
+    selectableSitewide.borderColor
+  };
+      }
+
       &--group {
-        border-color: ${transparentize(euiTheme.colors.ghost, 0.3)};
+        border-color: ${selectableSitewide.borderColor};
+
+        input {
+          box-shadow: none;
+        }
       }
 
       &:not(:focus-within) {
         /* Increase contrast of filled text to be more than placeholder text */
-        color: ${euiTheme.colors.ghost};
+        color: ${selectableSitewide.color};
 
         input {
           /* Increase contrast of placeholder text */
           &::placeholder {
-            color: ${makeHighContrastColor(
-              controlPlaceholderText,
-              8
-            )(backgroundColor)};
+            color: ${selectableSitewide.placeholderColor};
           }
 
           /* Inherit color from form control layout */