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

refactor(shared): re-skin PersonFilterBar + TimelineFilters to §6 tokens
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 6m7s
Details
CI / OCR Service Tests (pull_request) Successful in 23s
Details
CI / Backend Unit Tests (pull_request) Successful in 6m58s
Details
CI / fail2ban Regex (pull_request) Successful in 49s
Details
CI / Semgrep Security Scan (pull_request) Successful in 27s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m12s
Details
SDD Gate / RTM Check (pull_request) Successful in 14s
Details
SDD Gate / Contract Validate (pull_request) Successful in 24s
Details
SDD Gate / Constitution Impact (pull_request) Successful in 19s
Details

Browse Source 
Refs #857
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-16 19:03:11 +02:00
parent 94b8117c17
commit 3de3b2131f
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/person/PersonFilterBar.svelte
View File

@@ -54,10 +54,11 @@ function setReview(next: boolean) {
}); });
} }
// §6 tokens: Montserrat 12px/700 tracking-[.08em] UPPERCASE; 44px touch target
const chipBase = 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'; '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-brand-navy bg-brand-navy text-white'; const chipActive = 'border-primary bg-primary text-primary-fg';
const chipInactive = 'border-line bg-surface text-ink hover:bg-muted'; const chipInactive = 'border-line bg-surface text-ink-2 hover:bg-surface-2';
</script> </script>
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center"> <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">

8
frontend/src/lib/timeline/TimelineFilters.svelte
View File

@@ -42,14 +42,16 @@ function reset() {
</script> </script>
{#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)} {#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 <button
type="button" type="button"
data-testid={testid} data-testid={testid}
aria-pressed={pressed} aria-pressed={pressed}
onclick={toggle} 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-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 <span
aria-hidden="true" aria-hidden="true"
@@ -73,7 +75,7 @@ function reset() {
aria-expanded={open} aria-expanded={open}
aria-controls={open ? 'timeline-filter-panel' : undefined} aria-controls={open ? 'timeline-filter-panel' : undefined}
onclick={() => (open = !open)} 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 {hiddenCount === 0
? m.timeline_filter_trigger() ? m.timeline_filter_trigger()