refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens
Replace hardcoded Tailwind color utilities with semantic CSS variable tokens across 31 files in the FlowPilot, Assistant Chat, and Script Builder feature communities — the areas graphify identified as design-system-free. - text-blue-400 → text-accent, bg-blue-500/10 → bg-accent-dim, border-blue-500/20 → border-accent/20 - text-amber-400 → text-warning, bg-amber-400/10 → bg-warning-dim, border-l-amber-500 → border-l-warning - text-rose-400/500 → text-danger, bg-rose-500/10 → bg-danger-dim - text-emerald-400 → text-success, bg-emerald-500/10 → bg-success-dim, border-l-emerald-500 → border-l-success - bg-white/[0.08] → bg-elevated (opacity hack → semantic surface token) - bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent (no gradient surfaces) - bg-[#60a5fa] → bg-accent (hard-coded hex removed) Also adds graphify-out/ to .gitignore. Theme resilience: accent color has changed twice in 5 weeks. Semantic tokens mean the next change is a 1-line edit in index.css, not 110 grep-and-replace. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,9 +9,9 @@ interface AISessionListItemProps {
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
active: { icon: Clock, color: 'text-primary', label: 'Active' },
|
||||
paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
|
||||
resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
|
||||
escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
|
||||
paused: { icon: Pause, color: 'text-warning', label: 'Paused' },
|
||||
resolved: { icon: CheckCircle2, color: 'text-success', label: 'Resolved' },
|
||||
escalated: { icon: ArrowUpRight, color: 'text-warning', label: 'Escalated' },
|
||||
abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
|
||||
} as const
|
||||
|
||||
@@ -64,7 +64,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
|
||||
</div>
|
||||
</div>
|
||||
{session.session_rating && (
|
||||
<span className="font-sans text-xs text-xs text-amber-400">
|
||||
<span className="font-sans text-xs text-xs text-warning">
|
||||
{'★'.repeat(session.session_rating)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user