Claude Fable 5
300a418e85
apps/web becomes a Vite + React application: React Router with home and 404 routes, base layout (top bar, collapsible sidebar remembered per user via localStorage, main area), CSS design tokens including the three font slots from ADR 0016, TanStack Query, and a typed fetch helper showing live API health on the home page. All UI strings go through a t() stub that issue #5 replaces with i18next. The Vite dev server proxies /api to the api dev port (3001). Closes #4 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
37 lines
1.1 KiB
CSS
37 lines
1.1 KiB
CSS
/*
|
|
* Design tokens. Components consume only these variables — never raw
|
|
* values — so pond-level font settings (ADR 0016) and future theming stay
|
|
* one-line changes. The look is deliberately plain and professional.
|
|
*/
|
|
:root {
|
|
/* Font slots per ADR 0016; the real self-hosted fonts arrive with issue #66. */
|
|
--font-heading: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
--font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--font-weight-heading: 400;
|
|
--font-weight-body: 300;
|
|
|
|
/* Color palette: calm neutrals with one pond-green accent. */
|
|
--color-text: #1f2933;
|
|
--color-text-muted: #616e7c;
|
|
--color-bg: #ffffff;
|
|
--color-bg-subtle: #f5f7fa;
|
|
--color-border: #d9e2ec;
|
|
--color-accent: #2f6f4f;
|
|
--color-accent-contrast: #ffffff;
|
|
--color-danger: #ab091e;
|
|
--color-ok: #14803c;
|
|
|
|
/* Spacing scale (rem-based). */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
|
|
--radius: 6px;
|
|
--topbar-height: 3rem;
|
|
--sidebar-width: 16rem;
|
|
}
|