@teja-app/ui 0.0.9 → 0.0.11

package/dist/theme/presets.d.ts

@@ -0,0 +1,370 @@
+/**
+ * Theme preset catalogues — each entry is a self-contained set of CSS variable
+ * overrides applied on top of the base tokens. Ported from design/components/tweaks.jsx.
+ *
+ * Why explicit derived stops (hover/soft/ring) instead of computing from one
+ * input: we want predictable color science across all stops without runtime
+ * OKLCH math, and dark-mode variants can diverge from a simple lightness flip.
+ */
+export type CSSVarMap = Record<string, string>;
+export interface PresetEntry {
+    label: string;
+    swatch?: string;
+    vars: CSSVarMap;
+    darkVars?: CSSVarMap;
+}
+export declare const PRIMARY_OPTIONS: {
+    readonly clinical: {
+        readonly label: "Clinical blue";
+        readonly swatch: "oklch(0.50 0.13 235)";
+        readonly vars: {
+            readonly '--primary': "oklch(0.50 0.13 235)";
+            readonly '--primary-hover': "oklch(0.45 0.13 235)";
+            readonly '--primary-soft': "oklch(0.95 0.035 235)";
+            readonly '--primary-ring': "oklch(0.50 0.13 235 / 0.18)";
+        };
+        readonly darkVars: {
+            readonly '--primary-soft': "oklch(0.30 0.07 235)";
+        };
+    };
+    readonly indigo: {
+        readonly label: "Indigo";
+        readonly swatch: "oklch(0.50 0.16 275)";
+        readonly vars: {
+            readonly '--primary': "oklch(0.50 0.16 275)";
+            readonly '--primary-hover': "oklch(0.45 0.16 275)";
+            readonly '--primary-soft': "oklch(0.95 0.04 275)";
+            readonly '--primary-ring': "oklch(0.50 0.16 275 / 0.18)";
+        };
+        readonly darkVars: {
+            readonly '--primary-soft': "oklch(0.30 0.08 275)";
+        };
+    };
+    readonly teal: {
+        readonly label: "Healthcare teal";
+        readonly swatch: "oklch(0.55 0.11 195)";
+        readonly vars: {
+            readonly '--primary': "oklch(0.55 0.11 195)";
+            readonly '--primary-hover': "oklch(0.50 0.11 195)";
+            readonly '--primary-soft': "oklch(0.95 0.035 195)";
+            readonly '--primary-ring': "oklch(0.55 0.11 195 / 0.18)";
+        };
+        readonly darkVars: {
+            readonly '--primary-soft': "oklch(0.30 0.07 195)";
+        };
+    };
+    readonly slate: {
+        readonly label: "Slate";
+        readonly swatch: "oklch(0.35 0.03 250)";
+        readonly vars: {
+            readonly '--primary': "oklch(0.30 0.03 250)";
+            readonly '--primary-hover': "oklch(0.25 0.03 250)";
+            readonly '--primary-soft': "oklch(0.94 0.008 250)";
+            readonly '--primary-ring': "oklch(0.30 0.03 250 / 0.18)";
+        };
+        readonly darkVars: {
+            readonly '--primary': "oklch(0.78 0.02 250)";
+            readonly '--primary-hover': "oklch(0.85 0.02 250)";
+            readonly '--primary-soft': "oklch(0.28 0.01 250)";
+            readonly '--ink-on-primary': "oklch(0.18 0.005 250)";
+        };
+    };
+};
+export declare const AI_OPTIONS: {
+    readonly violet: {
+        readonly label: "Warm violet";
+        readonly swatch: "oklch(0.55 0.18 305)";
+        readonly vars: {
+            readonly '--ai': "oklch(0.55 0.18 305)";
+            readonly '--ai-2': "oklch(0.62 0.15 260)";
+            readonly '--ai-soft': "oklch(0.96 0.035 305)";
+            readonly '--ai-tint': "oklch(0.985 0.012 305)";
+            readonly '--ai-ring': "oklch(0.55 0.18 305 / 0.20)";
+            readonly '--ai-gradient': "linear-gradient(135deg, oklch(0.55 0.18 305), oklch(0.62 0.15 250))";
+            readonly '--ai-border': "linear-gradient(135deg, oklch(0.55 0.18 305 / 0.35), oklch(0.62 0.15 250 / 0.35))";
+        };
+        readonly darkVars: {
+            readonly '--ai-soft': "oklch(0.30 0.08 305)";
+            readonly '--ai-tint': "oklch(0.22 0.04 305)";
+        };
+    };
+    readonly magenta: {
+        readonly label: "Magenta";
+        readonly swatch: "oklch(0.55 0.20 340)";
+        readonly vars: {
+            readonly '--ai': "oklch(0.55 0.20 340)";
+            readonly '--ai-2': "oklch(0.60 0.18 25)";
+            readonly '--ai-soft': "oklch(0.96 0.035 340)";
+            readonly '--ai-tint': "oklch(0.985 0.012 340)";
+            readonly '--ai-ring': "oklch(0.55 0.20 340 / 0.20)";
+            readonly '--ai-gradient': "linear-gradient(135deg, oklch(0.55 0.20 340), oklch(0.60 0.18 30))";
+            readonly '--ai-border': "linear-gradient(135deg, oklch(0.55 0.20 340 / 0.35), oklch(0.60 0.18 30 / 0.35))";
+        };
+        readonly darkVars: {
+            readonly '--ai-soft': "oklch(0.30 0.09 340)";
+            readonly '--ai-tint': "oklch(0.22 0.05 340)";
+        };
+    };
+    readonly ocean: {
+        readonly label: "Ocean";
+        readonly swatch: "oklch(0.55 0.16 240)";
+        readonly vars: {
+            readonly '--ai': "oklch(0.55 0.16 240)";
+            readonly '--ai-2': "oklch(0.58 0.13 195)";
+            readonly '--ai-soft': "oklch(0.96 0.035 240)";
+            readonly '--ai-tint': "oklch(0.985 0.012 240)";
+            readonly '--ai-ring': "oklch(0.55 0.16 240 / 0.20)";
+            readonly '--ai-gradient': "linear-gradient(135deg, oklch(0.55 0.16 240), oklch(0.58 0.13 195))";
+            readonly '--ai-border': "linear-gradient(135deg, oklch(0.55 0.16 240 / 0.35), oklch(0.58 0.13 195 / 0.35))";
+        };
+        readonly darkVars: {
+            readonly '--ai-soft': "oklch(0.30 0.08 240)";
+            readonly '--ai-tint': "oklch(0.22 0.04 240)";
+        };
+    };
+    readonly ember: {
+        readonly label: "Ember";
+        readonly swatch: "oklch(0.58 0.18 45)";
+        readonly vars: {
+            readonly '--ai': "oklch(0.58 0.18 45)";
+            readonly '--ai-2': "oklch(0.62 0.16 25)";
+            readonly '--ai-soft': "oklch(0.96 0.04 45)";
+            readonly '--ai-tint': "oklch(0.985 0.012 45)";
+            readonly '--ai-ring': "oklch(0.58 0.18 45 / 0.20)";
+            readonly '--ai-gradient': "linear-gradient(135deg, oklch(0.58 0.18 45), oklch(0.62 0.16 15))";
+            readonly '--ai-border': "linear-gradient(135deg, oklch(0.58 0.18 45 / 0.35), oklch(0.62 0.16 15 / 0.35))";
+        };
+        readonly darkVars: {
+            readonly '--ai-soft': "oklch(0.30 0.09 45)";
+            readonly '--ai-tint': "oklch(0.22 0.05 45)";
+        };
+    };
+};
+export declare const SURFACE_OPTIONS: {
+    readonly cool: {
+        readonly label: "Cool";
+        readonly swatch: "oklch(0.985 0.005 250)";
+        readonly vars: {
+            readonly '--bg': "oklch(0.985 0.003 250)";
+            readonly '--surface-0': "#ffffff";
+            readonly '--surface-1': "oklch(0.978 0.004 250)";
+            readonly '--surface-2': "oklch(0.955 0.006 250)";
+            readonly '--surface-3': "oklch(0.925 0.008 250)";
+            readonly '--sidebar': "oklch(0.975 0.004 250)";
+            readonly '--border': "oklch(0.925 0.006 250)";
+            readonly '--border-strong': "oklch(0.86 0.008 250)";
+            readonly '--divider': "oklch(0.94 0.005 250)";
+        };
+        readonly darkVars: {
+            readonly '--bg': "oklch(0.205 0.008 250)";
+            readonly '--surface-0': "oklch(0.165 0.010 250)";
+            readonly '--surface-1': "oklch(0.185 0.009 250)";
+            readonly '--surface-2': "oklch(0.255 0.011 250)";
+            readonly '--surface-3': "oklch(0.300 0.013 250)";
+            readonly '--sidebar': "oklch(0.175 0.009 250)";
+            readonly '--border': "oklch(0.305 0.012 250)";
+            readonly '--border-strong': "oklch(0.430 0.014 250)";
+            readonly '--divider': "oklch(0.255 0.010 250)";
+        };
+    };
+    readonly neutral: {
+        readonly label: "Neutral";
+        readonly swatch: "oklch(0.985 0 0)";
+        readonly vars: {
+            readonly '--bg': "oklch(0.985 0 0)";
+            readonly '--surface-0': "#ffffff";
+            readonly '--surface-1': "oklch(0.978 0 0)";
+            readonly '--surface-2': "oklch(0.955 0 0)";
+            readonly '--surface-3': "oklch(0.925 0 0)";
+            readonly '--sidebar': "oklch(0.975 0 0)";
+            readonly '--border': "oklch(0.925 0 0)";
+            readonly '--border-strong': "oklch(0.86 0 0)";
+            readonly '--divider': "oklch(0.94 0 0)";
+        };
+        readonly darkVars: {
+            readonly '--bg': "oklch(0.205 0 0)";
+            readonly '--surface-0': "oklch(0.165 0 0)";
+            readonly '--surface-1': "oklch(0.185 0 0)";
+            readonly '--surface-2': "oklch(0.255 0 0)";
+            readonly '--surface-3': "oklch(0.300 0 0)";
+            readonly '--sidebar': "oklch(0.175 0 0)";
+            readonly '--border': "oklch(0.305 0 0)";
+            readonly '--border-strong': "oklch(0.430 0 0)";
+            readonly '--divider': "oklch(0.255 0 0)";
+        };
+    };
+    readonly warm: {
+        readonly label: "Warm";
+        readonly swatch: "oklch(0.985 0.005 80)";
+        readonly vars: {
+            readonly '--bg': "oklch(0.985 0.004 80)";
+            readonly '--surface-0': "#ffffff";
+            readonly '--surface-1': "oklch(0.978 0.005 80)";
+            readonly '--surface-2': "oklch(0.955 0.007 80)";
+            readonly '--surface-3': "oklch(0.925 0.009 80)";
+            readonly '--sidebar': "oklch(0.975 0.005 80)";
+            readonly '--border': "oklch(0.925 0.007 80)";
+            readonly '--border-strong': "oklch(0.86 0.009 80)";
+            readonly '--divider': "oklch(0.94 0.006 80)";
+        };
+        readonly darkVars: {
+            readonly '--bg': "oklch(0.205 0.009 80)";
+            readonly '--surface-0': "oklch(0.165 0.011 80)";
+            readonly '--surface-1': "oklch(0.185 0.010 80)";
+            readonly '--surface-2': "oklch(0.255 0.012 80)";
+            readonly '--surface-3': "oklch(0.300 0.014 80)";
+            readonly '--sidebar': "oklch(0.175 0.010 80)";
+            readonly '--border': "oklch(0.305 0.013 80)";
+            readonly '--border-strong': "oklch(0.430 0.015 80)";
+            readonly '--divider': "oklch(0.255 0.011 80)";
+        };
+    };
+};
+export declare const RADIUS_OPTIONS: {
+    readonly sharp: {
+        readonly label: "Sharp";
+        readonly vars: {
+            readonly '--r-xs': "2px";
+            readonly '--r-sm': "3px";
+            readonly '--r-md': "4px";
+            readonly '--r-lg': "6px";
+            readonly '--r-xl': "8px";
+            readonly '--r-2xl': "10px";
+        };
+    };
+    readonly balanced: {
+        readonly label: "Balanced";
+        readonly vars: {
+            readonly '--r-xs': "4px";
+            readonly '--r-sm': "6px";
+            readonly '--r-md': "8px";
+            readonly '--r-lg': "12px";
+            readonly '--r-xl': "16px";
+            readonly '--r-2xl': "20px";
+        };
+    };
+    readonly soft: {
+        readonly label: "Soft";
+        readonly vars: {
+            readonly '--r-xs': "6px";
+            readonly '--r-sm': "8px";
+            readonly '--r-md': "12px";
+            readonly '--r-lg': "16px";
+            readonly '--r-xl': "20px";
+            readonly '--r-2xl': "28px";
+        };
+    };
+};
+export interface DensityEntry {
+    label: string;
+    space: number;
+    font: number;
+}
+export declare const DENSITY_OPTIONS: {
+    readonly compact: {
+        readonly label: "Compact";
+        readonly space: 0.8;
+        readonly font: 0.95;
+    };
+    readonly balanced: {
+        readonly label: "Balanced";
+        readonly space: 1;
+        readonly font: 1;
+    };
+    readonly spacious: {
+        readonly label: "Spacious";
+        readonly space: 1.22;
+        readonly font: 1.06;
+    };
+};
+export interface FontEntry {
+    label: string;
+    stack: string;
+}
+export declare const FONT_OPTIONS: {
+    readonly geist: {
+        readonly label: "Geist";
+        readonly stack: "'Geist', ui-sans-serif, -apple-system, sans-serif";
+    };
+    readonly inter: {
+        readonly label: "Inter";
+        readonly stack: "'Inter', ui-sans-serif, -apple-system, sans-serif";
+    };
+    readonly jakarta: {
+        readonly label: "Plus Jakarta";
+        readonly stack: "'Plus Jakarta Sans', ui-sans-serif, sans-serif";
+    };
+    readonly plex: {
+        readonly label: "IBM Plex Sans";
+        readonly stack: "'IBM Plex Sans', ui-sans-serif, sans-serif";
+    };
+};
+export declare const DISPLAY_OPTIONS: {
+    readonly sameAsBody: {
+        readonly label: "Same as body";
+        readonly stack: string | null;
+    };
+    readonly fraunces: {
+        readonly label: "Fraunces";
+        readonly stack: "'Fraunces', ui-serif, Georgia, serif";
+    };
+    readonly instrument: {
+        readonly label: "Instrument Serif";
+        readonly stack: "'Instrument Serif', ui-serif, Georgia, serif";
+    };
+};
+export interface TrackingEntry {
+    label: string;
+    value: string;
+}
+export declare const TRACKING_OPTIONS: {
+    readonly airy: {
+        readonly label: "Airy";
+        readonly value: "-0.005em";
+    };
+    readonly default: {
+        readonly label: "Default";
+        readonly value: "-0.02em";
+    };
+    readonly tight: {
+        readonly label: "Tight";
+        readonly value: "-0.035em";
+    };
+};
+export declare const THEME_OPTIONS: {
+    readonly light: {
+        readonly label: "Light";
+    };
+    readonly dark: {
+        readonly label: "Dark";
+    };
+    readonly system: {
+        readonly label: "System";
+    };
+};
+export type ThemeMode = keyof typeof THEME_OPTIONS;
+export type PrimaryKey = keyof typeof PRIMARY_OPTIONS;
+export type AiKey = keyof typeof AI_OPTIONS;
+export type SurfaceKey = keyof typeof SURFACE_OPTIONS;
+export type RadiusKey = keyof typeof RADIUS_OPTIONS;
+export type DensityKey = keyof typeof DENSITY_OPTIONS;
+export type FontKey = keyof typeof FONT_OPTIONS;
+export type DisplayKey = keyof typeof DISPLAY_OPTIONS;
+export type TrackingKey = keyof typeof TRACKING_OPTIONS;
+export interface TejaThemeConfig {
+    mode: ThemeMode;
+    primary: PrimaryKey;
+    ai: AiKey;
+    surface: SurfaceKey;
+    radius: RadiusKey;
+    density: DensityKey;
+    font: FontKey;
+    display: DisplayKey;
+    tracking: TrackingKey;
+}
+/**
+ * Canonical defaults — matches TWEAK_DEFAULTS in design/pages/01-onboarding.html.
+ * Light/clinical/violet/warm/spacious/balanced/geist with airy tracking.
+ */
+export declare const THEME_DEFAULTS: TejaThemeConfig;
+//# sourceMappingURL=presets.d.ts.map

package/dist/theme/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/theme/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE/C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAGD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDoB,CAAC;AAGjD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EyB,CAAC;AAGjD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EoB,CAAC;AAGjD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCqC,CAAC;AAGjE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAIqB,CAAC;AAGlD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;CAiBqB,CAAC;AAE/C,eAAO,MAAM,eAAe;;;wBAC0B,MAAM,GAAG,IAAI;;;;;;;;;;CASzD,CAAC;AAGX,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAIqB,CAAC;AAGnD,eAAO,MAAM,aAAa;;;;;;;;;;CAIhB,CAAC;AAGX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,aAAa,CAAC;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,eAAe,CAAC;AACtD,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,UAAU,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,eAAe,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,cAAc,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,eAAe,CAAC;AACtD,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,YAAY,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,eAAe,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,UAAU,CAAC;IACpB,EAAE,EAAE,KAAK,CAAC;IACV,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,eAU5B,CAAC"}

package/dist/ui.css

@@ -455,3 +455,162 @@
   animation: rdp-fade_out var(--rdp-animation_duration)
     var(--rdp-animation_timing) forwards;
 }
+/* ============================================================
+   Teja Design Tokens — "Clinical Calm"
+   Canonical CSS variable layer for the entire @teja-app/ui system.
+
+   These are sensible LIGHT defaults. ThemeProvider injects per-preset
+   overrides (primary/ai/surface/radius/font/density) on top, and writes
+   dark-mode overrides when `[data-theme="dark"]` is set on <html>.
+   ============================================================ */
+
+:root {
+  /* ── Surfaces ─────────────────────────────────────────── */
+  --bg:           oklch(0.985 0.003 250);
+  --surface-0:    #ffffff;
+  --surface-1:    oklch(0.978 0.004 250);
+  --surface-2:    oklch(0.955 0.006 250);
+  --surface-3:    oklch(0.925 0.008 250);
+  --sidebar:      oklch(0.975 0.004 250);
+
+  /* ── Borders ──────────────────────────────────────────── */
+  --border:       oklch(0.925 0.006 250);
+  --border-strong:oklch(0.86 0.008 250);
+  --divider:      oklch(0.94 0.005 250);
+
+  /* ── Ink ──────────────────────────────────────────────── */
+  --ink-1:        oklch(0.20 0.02 250);
+  --ink-2:        oklch(0.42 0.018 250);
+  --ink-3:        oklch(0.58 0.014 250);
+  --ink-4:        oklch(0.72 0.010 250);
+  --ink-5:        oklch(0.86 0.008 250);
+  --ink-on-primary: #ffffff;
+
+  /* ── Brand (default = clinical blue) ──────────────────── */
+  --primary:      oklch(0.50 0.13 235);
+  --primary-hover:oklch(0.45 0.13 235);
+  --primary-soft: oklch(0.95 0.035 235);
+  --primary-ring: oklch(0.50 0.13 235 / 0.18);
+
+  /* ── Semantic ─────────────────────────────────────────── */
+  --success:      oklch(0.56 0.11 162);
+  --success-soft: oklch(0.94 0.04 162);
+  --warning:      oklch(0.66 0.13 75);
+  --warning-soft: oklch(0.95 0.05 75);
+  --danger:       oklch(0.56 0.17 25);
+  --danger-soft:  oklch(0.95 0.04 25);
+  --info:         oklch(0.55 0.13 285);
+  --info-soft:    oklch(0.95 0.04 285);
+
+  --neutral:      var(--ink-2);
+  --neutral-soft: var(--surface-2);
+
+  /* ── AI accent (default = warm violet) ────────────────── */
+  --ai:           oklch(0.55 0.18 305);
+  --ai-2:         oklch(0.62 0.15 260);
+  --ai-soft:      oklch(0.96 0.035 305);
+  --ai-tint:      oklch(0.985 0.012 305);
+  --ai-ring:      oklch(0.55 0.18 305 / 0.20);
+  --ai-gradient:  linear-gradient(135deg, oklch(0.55 0.18 305), oklch(0.62 0.15 250));
+  --ai-gradient-soft: linear-gradient(135deg, oklch(0.965 0.04 305), oklch(0.97 0.03 250));
+  --ai-border:    linear-gradient(135deg, oklch(0.55 0.18 305 / 0.35), oklch(0.62 0.15 250 / 0.35));
+
+  /* ── Radii ────────────────────────────────────────────── */
+  --r-xs: 4px;
+  --r-sm: 6px;
+  --r-md: 8px;
+  --r-lg: 12px;
+  --r-xl: 16px;
+  --r-2xl: 20px;
+  --r-pill: 999px;
+
+  /* ── Shadows (light) ──────────────────────────────────── */
+  --shadow-xs: 0 1px 0 rgba(16, 24, 40, 0.04);
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
+  --shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, 0.08), 0 4px 8px -3px rgba(16, 24, 40, 0.05);
+  --shadow-pop:0 10px 30px -8px rgba(16, 24, 40, 0.14), 0 4px 8px -3px rgba(16, 24, 40, 0.06);
+
+  /* ── Type ─────────────────────────────────────────────── */
+  --font-sans: 'Geist', ui-sans-serif, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
+  --font-display: 'Geist', ui-sans-serif, sans-serif;
+  --track-heading: -0.02em;
+
+  --t-xs:   11px;
+  --t-sm:   12px;
+  --t-base: 13px;
+  --t-md:   14px;
+  --t-lg:   15px;
+  --t-xl:   18px;
+  --t-2xl:  22px;
+  --t-3xl:  28px;
+  --t-4xl:  36px;
+
+  /* ── Spacing (4px base) ───────────────────────────────── */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 12px;
+  --s-4: 16px;
+  --s-5: 20px;
+  --s-6: 24px;
+  --s-8: 32px;
+  --s-10:40px;
+  --s-12:48px;
+
+  /* ── Z-index layers (preserved from legacy preset) ────── */
+  --z-sticky: 20;
+  --z-drawer: 30;
+  --z-modal: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+  --z-dropdown: 100;
+
+  color-scheme: light;
+}
+
+/* ────────────────────────────────────────────────────────
+   Dark mode — applied when <html data-theme="dark">.
+   Inverted elevation (surfaces lift LIGHTER on hover/selected,
+   like macOS). Semantic colors lift for AA contrast.
+   ──────────────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --bg:           oklch(0.205 0.008 250);
+  --surface-0:    oklch(0.165 0.010 250);
+  --surface-1:    oklch(0.185 0.009 250);
+  --surface-2:    oklch(0.255 0.011 250);
+  --surface-3:    oklch(0.300 0.013 250);
+  --sidebar:      oklch(0.175 0.009 250);
+
+  --border:       oklch(0.305 0.012 250);
+  --border-strong:oklch(0.430 0.014 250);
+  --divider:      oklch(0.255 0.010 250);
+
+  --ink-1:        oklch(0.965 0.005 250);
+  --ink-2:        oklch(0.780 0.010 250);
+  --ink-3:        oklch(0.620 0.012 250);
+  --ink-4:        oklch(0.470 0.010 250);
+  --ink-5:        oklch(0.350 0.012 250);
+
+  --primary-soft: oklch(0.30 0.07 235);
+
+  --success:      oklch(0.70 0.13 162);
+  --success-soft: oklch(0.30 0.06 162);
+  --warning:      oklch(0.78 0.13 75);
+  --warning-soft: oklch(0.32 0.07 75);
+  --danger:       oklch(0.70 0.17 25);
+  --danger-soft:  oklch(0.32 0.08 25);
+  --info:         oklch(0.70 0.13 285);
+  --info-soft:    oklch(0.30 0.07 285);
+
+  --ai-soft:      oklch(0.30 0.08 305);
+  --ai-tint:      oklch(0.22 0.04 305);
+
+  --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.35);
+  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
+  --shadow-md:  0 4px 8px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
+  --shadow-lg:  0 12px 24px -6px rgba(0, 0, 0, 0.60), 0 4px 10px -3px rgba(0, 0, 0, 0.45);
+  --shadow-pop: 0 14px 34px -8px rgba(0, 0, 0, 0.70), 0 4px 10px -3px rgba(0, 0, 0, 0.50);
+
+  color-scheme: dark;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teja-app/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Shared UI component library for Teja applications",
   "author": "Teja App",
   "license": "MIT",
@@ -34,6 +34,11 @@
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js"
     },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs"
+    },
     "./styles.css": "./dist/ui.css"
   },
   "files": [