feat(ui): F0 — Tailwind + design tokens + theme infrastructure

Install Tailwind v3, Radix primitives, cva/tailwind-merge/clsx, lucide-react. Add HSL design tokens (light + dark) with the Indigo #5b5bf0 accent isolated to a single --primary token (swappable for a future accent picker), darkMode 'class', anti-flash inline script, useTheme hook, and cn() helper. styles.css still loads for not-yet-migrated pages. Build green. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 23:11:51 +02:00
parent 6af03ea807
commit 1bd8143a87
9 changed files with 2279 additions and 2 deletions
@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+  Design tokens. The ONLY place colors are defined. Change --primary / --ring
+  to re-brand the whole app; a future user-facing accent picker can write these
+  two variables at runtime. See docs/specs/ui-overhaul.md.
+*/
+@layer base {
+  :root {
+    /* Neutrals — warm-tinted slate (Notion-ish paper) */
+    --background: 0 0% 100%;
+    --foreground: 222 22% 12%;
+    --card: 0 0% 100%;
+    --muted: 220 16% 96%;
+    --muted-foreground: 220 9% 46%;
+    --border: 220 16% 90%;
+    --input: 220 16% 90%;
+    --ring: 245 75% 60%;
+
+    /* Brand accent — Indigo #5b5bf0 */
+    --primary: 245 75% 59%;
+    --primary-foreground: 0 0% 100%;
+
+    /* Semantic */
+    --success: 152 56% 40%;
+    --warning: 38 92% 50%;
+    --danger: 0 72% 51%;
+    --danger-foreground: 0 0% 100%;
+
+    --radius: 0.625rem;
+  }
+
+  .dark {
+    --background: 224 32% 9%;
+    --foreground: 220 18% 92%;
+    --card: 224 28% 12%;
+    --muted: 223 22% 17%;
+    --muted-foreground: 220 12% 64%;
+    --border: 223 20% 20%;
+    --input: 223 20% 22%;
+    --ring: 245 80% 66%;
+
+    --primary: 245 80% 67%;
+    --primary-foreground: 224 32% 9%;
+
+    --success: 152 50% 50%;
+    --warning: 38 92% 58%;
+    --danger: 0 70% 60%;
+    --danger-foreground: 0 0% 100%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif;
+  }
+
+  /* Subtle, modern scrollbars that respect the theme. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+    background-clip: padding-box;
+  }
+}
+
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}