From acf9155ce2ba159d5999df69e09df2488ecca1e6 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sun, 19 Apr 2026 12:02:35 +0300
Subject: [PATCH] style: step 8 - uniform text tokens in Scanner and
 AIOnboarding

---
 .../plans/2026-04-19-ui-uniformity.md         |  2 +-
 frontend/components/AIOnboarding.tsx          | 28 +++++++++----------
 frontend/components/Scanner.tsx               |  6 ++--
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/superpowers/plans/2026-04-19-ui-uniformity.md b/docs/superpowers/plans/2026-04-19-ui-uniformity.md
index 06969df9..44c6c758 100644
--- a/docs/superpowers/plans/2026-04-19-ui-uniformity.md
+++ b/docs/superpowers/plans/2026-04-19-ui-uniformity.md
@@ -54,7 +54,7 @@ Mark each step `[x]` when complete. Commit the file with the step.
 - [x] **Step 5** — Fix: `app/admin/page.tsx` + `app/logs/page.tsx` text tokens
 - [x] **Step 6** — Fix: `components/AdminOverlay.tsx` text tokens
 - [x] **Step 7** — Fix: `components/IdentityCheckOverlay.tsx` text tokens
-- [ ] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx`
+- [x] **Step 8** — Fix: `components/Scanner.tsx` + `components/AIOnboarding.tsx`
 - [ ] **Step 9** — Fix: `components/admin/` (all 5 files)
 - [ ] **Step 10** — Fix: Modals (`CreateUserModal`, `ConfirmationModal`, `CategoryCreationModal`, `ItemComparisonModal`)
 - [ ] **Step 11** — Fix: `lib/` and remaining components
diff --git a/frontend/components/AIOnboarding.tsx b/frontend/components/AIOnboarding.tsx
index 0204a597..7065ded6 100644
--- a/frontend/components/AIOnboarding.tsx
+++ b/frontend/components/AIOnboarding.tsx
@@ -255,7 +255,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             <button
               onClick={() => setMode('item')}
               aria-label="Select Discovery Mode"
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-slate-300'}`}
+              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
             >
               <Package size={18} />
               <span className="text-xs">Discovery Mode</span>
@@ -263,7 +263,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             <button
               onClick={() => setMode('box')}
               aria-label="Select Box Lookup mode"
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-slate-300'}`}
+              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
             >
               <Layers size={18} />
               <span className="text-xs">Box Lookup</span>
@@ -274,7 +274,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             <div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary">
                <Camera size={32} />
             </div>
-            <p className="text-slate-300 mb-2 text-center font-bold">
+            <p className="text-secondary mb-2 text-center font-bold">
                {mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'}
             </p>
             <p className="text-xs text-muted px-8 text-center leading-relaxed font-bold">
@@ -297,7 +297,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
               onClick={() => fileInputRef.current?.click()}
               data-testid="manual-entry-tab"
               aria-label="Upload photo from device"
-              className="flex flex-col items-center justify-center gap-2 bg-surface text-slate-200 border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              className="flex flex-col items-center justify-center gap-2 bg-surface text-secondary border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
               <ImageIcon size={24} />
               <span className="text-sm">Upload Photo</span>
@@ -415,7 +415,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
               <textarea
                 value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
                 onChange={(e) => updateEditingItem({ Item: e.target.value })}
-                className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
+                className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
                 placeholder="SSD, SFP, Cable..."
               />
             </div>
@@ -428,7 +428,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                   list="onboarding-categories"
                   value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''} 
                   onChange={(e) => updateEditingItem({ Category: e.target.value })}
-                  className="bg-transparent w-full font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full font-bold outline-none text-secondary"
                   placeholder="e.g. storage"
                 />
                 <datalist id="onboarding-categories">
@@ -443,7 +443,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                   value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''} 
                   list="onboarding-types"
                   onChange={(e) => updateEditingItem({ Type: e.target.value })}
-                  className="bg-transparent w-full text-sm font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full text-sm font-bold outline-none text-secondary"
                   placeholder="e.g. spare parts"
                 />
                 <datalist id="onboarding-types">
@@ -458,7 +458,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                 <input 
                   value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''} 
                   onChange={(e) => updateEditingItem({ Color: e.target.value })}
-                  className="bg-transparent w-full font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full font-bold outline-none text-secondary"
                   placeholder="e.g. Aqua"
                 />
               </div>
@@ -482,7 +482,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
               <textarea 
                 value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''} 
                 onChange={(e) => updateEditingItem({ Description: e.target.value })}
-                className="bg-transparent w-full text-sm leading-tight outline-none resize-none h-8 text-slate-300 py-0"
+                className="bg-transparent w-full text-sm leading-tight outline-none resize-none h-8 text-secondary py-0"
                 placeholder="Product description..."
               />
             </div>
@@ -493,7 +493,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                 <input 
                   value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''} 
                   onChange={(e) => updateEditingItem({ Connector: e.target.value })}
-                  className="bg-transparent w-full font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full font-bold outline-none text-secondary"
                   placeholder="e.g. LC/UPC"
                 />
               </div>
@@ -502,7 +502,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                 <input 
                   value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''} 
                   onChange={(e) => updateEditingItem({ Size: e.target.value })}
-                  className="bg-transparent w-full text-sm font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full text-sm font-bold outline-none text-secondary"
                   placeholder="e.g. 5m / 10G"
                 />
               </div>
@@ -524,7 +524,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                 <input 
                   value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''} 
                   onChange={(e) => updateEditingItem({ PartNr: e.target.value })}
-                  className="bg-transparent w-full font-mono text-sm font-bold outline-none text-slate-200"
+                  className="bg-transparent w-full font-mono text-sm font-bold outline-none text-secondary"
                   placeholder="ID code..."
                 />
               </div>
@@ -534,7 +534,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                   type="number"
                   value={extractedItems[editingIndex].quantity || 1} 
                   onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })}
-                  className="bg-transparent w-full font-black text-base outline-none text-slate-200"
+                  className="bg-transparent w-full font-black text-base outline-none text-secondary"
                 />
               </div>
             </div>
@@ -584,7 +584,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                     <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
                       <Package size={16} />
                     </div>
-                    <h4 className="font-black text-slate-100 truncate">{item.Item || item.name || "Unknown Item"}</h4>
+                    <h4 className="font-black text-secondary truncate">{item.Item || item.name || "Unknown Item"}</h4>
                   </div>
                   <div className="flex gap-2">
                     <span className="text-xs font-black px-2 py-0.5 bg-slate-800 text-secondary rounded-md">
diff --git a/frontend/components/Scanner.tsx b/frontend/components/Scanner.tsx
index 07ff0d18..d2c6bd57 100644
--- a/frontend/components/Scanner.tsx
+++ b/frontend/components/Scanner.tsx
@@ -278,14 +278,14 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
         )}
 
         {!isStarted && !error && (
-          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-slate-300 gap-4">
+          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary gap-4">
             <RefreshCw className="w-8 h-8 animate-spin text-primary" />
             <p className="text-sm font-medium">Initializing camera...</p>
           </div>
         )}
 
         {error && (
-          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-slate-300 px-8 text-center gap-4">
+          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary px-8 text-center gap-4">
             <XCircle className="w-10 h-10 text-red-500" />
             <div>
               <p className="font-bold text-white">Camera Error</p>
@@ -334,7 +334,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
                 {ocrProcessing ? (
                   <>
                     <RefreshCw className="animate-spin text-primary" size={18} />
-                    <span className="text-xs font-black text-slate-200 leading-none">Analyzing</span>
+                    <span className="text-xs font-black text-secondary leading-none">Analyzing</span>
                   </>
                 ) : (
                   <>