feat(dashboard): add theme preset definitions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-22 10:58:03 +08:00 · 2026-03-27 09:47:06 +08:00
parent eff6f473b1
commit 11428b3441
1 changed files with 143 additions and 0 deletions
@@ -0,0 +1,143 @@
+import type { AccentSwatch, ThemePreset } from "./types.ts";
+
+const DARK_ACCENT_SWATCHES: AccentSwatch[] = [
+  { id: "gold", name: "Gold", accent: "#d4a574", accentDim: "#c9a96e", accentBright: "#e8c49a" },
+  { id: "ocean", name: "Ocean", accent: "#5ba4cf", accentDim: "#4e93ba", accentBright: "#7abce0" },
+  { id: "emerald", name: "Emerald", accent: "#5ea67a", accentDim: "#4e9468", accentBright: "#78c492" },
+  { id: "rose", name: "Rose", accent: "#cf7a8a", accentDim: "#b96e7e", accentBright: "#e094a4" },
+  { id: "purple", name: "Purple", accent: "#9b7abf", accentDim: "#876bb0", accentBright: "#b494d4" },
+  { id: "amber", name: "Amber", accent: "#c9963a", accentDim: "#b5862e", accentBright: "#ddb05c" },
+  { id: "teal", name: "Teal", accent: "#4aab9a", accentDim: "#3d9686", accentBright: "#68c4b4" },
+  { id: "silver", name: "Silver", accent: "#a0a8b0", accentDim: "#8e959c", accentBright: "#b8bfc6" },
+];
+
+const LIGHT_ACCENT_SWATCHES: AccentSwatch[] = [
+  { id: "indigo", name: "Indigo", accent: "#4a6fa5", accentDim: "#3d5f8f", accentBright: "#6088bf" },
+  { id: "ocean", name: "Ocean", accent: "#3a8ab5", accentDim: "#2e7aa0", accentBright: "#55a0cc" },
+  { id: "emerald", name: "Emerald", accent: "#3a8a5c", accentDim: "#2e7a4e", accentBright: "#55a878" },
+  { id: "rose", name: "Rose", accent: "#a5566a", accentDim: "#8f4a5c", accentBright: "#bf6e82" },
+  { id: "purple", name: "Purple", accent: "#6b5a9e", accentDim: "#5c4d8a", accentBright: "#8474b5" },
+  { id: "amber", name: "Amber", accent: "#9e7a30", accentDim: "#8a6a28", accentBright: "#b5923e" },
+  { id: "teal", name: "Teal", accent: "#2e8a7a", accentDim: "#267a6c", accentBright: "#45a595" },
+  { id: "slate", name: "Slate", accent: "#5a6570", accentDim: "#4e5860", accentBright: "#6e7a85" },
+];
+
+export const PRESETS: ThemePreset[] = [
+  {
+    id: "dark-gold",
+    name: "Dark Gold",
+    isDark: true,
+    defaultAccentId: "gold",
+    accentSwatches: DARK_ACCENT_SWATCHES,
+    colors: {
+      root: "#0a0a0a",
+      surface: "#111111",
+      elevated: "#1a1a1a",
+      panel: "#141414",
+      "text-primary": "#f5f0eb",
+      "text-secondary": "#a39787",
+      "text-muted": "#6b5f53",
+      "node-file": "#4a7c9b",
+      "node-function": "#5a9e6f",
+      "node-class": "#8b6fb0",
+      "node-module": "#c9a06c",
+      "node-concept": "#b07a8a",
+    },
+  },
+  {
+    id: "dark-ocean",
+    name: "Dark Ocean",
+    isDark: true,
+    defaultAccentId: "ocean",
+    accentSwatches: DARK_ACCENT_SWATCHES,
+    colors: {
+      root: "#0a0e14",
+      surface: "#111820",
+      elevated: "#1a222c",
+      panel: "#141c24",
+      "text-primary": "#e8edf2",
+      "text-secondary": "#87939f",
+      "text-muted": "#536b7a",
+      "node-file": "#4a7c9b",
+      "node-function": "#5a9e6f",
+      "node-class": "#8b6fb0",
+      "node-module": "#c9a06c",
+      "node-concept": "#b07a8a",
+    },
+  },
+  {
+    id: "dark-forest",
+    name: "Dark Forest",
+    isDark: true,
+    defaultAccentId: "emerald",
+    accentSwatches: DARK_ACCENT_SWATCHES,
+    colors: {
+      root: "#0a100a",
+      surface: "#111811",
+      elevated: "#1a241a",
+      panel: "#141c14",
+      "text-primary": "#ebf0eb",
+      "text-secondary": "#87a38f",
+      "text-muted": "#536b5a",
+      "node-file": "#4a7c9b",
+      "node-function": "#5a9e6f",
+      "node-class": "#8b6fb0",
+      "node-module": "#c9a06c",
+      "node-concept": "#b07a8a",
+    },
+  },
+  {
+    id: "dark-rose",
+    name: "Dark Rose",
+    isDark: true,
+    defaultAccentId: "rose",
+    accentSwatches: DARK_ACCENT_SWATCHES,
+    colors: {
+      root: "#100a0a",
+      surface: "#181111",
+      elevated: "#221a1a",
+      panel: "#1c1414",
+      "text-primary": "#f2e8ea",
+      "text-secondary": "#9f8790",
+      "text-muted": "#6b535a",
+      "node-file": "#4a7c9b",
+      "node-function": "#5a9e6f",
+      "node-class": "#8b6fb0",
+      "node-module": "#c9a06c",
+      "node-concept": "#b07a8a",
+    },
+  },
+  {
+    id: "light-minimal",
+    name: "Light Minimal",
+    isDark: false,
+    defaultAccentId: "indigo",
+    accentSwatches: LIGHT_ACCENT_SWATCHES,
+    colors: {
+      root: "#f5f3f0",
+      surface: "#eae7e3",
+      elevated: "#ffffff",
+      panel: "#f0ede9",
+      "text-primary": "#1a1a1a",
+      "text-secondary": "#6b6b6b",
+      "text-muted": "#a0a0a0",
+      "node-file": "#3a6a87",
+      "node-function": "#488a5b",
+      "node-class": "#755d99",
+      "node-module": "#a88a56",
+      "node-concept": "#966674",
+    },
+  },
+];
+
+export function getPreset(id: string): ThemePreset {
+  return PRESETS.find((p) => p.id === id) ?? PRESETS[0];
+}
+
+export function getAccent(preset: ThemePreset, accentId: string): AccentSwatch {
+  return (
+    preset.accentSwatches.find((s) => s.id === accentId) ??
+    preset.accentSwatches.find((s) => s.id === preset.defaultAccentId) ??
+    preset.accentSwatches[0]
+  );
+}