From 440877965e8879f3c9567cf923b7c65c0eee227c Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sat, 11 Jul 2026 23:36:51 -0500 Subject: refactor(gallery): extract design tokens to one source for 3 targets The colors, glows, gradient ramp, and pulse rate were hardcoded literals scattered across ~40 sites in the gallery. Retuning the amber meant a find-and-replace through the whole file. I pulled them into tokens.json as the single source. gen_tokens.py reads that source and emits three targets: web CSS custom properties (into the gallery :root, between markers), waybar GTK @define-color declarations, and an elisp alist for the future svg.el renderer. The three genuinely differ (CSS --vars with rgb-triple glows, GTK @define-color with underscore names, elisp hex alist), which is why one generator beats three hand-maintained copies. The amber hue is defined once, and its glow triples are derived from the hex, so retuning it means editing one line and rerunning the generator. The gallery render is unchanged. I verified it pixel-identical against the prior commit with reduced-motion forced and the live clock masked (diff of 0). Tests cover hex conversion, the three emitters, marker replacement, and idempotency: 27 tests, 100% line coverage, wired into make test-unit. --- docs/prototypes/tokens.json | 46 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 docs/prototypes/tokens.json (limited to 'docs/prototypes/tokens.json') diff --git a/docs/prototypes/tokens.json b/docs/prototypes/tokens.json new file mode 100644 index 0000000..6974805 --- /dev/null +++ b/docs/prototypes/tokens.json @@ -0,0 +1,46 @@ +{ + "_note": "Single source of truth for the panel widget gallery's design tokens. Edit here, then run: python3 gen_tokens.py (regenerates the :root block in panel-widget-gallery.html plus tokens-waybar.css and tokens.el). The amber hue is defined once; its glow rgb triples are derived by the generator, so retuning amber is a one-line change here.", + "palette": { + "ground": "#151311", + "panel": "#100f0f", + "well": "#0a0c0d", + "raise": "#1a1917", + "silver": "#bfc4d0", + "cream": "#f3e7c5", + "steel": "#969385", + "dim": "#7c838a", + "slate": "#424f5e", + "slate-hi": "#54677d", + "wash": "#2c2f32", + "pass": "#74932f", + "fail": "#cb6b4d", + "phos": "#7fe0a0", + "phos-dim": "#1c3626", + "vfd": "#63e6c8", + "sevgrn": "#57d357", + "sevred": "#e2543f", + "sevoff": "#1a1613", + "jewel-r": "#ff5b45", + "jewel-a": "#ffb43a", + "jewel-g": "#6fce33" + }, + "amber": { + "gold": "#e2a038", + "gold-hi": "#ffbe54", + "amber-grad-top": "#f2c76a", + "amber-grad-mid": "#d29638", + "amber-grad-bot": "#8f671f", + "amber-edge": "#7d5c16", + "amber-warn": "#f0b552" + }, + "glow": { + "glow-hi": "gold-hi", + "glow-lo": "gold" + }, + "font": { + "mono": "\"BerkeleyMono Nerd Font\",\"Berkeley Mono\",monospace" + }, + "timing": { + "pulse-rate": "1s" + } +} -- cgit v1.2.3