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

8
frontend/src/components/script-builder/ScriptCodeBlock.tsx
View File

@@ -59,7 +59,7 @@ export function ScriptCodeBlock({
{filename || 'script'}
</span>
{lineCount != null && (
<span className="font-mono text-[0.625rem] text-[#848b9b] ml-2 shrink-0">
<span className="font-mono text-[0.625rem] text-muted-foreground ml-2 shrink-0">
{lineCount} lines
</span>
)}
@@ -85,7 +85,7 @@ export function ScriptCodeBlock({
{previewLines}
</SyntaxHighlighter>
{remainingLines > 0 && (
<div className="px-3 pb-2 font-mono text-[0.625rem] text-[#5a6170]">
<div className="px-3 pb-2 font-mono text-[0.625rem] text-text-muted">
{"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
</div>
)}
@@ -97,7 +97,7 @@ export function ScriptCodeBlock({
onClick={onViewFull}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all",
"bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]"
"bg-primary text-white hover:brightness-110 active:scale-[0.98]"
)}
>
<Eye size={14} />
@@ -107,7 +107,7 @@ export function ScriptCodeBlock({
onClick={handleCopy}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
"bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]"
"bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
)}
>
{copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}