[EuiHeader] Remove custom border-bottom color on dark mode

packages/eui/changelogs/upcoming/8070.md

@@ -0,0 +1 @@
+- Updated `EuiHeader`s in dark mode to have a visible border-bottom color

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,

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)}
       `,
     },
   };