From 2faaaf7fa46919e6f4d210902e5d3b02d6cd2640 Mon Sep 17 00:00:00 2001
From: sohni-tagirisa <248822596+sohni-tagirisa@users.noreply.github.com>
Date: Mon, 22 Jun 2026 20:04:58 -0700
Subject: [PATCH] frontend: replace hardcoded gold hex literals with brand
 tokens

Swap 41 bracket-literal Tailwind utilities (#FDCE49/#DFA84A/#FFD966)
for the existing pdd.gold / pdd.goldActive / pdd.goldHover theme tokens
across App.tsx and 5 components. Opacity (/20, /60), gradient (from-/to-)
and hover: variants preserved. No visual change; brand color now lives
solely in index.html, unblocking the epic/1560 palette swap.

Closes #1717

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 pdd/frontend/App.tsx                          | 22 +++++++++----------
 .../components/BatchFilterDropdown.tsx        |  4 ++--
 pdd/frontend/components/JobDashboard.tsx      | 10 ++++-----
 pdd/frontend/components/ModuleNode.tsx        |  2 +-
 pdd/frontend/components/PromptSelector.tsx    |  2 +-
 pdd/frontend/components/SyncOptionsModal.tsx  |  4 ++--
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/pdd/frontend/App.tsx b/pdd/frontend/App.tsx
index 7344c564a2..7ee5dfe9eb 100644
--- a/pdd/frontend/App.tsx
+++ b/pdd/frontend/App.tsx
@@ -859,12 +859,12 @@ const App: React.FC = () => {
 
             {/* CENTER: Main workflow buttons with gold border */}
             <div className="flex-1 flex justify-center">
-              <div className="flex gap-1 sm:gap-1.5 p-1.5 rounded-xl border-2 border-[#FDCE49]/60 bg-surface-800/40 max-w-fit overflow-x-auto scrollbar-hide">
+              <div className="flex gap-1 sm:gap-1.5 p-1.5 rounded-xl border-2 border-pdd-gold/60 bg-surface-800/40 max-w-fit overflow-x-auto scrollbar-hide">
                 <button
                   onClick={() => setView('devunits')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 ${
                     view === 'devunits'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-lg'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-lg'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/80 hover:shadow-[0_0_10px_rgba(253,206,73,0.3)]'
                   }`}
                 >
@@ -874,7 +874,7 @@ const App: React.FC = () => {
                   onClick={() => setView('bug')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 ${
                     view === 'bug'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-lg'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-lg'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/80 hover:shadow-[0_0_10px_rgba(253,206,73,0.3)]'
                   }`}
                 >
@@ -884,7 +884,7 @@ const App: React.FC = () => {
                   onClick={() => setView('fix')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 ${
                     view === 'fix'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-lg'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-lg'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/80 hover:shadow-[0_0_10px_rgba(253,206,73,0.3)]'
                   }`}
                 >
@@ -896,7 +896,7 @@ const App: React.FC = () => {
                   onClick={() => setView('change')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 ${
                     view === 'change'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-lg'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-lg'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/80 hover:shadow-[0_0_10px_rgba(253,206,73,0.3)]'
                   }`}
                 >
@@ -908,7 +908,7 @@ const App: React.FC = () => {
                   onClick={() => setView('settings')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 ${
                     view === 'settings'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-lg'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-lg'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/80 hover:shadow-[0_0_10px_rgba(253,206,73,0.3)]'
                   }`}
                 >
@@ -1056,7 +1056,7 @@ const App: React.FC = () => {
               <div className="px-4 py-3 border-t border-surface-700/50 bg-surface-800/30">
                 <button
                   onClick={() => setShowRemotePanel(false)}
-                  className="w-full px-4 py-2 bg-[#DFA84A] hover:bg-[#FDCE49] text-surface-900 rounded-lg text-sm font-medium transition-colors"
+                  className="w-full px-4 py-2 bg-pdd-goldActive hover:bg-pdd-gold text-surface-900 rounded-lg text-sm font-medium transition-colors"
                 >
                   Done
                 </button>
@@ -1152,8 +1152,8 @@ const App: React.FC = () => {
           {view === 'devunits' && (
             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-[#FDCE49]/20 flex items-center justify-center">
-                  <Squares2X2Icon className="w-5 h-5 text-[#FDCE49]" />
+                <div className="w-10 h-10 rounded-xl bg-pdd-gold/20 flex items-center justify-center">
+                  <Squares2X2Icon className="w-5 h-5 text-pdd-gold" />
                 </div>
                 <div>
                   <h2 className="text-lg sm:text-xl font-semibold text-white">Dev Units</h2>
@@ -1166,7 +1166,7 @@ const App: React.FC = () => {
                   onClick={() => setDevUnitsSubView('graph')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 ${
                     devUnitsSubView === 'graph'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-md'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-md'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/50'
                   }`}
                 >
@@ -1176,7 +1176,7 @@ const App: React.FC = () => {
                   onClick={() => setDevUnitsSubView('list')}
                   className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 ${
                     devUnitsSubView === 'list'
-                      ? 'bg-[#DFA84A] text-surface-900 shadow-md'
+                      ? 'bg-pdd-goldActive text-surface-900 shadow-md'
                       : 'text-surface-300 hover:text-white hover:bg-surface-700/50'
                   }`}
                 >
diff --git a/pdd/frontend/components/BatchFilterDropdown.tsx b/pdd/frontend/components/BatchFilterDropdown.tsx
index 3db2b9e9cb..be07c343d7 100644
--- a/pdd/frontend/components/BatchFilterDropdown.tsx
+++ b/pdd/frontend/components/BatchFilterDropdown.tsx
@@ -85,7 +85,7 @@ const BatchFilterDropdown: React.FC<BatchFilterDropdownProps> = ({
             className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1.5 transition-colors ${
               disabled || selectedRemaining === 0
                 ? 'bg-surface-700 text-surface-500 cursor-not-allowed'
-                : 'bg-gradient-to-r from-[#FDCE49] to-[#DFA84A] hover:from-[#FFD966] hover:to-[#FDCE49] text-surface-900'
+                : 'bg-gradient-to-r from-pdd-gold to-pdd-goldActive hover:from-pdd-goldHover hover:to-pdd-gold text-surface-900'
             }`}
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -177,7 +177,7 @@ const BatchFilterDropdown: React.FC<BatchFilterDropdownProps> = ({
                     className={`mt-2 w-full px-3 py-1.5 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 transition-colors ${
                       disabled || remaining === 0
                         ? 'bg-surface-700 text-surface-500 cursor-not-allowed'
-                        : 'bg-gradient-to-r from-[#FDCE49] to-[#DFA84A] hover:from-[#FFD966] hover:to-[#FDCE49] text-surface-900'
+                        : 'bg-gradient-to-r from-pdd-gold to-pdd-goldActive hover:from-pdd-goldHover hover:to-pdd-gold text-surface-900'
                     }`}
                   >
                     <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/pdd/frontend/components/JobDashboard.tsx b/pdd/frontend/components/JobDashboard.tsx
index f5f857d371..d0bdb95b2e 100644
--- a/pdd/frontend/components/JobDashboard.tsx
+++ b/pdd/frontend/components/JobDashboard.tsx
@@ -86,7 +86,7 @@ const JobDashboard: React.FC<JobDashboardProps> = ({
             {/* Toggle icon with gold accent when jobs active */}
             <div className={`w-7 h-7 rounded-lg flex items-center justify-center transition-all ${
               activeJobs.length > 0
-                ? 'bg-[#FDCE49]/20 text-[#FDCE49]'
+                ? 'bg-pdd-gold/20 text-pdd-gold'
                 : isCollapsed
                   ? 'bg-accent-500/20 text-accent-400'
                   : 'bg-surface-700 text-white'
@@ -118,8 +118,8 @@ const JobDashboard: React.FC<JobDashboardProps> = ({
 
             {/* Active jobs badge with gold styling */}
             {activeJobs.length > 0 && (
-              <span className="px-2.5 py-0.5 text-xs font-medium bg-[#FDCE49]/20 text-[#FDCE49] rounded-full flex items-center gap-1.5 animate-pulse">
-                <span className="w-1.5 h-1.5 rounded-full bg-[#FDCE49]" />
+              <span className="px-2.5 py-0.5 text-xs font-medium bg-pdd-gold/20 text-pdd-gold rounded-full flex items-center gap-1.5 animate-pulse">
+                <span className="w-1.5 h-1.5 rounded-full bg-pdd-gold" />
                 {activeJobs.length} running
               </span>
             )}
@@ -194,8 +194,8 @@ const JobDashboard: React.FC<JobDashboardProps> = ({
             {/* Active jobs section - Expandable cards */}
             {activeJobs.length > 0 && (
               <div className="mb-4">
-                <h3 className="text-xs font-medium text-[#FDCE49] uppercase tracking-wider mb-3 flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-[#FDCE49] animate-pulse" />
+                <h3 className="text-xs font-medium text-pdd-gold uppercase tracking-wider mb-3 flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-pdd-gold animate-pulse" />
                   Active Jobs
                 </h3>
                 <div className="space-y-2">
diff --git a/pdd/frontend/components/ModuleNode.tsx b/pdd/frontend/components/ModuleNode.tsx
index 46ceae040f..ab0a357c75 100644
--- a/pdd/frontend/components/ModuleNode.tsx
+++ b/pdd/frontend/components/ModuleNode.tsx
@@ -150,7 +150,7 @@ const ModuleNode: React.FC<NodeProps<ModuleNodeData>> = ({ data, selected, xPos,
           {hasPrompt && onRunSync && !editMode && (
             <button
               onClick={handleSyncClick}
-              className="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-[#FDCE49] to-[#DFA84A] hover:from-[#FFD966] hover:to-[#FDCE49] rounded-full flex items-center justify-center shadow-lg z-20 transition-all hover:scale-110"
+              className="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-pdd-gold to-pdd-goldActive hover:from-pdd-goldHover hover:to-pdd-gold rounded-full flex items-center justify-center shadow-lg z-20 transition-all hover:scale-110"
               title="Run pdd sync (prompt → code)"
             >
               <svg className="w-3 h-3 text-surface-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/pdd/frontend/components/PromptSelector.tsx b/pdd/frontend/components/PromptSelector.tsx
index 473b9aabda..0f771c46bc 100644
--- a/pdd/frontend/components/PromptSelector.tsx
+++ b/pdd/frontend/components/PromptSelector.tsx
@@ -68,7 +68,7 @@ const PromptCard: React.FC<{
             {onSyncClick && (
               <button
                 onClick={handleSyncClick}
-                className="flex-shrink-0 w-7 h-7 bg-gradient-to-br from-[#FDCE49] to-[#DFA84A] hover:from-[#FFD966] hover:to-[#FDCE49] rounded-full flex items-center justify-center shadow-lg transition-all hover:scale-110"
+                className="flex-shrink-0 w-7 h-7 bg-gradient-to-br from-pdd-gold to-pdd-goldActive hover:from-pdd-goldHover hover:to-pdd-gold rounded-full flex items-center justify-center shadow-lg transition-all hover:scale-110"
                 title="Run pdd sync (prompt → code)"
               >
                 <svg className="w-3.5 h-3.5 text-surface-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/pdd/frontend/components/SyncOptionsModal.tsx b/pdd/frontend/components/SyncOptionsModal.tsx
index 8b29c9aa7a..24d79f8873 100644
--- a/pdd/frontend/components/SyncOptionsModal.tsx
+++ b/pdd/frontend/components/SyncOptionsModal.tsx
@@ -83,7 +83,7 @@ const SyncOptionsModal: React.FC<SyncOptionsModalProps> = ({
         {/* Header */}
         <div className="px-5 py-4 border-b border-surface-700/50">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#FDCE49] to-[#DFA84A] flex items-center justify-center">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-pdd-gold to-pdd-goldActive flex items-center justify-center">
               <svg className="w-5 h-5 text-surface-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
               </svg>
@@ -131,7 +131,7 @@ const SyncOptionsModal: React.FC<SyncOptionsModalProps> = ({
           <button
             type="button"
             onClick={handleConfirm}
-            className="w-full sm:w-auto px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-[#FDCE49] to-[#DFA84A] hover:from-[#FFD966] hover:to-[#FDCE49] text-surface-900 shadow-lg transition-all flex items-center justify-center gap-2"
+            className="w-full sm:w-auto px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-pdd-gold to-pdd-goldActive hover:from-pdd-goldHover hover:to-pdd-gold text-surface-900 shadow-lg transition-all flex items-center justify-center gap-2"
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />