@stigmer/theme 0.0.34 → 0.0.36

package/presets/startup.css

@@ -0,0 +1,78 @@
+/* Startup — Modern dev tools design language (Linear, Vercel, Raycast)
+   Medium radius, monochrome + violet accent, ultra-minimal borders, flat sidebar */
+
+.stgm-theme-startup {
+  --stgm-radius: 0.5rem;
+  --stgm-background: oklch(0.99 0 0);
+  --stgm-foreground: oklch(0.13 0 0);
+  --stgm-card: oklch(0.97 0 0);
+  --stgm-card-foreground: oklch(0.13 0 0);
+  --stgm-popover: oklch(1 0 0);
+  --stgm-popover-foreground: oklch(0.13 0 0);
+  --stgm-primary: oklch(0.50 0.24 285);
+  --stgm-primary-foreground: oklch(0.98 0 0);
+  --stgm-secondary: oklch(0.95 0 0);
+  --stgm-secondary-foreground: oklch(0.30 0 0);
+  --stgm-muted: oklch(0.95 0 0);
+  --stgm-muted-foreground: oklch(0.50 0 0);
+  --stgm-accent: oklch(0.94 0 0);
+  --stgm-accent-foreground: oklch(0.30 0 0);
+  --stgm-border: oklch(0.92 0 0);
+  --stgm-input: oklch(0.90 0 0);
+  --stgm-ring: oklch(0.50 0.18 285);
+  --stgm-chart-1: oklch(0.55 0.24 285);
+  --stgm-chart-2: oklch(0.50 0.06 0);
+  --stgm-chart-3: oklch(0.65 0.16 180);
+  --stgm-chart-4: oklch(0.70 0.18 60);
+  --stgm-chart-5: oklch(0.58 0.20 340);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.04);
+  --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.06), 0 1px 3px -2px rgb(0 0 0 / 0.05);
+  --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.06), 0 3px 5px -4px rgb(0 0 0 / 0.04);
+  --stgm-transition-duration: 100ms;
+  --stgm-transition-timing: cubic-bezier(0, 0, 0.2, 1);
+  --stgm-sidebar: oklch(0.97 0 0);
+  --stgm-sidebar-foreground: oklch(0.13 0 0);
+  --stgm-sidebar-primary: oklch(0.50 0.24 285);
+  --stgm-sidebar-primary-foreground: oklch(0.98 0 0);
+  --stgm-sidebar-accent: oklch(0.94 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.30 0 0);
+  --stgm-sidebar-border: oklch(0.92 0 0);
+  --stgm-sidebar-ring: oklch(0.50 0.18 285);
+}
+
+.dark .stgm-theme-startup,
+.stgm-theme-startup.dark {
+  --stgm-background: oklch(0.09 0 0);
+  --stgm-foreground: oklch(0.90 0 0);
+  --stgm-card: oklch(0.13 0 0);
+  --stgm-card-foreground: oklch(0.90 0 0);
+  --stgm-popover: oklch(0.16 0 0);
+  --stgm-popover-foreground: oklch(0.90 0 0);
+  --stgm-primary: oklch(0.72 0.20 285);
+  --stgm-primary-foreground: oklch(0.10 0 0);
+  --stgm-secondary: oklch(0.16 0 0);
+  --stgm-secondary-foreground: oklch(0.85 0 0);
+  --stgm-muted: oklch(0.16 0 0);
+  --stgm-muted-foreground: oklch(0.55 0 0);
+  --stgm-accent: oklch(0.20 0 0);
+  --stgm-accent-foreground: oklch(0.90 0 0);
+  --stgm-border: oklch(0.22 0 0);
+  --stgm-input: oklch(0.22 0 0);
+  --stgm-ring: oklch(0.55 0.16 285);
+  --stgm-chart-1: oklch(0.65 0.24 285);
+  --stgm-chart-2: oklch(0.55 0.06 0);
+  --stgm-chart-3: oklch(0.65 0.17 180);
+  --stgm-chart-4: oklch(0.72 0.18 60);
+  --stgm-chart-5: oklch(0.62 0.20 340);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 1px 1px -1px rgb(0 0 0 / 0.18);
+  --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.22), 0 1px 3px -2px rgb(0 0 0 / 0.18);
+  --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.25), 0 3px 5px -4px rgb(0 0 0 / 0.2);
+  --stgm-sidebar: oklch(0.07 0 0);
+  --stgm-sidebar-foreground: oklch(0.85 0 0);
+  --stgm-sidebar-primary: oklch(0.72 0.20 285);
+  --stgm-sidebar-primary-foreground: oklch(0.10 0 0);
+  --stgm-sidebar-accent: oklch(0.14 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.85 0 0);
+  --stgm-sidebar-border: oklch(0.18 0 0);
+  --stgm-sidebar-ring: oklch(0.50 0.14 285);
+}

package/src/index.ts

@@ -1,2 +1,4 @@
 export { cn } from "./utils";
 export type { ClassValue } from "./utils";
+export { THEME_PRESETS, resolvePresetClass } from "./presets/index";
+export type { ThemePreset, ThemePresetId } from "./presets/index";

package/src/presets/corporate.css

@@ -0,0 +1,79 @@
+/* Corporate — Enterprise SaaS design language (Azure, Salesforce, ServiceNow)
+   Tight radius, corporate blue, cool surfaces, prominent borders, dark blue sidebar */
+
+.stgm-theme-corporate {
+  --stgm-font-sans: var(--font-inter, "Inter", system-ui, sans-serif);
+  --stgm-radius: 0.375rem;
+  --stgm-background: oklch(0.97 0.01 250);
+  --stgm-foreground: oklch(0.18 0.03 250);
+  --stgm-card: oklch(1 0.005 250);
+  --stgm-card-foreground: oklch(0.18 0.03 250);
+  --stgm-popover: oklch(1 0.005 250);
+  --stgm-popover-foreground: oklch(0.18 0.03 250);
+  --stgm-primary: oklch(0.48 0.18 250);
+  --stgm-primary-foreground: oklch(0.98 0 0);
+  --stgm-secondary: oklch(0.93 0.02 250);
+  --stgm-secondary-foreground: oklch(0.25 0.03 250);
+  --stgm-muted: oklch(0.93 0.02 250);
+  --stgm-muted-foreground: oklch(0.48 0.03 250);
+  --stgm-accent: oklch(0.91 0.03 250);
+  --stgm-accent-foreground: oklch(0.25 0.03 250);
+  --stgm-border: oklch(0.85 0.025 250);
+  --stgm-input: oklch(0.85 0.025 250);
+  --stgm-ring: oklch(0.48 0.15 250);
+  --stgm-chart-1: oklch(0.55 0.20 250);
+  --stgm-chart-2: oklch(0.60 0.16 200);
+  --stgm-chart-3: oklch(0.50 0.15 300);
+  --stgm-chart-4: oklch(0.72 0.16 150);
+  --stgm-chart-5: oklch(0.68 0.18 60);
+  --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.12), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);
+  --stgm-transition-duration: 200ms;
+  --stgm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --stgm-sidebar: oklch(0.20 0.06 250);
+  --stgm-sidebar-foreground: oklch(0.93 0 0);
+  --stgm-sidebar-primary: oklch(0.75 0.14 250);
+  --stgm-sidebar-primary-foreground: oklch(0.15 0 0);
+  --stgm-sidebar-accent: oklch(0.28 0.06 250);
+  --stgm-sidebar-accent-foreground: oklch(0.93 0 0);
+  --stgm-sidebar-border: oklch(1 0 0 / 10%);
+  --stgm-sidebar-ring: oklch(0.48 0.15 250);
+}
+
+.dark .stgm-theme-corporate,
+.stgm-theme-corporate.dark {
+  --stgm-background: oklch(0.16 0.04 250);
+  --stgm-foreground: oklch(0.93 0.01 250);
+  --stgm-card: oklch(0.22 0.05 250);
+  --stgm-card-foreground: oklch(0.93 0.01 250);
+  --stgm-popover: oklch(0.26 0.05 250);
+  --stgm-popover-foreground: oklch(0.93 0.01 250);
+  --stgm-primary: oklch(0.68 0.16 250);
+  --stgm-primary-foreground: oklch(0.12 0 0);
+  --stgm-secondary: oklch(0.26 0.04 250);
+  --stgm-secondary-foreground: oklch(0.93 0.01 250);
+  --stgm-muted: oklch(0.26 0.04 250);
+  --stgm-muted-foreground: oklch(0.65 0.04 250);
+  --stgm-accent: oklch(0.32 0.05 250);
+  --stgm-accent-foreground: oklch(0.93 0.01 250);
+  --stgm-border: oklch(0.40 0.05 250);
+  --stgm-input: oklch(0.40 0.05 250);
+  --stgm-ring: oklch(0.55 0.14 250);
+  --stgm-chart-1: oklch(0.60 0.20 250);
+  --stgm-chart-2: oklch(0.62 0.17 200);
+  --stgm-chart-3: oklch(0.58 0.18 300);
+  --stgm-chart-4: oklch(0.70 0.17 150);
+  --stgm-chart-5: oklch(0.68 0.20 60);
+  --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.28);
+  --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.35);
+  --stgm-sidebar: oklch(0.13 0.05 250);
+  --stgm-sidebar-foreground: oklch(0.93 0 0);
+  --stgm-sidebar-primary: oklch(0.68 0.16 250);
+  --stgm-sidebar-primary-foreground: oklch(0.12 0 0);
+  --stgm-sidebar-accent: oklch(0.22 0.06 250);
+  --stgm-sidebar-accent-foreground: oklch(0.93 0 0);
+  --stgm-sidebar-border: oklch(0.35 0.05 250);
+  --stgm-sidebar-ring: oklch(0.50 0.12 250);
+}

package/src/presets/fintech.css

@@ -0,0 +1,80 @@
+/* Fintech — Premium financial design language (Stripe, Mercury, Brex)
+   Nearly square corners, indigo, crisp surfaces, prominent dark sidebar */
+
+.stgm-theme-fintech {
+  --stgm-font-sans: var(--font-ibm-plex-sans, "IBM Plex Sans", system-ui, sans-serif);
+  --stgm-font-mono: var(--font-ibm-plex-mono, "IBM Plex Mono", ui-monospace, monospace);
+  --stgm-radius: 0.125rem;
+  --stgm-background: oklch(0.98 0.005 280);
+  --stgm-foreground: oklch(0.15 0.04 280);
+  --stgm-card: oklch(1 0.003 280);
+  --stgm-card-foreground: oklch(0.15 0.04 280);
+  --stgm-popover: oklch(1 0.003 280);
+  --stgm-popover-foreground: oklch(0.15 0.04 280);
+  --stgm-primary: oklch(0.48 0.24 280);
+  --stgm-primary-foreground: oklch(0.98 0 0);
+  --stgm-secondary: oklch(0.95 0.01 280);
+  --stgm-secondary-foreground: oklch(0.25 0.04 280);
+  --stgm-muted: oklch(0.95 0.01 280);
+  --stgm-muted-foreground: oklch(0.50 0.03 280);
+  --stgm-accent: oklch(0.93 0.02 280);
+  --stgm-accent-foreground: oklch(0.25 0.04 280);
+  --stgm-border: oklch(0.90 0.01 280);
+  --stgm-input: oklch(0.88 0.015 280);
+  --stgm-ring: oklch(0.48 0.18 280);
+  --stgm-chart-1: oklch(0.52 0.24 280);
+  --stgm-chart-2: oklch(0.58 0.20 230);
+  --stgm-chart-3: oklch(0.50 0.16 340);
+  --stgm-chart-4: oklch(0.68 0.15 170);
+  --stgm-chart-5: oklch(0.74 0.16 60);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 1px 1px 0 rgb(0 0 0 / 0.06);
+  --stgm-shadow-md: 0 3px 4px -1px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
+  --stgm-shadow-lg: 0 8px 10px -3px rgb(0 0 0 / 0.1), 0 3px 4px -3px rgb(0 0 0 / 0.08);
+  --stgm-transition-duration: 150ms;
+  --stgm-transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --stgm-sidebar: oklch(0.12 0.06 280);
+  --stgm-sidebar-foreground: oklch(0.90 0.01 280);
+  --stgm-sidebar-primary: oklch(0.72 0.20 280);
+  --stgm-sidebar-primary-foreground: oklch(0.12 0 0);
+  --stgm-sidebar-accent: oklch(0.20 0.07 280);
+  --stgm-sidebar-accent-foreground: oklch(0.90 0.01 280);
+  --stgm-sidebar-border: oklch(0.25 0.05 280);
+  --stgm-sidebar-ring: oklch(0.48 0.18 280);
+}
+
+.dark .stgm-theme-fintech,
+.stgm-theme-fintech.dark {
+  --stgm-background: oklch(0.12 0.05 280);
+  --stgm-foreground: oklch(0.92 0.01 280);
+  --stgm-card: oklch(0.18 0.06 280);
+  --stgm-card-foreground: oklch(0.92 0.01 280);
+  --stgm-popover: oklch(0.23 0.05 280);
+  --stgm-popover-foreground: oklch(0.92 0.01 280);
+  --stgm-primary: oklch(0.70 0.22 280);
+  --stgm-primary-foreground: oklch(0.10 0 0);
+  --stgm-secondary: oklch(0.23 0.05 280);
+  --stgm-secondary-foreground: oklch(0.92 0.01 280);
+  --stgm-muted: oklch(0.23 0.05 280);
+  --stgm-muted-foreground: oklch(0.58 0.04 280);
+  --stgm-accent: oklch(0.28 0.06 280);
+  --stgm-accent-foreground: oklch(0.92 0.01 280);
+  --stgm-border: oklch(0.35 0.06 280);
+  --stgm-input: oklch(0.35 0.06 280);
+  --stgm-ring: oklch(0.55 0.18 280);
+  --stgm-chart-1: oklch(0.62 0.24 280);
+  --stgm-chart-2: oklch(0.58 0.20 230);
+  --stgm-chart-3: oklch(0.56 0.18 340);
+  --stgm-chart-4: oklch(0.66 0.17 170);
+  --stgm-chart-5: oklch(0.70 0.18 60);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.28), 0 1px 1px 0 rgb(0 0 0 / 0.24);
+  --stgm-shadow-md: 0 3px 4px -1px rgb(0 0 0 / 0.32), 0 1px 2px -1px rgb(0 0 0 / 0.28);
+  --stgm-shadow-lg: 0 8px 10px -3px rgb(0 0 0 / 0.36), 0 3px 4px -3px rgb(0 0 0 / 0.3);
+  --stgm-sidebar: oklch(0.08 0.06 280);
+  --stgm-sidebar-foreground: oklch(0.88 0.01 280);
+  --stgm-sidebar-primary: oklch(0.70 0.22 280);
+  --stgm-sidebar-primary-foreground: oklch(0.10 0 0);
+  --stgm-sidebar-accent: oklch(0.16 0.07 280);
+  --stgm-sidebar-accent-foreground: oklch(0.88 0.01 280);
+  --stgm-sidebar-border: oklch(0.22 0.06 280);
+  --stgm-sidebar-ring: oklch(0.50 0.14 280);
+}

package/src/presets/friendly.css

@@ -0,0 +1,79 @@
+/* Friendly — Consumer SaaS design language (Notion, Intercom, Slack)
+   Very rounded, warm coral, cream-tinted surfaces, soft borders, approachable */
+
+.stgm-theme-friendly {
+  --stgm-font-sans: var(--font-nunito, "Nunito", system-ui, sans-serif);
+  --stgm-radius: 1.25rem;
+  --stgm-background: oklch(0.97 0.015 65);
+  --stgm-foreground: oklch(0.22 0.03 50);
+  --stgm-card: oklch(0.99 0.01 65);
+  --stgm-card-foreground: oklch(0.22 0.03 50);
+  --stgm-popover: oklch(0.99 0.01 65);
+  --stgm-popover-foreground: oklch(0.22 0.03 50);
+  --stgm-primary: oklch(0.62 0.20 40);
+  --stgm-primary-foreground: oklch(0.98 0 0);
+  --stgm-secondary: oklch(0.94 0.02 65);
+  --stgm-secondary-foreground: oklch(0.30 0.03 50);
+  --stgm-muted: oklch(0.93 0.025 65);
+  --stgm-muted-foreground: oklch(0.50 0.03 50);
+  --stgm-accent: oklch(0.92 0.03 65);
+  --stgm-accent-foreground: oklch(0.30 0.03 50);
+  --stgm-border: oklch(0.88 0.02 65);
+  --stgm-input: oklch(0.88 0.02 65);
+  --stgm-ring: oklch(0.62 0.15 40);
+  --stgm-chart-1: oklch(0.62 0.20 40);
+  --stgm-chart-2: oklch(0.58 0.16 150);
+  --stgm-chart-3: oklch(0.55 0.18 280);
+  --stgm-chart-4: oklch(0.72 0.18 90);
+  --stgm-chart-5: oklch(0.58 0.16 200);
+  --stgm-shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.07), 0 1px 3px -1px rgb(0 0 0 / 0.07);
+  --stgm-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.08), 0 2px 5px -2px rgb(0 0 0 / 0.07);
+  --stgm-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.06);
+  --stgm-transition-duration: 200ms;
+  --stgm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --stgm-sidebar: oklch(0.95 0.02 65);
+  --stgm-sidebar-foreground: oklch(0.22 0.03 50);
+  --stgm-sidebar-primary: oklch(0.62 0.20 40);
+  --stgm-sidebar-primary-foreground: oklch(0.98 0 0);
+  --stgm-sidebar-accent: oklch(0.92 0.025 65);
+  --stgm-sidebar-accent-foreground: oklch(0.30 0.03 50);
+  --stgm-sidebar-border: oklch(0.88 0.02 65);
+  --stgm-sidebar-ring: oklch(0.62 0.15 40);
+}
+
+.dark .stgm-theme-friendly,
+.stgm-theme-friendly.dark {
+  --stgm-background: oklch(0.18 0.03 50);
+  --stgm-foreground: oklch(0.93 0.01 65);
+  --stgm-card: oklch(0.24 0.04 50);
+  --stgm-card-foreground: oklch(0.93 0.01 65);
+  --stgm-popover: oklch(0.28 0.035 50);
+  --stgm-popover-foreground: oklch(0.93 0.01 65);
+  --stgm-primary: oklch(0.72 0.18 40);
+  --stgm-primary-foreground: oklch(0.15 0 0);
+  --stgm-secondary: oklch(0.27 0.03 50);
+  --stgm-secondary-foreground: oklch(0.93 0.01 65);
+  --stgm-muted: oklch(0.27 0.03 50);
+  --stgm-muted-foreground: oklch(0.62 0.03 50);
+  --stgm-accent: oklch(0.33 0.04 50);
+  --stgm-accent-foreground: oklch(0.93 0.01 65);
+  --stgm-border: oklch(0.38 0.04 50);
+  --stgm-input: oklch(0.38 0.04 50);
+  --stgm-ring: oklch(0.60 0.14 40);
+  --stgm-chart-1: oklch(0.68 0.20 40);
+  --stgm-chart-2: oklch(0.62 0.17 150);
+  --stgm-chart-3: oklch(0.60 0.18 280);
+  --stgm-chart-4: oklch(0.70 0.18 90);
+  --stgm-chart-5: oklch(0.60 0.17 200);
+  --stgm-shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.22), 0 1px 3px -1px rgb(0 0 0 / 0.2);
+  --stgm-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.26), 0 2px 5px -2px rgb(0 0 0 / 0.22);
+  --stgm-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.3), 0 4px 8px -4px rgb(0 0 0 / 0.25);
+  --stgm-sidebar: oklch(0.15 0.03 50);
+  --stgm-sidebar-foreground: oklch(0.90 0.01 65);
+  --stgm-sidebar-primary: oklch(0.72 0.18 40);
+  --stgm-sidebar-primary-foreground: oklch(0.15 0 0);
+  --stgm-sidebar-accent: oklch(0.24 0.04 50);
+  --stgm-sidebar-accent-foreground: oklch(0.90 0.01 65);
+  --stgm-sidebar-border: oklch(0.32 0.04 50);
+  --stgm-sidebar-ring: oklch(0.55 0.12 40);
+}

package/src/presets/index.ts

@@ -0,0 +1,70 @@
+export interface ThemePreset {
+  readonly id: string;
+  readonly name: string;
+  /** CSS class added to the root element. Empty string for the built-in default. */
+  readonly className: string;
+  readonly description: string;
+  /** Representative OKLCH color string used for swatch rendering. */
+  readonly swatch: string;
+}
+
+export const THEME_PRESETS = [
+  {
+    id: "default",
+    name: "Default",
+    className: "",
+    description: "Stigmer's built-in teal palette",
+    swatch: "oklch(0.55 0.12 190)",
+  },
+  {
+    id: "corporate",
+    name: "Corporate",
+    className: "stgm-theme-corporate",
+    description: "Enterprise SaaS — tight radius, blue, cool grays, dark sidebar",
+    swatch: "oklch(0.48 0.15 250)",
+  },
+  {
+    id: "startup",
+    name: "Startup",
+    className: "stgm-theme-startup",
+    description: "Modern dev tools — clean, monochrome, violet accent, minimal",
+    swatch: "oklch(0.50 0.22 285)",
+  },
+  {
+    id: "friendly",
+    name: "Friendly",
+    className: "stgm-theme-friendly",
+    description: "Consumer SaaS — very rounded, warm coral, cream surfaces",
+    swatch: "oklch(0.62 0.19 45)",
+  },
+  {
+    id: "fintech",
+    name: "Fintech",
+    className: "stgm-theme-fintech",
+    description: "Premium financial — sharp corners, indigo, crisp, dark sidebar",
+    swatch: "oklch(0.50 0.22 280)",
+  },
+] as const satisfies readonly ThemePreset[];
+
+/** Union of built-in preset identifiers. */
+export type ThemePresetId = (typeof THEME_PRESETS)[number]["id"];
+
+/**
+ * Resolve a preset ID to its CSS class name.
+ *
+ * Returns `""` for `"default"` (no additional class needed).
+ * Emits a dev-mode warning for unrecognised IDs (guards JS consumers).
+ */
+export function resolvePresetClass(id: ThemePresetId): string {
+  const preset = THEME_PRESETS.find((p) => p.id === id);
+  if (!preset) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[@stigmer/theme] Unknown preset "${String(id)}". ` +
+          `Available: ${THEME_PRESETS.map((p) => p.id).join(", ")}`,
+      );
+    }
+    return "";
+  }
+  return preset.className;
+}

package/src/presets/startup.css

@@ -0,0 +1,78 @@
+/* Startup — Modern dev tools design language (Linear, Vercel, Raycast)
+   Medium radius, monochrome + violet accent, ultra-minimal borders, flat sidebar */
+
+.stgm-theme-startup {
+  --stgm-radius: 0.5rem;
+  --stgm-background: oklch(0.99 0 0);
+  --stgm-foreground: oklch(0.13 0 0);
+  --stgm-card: oklch(0.97 0 0);
+  --stgm-card-foreground: oklch(0.13 0 0);
+  --stgm-popover: oklch(1 0 0);
+  --stgm-popover-foreground: oklch(0.13 0 0);
+  --stgm-primary: oklch(0.50 0.24 285);
+  --stgm-primary-foreground: oklch(0.98 0 0);
+  --stgm-secondary: oklch(0.95 0 0);
+  --stgm-secondary-foreground: oklch(0.30 0 0);
+  --stgm-muted: oklch(0.95 0 0);
+  --stgm-muted-foreground: oklch(0.50 0 0);
+  --stgm-accent: oklch(0.94 0 0);
+  --stgm-accent-foreground: oklch(0.30 0 0);
+  --stgm-border: oklch(0.92 0 0);
+  --stgm-input: oklch(0.90 0 0);
+  --stgm-ring: oklch(0.50 0.18 285);
+  --stgm-chart-1: oklch(0.55 0.24 285);
+  --stgm-chart-2: oklch(0.50 0.06 0);
+  --stgm-chart-3: oklch(0.65 0.16 180);
+  --stgm-chart-4: oklch(0.70 0.18 60);
+  --stgm-chart-5: oklch(0.58 0.20 340);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.04);
+  --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.06), 0 1px 3px -2px rgb(0 0 0 / 0.05);
+  --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.06), 0 3px 5px -4px rgb(0 0 0 / 0.04);
+  --stgm-transition-duration: 100ms;
+  --stgm-transition-timing: cubic-bezier(0, 0, 0.2, 1);
+  --stgm-sidebar: oklch(0.97 0 0);
+  --stgm-sidebar-foreground: oklch(0.13 0 0);
+  --stgm-sidebar-primary: oklch(0.50 0.24 285);
+  --stgm-sidebar-primary-foreground: oklch(0.98 0 0);
+  --stgm-sidebar-accent: oklch(0.94 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.30 0 0);
+  --stgm-sidebar-border: oklch(0.92 0 0);
+  --stgm-sidebar-ring: oklch(0.50 0.18 285);
+}
+
+.dark .stgm-theme-startup,
+.stgm-theme-startup.dark {
+  --stgm-background: oklch(0.09 0 0);
+  --stgm-foreground: oklch(0.90 0 0);
+  --stgm-card: oklch(0.13 0 0);
+  --stgm-card-foreground: oklch(0.90 0 0);
+  --stgm-popover: oklch(0.16 0 0);
+  --stgm-popover-foreground: oklch(0.90 0 0);
+  --stgm-primary: oklch(0.72 0.20 285);
+  --stgm-primary-foreground: oklch(0.10 0 0);
+  --stgm-secondary: oklch(0.16 0 0);
+  --stgm-secondary-foreground: oklch(0.85 0 0);
+  --stgm-muted: oklch(0.16 0 0);
+  --stgm-muted-foreground: oklch(0.55 0 0);
+  --stgm-accent: oklch(0.20 0 0);
+  --stgm-accent-foreground: oklch(0.90 0 0);
+  --stgm-border: oklch(0.22 0 0);
+  --stgm-input: oklch(0.22 0 0);
+  --stgm-ring: oklch(0.55 0.16 285);
+  --stgm-chart-1: oklch(0.65 0.24 285);
+  --stgm-chart-2: oklch(0.55 0.06 0);
+  --stgm-chart-3: oklch(0.65 0.17 180);
+  --stgm-chart-4: oklch(0.72 0.18 60);
+  --stgm-chart-5: oklch(0.62 0.20 340);
+  --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 1px 1px -1px rgb(0 0 0 / 0.18);
+  --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.22), 0 1px 3px -2px rgb(0 0 0 / 0.18);
+  --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.25), 0 3px 5px -4px rgb(0 0 0 / 0.2);
+  --stgm-sidebar: oklch(0.07 0 0);
+  --stgm-sidebar-foreground: oklch(0.85 0 0);
+  --stgm-sidebar-primary: oklch(0.72 0.20 285);
+  --stgm-sidebar-primary-foreground: oklch(0.10 0 0);
+  --stgm-sidebar-accent: oklch(0.14 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.85 0 0);
+  --stgm-sidebar-border: oklch(0.18 0 0);
+  --stgm-sidebar-ring: oklch(0.50 0.14 285);
+}

package/src/tokens.css

@@ -1,70 +1,93 @@
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --stgm-font-sans: var(--font-geist-sans, system-ui, sans-serif);
+  --stgm-font-mono: var(--font-geist-mono, ui-monospace, monospace);
+  --stgm-radius: 0.625rem;
+  --stgm-background: oklch(1 0 0);
+  --stgm-foreground: oklch(0.145 0 0);
+  --stgm-card: oklch(1 0 0);
+  --stgm-card-foreground: oklch(0.145 0 0);
+  --stgm-popover: oklch(1 0 0);
+  --stgm-popover-foreground: oklch(0.145 0 0);
+  --stgm-primary: oklch(0.55 0.12 190);
+  --stgm-primary-foreground: oklch(0.985 0 0);
+  --stgm-secondary: oklch(0.97 0 0);
+  --stgm-secondary-foreground: oklch(0.205 0 0);
+  --stgm-muted: oklch(0.97 0 0);
+  --stgm-muted-foreground: oklch(0.556 0 0);
+  --stgm-accent: oklch(0.97 0 0);
+  --stgm-accent-foreground: oklch(0.205 0 0);
+  --stgm-destructive: oklch(0.577 0.245 27.325);
+  --stgm-destructive-foreground: oklch(0.985 0 0);
+  --stgm-success: oklch(0.55 0.15 150);
+  --stgm-success-foreground: oklch(0.985 0 0);
+  --stgm-warning: oklch(0.75 0.18 80);
+  --stgm-warning-foreground: oklch(0.145 0 0);
+  --stgm-info: oklch(0.55 0.15 250);
+  --stgm-info-foreground: oklch(0.985 0 0);
+  --stgm-border: oklch(0.922 0 0);
+  --stgm-input: oklch(0.922 0 0);
+  --stgm-ring: oklch(0.55 0.1 190);
+  --stgm-chart-1: oklch(0.646 0.222 41.116);
+  --stgm-chart-2: oklch(0.6 0.118 184.704);
+  --stgm-chart-3: oklch(0.398 0.07 227.392);
+  --stgm-chart-4: oklch(0.828 0.189 84.429);
+  --stgm-chart-5: oklch(0.769 0.188 70.08);
+  --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --stgm-transition-duration: 150ms;
+  --stgm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --stgm-z-popover: 50;
+  --stgm-sidebar: oklch(0.985 0 0);
+  --stgm-sidebar-foreground: oklch(0.145 0 0);
+  --stgm-sidebar-primary: oklch(0.55 0.12 190);
+  --stgm-sidebar-primary-foreground: oklch(0.985 0 0);
+  --stgm-sidebar-accent: oklch(0.97 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.205 0 0);
+  --stgm-sidebar-border: oklch(0.922 0 0);
+  --stgm-sidebar-ring: oklch(0.55 0.1 190);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.269 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.439 0 0);
+  --stgm-background: oklch(0.145 0 0);
+  --stgm-foreground: oklch(0.985 0 0);
+  --stgm-card: oklch(0.205 0 0);
+  --stgm-card-foreground: oklch(0.985 0 0);
+  --stgm-popover: oklch(0.269 0 0);
+  --stgm-popover-foreground: oklch(0.985 0 0);
+  --stgm-primary: oklch(0.72 0.12 190);
+  --stgm-primary-foreground: oklch(0.145 0 0);
+  --stgm-secondary: oklch(0.269 0 0);
+  --stgm-secondary-foreground: oklch(0.985 0 0);
+  --stgm-muted: oklch(0.269 0 0);
+  --stgm-muted-foreground: oklch(0.708 0 0);
+  --stgm-accent: oklch(0.371 0 0);
+  --stgm-accent-foreground: oklch(0.985 0 0);
+  --stgm-destructive: oklch(0.704 0.191 22.216);
+  --stgm-destructive-foreground: oklch(0.985 0 0);
+  --stgm-success: oklch(0.7 0.15 150);
+  --stgm-success-foreground: oklch(0.985 0 0);
+  --stgm-warning: oklch(0.78 0.16 80);
+  --stgm-warning-foreground: oklch(0.145 0 0);
+  --stgm-info: oklch(0.7 0.15 250);
+  --stgm-info-foreground: oklch(0.985 0 0);
+  --stgm-border: oklch(1 0 0 / 10%);
+  --stgm-input: oklch(1 0 0 / 15%);
+  --stgm-ring: oklch(0.55 0.1 190);
+  --stgm-chart-1: oklch(0.488 0.243 264.376);
+  --stgm-chart-2: oklch(0.696 0.17 162.48);
+  --stgm-chart-3: oklch(0.769 0.188 70.08);
+  --stgm-chart-4: oklch(0.627 0.265 303.9);
+  --stgm-chart-5: oklch(0.645 0.246 16.439);
+  --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
+  --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.25);
+  --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --stgm-sidebar: oklch(0.205 0 0);
+  --stgm-sidebar-foreground: oklch(0.985 0 0);
+  --stgm-sidebar-primary: oklch(0.72 0.12 190);
+  --stgm-sidebar-primary-foreground: oklch(0.145 0 0);
+  --stgm-sidebar-accent: oklch(0.269 0 0);
+  --stgm-sidebar-accent-foreground: oklch(0.985 0 0);
+  --stgm-sidebar-border: oklch(1 0 0 / 10%);
+  --stgm-sidebar-ring: oklch(0.5 0.08 190);
 }