From 5d749b2415e9a93f20f2d572957d12e35c0c3c72 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 11:05:06 +0200
Subject: [PATCH] refactor(documents): move timeline CSS vars to layout.css
 (#385)

Defining --timeline-bar-idle / --timeline-bar-outside on :root from
inside a scoped <style> block leaks the contract into the global
namespace via component-local CSS, even though the selector itself
makes it work. Move both variables to layout.css next to the other
--palette / --c-* design tokens; the component <style> now only
consumes them.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/document/TimelineBars.svelte | 15 +++------------
 frontend/src/routes/layout.css                | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/document/TimelineBars.svelte b/frontend/src/lib/document/TimelineBars.svelte
index cac4c180..6466edde 100644
--- a/frontend/src/lib/document/TimelineBars.svelte
+++ b/frontend/src/lib/document/TimelineBars.svelte
@@ -81,18 +81,9 @@ function barHeight(count: number): number {
 </div>
 
 <style>
-:root {
-	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
-	--timeline-bar-outside: var(--c-line);
-}
-
-:global(.dark) {
-	/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
-	   for large UI elements; previous #0d3358 measured 1.44:1. */
-	--timeline-bar-idle: #3a6e8c;
-	--timeline-bar-outside: #1a2735;
-}
-
+/* Timeline-specific tokens (--timeline-bar-idle, --timeline-bar-outside) live
+   in layout.css next to the rest of the design tokens; this <style> only
+   consumes them. */
 .bar .bar-fill {
 	background-color: var(--timeline-bar-idle);
 	transition: background-color 100ms ease;
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index f44f295c..fd4912fe 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -152,6 +152,10 @@
 	--c-badge-unknown-bg: #fdf4e3;
 	--c-badge-unknown-text: #7a5a0a;
 	--c-badge-unknown-border: #f0ddb3;
+
+	/* Timeline density bars (issue #385) */
+	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
+	--timeline-bar-outside: var(--c-line);
 }
 
 /* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -223,6 +227,11 @@
 		--c-tag-moss: #70b060;
 		--c-tag-sand: #c0a060;
 		--c-tag-coral: #f07060;
+
+		/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
+		   clears WCAG 1.4.11 non-text contrast for large UI elements. */
+		--timeline-bar-idle: #3a6e8c;
+		--timeline-bar-outside: #1a2735;
 	}
 }
 
@@ -290,6 +299,11 @@
 	--c-tag-moss: #70b060;
 	--c-tag-sand: #c0a060;
 	--c-tag-coral: #f07060;
+
+	/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
+	   clears WCAG 1.4.11 non-text contrast for large UI elements. */
+	--timeline-bar-idle: #3a6e8c;
+	--timeline-bar-outside: #1a2735;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */