Bring back Box

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.storybook/themes/spotify.css

@@ -261,9 +261,6 @@
     padding: 0;
     border: none;
     background: none;
-  }
-
-  .bui-PluginHeaderTabsWrapper {
     margin-left: -8px;
   }
 }

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);
   }
 

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>
   );
 };