From 3de3b2131f9838cf991aa922494b56496349e7b4 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 16 Jun 2026 19:03:11 +0200
Subject: [PATCH] =?UTF-8?q?refactor(shared):=20re-skin=20PersonFilterBar?=
 =?UTF-8?q?=20+=20TimelineFilters=20to=20=C2=A76=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #857
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/person/PersonFilterBar.svelte   | 7 ++++---
 frontend/src/lib/timeline/TimelineFilters.svelte | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/person/PersonFilterBar.svelte b/frontend/src/lib/person/PersonFilterBar.svelte
index ae2bf9c2..8ccc27e0 100644
--- a/frontend/src/lib/person/PersonFilterBar.svelte
+++ b/frontend/src/lib/person/PersonFilterBar.svelte
@@ -54,10 +54,11 @@ function setReview(next: boolean) {
 	});
 }
 
+// §6 tokens: Montserrat 12px/700 tracking-[.08em] UPPERCASE; 44px touch target
 const chipBase =
-	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-2 font-sans text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
-const chipActive = 'border-brand-navy bg-brand-navy text-white';
-const chipInactive = 'border-line bg-surface text-ink hover:bg-muted';
+	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none';
+const chipActive = 'border-primary bg-primary text-primary-fg';
+const chipInactive = 'border-line bg-surface text-ink-2 hover:bg-surface-2';
 </script>
 
 <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
diff --git a/frontend/src/lib/timeline/TimelineFilters.svelte b/frontend/src/lib/timeline/TimelineFilters.svelte
index 0ee2325e..96b3d6ef 100644
--- a/frontend/src/lib/timeline/TimelineFilters.svelte
+++ b/frontend/src/lib/timeline/TimelineFilters.svelte
@@ -42,14 +42,16 @@ function reset() {
 </script>
 
 {#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)}
+	<!-- §6 re-skin: bg-primary/text-primary-fg (active) · bg-surface/text-ink-2 (inactive)
+	     Typography: Montserrat 12px/700 tracking-[.08em] UPPERCASE; min-h-[44px] touch target -->
 	<button
 		type="button"
 		data-testid={testid}
 		aria-pressed={pressed}
 		onclick={toggle}
-		class="inline-flex min-h-[44px] items-center gap-2 rounded border px-3 font-sans text-sm transition-colors {pressed
+		class="inline-flex min-h-[44px] items-center gap-2 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none {pressed
 			? 'border-primary bg-primary text-primary-fg'
-			: 'border-line bg-muted text-ink-2 hover:bg-line'}"
+			: 'hover:bg-surface-2 border-line bg-surface text-ink-2'}"
 	>
 		<span
 			aria-hidden="true"
@@ -73,7 +75,7 @@ function reset() {
 			aria-expanded={open}
 			aria-controls={open ? 'timeline-filter-panel' : undefined}
 			onclick={() => (open = !open)}
-			class="inline-flex min-h-[44px] items-center gap-2 rounded border border-line bg-surface px-4 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
+			class="hover:bg-surface-2 inline-flex min-h-[44px] items-center gap-2 rounded-sm border border-line bg-surface px-4 font-sans text-xs font-bold tracking-[.08em] text-ink-2 uppercase transition-colors"
 		>
 			{hiddenCount === 0
 				? m.timeline_filter_trigger()