@devalok/shilp-sutra 0.17.2 → 0.18.1

package/dist/tokens/semantic.css

@@ -1,6 +1,10 @@
 :root {
   color-scheme: light;
 
+  /* ═══════════════════════════════════════════════════════════
+     TYPOGRAPHY
+     ═══════════════════════════════════════════════════════════ */
+
   /* Font families — override these with next/font CSS variables */
   --font-sans: "Inter", system-ui, sans-serif;
   --font-display: "Inter", system-ui, sans-serif;
@@ -56,115 +60,145 @@
   --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;
 
-  --color-interactive: var(--pink-500);
-  --color-interactive-hover: var(--pink-600);
-  --color-interactive-active: var(--pink-700);
-  --color-interactive-selected: var(--pink-100);
-  --color-interactive-disabled: var(--neutral-300);
-  --color-interactive-subtle: var(--pink-50);
-  --color-accent: var(--purple-500);
-  --color-accent-hover: var(--purple-600);
-  --color-accent-subtle: var(--purple-50);
-  --color-background: var(--neutral-0);
-  --color-layer-01: var(--neutral-0);
-  --color-layer-02: var(--neutral-50);
-  --color-layer-03: var(--neutral-100);
-  --color-layer-active: var(--neutral-200);
-  --color-layer-accent-subtle: var(--pink-50);
-  --color-overlay: rgba(5, 5, 5, 0.50);
-  --color-field: var(--neutral-50);
-  --color-field-hover: var(--neutral-100);
-  --color-field-02: var(--neutral-0);
-  --color-field-02-hover: var(--neutral-50);
-  --color-text-primary: var(--neutral-900);
-  --color-text-secondary: var(--neutral-700);
-  --color-text-tertiary: var(--neutral-600);
-  --color-text-placeholder: var(--neutral-500);
-  --color-text-helper: var(--neutral-600);
-  --color-text-disabled: var(--neutral-400);
-  --color-text-error: var(--red-600);
-  --color-text-success: var(--green-600);
-  --color-text-warning: var(--yellow-600);
-  --color-text-link: var(--blue-600);
-  --color-text-link-hover: var(--blue-700);
-  --color-text-interactive: var(--pink-700);
-  --color-text-on-color: var(--neutral-0);
-  --color-text-on-color-dark: var(--neutral-900);
-  --color-text-inverse: var(--neutral-0);
-  --color-text-brand: var(--pink-700);
-  --color-icon-primary: var(--neutral-800);
-  --color-icon-secondary: var(--neutral-600);
-  --color-icon-disabled: var(--neutral-400);
-  --color-icon-on-color: var(--neutral-0);
-  --color-icon-interactive: var(--pink-500);
-  --color-border-subtle: var(--neutral-100);
-  --color-border-default: var(--neutral-200);
-  --color-border-strong: var(--neutral-400);
-  --color-border-interactive: var(--pink-500);
-  --color-border-disabled: var(--neutral-200);
-  --color-border-error: var(--red-600);
-  --color-border-success: var(--green-600);
-  --color-border-warning: var(--yellow-600);
-  --color-divider: var(--neutral-200);
-  --color-focus: var(--pink-500);
-  --color-focus-inset: var(--neutral-0);
-
-  /* ── Action State Opacities ────────────────── */
+  /* ═══════════════════════════════════════════════════════════
+     ACCENT (swappable — consumers override these to rebrand)
+     ═══════════════════════════════════════════════════════════ */
+  --color-accent-1: var(--pink-1);
+  --color-accent-2: var(--pink-2);
+  --color-accent-3: var(--pink-3);
+  --color-accent-4: var(--pink-4);
+  --color-accent-5: var(--pink-5);
+  --color-accent-6: var(--pink-6);
+  --color-accent-7: var(--pink-7);
+  --color-accent-8: var(--pink-8);
+  --color-accent-9: var(--pink-9);
+  --color-accent-10: var(--pink-10);
+  --color-accent-11: var(--pink-11);
+  --color-accent-12: var(--pink-12);
+  --color-accent-fg: var(--neutral-1);
+
+  /* ═══════════════════════════════════════════════════════════
+     SECONDARY ACCENT
+     ═══════════════════════════════════════════════════════════ */
+  --color-secondary-1: var(--purple-1);
+  --color-secondary-2: var(--purple-2);
+  --color-secondary-3: var(--purple-3);
+  --color-secondary-4: var(--purple-4);
+  --color-secondary-5: var(--purple-5);
+  --color-secondary-6: var(--purple-6);
+  --color-secondary-7: var(--purple-7);
+  --color-secondary-8: var(--purple-8);
+  --color-secondary-9: var(--purple-9);
+  --color-secondary-10: var(--purple-10);
+  --color-secondary-11: var(--purple-11);
+  --color-secondary-12: var(--purple-12);
+  --color-secondary-fg: var(--neutral-1);
+
+  /* ═══════════════════════════════════════════════════════════
+     SURFACE
+     ═══════════════════════════════════════════════════════════ */
+  --color-surface-1: var(--neutral-1);
+  --color-surface-2: var(--neutral-2);
+  --color-surface-3: var(--neutral-3);
+  --color-surface-4: var(--neutral-4);
+  --color-surface-fg: var(--neutral-12);
+  --color-surface-fg-muted: var(--neutral-11);
+  --color-surface-fg-subtle: var(--neutral-8);
+  --color-surface-border: var(--neutral-6);
+  --color-surface-border-strong: var(--neutral-7);
+
+  /* ═══════════════════════════════════════════════════════════
+     STATUS — Error
+     ═══════════════════════════════════════════════════════════ */
+  --color-error-3: var(--red-3);
+  --color-error-7: var(--red-7);
+  --color-error-9: var(--red-9);
+  --color-error-11: var(--red-11);
+  --color-error-fg: var(--neutral-1);
+
+  /* ═══ Status — Success ═══ */
+  --color-success-3: var(--green-3);
+  --color-success-7: var(--green-7);
+  --color-success-9: var(--green-9);
+  --color-success-11: var(--green-11);
+  --color-success-fg: var(--neutral-1);
+
+  /* ═══ Status — Warning ═══ */
+  --color-warning-3: var(--yellow-3);
+  --color-warning-7: var(--yellow-7);
+  --color-warning-9: var(--yellow-9);
+  --color-warning-11: var(--yellow-11);
+  --color-warning-fg: var(--neutral-1);
+
+  /* ═══ Status — Info ═══ */
+  --color-info-3: var(--blue-3);
+  --color-info-7: var(--blue-7);
+  --color-info-9: var(--blue-9);
+  --color-info-11: var(--blue-11);
+  --color-info-fg: var(--neutral-1);
+
+  /* ═══════════════════════════════════════════════════════════
+     CATEGORY COLORS (Sapta Varna — step subsets)
+     ═══════════════════════════════════════════════════════════ */
+  --color-category-teal-3: var(--teal-3);
+  --color-category-teal-7: var(--teal-7);
+  --color-category-teal-9: var(--teal-9);
+  --color-category-teal-11: var(--teal-11);
+
+  --color-category-amber-3: var(--amber-3);
+  --color-category-amber-7: var(--amber-7);
+  --color-category-amber-9: var(--amber-9);
+  --color-category-amber-11: var(--amber-11);
+
+  --color-category-slate-3: var(--slate-3);
+  --color-category-slate-7: var(--slate-7);
+  --color-category-slate-9: var(--slate-9);
+  --color-category-slate-11: var(--slate-11);
+
+  --color-category-indigo-3: var(--indigo-3);
+  --color-category-indigo-7: var(--indigo-7);
+  --color-category-indigo-9: var(--indigo-9);
+  --color-category-indigo-11: var(--indigo-11);
+
+  --color-category-cyan-3: var(--cyan-3);
+  --color-category-cyan-7: var(--cyan-7);
+  --color-category-cyan-9: var(--cyan-9);
+  --color-category-cyan-11: var(--cyan-11);
+
+  --color-category-orange-3: var(--orange-3);
+  --color-category-orange-7: var(--orange-7);
+  --color-category-orange-9: var(--orange-9);
+  --color-category-orange-11: var(--orange-11);
+
+  --color-category-emerald-3: var(--emerald-3);
+  --color-category-emerald-7: var(--emerald-7);
+  --color-category-emerald-9: var(--emerald-9);
+  --color-category-emerald-11: var(--emerald-11);
+
+  /* ═══════════════════════════════════════════════════════════
+     SKELETON
+     ═══════════════════════════════════════════════════════════ */
+  --color-skeleton-base: var(--neutral-3);
+  --color-skeleton-shimmer: var(--neutral-2);
+
+  /* ═══════════════════════════════════════════════════════════
+     UTILITY TOKENS (not step-based, but semantically needed)
+     ═══════════════════════════════════════════════════════════ */
+  --color-overlay: oklch(0 0 0 / 0.50);
+  --color-disabled: var(--neutral-5);
+
+  /* ═══════════════════════════════════════════════════════════
+     ACTION STATE OPACITIES
+     ═══════════════════════════════════════════════════════════ */
   --action-hover-opacity: 0.04;
   --action-selected-opacity: 0.08;
   --action-disabled-opacity: 0.38;
   --action-focus-opacity: 0.12;
   --action-active-opacity: 0.12;
-  --color-success: var(--green-600);
-  --color-success-surface: var(--green-50);
-  --color-success-border: var(--green-600);
-  --color-error: var(--red-600);
-  --color-error-hover: var(--red-700);
-  --color-error-surface: var(--red-50);
-  --color-error-border: var(--red-600);
-  --color-warning: var(--yellow-600);
-  --color-warning-surface: var(--yellow-50);
-  --color-warning-border: var(--yellow-600);
-  --color-info: var(--blue-600);
-  --color-info-surface: var(--blue-50);
-  --color-info-border: var(--blue-600);
-  --color-info-text: var(--blue-700);
-  --color-success-text: var(--green-700);
-  --color-warning-text: var(--yellow-700);
-  --color-error-text: var(--red-700);
-
-  /* ── Category Colors (Sapta Varna) ───────────────────── */
-  --color-category-teal: var(--teal-600);
-  --color-category-teal-surface: var(--teal-50);
-  --color-category-teal-border: var(--teal-200);
-  --color-category-teal-text: var(--teal-700);
-  --color-category-amber: var(--amber-600);
-  --color-category-amber-surface: var(--amber-50);
-  --color-category-amber-border: var(--amber-200);
-  --color-category-amber-text: var(--amber-700);
-  --color-category-slate: var(--slate-600);
-  --color-category-slate-surface: var(--slate-50);
-  --color-category-slate-border: var(--slate-200);
-  --color-category-slate-text: var(--slate-700);
-  --color-category-indigo: var(--indigo-600);
-  --color-category-indigo-surface: var(--indigo-50);
-  --color-category-indigo-border: var(--indigo-200);
-  --color-category-indigo-text: var(--indigo-700);
-  --color-category-cyan: var(--cyan-600);
-  --color-category-cyan-surface: var(--cyan-50);
-  --color-category-cyan-border: var(--cyan-200);
-  --color-category-cyan-text: var(--cyan-700);
-  --color-category-orange: var(--orange-600);
-  --color-category-orange-surface: var(--orange-50);
-  --color-category-orange-border: var(--orange-200);
-  --color-category-orange-text: var(--orange-700);
-  --color-category-emerald: var(--emerald-600);
-  --color-category-emerald-surface: var(--emerald-50);
-  --color-category-emerald-border: var(--emerald-200);
-  --color-category-emerald-text: var(--emerald-700);
-
-  --color-skeleton-base: var(--neutral-100);
-  --color-skeleton-shimmer: var(--neutral-50);
+
+  /* ═══════════════════════════════════════════════════════════
+     SPACING
+     ═══════════════════════════════════════════════════════════ */
   --spacing-01: 2px;
   --spacing-02: 4px;
   --spacing-02b: 6px;
@@ -181,6 +215,10 @@
   --spacing-11: 80px;
   --spacing-12: 96px;
   --spacing-13: 160px;
+
+  /* ═══════════════════════════════════════════════════════════
+     RADIUS
+     ═══════════════════════════════════════════════════════════ */
   --radius-none: 0;
   --radius-sm: 2px;
   --radius-default: 4px;
@@ -189,6 +227,11 @@
   --radius-xl: 16px;
   --radius-2xl: 24px;
   --radius-full: 9999px;
+
+  /* ═══════════════════════════════════════════════════════════
+     MOTION
+     ═══════════════════════════════════════════════════════════ */
+
   /* ── Motion: Durations (Carbon-inspired scale) ── */
   --duration-instant: 0ms;
   --duration-fast-01: 70ms;
@@ -211,12 +254,20 @@
   /* ── Motion: Easing — Utility ── */
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-linear: linear;
-  --shadow-01: 0 1px 2px rgba(0, 0, 0, 0.10);
-  --shadow-02: 0 2px 6px rgba(0, 0, 0, 0.12);
-  --shadow-03: 0 4px 16px rgba(0, 0, 0, 0.14);
-  --shadow-04: 0 8px 32px rgba(0, 0, 0, 0.18);
-  --shadow-05: 0 16px 48px rgba(0, 0, 0, 0.22);
-  --shadow-brand: 0 4px 16px rgba(211, 49, 99, 0.25);
+
+  /* ═══════════════════════════════════════════════════════════
+     SHADOWS
+     ═══════════════════════════════════════════════════════════ */
+  --shadow-01: 0 1px 2px oklch(0 0 0 / 0.10);
+  --shadow-02: 0 2px 6px oklch(0 0 0 / 0.12);
+  --shadow-03: 0 4px 16px oklch(0 0 0 / 0.14);
+  --shadow-04: 0 8px 32px oklch(0 0 0 / 0.18);
+  --shadow-05: 0 16px 48px oklch(0 0 0 / 0.22);
+  --shadow-brand: 0 4px 16px oklch(0.55 0.19 360 / 0.25);
+
+  /* ═══════════════════════════════════════════════════════════
+     SIZES
+     ═══════════════════════════════════════════════════════════ */
   --size-xs: 24px;
   --size-xs-plus: 28px;
   --size-sm: 32px;
@@ -233,6 +284,10 @@
   --border-width-lg: 3px;
   --border-focus-width: 2px;
   --border-focus-offset: 2px;
+
+  /* ═══════════════════════════════════════════════════════════
+     Z-INDEX
+     ═══════════════════════════════════════════════════════════ */
   --z-base: 0;
   --z-raised: 10;
   --z-dropdown: 1000;
@@ -254,178 +309,97 @@
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
 
-  /* ── Gradients ─────────────────────────────────── */
-  --gradient-brand-light: linear-gradient(135deg, var(--pink-400), var(--purple-500));
-  --gradient-brand-dark: linear-gradient(135deg, var(--pink-600), var(--purple-700));
-
-  /* ── Chart Palette ──────────────────────────────── */
-  --chart-1: var(--pink-500);
-  --chart-2: var(--purple-500);
-  --chart-3: var(--blue-500);
-  --chart-4: var(--green-500);
-  --chart-5: var(--yellow-500);
-  --chart-6: var(--red-500);
-  --chart-7: var(--cyan-500);
-  --chart-8: var(--orange-500);
-
-  /* ── Inset Glow & Overlay ─────────────────────────── */
-  --color-inset-glow: rgba(255, 255, 255, 0.25);
-  --color-inset-glow-strong: rgba(255, 255, 255, 0.16);
-  --color-inset-glow-subtle: rgba(255, 255, 255, 0.10);
-  --color-surface-overlay-light: rgba(255, 255, 255, 0.20);
-  --color-surface-overlay-dark: rgba(0, 0, 0, 0.12);
-  --color-text-shadow: rgba(0, 0, 0, 0.15);
+  /* ═══════════════════════════════════════════════════════════
+     GRADIENTS
+     ═══════════════════════════════════════════════════════════ */
+  --gradient-brand-light: linear-gradient(135deg, var(--pink-7), var(--purple-9));
+  --gradient-brand-dark: linear-gradient(135deg, var(--pink-8), var(--purple-10));
+
+  /* ═══════════════════════════════════════════════════════════
+     CHART PALETTE
+     ═══════════════════════════════════════════════════════════ */
+  --chart-1: var(--pink-9);
+  --chart-2: var(--purple-9);
+  --chart-3: var(--blue-9);
+  --chart-4: var(--green-9);
+  --chart-5: var(--yellow-9);
+  --chart-6: var(--red-9);
+  --chart-7: var(--cyan-9);
+  --chart-8: var(--orange-9);
+
+  /* ═══════════════════════════════════════════════════════════
+     INSET GLOW & OVERLAY
+     ═══════════════════════════════════════════════════════════ */
+  --color-inset-glow: oklch(1 0 0 / 0.25);
+  --color-inset-glow-strong: oklch(1 0 0 / 0.16);
+  --color-inset-glow-subtle: oklch(1 0 0 / 0.10);
+  --color-surface-overlay-light: oklch(1 0 0 / 0.20);
+  --color-surface-overlay-dark: oklch(0 0 0 / 0.12);
+  --color-text-shadow: oklch(0 0 0 / 0.15);
 }
 
+/* ═══════════════════════════════════════════════════════════
+   DARK MODE
+   ═══════════════════════════════════════════════════════════ */
 .dark {
   color-scheme: dark;
 
-  /* Interactive */
-  --color-interactive: var(--pink-500);
-  --color-interactive-hover: var(--pink-600);
-  --color-interactive-active: var(--pink-700);
-  --color-interactive-selected: var(--pink-900);
-  --color-interactive-disabled: var(--neutral-700);
-  --color-interactive-subtle: var(--pink-1000);
-  /* Accent */
-  --color-accent: var(--purple-400);
-  --color-accent-hover: var(--purple-300);
-  --color-accent-subtle: var(--purple-950);
-  /* Background & Layers */
-  --color-background: var(--neutral-950);
-  --color-layer-01: var(--neutral-900);
-  --color-layer-02: var(--neutral-800);
-  --color-layer-03: var(--neutral-700);
-  --color-layer-active: var(--neutral-700);
-  --color-layer-accent-subtle: var(--pink-950);
-  --color-overlay: rgba(0, 0, 0, 0.70);
-  /* Fields */
-  --color-field: var(--neutral-900);
-  --color-field-hover: var(--neutral-800);
-  --color-field-02: var(--neutral-800);
-  --color-field-02-hover: var(--neutral-700);
-  /* Text */
-  --color-text-primary: var(--neutral-50);
-  --color-text-secondary: var(--neutral-300);
-  --color-text-tertiary: var(--neutral-400);
-  --color-text-placeholder: var(--neutral-500);
-  --color-text-helper: var(--neutral-400);
-  --color-text-disabled: var(--neutral-600);
-  --color-text-error: var(--red-300);
-  --color-text-success: var(--green-300);
-  --color-text-warning: var(--yellow-300);
-  --color-text-link: var(--blue-300);
-  --color-text-link-hover: var(--blue-100);
-  --color-text-on-color: var(--neutral-0);
-  --color-text-on-color-dark: var(--neutral-50);
-  --color-text-inverse: var(--neutral-900);
-  --color-text-brand: var(--pink-400);
-  --color-text-interactive: var(--pink-300);
-  /* Icons */
-  --color-icon-primary: var(--neutral-100);
-  --color-icon-secondary: var(--neutral-300);
-  --color-icon-disabled: var(--neutral-600);
-  --color-icon-on-color: var(--neutral-0);
-  --color-icon-interactive: var(--pink-400);
-  /* Borders */
-  --color-border-subtle: var(--neutral-800);
-  --color-border-default: var(--neutral-700);
-  --color-border-strong: var(--neutral-500);
-  --color-border-interactive: var(--pink-400);
-  --color-border-disabled: var(--neutral-700);
-  --color-border-error: var(--red-400);
-  --color-border-success: var(--green-400);
-  --color-border-warning: var(--yellow-400);
-  --color-divider: var(--neutral-700);
-  /* Focus */
-  --color-focus: var(--pink-400);
-  --color-focus-inset: var(--neutral-950);
-  /* Action State Opacities */
+  /* Foreground on accent flips in dark mode */
+  --color-accent-fg: var(--neutral-12);
+  --color-secondary-fg: var(--neutral-12);
+  --color-error-fg: var(--neutral-12);
+  --color-success-fg: var(--neutral-12);
+  --color-warning-fg: var(--neutral-12);
+  --color-info-fg: var(--neutral-12);
+
+  /* Dark mode borders need lower contrast — bright borders look harsh.
+     Drop 2 steps: subtle=4 (L=0.29), strong=5 (L=0.34) */
+  --color-surface-border: var(--neutral-4);
+  --color-surface-border-strong: var(--neutral-5);
+
+  /* Overlay */
+  --color-overlay: oklch(0 0 0 / 0.70);
+
+  /* Action State Opacities (higher in dark mode) */
   --action-hover-opacity: 0.08;
   --action-selected-opacity: 0.12;
   --action-disabled-opacity: 0.38;
   --action-focus-opacity: 0.12;
   --action-active-opacity: 0.16;
-  /* Status / Feedback */
-  --color-success: var(--green-500);
-  --color-success-surface: var(--green-900);
-  --color-success-border: var(--green-400);
-  --color-success-text: var(--green-200);
-  --color-error: var(--red-500);
-  --color-error-hover: var(--red-400);
-  --color-error-surface: var(--red-900);
-  --color-error-border: var(--red-400);
-  --color-error-text: var(--red-200);
-  --color-warning: var(--yellow-500);
-  --color-warning-surface: var(--yellow-900);
-  --color-warning-border: var(--yellow-400);
-  --color-warning-text: var(--yellow-200);
-  --color-info: var(--blue-500);
-  --color-info-surface: var(--blue-900);
-  --color-info-border: var(--blue-400);
-  --color-info-text: var(--blue-200);
-
-  /* ── Category Colors (Sapta Varna) ───────────────────── */
-  --color-category-teal: var(--teal-500);
-  --color-category-teal-surface: var(--teal-950);
-  --color-category-teal-border: var(--teal-400);
-  --color-category-teal-text: var(--teal-200);
-  --color-category-amber: var(--amber-500);
-  --color-category-amber-surface: var(--amber-950);
-  --color-category-amber-border: var(--amber-400);
-  --color-category-amber-text: var(--amber-200);
-  --color-category-slate: var(--slate-500);
-  --color-category-slate-surface: var(--slate-950);
-  --color-category-slate-border: var(--slate-400);
-  --color-category-slate-text: var(--slate-200);
-  --color-category-indigo: var(--indigo-500);
-  --color-category-indigo-surface: var(--indigo-950);
-  --color-category-indigo-border: var(--indigo-400);
-  --color-category-indigo-text: var(--indigo-200);
-  --color-category-cyan: var(--cyan-500);
-  --color-category-cyan-surface: var(--cyan-950);
-  --color-category-cyan-border: var(--cyan-400);
-  --color-category-cyan-text: var(--cyan-200);
-  --color-category-orange: var(--orange-500);
-  --color-category-orange-surface: var(--orange-950);
-  --color-category-orange-border: var(--orange-400);
-  --color-category-orange-text: var(--orange-200);
-  --color-category-emerald: var(--emerald-500);
-  --color-category-emerald-surface: var(--emerald-950);
-  --color-category-emerald-border: var(--emerald-400);
-  --color-category-emerald-text: var(--emerald-200);
 
   /* Skeleton */
-  --color-skeleton-base: var(--neutral-800);
-  --color-skeleton-shimmer: var(--neutral-700);
+  --color-skeleton-base: var(--neutral-4);
+  --color-skeleton-shimmer: var(--neutral-3);
+
+  /* Shadows (heavier in dark mode) */
+  --shadow-01: 0 1px 2px oklch(0 0 0 / 0.30);
+  --shadow-02: 0 2px 6px oklch(0 0 0 / 0.40);
+  --shadow-03: 0 4px 16px oklch(0 0 0 / 0.50);
+  --shadow-04: 0 8px 32px oklch(0 0 0 / 0.60);
+  --shadow-05: 0 16px 48px oklch(0 0 0 / 0.70);
+  --shadow-brand: 0 4px 16px oklch(0.55 0.19 360 / 0.35);
+
+  /* Gradients */
+  --gradient-brand-light: linear-gradient(135deg, var(--pink-9), var(--purple-9));
+  --gradient-brand-dark: linear-gradient(135deg, var(--pink-10), var(--purple-10));
+
+  /* Chart Palette (dark — use step 9 which is brighter in dark) */
+  --chart-1: var(--pink-9);
+  --chart-2: var(--purple-9);
+  --chart-3: var(--blue-9);
+  --chart-4: var(--green-9);
+  --chart-5: var(--yellow-9);
+  --chart-6: var(--red-9);
+  --chart-7: var(--cyan-9);
+  --chart-8: var(--orange-9);
+
   /* Inset Glow & Overlay */
-  --color-inset-glow: rgba(255, 255, 255, 0.10);
-  --color-inset-glow-strong: rgba(255, 255, 255, 0.08);
-  --color-inset-glow-subtle: rgba(255, 255, 255, 0.05);
-  --color-surface-overlay-light: rgba(255, 255, 255, 0.08);
-  --color-surface-overlay-dark: rgba(0, 0, 0, 0.25);
-  --color-text-shadow: rgba(0, 0, 0, 0.40);
-  /* Shadows */
-  --shadow-01: 0 1px 2px rgba(0, 0, 0, 0.30);
-  --shadow-02: 0 2px 6px rgba(0, 0, 0, 0.40);
-  --shadow-03: 0 4px 16px rgba(0, 0, 0, 0.50);
-  --shadow-04: 0 8px 32px rgba(0, 0, 0, 0.60);
-  --shadow-05: 0 16px 48px rgba(0, 0, 0, 0.70);
-  --shadow-brand: 0 4px 16px rgba(211, 49, 99, 0.35);
-
-  /* ── Gradients ─────────────────────────────────── */
-  --gradient-brand-light: linear-gradient(135deg, var(--pink-500), var(--purple-600));
-  --gradient-brand-dark: linear-gradient(135deg, var(--pink-700), var(--purple-800));
-
-  /* ── Chart Palette (dark) ───────────────────────── */
-  --chart-1: var(--pink-400);
-  --chart-2: var(--purple-400);
-  --chart-3: var(--blue-400);
-  --chart-4: var(--green-400);
-  --chart-5: var(--yellow-400);
-  --chart-6: var(--red-400);
-  --chart-7: var(--cyan-400);
-  --chart-8: var(--orange-400);
+  --color-inset-glow: oklch(1 0 0 / 0.10);
+  --color-inset-glow-strong: oklch(1 0 0 / 0.08);
+  --color-inset-glow-subtle: oklch(1 0 0 / 0.05);
+  --color-surface-overlay-light: oklch(1 0 0 / 0.08);
+  --color-surface-overlay-dark: oklch(0 0 0 / 0.25);
+  --color-text-shadow: oklch(0 0 0 / 0.40);
 }
 
 /* Ensure Radix popper content (Select, Combobox, Popover, etc.)
@@ -445,4 +419,4 @@
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
-}
+}

package/dist/tokens/typography.css

@@ -322,7 +322,7 @@
   font-family: 'Ranade', sans-serif;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--color-text-secondary);
+  color: var(--color-surface-fg-muted);
 }
 
 .prose-devsabha h1,
@@ -331,7 +331,7 @@
 .prose-devsabha h4 {
   font-family: 'Ranade', sans-serif;
   font-weight: 600;
-  color: var(--color-text-primary);
+  color: var(--color-surface-fg);
   margin-top: 1em;
   margin-bottom: 0.5em;
 }
@@ -363,7 +363,7 @@
 
 .prose-devsabha strong {
   font-weight: 600;
-  color: var(--color-text-primary);
+  color: var(--color-surface-fg);
 }
 
 .prose-devsabha em {
@@ -372,16 +372,16 @@
 
 .prose-devsabha code {
   font-size: 12px;
-  background: var(--color-layer-03);
+  background: var(--color-surface-3);
   border-radius: 4px;
   padding: 0.15em 0.4em;
 }
 
 .prose-devsabha blockquote {
-  border-left: 3px solid var(--color-border-strong);
+  border-left: 3px solid var(--color-surface-border-strong);
   padding-left: 1em;
   margin: 0.5em 0;
-  color: var(--color-text-tertiary);
+  color: var(--color-surface-fg-subtle);
 }
 
 .prose-devsabha *:first-child {

package/dist/ui/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AAKjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KAiBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/F,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AACrG,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KAiBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAiBpB,CAAA;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/F,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AACrG,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}