From eecd8130dc3f7c30235619459121b1addd5151a5 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 4 May 2026 08:41:17 +0100
Subject: [PATCH] fix(ui): tune plugin header core spacing

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../PluginHeader/PluginHeader.module.css      | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.module.css b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
index 07cf403768..31c827a06b 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.module.css
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
@@ -21,10 +21,15 @@
     --bui-plugin-header-margin-bottom: var(--bui-space-6);
     --bui-plugin-header-toolbar-border-bottom: solid 1px var(--bui-border-1);
     --bui-plugin-header-tabs-border-bottom: 1px solid var(--bui-border-1);
+    --bui-plugin-header-toolbar-padding-bottom: var(--bui-space-4);
+    --bui-plugin-header-toolbar-tabs-padding-bottom: var(--bui-space-1);
+    --bui-plugin-header-background-color: transparent;
+    --bui-plugin-header-padding-top: var(--bui-space-4);
 
     margin-bottom: var(--bui-plugin-header-margin-bottom);
     padding-inline: var(--bui-space-5);
-    margin-top: var(--bui-space-4);
+    padding-top: var(--bui-plugin-header-padding-top);
+    background-color: var(--bui-plugin-header-background-color);
   }
 
   .bui-PluginHeader:has(+ .bui-HeaderTop),
@@ -35,6 +40,19 @@
     --bui-plugin-header-margin-bottom: 0;
     --bui-plugin-header-toolbar-border-bottom: none;
     --bui-plugin-header-tabs-border-bottom: none;
+    --bui-plugin-header-toolbar-padding-bottom: var(--bui-space-2);
+    --bui-plugin-header-toolbar-tabs-padding-bottom: var(--bui-space-2);
+    --bui-plugin-header-background-color: var(--bui-bg-neutral-1);
+    --bui-plugin-header-padding-top: var(--bui-space-2);
+  }
+
+  .bui-PluginHeader:has(+ [data-backstage-core-header])
+    .bui-PluginHeaderToolbarIcon,
+  .bui-PluginHeader:has(
+      + [data-backstage-core-page] [data-backstage-core-header]
+    )
+    .bui-PluginHeaderToolbarIcon {
+    background-color: var(--bui-bg-neutral-3);
   }
 
   .bui-PluginHeaderToolbar {
@@ -44,11 +62,11 @@
     justify-content: space-between;
     color: var(--bui-fg-primary);
     border-bottom: var(--bui-plugin-header-toolbar-border-bottom);
-    padding-bottom: var(--bui-space-4);
+    padding-bottom: var(--bui-plugin-header-toolbar-padding-bottom);
 
     &[data-has-tabs] {
       border-bottom: none;
-      padding-bottom: var(--bui-space-1);
+      padding-bottom: var(--bui-plugin-header-toolbar-tabs-padding-bottom);
     }
   }
 
@@ -69,7 +87,7 @@
     flex-shrink: 0;
   }
 
-  .bui-PluginHeaderToolbarIcon {
+  .bui-PluginHeader .bui-PluginHeaderToolbarIcon {
     display: flex;
     align-items: center;
     justify-content: center;