Implement shadcn/ui + Tailwind CSS UI layer

- Design token system via CSS custom properties (light/dark mode) - Theme context hook + ThemeToggle component - AppShell + collapsible Sidebar replace inline Nav - LoginPage redesigned: two-column grid with hero panel - shadcn/ui Button and Input components - Tailwind config wired to CSS variable tokens - All pages de-Nav'd; PrivateRoute/AdminRoute wrap with AppShell - TypeScript passes clean (npm run typecheck) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-17 12:32:06 +02:00
parent 9e2e4ec338
commit c3f87706ee
26 changed files with 1263 additions and 89 deletions
@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Design tokens ──────────────────────────────────────────────────────────
+   Colors are stored as RGB triplets so Tailwind's opacity modifier syntax
+   (e.g. bg-primary/10) works correctly.
+   ────────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Brand / interactive */
+  --color-primary:       37 99 235;    /* #2563EB  blue-600  */
+  --color-primary-hover: 29 78 216;    /* #1D4ED8  blue-700  */
+  --color-accent:        234 179 8;    /* #EAB308  yellow-500 */
+  --color-accent-hover:  202 138 4;    /* #CA8A04  yellow-600 */
+
+  /* Layout */
+  --color-background:    248 250 252;  /* #F8FAFC  slate-50  */
+  --color-surface:       255 255 255;  /* #FFFFFF            */
+  --color-border:        226 232 240;  /* #E2E8F0  slate-200 */
+
+  /* Text */
+  --color-text-primary:  15 23 42;     /* #0F172A  slate-900 */
+  --color-text-muted:    100 116 139;  /* #64748B  slate-500 */
+
+  /* Shape */
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Brand / interactive */
+  --color-primary:       59 130 246;   /* #3B82F6  blue-500  */
+  --color-primary-hover: 37 99 235;    /* #2563EB  blue-600  */
+  --color-accent:        250 204 21;   /* #FACC15  yellow-400 */
+  --color-accent-hover:  234 179 8;    /* #EAB308  yellow-500 */
+
+  /* Layout */
+  --color-background:    15 23 42;     /* #0F172A  slate-900 */
+  --color-surface:       30 41 59;     /* #1E293B  slate-800 */
+  --color-border:        51 65 85;     /* #334155  slate-700 */
+
+  /* Text */
+  --color-text-primary:  248 250 252;  /* #F8FAFC  slate-50  */
+  --color-text-muted:    148 163 184;  /* #94A3B8  slate-400 */
+}
+
+/* ── Base resets ─────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  @apply bg-background text-foreground;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}