diff --git a/CLAUDE.md b/CLAUDE.md index 636cedf..9e3a31c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -398,46 +398,118 @@ Defined in `input.css` — use these instead of ad-hoc utility combinations: | Class | Use for | |-------|---------| -| `.input-field` | All text/number/select inputs (border, padding, rounded, focus ring) | +| `.input-field` | All text/number/select inputs | | `.btn-adjust` | +/- stepper buttons flanking a numeric input | -| `.pill.pill-accent` | Tasting notes, highlighted tags | -| `.pill.pill-muted` | Categories, kind labels, neutral status | -| `.pill.pill-success` | Positive status ("Open") | +| `.sticky-submit` | Mobile-fixed / desktop-static submit bar | +| `.pill` + variant | Tags, status badges (always include `.pill` base) | +| `.tab` / `.tab-active` | Desktop tab buttons | +| `.tab-mobile` / `.tab-mobile-active` | Mobile tab dropdown items | +| `.responsive-table` | Tables that become card layout on mobile | +| `.scrollbar-hide` | Hide scrollbar on horizontal scroll containers | +| `.timeline-*` / `.tl-card` | Timeline page layout (line, node, heading, card) | +| `.text-2xs` | Micro text (0.65rem) — available for fine print | +| `.small-caps` | Font-variant small-caps — table headers, footer | -Always include `.pill` base class with the variant. Do not override pill colour/border/padding with utilities. +**Pill variants** (always pair with `.pill` base class): -Cards use `rounded-lg border bg-surface p-4` — no shadows. +| Variant | Use | +|---------|-----| +| `.pill-muted` | Categories, neutral status | +| `.pill-success` | Positive status ("Open") | +| `.pill-warning` | Warning status | +| `.pill-floral` through `.pill-vegetal` | Tasting note SCA wheel colours | + +Do not override pill colour/border/padding with utilities. ### UI Patterns +#### Page Layout + +Main container from `base.html`: `mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-4 md:py-10`. All page sections are direct children spaced by `gap-8`. + +Cards use `rounded-lg border bg-surface` — no shadows. Padding varies by context: +- `p-4` — compact cards (brew cards, bag cards, stat cards) +- `p-5` — form sections, account sections, timeline cards +- `p-6` — auth pages (login, register) + #### Typography | Level | Classes | Use | |-------|---------|-----| | Page title | `text-3xl font-semibold` | `

` on each page | -| Section title | `text-lg font-semibold text-text` | `

` / `

` for cards | +| Auth title | `text-2xl font-semibold text-accent` | Login/register headers | +| Section title | `text-lg font-semibold text-text` | `

` for page sections | | Subsection title | `text-base font-semibold text-text` | `

` within cards | -| Form section label | `text-xs font-semibold text-text-muted uppercase tracking-wide` | `

` grouping fields | +| Form subsection | `text-sm font-semibold text-text` | `

` grouping fields (e.g. "Coffee", "Grinder") | +| Form field label | `text-xs font-semibold text-text-muted uppercase tracking-wide` | `

` / field group headings | | Body | `text-sm text-text-secondary` | Description text | | Muted | `text-xs text-text-muted` | Metadata, subtext | -| Accent title | `text-2xl font-semibold text-accent` | Login/register headers | +| Micro | `text-2xs text-text-muted` | Fine print (available utility, currently unused) | Page headers: `
` with `

` + `

`. +**Font weight rules:** +- `font-bold` — stat values only (`text-lg font-bold text-text`) +- `font-semibold` — headings and primary action buttons +- `font-medium` — card action buttons, link-style actions, tab labels, table content, outlined/secondary buttons + +**Small-caps pattern:** `text-xs uppercase tracking-wide` — used for form field labels, timeline kind labels. Table headers and the footer use the `.small-caps` utility class. + +#### Icons + +Entity-type icon mapping (consistent across all pages): + +| Entity | Icon macro | +|--------|-----------| +| brew | `icons::beaker` | +| roast | `icons::coffee_bean` | +| roaster | `icons::fire` | +| bag | `icons::bag` | +| cup | `icons::cup` | +| cafe | `icons::location` | +| gear | `icons::grinder` | + +**Size by context:** + +| Size | Context | +|------|---------| +| `h-3 w-3` | Timeline card category labels (inline with `text-xs`) | +| `h-4 w-4` | Buttons with text, tab buttons, account page actions, list action links, form indicator icons | +| `h-5 w-5` | Nav icons, quick action buttons, loading spinners, homepage activity rows, timeline expand/collapse chevrons | +| `h-6 w-6` | Stat cards on homepage | + +Always include `shrink-0` on icons inside flex containers to prevent shrinking. + +When an icon appears alongside text in a button or label, use `inline-flex items-center gap-N` on the container: +- `gap-1` — compact inline labels (timeline categories) +- `gap-1.5` — card action buttons, tab buttons (mobile selected label) +- `gap-2` — standard buttons with icons + #### Buttons | Variant | Classes | Use | |---------|---------|-----| -| Primary | `rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover` | Save, Submit, Check In | -| Secondary | `rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text` | Cancel, Back | +| Primary | `rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover` | Form submits (Save, Log Brew, Check In) | +| Primary + icon | Add `inline-flex items-center justify-center gap-2` to Primary | Submit buttons with icons, Download Backup | +| Secondary | `rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt` | Cancel, Back | +| Outlined accent | `rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt` | Restore, Sign Out — secondary actions with accent colour | +| Outlined accent + icon | Add `inline-flex items-center gap-2` to Outlined accent | Account page actions with icons | +| Destructive outlined | `rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:text-red-700 hover:bg-surface-alt` | Reset Database | +| Card action | `inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt` | Brew, Brew Again on cards | +| Card muted action | Same as Card action but `text-text-muted` + `hover:text-text` | Close Bag on cards | | Text-only | `text-xs text-text-muted hover:text-text` | Change, Back in summary bars | -| Icon-only | `inline-flex h-8 w-8 items-center justify-center rounded-md p-1 text-text-muted transition hover:text-red-600` | Delete, revoke | -| Link-style | `inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover` | Brew Again, View all | +| Link-style | `inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover` | View all, Brew Again in tables | +| Delete link | `inline-flex items-center gap-1 text-sm font-medium text-text-muted hover:text-red-600` | Delete in table rows | +| Icon-only | `inline-flex h-8 w-8 items-center justify-center rounded-md p-1 text-text-muted transition hover:text-red-600` | Delete passkey, revoke token | +| Nav icon | `rounded-md p-1.5 text-text-muted transition hover:text-text-secondary` | Theme toggle, user menu | | Adjustment | `.btn-adjust` CSS class | +/- steppers | -Submit buttons are right-aligned: `

`. Secondary comes first when paired. +**Sizing rules:** +- `w-full` for full-width CTAs (form submits) +- `py-3` for larger touch targets (login, register, check-in submit) +- `disabled:opacity-50 disabled:cursor-not-allowed` with `data-attr:disabled` for loading states -Use `w-full` for full-width CTAs, `py-3` for larger touch targets, `disabled:opacity-50` with `data-attr:disabled` for loading states. +Submit buttons right-aligned: `
`. Secondary comes first when paired. #### Forms @@ -463,7 +535,7 @@ Checkbox: `