feat: Minimalist Brutal recipes gallery, density modes, editorial layout, and signature motif

[Copilot]

Adds the "viral/pleasing" layer to Touch Grass DS — recipes gallery, density modes, editorial layout contract, and a consistent signature motif — without breaking core constraints (radius 0, no motion, tokens-only, 48px tap targets, mono discipline).

Tokens

• Added color.subtle and color.hairline-strong to both dark and light themes
• subtle is metadata/labels only (never body copy); hairline-strong is for emphasis borders and section rules

Density modes

Two modes via CSS custom properties on :root (default) and .tg-density-dense:

.tg-density-dense {
  --density-cell-py: var(--space-2);   /* 8px vs default 16px */
  --density-cell-px: var(--space-3);   /* 12px vs default 20px */
  --density-stack: var(--space-2);
  --density-row-min-h: 36px;           /* vs default 48px */
}

Signature motif — SectionHeading

Reusable 2px hairline-strong left rule for section headings, used across all recipes:

<SectionHeading sub="3-level hierarchy using size + weight + color tokens">
  HIERARCHY
</SectionHeading>

Recipes gallery

• New nav section + /recipes index with poster-grid of 8 recipes
• Each recipe: live composed preview, rationale (hierarchy/spacing/token callouts), copy/paste snippet
• Pages: PosterHero, SettingsPanel, FormBlock, StatsDashboard, EmptyState, InterruptFlow, DenseTable (demonstrates dense mode), FocusTimerScreen

Layout foundations page

• /foundations/layout covering max reading width (60–72ch), vertical rhythm (3 canonical stack gaps: tight 8px / standard 16px / section 32px), sectioning rules via Divider + spacing tokens, density mode reference
• Shell updated to enforce max-w-[66ch] on prose elements

Quickstart

• docs/quickstart-vite.md — Vite + React + Touch Grass in 5 steps

Original prompt

Create a follow-up PR in thiagoxikota/touch-grass (base main) focused on making Touch Grass "Minimalist Brutal" and more viral/pleasing, without breaking core constraints (radius 0, no motion, tokens-only, 48px tap target, mono discipline).

Choices (already decided)

• Examples: React-only (use @touch-grass-ds/react components).
• Starter target: Vite (since docs-site is Vite + React already).

Deliverables

1. Docs-site: Recipes / Gallery section

   • Add a new nav section "Recipes".
   • Add packages/docs-site/src/pages/recipes/Index.tsx showing a grid of recipe cards (poster-like previews).
   • Add 8 recipe pages under packages/docs-site/src/pages/recipes/ (e.g. PosterHeroPage, SettingsPanelPage, FormBlockPage, StatsDashboardPage, EmptyStatePage, InterruptFlowPage, DenseTablePage, FocusTimerScreenPage).
   • Each recipe page must include: (a) a composed UI built from existing primitives/patterns, (b) a short rationale explaining hierarchy + spacing + neutral tiers usage, (c) a copy/paste code snippet.

2. Foundations: Layout / Editorial contract

   • Add a foundations page describing max reading width (60–72ch), vertical rhythm (3 canonical stack gaps), and sectioning rules using Divider + spacing tokens.
   • Update docs-site layout (Shell/page container) to enforce reading width on long-form pages.

3. Density modes (two modes only)

   • Implement default and dense density modes, tokens-only.
   • Provide a minimal API: either wrapper class (e.g. tg-density-dense) or CSS variables on a container.
   • Update at least one recipe (DenseTable/Leaderboard) to demonstrate dense mode.

4. Minimal Brutal signature motif

   • Implement one consistent motif: a 2px left rule for section headings (using existing tokens like hairline-strong).
   • Create a small reusable pattern/component in @touch-grass-ds/react (or docs-site component if it’s docs-only) and use it across recipes.

5. Vite starter (optional but recommended if small)

   • Add a minimal docs/quickstart-vite.md that shows creating a Vite React app and installing @touch-grass-ds/tokens + @touch-grass-ds/react, importing styles, and rendering a sample page.

Constraints

• No transitions/animations.
• Keep radius 0.
• Use neutrals via tokens (assume current WIP PR adds fg-muted and fg-subtle).
• Keep changes additive; avoid re-architecture.
• Ensure pnpm -r test and builds pass.

Notes

If recipe pages need screenshots, generate using existing patterns or static compositions; do not add new heavy tooling. Prefer using existing primitives/patterns (Button/Input/Card/Stat/Timer/Field/Toast/etc.).

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: both, maintain restrictions that are core to the athenticitiy of the ds

Assistant: Got it: make it viral/pleasing while keeping the core “Touch Grass” authenticity rules. I can’t change the already-started agent run’s instructions directly from here, but we can still get exactly what you want by tightening the definition of “core” and then applying the remaining changes as follow-ups in the same PR (if still open) or a second PR.

Define the “core restrictions” (confirm/adjust)

I’m going to treat these as non-negotiable unless you say otherwise:

1. Radius = 0 everywhere.
2. No motion: no CSS transitions/animations, no eased hovers.
3. No grey text: no opacity-based de-emphasis; no neutral-gray palette for typography.
4. Tokens-only for color/space/size.
5. 48px minimum tap target for interactive controls.
6. Mono where it counts (labels, buttons, stats/timers), sans for long-form.

Reply with any edits (e.g. “allow motion for only dialogs” etc.). If you don’t reply, I’ll proceed with the above as the “authenticity contract.”

How to make it “viral + pleasing” without breaking the rules

These are the levers that preserve the brutalism but improve desirability:

• Hierarchy without greys: create “secondary” and “tertiary” text styles using size/weight/case/spacing/layout instead of muted color. (Same fg token, different treatment.)
• Delight without motion: use hard interaction deltas (color flip, border swap, underline, inverted surfaces) and bolder compositions (split layouts, big typographic locks, sticker-like badges).
• Pleasing color system without neutrals: keep the 4-color palette, but add structured surfaces (bg, bg-alt) and hairline rules so density feels intentional, not harsh.
• Show, don’t tell: add a docs “Gallery / Recipes” section with complete UI chunks. That’s what makes DS go viral.

What I’ll implement (as concrete repo changes)

1. A single canonical contract doc (MUST/SHOULD/MAY) + add a short “why” page (so people want the constraints).
2. A formal state model and state tokens (interactive states defined once, consumed everywhere).
3. **Docs-site upgrades for viral...

This pull request was created from Copilot chat.

[thiagoxikota]

ok