chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: replace hardcoded hex values with Tailwind semantic tokens

Browse Source 
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/flowpilot/SessionTicketCard.tsx
View File

@@ -36,7 +36,7 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
return (
<div className="rounded-xl border border-primary/20 bg-primary/5 p-3 space-y-2">
<div className="flex items-start justify-between">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170]">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted">
Linked Ticket
</h4>
{ticketUrl && (
@@ -44,7 +44,7 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
href={ticketUrl}
target="_blank"
rel="noopener noreferrer"
className="text-[#848b9b] hover:text-[#22d3ee] transition-colors"
className="text-muted-foreground hover:text-primary transition-colors"
title="Open in ConnectWise"
>
<ExternalLink size={12} />
@@ -52,14 +52,14 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
)}
</div>
<p className="text-sm font-semibold text-[#e2e5eb]">
<span className="text-[#22d3ee]">#{ticketId}</span>
<p className="text-sm font-semibold text-foreground">
<span className="text-primary">#{ticketId}</span>
{ticket?.summary && (
<span> — {ticket.summary}</span>
)}
</p>
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#848b9b]">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
{company?.name && (
<span className="flex items-center gap-1">
<Building2 size={10} />
@@ -68,33 +68,33 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
)}
{ticket?.priority && (
<>
<span className="text-[#5a6170]">&bull;</span>
<span className="text-text-muted">&bull;</span>
<span>{ticket.priority}</span>
</>
)}
{ticket?.status && (
<>
<span className="text-[#5a6170]">&bull;</span>
<span className="text-text-muted">&bull;</span>
<span>{ticket.status}</span>
</>
)}
</div>
{configs && configs.length > 0 && (
<div className="border-t border-[#1e2130]/50 pt-2 mt-2">
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-[#5a6170] mb-1">
<div className="border-t border-border/50 pt-2 mt-2">
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-text-muted mb-1">
Devices
</p>
<div className="space-y-0.5">
{configs.slice(0, 3).map((cfg, i) => (
<div key={i} className="flex items-center gap-1.5 text-xs text-[#848b9b]">
<div key={i} className="flex items-center gap-1.5 text-xs text-muted-foreground">
<Cpu size={10} />
<span>{cfg.device_identifier}</span>
{cfg.type && <span className="text-[#5a6170]">({cfg.type})</span>}
{cfg.type && <span className="text-text-muted">({cfg.type})</span>}
</div>
))}
{configs.length > 3 && (
<p className="text-[0.625rem] text-[#5a6170]">
<p className="text-[0.625rem] text-text-muted">
+{configs.length - 3} more
</p>
)}