consistency: migrate Tailwind default colors in LiveView, StudioView, and UploadView (Batches 11-13)

EXHAUSTIVE_TODO_LIST.md

@@ -3114,7 +3114,10 @@ Critical path dependencies:
     - ✅ Batch 8 complete: PurchasesView.tsx (5 instances)
     - ✅ Batch 9 complete: SettingsView.tsx (4 instances)
     - ✅ Batch 10 complete: SocialView.tsx (12 instances)
-    - ✅ Total: 191 instances migrated (1,492 → 1,301 remaining, ~12.8% complete)
+    - ✅ Batch 11 complete: LiveView.tsx (7 instances)
+    - ✅ Batch 12 complete: StudioView.tsx (5 instances)
+    - ✅ Batch 13 complete: UploadView.tsx (5 instances)
+    - ✅ Total: 208 instances migrated (1,492 → 1,284 remaining, ~13.9% complete)
     - ⏳ Continuing with remaining files incrementally
   - **Validation**: No Tailwind default colors used (in progress)
   - **Rollback**: Restore Tailwind colors

apps/web/src/components/views/LiveView.tsx

@@ -33,7 +33,7 @@ const chatMessages = [
     text: 'That Reese bass is filthy! 🤮🔥',
     color: 'text-kodo-cyan',
   },
-  { user: 'Studio_Rat', text: 'What VST is that?', color: 'text-gray-400' },
+  { user: 'Studio_Rat', text: 'What VST is that?', color: 'text-kodo-content-dim' },
   {
     user: 'Neuro_Glitch',
     text: "It's Phase Plant, just initializing now.",
@@ -164,7 +164,7 @@ export const LiveView: React.FC = () => {
 
         {/* Suggested Streams */}
         <div className="mt-4">
-          <h3 className="font-bold text-gray-400 mb-4 uppercase text-sm tracking-wider">
+          <h3 className="font-bold text-kodo-content-dim mb-4 uppercase text-sm tracking-wider">
             Recommended Channels
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -185,12 +185,12 @@ export const LiveView: React.FC = () => {
                   </div>
                 </div>
                 <div className="p-3 flex gap-2">
-                  <div className="w-8 h-8 rounded-full bg-gray-700"></div>
+                  <div className="w-8 h-8 rounded-full bg-kodo-steel"></div>
                   <div>
                     <div className="font-bold text-sm text-white truncate">
                       Techno Bunker 24/7
                     </div>
-                    <div className="text-xs text-gray-500">
+                    <div className="text-xs text-kodo-content-dim">
                       Underground_Radio
                     </div>
                   </div>
@@ -221,11 +221,11 @@ export const LiveView: React.FC = () => {
               >
                 {msg.user}:
               </span>
-              <span className="text-gray-300">{msg.text}</span>
+              <span className="text-kodo-text-main">{msg.text}</span>
             </div>
           ))}
           <div className="text-center py-2">
-            <span className="text-[10px] text-gray-500 bg-kodo-slate px-2 py-1 rounded-full">
+            <span className="text-[10px] text-kodo-content-dim bg-kodo-slate px-2 py-1 rounded-full">
               Welcome to the chat room!
             </span>
           </div>
@@ -253,7 +253,7 @@ export const LiveView: React.FC = () => {
             </Button>
           </div>
           <div className="flex justify-between mt-2 px-1">
-            <span className="text-[10px] text-gray-500">
+            <span className="text-[10px] text-kodo-content-dim">
               Balance: 420 $VEZA
             </span>
             <span

apps/web/src/components/views/StudioView.tsx

@@ -56,7 +56,7 @@ export const StudioView: React.FC<StudioViewProps> = ({
           <h2 className="text-3xl font-display font-bold text-white mb-2">
             CLOUD STUDIO
           </h2>
-          <p className="text-gray-400 font-mono text-sm">
+          <p className="text-kodo-content-dim font-mono text-sm">
             Manage assets, process audio, and sync devices.
           </p>
         </div>
@@ -70,10 +70,10 @@ export const StudioView: React.FC<StudioViewProps> = ({
           </Button>
           <div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-3">
             <Cloud className="w-4 h-4 text-kodo-cyan" />
-            <div className="w-32 h-2 bg-gray-700 rounded-full overflow-hidden">
+            <div className="w-32 h-2 bg-kodo-steel rounded-full overflow-hidden">
               <div className="w-[65%] h-full bg-kodo-cyan"></div>
             </div>
-            <span className="text-xs font-mono text-gray-400">
+            <span className="text-xs font-mono text-kodo-content-dim">
               65GB / 100GB
             </span>
           </div>
@@ -109,7 +109,7 @@ export const StudioView: React.FC<StudioViewProps> = ({
           />
 
           <div className="mt-auto p-4 bg-kodo-ink rounded-xl border border-kodo-steel">
-            <h4 className="text-xs font-bold text-gray-400 uppercase mb-2">
+            <h4 className="text-xs font-bold text-kodo-content-dim uppercase mb-2">
               Quick Actions
             </h4>
             <div className="space-y-2">
@@ -161,7 +161,7 @@ const NavButton: React.FC<{
 }> = ({ active, onClick, icon, label }) => (
   <button
     onClick={onClick}
-    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-gray-400 hover:text-white hover:bg-white/5 border border-transparent'}`}
+    className={`w-full flex items-center gap-3 px-4 py-3 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'}`}
   >
     {icon}
     {label}

apps/web/src/components/views/UploadView.tsx

@@ -130,7 +130,7 @@ export const UploadView: React.FC = () => {
       <h2 className="text-3xl font-display font-bold text-white mb-2">
         UPLOAD STUDIO
       </h2>
-      <p className="text-gray-400 font-mono text-sm mb-8">
+      <p className="text-kodo-content-dim font-mono text-sm mb-8">
         Publish your sounds to the Veza Network.
       </p>
 
@@ -144,12 +144,12 @@ export const UploadView: React.FC = () => {
         ].map((s, i) => (
           <div key={s.num} className="flex items-center gap-3">
             <div
-              className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${step >= s.num ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-gray-500'}`}
+              className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${step >= s.num ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
             >
               {step > s.num ? <Check className="w-5 h-5" /> : s.num}
             </div>
             <span
-              className={`${step >= s.num ? 'text-white' : 'text-gray-600'} font-medium hidden md:block`}
+              className={`${step >= s.num ? 'text-white' : 'text-kodo-content-dim'} font-medium hidden md:block`}
             >
               {s.label}
             </span>
@@ -217,7 +217,7 @@ export const UploadView: React.FC = () => {
 
                 <div className="mt-auto">
                   <div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel flex justify-between items-center">
-                    <div className="text-sm text-gray-400">
+                    <div className="text-sm text-kodo-content-dim">
                       {allCompleted ? (
                         <span className="text-kodo-lime flex items-center gap-2">
                           <Check className="w-4 h-4" /> All files uploaded
@@ -262,7 +262,7 @@ export const UploadView: React.FC = () => {
             <h3 className="text-xl font-bold text-white mb-4">
               Ready to Publish
             </h3>
-            <p className="text-gray-400 mb-8 max-w-md">
+            <p className="text-kodo-content-dim mb-8 max-w-md">
               Your tracks have been metadata tagged and are ready for
               distribution on the Veza Network.
             </p>