From 6b762173c8a7f372350a74881edf3a0d8303305f Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Sat, 7 Feb 2026 14:23:54 +0100
Subject: [PATCH] style(views): elevate StudioView to SaaS Premium

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/views/StudioView.stories.tsx |  2 +-
 .../views/studio-view/StudioViewContent.tsx          |  2 +-
 .../views/studio-view/StudioViewHeader.tsx           | 12 ++++++------
 .../views/studio-view/StudioViewNavButton.tsx        |  2 +-
 .../views/studio-view/StudioViewSidebar.tsx          |  4 ++--
 .../views/studio-view/StudioViewSkeleton.tsx         |  4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/views/StudioView.stories.tsx b/apps/web/src/components/views/StudioView.stories.tsx
index cc050f805..789a69b0b 100644
--- a/apps/web/src/components/views/StudioView.stories.tsx
+++ b/apps/web/src/components/views/StudioView.stories.tsx
@@ -8,7 +8,7 @@ const meta: Meta<typeof StudioView> = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <div className="bg-kodo-background min-h-layout-main p-4">
+      <div className="bg-background min-h-layout-main p-4">
         <Story />
       </div>
     ),
diff --git a/apps/web/src/components/views/studio-view/StudioViewContent.tsx b/apps/web/src/components/views/studio-view/StudioViewContent.tsx
index 11d3cc510..9b5974ced 100644
--- a/apps/web/src/components/views/studio-view/StudioViewContent.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewContent.tsx
@@ -10,7 +10,7 @@ interface StudioViewContentProps {
 
 export function StudioViewContent({ activeTab }: StudioViewContentProps) {
   return (
-    <div className="flex-1 bg-kodo-graphite/30 border border-kodo-steel/30 rounded-xl p-8 overflow-hidden">
+    <div className="flex-1 bg-muted/30 border border-border rounded-xl p-8 overflow-hidden">
       {activeTab === 'files' && <CloudFileBrowser />}
       {activeTab === 'tools' && <AIToolsView />}
       {activeTab === 'connect' && <ConnectivityView />}
diff --git a/apps/web/src/components/views/studio-view/StudioViewHeader.tsx b/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
index cc5a4c6b6..1d3d7d519 100644
--- a/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
@@ -12,7 +12,7 @@ export function StudioViewHeader({ onSwitchToProjects }: StudioViewHeaderProps)
         <h2 className="text-3xl font-display font-bold text-white mb-2">
           CLOUD STUDIO
         </h2>
-        <p className="text-kodo-content-dim font-mono text-sm">
+        <p className="text-muted-foreground font-mono text-sm">
           Manage assets, process audio, and sync devices.
         </p>
       </div>
@@ -24,12 +24,12 @@ export function StudioViewHeader({ onSwitchToProjects }: StudioViewHeaderProps)
         >
           Switch to Projects
         </Button>
-        <div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-4">
-          <Cloud className="w-4 h-4 text-kodo-steel" />
-          <div className="w-32 h-2 bg-kodo-steel rounded-full overflow-hidden">
-            <div className="w-2/3 h-full bg-kodo-cyan" />
+        <div className="px-4 py-2 bg-card border border-border rounded-xl flex items-center gap-4">
+          <Cloud className="w-4 h-4 text-muted-foreground" />
+          <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+            <div className="w-2/3 h-full bg-primary" />
           </div>
-          <span className="text-xs font-mono text-kodo-content-dim">
+          <span className="text-xs font-mono text-muted-foreground">
             65GB / 100GB
           </span>
         </div>
diff --git a/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx b/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
index 284da1558..9fa734d5f 100644
--- a/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
@@ -17,7 +17,7 @@ export function StudioViewNavButton({
     <button
       type="button"
       onClick={onClick}
-      className={`w-full flex items-center gap-4 px-4 py-4 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-kodo-content-dim hover:text-white hover:bg-white/5 border border-transparent'}`}
+      className={`w-full flex items-center gap-4 px-4 py-4 rounded-xl text-sm font-medium transition-all duration-[var(--duration-normal)] ${active ? 'bg-primary/10 text-primary border border-primary/30' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent'}`}
     >
       {icon}
       {label}
diff --git a/apps/web/src/components/views/studio-view/StudioViewSidebar.tsx b/apps/web/src/components/views/studio-view/StudioViewSidebar.tsx
index 3f02c7527..311be7a10 100644
--- a/apps/web/src/components/views/studio-view/StudioViewSidebar.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewSidebar.tsx
@@ -43,8 +43,8 @@ export function StudioViewSidebar({
         label="Storage Settings"
       />
 
-      <div className="mt-auto p-4 bg-kodo-ink rounded-xl border border-kodo-steel">
-        <h4 className="text-xs font-bold text-kodo-content-dim uppercase mb-2">
+      <div className="mt-auto p-4 bg-card rounded-xl border border-border">
+        <h4 className="text-xs font-bold text-muted-foreground uppercase mb-2">
           Quick Actions
         </h4>
         <div className="space-y-2">
diff --git a/apps/web/src/components/views/studio-view/StudioViewSkeleton.tsx b/apps/web/src/components/views/studio-view/StudioViewSkeleton.tsx
index 678f325e1..60fb78554 100644
--- a/apps/web/src/components/views/studio-view/StudioViewSkeleton.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewSkeleton.tsx
@@ -20,13 +20,13 @@ export function StudioViewSkeleton() {
           <div className="h-14 rounded-lg bg-muted animate-pulse" />
           <div className="h-14 rounded-lg bg-muted animate-pulse" />
           <div className="h-14 rounded-lg bg-muted animate-pulse" />
-          <div className="mt-auto p-4 rounded-xl border border-kodo-steel bg-kodo-ink space-y-2">
+          <div className="mt-auto p-4 rounded-xl border border-border bg-card space-y-2">
             <div className="h-4 w-24 rounded bg-muted animate-pulse" />
             <div className="h-9 w-full rounded bg-muted animate-pulse" />
             <div className="h-9 w-full rounded bg-muted animate-pulse" />
           </div>
         </div>
-        <div className="flex-1 rounded-xl border border-kodo-steel/30 bg-kodo-graphite/30 p-8 min-h-0">
+        <div className="flex-1 rounded-xl border border-border bg-muted/30 p-8 min-h-0">
           <div className="h-full rounded bg-muted/30 animate-pulse" />
         </div>
       </div>