Twelve themes, and the Theme section folds away #8

2026-09-17T13:17:17-04:00

michael commented

2026-09-17 13:17:17 -04:00

The section folds

Theme now starts collapsed, wearing the same disclosure triangle as a module's config groups. A building picks its palette once, and the section was pushing the rest of the page down further with every swatch added.

Seven more palettes


Midnight	indigo night, violet
Moss	forest floor, lime
Plum	aubergine, purple
Sepia	warm brown room, cool teal — Ember's arrangement reversed
Blackout	true black, cyan, for a dark room where any glow off the screen carries
Paper	the warm light one, beside Daylight's cool white
Iron	no colour of its own: a near-white accent, so the only hues on screen are a module's own and the red and amber that mean something

Twelve in total. Each swaps the same eight palette variables and nothing else, so every module follows and a colour set on a tile itself still wins.

Held to the bar the first five set

Measured in the browser with every theme applied in turn:

text on panel 14.8:1 – 19.8:1 (the existing five: 14.9 – 17.8)
muted on panel 5.8:1 – 7.4:1, all above AA (existing: 5.8 – 6.9)
accent on panel 6.2:1 – 12.9:1 (existing: 4.4 – 10.8)
accent-text on accent 6.3:1 – 13.1:1 (existing: 4.4 – 9.6)

Every new theme is at or above the weakest existing one on each measure.

On the "accent nowhere near the danger red or the warning amber" rule, measured as hue separation: the narrowest of the new themes is Moss at 54° from its warn (its warn is pushed orange for exactly this reason), against Ember's existing 18°. Iron's accent is effectively neutral, which is its point.

Verified

GET /api/theme offers 12; every id has a matching html[data-theme="…"] block and every block has an id — checked both directions;
all 12 swatches render and apply, with the palette read back from the document each time;
the section is collapsed on load, opens and closes on click, and its summary takes keyboard focus;
Plum and Paper both checked on the dashboard itself, switching live from the server's broadcast with no reload — Paper being the new light theme, where the shell's chrome had to be confirmed.

🤖 Generated with Claude Code

### The section folds Theme now starts collapsed, wearing the same disclosure triangle as a module's config groups. A building picks its palette once, and the section was pushing the rest of the page down further with every swatch added. ### Seven more palettes | | | |---|---| | **Midnight** | indigo night, violet | | **Moss** | forest floor, lime | | **Plum** | aubergine, purple | | **Sepia** | warm brown room, cool teal — Ember's arrangement reversed | | **Blackout** | true black, cyan, for a dark room where any glow off the screen carries | | **Paper** | the warm light one, beside Daylight's cool white | | **Iron** | no colour of its own: a near-white accent, so the only hues on screen are a module's own and the red and amber that mean something | Twelve in total. Each swaps the same eight palette variables and nothing else, so every module follows and a colour set on a tile itself still wins. ### Held to the bar the first five set Measured in the browser with every theme applied in turn: - **text on panel** 14.8:1 – 19.8:1 (the existing five: 14.9 – 17.8) - **muted on panel** 5.8:1 – 7.4:1, all above AA (existing: 5.8 – 6.9) - **accent on panel** 6.2:1 – 12.9:1 (existing: 4.4 – 10.8) - **accent-text on accent** 6.3:1 – 13.1:1 (existing: 4.4 – 9.6) Every new theme is at or above the weakest existing one on each measure. On the "accent nowhere near the danger red or the warning amber" rule, measured as hue separation: the narrowest of the new themes is **Moss at 54°** from its warn (its warn is pushed orange for exactly this reason), against **Ember's existing 18°**. Iron's accent is effectively neutral, which is its point. ### Verified - `GET /api/theme` offers 12; every id has a matching `html[data-theme="…"]` block and every block has an id — checked both directions; - all 12 swatches render and apply, with the palette read back from the document each time; - the section is collapsed on load, opens and closes on click, and its summary takes keyboard focus; - Plum and Paper both checked on the dashboard itself, switching live from the server's broadcast with no reload — Paper being the new light theme, where the shell's chrome had to be confirmed. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

michael added 1 commit 2026-09-17 13:17:17 -04:00

Twelve themes, and the Theme section folds away ea1eac1c28

Seven more palettes: Midnight (indigo, violet), Moss (forest floor, lime),
Plum (aubergine, purple), Sepia (warm brown with a cool teal — Ember's
arrangement reversed), Blackout (true black for a dark room, where any glow
off the screen carries), Paper (the warm light one, next to Daylight's cool
white) and Iron, which has no colour of its own: its accent is near-white, so
the only hues on screen are a module's own and the red and amber that mean
something.

Each holds the line the first five set. Text on panel lands between 14.8:1
and 19.8:1, muted between 5.8:1 and 7.4:1, and every accent clears its own
theme's danger red and warning amber by more than Ember already does — the
narrowest of the new ones is Moss at 54 degrees of hue, against Ember's 18.

The Theme section now starts folded, wearing the same disclosure triangle as
a module's config groups. A building picks its palette once and then wants
the rest of the page, which was getting further down the screen with every
swatch.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

michael added 1 commit 2026-09-17 13:22:28 -04:00

The folding section reads as a heading first f72170b4e1

Theme's title was coming out at the normal weight — <summary> does not
inherit an <h1>'s boldness, so sitting it under .admin-h1 got the size,
colour and spacing but not the type. It now matches the other section
headings exactly.

The caret moved to the right of the words. A marker in front pushes the
heading out of line with every other one on the page; behind it, the section
still reads as "Theme" first and the caret only says there is more.

Written as the pattern rather than as Theme's own styling: any section that
folds is a <details class="admin-fold"> headed by a
<summary class="admin-h1 admin-fold-title">, and the whole row is the target.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

michael merged commit 3009b39453 into main

2026-09-17 15:52:27 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: michael/ProdDash#8