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

2
frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
View File

@@ -167,7 +167,7 @@ export function CodeModeEditor() {
beforeMount={handleEditorWillMount}
onMount={handleEditorDidMount}
loading={
<div className="flex h-full items-center justify-center bg-[#14161d]">
<div className="flex h-full items-center justify-center bg-card">
<Spinner size="sm" className="h-6 w-6 border-t-foreground" />
</div>
}

22
frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
View File

@@ -91,15 +91,15 @@ export function CodeModeToolbar({
}, [])
return (
<div className="flex items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-3 py-1.5">
<div className="flex items-center justify-between border-b border-border bg-card px-3 py-1.5">
<div className="flex items-center gap-2">
{/* Insert Node dropdown */}
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setInsertOpen(!insertOpen)}
className={cn(
'flex items-center gap-1 rounded-md border border-[#1e2130] px-2.5 py-1 text-xs font-medium text-[#848b9b]',
'hover:bg-accent hover:text-[#e2e5eb]'
'flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
<Plus className="h-3 w-3" />
@@ -107,24 +107,24 @@ export function CodeModeToolbar({
<ChevronDown className="h-3 w-3" />
</button>
{insertOpen && (
<div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-[#1e2130] bg-[#14161d] py-1 shadow-xl">
<div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
<button
onClick={() => { onInsertTemplate(NODE_TEMPLATES.decision); setInsertOpen(false) }}
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
>
<span className="h-2 w-2 rounded-full bg-blue-400" />
Decision
</button>
<button
onClick={() => { onInsertTemplate(NODE_TEMPLATES.action); setInsertOpen(false) }}
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
>
<span className="h-2 w-2 rounded-full bg-amber-400" />
Action
</button>
<button
onClick={() => { onInsertTemplate(NODE_TEMPLATES.solution); setInsertOpen(false) }}
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
>
<span className="h-2 w-2 rounded-full bg-emerald-400" />
Solution
@@ -139,8 +139,8 @@ export function CodeModeToolbar({
<div className="flex items-center gap-1.5 text-xs">
{isValidating ? (
<>
<Loader2 className="h-3 w-3 animate-spin text-[#848b9b]" />
<span className="text-[#848b9b]">Validating...</span>
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
<span className="text-muted-foreground">Validating...</span>
</>
) : isValid ? (
<>
@@ -173,8 +173,8 @@ export function CodeModeToolbar({
className={cn(
'flex items-center gap-1 rounded-md px-2 py-1 text-xs',
syntaxHelpOpen
? 'bg-accent text-[#e2e5eb]'
: 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
)}
>
<HelpCircle className="h-3 w-3" />

20
frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
View File

@@ -10,17 +10,17 @@ export function SyntaxHelpPanel({ open, onClose }: SyntaxHelpPanelProps) {
if (!open) return null
return (
<div className="flex h-full flex-col border-l border-[#1e2130] bg-[#14161d]">
<div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-2">
<span className="text-xs font-medium text-[#848b9b]">Syntax Reference</span>
<div className="flex h-full flex-col border-l border-border bg-card">
<div className="flex items-center justify-between border-b border-border px-3 py-2">
<span className="text-xs font-medium text-muted-foreground">Syntax Reference</span>
<button
onClick={onClose}
className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-muted-foreground"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-[#848b9b]">
<div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-muted-foreground">
<Section title="Node Structure">
<Code>{`---
id: node_id
@@ -82,7 +82,7 @@ Description paragraph.
function Section({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="mb-4">
<h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[#848b9b]">{title}</h4>
<h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h4>
{children}
</div>
)
@@ -91,8 +91,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
function Code({ children }: { children: string }) {
return (
<pre className={cn(
'mb-2 overflow-x-auto rounded-md border border-[#1e2130] bg-[#14161d] px-2 py-1.5',
'text-[10px] leading-relaxed text-[#848b9b] whitespace-pre'
'mb-2 overflow-x-auto rounded-md border border-border bg-card px-2 py-1.5',
'text-[10px] leading-relaxed text-muted-foreground whitespace-pre'
)}>
{children}
</pre>
@@ -102,8 +102,8 @@ function Code({ children }: { children: string }) {
function Row({ label, code }: { label: string; code: string }) {
return (
<div className="flex items-center justify-between py-0.5">
<span className="text-[#848b9b]">{label}</span>
<code className="rounded bg-accent px-1 py-0.5 text-[10px] text-[#848b9b]">{code}</code>
<span className="text-muted-foreground">{label}</span>
<code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
</div>
)
}