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

fix: replace hardcoded brand-navy/white tokens with semantic tokens on enrich list page
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details

Browse Source 
Fixes dark mode rendering: list stayed white and text stayed dark because
bg-white, text-brand-navy, border-brand-sand were not theme-aware.
Replace with bg-surface, text-ink/ink-2/ink-3, border-line, bg-muted.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-28 23:48:03 +01:00
parent 3dd0ff94c6
commit 06fbb2fe81
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/routes/enrich/+page.svelte
View File

@@ -31,13 +31,13 @@ function formatUploadDate(createdAt: string): string {
</a> </a>
<!-- Page Header --> <!-- Page Header -->
<div class="border-brand-sand mb-8 flex items-center justify-between border-b pb-6"> <div class="mb-8 flex items-center justify-between border-b border-line pb-6">
<div> <div>
<h1 class="font-serif text-3xl font-medium text-brand-navy"> <h1 class="font-serif text-3xl font-medium text-ink">
{m.enrich_list_heading()} {m.enrich_list_heading()}
</h1> </h1>
{#if count > 0} {#if count > 0}
<p class="mt-2 font-sans text-sm text-brand-navy/60"> <p class="mt-2 font-sans text-sm text-ink-2">
{count} {count}
{m.enrich_list_count()} {m.enrich_list_count()}
</p> </p>
@@ -57,9 +57,9 @@ function formatUploadDate(createdAt: string): string {
<!-- Empty State --> <!-- Empty State -->
{#if count === 0} {#if count === 0}
<div <div
class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-20 text-center" class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-20 text-center"
> >
<div class="bg-brand-sand/60 mb-4 flex h-14 w-14 items-center justify-center rounded-full"> <div class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
<img <img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg" src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg"
alt="" alt=""
@@ -67,27 +67,27 @@ function formatUploadDate(createdAt: string): string {
class="h-7 w-7 opacity-50" class="h-7 w-7 opacity-50"
/> />
</div> </div>
<p class="font-serif text-lg font-medium text-brand-navy"> <p class="font-serif text-lg font-medium text-ink">
{m.enrich_list_empty_heading()} {m.enrich_list_empty_heading()}
</p> </p>
<p class="mt-2 max-w-xs font-sans text-sm text-brand-navy/60"> <p class="mt-2 max-w-xs font-sans text-sm text-ink-2">
{m.enrich_list_empty_body()} {m.enrich_list_empty_body()}
</p> </p>
</div> </div>
{:else} {:else}
<!-- Document Rows --> <!-- Document Rows -->
<div class="border border-line bg-white shadow-sm"> <div class="border border-line bg-surface shadow-sm">
<ul class="divide-y divide-line-2"> <ul class="divide-y divide-line-2">
{#each documents as doc (doc.id)} {#each documents as doc (doc.id)}
<li class="group hover:bg-brand-sand/30 transition-colors duration-200"> <li class="group transition-colors duration-200 hover:bg-muted">
<a href="/enrich/{doc.id}" class="flex items-center justify-between p-6"> <a href="/enrich/{doc.id}" class="flex items-center justify-between p-6">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p <p
class="font-serif text-lg font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline" class="font-serif text-lg font-medium text-ink decoration-accent decoration-2 underline-offset-4 group-hover:underline"
> >
{doc.title || doc.originalFilename} {doc.title || doc.originalFilename}
</p> </p>
<p class="mt-1 font-sans text-xs text-brand-navy/50"> <p class="mt-1 font-sans text-xs text-ink-3">
{formatUploadDate(doc.createdAt)} {formatUploadDate(doc.createdAt)}
</p> </p>
</div> </div>