paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

fix(ui): tune plugin header core spacing

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-05-04 08:41:17 +01:00
parent 36825fe290
commit eecd8130dc
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/PluginHeader/PluginHeader.module.css
+22 -4
View File
@@ -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;