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

62
frontend/src/components/script-editor/ParameterCard.tsx
View File

@@ -55,29 +55,29 @@ export function ParameterCard({
}
return (
<div className="border border-[#1e2130] rounded-xl overflow-hidden">
<div className="border border-border rounded-xl overflow-hidden">
{/* Header */}
<button
type="button"
onClick={() => setExpanded(v => !v)}
className="w-full flex items-center gap-2 px-3 py-2.5 bg-[#14161d] hover:bg-[#191c25] transition-colors"
className="w-full flex items-center gap-2 px-3 py-2.5 bg-card hover:bg-input transition-colors"
>
<GripVertical size={14} className="text-[#848b9b]/50 shrink-0" />
{expanded ? <ChevronDown size={14} className="text-[#848b9b]" /> : <ChevronRight size={14} className="text-[#848b9b]" />}
<span className="text-sm font-medium text-[#e2e5eb] flex-1 text-left">
<GripVertical size={14} className="text-muted-foreground/50 shrink-0" />
{expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
<span className="text-sm font-medium text-foreground flex-1 text-left">
{param.label || param.key || `Parameter ${index + 1}`}
</span>
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b] uppercase">{param.type}</span>
<span className="font-sans text-xs text-[0.625rem] text-muted-foreground uppercase">{param.type}</span>
{param.required && <span className="text-red-400 text-xs">*</span>}
</button>
{/* Body */}
{expanded && (
<div className="px-3 py-3 space-y-3 border-t border-[#1e2130]">
<div className="px-3 py-3 space-y-3 border-t border-border">
{/* Row 1: key + label */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
<label className="text-xs text-muted-foreground mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
<Input
value={param.key}
onChange={e => update({ key: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })}
@@ -86,7 +86,7 @@ export function ParameterCard({
/>
</div>
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Label</label>
<label className="text-xs text-muted-foreground mb-1 block">Label</label>
<Input
value={param.label}
onChange={e => update({ label: e.target.value })}
@@ -99,12 +99,12 @@ export function ParameterCard({
{/* Row 2: type + group */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Type</label>
<label className="text-xs text-muted-foreground mb-1 block">Type</label>
<select
value={param.type}
onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
disabled={disabled}
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
>
{PARAM_TYPES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>
@@ -112,7 +112,7 @@ export function ParameterCard({
</select>
</div>
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Group (optional)</label>
<label className="text-xs text-muted-foreground mb-1 block">Group (optional)</label>
<Input
value={param.group ?? ''}
onChange={e => update({ group: e.target.value || null })}
@@ -125,7 +125,7 @@ export function ParameterCard({
{/* Row 3: placeholder + help text */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Placeholder</label>
<label className="text-xs text-muted-foreground mb-1 block">Placeholder</label>
<Input
value={param.placeholder ?? ''}
onChange={e => update({ placeholder: e.target.value || null })}
@@ -134,7 +134,7 @@ export function ParameterCard({
/>
</div>
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Help text</label>
<label className="text-xs text-muted-foreground mb-1 block">Help text</label>
<Input
value={param.help_text ?? ''}
onChange={e => update({ help_text: e.target.value || null })}
@@ -146,23 +146,23 @@ export function ParameterCard({
{/* Row 4: toggles */}
<div className="flex items-center gap-4">
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<label className="flex items-center gap-2 text-sm text-foreground">
<input
type="checkbox"
checked={param.required}
onChange={e => update({ required: e.target.checked })}
disabled={disabled}
className="rounded border-[#1e2130]"
className="rounded border-border"
/>
Required
</label>
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<label className="flex items-center gap-2 text-sm text-foreground">
<input
type="checkbox"
checked={param.sensitive}
onChange={e => update({ sensitive: e.target.checked })}
disabled={disabled}
className="rounded border-[#1e2130]"
className="rounded border-border"
/>
Sensitive (redacted in logs)
</label>
@@ -170,7 +170,7 @@ export function ParameterCard({
{/* Default value */}
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
<label className="text-xs text-muted-foreground mb-1 block">Default value</label>
<Input
value={param.default !== null && param.default !== undefined ? String(param.default) : ''}
onChange={e => update({ default: e.target.value || null })}
@@ -182,7 +182,7 @@ export function ParameterCard({
{/* Select options (only for select type) */}
{param.type === 'select' && (
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Options</label>
<label className="text-xs text-muted-foreground mb-1 block">Options</label>
<div className="space-y-1.5">
{(param.options ?? []).map((opt, i) => (
<div key={i} className="flex items-center gap-2">
@@ -202,7 +202,7 @@ export function ParameterCard({
type="button"
onClick={() => removeOption(i)}
disabled={disabled}
className="p-1 text-[#848b9b] hover:text-rose-500 transition-colors"
className="p-1 text-muted-foreground hover:text-rose-500 transition-colors"
>
<X size={14} />
</button>
@@ -212,7 +212,7 @@ export function ParameterCard({
type="button"
onClick={addOption}
disabled={disabled}
className="flex items-center gap-1 text-xs text-[#22d3ee] hover:underline"
className="flex items-center gap-1 text-xs text-primary hover:underline"
>
<Plus size={12} /> Add option
</button>
@@ -223,12 +223,12 @@ export function ParameterCard({
{/* Validation (for text/number types) */}
{(param.type === 'text' || param.type === 'number' || param.type === 'textarea') && (
<div>
<label className="text-xs text-[#848b9b] mb-1 block">Validation (optional)</label>
<label className="text-xs text-muted-foreground mb-1 block">Validation (optional)</label>
<div className="grid grid-cols-3 gap-2">
{param.type === 'number' ? (
<>
<div>
<label className="text-[0.625rem] text-[#848b9b]">Min value</label>
<label className="text-[0.625rem] text-muted-foreground">Min value</label>
<Input
type="number"
value={param.validation?.min_value ?? ''}
@@ -237,7 +237,7 @@ export function ParameterCard({
/>
</div>
<div>
<label className="text-[0.625rem] text-[#848b9b]">Max value</label>
<label className="text-[0.625rem] text-muted-foreground">Max value</label>
<Input
type="number"
value={param.validation?.max_value ?? ''}
@@ -249,7 +249,7 @@ export function ParameterCard({
) : (
<>
<div>
<label className="text-[0.625rem] text-[#848b9b]">Min length</label>
<label className="text-[0.625rem] text-muted-foreground">Min length</label>
<Input
type="number"
value={param.validation?.min_length ?? ''}
@@ -258,7 +258,7 @@ export function ParameterCard({
/>
</div>
<div>
<label className="text-[0.625rem] text-[#848b9b]">Max length</label>
<label className="text-[0.625rem] text-muted-foreground">Max length</label>
<Input
type="number"
value={param.validation?.max_length ?? ''}
@@ -269,7 +269,7 @@ export function ParameterCard({
</>
)}
<div>
<label className="text-[0.625rem] text-[#848b9b]">Pattern (regex)</label>
<label className="text-[0.625rem] text-muted-foreground">Pattern (regex)</label>
<Input
value={param.validation?.pattern ?? ''}
onChange={e => updateValidation({ pattern: e.target.value || undefined })}
@@ -282,13 +282,13 @@ export function ParameterCard({
)}
{/* Actions row */}
<div className="flex items-center justify-between pt-1 border-t border-[#1e2130]">
<div className="flex items-center justify-between pt-1 border-t border-border">
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => onMoveUp(index)}
disabled={isFirst || disabled}
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
>
↑ Up
</button>
@@ -296,7 +296,7 @@ export function ParameterCard({
type="button"
onClick={() => onMoveDown(index)}
disabled={isLast || disabled}
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
>
↓ Down
</button>