fix(#94): replace text-white with text-primary-fg on all primary buttons
In dark mode --c-primary switches from navy (#012851) to mint (#a1dcd8). Buttons using bg-primary+text-white showed white text on mint at 1.4:1 contrast — invisible. bg-brand-navy buttons were also invisible (navy on near-black canvas, 1.3:1). Replaced in 28 components app-wide: - bg-primary ... text-white → text-primary-fg - hover:bg-primary hover:text-white → hover:text-primary-fg - bg-brand-navy ... text-white + hover:bg-brand-navy/90 → bg-primary ... text-primary-fg + hover:bg-primary/90 Light mode is unchanged: primary-fg = white in light mode. Dark mode: primary-fg = navy (#012851) on mint bg = readable. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #109.
This commit is contained in:
@@ -107,7 +107,7 @@ function handleSearch() {
|
||||
<!-- Avatar -->
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-white transition-colors group-hover:bg-accent group-hover:text-ink"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
|
||||
>
|
||||
{person.firstName[0]}{person.lastName[0]}
|
||||
</div>
|
||||
|
||||
@@ -143,7 +143,7 @@ $effect(() => {
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
|
||||
class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
|
||||
>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
|
||||
@@ -44,7 +44,7 @@ const visibleDocuments = $derived(
|
||||
<div class="mb-10">
|
||||
<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
|
||||
<h2 class="font-serif text-xl text-ink">{heading}</h2>
|
||||
<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
|
||||
<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-primary-fg">
|
||||
{documents.length}
|
||||
</span>
|
||||
{#if yearRange}
|
||||
|
||||
@@ -89,7 +89,7 @@ let { form } = $props();
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
|
||||
class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
|
||||
>
|
||||
{m.btn_create()}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user