feat(ui): design system foundation

Add semantic design tokens and base primitives to replace the verbose inline var() styling that made the UI feel dated. - Rename colliding Tailwind color tokens (bg-primary/bg-secondary) to semantic names (surface/surface-raised/content/content-muted/brand/line) - Derive hover, overlay, border-strong, accent-muted and elevation tokens once on <body> so they adapt to every theme automatically - Make :root mirror Tokyo Night to kill the first-paint theme flash - Add component primitives in @layer components: .card (surface + soft shadow, no hard border), .btn variants, .input, .chip, .badge, .icon-btn - Add theme-aware status/priority badges and global focus-visible styling - Add an inline-SVG Icon() component (consistent stroke language) to replace the mixed emoji/SVG iconography - Data-drive theme/wood options and add an active-nav helper - Add skeleton shimmer + x-cloak support
2026-08-05 16:03:07 -04:00
parent 94a4facc6c
commit f3f908eb7e
7 changed files with 893 additions and 160 deletions
@@ -44,25 +44,43 @@ const config: Config = {
        ],
      },
      colors: {
-        primary: {
-          DEFAULT: "#7aa2f7",
-          50: "#f0f9ff",
-          100: "#e0f2fe",
-          200: "#bae6fd",
-          300: "#7dd3fc",
-          400: "#38bdf8",
-          500: "#0ea5e9",
-          600: "#0284c7",
-          700: "#0369a1",
-          800: "#075985",
-          900: "#0c4a6e",
+        // Semantic surface tokens (page bg, cards, raised layers)
+        surface: {
+          DEFAULT: "var(--bg-primary)",
+          raised: "var(--bg-secondary)",
+          hover: "var(--surface-hover)",
+          overlay: "var(--surface-overlay)",
        },
-        "bg-primary": "var(--bg-primary)",
-        "bg-secondary": "var(--bg-secondary)",
-        "text-primary": "var(--text-primary)",
-        "text-secondary": "var(--text-secondary)",
-        accent: "var(--accent)",
-        border: "var(--border)",
+        // Text tokens
+        content: {
+          DEFAULT: "var(--text-primary)",
+          muted: "var(--text-secondary)",
+        },
+        // Accent / brand
+        brand: {
+          DEFAULT: "var(--accent)",
+          muted: "var(--accent-muted)",
+        },
+        // Borders / hairlines
+        line: {
+          DEFAULT: "var(--border)",
+          strong: "var(--border-strong)",
+        },
+        // Status colors (theme-aware via vars, fall back to fixed)
+        success: "var(--status-success)",
+        warning: "var(--status-warning)",
+        danger: "var(--status-danger)",
+        info: "var(--status-info)",
+      },
+      borderRadius: {
+        xl: "0.875rem",
+        "2xl": "1.25rem",
+      },
+      boxShadow: {
+        card: "var(--shadow-card)",
+        "card-hover": "var(--shadow-card-hover)",
+        pop: "var(--shadow-pop)",
+        bar: "var(--shadow-bar)",
      },
      backgroundImage: {
        "wood-light": "url('/static/textures/wood-light.png')",