@stigmer/theme 0.0.34 → 0.0.39

package/presets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,iCAAiC;QAC9C,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,sBAAsB;QACjC,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,8DAA8D;QAC3E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,qBAAqB;QAChC,WAAW,EAAE,0DAA0D;QACvE,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;CACwC,CAAC;AAK5C;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAiB;IAClD,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,oCAAoC,MAAM,CAAC,EAAE,CAAC,KAAK;gBACjD,cAAc,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC5D,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC,SAAS,CAAC;AAC1B,CAAC"}

package/presets/startup.css

@@ -0,0 +1,94 @@
+/* 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-primary-hover: oklch(0.45 0.22 285);
+  --stgm-primary-subtle: oklch(0.96 0.02 285);
+  --stgm-destructive-subtle: oklch(0.96 0.03 27);
+  --stgm-muted-subtle: oklch(0.97 0 0);
+  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
+  --stgm-backdrop: oklch(0.99 0 0 / 80%);
+  --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-muted: oklch(0.94 0 0);
+  --stgm-sidebar-muted-foreground: oklch(0.50 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-primary-hover: oklch(0.66 0.18 285);
+  --stgm-primary-subtle: oklch(0.16 0.04 285);
+  --stgm-destructive-subtle: oklch(0.16 0.04 22);
+  --stgm-muted-subtle: oklch(0.12 0 0);
+  --stgm-muted-foreground-subtle: oklch(0.45 0 0);
+  --stgm-backdrop: oklch(0.09 0 0 / 80%);
+  --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-muted: oklch(0.13 0 0);
+  --stgm-sidebar-muted-foreground: oklch(0.50 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,95 @@
+/* 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-primary-hover: oklch(0.43 0.16 250);
+  --stgm-primary-subtle: oklch(0.95 0.02 250);
+  --stgm-destructive-subtle: oklch(0.95 0.03 27);
+  --stgm-muted-subtle: oklch(0.95 0.01 250);
+  --stgm-muted-foreground-subtle: oklch(0.58 0.03 250);
+  --stgm-backdrop: oklch(0.97 0.01 250 / 80%);
+  --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-muted: oklch(0.26 0.05 250);
+  --stgm-sidebar-muted-foreground: oklch(0.65 0.04 250);
+  --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-primary-hover: oklch(0.62 0.14 250);
+  --stgm-primary-subtle: oklch(0.24 0.04 250);
+  --stgm-destructive-subtle: oklch(0.24 0.04 22);
+  --stgm-muted-subtle: oklch(0.21 0.03 250);
+  --stgm-muted-foreground-subtle: oklch(0.55 0.04 250);
+  --stgm-backdrop: oklch(0.16 0.04 250 / 80%);
+  --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-muted: oklch(0.20 0.05 250);
+  --stgm-sidebar-muted-foreground: oklch(0.58 0.04 250);
+  --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,96 @@
+/* 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-primary-hover: oklch(0.43 0.22 280);
+  --stgm-primary-subtle: oklch(0.96 0.02 280);
+  --stgm-destructive-subtle: oklch(0.96 0.03 27);
+  --stgm-muted-subtle: oklch(0.97 0.005 280);
+  --stgm-muted-foreground-subtle: oklch(0.60 0.03 280);
+  --stgm-backdrop: oklch(0.98 0.005 280 / 80%);
+  --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-muted: oklch(0.18 0.06 280);
+  --stgm-sidebar-muted-foreground: oklch(0.58 0.04 280);
+  --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-primary-hover: oklch(0.64 0.20 280);
+  --stgm-primary-subtle: oklch(0.18 0.05 280);
+  --stgm-destructive-subtle: oklch(0.18 0.04 22);
+  --stgm-muted-subtle: oklch(0.17 0.04 280);
+  --stgm-muted-foreground-subtle: oklch(0.48 0.04 280);
+  --stgm-backdrop: oklch(0.12 0.05 280 / 80%);
+  --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-muted: oklch(0.14 0.06 280);
+  --stgm-sidebar-muted-foreground: oklch(0.52 0.04 280);
+  --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,95 @@
+/* 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-primary-hover: oklch(0.57 0.18 40);
+  --stgm-primary-subtle: oklch(0.95 0.03 40);
+  --stgm-destructive-subtle: oklch(0.95 0.03 27);
+  --stgm-muted-subtle: oklch(0.95 0.02 65);
+  --stgm-muted-foreground-subtle: oklch(0.60 0.03 50);
+  --stgm-backdrop: oklch(0.97 0.015 65 / 80%);
+  --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-muted: oklch(0.92 0.02 65);
+  --stgm-sidebar-muted-foreground: oklch(0.50 0.03 50);
+  --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-primary-hover: oklch(0.66 0.16 40);
+  --stgm-primary-subtle: oklch(0.26 0.04 40);
+  --stgm-destructive-subtle: oklch(0.26 0.04 22);
+  --stgm-muted-subtle: oklch(0.22 0.02 50);
+  --stgm-muted-foreground-subtle: oklch(0.52 0.03 50);
+  --stgm-backdrop: oklch(0.18 0.03 50 / 80%);
+  --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-muted: oklch(0.22 0.03 50);
+  --stgm-sidebar-muted-foreground: oklch(0.58 0.03 50);
+  --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,94 @@
+/* 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-primary-hover: oklch(0.45 0.22 285);
+  --stgm-primary-subtle: oklch(0.96 0.02 285);
+  --stgm-destructive-subtle: oklch(0.96 0.03 27);
+  --stgm-muted-subtle: oklch(0.97 0 0);
+  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
+  --stgm-backdrop: oklch(0.99 0 0 / 80%);
+  --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-muted: oklch(0.94 0 0);
+  --stgm-sidebar-muted-foreground: oklch(0.50 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-primary-hover: oklch(0.66 0.18 285);
+  --stgm-primary-subtle: oklch(0.16 0.04 285);
+  --stgm-destructive-subtle: oklch(0.16 0.04 22);
+  --stgm-muted-subtle: oklch(0.12 0 0);
+  --stgm-muted-foreground-subtle: oklch(0.45 0 0);
+  --stgm-backdrop: oklch(0.09 0 0 / 80%);
+  --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-muted: oklch(0.13 0 0);
+  --stgm-sidebar-muted-foreground: oklch(0.50 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);
+}