[EuiHeader] Remove custom border-bottom color on dark mode (#8070)

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
elastic · Oct 14, 2024 · 33bf1b7 · 33bf1b7
1 parent f3a08e4
commit 33bf1b7
Show file tree

Hide file tree

Showing 37 changed files with 9 additions and 33 deletions.
diff --git a/...oki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/...oki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png
diff --git a/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png
diff --git a/...ki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/...ki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png
diff --git a/...i/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/...i/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png
diff --git a/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png
diff --git a/...ui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/...ui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png
diff --git a/...eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/...eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png
diff --git a/...ktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/...ktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png
diff --git a/...p_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/...p_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png
diff --git a/...top_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/...top_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png
diff --git a/...e_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/...e_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png
diff --git a/...hrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/...hrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png
diff --git a/...e/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/...e/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
diff --git a/.../reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/.../reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png
diff --git a/...es/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png b/...es/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png
diff --git a/...ages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/...ages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png
diff --git a/...ges/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/...ges/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png
diff --git a/...loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/...loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png
diff --git a/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png
diff --git a/...oki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/...oki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png
diff --git a/...ki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/...ki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png
diff --git a/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png
diff --git a/...eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/...eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png
diff --git a/.../eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/.../eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png
diff --git a/...bile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/...bile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png
diff --git a/...e_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/...e_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png
diff --git a/...ile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/...ile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png
diff --git a/...me_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/...me_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png
diff --git a/...chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/...chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png
diff --git a/...ce/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/...ce/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
diff --git a/...i/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/...i/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png
diff --git a/...ges/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png b/...ges/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png
diff --git a/...ages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/...ages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png
diff --git a/packages/eui/changelogs/upcoming/8070.md b/packages/eui/changelogs/upcoming/8070.md
@@ -0,0 +1 @@
+- Updated `EuiHeader`s in dark mode to have a visible border-bottom color
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
@@ -28,22 +28,16 @@ export const euiHeaderVariables = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
   const { height, padding } = euiHeaderVariables(euiThemeContext);
 
-  // Curated border color to fade into the shadow without looking too much like a border
-  // It adds separation between the header and flyout
-  const borderColor =
-    colorMode === 'DARK'
-      ? shade(euiTheme.colors.emptyShade, 0.35)
-      : shade(euiTheme.border.color, 0.03);
-
   return {
     euiHeader: css`
       display: flex;
       justify-content: space-between;
       ${logicalCSS('height', height)}
       ${logicalCSS('padding-horizontal', padding)}
+      ${logicalCSS('border-bottom', euiTheme.border.thin)}
       ${euiShadowSmall(euiThemeContext)}
     `,
     // Position
@@ -61,12 +55,8 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
     // Theme
     default: css`
       background-color: ${euiTheme.colors.emptyShade};
-      ${logicalCSS(
-        'border-bottom',
-        `${euiTheme.border.width.thin} solid ${borderColor}`
-      )}
     `,
-    dark: css(euiHeaderDarkStyles(euiThemeContext, borderColor)),
+    dark: css(euiHeaderDarkStyles(euiThemeContext)),
   };
 };
 
@@ -81,23 +71,17 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
  */
 import { euiFormVariables } from '../form/form.styles';
 
-const euiHeaderDarkStyles = (
-  euiThemeContext: UseEuiTheme,
-  defaultBorderColor: string
-) => {
+const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
   const { controlPlaceholderText } = euiFormVariables(euiThemeContext);
 
   const backgroundColor =
     colorMode === 'DARK'
       ? shade(euiTheme.colors.lightestShade, 0.5)
       : shade(euiTheme.colors.darkestShade, 0.28);
-  const borderColor =
-    colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
 
   return `
     background-color: ${backgroundColor};
-    ${logicalCSS('border-bottom-color', borderColor)}
 
     .euiHeaderLogo__text,
     .euiHeaderLink,

diff --git a/packages/eui/src/components/page_template/inner/page_inner.styles.ts b/packages/eui/src/components/page_template/inner/page_inner.styles.ts
@@ -9,13 +9,10 @@
 import { css } from '@emotion/react';
 import { euiShadow } from '../../../themes/amsterdam/global_styling/mixins';
 import { euiBackgroundColor, logicalCSS } from '../../../global_styling';
-import { transparentize, UseEuiTheme } from '../../../services';
+import { UseEuiTheme } from '../../../services';
 
 export const euiPageInnerStyles = (euiThemeContext: UseEuiTheme) => {
-  const borderColor = transparentize(
-    euiThemeContext.euiTheme.colors.lightShade,
-    0.7
-  );
+  const { euiTheme } = euiThemeContext;
 
   return {
     euiPageInner: css`
@@ -35,17 +32,11 @@ export const euiPageInnerStyles = (euiThemeContext: UseEuiTheme) => {
 
     border: {
       top: css`
-        ${logicalCSS(
-          'border-top',
-          `${euiThemeContext.euiTheme.border.width.thin} solid ${borderColor}`
-        )}
+        ${logicalCSS('border-top', euiTheme.border.thin)}
       `,
 
       left: css`
-        ${logicalCSS(
-          'border-left',
-          `${euiThemeContext.euiTheme.border.width.thin} solid ${borderColor}`
-        )}
+        ${logicalCSS('border-left', euiTheme.border.thin)}
       `,
     },
   };