store: design foundation — spacing/color tokens, type scale, rhythm, grid #33

New issue

Closed

opened 2026-08-24 08:27:40 +00:00 by yuris · 0 comments

yuris commented

2026-08-24 08:27:40 +00:00

Owner

Restyle apps/store/app/globals.css only — no .tsx changes, every existing class keeps working. Add a :root token block (--s1..--s16, --r-sm/md/lg, --ink, --ink-muted, --surface, --bg, --line, --accent, --accent-hover, --container: 1280px), replace every hardcoded hex and spacing literal with tokens, retune the type scale to retail sizes (h1 clamp(1.9rem, 4vw, 2.5rem), delete the .page > h1 / .product-detail h1 re-inflating overrides), make section rhythm symmetric, widen containers to --container, densify .product-grid to minmax(200px, 1fr), make .cards auto-fit, add a max-width: 1024px breakpoint for the currently-unhandled 701–1120px range, switch product images to aspect-ratio: 1/1, give touch targets min-height: 44px, and pre-style the classes later waves need (.price, .price-note, .stock-badge, .category-tiles, .category-tile, .cart-button, .cart-count, .cart-line, .cart-summary, .fulfilment-choice, .sticky-buy).

Acceptance: pnpm --filter garage-store lint passes; no hex literal and no bare px spacing value outside :root; the site builds and every existing page renders with no unstyled element.

Restyle `apps/store/app/globals.css` only — no `.tsx` changes, every existing class keeps working. Add a `:root` token block (`--s1..--s16`, `--r-sm/md/lg`, `--ink`, `--ink-muted`, `--surface`, `--bg`, `--line`, `--accent`, `--accent-hover`, `--container: 1280px`), replace every hardcoded hex and spacing literal with tokens, retune the type scale to retail sizes (h1 `clamp(1.9rem, 4vw, 2.5rem)`, delete the `.page > h1` / `.product-detail h1` re-inflating overrides), make section rhythm symmetric, widen containers to `--container`, densify `.product-grid` to `minmax(200px, 1fr)`, make `.cards` `auto-fit`, add a `max-width: 1024px` breakpoint for the currently-unhandled 701–1120px range, switch product images to `aspect-ratio: 1/1`, give touch targets `min-height: 44px`, and pre-style the classes later waves need (`.price`, `.price-note`, `.stock-badge`, `.category-tiles`, `.category-tile`, `.cart-button`, `.cart-count`, `.cart-line`, `.cart-summary`, `.fulfilment-choice`, `.sticky-buy`). Acceptance: `pnpm --filter garage-store lint` passes; no hex literal and no bare `px` spacing value outside `:root`; the site builds and every existing page renders with no unstyled element.

yuris closed this issue

2026-08-24 08:39:05 +00:00

yuris referenced this issue from a commit

2026-08-24 10:34:16 +00:00

feat(store): design foundation — spacing/color tokens, type scale, rhythm, grid (#33)

yuris referenced this issue from a pull request that will close it,

2026-08-24 10:34:37 +00:00

feat(store): overhaul into a shop that can also install — design tokens, catalog v2, cart with WhatsApp checkout #39

yuris referenced this issue

2026-08-27 06:35:52 +00:00

store: reconcile globals.css with the approved design tokens #45

yuris referenced this issue