#+TITLE: theme-selector — package faces (tier 3), starting with org-mode
#+AUTHOR: Craig Jennings
#+DATE: 2026-06-07
* Status
Spec / Craig's first-round answers folded in (2026-06-07). Proposes a third tier
for the theme-selector (scripts/theme-selector/) that lets a theme colorize
package-specific faces, built one application at a time. v1 apps: org-mode
(incl. org-agenda), magit, elfeed. Two items still open: Craig's confirm on the
inheritance representation, and whether to build the custom color picker before,
during, or after tier 3. A Codex review file was referenced but is not present
in the repo (see iteration history); when it lands as
=theme-selector-package-faces-review.org=, run spec-response against it.
* Background — the three tiers
The theme-selector already models two tiers of faces:
1. *Syntax* — the font-lock / tree-sitter categories (keyword, string, type,
comment, etc.), in the "code/color assignments" table.
2. *UI* — Emacs's built-in interface faces (cursor, region, mode-line, fringe,
line numbers, isearch, and the rest), in the "ui faces" table with the live
mock-frame preview.
Tier 3 is *package faces*: faces a package declares with =defface= so a theme
can color the package as it wishes. The running config has 1,146 such faces
across 186 packages (magit 111, lsp-mode 97, telega 91, web-mode 82, org ~30
core, and a long tail). No theme colors all of them; quality themes hand-pick
the packages the user actually lives in and theme those.
This spec adds a tier-3 section to the tool, structured so applications are
added one at a time. org-mode ships first.
* Goal
A new "package faces" section with:
1. An *application dropdown* — pick which package's faces to edit. v1 ships
org-mode (including org-agenda), magit, and elfeed; the rest of Craig's
packages (calibredb, ghostel, mu4e, IRC, org-drill, dirvish + dired, slack)
follow one at a time.
2. A *face table* for the selected app — one row per curated face, each with a
foreground dropdown, a background dropdown, and bold / italic toggles, all
drawing from the same palette as the other tables.
3. A *preview pane* for the selected app — a realistic mock of that package
rendered with the live theme, the way the ui-faces mock-frame shows the UI
faces in a buffer. org-mode gets a mock org document.
The export (=theme.json=) gains a =packages= object so the build step can set
these faces too.
* UI placement
A new top-level section under the ui-faces row:
#+begin_example
package faces
[ application: (org-mode v) ]
left = the selected app's face table (fg / bg / B / I per face)
right = the selected app's preview pane (e.g. the org document mock)
#+end_example
Same two-column stretch layout as the ui-faces row, so the preview matches the
table's height.
* Data model
A single data structure drives everything, keyed by application:
#+begin_src js
APPS = {
"org-mode": {
label: "org-mode",
faces: [
// face, human label, default {fg, bg, bold, italic}
["org-document-title", "document title", {fg:"gold", bold:true}],
["org-level-1", "heading 1", {fg:"blue", bold:true}],
["org-level-2", "heading 2", {fg:"gold"}],
["org-level-3", "heading 3", {fg:"regal"}],
["org-todo", "TODO keyword", {fg:"terracotta", bold:true}],
["org-done", "DONE keyword", {fg:"sage", bold:true}],
["org-link", "link", {fg:"blue"}], // base `link`
["org-code", "inline code", {fg:"terracotta"}],
["org-verbatim", "verbatim", {fg:"steel"}],
["org-block", "src block body", {fg:"white", bg:"bg-dim"}],
["org-block-begin-line","block delim", {fg:"pewter", bg:"bg-dim"}],
["org-table", "table", {fg:"steel"}],
["org-date", "timestamp", {fg:"steel"}],
["org-tag", "tag", {fg:"tan"}],
["org-special-keyword","keyword/drawer", {fg:"pewter"}],
["org-meta-line", "#+meta line", {fg:"pewter"}],
["org-checkbox", "checkbox", {fg:"gold"}],
["org-headline-done", "done headline", {fg:"pewter"}],
],
preview: "org" // names the preview renderer
},
// magit, elfeed, ... added later with the same shape
}
#+end_src
Defaults reference palette *names* (blue, gold, ...) resolved to hexes at load,
so a curated app seeds sensibly from the current palette. The user reassigns
any face from the palette dropdowns exactly like the other tables.
State mirrors the other tiers: a =PKGMAP= of
={app: {face: {fg, bg, bold, italic, inherit}}}=, edited live, rendered into
the table and the preview. The =APPS= block above shows ~18 org faces only as a
shape illustration; the real org entry is the complete set below.
** Data model — org face set (complete)
Per the completeness decision, org's table lists org's entire own =defface= set
(org-faces.el + org-agenda.el), ~88 faces, grouped. Seed defaults for the
prominent groups; the long tail seeds to fg or an =inherit= of its group base,
which the user overrides. The groups (face names verbatim from the running
Emacs):
- *Document:* org-document-title, org-document-info, org-document-info-keyword
- *Headings:* org-level-1 .. org-level-8, org-headline-todo, org-headline-done
- *Status / keywords:* org-todo, org-done, org-priority, org-tag, org-tag-group,
org-special-keyword, org-drawer, org-property-value, org-checkbox,
org-checkbox-statistics-todo, org-checkbox-statistics-done, org-warning
- *Links / dates / refs:* org-link, org-footnote, org-date, org-sexp-date,
org-date-selected, org-target, org-macro, org-cite, org-cite-key
- *Blocks / code / quote:* org-block, org-block-begin-line, org-block-end-line,
org-code, org-verbatim, org-inline-src-block, org-quote, org-verse,
org-latex-and-related
- *Tables / columns:* org-table, org-table-header, org-table-row, org-formula,
org-column, org-column-title
- *Lists / meta / structure:* org-list-dt, org-meta-line, org-ellipsis,
org-hide, org-indent, org-archived, org-default, org-dispatcher-highlight
- *Agenda — structure & dates:* org-agenda-structure,
org-agenda-structure-secondary, org-agenda-structure-filter, org-agenda-date,
org-agenda-date-today, org-agenda-date-weekend, org-agenda-date-weekend-today,
org-agenda-current-time, org-agenda-done, org-agenda-dimmed-todo-face
- *Agenda — calendar & filters:* org-agenda-calendar-event,
org-agenda-calendar-sexp, org-agenda-calendar-daterange, org-agenda-diary,
org-agenda-clocking, org-agenda-column-dateline, org-agenda-restriction-lock,
org-agenda-filter-category, org-agenda-filter-effort, org-agenda-filter-regexp,
org-agenda-filter-tags
- *Scheduling / deadlines / clock:* org-scheduled, org-scheduled-today,
org-scheduled-previously, org-upcoming-deadline, org-upcoming-distant-deadline,
org-imminent-deadline, org-time-grid, org-clock-overlay, org-mode-line-clock,
org-mode-line-clock-overrun
The org *preview* below stays a curated document exercising the prominent
faces; the *table* carries the complete set so every face is assignable, even
the ones the preview doesn't draw. magit and elfeed get the same treatment
(complete own-defface set in the table, a bespoke preview for the common faces).
* The org preview
A mock org document painted from PKGMAP["org-mode"] plus the palette ground/fg.
One bespoke renderer (=renderOrgPreview()=) drawing a representative document:
#+begin_example
#+TITLE: Project Notes <- org-document-title
#+AUTHOR: ... <- org-meta-line / document-info
* Inbox :work: <- org-level-1 + org-tag
** TODO Draft the spec <- org-level-2 + org-todo
SCHEDULED: <2026-06-08 Sun> <- org-special-keyword + org-date
** DONE Ship the tool <- org-level-2 + org-done (headline-done)
*** Heading three <- org-level-3
A line with =inline code=, <- org-code
~verbatim~, and a [[link]]. <- org-verbatim + org-link
- [X] a checkbox item <- org-checkbox
#+begin_src elisp <- org-block-begin-line
(message "hi") <- org-block
#+end_src <- org-block-end-line
| name | hex | <- org-table (header row org-table-header)
|------+---------|
| blue | #67809c |
#+end_example
Each marked element is a span colored from the corresponding PKGMAP face. The
preview rebuilds whenever a package face or the palette changes, same as the
mock frame.
org, magit, and elfeed get bespoke preview renderers (magit -> a status buffer
mock, elfeed -> a search-list mock). Every *other* package is still fully
themeable: its face *table* is always present and editable, only the rich
*preview* is replaced by a generic fallback — each face's name rendered in its
own colors on the ground. So a user can theme every package they have the
moment its face list is added; the bespoke preview is a polish layer on top, not
a gate. This is the v1 answer to "some will want to touch every package."
* Export schema
=theme.json= gains a =packages= key:
#+begin_src json
{
"name": "dupre",
"palette": [...],
"assignments": {...},
"bold": [...], "italic": [...],
"ui": {...},
"packages": {
"org-mode": {
"org-level-1": {"fg":"#67809c","bg":null,"bold":true,"italic":false,"inherit":null},
"org-level-2": {"fg":"#e8bd30","bg":null,"bold":false,"italic":false,"inherit":"org-level-1"},
"org-todo": {"fg":"#cb6b4d","bg":null,"bold":true,"italic":false,"inherit":null}
}
}
}
#+end_src
=inherit= is optional and =null= when absent. When set, the converter writes
=:inherit PARENT= plus only the overridden attributes.
Only faces the user actually touched (or the curated defaults) are written. The
build step's converter sets each as a normal face. Backward compatible: a file
without =packages= loads fine.
* Build-step consumption
The eventual =theme.json= -> =dupre-*.el= converter already owns tiers 1 and 2.
Tier 3 adds, per package face:
#+begin_src elisp
(org-level-1 ((t (:foreground "#67809c" :weight bold))))
(org-todo ((t (:foreground "#cb6b4d" :weight bold))))
#+end_src
No new converter machinery — package faces are just more faces. This is the
TDD-worthy part (JSON in, valid faces out), same as the rest of the converter.
* Scope for v1
- Build the section, the app dropdown, and the face tables + previews for the
three v1 apps: org-mode (incl. org-agenda), magit, elfeed.
- org's table carries its complete own-defface set (~88 faces, grouped above),
seeded with defaults; the org preview draws the prominent ones.
- Every other installed package is reachable in the dropdown with an editable
face table and the generic fallback preview, so any package can be themed.
- Wire export/import of the =packages= key (with the optional =inherit= field).
- Leave the converter for the separate build-step task (Elisp, per Craig); the
spec only needs the schema to be right.
* Extensibility (adding the next app)
1. Add an entry to =APPS= (label, curated face list with palette-name defaults,
preview key).
2. Optionally write a bespoke preview renderer; until then the generic fallback
renders.
3. Nothing else changes — the dropdown, table, export, and import are all
data-driven off =APPS= / =PKGMAP=.
* Agreed decisions
Craig's answers to the first review round, baked in (the body sections above
reflect these; this records the decisions):
1. *Curated set is complete, not iterative.* For org, list its *entire* own
defface set (org-faces.el + org-agenda.el), ~88 faces, not a hand-picked
~18. The user wants every choice present, not a set that grows on demand.
See "Data model — org face set" for the full grouped list.
2. *Seed curated defaults.* Seed sensible fg/bg and weight per face (headings,
title, TODO/DONE bold; agenda dates and deadlines colored by role). The user
reassigns from there.
3. *App order: org, magit, elfeed for v1.* Then the rest one at a time, drawn
from the packages Craig actually runs: calibredb, ghostel, mu4e, the IRC
client, org-drill, dirvish + dired, slack. A finite "most-used" list gets
picked later; we do not try to do everything at once.
4. *Generic fallback is real, not display-only.* Any package not given a
bespoke preview still gets a fully editable face table (so a user can theme
*every* package they have); only the rich preview is missing, replaced by a
swatch-in-context fallback. Bespoke previews ship for org, magit, elfeed.
* Inheritance representation (answer to Craig's question)
Craig asked how inheritance would be represented. Proposal:
Each face carries an optional =inherit= field naming another face (or =null=).
The face's own =fg/bg/bold/italic= are *overrides* layered on top of what it
inherits.
#+begin_src js
["org-level-2", "heading 2", {inherit:"org-level-1", fg:"gold"}]
// exports as: (org-level-2 ((t (:inherit org-level-1 :foreground "#e8bd30"))))
["org-agenda-date-today", "agenda today", {inherit:"org-agenda-date", bold:true}]
// exports as: (org-agenda-date-today ((t (:inherit org-agenda-date :weight bold))))
#+end_src
In the tool, an inheriting row shows an "inherits " chip; attributes left
unset render greyed (they come from the parent) until the user overrides one.
The converter writes =:inherit PARENT= followed by only the overridden
attributes.
*Recommendation: default to absolute values, offer inherit as opt-in.* Emacs
face inheritance surprises people — an inherited background or weight rides
along silently — so seeding every face with absolute attributes is the
predictable default. Inheritance is available for the cases where a cascade is
genuinely wanted (all heading levels off one base; agenda-date variants off
=org-agenda-date=), expressed with the =inherit= field above. This keeps the
common path obvious and the export deterministic, while still letting a user
model the relationships org itself uses.
Decision pending Craig's confirm: absolute-default with opt-in inherit (above),
or model inheritance for the face families that have it out of the box.
* Custom color picker (proposal)
Craig wants a custom in-page color picker to replace the native browser swatch.
The native == opens the OS color chooser, which the page
cannot size or restyle; a custom picker is the only way to get a larger,
on-theme picker and to show the palette/contrast in the picker itself.
Proposed widget — a popup anchored to the swatch, drawn in-page:
- A *saturation/value square* (click or drag to set S and V) plus a *hue
slider* down the side. Standard HSV picker geometry.
- A *hex field* synced both ways with the square/slider (already exists in the
add-color row; the picker writes to it).
- The current *palette* shown as clickable chips along the bottom, so picking
an existing color is one click and the overlap problem (many roles, one
color) is visible while choosing.
- A live *contrast readout* against the current background (ratio + AAA / AA /
FAIL) updating as the color moves, so a color is judged for legibility at
pick time, not after assignment.
- Sized generously (the native popup's size was the original complaint); opens
on click of the swatch, closes on pick or click-away.
Implementation: ~120 lines of vanilla JS/canvas (or CSS gradients) for the
square + slider, reusing the existing =rl()= / =contrast()= / =rating()=
helpers for the readout and =normHex()= for the field sync. No dependency. It
replaces the == in the add-color row and, later, becomes the
picker the package-face dropdowns can also invoke.
Open question for Craig: build the custom picker as its own task before tier 3,
fold it into the tier-3 build, or after. It is independent of package faces, so
any order works.
* Files touched
- =scripts/theme-selector/generate.py= — the section, =APPS= data, the package
face table, =renderOrgPreview()=, export/import of =packages=.
- =scripts/theme-selector/theme-selector.html= — regenerated.
- (later) the =theme.json= -> =dupre-*.el= converter (Elisp) — consumes
=packages=.
* Review and iteration history
** 2026-06-07 Sun @ 18:17:14 -0500 — Claude Code (emacs-d) — author + responder
- *What:* Folded Craig's first-round cj-comment answers into the body. Curated
org set changed from ~18 to org's complete own-defface set (~88, grouped, incl.
org-agenda). v1 apps fixed to org/magit/elfeed with the rest deferred to a
one-at-a-time list. Generic fallback clarified as a fully editable table for
every package (only the rich preview is bespoke). Answered the inheritance
question with an optional =inherit= field (absolute-default, opt-in cascade)
and added it to the schema. Added a custom-color-picker proposal at Craig's
request. Converted Open questions to Agreed decisions; two genuine opens
remain (inheritance confirm, picker timing).
- *Why:* Craig answered the five open questions inline and asked for the
spec-response fold plus a custom-picker proposal. Completeness over iterative
growth was his explicit call on the curated set.
- *Artifacts:* This spec. The converter language (Elisp) confirmed by Craig.
Note: Craig referenced a Codex spec review, but no
=theme-selector-package-faces-review.org= (or any =*-review.org=) exists in the
repo — the review file could not be found, so only the author-side cj-comment
fold was done; the Codex review remains to be processed when its file is
located.