From db7681b0912474265df8621f29b354d8a86129d3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 23 Mar 2026 14:02:15 +0000
Subject: [PATCH] Bring back Box

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .storybook/themes/spotify.css                  |  3 ---
 .../PluginHeader/PluginHeader.module.css       |  1 -
 .../components/PluginHeader/PluginHeader.tsx   | 18 ++++--------------
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css
index add82b87ab..30aa0274d0 100644
--- a/.storybook/themes/spotify.css
+++ b/.storybook/themes/spotify.css
@@ -261,9 +261,6 @@
     padding: 0;
     border: none;
     background: none;
-  }
-
-  .bui-PluginHeaderTabsWrapper {
     margin-left: -8px;
   }
 }
diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.module.css b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
index 3b8aa9a698..703fd6e4cf 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.module.css
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.module.css
@@ -25,7 +25,6 @@
     padding-inline: var(--bui-space-5);
     color: var(--bui-fg-primary);
     height: 52px;
-    background-color: var(--bui-bg-neutral-1);
     border-bottom: 1px solid var(--bui-border-1);
   }
 
diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.tsx b/packages/ui/src/components/PluginHeader/PluginHeader.tsx
index a7228503f1..6dd7737d8f 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.tsx
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.tsx
@@ -17,7 +17,6 @@
 import type { PluginHeaderProps } from './types';
 import { Tabs, TabList, Tab } from '../Tabs';
 import { useDefinition } from '../../hooks/useDefinition';
-import { useBgProvider, BgProvider } from '../../hooks/useBg';
 import { PluginHeaderDefinition } from './definition';
 import { type NavigateOptions } from 'react-router-dom';
 import { Children, useMemo, useRef } from 'react';
@@ -52,7 +51,6 @@ export const PluginHeader = (props: PluginHeaderProps) => {
     onTabSelectionChange,
   } = ownProps;
 
-  const providerBg = useBgProvider('neutral');
   const hasTabs = tabs && tabs.length > 0;
   const headerRef = useRef<HTMLElement>(null);
   const animationFrameRef = useRef<number | undefined>(undefined);
@@ -125,9 +123,9 @@ export const PluginHeader = (props: PluginHeaderProps) => {
 
   const titleText = title || 'Your plugin';
 
-  const inner = (
-    <>
-      <div className={classes.toolbar} data-has-tabs={hasTabs}>
+  return (
+    <header ref={headerRef} className={classes.root}>
+      <Box bg="neutral" className={classes.toolbar} data-has-tabs={hasTabs}>
         <div className={classes.toolbarContent}>
           <div className={classes.toolbarIcon} aria-hidden="true">
             {icon || <RiShapesLine />}
@@ -145,7 +143,7 @@ export const PluginHeader = (props: PluginHeaderProps) => {
           </h1>
         </div>
         <div className={classes.toolbarControls}>{actionChildren}</div>
-      </div>
+      </Box>
       {tabs && (
         <Box className={classes.tabs}>
           <Tabs onSelectionChange={onTabSelectionChange}>
@@ -164,14 +162,6 @@ export const PluginHeader = (props: PluginHeaderProps) => {
           </Tabs>
         </Box>
       )}
-    </>
-  );
-
-  const { bg: surfaceBg } = providerBg;
-
-  return (
-    <header ref={headerRef} className={classes.root} data-bg={surfaceBg}>
-      {surfaceBg ? <BgProvider bg={surfaceBg}>{inner}</BgProvider> : inner}
     </header>
   );
 };