OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Update SVG styling to use CSS design tokens for immediate theme responsiveness

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-05 21:55:51 -04:00
parent cebad6e143
commit 1b4da5bbe3
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
theme/assets/css/main.css
View File

@@ -4437,6 +4437,16 @@ p:last-child { margin-bottom: 0; }
user-select: none; user-select: none;
overflow: visible; overflow: visible;
} }
/* SVG text / lines resolved from CSS design tokens so colours are correct
at first paint (before the JS animator fires) and update instantly on
theme toggle — CSS presentation-attribute override takes priority over
the hardcoded fill="…" attributes in the SVG markup. */
.dashboard-chart .ct,
.dashboard-chart .cv { fill: var(--color-text); }
.dashboard-chart .cl { fill: var(--color-text-muted); }
.dashboard-chart .grid-line { stroke: var(--color-border); }
.dashboard-chart #pie-center { fill: var(--color-bg); stroke: var(--color-border); }
.dashboard-chart #pie-center-text { fill: var(--color-text); }
/* Reduced-motion: JS already checks the media query, belt-and-suspenders */ /* Reduced-motion: JS already checks the media query, belt-and-suspenders */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.dashboard-chart .bar, .dashboard-chart .bar,