diff options
Diffstat (limited to 'scripts/theme-studio/README.md')
| -rw-r--r-- | scripts/theme-studio/README.md | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/scripts/theme-studio/README.md b/scripts/theme-studio/README.md index 62034039..044ccc2e 100644 --- a/scripts/theme-studio/README.md +++ b/scripts/theme-studio/README.md @@ -8,6 +8,10 @@ Reassign colors against the palette, judge legibility with live WCAG-contrast readouts, then export a `theme.json` that a build step turns into `themes/<name>-*.el`. +For the color-assignment philosophy behind the tool — how to group syntax roles, +what to share, where to spend chroma and bold — see +[`theme-coloring-guide.org`](theme-coloring-guide.org). + ## Run ```bash @@ -26,6 +30,24 @@ During color work, disable Hyprland inactive-window dimming so colors read true: hyprctl keyword decoration:dim_inactive false ``` +## Tests + +```bash +make theme-studio-test # from the repo root, runs the whole pyramid +scripts/theme-studio/run-tests.sh # or call the runner directly +``` + +The runner regenerates the page, runs the Python templating tests +(`test_generate.py`), the Node unit tests for `colormath.js` +(`test-colormath.mjs`, including the inline-integrity check), a syntax check of +the spliced page script, and the browser hash gates in headless Chrome +(`#selftest`, `#cursortest`, `#readouttest`, `#deltatest`, `#oklchtest`, +`#planetest`). It exits non-zero on any failure. The browser gates need a +Chromium-family browser; without one they report SKIPPED rather than passing +silently. The pure color math and the extracted picker logic (`planeCell`, +`paletteWarnings`) live in `colormath.js` so they are unit-tested directly in +Node; the DOM glue is covered by the browser hash gates. + ## Files - `generate.py` — emits the HTML+JS, and embeds the package data. Edit here to @@ -47,6 +69,20 @@ Three tiers of faces, plus the palette: (saturation/value square, hue slider, palette reuse chips, live contrast readout, and an any / AA+ / AAA legibility mask). Remove, rename, reorder with arrows or drag. The colors serving as background and foreground are locked. + + The picker also shows perceptual readouts beside the WCAG ratio: the OKLCH + coordinates (lightness, chroma, hue°) and the APCA Lc contrast against the + ground color. APCA Lc is signed — positive means dark text on a light + background, negative means light text on a dark background — so a light color + on dupre's dark ground reads as a negative Lc. WCAG stays the rating used in + the syntax/UI/package tables; APCA and OKLCH are picker-only diagnostics. + + An edit-model toggle switches the picker between HSV and OKLCH, independent of + the contrast mask. In OKLCH mode the L/C/H dials drive the color and the square + becomes a Chroma×Lightness plane at the current hue, with the out-of-gamut + region greyed out; the hue strip selects the hue. Pushing chroma past sRGB + snaps to the reachable color and shows a clamp note. The palette also warns + when two colors fall below a perceptual ΔE threshold, hard to tell apart. - **Syntax** — every font-lock / tree-sitter category (keyword, string, function, type, comment, and the rest), each with normal/bold/italic and a contrast rating. Click a category to flash its tokens in the code; click a |