bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard: text & line greys driven by theme L/C/H

Browse source 
The static fg/fg-dim/fg-mute/line/line-soft hex values are now
oklch() expressions that read the theme's L, C, and H. Each keeps
its prior base lightness (93/63/38/18/22%, matching the previous
greys at default settings) plus a small bias from how far the L
slider has moved from 70% — so the text greys track the theme's
brightness without ever leaving the readable contrast range — and
a fractional chroma so they pick up a hint of the theme hue when
the C slider is cranked up.

Falls back to the same numerics in static form when --theme-l
etc. aren't yet set (briefly during initial page load before JS
runs).
This commit is contained in:
Max Gorog 2026-05-08 01:30:10 -05:00
parent 8643192a71
commit 058970de76
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
training/dashboard/static/dashboard.css
View file

@ -18,11 +18,35 @@
--bg-rgb: 7, 9, 13;
--bg-elev: #0d1117;
--bg-elev2: #161b22;
--fg: #e6edf3;
--fg-dim: #8b949e;
--fg-mute: #484f58;
--line: #1c2128;
--line-soft: #21262d;
/* Text & line greys derive from the theme's L/C/H so the
lightness and chroma sliders nudge them too. Each rule keeps
a fixed base lightness (matching the previous static grey)
plus a small bias scaled from how far the L slider moved
from 70% (its default), and a fractional chroma so the greys
pick up a hint of the theme hue at higher saturations.
Falls back to the static base values if --theme-l etc. aren't
set yet (initial load before JS runs). */
--fg: oklch(
calc(93% + (var(--theme-l, 70%) - 70%) * 0.06)
calc(var(--theme-c, 0.15) * 0.10)
var(--theme-h, 250));
--fg-dim: oklch(
calc(63% + (var(--theme-l, 70%) - 70%) * 0.10)
calc(var(--theme-c, 0.15) * 0.15)
var(--theme-h, 250));
--fg-mute: oklch(
calc(38% + (var(--theme-l, 70%) - 70%) * 0.07)
calc(var(--theme-c, 0.15) * 0.12)
var(--theme-h, 250));
--line: oklch(
calc(18% + (var(--theme-l, 70%) - 70%) * 0.03)
calc(var(--theme-c, 0.15) * 0.06)
var(--theme-h, 250));
--line-soft: oklch(
calc(22% + (var(--theme-l, 70%) - 70%) * 0.03)
calc(var(--theme-c, 0.15) * 0.08)
var(--theme-h, 250));
--accent: #58a6ff;
--accent-soft: rgba(88, 166, 255, 0.15);
--warn: #f85149;

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=d67ea2b3">
<link rel="stylesheet" href="/static/dashboard.css?v=6d01a682">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0