From dd816783e76131a9d1966a3d654062dd6e64d83f Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Tue, 26 May 2026 17:29:23 +0100
Subject: [PATCH] fix(ui): replace hardcoded colors in persona components with
 semantic tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PersonaPersonality: bg-blue-500/green-500/red-500 → primary/brand-success/destructive
PersonaEditor: bg-gray-200/text-gray-600 → bg-primary/20/text-primary
PersonaGenerationPrompts: text-slate-500/400 → text-muted-foreground
PersonaSidebar: bg-green-500/80 → bg-brand-success/80
PersonaProfile: bg-green-600 → bg-brand-success

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/persona/PersonaEditor.tsx            | 6 ++----
 src/components/persona/PersonaGenerationPrompts.tsx | 4 ++--
 src/components/persona/PersonaPersonality.tsx       | 6 +++---
 src/components/persona/PersonaProfile.tsx           | 2 +-
 src/components/persona/PersonaSidebar.tsx           | 2 +-
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/persona/PersonaEditor.tsx b/src/components/persona/PersonaEditor.tsx
index 6b2705f8..577a1dc0 100755
--- a/src/components/persona/PersonaEditor.tsx
+++ b/src/components/persona/PersonaEditor.tsx
@@ -340,10 +340,8 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit
           <Card>
             <CardContent className="p-6">
               <div className="flex items-center space-x-4 mb-6">
-                <div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center">
-                  <div className="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center">
-                    <span className="font-medium text-gray-600">{editedPersona.name?.charAt(0) || 'P'}</span>
-                  </div>
+                <div className="h-16 w-16 rounded-full bg-primary/20 flex items-center justify-center">
+                  <span className="font-medium text-primary text-xl">{editedPersona.name?.charAt(0) || 'P'}</span>
                 </div>
                 <div className="space-y-2">
                   <div>
diff --git a/src/components/persona/PersonaGenerationPrompts.tsx b/src/components/persona/PersonaGenerationPrompts.tsx
index 0148fb36..ce8d954c 100755
--- a/src/components/persona/PersonaGenerationPrompts.tsx
+++ b/src/components/persona/PersonaGenerationPrompts.tsx
@@ -13,8 +13,8 @@ export function PersonaGenerationPrompts({ persona }: PersonaGenerationPromptsPr
   if (!hasPrompts) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-center text-slate-500">
-          <FileText className="h-12 w-12 mx-auto mb-4 text-slate-400" />
+        <div className="text-center text-muted-foreground">
+          <FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground/60" />
           <h3 className="font-sf text-lg font-medium mb-2">Generation prompts not available</h3>
           <p className="text-sm">Generation prompts are not available for this persona.</p>
         </div>
diff --git a/src/components/persona/PersonaPersonality.tsx b/src/components/persona/PersonaPersonality.tsx
index 0a6936f6..c94cc0ff 100755
--- a/src/components/persona/PersonaPersonality.tsx
+++ b/src/components/persona/PersonaPersonality.tsx
@@ -64,7 +64,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span className="font-medium">{oceanData[1].value}%</span>
               </div>
               <div className="h-2 bg-secondary rounded-full overflow-hidden">
-                <div className="h-full bg-blue-500 rounded-full" style={{ width: `${oceanData[1].value}%` }}></div>
+                <div className="h-full bg-primary rounded-full" style={{ width: `${oceanData[1].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
                 {oceanData[1].value > 75 ? 'Highly organized and responsible' : 
@@ -79,7 +79,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span className="font-medium">{oceanData[2].value}%</span>
               </div>
               <div className="h-2 bg-secondary rounded-full overflow-hidden">
-                <div className="h-full bg-green-500 rounded-full" style={{ width: `${oceanData[2].value}%` }}></div>
+                <div className="h-full bg-brand-success rounded-full" style={{ width: `${oceanData[2].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
                 {oceanData[2].value > 75 ? 'Highly sociable and outgoing' : 
@@ -109,7 +109,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span className="font-medium">{oceanData[4].value}%</span>
               </div>
               <div className="h-2 bg-secondary rounded-full overflow-hidden">
-                <div className="h-full bg-red-500 rounded-full" style={{ width: `${oceanData[4].value}%` }}></div>
+                <div className="h-full bg-destructive rounded-full" style={{ width: `${oceanData[4].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
                 {oceanData[4].value > 75 ? 'Highly sensitive and prone to stress' : 
diff --git a/src/components/persona/PersonaProfile.tsx b/src/components/persona/PersonaProfile.tsx
index e27ff762..2d89dee9 100755
--- a/src/components/persona/PersonaProfile.tsx
+++ b/src/components/persona/PersonaProfile.tsx
@@ -307,7 +307,7 @@ export default function PersonaProfile() {
                     <Button
                       size="sm"
                       onClick={saveReviewedPersona}
-                      className="bg-green-600 hover:bg-green-700 text-white"
+                      className="bg-brand-success hover:bg-brand-success/90 text-white"
                     >
                       Save Revised Persona
                     </Button>
diff --git a/src/components/persona/PersonaSidebar.tsx b/src/components/persona/PersonaSidebar.tsx
index 2d4ff746..524cf8c4 100755
--- a/src/components/persona/PersonaSidebar.tsx
+++ b/src/components/persona/PersonaSidebar.tsx
@@ -38,7 +38,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
                 className="w-full h-full object-cover"
               />
             </div>
-            <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500/80 border-2 border-card" />
+            <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-brand-success/80 border-2 border-card" />
           </div>
           <div className="min-w-0">
             <h2