fix: add nous-research/ui package

This commit is contained in:
Austin Pickett 2026-04-19 10:48:56 -04:00
parent 957ca79e8e
commit 923539a46b
26 changed files with 798 additions and 637 deletions

View file

@ -3,43 +3,25 @@ import type { DashboardTheme } from "./types";
/**
* Built-in dashboard themes.
*
* The "default" theme matches the current index.css @theme values exactly,
* so applying it is a no-op (CSS vars stay at their stylesheet defaults).
* Other themes override only what they change.
* The `default` theme mirrors LENS_0 (canonical Hermes teal) exactly the
* same triplet `src/index.css` declares on `:root`. Applying it should be a
* visual no-op; other themes override the triplet + warm-glow and let the DS
* cascade handle every derived surface.
*
* Theme names must stay in sync with the backend's
* `_BUILTIN_DASHBOARD_THEMES` list in `hermes_cli/web_server.py`.
*/
export const defaultTheme: DashboardTheme = {
name: "default",
label: "Hermes Teal",
description: "Classic dark teal — the canonical Hermes look",
colors: {
background: "#041C1C",
foreground: "#ffe6cb",
card: "#062424",
"card-foreground": "#ffe6cb",
primary: "#ffe6cb",
"primary-foreground": "#041C1C",
secondary: "#0a2e2e",
"secondary-foreground": "#ffe6cb",
muted: "#083030",
"muted-foreground": "#8aaa9a",
accent: "#0c3838",
"accent-foreground": "#ffe6cb",
destructive: "#fb2c36",
"destructive-foreground": "#fff",
success: "#4ade80",
warning: "#ffbd38",
border: "color-mix(in srgb, #ffe6cb 15%, transparent)",
input: "color-mix(in srgb, #ffe6cb 15%, transparent)",
ring: "#ffe6cb",
popover: "#062424",
"popover-foreground": "#ffe6cb",
},
overlay: {
noiseOpacity: 0.10,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.22,
warmGlowColor: "rgba(255,189,56,0.35)",
palette: {
background: { hex: "#041c1c", alpha: 1 },
midground: { hex: "#ffe6cb", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(255, 189, 56, 0.35)",
noiseOpacity: 1,
},
};
@ -47,34 +29,12 @@ export const midnightTheme: DashboardTheme = {
name: "midnight",
label: "Midnight",
description: "Deep blue-violet with cool accents",
colors: {
background: "#0a0a1a",
foreground: "#e0e0f0",
card: "#10102a",
"card-foreground": "#e0e0f0",
primary: "#a78bfa",
"primary-foreground": "#0a0a1a",
secondary: "#151530",
"secondary-foreground": "#e0e0f0",
muted: "#1a1a3a",
"muted-foreground": "#8888bb",
accent: "#1e1e44",
"accent-foreground": "#e0e0f0",
destructive: "#f43f5e",
"destructive-foreground": "#fff",
success: "#34d399",
warning: "#fbbf24",
border: "color-mix(in srgb, #a78bfa 15%, transparent)",
input: "color-mix(in srgb, #a78bfa 15%, transparent)",
ring: "#a78bfa",
popover: "#10102a",
"popover-foreground": "#e0e0f0",
},
overlay: {
noiseOpacity: 0.08,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.15,
warmGlowColor: "rgba(120,80,220,0.3)",
palette: {
background: { hex: "#0a0a1f", alpha: 1 },
midground: { hex: "#d4c8ff", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(167, 139, 250, 0.32)",
noiseOpacity: 0.8,
},
};
@ -82,34 +42,12 @@ export const emberTheme: DashboardTheme = {
name: "ember",
label: "Ember",
description: "Warm crimson and bronze — forge vibes",
colors: {
background: "#1a0a0a",
foreground: "#fde8d0",
card: "#241010",
"card-foreground": "#fde8d0",
primary: "#f97316",
"primary-foreground": "#1a0a0a",
secondary: "#2a1515",
"secondary-foreground": "#fde8d0",
muted: "#301818",
"muted-foreground": "#b08878",
accent: "#381e1e",
"accent-foreground": "#fde8d0",
destructive: "#ef4444",
"destructive-foreground": "#fff",
success: "#4ade80",
warning: "#fbbf24",
border: "color-mix(in srgb, #f97316 15%, transparent)",
input: "color-mix(in srgb, #f97316 15%, transparent)",
ring: "#f97316",
popover: "#241010",
"popover-foreground": "#fde8d0",
},
overlay: {
noiseOpacity: 0.10,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.25,
warmGlowColor: "rgba(249,115,22,0.3)",
palette: {
background: { hex: "#1a0a06", alpha: 1 },
midground: { hex: "#ffd8b0", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(249, 115, 22, 0.38)",
noiseOpacity: 1,
},
};
@ -117,34 +55,12 @@ export const monoTheme: DashboardTheme = {
name: "mono",
label: "Mono",
description: "Clean grayscale — minimal and focused",
colors: {
background: "#111111",
foreground: "#e0e0e0",
card: "#1a1a1a",
"card-foreground": "#e0e0e0",
primary: "#e0e0e0",
"primary-foreground": "#111111",
secondary: "#1e1e1e",
"secondary-foreground": "#e0e0e0",
muted: "#222222",
"muted-foreground": "#888888",
accent: "#2a2a2a",
"accent-foreground": "#e0e0e0",
destructive: "#ef4444",
"destructive-foreground": "#fff",
success: "#4ade80",
warning: "#fbbf24",
border: "color-mix(in srgb, #e0e0e0 12%, transparent)",
input: "color-mix(in srgb, #e0e0e0 12%, transparent)",
ring: "#e0e0e0",
popover: "#1a1a1a",
"popover-foreground": "#e0e0e0",
},
overlay: {
noiseOpacity: 0.06,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.0,
warmGlowColor: "rgba(255,255,255,0)",
palette: {
background: { hex: "#0e0e0e", alpha: 1 },
midground: { hex: "#eaeaea", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(255, 255, 255, 0.1)",
noiseOpacity: 0.6,
},
};
@ -152,34 +68,12 @@ export const cyberpunkTheme: DashboardTheme = {
name: "cyberpunk",
label: "Cyberpunk",
description: "Neon green on black — matrix terminal",
colors: {
background: "#050505",
foreground: "#00ff88",
card: "#0a0a0a",
"card-foreground": "#00ff88",
primary: "#00ff88",
"primary-foreground": "#050505",
secondary: "#0e0e0e",
"secondary-foreground": "#00ff88",
muted: "#121212",
"muted-foreground": "#00aa55",
accent: "#161616",
"accent-foreground": "#00ff88",
destructive: "#ff0055",
"destructive-foreground": "#fff",
success: "#00ff88",
warning: "#ffff00",
border: "color-mix(in srgb, #00ff88 12%, transparent)",
input: "color-mix(in srgb, #00ff88 12%, transparent)",
ring: "#00ff88",
popover: "#0a0a0a",
"popover-foreground": "#00ff88",
},
overlay: {
noiseOpacity: 0.12,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.10,
warmGlowColor: "rgba(0,255,136,0.15)",
palette: {
background: { hex: "#040608", alpha: 1 },
midground: { hex: "#9bffcf", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(0, 255, 136, 0.22)",
noiseOpacity: 1.2,
},
};
@ -187,38 +81,15 @@ export const roseTheme: DashboardTheme = {
name: "rose",
label: "Rosé",
description: "Soft pink and warm ivory — easy on the eyes",
colors: {
background: "#1a1015",
foreground: "#f5e6e0",
card: "#221820",
"card-foreground": "#f5e6e0",
primary: "#f9a8d4",
"primary-foreground": "#1a1015",
secondary: "#281e28",
"secondary-foreground": "#f5e6e0",
muted: "#2e2230",
"muted-foreground": "#b08898",
accent: "#352838",
"accent-foreground": "#f5e6e0",
destructive: "#fb2c36",
"destructive-foreground": "#fff",
success: "#4ade80",
warning: "#fbbf24",
border: "color-mix(in srgb, #f9a8d4 14%, transparent)",
input: "color-mix(in srgb, #f9a8d4 14%, transparent)",
ring: "#f9a8d4",
popover: "#221820",
"popover-foreground": "#f5e6e0",
},
overlay: {
noiseOpacity: 0.08,
noiseBlendMode: "color-dodge",
warmGlowOpacity: 0.18,
warmGlowColor: "rgba(249,168,212,0.2)",
palette: {
background: { hex: "#1a0f15", alpha: 1 },
midground: { hex: "#ffd4e1", alpha: 1 },
foreground: { hex: "#ffffff", alpha: 0 },
warmGlow: "rgba(249, 168, 212, 0.3)",
noiseOpacity: 0.9,
},
};
/** All built-in themes, keyed by name. */
export const BUILTIN_THEMES: Record<string, DashboardTheme> = {
default: defaultTheme,
midnight: midnightTheme,