From bfe66569d7e7d3b6277b9b3ecd0376ab2ffa9155 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 11:10:49 +0200
Subject: [PATCH] feat(timeline): paint the axis with a three-stop gradient
 (REQ-006)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The spine now runs mint → navy → slate, matching the spec's life-thread,
using --palette-mint / --palette-navy / --c-tag-slate (no --palette-slate
token exists). Semantic tokens only — no raw hex.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/TimelineView.svelte |  4 ++-
 .../lib/timeline/TimelineView.svelte.spec.ts  | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/timeline/TimelineView.svelte b/frontend/src/lib/timeline/TimelineView.svelte
index 57c4de1f..05cf72e4 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte
+++ b/frontend/src/lib/timeline/TimelineView.svelte
@@ -100,7 +100,9 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 	bottom: 0;
 	left: 0.5rem;
 	width: 2px;
-	background: linear-gradient(var(--palette-mint), var(--palette-navy));
+	/* Three-stop life-thread: mint → navy → slate. Slate lives only as
+	   --c-tag-slate (there is no --palette-slate). REQ-006/013. */
+	background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate));
 }
 
 @media (min-width: 1024px) {
diff --git a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
index 07d96a80..7616f32b 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
+++ b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
@@ -240,6 +240,31 @@ describe('TimelineView', () => {
 		expect(document.body.textContent).toContain('Geburt');
 	});
 
+	it('paints the axis with a three-stop mint→navy→slate gradient (REQ-006)', () => {
+		// The palette tokens live in layout.css, which component tests don't load,
+		// so define exactly the three the gradient must reference; an undefined
+		// fourth token would invalidate the declaration and yield "none".
+		const root = document.documentElement;
+		root.style.setProperty('--palette-mint', '#a1dcd8');
+		root.style.setProperty('--palette-navy', '#012851');
+		root.style.setProperty('--c-tag-slate', '#607080');
+		try {
+			render(TimelineView, {
+				timeline: makeTimelineDTO({ years: [makeYear(1914, [makeEntry()])] })
+			});
+			const axis = document.querySelector('.timeline-axis') as HTMLElement;
+			expect(axis).not.toBeNull();
+			const bg = getComputedStyle(axis, '::before').backgroundImage;
+			expect(bg).toContain('gradient');
+			// three colour stops: mint, navy, slate
+			expect((bg.match(/rgb/g) ?? []).length).toBe(3);
+		} finally {
+			root.style.removeProperty('--palette-mint');
+			root.style.removeProperty('--palette-navy');
+			root.style.removeProperty('--c-tag-slate');
+		}
+	});
+
 	it('places consecutive letter cards on alternating sides (REQ-004 surrogate)', () => {
 		const letters = Array.from({ length: 4 }, (_, i) => makeEntry({ documentId: `d${i}` }));
 		render(TimelineView, { timeline: makeTimelineDTO({ years: [makeYear(1909, letters)] }) });