From 2168cd74b06031986bbbd51d32ad90ac4a5b82fd Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 13 Jan 2025 11:12:10 +0100
Subject: [PATCH] refactor: updates border implementation on panels

- prevents transparent borders showing on colored full-width content, e.g. for EuiSplitPanel

- keeps using borderBaseFloating token as it provides expected split between Amsterdam and Borealis
---
 .../eui/src/components/panel/panel.styles.ts  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index 2ca0e0478a9..c7fdc125afe 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
-import { UseEuiTheme } from '../../services';
+import { COLOR_MODES_STANDARD, UseEuiTheme } from '../../services';
 import {
   euiCanAnimate,
   logicalCSS,
@@ -16,7 +16,22 @@ import {
 } from '../../global_styling';
 
 export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, colorMode } = euiThemeContext;
+  const isDark = colorMode === COLOR_MODES_STANDARD.dark;
+
+  const borderStyle = `
+    position: relative;
+
+    ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: ${euiTheme.border.width.thin} solid
+        ${euiTheme.colors.borderBaseFloating};
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  `;
 
   return {
     // Base
@@ -30,8 +45,11 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
-      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors
-        .borderBaseFloating};
+
+      /* Using a pseudo element for the border instead of floating border only 
+      because the transparent border might otherwise be visible with arbitrary 
+      full-width/height content in light mode. */
+      ${isDark && borderStyle}
     `,
 
     hasBorder: css`