erp-pro-ui 0.1.1 → 0.1.2

package/dist/tokens.css

@@ -0,0 +1,592 @@
+@layer theme {
+  :root,
+  :host {
+    --ds-brand: purple;
+    --ds-mode: light;
+
+    /* Brand primitives */
+    --ds-brand-primary: #4318ff;
+    --ds-brand-secondary: #9333ea;
+    --ds-brand-purple: #9333ea;
+    --ds-brand-teal: #3f9cae;
+    --ds-brand-yellow: #ca8a04;
+    --ds-brand-green: #10b981;
+
+    /* Active accent defaults to the current purple theme */
+    --ds-accent-50: #f6efff;
+    --ds-accent-100: #ead9fd;
+    --ds-accent-200: #d8b3fb;
+    --ds-accent-300: #c084fc;
+    --ds-accent-400: #a855f7;
+    --ds-accent-500: #9333ea;
+    --ds-accent-600: #7e22ce;
+    --ds-accent-700: #6b21a8;
+    --ds-accent-800: #581c87;
+    --ds-accent-900: #3b0764;
+    --ds-accent: var(--ds-accent-500);
+    --ds-accent-contrast: #ffffff;
+    --ds-accent-2: var(--ds-brand-primary);
+
+    /* Semantic status primitives */
+    --ds-status-success: #1eb564;
+    --ds-status-warning: #ff9500;
+    --ds-status-danger: #e31d1c;
+    --ds-status-info: #0085c4;
+    --ds-status-disabled: #d2d2d3;
+
+    /* Light mode primitives */
+    --ds-surface-canvas: #f4f7fe;
+    --ds-surface-1: #ffffff;
+    --ds-surface-2: #ffffff;
+
+    --ds-text-1: #1e293b;
+    --ds-text-2: #475467;
+    --ds-text-3: #64748b;
+
+    --ds-border-1: #d1d5db;
+    --ds-border-2: #e5e7eb;
+    --ds-border-3: #f3f4f6;
+    --ds-border-field: #e9e8e8;
+
+    /* Neutral compatibility primitives */
+    --ds-neutral-subtle: #f4f4f5;
+    --ds-neutral-subtle-foreground: #18181b;
+
+    color-scheme: light;
+
+    /* Derived semantic tokens */
+    --ds-color-bg-canvas: var(--ds-surface-canvas);
+    --ds-color-bg-surface: var(--ds-surface-1);
+    --ds-color-bg-elevated: var(--ds-surface-2);
+    --ds-color-bg-muted: color-mix(in oklch, var(--ds-surface-1) 92%, black);
+
+    --ds-color-fg: var(--ds-text-1);
+    --ds-color-fg-muted: var(--ds-text-2);
+    --ds-color-fg-subtle: var(--ds-text-3);
+    --ds-color-fg-inverse: #ffffff;
+
+    --ds-color-border: var(--ds-border-2);
+    --ds-color-border-muted: var(--ds-border-3);
+    --ds-color-border-strong: var(--ds-border-1);
+    --ds-color-border-field: var(--ds-border-field);
+
+    --ds-color-accent: var(--ds-accent);
+    --ds-color-accent-hover: color-mix(in oklch, var(--ds-accent) 90%, black);
+    --ds-color-accent-press: color-mix(in oklch, var(--ds-accent) 78%, black);
+    --ds-color-on-accent: var(--ds-accent-contrast);
+    --ds-color-accent-subtle: color-mix(
+      in oklch,
+      var(--ds-accent) 16%,
+      var(--ds-surface-1)
+    );
+
+    --ds-color-focus-ring: color-mix(in oklch, var(--ds-accent) 55%, white);
+    --ds-color-selection: var(--ds-color-accent-subtle);
+    --ds-color-overlay-scrim: rgb(0 0 0 / 0.55);
+
+    --ds-color-success: var(--ds-status-success);
+    --ds-color-success-subtle: color-mix(
+      in oklch,
+      var(--ds-status-success) 16%,
+      var(--ds-surface-1)
+    );
+    --ds-color-success-border: color-mix(
+      in oklch,
+      var(--ds-status-success) 22%,
+      var(--ds-color-border)
+    );
+
+    --ds-color-warning: var(--ds-status-warning);
+    --ds-color-warning-subtle: color-mix(
+      in oklch,
+      var(--ds-status-warning) 18%,
+      var(--ds-surface-1)
+    );
+    --ds-color-warning-border: color-mix(
+      in oklch,
+      var(--ds-status-warning) 24%,
+      var(--ds-color-border)
+    );
+
+    --ds-color-danger: var(--ds-status-danger);
+    --ds-color-danger-subtle: color-mix(
+      in oklch,
+      var(--ds-status-danger) 14%,
+      var(--ds-surface-1)
+    );
+    --ds-color-danger-border: color-mix(
+      in oklch,
+      var(--ds-status-danger) 20%,
+      var(--ds-color-border)
+    );
+
+    --ds-color-info: var(--ds-status-info);
+    --ds-color-info-subtle: color-mix(
+      in oklch,
+      var(--ds-status-info) 16%,
+      var(--ds-surface-1)
+    );
+    --ds-color-info-border: color-mix(
+      in oklch,
+      var(--ds-status-info) 22%,
+      var(--ds-color-border)
+    );
+
+    --ds-color-disabled: var(--ds-status-disabled);
+    --ds-color-disabled-subtle: color-mix(
+      in oklch,
+      var(--ds-status-disabled) 18%,
+      var(--ds-surface-1)
+    );
+    --ds-color-disabled-border: color-mix(
+      in oklch,
+      var(--ds-status-disabled) 28%,
+      var(--ds-color-border)
+    );
+
+    --ds-color-destructive: var(--ds-color-danger);
+
+    --ds-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
+    --ds-shadow-2: 0 4px 10px rgb(0 0 0 / 0.1);
+    --ds-shadow-3: 0 12px 30px rgb(0 0 0 / 0.18);
+    --ds-shadow-input:
+      0 1px 2px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.12);
+
+    --ds-gradient-accent-hover: linear-gradient(
+      135deg,
+      color(display-p3 1 1 1 / 0.24),
+      var(--ds-accent)
+    );
+
+    --ds-chart-1: #9333ea;
+    --ds-chart-2: #0f7cc0;
+    --ds-chart-3: #16a34a;
+    --ds-chart-4: #d97706;
+    --ds-chart-5: #dc2626;
+    --ds-chart-6: #0d9488;
+    --ds-chart-7: #db2777;
+    --ds-chart-8: #65a30d;
+    --ds-chart-9: #4f46e5;
+    --ds-chart-10: #ea580c;
+    --ds-chart-11: #0891b2;
+    --ds-chart-12: #e11d48;
+    --ds-chart-13: #ca8a04;
+    --ds-chart-14: #0284c7;
+    --ds-chart-15: #64748b;
+
+    /* Compatibility source aliases */
+    --erp-color-primary: var(--ds-brand-primary);
+    --erp-color-secondary: var(--ds-brand-secondary);
+    --erp-color-purple: var(--ds-brand-purple);
+    --erp-color-teal: var(--ds-brand-teal);
+    --erp-color-yellow: var(--ds-brand-yellow);
+    --erp-color-green: var(--ds-brand-green);
+    --erp-color-brand-primary: var(--ds-brand-primary);
+    --erp-color-brand-secondary: var(--ds-brand-secondary);
+
+    --erp-color-background-primary: var(--ds-color-bg-canvas);
+    --erp-color-background-secondary: var(--ds-color-bg-surface);
+    --erp-color-background-tertiary: var(--ds-color-bg-elevated);
+    --erp-color-background-primary-light: #f4f7fe;
+    --erp-color-background-secondary-light: #ffffff;
+    --erp-color-background-tertiary-light: #ffffff;
+    --erp-color-background-primary-dark: #070f2e;
+    --erp-color-background-secondary-dark: #111c44;
+    --erp-color-background-tertiary-dark: #111c44;
+
+    --erp-color-text-primary: var(--ds-text-1);
+    --erp-color-text-secondary: var(--ds-text-2);
+    --erp-color-text-tertiary: var(--ds-text-3);
+    --erp-color-text-primary-light: #1e293b;
+    --erp-color-text-secondary-light: #475467;
+    --erp-color-text-tertiary-light: #64748b;
+    --erp-color-text-primary-dark: #f1f5f9;
+    --erp-color-text-secondary-dark: #cbd5e1;
+    --erp-color-text-tertiary-dark: #94a3b8;
+
+    --erp-color-border-primary: var(--ds-border-1);
+    --erp-color-border-secondary: var(--ds-border-2);
+    --erp-color-border-tertiary: var(--ds-border-3);
+    --erp-color-border-input: var(--ds-border-field);
+    --erp-color-border-primary-light: #d1d5db;
+    --erp-color-border-secondary-light: #e5e7eb;
+    --erp-color-border-tertiary-light: #f3f4f6;
+    --erp-color-border-input-light: #e9e8e8;
+    --erp-color-border-primary-dark: #374151;
+    --erp-color-border-secondary-dark: #4b5563;
+    --erp-color-border-tertiary-dark: #6b7280;
+    --erp-color-border-input-dark: #545b58f3;
+
+    --erp-color-success: var(--ds-color-success);
+    --erp-color-warning: var(--ds-color-warning);
+    --erp-color-error: var(--ds-color-danger);
+    --erp-color-info: var(--ds-color-info);
+    --erp-color-disabled: var(--ds-color-disabled);
+    --erp-color-success-light: #1eb564;
+    --erp-color-warning-light: #ff9500;
+    --erp-color-error-light: #e31d1c;
+    --erp-color-info-light: #0085c4;
+    --erp-color-disabled-light: #d2d2d3;
+    --erp-color-success-dark: #22c55e;
+    --erp-color-warning-dark: #f59e42;
+    --erp-color-error-dark: #ef4444;
+    --erp-color-info-dark: #38bdf8;
+    --erp-color-disabled-dark: #4b5563;
+
+    --erp-color-hover-primary: color-mix(
+      in oklch,
+      var(--ds-surface-1) 84%,
+      black
+    );
+    --erp-color-hover-secondary: color-mix(
+      in oklch,
+      var(--ds-border-2) 78%,
+      black
+    );
+    --erp-color-hover-primary-light: #ecececf3;
+    --erp-color-hover-secondary-light: #545b58f3;
+    --erp-color-hover-primary-dark: #333333f3;
+    --erp-color-hover-secondary-dark: #3a3f3df3;
+
+    /* Public compatibility variables */
+    --color-primary: var(--erp-color-primary);
+    --color-secondary: var(--erp-color-secondary);
+    --color-purple: var(--erp-color-purple);
+    --color-teal: var(--erp-color-teal);
+    --color-yellow: var(--erp-color-yellow);
+    --color-green: var(--erp-color-green);
+    --color-brand-primary: var(--erp-color-brand-primary);
+    --color-brand-secondary: var(--erp-color-brand-secondary);
+
+    --color-background-primary: var(--erp-color-background-primary);
+    --color-background-secondary: var(--erp-color-background-secondary);
+    --color-background-tertiary: var(--erp-color-background-tertiary);
+    --color-background-primary-light: var(--erp-color-background-primary-light);
+    --color-background-secondary-light: var(
+      --erp-color-background-secondary-light
+    );
+    --color-background-tertiary-light: var(
+      --erp-color-background-tertiary-light
+    );
+    --color-background-primary-dark: var(--erp-color-background-primary-dark);
+    --color-background-secondary-dark: var(
+      --erp-color-background-secondary-dark
+    );
+    --color-background-tertiary-dark: var(--erp-color-background-tertiary-dark);
+
+    --color-text-primary: var(--erp-color-text-primary);
+    --color-text-secondary: var(--erp-color-text-secondary);
+    --color-text-tertiary: var(--erp-color-text-tertiary);
+    --color-text-light: var(--erp-color-text-primary-light);
+    --color-text-dark: var(--erp-color-text-primary-dark);
+    --color-text-primary-light: var(--erp-color-text-primary-light);
+    --color-text-secondary-light: var(--erp-color-text-secondary-light);
+    --color-text-tertiary-light: var(--erp-color-text-tertiary-light);
+    --color-text-primary-dark: var(--erp-color-text-primary-dark);
+    --color-text-secondary-dark: var(--erp-color-text-secondary-dark);
+    --color-text-tertiary-dark: var(--erp-color-text-tertiary-dark);
+
+    --color-border-primary: var(--erp-color-border-primary);
+    --color-border-secondary: var(--erp-color-border-secondary);
+    --color-border-tertiary: var(--erp-color-border-tertiary);
+    --color-border-input: var(--erp-color-border-input);
+    --color-border-primary-light: var(--erp-color-border-primary-light);
+    --color-border-secondary-light: var(--erp-color-border-secondary-light);
+    --color-border-tertiary-light: var(--erp-color-border-tertiary-light);
+    --color-border-input-light: var(--erp-color-border-input-light);
+    --color-border-primary-dark: var(--erp-color-border-primary-dark);
+    --color-border-secondary-dark: var(--erp-color-border-secondary-dark);
+    --color-border-tertiary-dark: var(--erp-color-border-tertiary-dark);
+    --color-border-input-dark: var(--erp-color-border-input-dark);
+
+    --color-success: var(--erp-color-success);
+    --color-warning: var(--erp-color-warning);
+    --color-error: var(--erp-color-error);
+    --color-info: var(--erp-color-info);
+    --color-disabled: var(--erp-color-disabled);
+    --color-success-light: var(--erp-color-success-light);
+    --color-warning-light: var(--erp-color-warning-light);
+    --color-error-light: var(--erp-color-error-light);
+    --color-info-light: var(--erp-color-info-light);
+    --color-disabled-light: var(--erp-color-disabled-light);
+    --color-success-dark: var(--erp-color-success-dark);
+    --color-warning-dark: var(--erp-color-warning-dark);
+    --color-error-dark: var(--erp-color-error-dark);
+    --color-info-dark: var(--erp-color-info-dark);
+    --color-disabled-dark: var(--erp-color-disabled-dark);
+
+    --color-hover-primary: var(--erp-color-hover-primary);
+    --color-hover-secondary: var(--erp-color-hover-secondary);
+    --color-hover-primary-light: var(--erp-color-hover-primary-light);
+    --color-hover-secondary-light: var(--erp-color-hover-secondary-light);
+    --color-hover-primary-dark: var(--erp-color-hover-primary-dark);
+    --color-hover-secondary-dark: var(--erp-color-hover-secondary-dark);
+    --color-hover-gradient: var(--ds-gradient-accent-hover);
+
+    --surface-1: var(--erp-color-background-primary);
+    --surface-2: var(--erp-color-background-secondary);
+    --surface-3: var(--erp-color-background-tertiary);
+    --text-1: var(--erp-color-text-primary);
+    --text-2: var(--erp-color-text-secondary);
+    --text-3: var(--erp-color-text-tertiary);
+    --border-1: var(--erp-color-border-primary);
+    --border-2: var(--erp-color-border-secondary);
+    --border-3: var(--erp-color-border-tertiary);
+
+    /* Legacy library runtime tokens used by current components */
+    --background: var(--ds-color-bg-canvas);
+    --foreground: var(--ds-color-fg);
+    --card: var(--ds-color-bg-surface);
+    --card-foreground: var(--ds-color-fg);
+    --popover: var(--ds-color-bg-elevated);
+    --popover-foreground: var(--ds-color-fg);
+    --secondary: var(--ds-neutral-subtle);
+    --secondary-foreground: var(--ds-neutral-subtle-foreground);
+    --muted: var(--ds-color-bg-muted);
+    --muted-foreground: var(--ds-color-fg-muted);
+    --accent: var(--ds-color-accent-subtle);
+    --accent-foreground: var(--ds-color-fg);
+    --destructive: var(--ds-color-danger);
+    --destructive-foreground: #ffffff;
+    --border: var(--ds-color-border);
+    --input: var(--ds-color-border-field);
+    --ring: var(--ds-color-focus-ring);
+    --heading: var(--ds-color-fg);
+
+    --text-primary: var(--erp-color-text-primary);
+    --text-secondary: var(--erp-color-text-secondary);
+    --text-tertiary: var(--erp-color-text-tertiary);
+
+    --primary-50: var(--ds-accent-50);
+    --primary-100: var(--ds-accent-100);
+    --primary-200: var(--ds-accent-200);
+    --primary-300: var(--ds-accent-300);
+    --primary-400: var(--ds-accent-400);
+    --primary-500: var(--ds-accent-500);
+    --primary-600: var(--ds-accent-600);
+    --primary-700: var(--ds-accent-700);
+    --primary-800: var(--ds-accent-800);
+    --primary-900: var(--ds-accent-900);
+    --primary: var(--ds-color-accent);
+    --primary-foreground: var(--ds-color-on-accent);
+
+    --shadow-elevation-lg: var(--ds-shadow-3);
+    --shadow-custom: var(--ds-shadow-3);
+    --shadow-input: var(--ds-shadow-input);
+    --hover-gradient: var(--ds-gradient-accent-hover);
+  }
+
+  [data-mode="dark"],
+  :host([data-mode="dark"]),
+  [data-theme$="-dark"] {
+    --ds-mode: dark;
+
+    --ds-status-success: #22c55e;
+    --ds-status-warning: #f59e42;
+    --ds-status-danger: #ef4444;
+    --ds-status-info: #38bdf8;
+    --ds-status-disabled: #4b5563;
+
+    --ds-surface-canvas: #070f2e;
+    --ds-surface-1: #111c44;
+    --ds-surface-2: #111c44;
+
+    --ds-text-1: #f1f5f9;
+    --ds-text-2: #cbd5e1;
+    --ds-text-3: #94a3b8;
+
+    --ds-border-1: #374151;
+    --ds-border-2: #4b5563;
+    --ds-border-3: #6b7280;
+    --ds-border-field: #545b58f3;
+
+    --ds-neutral-subtle: #27272a;
+    --ds-neutral-subtle-foreground: #fafafa;
+
+    color-scheme: dark;
+
+    --ds-color-fg-inverse: #09090b;
+    --ds-color-overlay-scrim: rgb(0 0 0 / 0.45);
+    --ds-gradient-accent-hover: linear-gradient(
+      135deg,
+      color(display-p3 0 0 0 / 0.24),
+      var(--ds-accent)
+    );
+
+    --erp-color-hover-primary: #333333f3;
+    --erp-color-hover-secondary: #3a3f3df3;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-mode]):not([data-theme]) {
+      --ds-mode: dark;
+
+      --ds-status-success: #22c55e;
+      --ds-status-warning: #f59e42;
+      --ds-status-danger: #ef4444;
+      --ds-status-info: #38bdf8;
+      --ds-status-disabled: #4b5563;
+
+      --ds-surface-canvas: #070f2e;
+      --ds-surface-1: #111c44;
+      --ds-surface-2: #111c44;
+
+      --ds-text-1: #f1f5f9;
+      --ds-text-2: #cbd5e1;
+      --ds-text-3: #94a3b8;
+
+      --ds-border-1: #374151;
+      --ds-border-2: #4b5563;
+      --ds-border-3: #6b7280;
+      --ds-border-field: #545b58f3;
+
+      --ds-neutral-subtle: #27272a;
+      --ds-neutral-subtle-foreground: #fafafa;
+
+      color-scheme: dark;
+
+      --ds-color-fg-inverse: #09090b;
+      --ds-color-overlay-scrim: rgb(0 0 0 / 0.45);
+      --ds-gradient-accent-hover: linear-gradient(
+        135deg,
+        color(display-p3 0 0 0 / 0.24),
+        var(--ds-accent)
+      );
+
+      --erp-color-hover-primary: #333333f3;
+      --erp-color-hover-secondary: #3a3f3df3;
+    }
+  }
+
+  [data-brand="purple"],
+  :host([data-brand="purple"]),
+  [data-theme^="purple-"] {
+    --ds-brand: purple;
+    --ds-accent-50: #f6efff;
+    --ds-accent-100: #ead9fd;
+    --ds-accent-200: #d8b3fb;
+    --ds-accent-300: #c084fc;
+    --ds-accent-400: #a855f7;
+    --ds-accent-500: #9333ea;
+    --ds-accent-600: #7e22ce;
+    --ds-accent-700: #6b21a8;
+    --ds-accent-800: #581c87;
+    --ds-accent-900: #3b0764;
+    --ds-accent: var(--ds-accent-500);
+    --ds-accent-contrast: #ffffff;
+    --ds-chart-1: var(--ds-accent-500);
+    --ds-chart-2: #0f7cc0;
+    --ds-chart-3: #16a34a;
+    --ds-chart-4: #d97706;
+    --ds-chart-5: #dc2626;
+    --ds-chart-6: #0d9488;
+    --ds-chart-7: #db2777;
+    --ds-chart-8: #65a30d;
+    --ds-chart-9: #4f46e5;
+    --ds-chart-10: #ea580c;
+    --ds-chart-11: #0891b2;
+    --ds-chart-12: #e11d48;
+    --ds-chart-13: #ca8a04;
+    --ds-chart-14: #0284c7;
+    --ds-chart-15: #64748b;
+  }
+
+  [data-brand="teal"],
+  :host([data-brand="teal"]),
+  [data-theme^="teal-"] {
+    --ds-brand: teal;
+    --ds-accent-50: #effbfd;
+    --ds-accent-100: #d7f2f6;
+    --ds-accent-200: #b2e1e7;
+    --ds-accent-300: #83ccd6;
+    --ds-accent-400: #5bb4c1;
+    --ds-accent-500: #3f9cae;
+    --ds-accent-600: #317f8f;
+    --ds-accent-700: #2b6672;
+    --ds-accent-800: #25535d;
+    --ds-accent-900: #214550;
+    --ds-accent: var(--ds-accent-500);
+    --ds-accent-contrast: #ffffff;
+    --ds-chart-1: var(--ds-accent-500);
+    --ds-chart-2: #7c3aed;
+    --ds-chart-3: #d97706;
+    --ds-chart-4: #dc2626;
+    --ds-chart-5: #2563eb;
+    --ds-chart-6: #db2777;
+    --ds-chart-7: #65a30d;
+    --ds-chart-8: #4f46e5;
+    --ds-chart-9: #f97316;
+    --ds-chart-10: #16a34a;
+    --ds-chart-11: #f43f5e;
+    --ds-chart-12: #0284c7;
+    --ds-chart-13: #ca8a04;
+    --ds-chart-14: #9333ea;
+    --ds-chart-15: #64748b;
+  }
+
+  [data-brand="yellow"],
+  :host([data-brand="yellow"]),
+  [data-theme^="yellow-"] {
+    --ds-brand: yellow;
+    --ds-accent-50: #fefce8;
+    --ds-accent-100: #fef9c3;
+    --ds-accent-200: #fef08a;
+    --ds-accent-300: #fde047;
+    --ds-accent-400: #eab308;
+    --ds-accent-500: #ca8a04;
+    --ds-accent-600: #a16207;
+    --ds-accent-700: #854d0e;
+    --ds-accent-800: #713f12;
+    --ds-accent-900: #422006;
+    --ds-accent: var(--ds-accent-500);
+    --ds-accent-contrast: #0b1220;
+    --ds-chart-1: var(--ds-accent-500);
+    --ds-chart-2: #2563eb;
+    --ds-chart-3: #7c3aed;
+    --ds-chart-4: #16a34a;
+    --ds-chart-5: #dc2626;
+    --ds-chart-6: #0d9488;
+    --ds-chart-7: #db2777;
+    --ds-chart-8: #4f46e5;
+    --ds-chart-9: #ea580c;
+    --ds-chart-10: #0891b2;
+    --ds-chart-11: #059669;
+    --ds-chart-12: #e11d48;
+    --ds-chart-13: #0f7cc0;
+    --ds-chart-14: #65a30d;
+    --ds-chart-15: #64748b;
+  }
+
+  [data-brand="green"],
+  :host([data-brand="green"]),
+  [data-theme^="green-"] {
+    --ds-brand: green;
+    --ds-accent-50: #ecfdf5;
+    --ds-accent-100: #d1fae5;
+    --ds-accent-200: #a7f3d0;
+    --ds-accent-300: #6ee7b7;
+    --ds-accent-400: #34d399;
+    --ds-accent-500: #10b981;
+    --ds-accent-600: #059669;
+    --ds-accent-700: #047857;
+    --ds-accent-800: #065f46;
+    --ds-accent-900: #064e3b;
+    --ds-accent: var(--ds-accent-500);
+    --ds-accent-contrast: #ffffff;
+    --ds-chart-1: var(--ds-accent-500);
+    --ds-chart-2: #2563eb;
+    --ds-chart-3: #7c3aed;
+    --ds-chart-4: #d97706;
+    --ds-chart-5: #dc2626;
+    --ds-chart-6: #0d9488;
+    --ds-chart-7: #db2777;
+    --ds-chart-8: #4f46e5;
+    --ds-chart-9: #ea580c;
+    --ds-chart-10: #0891b2;
+    --ds-chart-11: #ca8a04;
+    --ds-chart-12: #e11d48;
+    --ds-chart-13: #0284c7;
+    --ds-chart-14: #9333ea;
+    --ds-chart-15: #64748b;
+  }
+}

package/dist/tooltip.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tooltip = require("./chunks/tooltip-BHXNmXsa.cjs");
+const require_tooltip = require("./chunks/tooltip-nkIqViGk.cjs");
 exports.Tooltip = require_tooltip.Tooltip;

package/dist/tooltip.mjs

@@ -1,2 +1,2 @@
-import { t as Tooltip } from "./chunks/tooltip-YtA_66_1.mjs";
+import { t as Tooltip } from "./chunks/tooltip-efHETBo1.mjs";
 export { Tooltip };

package/dist/typography.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_typography = require("./chunks/typography-3wSx67DZ.cjs");
+const require_typography = require("./chunks/typography-DaLu9tty.cjs");
 exports.Typography = require_typography.Typography;

package/dist/typography.mjs

@@ -1,2 +1,2 @@
-import { t as Typography } from "./chunks/typography-BzprBnQc.mjs";
+import { t as Typography } from "./chunks/typography-CLu6Hx9j.mjs";
 export { Typography };

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "erp-pro-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Lightweight React UI component library for ERP and SaaS apps with tree-shakeable subpath exports.",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "style": "./dist/styles.css",
@@ -20,6 +22,9 @@
       "default": "./dist/index.mjs"
     },
     "./styles.css": "./dist/styles.css",
+    "./colors.css": "./dist/colors.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css",
     "./catalog": {
       "types": "./dist/catalog.d.ts",
       "import": "./dist/catalog.mjs",
@@ -110,6 +115,12 @@
       "require": "./dist/chip.cjs",
       "default": "./dist/chip.mjs"
     },
+    "./progress-bar": {
+      "types": "./dist/components/data-display/progress-bar/index.d.ts",
+      "import": "./dist/progress-bar.mjs",
+      "require": "./dist/progress-bar.cjs",
+      "default": "./dist/progress-bar.mjs"
+    },
     "./chroma-grid": {
       "types": "./dist/components/effects/chroma-grid/index.d.ts",
       "import": "./dist/chroma-grid.mjs",
@@ -338,11 +349,13 @@
     }
   },
   "devDependencies": {
+    "@storybook/react-vite": "^10.3.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.183.1",
     "@vitejs/plugin-react": "^6.0.1",
     "eslint": "^10.1.0",
+    "storybook": "^10.3.3",
     "terser": "^5.46.1",
     "typescript": "^6.0.2",
     "vite": "^8.0.3",
@@ -351,10 +364,11 @@
     "@erp-pro/tsconfig": "0.0.0"
   },
   "scripts": {
-    "build": "node ./scripts/validate-contract.mjs && vite build",
+    "build": "node ./scripts/validate-contract.mjs && node ./scripts/validate-primitive-consumers.mjs && vite build",
     "contract:check": "node ./scripts/validate-contract.mjs",
-    "lint": "eslint .",
+    "lint": "eslint . && node ./scripts/validate-primitive-consumers.mjs",
+    "primitive-consumer:check": "node ./scripts/validate-primitive-consumers.mjs",
     "story:check": "node ./scripts/validate-story-metadata.mjs",
-    "typecheck": "node ./scripts/validate-contract.mjs && tsc --noEmit"
+    "typecheck": "node ./scripts/validate-contract.mjs && node ./scripts/validate-primitive-consumers.mjs && tsc --noEmit"
   }
 }

package/dist/chunks/accordion-BZ5hyz0_.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-BZ5hyz0_.cjs","names":[],"sources":["../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons\";\nimport type { AccordionProps } from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst caret = (\n  <ChevronDownIcon\n    className=\"h-5 w-5 transition-transform duration-300\"\n    aria-hidden=\"true\"\n  />\n);\n\nexport const Accordion = ({\n  items,\n  type = \"single\",\n  defaultOpenIds = type === \"single\" && items.length ? [items[0].id] : [],\n  value,\n  onValueChange,\n  className = \"\",\n  separated = false,\n}: AccordionProps) => {\n  const [internalOpen, setInternalOpen] = useState<string[]>(defaultOpenIds);\n  const controlled = Array.isArray(value);\n  const openItems = controlled ? value! : internalOpen;\n\n  const toggleItem = (id: string) => {\n    let next: string[];\n    const isOpen = openItems.includes(id);\n\n    if (type === \"single\") {\n      next = isOpen ? [] : [id];\n    } else {\n      next = isOpen\n        ? openItems.filter((openId) => openId !== id)\n        : [...openItems, id];\n    }\n\n    if (!controlled) {\n      setInternalOpen(next);\n    }\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"space-y-3\", className)}>\n      {items.map((item) => {\n        const open = openItems.includes(item.id);\n        return (\n          <div\n            key={item.id}\n            className={cx(\n              // Glass effect base\n              \"rounded-xl backdrop-blur-2xl transition-all duration-300\",\n              // Light mode glass\n              \"bg-white/60 border border-white/40 shadow-lg shadow-neutral-200/50\",\n              // Dark mode glass\n              \"dark:bg-neutral-900/50 dark:border-white/10 dark:shadow-neutral-950/50\",\n              // Hover effects\n              \"hover:bg-white/80 hover:shadow-xl hover:border-white/60\",\n              \"dark:hover:bg-neutral-800/60 dark:hover:border-white/20\",\n              // Ring highlight on open\n              open && \"ring-2 ring-primary/30 dark:ring-primary/20\",\n              separated ? \"p-0\" : \"\",\n            )}\n          >\n            <button\n              type=\"button\"\n              className={cx(\n                \"flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200\",\n                // Text colors\n                \"text-neutral-700 dark:text-neutral-200\",\n                // Hover state\n                \"hover:bg-white/40 dark:hover:bg-white/5\",\n                separated\n                  ? \"border-b border-neutral-200/50 dark:border-white/10\"\n                  : \"\",\n                item.disabled\n                  ? \"opacity-50 cursor-not-allowed\"\n                  : \"cursor-pointer\",\n              )}\n              aria-expanded={open}\n              aria-controls={`${item.id}-content`}\n              id={`${item.id}-trigger`}\n              onClick={() => !item.disabled && toggleItem(item.id)}\n              disabled={item.disabled}\n            >\n              <div className=\"text-left flex-1\">\n                <p className=\"text-base font-semibold text-neutral-900 dark:text-white\">\n                  {item.title}\n                </p>\n                {item.description && (\n                  <p className=\"text-sm text-neutral-500 dark:text-neutral-400 mt-0.5\">\n                    {item.description}\n                  </p>\n                )}\n              </div>\n              <span\n                className={cx(\n                  \"p-1.5 rounded-lg transition-all duration-300\",\n                  \"bg-neutral-100/80 dark:bg-white/10\",\n                  \"text-neutral-600 dark:text-neutral-300\",\n                  open &&\n                    \"rotate-180 bg-primary/20 text-primary dark:bg-primary/30 dark:text-primary-400\",\n                )}\n              >\n                {caret}\n              </span>\n            </button>\n            <div\n              id={`${item.id}-content`}\n              role=\"region\"\n              aria-labelledby={`${item.id}-trigger`}\n              className={cx(\n                \"overflow-hidden transition-all duration-300 ease-in-out\",\n                open ? \"max-h-[1000px] opacity-100\" : \"max-h-0 opacity-0\",\n              )}\n            >\n              <div className=\"px-5 pb-5 pt-2 text-sm text-neutral-600 dark:text-neutral-300 leading-relaxed\">\n                {item.content}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,QAAQ,QAAQ,IAAI,CAAC,MAAM;AAE/D,IAAM,QACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;CACE,WAAU;CACV,eAAY;CACZ,CAAA;AAGJ,IAAa,aAAa,EACxB,OACA,OAAO,UACP,iBAAiB,SAAS,YAAY,MAAM,SAAS,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,EACvE,OACA,eACA,YAAY,IACZ,YAAY,YACQ;CACpB,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAAsC,eAAe;CAC1E,MAAM,aAAa,MAAM,QAAQ,MAAM;CACvC,MAAM,YAAY,aAAa,QAAS;CAExC,MAAM,cAAc,OAAe;EACjC,IAAI;EACJ,MAAM,SAAS,UAAU,SAAS,GAAG;AAErC,MAAI,SAAS,SACX,QAAO,SAAS,EAAE,GAAG,CAAC,GAAG;MAEzB,QAAO,SACH,UAAU,QAAQ,WAAW,WAAW,GAAG,GAC3C,CAAC,GAAG,WAAW,GAAG;AAGxB,MAAI,CAAC,WACH,iBAAgB,KAAK;AAEvB,kBAAgB,KAAK;;AAGvB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACvC,MAAM,KAAK,SAAS;GACnB,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG;AACxC,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEE,WAAW,GAET,4DAEA,sEAEA,0EAEA,2DACA,2DAEA,QAAQ,+CACR,YAAY,QAAQ,GACrB;cAfH,CAiBE,iBAAA,GAAA,kBAAA,MAAC,UAAD;KACE,MAAK;KACL,WAAW,GACT,sGAEA,0CAEA,2CACA,YACI,wDACA,IACJ,KAAK,WACD,kCACA,iBACL;KACD,iBAAe;KACf,iBAAe,GAAG,KAAK,GAAG;KAC1B,IAAI,GAAG,KAAK,GAAG;KACf,eAAe,CAAC,KAAK,YAAY,WAAW,KAAK,GAAG;KACpD,UAAU,KAAK;eAnBjB,CAqBE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBACV,KAAK;OACJ,CAAA,EACH,KAAK,eACJ,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBACV,KAAK;OACJ,CAAA,CAEF;SACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,WAAW,GACT,gDACA,sCACA,0CACA,QACE,iFACH;gBAEA;MACI,CAAA,CACA;QACT,iBAAA,GAAA,kBAAA,KAAC,OAAD;KACE,IAAI,GAAG,KAAK,GAAG;KACf,MAAK;KACL,mBAAiB,GAAG,KAAK,GAAG;KAC5B,WAAW,GACT,2DACA,OAAO,+BAA+B,oBACvC;eAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KACF,CAAA,CACF;MAxEC,KAAK,GAwEN;IAER;EACE,CAAA"}