refactor: replace hardcoded hex values with Tailwind semantic tokens
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:
@@ -35,8 +35,8 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 py-1">
|
||||
<Loader2 size={10} className="animate-spin text-[#848b9b]" />
|
||||
<span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">Loading similar sessions…</span>
|
||||
<Loader2 size={10} className="animate-spin text-muted-foreground" />
|
||||
<span className="text-[0.625rem] text-muted-foreground font-sans text-xs">Loading similar sessions…</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -47,7 +47,7 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
Similar Past Sessions
|
||||
</h4>
|
||||
{sessions.map((session) => (
|
||||
@@ -57,21 +57,21 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
|
||||
className="card-interactive p-3 block hover:border-[rgba(255,255,255,0.12)] transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-xs text-[#e2e5eb] line-clamp-2">
|
||||
<p className="text-xs text-foreground line-clamp-2">
|
||||
{session.problem_summary || 'Untitled session'}
|
||||
</p>
|
||||
<span className="text-[0.625rem] font-sans text-xs text-[#22d3ee] shrink-0">
|
||||
<span className="text-[0.625rem] font-sans text-xs text-primary shrink-0">
|
||||
{Math.round(session.similarity * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
{session.resolution_summary && (
|
||||
<p className="text-[0.625rem] text-[#848b9b] mt-1 line-clamp-1">
|
||||
<p className="text-[0.625rem] text-muted-foreground mt-1 line-clamp-1">
|
||||
✓ {session.resolution_summary}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
{session.problem_domain && (
|
||||
<span className="text-[0.5rem] font-sans text-xs uppercase tracking-wider text-[#848b9b]/70">
|
||||
<span className="text-[0.5rem] font-sans text-xs uppercase tracking-wider text-muted-foreground/70">
|
||||
{session.problem_domain}
|
||||
</span>
|
||||
)}
|
||||
@@ -82,7 +82,7 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
|
||||
? 'text-emerald-400'
|
||||
: session.status === 'escalated'
|
||||
? 'text-amber-400'
|
||||
: 'text-[#848b9b]'
|
||||
: 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{session.status}
|
||||
|
||||
Reference in New Issue
Block a user