bg

apps/studio/components/interfaces/ExplorerPrototype/ExplorerPrototype.tsx

@@ -103,9 +103,8 @@ export const ExplorerPrototype = () => {
   }
 
   return (
-    // `bg-background` is the page surface the active tab blends into.
-    <div className="flex h-full flex-col bg-background">
-      <div className="flex h-10 items-center border-b bg-muted md:min-h-(--header-height)">
+    <div className="flex h-full flex-col">
+      <div className="flex h-10 items-center border-b bg-transparent md:min-h-(--header-height)">
         <ExplorerTabBar
           tabs={state.tabs}
           activeTabId={state.activeTabId}
@@ -120,7 +119,7 @@ export const ExplorerPrototype = () => {
         />
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="min-h-0 flex-1 overflow-y-auto bg-muted">
         {isHomeActive ? (
           <HomeView
             onCreateQuery={state.createQuery}

apps/studio/components/interfaces/ExplorerPrototype/ExplorerTabBar.tsx

@@ -42,7 +42,7 @@ export const ExplorerTabBar = ({
       <div
         className={cn(
           'relative flex shrink-0 items-center border-r',
-          isHomeActive ? 'bg-background' : 'bg-transparent hover:bg-surface-200'
+          isHomeActive ? 'bg-muted' : 'bg-background hover:bg-surface-200'
         )}
       >
         <button
@@ -69,9 +69,9 @@ export const ExplorerTabBar = ({
             key={tab.id}
             className={cn(
               'group/tab relative flex items-center border-r',
-              // The active tab is the page surface pushed up into the muted row,
-              // so it reads as continuous with the content below it.
-              isActive ? 'bg-background' : 'bg-transparent hover:bg-surface-200'
+              // The active tab shares the muted content surface; inactive tabs
+              // remain on the background surface until selected.
+              isActive ? 'bg-muted' : 'bg-background hover:bg-surface-200'
             )}
           >
             <button

apps/studio/components/interfaces/ExplorerPrototype/QueryCell.tsx

@@ -142,8 +142,10 @@ export const QueryCell = ({
   return (
     <div
       className={cn(
-        'flex flex-col overflow-hidden bg-surface-100',
-        full ? 'h-full min-h-0 border-0 shadow-none' : 'rounded-md border shadow-xs'
+        'flex flex-col overflow-hidden',
+        full
+          ? 'h-full min-h-0 border-0 shadow-none'
+          : 'rounded-md border bg-muted shadow-xs'
       )}
     >
       <TabToolbar

apps/studio/components/interfaces/ExplorerPrototype/TabToolbar.tsx

@@ -19,7 +19,7 @@ interface TabToolbarProps {
 }
 
 export const TabToolbar = ({ icon: Icon, title, actions }: TabToolbarProps) => (
-  <div className="flex h-10 shrink-0 items-center gap-2 border-b bg-background px-3 md:min-h-(--header-height)">
+  <div className="flex h-10 shrink-0 items-center gap-2 border-b bg-transparent px-3 md:min-h-(--header-height)">
     <Icon size={14} className="shrink-0 text-foreground-muted" />
     <div className="min-w-0 flex-1">
       {typeof title === 'string' ? <h2 className="truncate text-sm">{title}</h2> : title}

apps/studio/components/interfaces/ExplorerPrototype/views/ChatView.tsx

@@ -276,7 +276,7 @@ export const ChatView = ({
         <ConversationScrollButton aria-label="Jump to latest" />
       </Conversation>
 
-      <div className="bg-background p-4">
+      <div className="p-4">
         <ChatComposer onSubmit={onSendMessage} />
       </div>
     </div>

apps/studio/components/interfaces/ExplorerPrototype/views/HomeView.tsx

@@ -22,7 +22,7 @@ export const HomeView = ({ onCreateQuery, onCreateNotebook, onCreateChat }: Home
   const [showTemplates, setShowTemplates] = useState(true)
 
   return (
-    <div className="h-full overflow-y-auto bg-background">
+    <div className="h-full overflow-y-auto">
       <div className="flex min-h-full items-center justify-center px-6 py-12">
         <div className="w-full max-w-2xl">
           <div className="mb-12 space-y-1 text-center">

apps/studio/components/interfaces/ExplorerPrototype/views/NotebookView.tsx

@@ -99,7 +99,7 @@ export const NotebookView = ({
     <div
       className={cn(
         'flex flex-col',
-        embedded ? 'max-h-[32rem] overflow-hidden rounded-md border bg-surface-100' : 'h-full'
+        embedded ? 'max-h-[32rem] overflow-hidden rounded-md border bg-muted' : 'h-full'
       )}
     >
       <TabToolbar