diff --git a/CLAUDE.md b/CLAUDE.md index ac9d94c..ae3ff22 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -369,7 +369,312 @@ async fn styles() -> impl IntoResponse { } ``` -There is no `tower-http` static file serving — all assets are embedded at compile time. There are no separate JavaScript files; all interactivity is handled via Datastar attributes and minimal inline JS. +There is no `tower-http` static file serving — all assets are embedded at compile time. Web component JS files live in `templates/components/` and are served via explicit routes (e.g., `/components/photo-capture.js`, `/components/searchable-select.js`). Most interactivity is handled via Datastar attributes and minimal inline JS. + +### CSS Architecture + +The UI uses **Tailwind CSS v4** built via the standalone CLI (no Node.js required). The Nix flake provides `tailwindcss_4` in both the devShell and the package `preBuild`. + +**Source file**: `templates/input.css` — the single source of truth for all styles. +**Generated file**: `templates/styles.css` — gitignored, built by Tailwind CLI. + +#### Dev workflow + +```bash +tailwindcss -i templates/input.css -o templates/styles.css --watch # terminal 1 +cargo watch -x run # terminal 2 +``` + +After any template or CSS change, regenerate with: +```bash +tailwindcss -i templates/input.css -o templates/styles.css +``` + +#### Design Tokens + +Colors are defined as raw CSS custom properties in `:root` (light) and `[data-theme="dark"]` (dark), then mapped to Tailwind utilities via `@theme`: + +| Token | Light | Dark | Tailwind class | +|-------|-------|------|---------------| +| `--page` | `#fafaf9` (stone-50) | `#1c1917` | `bg-page` | +| `--surface` | `#ffffff` | `#292524` | `bg-surface` | +| `--surface-alt` | `#f5f5f4` (stone-100) | `#44403c` | `bg-surface-alt` | +| `--border` | `#e7e5e4` (stone-200) | `#57534e` | default `border` | +| `--accent` | `#c2410c` (orange-700) | `#ea580c` | `bg-accent`, `text-accent` | +| `--accent-hover` | `#ea580c` | `#f97316` | `bg-accent-hover`, `hover:bg-accent-hover` | +| `--accent-subtle` | `#fff7ed` (orange-50) | `rgba(234,88,12,0.1)` | `bg-accent-subtle` | +| `--accent-text` | `#ffffff` | `#ffffff` | `text-accent-text` | + +A base layer rule sets the default border color so bare `border` / `divide-y` classes use the theme: + +```css +@layer base { + *, ::after, ::before { + border-color: var(--border); + } +} +``` + +Neutral text colors (`text-stone-800`, `text-stone-500`, etc.) are used directly — they are not tokenised since they're static in both themes. + +#### Dark Mode + +- `[data-theme="dark"]` attribute on `` — set via a `