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:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions

View File

@@ -110,8 +110,8 @@ export function InviteCodesPage() {
}
const selectClass = cn(
'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
)
const columns: Column<InviteCodeResponse>[] = [
@@ -119,7 +119,7 @@ export function InviteCodesPage() {
key: 'code',
header: 'Code',
render: (c) => (
<code className="rounded bg-accent px-2 py-1 text-sm font-mono text-[#848b9b]">{c.code}</code>
<code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
),
},
{
@@ -130,12 +130,12 @@ export function InviteCodesPage() {
{c.email_sent ? (
<MailCheck className="h-3.5 w-3.5 text-emerald-400" />
) : (
<Mail className="h-3.5 w-3.5 text-[#848b9b]" />
<Mail className="h-3.5 w-3.5 text-muted-foreground" />
)}
<span className="text-sm text-[#848b9b]">{c.email}</span>
<span className="text-sm text-muted-foreground">{c.email}</span>
</div>
) : (
<span className="text-sm text-[#848b9b]">&mdash;</span>
<span className="text-sm text-muted-foreground">&mdash;</span>
),
},
{
@@ -151,9 +151,9 @@ export function InviteCodesPage() {
key: 'trial',
header: 'Trial',
render: (c) => c.has_trial ? (
<span className="text-sm text-[#848b9b]">{c.trial_duration_days}d</span>
<span className="text-sm text-muted-foreground">{c.trial_duration_days}d</span>
) : (
<span className="text-sm text-[#848b9b]">&mdash;</span>
<span className="text-sm text-muted-foreground">&mdash;</span>
),
},
{
@@ -170,7 +170,7 @@ export function InviteCodesPage() {
key: 'expires_at',
header: 'Expires',
render: (c) => (
<span className="text-sm text-[#848b9b]">
<span className="text-sm text-muted-foreground">
{c.expires_at ? new Date(c.expires_at).toLocaleDateString() : 'Never'}
</span>
),
@@ -179,7 +179,7 @@ export function InviteCodesPage() {
key: 'created_at',
header: 'Created',
render: (c) => (
<span className="text-sm text-[#848b9b]">
<span className="text-sm text-muted-foreground">
{new Date(c.created_at).toLocaleDateString()}
</span>
),
@@ -254,7 +254,7 @@ export function InviteCodesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Recipient Email</label>
<label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
<Input
type="email"
value={email}
@@ -264,7 +264,7 @@ export function InviteCodesPage() {
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Plan</label>
<label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
<select
aria-label="Plan"
value={assignedPlan}
@@ -283,7 +283,7 @@ export function InviteCodesPage() {
{assignedPlan !== 'free' && (
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Trial Duration (days)</label>
<label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
<Input
type="number"
value={trialDays}
@@ -292,12 +292,12 @@ export function InviteCodesPage() {
min={1}
max={90}
/>
<p className="mt-1 text-xs text-[#848b9b]">Leave empty for no trial account gets full plan immediately.</p>
<p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial account gets full plan immediately.</p>
</div>
)}
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Expires in (days)</label>
<label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
<Input
type="number"
value={expiresInDays}
@@ -307,7 +307,7 @@ export function InviteCodesPage() {
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Note</label>
<label className="mb-1 block text-sm font-medium text-foreground">Note</label>
<Input
type="text"
value={note}