marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests Actions 1 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;