fix: enforce semantic contrast across admin
Local Build and Deploy / deploy (push) Successful in 44s

This commit is contained in:
Simo committed 2026-07-12 15:14:15 +02:00
1 parent 45c8178cfa
commit f0b4bc1630
86 files changed
+438 -338

No files matched your search

@@ -202,8 +202,8 @@ export function ImportBadgesClient() {
<span className="text-muted-foreground">results</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<CheckCircle2 className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
{importableBadges.length > 0 && (
@@ -419,7 +419,7 @@ export function ImportBadgesClient() {
<div className="pt-1">
{badge.alreadyImported ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -546,8 +546,8 @@ function FurniGrid({ source }: FurniGridProps) {
<span className="text-muted-foreground">total</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{stats.present}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{stats.present}</span>
<span className="text-muted-foreground">present</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -766,7 +766,7 @@ function FurniGrid({ source }: FurniGridProps) {
</div>
<div className="pt-1">
{it.present ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
<Check className="w-2.5 h-2.5" />
Present
</Badge>
@@ -257,8 +257,8 @@ function LibsView() {
<span className="text-muted-foreground">libraries</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">on this page</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -400,7 +400,7 @@ function LibsView() {
<div className="pt-1">
{p.nitroExists ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -591,8 +591,8 @@ function SetsView() {
<span className="text-muted-foreground">sets</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{presentCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{presentCount}</span>
<span className="text-muted-foreground">on this page</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -737,19 +737,19 @@ function SetsView() {
{it.gender}
</Badge>
{it.club > 0 && (
<Badge className="text-[10px] px-1.5 py-0 bg-yellow-500/20 text-yellow-600 border-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
HC
</Badge>
)}
{it.sellable && (
<Badge className="text-[10px] px-1.5 py-0 bg-blue-500/15 text-blue-500 border-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] border-0">
$
</Badge>
)}
</div>
<div className="pt-1">
{it.present ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -185,8 +185,8 @@ export function ImportEffectsClient() {
<span className="text-muted-foreground">effects</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -337,7 +337,7 @@ export function ImportEffectsClient() {
)}
>
{e.type === 'dance' ? (
<Music className="w-7 h-7 text-amber-500/80" />
<Music className="w-7 h-7 text-[var(--color-warning-text-readable)]/80" />
) : (
<Sparkles className="w-7 h-7 text-violet-500/80" />
)}
@@ -351,7 +351,7 @@ export function ImportEffectsClient() {
<div className="pt-1">
{imported ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -883,11 +883,11 @@ export function ImportFurniClient() {
<div className="text-[10px] text-muted-foreground">on this page</div>
</div>
<div className="rounded-lg border bg-card p-3">
<div className="flex items-center gap-2 text-xs text-amber-500">
<div className="flex items-center gap-2 text-xs text-[var(--color-warning-text-readable)]">
<FileWarning className="w-3.5 h-3.5" />
Missing .nitro
</div>
<div className="text-xl font-bold mt-1 text-amber-500">
<div className="text-xl font-bold mt-1 text-[var(--color-warning-text-readable)]">
{stats.missingNitro.toLocaleString()}
</div>
</div>
@@ -913,12 +913,12 @@ export function ImportFurniClient() {
<div className="rounded-lg border p-4 space-y-3 bg-card">
<h3 className="text-sm font-semibold">Import Complete</h3>
<div className="flex gap-4 text-sm">
<span className="text-emerald-500">{batchSummary.succeeded} succeeded</span>
<span className="text-[var(--color-success-text-readable)]">{batchSummary.succeeded} succeeded</span>
{batchSummary.failed > 0 && (
<span className="text-destructive">{batchSummary.failed} failed</span>
)}
{batchSummary.warnings > 0 && (
<span className="text-amber-500">{batchSummary.warnings} with warnings</span>
<span className="text-[var(--color-warning-text-readable)]">{batchSummary.warnings} with warnings</span>
)}
<span className="text-muted-foreground">
{(batchSummary.duration / 1000).toFixed(1)}s
@@ -937,14 +937,14 @@ export function ImportFurniClient() {
{item.status === 'failed' ? (
<XCircle className="w-3 h-3 text-destructive mt-0.5 shrink-0" />
) : (
<AlertCircle className="w-3 h-3 text-amber-500 mt-0.5 shrink-0" />
<AlertCircle className="w-3 h-3 text-[var(--color-warning-text-readable)] mt-0.5 shrink-0" />
)}
<div className="min-w-0">
<span className="font-mono">{item.classname}</span>
{item.message && <p className="text-destructive">{item.message}</p>}
{item.warnings?.map((w, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: warnings list is append-only and not reordered
<p key={i} className="text-amber-500">
<p key={i} className="text-[var(--color-warning-text-readable)]">
{w}
</p>
))}
@@ -987,7 +987,7 @@ export function ImportFurniClient() {
{progressStats.completed}/{progressStats.total} completed
</span>
{progressStats.done > 0 && (
<span className="text-emerald-500">{progressStats.done} OK</span>
<span className="text-[var(--color-success-text-readable)]">{progressStats.done} OK</span>
)}
{progressStats.failed > 0 && (
<span className="text-destructive">{progressStats.failed} failed</span>
@@ -999,7 +999,7 @@ export function ImportFurniClient() {
key={item.classname}
className="flex items-center gap-2 text-xs py-1 px-2 rounded hover:bg-muted/50"
>
{item.status === 'done' && <Check className="w-3 h-3 text-emerald-500 shrink-0" />}
{item.status === 'done' && <Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />}
{item.status === 'failed' && (
<XCircle className="w-3 h-3 text-destructive shrink-0" />
)}
@@ -1049,7 +1049,7 @@ export function ImportFurniClient() {
<span>
{completed}/{arr.length}
</span>
{done > 0 && <span className="text-emerald-500">{done} OK</span>}
{done > 0 && <span className="text-[var(--color-success-text-readable)]">{done} OK</span>}
{failed > 0 && <span className="text-destructive">{failed} failed</span>}
</div>
</div>
@@ -1062,7 +1062,7 @@ export function ImportFurniClient() {
<h3 className="text-sm font-semibold">Regeneration Complete</h3>
<div className="flex gap-4 text-sm">
{regenSummary.succeeded > 0 && (
<span className="text-emerald-500">{regenSummary.succeeded} regenerated</span>
<span className="text-[var(--color-success-text-readable)]">{regenSummary.succeeded} regenerated</span>
)}
{regenSummary.failed > 0 && (
<span className="text-destructive">{regenSummary.failed} failed</span>
@@ -1305,7 +1305,7 @@ export function ImportFurniClient() {
size="sm"
onClick={regenAllMissing}
disabled={batchRegenerating || regeneratingNitro.size > 0}
className="h-8 text-amber-500 border-amber-500/30 hover:bg-amber-500/10"
className="h-8 text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] hover:bg-[var(--color-warning-subtle)]"
>
{batchRegenerating ? (
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
@@ -1428,11 +1428,11 @@ export function ImportFurniClient() {
<td className="px-2 py-1.5">
{item.alreadyImported ? (
item.nitroExists ? (
<Badge className="text-[10px] bg-emerald-500/15 text-emerald-500 border-0">
<Badge className="text-[10px] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0">
OK
</Badge>
) : (
<Badge className="text-[10px] bg-amber-500/15 text-amber-500 border-0">
<Badge className="text-[10px] bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
No .nitro
</Badge>
)
@@ -1471,7 +1471,7 @@ export function ImportFurniClient() {
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-amber-500"
className="h-6 w-6 p-0 text-[var(--color-warning-text-readable)]"
onClick={() => regenNitro(item)}
disabled={regeneratingNitro.has(item.classname)}
>
@@ -1576,12 +1576,12 @@ export function ImportFurniClient() {
{item.alreadyImported && (
<>
{item.nitroExists ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-emerald-500/20 gap-0.5 shrink-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] gap-0.5 shrink-0">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
) : (
<Badge className="text-[10px] px-1.5 py-0 bg-amber-500/15 text-amber-500 border-amber-500/20 gap-0.5 shrink-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] gap-0.5 shrink-0">
<AlertCircle className="w-2.5 h-2.5" />
No .nitro
</Badge>
@@ -1603,7 +1603,7 @@ export function ImportFurniClient() {
<Button
variant="ghost"
size="sm"
className="h-5 w-5 p-0 shrink-0 text-amber-500"
className="h-5 w-5 p-0 shrink-0 text-[var(--color-warning-text-readable)]"
title="Regenerate .nitro file"
disabled={regeneratingNitro.has(item.classname)}
onClick={(e) => {
@@ -1770,7 +1770,7 @@ export function ImportFurniClient() {
)}
{reorgPreview.repriced > 0 && (
<div className="rounded-lg border p-3 text-center">
<p className="text-lg font-bold text-amber-500">{reorgPreview.repriced}</p>
<p className="text-lg font-bold text-[var(--color-warning-text-readable)]">{reorgPreview.repriced}</p>
<p className="text-xs text-muted-foreground">Prices to update</p>
</div>
)}
@@ -83,7 +83,7 @@ function CopyClassname({ value }: { value: string }) {
>
<span className="truncate">{value}</span>
{copied ? (
<Check className="w-3 h-3 text-green-500 shrink-0" />
<Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />
) : (
<Copy className="w-3 h-3 shrink-0" />
)}
@@ -178,8 +178,8 @@ export function ImportPetsClient() {
<span className="text-muted-foreground">pets</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -313,7 +313,7 @@ export function ImportPetsClient() {
<div className="pt-1">
{p.nitroExists ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -435,7 +435,7 @@ export function RepairClient() {
{/* Table area */}
{summary && summary.items.length === 0 && (
<div className="rounded-md border bg-muted/30 p-10 text-center">
<CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-emerald-500" />
<CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-[var(--color-success-text-readable)]" />
<p className="font-medium">All imported items have their assets on disk.</p>
<p className="text-sm text-muted-foreground">
{summary.total} items scanned, nothing to repair.
@@ -615,7 +615,7 @@ function StatCard({
const tones = {
default: 'border-border',
danger: 'border-destructive/40 bg-destructive/5',
warn: 'border-amber-500/40 bg-amber-500/5',
warn: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
info: 'border-sky-500/40 bg-sky-500/5',
}
return (
@@ -631,7 +631,7 @@ function FileBadge({ present }: { present: boolean }) {
return present ? (
<Badge
variant="secondary"
className="border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
className="border-[var(--color-success-border)] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
>
<CheckCircle2 className="mr-1 h-3 w-3" /> On disk
</Badge>
@@ -659,7 +659,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
progress.iconRepaired ? 'icon ✓' : null,
].filter(Boolean)
return (
<span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
<span className="flex items-center gap-1 text-xs text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]">
<CheckCircle2 className="h-3 w-3" />
{parts.length > 0 ? parts.join(' · ') : 'Repaired'}
</span>
@@ -668,7 +668,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
if (progress.status === 'partial') {
return (
<span
className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400"
className="flex items-center gap-1 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]"
title={progress.message}
>
<AlertCircle className="h-3 w-3" />