Lane 0, first PR: the design system's foundation — tokens, theme, icons, the first components, /design (#364) #739

Merged

claude-bot merged 1 commit from build/lane0-foundation into main

2026-09-22 01:57:04 +00:00

claude-bot commented

2026-09-22 01:34:37 +00:00

Collaborator

Lane 0 of the v4.5.0 build (docs/design/v4.5.0-build-plan.md §3), first PR of the series. Nothing in the app uses the library yet; main is unchanged for a person.

src/ui/

tokens.css: Lapis Table's palette, light and dark, the type steps, the spacing, the radii and the faces, copied from the prototype's kit so the app and the drawings share one source. Table mode remaps the paper and ink tokens on its subtree.
Dark mode by data-mode on <html> (theme.js), set before first paint by theme-init.js and by useTheme once React runs; the old dark class is kept in step until the last page written against it is rebuilt. Tailwind's dark variant is defined against the attribute, and the tokens reach utilities through @theme inline (bg-paper-raised, text-ink-soft, font-display …).
Self-hosted faces: Figtree and Unbounded (variable), Alegreya 700.
Icon: the sixty-seven icons as one component, from paths.js generated out of the prototype's icons.js (two layers, rendered by the tokens; no dangerouslySetInnerHTML).
Button (four weights; busy; a disabled control says why), Banner (four kinds; D12's tier one is a quiet banner with Undo), Stop (D65), Busy (with the time so far), Modal (D12's tiers two and three on <dialog>), SectionBoundary (an error never destroys rendered content), Target (D36), useAsync, useLeaveGuard (D22). Each with its states and a test. README.md carries the conventions.
base.css is scoped to .qb, the class the new shell and /design put on their root, so the old pages keep their own look until replaced (the rollout rule).

/design: every component in every state, collected from src/ui/*/states.jsx, in both themes and Table mode; dev build only (the route is not mounted in production). Its test fails if any state throws. ?mode= and ?table= pick the starting state for a headless render check.

Lint: eslint-plugin-jsx-a11y at error on the library and the reference page, at warn on the pages not yet rebuilt (WCAG 2.2 AA, #367). Its ESLint peer range stops at 9; the flat config works on ESLint 10, so an npm override satisfies the peer with the project's ESLint.

Render-checked at /design in light, dark and Table mode; 937 tests pass; lint clean; build green.

Next in the series: the form controls, the content pieces (cards, lists, tags, meter, the person disc), SaveState, Menu, Tabs, then the shell components.

🤖 Generated with Claude Code

Lane 0 of the v4.5.0 build (`docs/design/v4.5.0-build-plan.md` §3), first PR of the series. **Nothing in the app uses the library yet**; main is unchanged for a person. **`src/ui/`** - `tokens.css`: Lapis Table's palette, light and dark, the type steps, the spacing, the radii and the faces, copied from the prototype's kit so the app and the drawings share one source. Table mode remaps the paper and ink tokens on its subtree. - Dark mode by `data-mode` on `<html>` (`theme.js`), set before first paint by `theme-init.js` and by `useTheme` once React runs; the old `dark` class is kept in step until the last page written against it is rebuilt. Tailwind's `dark` variant is defined against the attribute, and the tokens reach utilities through `@theme inline` (`bg-paper-raised`, `text-ink-soft`, `font-display` …). - Self-hosted faces: Figtree and Unbounded (variable), Alegreya 700. - `Icon`: the sixty-seven icons as one component, from `paths.js` generated out of the prototype's `icons.js` (two layers, rendered by the tokens; no `dangerouslySetInnerHTML`). - `Button` (four weights; `busy`; a disabled control says `why`), `Banner` (four kinds; D12's tier one is a quiet banner with Undo), `Stop` (D65), `Busy` (with the time so far), `Modal` (D12's tiers two and three on `<dialog>`), `SectionBoundary` (an error never destroys rendered content), `Target` (D36), `useAsync`, `useLeaveGuard` (D22). Each with its states and a test. `README.md` carries the conventions. - `base.css` is scoped to `.qb`, the class the new shell and `/design` put on their root, so the old pages keep their own look until replaced (the rollout rule). **`/design`**: every component in every state, collected from `src/ui/*/states.jsx`, in both themes and Table mode; dev build only (the route is not mounted in production). Its test fails if any state throws. `?mode=` and `?table=` pick the starting state for a headless render check. **Lint**: `eslint-plugin-jsx-a11y` at error on the library and the reference page, at warn on the pages not yet rebuilt (WCAG 2.2 AA, #367). Its ESLint peer range stops at 9; the flat config works on ESLint 10, so an npm override satisfies the peer with the project's ESLint. Render-checked at `/design` in light, dark and Table mode; 937 tests pass; lint clean; build green. Next in the series: the form controls, the content pieces (cards, lists, tags, meter, the person disc), `SaveState`, `Menu`, `Tabs`, then the shell components. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-bot added 1 commit

2026-09-22 01:34:37 +00:00

feat(frontend): the design system's foundation — tokens, theme, icons, the first components, /design (#364 )

CI / Summarisation accuracy eval harness (stub provider) (pull_request) Successful in 55s

Details

CI / Backend lint (ruff) (pull_request) Successful in 24s

Details

CI / Bot tests and audit (pull_request) Successful in 1m54s

Details

CI / Bot/backend version sync (pull_request) Successful in 40s

Details

CI / Docker image build (pull_request) Successful in 58s

Details

CI / Feedback site tests (pull_request) Successful in 59s

Details

CI / Frontend tests, audit, and build (pull_request) Successful in 2m33s

Details

CI / Backend migration, tests, and audit (pull_request) Successful in 8m38s

Details

CI / Synthetic session harness (no GPU, no LLM) (pull_request) Successful in 19m18s

Details

a9c9aeaebc

Lane 0 of the v4.5.0 build (docs/design/v4.5.0-build-plan.md §3), first
PR. Nothing in the app uses the library yet; main is unchanged for a
person.

src/ui/:
- tokens.css: Lapis Table's palette, light and dark, the type steps, the
  spacing, the radii, the faces — copied from the prototype's kit so the
  app and the drawings share one source. Table mode remaps the paper and
  ink tokens on its subtree.
- dark mode by data-mode on <html> (theme.js), set before first paint by
  theme-init.js and by useTheme once React runs; the old `dark` class is
  kept in step until the last page written against it is rebuilt.
  Tailwind's dark variant is defined against the attribute in index.css,
  and the tokens reach utilities through @theme inline.
- self-hosted faces: Figtree and Unbounded (variable), Alegreya 700.
- Icon: the sixty-seven icons as one component, from paths.js generated
  out of the prototype's icons.js (two layers, rendered by the tokens).
- Button (four weights; busy; a disabled control says why), Banner (four
  kinds; D12's tier one is a quiet banner with Undo), Stop (D65), Busy
  (with the time so far), Modal (D12's tiers two and three on <dialog>),
  SectionBoundary (an error never destroys rendered content), Target
  (D36), useAsync, useLeaveGuard (D22). Each with its states and a test.
- base.css scoped to .qb, the class the new shell and /design put on
  their root, so the old pages keep their own look until replaced.

/design (src/pages/DesignReference.jsx): every component in every state,
collected from src/ui/*/states.jsx, in both themes and Table mode; dev
build only. Its test fails if any state throws. ?mode= and ?table= pick
the starting state for a headless render check.

eslint-plugin-jsx-a11y at error on the library and the reference page,
at warn on the pages not yet rebuilt (WCAG 2.2 AA, #367); the plugin's
ESLint peer range is satisfied with an npm override, since its flat
config works on ESLint 10.

Render-checked at /design in light, dark and Table mode; 937 tests pass;
lint clean; the production build carries no /design route.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

claude-bot merged commit 6a95ccbf1f into main

2026-09-22 01:57:04 +00:00

claude-bot deleted branch build/lane0-foundation

2026-09-22 01:57:04 +00:00

claude-bot referenced this pull request from a commit

2026-09-22 01:57:05 +00:00

Merge PR #739: lane 0, first PR: the design system's foundation — tokens, theme, icons, the first components, /design (#364)

claude-bot referenced this pull request

2026-09-22 01:58:48 +00:00

[UX] Establish a design system and component library #364

claude-bot referenced this pull request

2026-09-22 03:02:30 +00:00