marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(components): replace all hardcoded colors with semantic tokens

Browse Source 
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A],
bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with
semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active,
bg-muted, text-accent, bg-primary, ...).

Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode,
excluding icons that carry .invert already (to prevent double-inversion).

Closes #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 12:22:50 +01:00
parent caba89dacc
commit e4539ed0f0
32 changed files with 569 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/routes/login/+page.svelte
View File

@@ -9,7 +9,7 @@ const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
</script>
<div class="relative flex min-h-screen flex-col bg-white">
<div class="relative flex min-h-screen flex-col bg-surface">
<!-- DGB purple accent strip -->
<div class="h-1 bg-brand-purple"></div>
@@ -21,8 +21,8 @@ const activeLocale = $derived(getLocale().toUpperCase());
onclick={() => setLocale(localeMap[locale])}
class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
{activeLocale === locale
? 'font-bold text-brand-navy'
: 'font-normal text-gray-400 hover:text-brand-navy'}"
? 'font-bold text-ink'
: 'font-normal text-ink-3 hover:text-ink'}"
>
{locale}
</button>
@@ -34,15 +34,15 @@ const activeLocale = $derived(getLocale().toUpperCase());
<!-- Logo -->
<div class="mb-10 text-center">
<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
>Familienarchiv</span
>
</a>
</div>
<!-- Card -->
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
{m.login_heading()}
</h1>
@@ -50,7 +50,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
<div>
<label
for="username"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.login_label_username()}</label
>
<input
@@ -59,14 +59,14 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="username"
required
autocomplete="username"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>
<div>
<label
for="password"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.login_label_password()}</label
>
<input
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="password"
required
autocomplete="current-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>
@@ -85,7 +85,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
<button
type="submit"
class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
>
{m.login_btn_submit()}
</button>
@@ -93,7 +93,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
<div class="mt-4 text-center">
<a
href="/forgot-password"
class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
>{m.login_forgot_password()}</a
>
</div>
@@ -104,6 +104,6 @@ const activeLocale = $derived(getLocale().toUpperCase());
<!-- Footer -->
<div class="py-4 text-center">
<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
</div>
</div>