[Visual Refresh] Revert floating border usage back to using pseudo elements #9080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mgadewoll merged 9 commits into elastic:eui-theme/borealis-v2-poc from mgadewoll:theme/shadows-with-pseudo-element-border

Oct 8, 2025

packages/eui-theme-common/src/global_styling/mixins/borders.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,32 @@ export type BorderSides = @@
       | 'vertical'
       | 'all';
+    /**
+     * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+     */
+    export const euiShadowFloatingBorderStyles = (
+      euiThemeContext: UseEuiTheme,
+      options: {
+        side?: BorderSides;
+        borderColor?: string;
+        borderWidth?: string;
+        borderStyle?: string;
+      }
+    ) => {
+      return `
+        /* create a containing block without using \`position\` to prevent CSS specificity issues and unexpected overrides;
+        \`transform: translateZ(0)\` is the least likely to affect other behaviors (overflow, layout) */
+        transform: translateZ(0);
+        ${euiBorderStyles(euiThemeContext, options)}
+      `;
+    };
+    /**
+     * Shared style for floating borders.
+     * Uses a pseudo element with `border` attribute to prevent both dimension changes due to
+     * the border width as well as visible gaps due to the need of a transparent border in LIGHT mode.
+     */
     export const euiBorderStyles = (
       euiThemeContext: UseEuiTheme,
       options: {
@@ Expand All / @@ -48,6 +74,15 @@ export const euiBorderStyles = ( @@
       const borderProperty = getBorderSide(side);
       return `
-        ${borderProperty}: ${borderWidth} ${borderStyle} ${borderColor};
+        &::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          /* ensure to keep on top of flush content */
+          z-index: 0;
+          ${borderProperty}: ${borderWidth} ${borderStyle} ${borderColor};
+          border-radius: inherit;
+          pointer-events: none;
+        }
       `;
     };

packages/eui-theme-common/src/global_styling/mixins/shadow.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -12,7 +12,7 @@ import {
  
      _EuiThemeShadowHoverSize,

      _EuiThemeShadowSize,

    } from '../variables/shadow';

    import { BorderSides, euiBorderStyles } from './borders';

    import { BorderSides, euiShadowFloatingBorderStyles } from './borders';

    export interface EuiShadowOptions {

      /** @deprecated */

    @@ -290,7 +290,7 @@ const _shadowStyles = (
  
      const { border = 'all', type = 'box-shadow' } = options;

      const borderStyle =

        euiThemeContext.colorMode === 'DARK' && border !== 'none'

          ? `${euiBorderStyles(euiThemeContext, {

          ? `${euiShadowFloatingBorderStyles(euiThemeContext, {

              side: border ?? 'all',

            })}`

          : '';

...ages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png

Sorry, something went wrong. Reload?