Phase 1: scaffold Next.js 16 web-ui + Coolify staging

- create-next-app with TypeScript, Tailwind v4, App Router - Port design-system.css tokens into Tailwind @theme (navy/gold/parchment, Heebo) - Install TanStack Query, react-hook-form, zod, lucide-react, react-dropzone - layout.tsx: RTL Hebrew + Heebo via next/font/google - AppShell component with navy header + gold rule + nav - next.config.ts: output:standalone + rewrites to proxy /api/* to production FastAPI - Dockerfile: multi-stage Node 20 Alpine build for Next.js standalone (branch-local override of the FastAPI Dockerfile; main is unaffected) - Switch .taskmaster to claude-code provider (no API key required) - Add 7 phase tasks (83-89) tracking the full rewrite plan Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 13:47:05 +00:00
parent a8b79822bf
commit 64724656af
24 changed files with 7752 additions and 82 deletions
--- a/web-ui/src/app/globals.css
+++ b/web-ui/src/app/globals.css
@@ -0,0 +1,178 @@
+@import "tailwindcss";
+
+/* ══════════════════════════════════════════════════════════════
+ * Ezer Mishpati — Design Tokens (ported from legal-ai/web/static/design-system.css)
+ * Editorial/judicial aesthetic for a Hebrew RTL judicial tool.
+ * Palette: Navy + Cream + Gold.
+ * Typography: Heebo (loaded via next/font/google in layout.tsx).
+ * ══════════════════════════════════════════════════════════════ */
+
+@theme {
+  /* ── Colors ─────────────────────────────────────────── */
+  --color-navy: #0f172a;
+  --color-navy-soft: #1e293b;
+  --color-navy-dim: #334155;
+
+  --color-cream: #f5f1e8;
+  --color-cream-deep: #ede8d8;
+  --color-parchment: #fbf8f0;
+
+  --color-gold: #a97d3a;
+  --color-gold-deep: #8b6428;
+  --color-gold-soft: #c89a56;
+  --color-gold-wash: #fdf6e8;
+
+  --color-ink: #1a1a2e;
+  --color-ink-soft: #3a3a52;
+  --color-ink-muted: #6b7280;
+  --color-ink-light: #9ca3af;
+
+  --color-rule: #e5dfd0;
+  --color-rule-soft: #f0ead8;
+
+  --color-surface: #ffffff;
+  --color-surface-raised: #fbf8f0;
+  --color-bg: #f5f1e8;
+
+  /* Status colors — tuned to the palette */
+  --color-success: #4a7c59;
+  --color-success-bg: #e8efe7;
+  --color-warn: #b8894a;
+  --color-warn-bg: #faf0dc;
+  --color-danger: #a54242;
+  --color-danger-bg: #f5e6e6;
+  --color-info: #4e6a8c;
+  --color-info-bg: #e6ecf3;
+
+  /* ── Typography — Heebo (loaded via next/font in layout.tsx) ─ */
+  --font-display: var(--font-heebo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-body: var(--font-heebo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
+
+  /* ── Radii ──────────────────────────────────────────── */
+  --radius-sm: 4px;
+  --radius: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* ── Shadows — soft, editorial ──────────────────────── */
+  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
+
+  /* ── Transitions ────────────────────────────────────── */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* ── Dark theme (class-based, toggled on <html> or <body>) ── */
+:root.dark,
+body.dark {
+  --color-navy: #f5f1e8;
+  --color-navy-soft: #e8e0c8;
+  --color-navy-dim: #c7bc9a;
+
+  --color-cream: #0a0f1c;
+  --color-cream-deep: #121a2e;
+  --color-parchment: #161f36;
+
+  --color-gold: #d4a55a;
+  --color-gold-deep: #e8bc6f;
+  --color-gold-soft: #c89a56;
+  --color-gold-wash: rgba(212, 165, 90, 0.08);
+
+  --color-ink: #f5f1e8;
+  --color-ink-soft: #d8d2c0;
+  --color-ink-muted: #9a9380;
+  --color-ink-light: #6a6458;
+
+  --color-rule: #2a3352;
+  --color-rule-soft: #1e2a45;
+
+  --color-surface: #141b2f;
+  --color-surface-raised: #1a2238;
+  --color-bg: #0a0f1c;
+
+  --color-success: #5a9a6a;
+  --color-success-bg: rgba(90, 154, 106, 0.12);
+  --color-warn: #c79956;
+  --color-warn-bg: rgba(199, 153, 86, 0.12);
+  --color-danger: #c16565;
+  --color-danger-bg: rgba(193, 101, 101, 0.12);
+  --color-info: #6d8bab;
+  --color-info-bg: rgba(109, 139, 171, 0.12);
+}
+
+/* ── Base overrides ──────────────────────────────────── */
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--color-ink);
+  background: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "kern", "liga", "clig", "calt";
+}
+
+/* Display typography — headings use the same Heebo family but bolder */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-navy);
+  letter-spacing: -0.01em;
+}
+
+h1 { font-size: 2.3rem; font-weight: 900; }
+h2 { font-size: 1.8rem; }
+h3 { font-size: 1.45rem; }
+h4 { font-size: 1.2rem; }
+h5 { font-size: 1.05rem; }
+h6 { font-size: 0.95rem; }
+
+/* Prose paragraphs — justify both sides for Hebrew legal text */
+p.prose,
+.prose p {
+  text-align: justify;
+  text-justify: inter-word;
+  hyphens: auto;
+  line-height: 1.65;
+}
+
+/* Links */
+a {
+  color: var(--color-gold-deep);
+  text-decoration: none;
+  transition: color 120ms var(--ease-out);
+}
+a:hover {
+  color: var(--color-gold);
+}
+
+/* Focus rings — gold, subtle */
+*:focus-visible {
+  outline: 2px solid var(--color-gold);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Selection */
+::selection {
+  background: var(--color-gold-wash);
+  color: var(--color-navy);
+}