@elasticias/ui 0.0.16 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "0.0.16",
+  "version": "1.0.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -12,7 +12,9 @@
     "@elasticias/utils": ">=0.0.1",
     "@ngx-translate/core": "^17.0.0",
     "@primeng/themes": "^21.0.0",
-    "primeng": "^21.0.0"
+    "chart.js": "^4.5.0",
+    "primeng": "^21.0.0",
+    "@angular/platform-browser": "21.2"
   },
   "sideEffects": false,
   "repository": {

package/styles/_comptoir.scss

@@ -0,0 +1,143 @@
+/* Comptoir design-system tokens — generated from libs/tokens/*.json
+   Source of truth: shared/elasticias-framework-ui/libs/tokens/
+   Showcase:        apps/elasticerp/docs/ux-ui/design-system.html
+
+   Apps consume this layer in two ways:
+   1. List `_comptoir.scss` in their global styles entry (angular.json or src/styles.scss).
+   2. `@use '@elasticias/ui/styles/comptoir';` from their own global SCSS.
+
+   Tenant ramp defaults to the showcase's "parfumerie" sample; it is
+   replaced at runtime by EfThemeConfigService.setTenantAccent(hex). */
+
+:root {
+  /* ── Ink ramp (structure) ────────────────────────────────────── */
+  --ink-50:  #f8f9fb;
+  --ink-100: #f1f3f6;
+  --ink-200: #e4e8ee;
+  --ink-300: #cdd3dd;
+  --ink-400: #9ca5b3;
+  --ink-500: #6c7280;
+  --ink-600: #4a4f5a;
+  --ink-700: #2f3239;
+  --ink-800: #1d1f24;
+  --ink-900: #0f1115;
+  --ink-950: #06070a;
+
+  /* ── Tenant ramp (identity, runtime-overridable) ─────────────── */
+  --tenant-50:  #f7f0f4;
+  --tenant-100: #ecdce5;
+  --tenant-200: #d8b4c5;
+  --tenant-300: #b87a99;
+  --tenant-400: #934e74;
+  --tenant-500: #6f3257;
+  --tenant-600: #54243f;
+  --tenant-700: #401a30;
+  --tenant-800: #2c1221;
+  --tenant-900: #1a0913;
+
+  /* ── Module accents (wayfinding) ─────────────────────────────── */
+  --m-sales:     #1356a8;
+  --m-purchase:  #155b3a;
+  --m-stock:     #4f5560;
+  --m-pos:       #b34a00;
+  --m-marketing: #7a4665;
+  --m-store:     #5d3aa3;
+  --m-finance:   #0d6e6a;
+  --m-admin:     #0f1115;
+
+  /* ── Status pairs (chips only) ───────────────────────────────── */
+  --st-pending-fg:    #b34a00;  --st-pending-bg:    #fff1e0;
+  --st-processing-fg: #1356a8;  --st-processing-bg: #e0ecfc;
+  --st-shipped-fg:    #5d3aa3;  --st-shipped-bg:    #ece4fa;
+  --st-delivered-fg:  #16693a;  --st-delivered-bg:  #d9efe1;
+  --st-cancelled-fg:  #a01b1b;  --st-cancelled-bg:  #f9dede;
+  --st-refunded-fg:   #826208;  --st-refunded-bg:   #fdf1c8;
+  --st-onhold-fg:     #4f5560;  --st-onhold-bg:     #e7e9ee;
+
+  /* ── Radii ───────────────────────────────────────────────────── */
+  --r-sm:   8px;
+  --r-md:   12px;
+  --r-lg:   16px;
+  --r-xl:   20px;
+  --r-2xl:  24px;
+  --r-pill: 999px;
+
+  /* ── Hit targets ─────────────────────────────────────────────── */
+  --hit:        32px;  /* compact (desktop dense rows) */
+  --hit-base:   40px;  /* standard buttons */
+  --hit-touch:  48px;  /* POS / mobile primary actions */
+  --hit-pos:    64px;  /* POS number pad, big totals */
+
+  /* ── Motion ──────────────────────────────────────────────────── */
+  --t-fast: 140ms;
+  --t-base: 260ms;
+  --t-slow: 480ms;
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* ── Semantic aliases (light) ────────────────────────────────── */
+  --paper:      var(--ink-50);
+  --paper-alt:  #fff;
+  --rule:       var(--ink-200);
+  --rule-soft:  rgba(15, 17, 21, 0.05);
+  --text:       var(--ink-900);
+  --text-mute:  var(--ink-500);
+  --text-soft:  var(--ink-400);
+  --ink-active: var(--ink-900);
+
+  /* ── Spatial scale (s-1 = 4px → s-10 = 96px) ─────────────────── */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 12px;
+  --s-4: 16px;
+  --s-5: 20px;
+  --s-6: 24px;
+  --s-7: 32px;
+  --s-8: 48px;
+  --s-9: 64px;
+  --s-10: 96px;
+
+  /* ── Shadows (light) ─────────────────────────────────────────── */
+  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 0 rgba(15, 17, 21, 0.03);
+  --shadow-2: 0 4px 14px -4px rgba(15, 17, 21, 0.10), 0 1px 0 rgba(15, 17, 21, 0.03);
+  --shadow-3: 0 16px 40px -16px rgba(15, 17, 21, 0.20), 0 2px 0 rgba(15, 17, 21, 0.03);
+  --shadow-tenant: 0 12px 30px -10px var(--tenant-200);
+
+  /* ── Module current (default; overridden by [data-module]) ───── */
+  --module: var(--m-admin);
+}
+
+/* ── Semantic aliases (dark) — toggled by .p-dark on <html> ────── */
+.p-dark {
+  --paper:      var(--ink-900);
+  --paper-alt:  var(--ink-800);
+  --rule:       rgba(248, 249, 251, 0.08);
+  --rule-soft:  rgba(248, 249, 251, 0.04);
+  --text:       var(--ink-50);
+  --text-mute:  var(--ink-400);
+  --text-soft:  var(--ink-500);
+  --ink-active: var(--ink-50);
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-2: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
+  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
+}
+
+/* ── Module current — driven by data-module attribute ──────────── */
+[data-module="sales"]     { --module: var(--m-sales); }
+[data-module="purchase"]  { --module: var(--m-purchase); }
+[data-module="stock"]     { --module: var(--m-stock); }
+[data-module="pos"]       { --module: var(--m-pos); }
+[data-module="marketing"] { --module: var(--m-marketing); }
+[data-module="store"]     { --module: var(--m-store); }
+[data-module="finance"]   { --module: var(--m-finance); }
+[data-module="admin"]     { --module: var(--m-admin); }
+
+/* ── Reduced motion ────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}