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:
@@ -55,38 +55,38 @@ export function SessionDocView({
|
||||
currentPushStatus === 'sent'
|
||||
? 'border-emerald-400/20 bg-emerald-400/5'
|
||||
: currentPushStatus === 'pending_retry'
|
||||
? 'border-amber-400/20 bg-amber-400/5'
|
||||
: 'border-rose-500/20 bg-rose-500/5'
|
||||
? 'border-warning/20 bg-warning/5'
|
||||
: 'border-danger/20 bg-rose-500/5'
|
||||
}`}
|
||||
>
|
||||
{currentPushStatus === 'sent' && (
|
||||
<>
|
||||
<CheckCircle2 size={16} className="text-emerald-400 shrink-0" />
|
||||
<span className="text-sm text-emerald-400">
|
||||
<CheckCircle2 size={16} className="text-success shrink-0" />
|
||||
<span className="text-sm text-success">
|
||||
Documentation pushed to ticket {ticketId ? `#${ticketId}` : ''}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{currentPushStatus === 'pending_retry' && (
|
||||
<>
|
||||
<Loader2 size={16} className="text-amber-400 shrink-0 animate-spin" />
|
||||
<span className="text-sm text-amber-400">
|
||||
<Loader2 size={16} className="text-warning shrink-0 animate-spin" />
|
||||
<span className="text-sm text-warning">
|
||||
Documentation queued for push — will sync shortly
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{currentPushStatus === 'failed' && (
|
||||
<>
|
||||
<AlertTriangle size={16} className="text-rose-500 shrink-0" />
|
||||
<AlertTriangle size={16} className="text-danger shrink-0" />
|
||||
<div className="flex-1">
|
||||
<span className="text-sm text-rose-500">
|
||||
<span className="text-sm text-danger">
|
||||
Failed to push to ticket{currentPushError ? ` — ${currentPushError}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRetry}
|
||||
disabled={retrying}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-500 hover:bg-rose-500/20 transition-colors disabled:opacity-50"
|
||||
className="flex items-center gap-1.5 rounded-lg bg-danger-dim px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{retrying ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
|
||||
Retry
|
||||
@@ -98,9 +98,9 @@ export function SessionDocView({
|
||||
|
||||
{/* Member mapping warning */}
|
||||
{memberMappingWarning && (
|
||||
<div className="rounded-xl border border-blue-400/20 bg-blue-400/5 px-4 py-3 flex items-start gap-3">
|
||||
<Info size={16} className="text-blue-400 shrink-0 mt-0.5" />
|
||||
<span className="text-sm text-blue-400">
|
||||
<div className="rounded-xl border border-accent/20 bg-accent/5 px-4 py-3 flex items-start gap-3">
|
||||
<Info size={16} className="text-accent shrink-0 mt-0.5" />
|
||||
<span className="text-sm text-accent">
|
||||
Time entry was not created — {memberMappingWarning} Session timing is included in the ticket note.
|
||||
</span>
|
||||
</div>
|
||||
@@ -137,12 +137,12 @@ export function SessionDocView({
|
||||
|
||||
{/* Outcome */}
|
||||
{(documentation.resolution_summary || documentation.escalation_reason) && (
|
||||
<div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-emerald-500' : 'border-l-amber-500'}`}>
|
||||
<div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-success' : 'border-l-warning'}`}>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{documentation.resolution_summary ? (
|
||||
<CheckCircle2 size={14} className="text-emerald-400" />
|
||||
<CheckCircle2 size={14} className="text-success" />
|
||||
) : (
|
||||
<ArrowUpRight size={14} className="text-amber-400" />
|
||||
<ArrowUpRight size={14} className="text-warning" />
|
||||
)}
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
|
||||
{documentation.resolution_summary ? 'Resolved' : 'Escalated'}
|
||||
@@ -202,8 +202,8 @@ export function SessionDocView({
|
||||
size={20}
|
||||
className={
|
||||
(currentRating ?? 0) >= star
|
||||
? 'fill-amber-400 text-amber-400'
|
||||
: 'text-muted-foreground hover:text-amber-400'
|
||||
? 'fill-warning text-warning'
|
||||
: 'text-muted-foreground hover:text-warning'
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user