diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png index 11158f6e0a9..ab7eeec6914 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png index 824f07ea891..35747e73899 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png index 114a866f881..729d18cbe29 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png index 9e098846c23..851073797ab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png index a41e1c1cd15..5c27f8f48db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png index ff19f0ff211..6f9198e45d4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png index ff19f0ff211..6f9198e45d4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png index 48816d04b4a..e80f6a80f18 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index 3fbfc835201..99be28f0d58 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index 74bcea8a7b7..8e619b824d1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png index 7ff0bcc0235..b140820e9cf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png index 19501175317..dc22c4e553d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index 3881dab7904..14431b06934 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 2caf9d69ff1..3da30b1940a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png index 4d881502ce3..e6fa3a95e94 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png index dabf71afe61..9376e27fe9c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png index 06374effd2b..057c8b8cbba 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png index 942cdb5dd53..66a36a3e3de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png index fbfc11731a6..f0b7b1a69dd 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png index 8a87cb4e436..31de872166e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png index 209fe216a8a..21fd6b0911c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png index 8298908276c..c3b84d17cb3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png index 9e54b27644a..96165d02365 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png index 9e54b27644a..96165d02365 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png index 90cdcc0d9bf..7bd032d2d46 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index efe4becc3e1..a710821d814 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index 5ee50c4574f..b9e7cdadd35 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png index a7b25d10c66..7fe97effc96 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png index e35c345e095..53e445875e3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index 3d30abed90b..898be033f44 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index bbb5f9e3642..4b667e21708 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png index 69f6ddf9b14..d2e8e8eab57 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png differ 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 index d386d2e28ff..3d52b3eea98 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png index eeeace8a941..8eb8edf4bdf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/8070.md b/packages/eui/changelogs/upcoming/8070.md new file mode 100644 index 00000000000..335935bc7a8 --- /dev/null +++ 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 index c976e718b34..239af56a6a7 100644 --- 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,10 +71,7 @@ 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); @@ -92,12 +79,9 @@ const euiHeaderDarkStyles = ( 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 index f8abf6fa355..58ff213c853 100644 --- 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)} `, }, };