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

refactor(documents): move timeline CSS vars to layout.css (#385)

Browse Source 
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>
This commit is contained in:
Marcel
2026-05-08 11:05:06 +02:00
parent 1d6016cb19
commit 5d749b2415
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/lib/document/TimelineBars.svelte
View File

@@ -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;

14
frontend/src/routes/layout.css
View File

@@ -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> ──── */