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/ui/Button.tsx
View File

@@ -8,15 +8,15 @@ const buttonVariants = cva(
variants: {
variant: {
primary:
'bg-[#22d3ee] text-white font-semibold hover:brightness-110',
'bg-primary text-white font-semibold hover:brightness-110',
secondary:
'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb] hover:border-[#2a2f3d] hover:bg-[#1e2130]',
'bg-input border border-border text-foreground hover:border-border-hover hover:bg-border',
destructive:
'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
ghost:
'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
'text-muted-foreground hover:bg-accent hover:text-foreground',
link:
'text-[#22d3ee] underline-offset-4 hover:underline p-0 h-auto',
'text-primary underline-offset-4 hover:underline p-0 h-auto',
},
size: {
sm: 'h-8 px-3 text-xs rounded-lg',

4
frontend/src/components/ui/FormField.tsx
View File

@@ -11,13 +11,13 @@ interface FormFieldProps {
export function FormField({ label, htmlFor, required, hint, children }: FormFieldProps) {
return (
<div className="space-y-1.5">
<label htmlFor={htmlFor} className="text-sm font-medium text-[#e2e5eb]">
<label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
{label}
{required && <span className="ml-0.5 text-red-400">*</span>}
</label>
{children}
{hint && (
<p className="text-xs text-[#848b9b]">{hint}</p>
<p className="text-xs text-muted-foreground">{hint}</p>
)}
</div>
)

4
frontend/src/components/ui/Input.tsx
View File

@@ -10,8 +10,8 @@ export function Input({ className, error, id, ...props }: InputProps) {
<input
id={id}
className={cn(
'flex h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
'placeholder:text-[#848b9b]',
'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:cursor-not-allowed disabled:opacity-50',
error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',

14
frontend/src/components/ui/MarkdownContent.tsx
View File

@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
),
// Style bold text
strong: ({ children }) => (
<strong className="font-semibold text-[#e2e5eb]">{children}</strong>
<strong className="font-semibold text-foreground">{children}</strong>
),
// Style ordered lists
ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
),
// Style list items
li: ({ children }) => (
<li className="text-[#848b9b]">{children}</li>
<li className="text-muted-foreground">{children}</li>
),
// Style inline code
code: ({ className, children, ...props }) => {
@@ -69,19 +69,19 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
),
// Style headers
h1: ({ children }) => (
<h1 className="mb-3 text-lg font-bold text-[#e2e5eb]">{children}</h1>
<h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
),
h2: ({ children }) => (
<h2 className="mb-2 text-base font-bold text-[#e2e5eb]">{children}</h2>
<h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
),
h3: ({ children }) => (
<h3 className="mb-2 text-sm font-bold text-[#e2e5eb]">{children}</h3>
<h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
),
// Style horizontal rules
hr: () => <hr className="my-4 border-[#1e2130]" />,
hr: () => <hr className="my-4 border-border" />,
// Style blockquotes
blockquote: ({ children }) => (
<blockquote className="mb-3 border-l-4 border-[#1e2130] pl-4 italic text-[#848b9b] last:mb-0">
<blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
{children}
</blockquote>
),

2
frontend/src/components/ui/Skeleton.tsx
View File

@@ -47,7 +47,7 @@ export function ListSkeleton({ count = 5, className }: { count?: number; classNa
return (
<div className={cn('space-y-3', className)}>
{Array.from({ length: count }).map((_, i) => (
<div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-[#14161d]">
<div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-card">
<Skeleton className="size-8 rounded-full shrink-0" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-2/3" />

4
frontend/src/components/ui/Textarea.tsx
View File

@@ -10,8 +10,8 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
<textarea
id={id}
className={cn(
'flex w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
'placeholder:text-[#848b9b]',
'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:cursor-not-allowed disabled:opacity-50',
error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',