marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests 1 Actions 1 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

28
frontend/src/routes/reset-password/+page.svelte
View File

@@ -11,7 +11,7 @@ let {
} = $props();
</script>
<div class="relative flex min-h-screen flex-col bg-white">
<div class="relative flex min-h-screen flex-col bg-surface">
<!-- Accent strip -->
<div class="h-1 bg-brand-purple"></div>
@@ -20,15 +20,15 @@ let {
<!-- 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.reset_password_heading()}
</h1>
@@ -37,9 +37,7 @@ let {
<p class="font-sans text-xs text-green-700">{m.reset_password_success()}</p>
</div>
<a
href="/login"
class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
>{m.forgot_password_back_to_login()}</a
>
{:else}
@@ -49,7 +47,7 @@ let {
<div>
<label
for="newPassword"
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.reset_password_label()}</label
>
<input
@@ -58,14 +56,14 @@ let {
id="newPassword"
required
autocomplete="new-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>
<div>
<label
for="confirmPassword"
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.reset_password_confirm_label()}</label
>
<input
@@ -74,7 +72,7 @@ let {
id="confirmPassword"
required
autocomplete="new-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>
@@ -88,15 +86,13 @@ let {
<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.reset_password_submit()}
</button>
<div class="mt-4 text-center">
<a
href="/login"
class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
>{m.forgot_password_back_to_login()}</a
>
</div>
@@ -108,6 +104,6 @@ let {
<!-- 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>