feat(web): add theme definition system with 5 built-in themes (#493)

Co-authored-by: Jason Woltje <[email protected]> Co-committed-by: Jason Woltje <[email protected]>
2026-02-23 13:59:01 +00:00
parent f435d8e8c6
commit cfd1def4a9
10 changed files with 575 additions and 21 deletions
@@ -0,0 +1,41 @@
+import type { ThemeDefinition } from "./types";
+
+export const lightTheme: ThemeDefinition = {
+  id: "light",
+  name: "Light",
+  description: "Clean light theme — soft blues with crisp contrast",
+  author: "Mosaic Stack",
+  isDark: false,
+  colorPreview: ["#f0f4fc", "#dde4f2", "#0f141d", "#2f80ff", "#8b5cf6"],
+  colors: {
+    "bg-950": "#f8faff",
+    "bg-900": "#f0f4fc",
+    "bg-850": "#e8edf8",
+    "surface-800": "#dde4f2",
+    "surface-750": "#d0d9ec",
+    "border-700": "#b8c4de",
+    "text-100": "#0f141d",
+    "text-300": "#2f3b52",
+    "text-500": "#5a6a87",
+    "blue-500": "#2f80ff",
+    "blue-400": "#56a0ff",
+    "red-500": "#e5484d",
+    "red-400": "#f06a6f",
+    "purple-500": "#8b5cf6",
+    "purple-400": "#a78bfa",
+    "teal-500": "#14b8a6",
+    "teal-400": "#2dd4bf",
+    "amber-500": "#f59e0b",
+    "amber-400": "#fbbf24",
+    "pink-500": "#ec4899",
+    "emerald-500": "#10b981",
+    "orange-500": "#f97316",
+    "cyan-500": "#06b6d4",
+    "indigo-500": "#6366f1",
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08)",
+  },
+};