From 1a849362a10f07120acb5284fc35841733e90c7d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 29 Mar 2026 09:36:28 +0200
Subject: [PATCH] fix: replace hardcoded
 bg-white/border-brand-sand/text-brand-navy with semantic tokens in dashboard
 widgets

All four dashboard components (ResumeStrip, Mentions, NeedsMetadata, RecentDocuments)
used static brand colors that do not adapt to dark mode. Replace with bg-surface,
border-line, text-ink, text-ink-2 throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/DashboardMentions.svelte     |  6 +++---
 .../lib/components/DashboardNeedsMetadata.svelte    | 13 ++++---------
 .../lib/components/DashboardRecentDocuments.svelte  |  6 +++---
 .../src/lib/components/DashboardResumeStrip.svelte  |  6 +++---
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/DashboardMentions.svelte b/frontend/src/lib/components/DashboardMentions.svelte
index 6a0098d6..7339879d 100644
--- a/frontend/src/lib/components/DashboardMentions.svelte
+++ b/frontend/src/lib/components/DashboardMentions.svelte
@@ -16,16 +16,16 @@ let { mentions }: Props = $props();
 </script>
 
 {#if mentions.length > 0}
-	<div data-testid="dashboard-mentions" class="border-brand-sand rounded-sm border bg-white p-6">
+	<div data-testid="dashboard-mentions" class="rounded-sm border border-line bg-surface p-6">
 		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
 			Erwähnungen
 		</h2>
 		{#each mentions as mention (mention.id)}
-			<div class="border-brand-sand flex items-center gap-3 border-b py-2 last:border-0">
+			<div class="flex items-center gap-3 border-b border-line py-2 last:border-0">
 				{#if mention.documentId}
 					<a
 						href="/documents/{mention.documentId}"
-						class="font-serif text-sm text-ink hover:text-brand-navy"
+						class="font-serif text-sm text-ink hover:text-ink-2"
 					>
 						{mention.actorName ?? ''}
 					</a>
diff --git a/frontend/src/lib/components/DashboardNeedsMetadata.svelte b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
index 31daab3c..4c2c937f 100644
--- a/frontend/src/lib/components/DashboardNeedsMetadata.svelte
+++ b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
@@ -12,27 +12,22 @@ let { incompleteDocs }: Props = $props();
 </script>
 
 {#if incompleteDocs.length > 0}
-	<div
-		data-testid="dashboard-needs-metadata"
-		class="border-brand-sand rounded-sm border bg-white p-6"
-	>
+	<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
 		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
 			Metadaten fehlen
 		</h2>
 		{#each incompleteDocs as doc (doc.id)}
-			<div class="border-brand-sand flex items-center border-b py-2 last:border-0">
+			<div class="flex items-center border-b border-line py-2 last:border-0">
 				<a
 					href="/enrich/{doc.id}"
-					class="font-serif text-sm text-ink hover:text-brand-navy hover:underline"
+					class="font-serif text-sm text-ink hover:text-ink-2 hover:underline"
 				>
 					{doc.title}
 				</a>
 			</div>
 		{/each}
 		<div class="mt-4">
-			<a href="/enrich" class="font-sans text-xs text-brand-navy/60 hover:text-brand-navy">
-				Alle anzeigen
-			</a>
+			<a href="/enrich" class="font-sans text-xs text-ink-2 hover:text-ink"> Alle anzeigen </a>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/DashboardRecentDocuments.svelte b/frontend/src/lib/components/DashboardRecentDocuments.svelte
index cb9ed9ac..8ae8bebf 100644
--- a/frontend/src/lib/components/DashboardRecentDocuments.svelte
+++ b/frontend/src/lib/components/DashboardRecentDocuments.svelte
@@ -22,15 +22,15 @@ function formatDate(dateStr: string): string {
 </script>
 
 {#if recentDocs.length > 0}
-	<div data-testid="dashboard-recent-docs" class="border-brand-sand rounded-sm border bg-white p-6">
+	<div data-testid="dashboard-recent-docs" class="rounded-sm border border-line bg-surface p-6">
 		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
 			Zuletzt hinzugefügt
 		</h2>
 		{#each recentDocs as doc (doc.id)}
-			<div class="border-brand-sand flex items-center justify-between border-b py-2 last:border-0">
+			<div class="flex items-center justify-between border-b border-line py-2 last:border-0">
 				<a
 					href="/documents/{doc.id}"
-					class="font-serif text-sm text-ink hover:text-brand-navy hover:underline"
+					class="font-serif text-sm text-ink hover:text-ink-2 hover:underline"
 				>
 					{doc.title}
 				</a>
diff --git a/frontend/src/lib/components/DashboardResumeStrip.svelte b/frontend/src/lib/components/DashboardResumeStrip.svelte
index a2cc482e..218cfa2d 100644
--- a/frontend/src/lib/components/DashboardResumeStrip.svelte
+++ b/frontend/src/lib/components/DashboardResumeStrip.svelte
@@ -26,10 +26,10 @@ onMount(() => {
 {#if lastVisited}
 	<div
 		data-testid="resume-strip"
-		class="border-brand-sand flex items-center gap-2 rounded-sm border bg-white px-4 py-3 font-sans text-sm"
+		class="flex items-center gap-2 rounded-sm border border-line bg-surface px-4 py-3 font-sans text-sm"
 	>
-		<span class="text-gray-500">Zuletzt geöffnet:</span>
-		<a href="/documents/{lastVisited.id}" class="font-medium text-brand-navy hover:underline">
+		<span class="text-ink-2">Zuletzt geöffnet:</span>
+		<a href="/documents/{lastVisited.id}" class="font-medium text-ink hover:underline">
 			{lastVisited.title || 'Zuletzt geöffnet'}
 		</a>
 	</div>