aboutsummaryrefslogtreecommitdiff
path: root/scripts/theme-selector/theme-selector.html
Commit message (Collapse)AuthorAgeFilesLines
* feat(theme-selector): org-mode bespoke preview (tier-3 phase 4)Craig Jennings34 hours1-1/+30
| | | | I added renderOrgPreview, a mock org document painted live from the org package faces. It exercises the prominent ones in context: document title, headings with their heights, a TODO and a DONE, tags, a scheduled timestamp, a property drawer, inline code and verbatim, a link, a checkbox, a quote, a src block with begin and end lines, and a header-row table. The preview pane now dispatches on the app's preview key, so org-mode gets this bespoke document and every other app keeps the generic face-name list until its own preview lands. It rebuilds on any package-face or palette edit.
* feat(theme-selector): package-faces table UI (tier-3 phase 3)Craig Jennings34 hours1-7/+56
| | | | | | I added the package faces section: an application selector for org-mode, magit, and elfeed, and a face table for the chosen app with a foreground and background dropdown, bold and italic toggles, an inherit dropdown (base faces plus the app's own faces), a relative-height stepper, a live contrast readout on the effective inherit-resolved color, and a per-face reset, plus a per-app reset and a text filter for the large sets. The right pane shows a generic preview, each face name in its own resolved colors, which the bespoke org/magit/elfeed previews replace in the next phases. The fg/bg dropdown is now a shared colorDropdown helper that the ui-faces table also uses, so there's no forked control. Palette edits propagate to package faces, and import and export carry them through.
* feat(theme-selector): curated org/magit/elfeed face data (tier-3 phase 2)Craig Jennings34 hours1-1/+1
| | | | | | I filled the APPS registry with the complete own-defface sets: 88 org faces including org-agenda, 98 magit, and 13 elfeed, built from embedded face-name lists plus a curated seed-color map. Prominent faces are seeded with palette colors, heading heights, and the fixed-pitch inherits that keep code and tables monospace under variable-pitch prose. The long tail seeds to the default foreground for the user to tune. Org headings carry their heights, agenda dates and deadlines are colored by role, and magit's diff, branch, and section faces map to the palette's greens, reds, and blues. No UI yet. That's phase 3, and the schema self-test still passes while seeding all 199 faces.
* feat(theme-selector): full category coverage, elements rename, visible tile ↵Craig Jennings34 hours1-6/+6
| | | | | | | | borders I renamed the assignments column "category" to "elements" and gave every language sample a token for each category that applies to it, so clicking an element name flashes real code in any language: Python gained a regexp, Elisp/Go/TypeScript/C each a builtin, and Go and Shell an escape. The categories a language genuinely lacks (Elisp has no preprocessor, Shell no types) fall back to flashing the example cell. The save area header is now "export, import, and save", and the palette tiles and the picker swatch carry a visible border so a tile that matches the page background still reads.
* feat(theme-selector): category-flash, full-height mock, contrast-limit maskingCraig Jennings35 hours1-7/+22
| | | | I made three preview and picker fixes. Clicking a category name in the code/color assignments table now flashes the matching tokens in the code sample, the reverse of clicking a token to flash its row, and falls back to flashing the example cell when the language has no token of that category. The live buffer preview now syncs its height to the ui-faces table so the two end together. The picker gains an any / AA+ / AAA limit: the saturation-value square masks the region that fails the chosen contrast against the background, and the reuse chips dim the colors that don't pass, so it's hard to land on an illegible color.
* feat(theme-selector): black/white anchors, locked ground/fg tiles, ↵Craig Jennings35 hours1-9/+19
| | | | | | | | save/export/import I made the ground default pure black and the default text pure white, the two anchors the whole theme is judged against. The palette tiles holding the current background and foreground are now locked, showing a small lock instead of the remove ×, so the contrast reference can't be deleted out from under everything. The save/load row is relabeled and the buttons stay right-aligned: export is always a fresh download, import loads a file, and show toggles the JSON box. A save button appears once a theme name is entered and uses the File System Access API to write the same file in place on repeat saves, falling back to a download where that API isn't available.
* feat(theme-selector): enlarge the color pickerCraig Jennings35 hours1-9/+9
| | | | I doubled the picker's saturation/value square to 400x320 and scaled the hue slider, readout, and chips to match. The cursor positioning now reads the live element dimensions instead of hardcoded sizes, so the markers stay correct at any size and a future resize needs no JS change.
* feat(theme-selector): custom in-page color pickerCraig Jennings35 hours1-11/+46
| | | | | | I replaced the native OS color swatch with an in-page picker, since the native one couldn't be sized or restyled and had no clean way to apply and dismiss. Clicking the swatch opens a popup with a saturation/value square and a hue slider you drag, a live hex plus AAA/AA/FAIL contrast readout, and the current palette as clickable chips for grabbing an exact existing color. It writes to the hex field, so add and update work unchanged, and it closes on click-away or when you commit a color. The HSV math is self-contained and the contrast readout reuses the existing helpers, so there's no dependency. A hash-guarded #pick hook opens the picker for headless screenshot verification, the same pattern as the #selftest harness.
* feat(theme-selector): click-to-move arrows for palette tilesCraig Jennings36 hours1-7/+14
| | | | Dragging the palette tiles with native HTML5 drag was fiddly: small drop targets, no feedback, and the name field inside each tile fought the grab. I added small move-left and move-right arrows on each tile's bottom corners, so reordering is one click and needs no dragging. The first tile drops its left arrow and the last drops its right. Drag still works for anyone who prefers it, now with a dashed outline marking the drop target while you drag.
* feat(theme-selector): add relative height to the package-face schemaCraig Jennings36 hours1-8/+10
| | | | | | I folded a relative height field into the tier-3 spec and brought Phase 1's schema in line. A face's height is a float multiplier off the base font (1.3 is 1.3x the running font, never a point size), so it stays portable across fonts and machines, and it's omitted from export at 1.0. The font family itself stays in font-config.el, where it belongs; the theme owns only relative size. Height is read straight off the face and does not cascade through inherit, because Emacs multiplies float heights along an inherit chain and headings should each size off the body, not compound off the level above. The org starter now seeds heading heights and the fixed-pitch inherits that keep code and tables monospace under variable-pitch prose. The self-test gained a height assertion and still reports PASS.
* feat(theme-selector): show every ui face in the mock frameCraig Jennings36 hours1-10/+18
| | | | The live buffer preview was incomplete. It skipped highlight, isearch-fail, show-paren-mismatch, and vertical-border, and the fringe was painted its ground-colored default so it read as absent. The mock now renders all twenty ui faces: a highlighted line, a failing isearch in the echo area, a mismatched paren, and a vertical-border strip down the buffer's right edge. The fringe column is wider with a hairline edge so the gutter is locatable even at ground color, and the buffer runs a dozen lines to fit everything.
* feat(theme-selector): add package-face state and schema (tier-3 phase 1)Craig Jennings36 hours1-2/+23
| | | | | | I laid the tier-3 foundation: an APPS registry (org starter for now) and a PKGMAP holding {fg,bg,bold,italic,inherit,source} per face. Pure helpers seed PKGMAP from APPS defaults, build the export per the state policy, and merge an import back in. Export gains a packages key when any package face is present, and import reads it while old JSON with no packages key still loads cleanly onto the seeded defaults. No UI yet — that's phase 3. A #selftest harness, guarded by the URL hash so it never shows in normal use, runs seed to export to import and checks the round-trip, old-JSON merge, and inherit/source survival. Headless Chrome reports PASS, which is how I verified the schema end-to-end against the real emitted code rather than a copy.
* fix(theme-selector): stop accidental duplicate colors when editing a valueCraig Jennings42 hours1-8/+16
| | | | Editing a color's value could create a new color instead of updating it. Enter in the hex or name field now applies to the selected color rather than adding, and Add color refuses a name that already exists with a noticeable inline notice, so re-saving an existing color can't silently spawn a duplicate. Picking from the native swatch focuses the hex field so Enter applies right after, and both add and update report what happened in the same notice line.
* feat(theme-selector): click a preview token to flash its assignment rowCraig Jennings42 hours1-15/+24
| | | | | | I added the reverse lookup. Clicking a token in the code sample flashes the matching code/color assignment row and scrolls it into view; clicking an element in the mock frame flashes its ui-faces row, or the assignment row when it's a code token. Each token carries its category and each mock element its face as a data attribute, so the lookup survives sorting, reassignment, and palette edits. Going color-first can't tell you which category owns a shared color, since operator, function, and punctuation all read as silver. Clicking the token answers it directly.
* feat(theme-selector): edit palette colors in place, taller mock frameCraig Jennings43 hours1-15/+29
| | | | | | I made palette colors editable. Click a chip and its hex and name load into the editor and the chip is selected. "Update selected" rewrites that entry and remaps every syntax and ui assignment from the old hex to the new, so nudging a color no longer means redoing the assignments that used it. "Add color" still appends a fresh one. The ui-faces mock frame now stretches to the height of its face table, with the buffer filling and the mode-line pinned to the bottom like a real window. I also renamed "interface faces" to "ui faces."
* feat(theme-selector): add a live mock Emacs frame for the interface facesCraig Jennings43 hours1-2/+50
| | | | | | I split the interface-faces row into the face table on the left and a mock Emacs buffer on the right. The mock paints the faces in context: line numbers and fringe, a current line with hl-line and the current-line number, a region selection, an isearch match, a lazy-highlight, a show-paren match, a block cursor, active and inactive mode-lines, and a minibuffer prompt with an echo line for link, error, warning, and success. It rebuilds whenever a syntax or interface color changes, so it always reflects the current theme. The face table told you each color. The mock shows what they look like together in a real buffer.
* feat(theme-selector): two-column layout, contrast ratings, taller samplesCraig Jennings43 hours1-36/+59
| | | | | | | | I restructured the page into ordered rows. The top row splits palette on the left and save / load theme on the right. The next row, "code/color assignments," puts the assignment table on the left and a single code sample on the right, picked by a language dropdown and recolored live from the assignments. The last row is the interface faces. I added a contrast column to the assignment table: each color's WCAG ratio on the current background plus an AAA / AA / FAIL rating, recomputed live and re-rated when the background changes. I also replaced the six-language scroll with the one-language picker, lengthened every sample to roughly the height of the assignment table, and renamed the title suffix to "theme."
* feat(theme-selector): add browser-based theme design toolCraig Jennings44 hours1-0/+160
A self-contained tool for building Emacs color themes by eye. generate.py emits one HTML page with six languages of tree-sitter-tokenized code, a category-to-color assignment table, a UI-faces table, and an editable palette. Reassign colors from the palette, toggle weight and slant per category, set foreground and background per UI face, then export a theme.json a later build step turns into theme files. The export carries the name, palette, syntax assignments, bold and italic sets, and a ui object of per-face foreground and background. The theme name is both the json name field and the download filename. samples.py holds the language samples and the default color map. theme-selector.html is the generated output. The json-to-theme converter is the next piece, and the part worth TDD.