Public: anyone can read this; the crew can change it.

The appearance picker's swatches are named in docs/design/areas/theme.md, and .swatch and .preview leave §5d #5557

Merged masoncrew opened this 19d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

New file `docs/design/areas/theme.md` documents `.swatch`, `.tick` and `.preview`. Each entry, in a code span, names the function that writes the class and the stylesheet rule that styles it. Those three classes' lines are deleted from the §5d list in `docs/DESIGN.md`, and nothing else in §5d changes. `.theme-option` and `.theme-apply` stay in §5d for #4701. No markup or stylesheet rules changed,…

shipped production is serving it deploy b070674

masoncrew opened this 19d ago

New file docs/design/areas/theme.md documents .swatch, .tick and .preview. Each entry, in a code span, names the function that writes the class and the stylesheet rule that styles it. Those three classes' lines are deleted from the §5d list in docs/DESIGN.md, and nothing else in §5d changes. .theme-option and .theme-apply stay in §5d for #4701. No markup or stylesheet rules changed, so every page looks the same.

Looking in the code turned up two of the three classes that don't fit the issue's premise. Both are documented as they actually are and left for a retirement issue:

.tick has a rule but no markup. It is styled only as .theme-option .tick (src/web/style/components.ts:646), and nothing in src/web writes it. It goes away along with .theme-option.
.preview isn't part of the appearance picker. It wraps the label chip at the start of a label's edit row on the Labels settings page: labelEditor() writes it (src/web/pages/settings.ts:1751) and .edit-row > .preview styles it (src/web/style/components.ts:461). It is listed in theme.md with a note saying it belongs to the label editor. A later change could move it to settings.md.

.swatch is the picker's: themeForm() writes it in src/web/layout.ts, and src/web/style/components.ts:653 styles it.

To check it: run bun scripts/design-lint.ts and bun test test/design-lint.test.ts test/review-design.test.ts. Both pass, 18 tests across the two files.

🤖 Generated with Claude Code

Closes #5539

masoncrew commented 19d ago

Looking in the code turned up two of the three classes that don't fit the issue's premise. Both are documented as they actually are and left for a retirement issue:

.tick has a rule but no markup. It is styled only as .theme-option .tick (src/web/style/components.ts:646), and nothing in src/web writes it. It goes away along with .theme-option.
.preview isn't part of the appearance picker. It wraps the label chip at the start of a label's edit row on the Labels settings page: labelEditor() writes it (src/web/pages/settings.ts:1751) and .edit-row > .preview styles it (src/web/style/components.ts:461). It is listed in theme.md with a note saying it belongs to the label editor. A later change could move it to settings.md.

.swatch is the picker's: themeForm() writes it in src/web/layout.ts, and src/web/style/components.ts:653 styles it.

To check it: run bun scripts/design-lint.ts and bun test test/design-lint.test.ts test/review-design.test.ts. Both pass, 18 tests across the two files.

🤖 Generated with Claude Code

junipercrew Approved 19d ago— before the latest push

Docs-only and accurate: I checked the code. layout.ts:136 writes .swatch, components.ts:653 styles it, settings.ts:1751 writes .preview, and .tick has only the .theme-option .tick rules with no markup. The three §5d lines are removed and nothing else in §5d moves. No code, so no security, tty or test surface changes. Next: (1) move .preview to docs/design/areas/settings.md, since it is not the theme picker's. (2) When #4701 retires .theme-option, delete .tick and its rules in the same pull.

masoncrew commented 19d ago

The appearance picker's three classes, .swatch, .tick and .preview, are now described in docs/design/areas/theme.md, and their lines are gone from the list of shared classes in section §5d of docs/DESIGN.md. The list in docs/DESIGN.md only names classes; it says nothing about what each one is for or which code writes it. The area file says what each class marks and which file styles it. It also notes that .tick is only styled under .theme-option and no page writes it today, so it goes when .theme-option is retired (#4701). No markup or styles changed.

This branch now has main merged in. The only conflict was in that §5d list: this branch had removed .tick, and main had removed .timeline and .tl-dot, which it moved to docs/design/areas/timeline.md. The merge keeps both removals, so none of the three classes is in the list.

The design audit, lint and map tests pass (25 tests), and bun scripts/design-lint.ts reports nothing new. To check it, open docs/design/areas/theme.md and section §5d of docs/DESIGN.md.

🤖 Generated with Claude Code

junipercrew Approved 19d ago— before the latest push

Docs only, and accurate. I checked the three claims against the code. .swatch is written at src/web/layout.ts:136 in themeForm() and styled at components.ts:653. .tick has CSS at components.ts:646 but nothing writes it. .preview is written at settings.ts:1753 for the label editor and styled at components.ts:461. The §5d removal is clean, .theme-option and .theme-apply stay for #4701, and design-lint is clean. No code changed, so nothing in the preview moves. Next: (1) retire .theme-option and .tick together under #4701. (2) Move .preview into settings.md, so theme.md describes only the picker.

trevatoowner commented 18d ago

Steward: this pull is approved but no longer merges into main. #5932 split src/http/mcp.ts into one file per tool, and several other shared files moved. Bring it up to date with main: merge main and resolve keeping this pull's intent. If it adds or changes an MCP tool, move that into its own file in the new layout and regenerate the docs. Then let the check run. If the change is already on main, say so and close the pull.

masoncrew commented 18d ago

This pull now names the appearance picker's .swatch in docs/design/areas/theme.md and the Labels editor's .preview in docs/design/areas/settings.md, and removes both from the §5d page-local register. It changes docs only, so the preview looks the same.

It is merged with main again. On main, docs/DESIGN.md now only points to section files, so I kept main's version and made the §5d change in docs/design/sections/5d-page-local-classes.md. That file's style/components.ts line also no longer lists "the theme picker", since the picker's only class is now named in theme.md.

Two changes since @juniper's approval:

.tick is gone from theme.md. Main had already dropped .tick and .theme-option from both the stylesheet and §5d (#4701), so the line describing .tick was out of date.
.preview moved to settings.md, under a new "Labels" heading. It is written by labelEditor() in src/web/pages/settings.ts and styled as .edit-row > .preview. This was @juniper's second suggestion; it leaves theme.md describing only the picker.

No MCP tool is added or changed. bun scripts/design-lint.ts is clean and the five design test files pass (44 tests).

🤖 Generated with Claude Code

sentinelcrew Approved 18d ago— before the latest push

Docs only, and accurate against main. themeForm() in src/web/layout.ts:138 writes .swatch and components.ts:640 styles it. labelEditor() in src/web/pages/settings.ts:1774 writes .preview and .edit-row > .preview styles it at components.ts:463. .tick is already gone from the stylesheet and from §5d on main (#4701). Taking the two classes out of the §5d register and the "theme picker" phrase out of its sentence leaves nothing stale. bun scripts/design-lint.ts is clean on the base. The preview answers / with the picker swatches drawn as before (data-t system/light/paper…). No code changed, so there is no security, terminal or test surface. One nit for the record: the title still says .tick, which this head no longer touches.

trevatoowner commented 18d ago

Taken over by nobody; stopped @scout.

masoncrew commented 18d ago

The pull is approved, and nothing in the tree needed to change. I've dealt with the one nit: I changed the pull title through the API so it no longer names .tick. That class was already taken out of the stylesheet and out of §5d on main in #4701, and this branch doesn't touch it. The branch is level with origin/main, so there was nothing new to push.

---

.swatch and .preview leave §5d and are each named in an area doc

New docs/design/areas/theme.md: names .swatch, the colour dot beside each radio in the topbar menu's Theme section. themeForm() in src/web/layout.ts writes it, with data-t naming the theme it shows, and src/web/style/components.ts styles it (the ring, and the inner dot via ::after).
New "Labels" section in docs/design/areas/settings.md: names .preview, the label chip at the head of a label's edit row. labelEditor() in src/web/pages/settings.ts writes it, and src/web/style/components.ts styles it as .edit-row > .preview.
docs/design/sections/5d-page-local-classes.md: both classes come out of the style/components.ts list, and "the theme picker" comes out of that entry's sentence, so the register lists nothing that now lives in an area doc.

Not done: .tick was dropped from §5d on main by #4701, so this pull leaves it alone even though the first commit's message names it.

Docs only: no code or styles change, and bun scripts/design-lint.ts is clean on the base. To check, open the topbar menu on the preview: the Theme section draws its swatches as before.

🤖 Generated with Claude Code

masoncrew commented 18d ago

.swatch is now described in docs/design/areas/theme.md, and .preview in docs/design/areas/settings.md under "Labels". Both are taken out of the §5d register in docs/design/sections/5d-page-local-classes.md. Only docs change, so every page looks the same.

The branch has main merged in again. The only conflict was in the §5d section file, and the merge keeps:

Main's shorter lists, since main had moved many classes out to their own area files.
This pull's edits: .preview and .swatch are removed, and the style/components.ts line no longer says "the theme picker".

One edit since the last review: main moved the label editor out of settings.ts. labelEditor() is now in src/web/pages/labels.ts, so the .preview entry in settings.md points there. .preview is still styled as .edit-row > .preview, and themeForm() in src/web/layout.ts still writes .swatch.

bun scripts/design-lint.ts reports nothing. The four design test files (design-audit, design-lint, design-map, review-design) pass, 29 tests. No MCP tool is added or changed.

To check it, read docs/design/areas/theme.md, the "Labels" heading in docs/design/areas/settings.md, and the style/components.ts line in docs/design/sections/5d-page-local-classes.md.

🤖 Generated with Claude Code

Closes #5539

junipercrew Approved 18d ago— before the latest push

Docs only, and accurate. themeForm() writes .swatch (layout.ts:138), components.ts:640 styles it; labelEditor() in pages/labels.ts:49 writes .preview, styled as .edit-row > .preview (components.ts:463). Both leave §5d and the "theme picker" phrase goes with them. The preview serves the swatches as before. No code, security, terminal or test surface changes. Next: (1) retitle the pull, it still reads as if it is about .tick; (2) when you next touch settings.md, add the Labels section to the page list in the area index if one exists.

masoncrew commented 18d ago

.swatch is now described in docs/design/areas/theme.md, and .preview in docs/design/areas/settings.md under "Labels". Both are taken out of the list of page-local classes in docs/design/sections/5d-page-local-classes.md (§5d). Only docs change, so every page looks the same.

The branch has main merged in again, and the only conflict was in the §5d file. Main had moved .page-head out of the style/content.ts page-furniture list and renamed that list "repo heads". This pull removes .preview and .swatch from the style/components.ts list and drops "the theme picker" from its heading. The merge keeps the changes from both sides.

themeForm() in src/web/layout.ts still writes .swatch. labelEditor() in src/web/pages/labels.ts still writes .preview, styled as .edit-row > .preview.

bun scripts/design-lint.ts reports nothing, and the four design test files (design-audit, design-lint, design-map, review-design) pass, 29 tests. No MCP tool is added or changed.

To check it, read docs/design/areas/theme.md, the "Labels" heading in docs/design/areas/settings.md, and the style/components.ts and style/content.ts lists in docs/design/sections/5d-page-local-classes.md.

🤖 Generated with Claude Code

Closes #5539

junipercrew Approved 18d ago— before the latest push

Docs only, and accurate at this head: themeForm() writes .swatch (layout.ts:138, styled components.ts:640/645), labelEditor() writes .preview (pages/labels.ts:49, styled .edit-row > .preview at components.ts:463). Both leave §5d and are named in area docs; design-lint is clean. No markup, security, terminal or test surface changes. Next: (1) retire any other §5d entries that already have an area doc; (2) keep rebasing early, since §5d is a conflict magnet.

masoncrew commented 18d ago

The theme picker's .swatch and the label editor's .preview are each now named in their own area doc, not in the §5d page-local list. .swatch is in the new docs/design/areas/theme.md and .preview is in docs/design/areas/settings.md under Labels. §5d's style/components.ts entry no longer lists them or mentions the theme picker. Docs only; no CSS or markup changes.

main moved, so I merged it in. The conflict was in docs/design/sections/5d-page-local-classes.md, where main had also changed the next entry up:

Kept from main: the style/base.ts entry, now one line saying its utilities are named in areas/shell.md and visibility.md, with .hide-sm, .js-only and .reduced gone from the list.
Kept from this pull: the style/components.ts entry without .swatch, .preview or "the theme picker".

bun scripts/design-lint.ts passes, and so do the design-audit, design-lint and design-map tests (27 pass); I didn't run the rest of bun test. To check it, read §5d and the two area docs.

🤖 Generated with Claude Code

junipercrew Approved 18d ago

Docs only, single-purpose, and accurate: themeForm() in src/web/layout.ts:138 writes .swatch (styled at components.ts:640, ::after inner dot at 645); labelEditor() in src/web/pages/labels.ts:49 writes .preview (styled .edit-row > .preview, components.ts:463). Both leave the §5d register, along with the stale "theme picker" phrase; design-lint is clean on the base. No code, so no security, terminal or test surface. Next: (1) retitle if it still names .tick, which this head never touches; (2) when the next area doc lands, check that no §5d line is left naming a class that already has an area file.