feat(desktop): the draft's palette, and the primitives every pane is built from

[protonspy]

Group 2 of plans/desktop-ui.md — tasks 2.1 to 2.4, ticked.

Stacked on #29. The base is fix/desktop-dead-controls, so this diff is group 2 alone. Merge #29 first and this retargets to main cleanly.

8.1 shipped tokens only — and shipped them from a palette of its own invention, while design/desktop-draft.html sat in the repository being nothing's acceptance criterion. This is the other half, and it takes the draft's answer rather than the one 8.1 guessed.

What changed

2.1 — the tokens. tokens.css becomes globals.css with the draft's names and values: the cold slate instrument, the warm paper it holds, amber --primary meaning provenance, the semantic set kept separate from the accent, the 10→32px scale, --row: 30px and --control: 28px. The names are shadcn/ui's on purpose — that is what the draft means by "the port is a copy into globals.css".

Every --surface-* / --ink-* reference migrates here, because a half-migrated palette is two palettes. The type scale is the part that bites: --text-xs was 12px and is now 11px, --text-sm was 13px and is now 12px, so a reference that looks untouched has silently moved. It took two review rounds to get right, and the rule that settled it is the draft wins where the draft has an opinion, and the old pixel wins where it does not.

2.2 — two dependencies, in the manifest and in docs/stack.md with the line each earned. No shadcn/ui runtime: shadcn is copied-in source, and installing a package to get a naming convention would be adopting a dependency for nothing.

2.3 — the primitives, one file each under src/renderer/ui/: Button, IconButton, Pill, Card, Table, Switch, Dialog, Sheet, Drawer, SearchInput. Each exports the function that decides its classes, so the decision is testable and the component stays arrangement — the convention the renderer already had. Ask.tsx from group 1 now sits on the Dialog primitive, so the focus trap, Escape and the return of focus are settled in one place instead of copied into three overlays.

2.4 — focus. One :focus-visible rule for the whole document, so a primitive cannot forget it, and a test that reads the shipped stylesheet: exactly one outline: none is allowed, it is the search field's, and the ring it removes is put back on the box around it.

How it was verified

pnpm test:coverage (whole workspace, 76% floor, exit 0) · pnpm lint · pnpm run typecheck · pnpm --filter @open-wiki/desktop run build:renderer · npx @protonspy/scc validate — no findings.

code-review and security-review on the diff, then code-review again on each round of fixes. Three findings, all closed:

• major — the type-scale migration was done only where the draft draws the class; thirteen application-only selectors kept their variable name and lost a pixel each, while the commit message claimed otherwise. Fixed, and two tests now guard the class of bug: CSS is silent about var(--gone) — the property falls back to what it inherits and the rule quietly stops applying.
• major — .icon-btn was --control (28px) where the draft draws 24px, and an --sm variant was invented that the draft never draws. A size the draft does not draw is a decision nobody made that groups 3 to 8 would all have inherited.
• blocker (round 2) — the fix for the first finding moved .empty to 13px, when the draft draws .empty itself at 12px. That is the same failure in the other direction, and it is what produced the rule stated above.

The third round was a one-line revert of a value the reviewer identified precisely and I checked against the draft myself, so it was not sent back for a fourth review.

Two things left open on purpose

• --warn is gone. The draft has no warning colour, so .finding--warning now shares amber with citations. The security review flagged it as a low legibility note rather than a state collision — findings always carry their code, message and fix as text — but it is a real narrowing of the palette and worth a look.
• Nothing is wired up yet. Card, Table, Switch, Sheet, Drawer and SearchInput have no call site until groups 3 to 8. That is what the plan means by "group 2 blocks 3 through 8"; building a pane against the old tokens would mean building it twice.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HBt5LRVJd5Z7nagJGRwvSC

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a6c1348d-d69e-495c-84c3-920f7e65ef15

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}