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

22
frontend/src/routes/users/[id]/+page.svelte
View File

@@ -23,7 +23,7 @@ const initials = $derived.by(() => {
<!-- Back link -->
<a
href="/"
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
>
<svg
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -37,21 +37,21 @@ const initials = $derived.by(() => {
Zurück
</a>
<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.user_profile_heading()}</h1>
<div class="max-w-md">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<!-- Avatar -->
<div class="mb-5 flex justify-center">
{#if initials}
<div
class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
>
<span class="font-serif text-xl font-bold">{initials}</span>
</div>
{:else}
<div
class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
>
<svg
class="h-8 w-8"
@@ -72,9 +72,9 @@ const initials = $derived.by(() => {
<!-- Name and username -->
<div class="mb-5 text-center">
<h2 class="font-serif text-xl font-bold text-brand-navy">{fullName}</h2>
<h2 class="font-serif text-xl font-bold text-ink">{fullName}</h2>
{#if data.profileUser.firstName || data.profileUser.lastName}
<p class="mt-0.5 font-sans text-sm text-gray-400">@{data.profileUser.username}</p>
<p class="mt-0.5 font-sans text-sm text-ink-3">@{data.profileUser.username}</p>
{/if}
</div>
@@ -82,19 +82,19 @@ const initials = $derived.by(() => {
<div class="flex flex-col gap-4">
{#if data.profileUser.email}
<div class="flex flex-col gap-0.5">
<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>E-Mail</span
>
<span class="font-serif text-sm text-brand-navy">{data.profileUser.email}</span>
<span class="font-serif text-sm text-ink">{data.profileUser.email}</span>
</div>
{/if}
{#if data.profileUser.contact}
<div class="flex flex-col gap-0.5">
<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>Kontakt</span
>
<span class="font-serif text-sm text-brand-navy">{data.profileUser.contact}</span>
<span class="font-serif text-sm text-ink">{data.profileUser.contact}</span>
</div>
{/if}
</div>