feat(ui): DESIGN.md design contract, font tokens, reduced motion, radius sweep #52

Merged

chad merged 3 commits from feat/design-contract into main 2026-11-06 21:49:26 -05:00

Conversation 0 Commits 3 Files changed 13 +159 -16

glen commented 2026-11-06 21:48:55 -05:00

Collaborator

Copy link

Groundwork for a sweatshop-style design system (PR A of 2; PR B adds the theme registry and picker with Nova as the default). No visual redesign and no new dependencies.

What

• DESIGN.md (new, repo root; linked from AGENTS.md). Adapted from sweatshop's contract:

  1. semantic tokens only, never raw hex, oklch or palette classes in TSX;
  2. every theme defines every token;
  3. radius is a token (rounded-sm|md|lg|xl, never bare rounded; rounded-full only for pills, dots and avatars; the composer and user bubble keep rounded-2xl as the one noted exception);
  4. monospace for machine text (ids, branches, paths, tool names, stat numbers);
  5. status is a token, never a hue (info/success/warning/destructive, words via StatusPill). This one is tansweat-specific and matches what the code already does.

  It also lists the token set, including the success/warning/info trio and brand-claude.

• styles.css:

  • --font-sans / --font-mono tokens, both system stacks (no web fonts); html uses font-sans, and markdown code uses var(--font-mono).
  • A global prefers-reduced-motion block, so every spinner, pulse and transition honours the OS setting without per-site handling.

• Radius sweep (9 component files, outside vendored components/ui/): bare rounded 15 → 0.

  • Chips and badges became rounded-sm (9).
  • pre boxes and hover rows became rounded-md (35 → 41).
  • Everything else is unchanged (lg 10, 2xl 2, full 31).

• lib/design-contract.test.ts (new): a guard test. It scans app TSX (not ui/) and fails with file:line on raw palette colours, hex/oklch in class strings, or bare rounded.

Verification

• pnpm typecheck and pnpm test pass (1336).
• The guard actually guards: I ran it against unswept main, and it failed listing all 15 bare rounded sites with file:line. It passes on this branch.
• Built CSS contains the reduced-motion block, both font tokens, html{font-family:ui-sans-serif,…}, and .rounded-sm{border-radius:calc(var(--radius)*.6)}.
• Browser:
  • html resolves to the sans stack.
  • The sidebar chevron renders at a 6px radius (sm).
  • With reduced motion emulated, an animate-spin element's animation drops from 1s to 1e-05s.

Visible changes

• 2–4px radius shifts on small chips, pre boxes and hover rows (4px → 6px or 8px).
• Markdown code gains Consolas and Liberation Mono as fallbacks; it resolves to the same system monospace on macOS and most Linux setups.
• With the OS reduced-motion setting on, animations effectively stop.

Follow-up for PR B

• The .markdown-prose code/pre radii in styles.css are still fixed rem values; they move to var(--radius-*) with the theme work.

Groundwork for a sweatshop-style design system (PR A of 2; PR B adds the theme registry and picker with Nova as the default). No visual redesign and no new dependencies. ## What - **`DESIGN.md` (new, repo root; linked from AGENTS.md).** Adapted from sweatshop's contract: 1. semantic tokens only, never raw hex, oklch or palette classes in TSX; 2. every theme defines every token; 3. radius is a token (`rounded-sm|md|lg|xl`, never bare `rounded`; `rounded-full` only for pills, dots and avatars; the composer and user bubble keep `rounded-2xl` as the one noted exception); 4. monospace for machine text (ids, branches, paths, tool names, stat numbers); 5. status is a token, never a hue (`info`/`success`/`warning`/`destructive`, words via `StatusPill`). This one is tansweat-specific and matches what the code already does. It also lists the token set, including the `success`/`warning`/`info` trio and `brand-claude`. - **`styles.css`:** - `--font-sans` / `--font-mono` tokens, both system stacks (no web fonts); `html` uses `font-sans`, and markdown `code` uses `var(--font-mono)`. - A global `prefers-reduced-motion` block, so every spinner, pulse and transition honours the OS setting without per-site handling. - **Radius sweep** (9 component files, outside vendored `components/ui/`): bare `rounded` 15 → 0. - Chips and badges became `rounded-sm` (9). - `pre` boxes and hover rows became `rounded-md` (35 → 41). - Everything else is unchanged (`lg` 10, `2xl` 2, `full` 31). - **`lib/design-contract.test.ts` (new): a guard test.** It scans app TSX (not `ui/`) and fails with `file:line` on raw palette colours, hex/oklch in class strings, or bare `rounded`. ## Verification - `pnpm typecheck` and `pnpm test` pass (1336). - **The guard actually guards:** I ran it against unswept `main`, and it failed listing all 15 bare `rounded` sites with file:line. It passes on this branch. - **Built CSS** contains the reduced-motion block, both font tokens, `html{font-family:ui-sans-serif,…}`, and `.rounded-sm{border-radius:calc(var(--radius)*.6)}`. - **Browser:** - `html` resolves to the sans stack. - The sidebar chevron renders at a 6px radius (`sm`). - With reduced motion emulated, an `animate-spin` element's animation drops from `1s` to `1e-05s`. ## Visible changes - 2–4px radius shifts on small chips, `pre` boxes and hover rows (4px → 6px or 8px). - Markdown `code` gains Consolas and Liberation Mono as fallbacks; it resolves to the same system monospace on macOS and most Linux setups. - With the OS reduced-motion setting on, animations effectively stop. ## Follow-up for PR B - The `.markdown-prose` `code`/`pre` radii in `styles.css` are still fixed rem values; they move to `var(--radius-*)` with the theme work.

glen added 3 commits 2026-11-06 21:48:55 -05:00

docs: DESIGN.md design contract ... fad1fcb9fe

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

feat(ui): font tokens and a global reduced-motion guard ... 383fa64259

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

refactor(ui): round corners on the radius scale, with a contract test ... 7ca3272ee6

Bare rounded becomes sm (chips) or md (boxes); a vitest guard fails on
raw palette colours, hex/oklch in class strings and bare rounded.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

chad merged commit 69b8ddafa9 into main 2026-11-06 21:49:26 -05:00

chad referenced this pull request from a commit 2026-11-06 21:49:27 -05:00

Merge pull request 'feat(ui): DESIGN.md design contract, font tokens, reduced motion, radius sweep' (#52) from feat/design-contract into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

chad/tansweat!52

No description provided.