@besaitech/ng-design-system 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -37,6 +37,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/besaitech-ng-design-system.mjs"
     },
+    "./calendar": {
+      "types": "./calendar/index.d.ts",
+      "default": "./fesm2022/besaitech-ng-design-system-calendar.mjs"
+    },
     "./charts": {
       "types": "./charts/index.d.ts",
       "default": "./fesm2022/besaitech-ng-design-system-charts.mjs"

package/themes/base.css

@@ -47,12 +47,50 @@
   --color-warning: #f3b73c;
   --color-danger: #df4f6b;
 
+  /*
+   * Clinical severity — an ORDINAL scale, and deliberately not the status trio.
+   *
+   * Status says what the UI did: saved, needs attention, failed. Severity says how bad the thing
+   * itself is. A red that sometimes means "save failed" and sometimes means "anaphylaxis" is a
+   * safety problem, so these are a separate ramp and must never be substituted for each other.
+   *
+   * Two mechanisms keep them apart. The COLOURS are perceptually distant: every level below is at
+   * least dE76 30 from the nearest of success/warning/danger in CIELAB, and adjacent levels are at
+   * least 27 from each other, so the ramp is readable as a ramp. The FORM differs too — status is
+   * three categorical states and renders as a solid badge, severity is five ordered steps and can
+   * render as a filled meter (sds-severity). Shape is the channel that survives greyscale.
+   *
+   * `unknown` sits OUTSIDE the ramp on purpose: "not assessed" is not a low severity, and colouring
+   * it like one tells a clinician something nobody established.
+   *
+   * Every fg clears 4.5:1 on surface, canvas, muted AND on its own -soft in both modes. If you
+   * restep one, re-measure it — nothing in the build will catch a contrast regression.
+   */
+  --color-severity-unknown: #55606f;
+  --color-severity-unknown-soft: #eef1f5;
+  --color-severity-mild: #0f766e;
+  --color-severity-mild-soft: #e2f3f0;
+  --color-severity-moderate: #9a4708;
+  --color-severity-moderate-soft: #fbeedd;
+  --color-severity-severe: #b91c1c;
+  --color-severity-severe-soft: #fde6e6;
+  --color-severity-critical: #7f1d1d;
+  --color-severity-critical-soft: #f7cccc;
+  /*
+   * The top step is FILLED rather than tinted, so it is louder than a colour change alone — and the
+   * fill needs its own pair. `-critical` is a foreground (dark red on a pale surface, light pink on
+   * a dark one), so reusing it as a background would, in dark mode, put pale text on pale pink.
+   * `-fill` is the background and `-on` the text that sits on it; both measured, both modes.
+   */
+  --color-severity-critical-fill: #7f1d1d;
+  --color-severity-critical-on: #ffffff;
+
   /* Radius */
   --radius-control: 0.5rem;
   --radius-card: 0.75rem;
 
   /* Typography — override in your app's own @theme if your brand uses a different face. */
-  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
 
   /*
    * Ambient decoration — the slow, breathing drift of the brand-tinted blobs behind the glass top bar,
@@ -123,6 +161,20 @@ html.dark {
   --color-success: #34d67e;
   --color-warning: #f6c453;
   --color-danger: #f2748c;
+
+  /* Clinical severity — re-stepped for the dark surface, same measured rules as light. */
+  --color-severity-unknown: #a9b0bb;
+  --color-severity-unknown-soft: #27272b;
+  --color-severity-mild: #2dd4bf;
+  --color-severity-mild-soft: #0f2e2b;
+  --color-severity-moderate: #e8903a;
+  --color-severity-moderate-soft: #33240f;
+  --color-severity-severe: #f87171;
+  --color-severity-severe-soft: #361616;
+  --color-severity-critical: #fca5a5;
+  --color-severity-critical-soft: #3f1111;
+  --color-severity-critical-fill: #991b1b;
+  --color-severity-critical-on: #fee2e2;
 }
 
 /*