[opinionated] Improve focus styles in light mode

cee-chen · cee-chen · commit a3f90c6b9ef4 · 2024-10-24T13:11:24.000-07:00
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
@@ -126,6 +126,13 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
         box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${
     selectableSitewide.borderColor
   };
+        ${
+          // hide the focus underline in light mode - the search input showing a white background
+          // on focus is sufficient indicator
+          colorMode !== 'DARK'
+            ? `&:focus { --euiFormControlStateColor: transparent; }`
+            : ''
+        }
       }
 
       &--group {
