diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css index 356e0c46d2f..7c600dc3968 100644 --- a/packages/react/src/PageLayout/PageLayout.module.css +++ b/packages/react/src/PageLayout/PageLayout.module.css @@ -715,7 +715,8 @@ content: ''; position: absolute; inset: 0; - background-color: var(--bgColor-neutral-muted); + /* stylelint-disable-next-line primer/colors */ + background-color: var(--draggable-handle--bg-color, var(--bgColor-neutral-muted)); opacity: var(--draggable-handle--drag-opacity, 0); transition: var(--draggable-handle--transition, opacity 150ms ease); /* compositor-friendly, disabled during drag */ border-radius: inherit; /* optional if you need rounded corners */ diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index 4a99b01bed2..a18650808e4 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -9,7 +9,9 @@ const DATA_DRAGGING_ATTR = 'data-dragging' /** Apply visual feedback and performance optimizations during drag */ export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) { // Handle visual feedback (must be inline for instant response) - handle?.style.setProperty('background-color', 'var(--bgColor-accent-emphasis)') + // Use CSS variable to control ::before pseudo-element background color. + // This avoids cascade conflicts between inline styles and pseudo-element backgrounds. + handle?.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)') handle?.style.setProperty('--draggable-handle--drag-opacity', '1') handle?.style.setProperty('--draggable-handle--transition', 'none') @@ -20,7 +22,7 @@ export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) /** Remove drag styles and restore normal state */ export function removeDraggingStyles({handle, pane, content}: DraggingStylesParams) { - handle?.style.removeProperty('background-color') + handle?.style.removeProperty('--draggable-handle--bg-color') handle?.style.removeProperty('--draggable-handle--drag-opacity') handle?.style.removeProperty('--draggable-handle--transition')