justin/fosterflow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: replace non-standard color classes with theme system

Browse Source 
Replace teal-brand→primary, teal-dark→primary-dark, teal-light→primary-light,
gray-soft→gray-200, gray-brand→gray-900 across 53 files. Fixes theming
not applying — colors now use CSS custom properties from org_config.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin
2026-03-26 17:07:22 -05:00
co-authored by Claude Opus 4.6
parent f645a19da1
commit 602f36d558
53 changed files with 603 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/expenses/+page.svelte
+10 -10
View File
@@ -41,7 +41,7 @@
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">Expenses</h1>
<a href="/admin/expenses/new" class="inline-flex items-center gap-2 px-4 py-2.5 bg-teal-brand text-white text-sm font-medium rounded-lg hover:bg-teal-dark transition-colors">
<a href="/admin/expenses/new" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-dark transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
@@ -50,21 +50,21 @@
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
<p class="text-sm text-gray-500">This Month</p>
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.monthTotal ?? 0) / 100)}</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
<p class="text-sm text-gray-500">This Year</p>
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.yearTotal ?? 0) / 100)}</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
<p class="text-sm text-gray-500">Filtered Total</p>
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.filteredTotal ?? 0) / 100)}</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex-1">
<input
@@ -72,16 +72,16 @@
placeholder="Filter by category..."
value={data.category}
onchange={(e) => handleFilterChange('category', e.currentTarget.value)}
class="w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand"
class="w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
<div class="flex items-center gap-2">
<label for="startDate" class="text-sm text-gray-500 whitespace-nowrap">From</label>
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
</div>
<div class="flex items-center gap-2">
<label for="endDate" class="text-sm text-gray-500 whitespace-nowrap">To</label>
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
</div>
</div>
</div>
@@ -91,7 +91,7 @@
<DataTable {columns} rows={data.expenses}>
{#snippet row(expense)}
<td class="px-4 py-3">
<a href="/admin/expenses/{expense.id}" class="font-medium text-teal-brand hover:text-teal-dark hover:underline">
<a href="/admin/expenses/{expense.id}" class="font-medium text-primary hover:text-primary-dark hover:underline">
{expense.description || 'No description'}
</a>
</td>
@@ -109,7 +109,7 @@
<td class="px-4 py-3 text-gray-600">{expense.vetName ?? '—'}</td>
<td class="px-4 py-3 text-gray-600">{formatDate(expense.date)}</td>
<td class="px-4 py-3 text-right">
<a href="/admin/expenses/{expense.id}" class="text-teal-brand hover:text-teal-dark text-sm font-medium transition-colors">Edit</a>
<a href="/admin/expenses/{expense.id}" class="text-primary hover:text-primary-dark text-sm font-medium transition-colors">Edit</a>
</td>
{/snippet}
</DataTable>