@besaitech/ng-design-system 0.0.64 → 0.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -13,6 +13,11 @@
     "@angular/router": "^20.3.0 || ^21.0.0 || ^22.0.0"
   },
   "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-delaunay": "^6.0.4",
+    "d3-hierarchy": "^3.1.2",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/themes/base.css

@@ -138,6 +138,86 @@ html.dark {
  *   --sds-dark-tint, --sds-dark-tint-hover, --sds-dark-tint-active, --sds-dark-tint-border, --sds-dark-on-tint
  */
 
+/*
+ * Data-viz palette — consumed by the sds-*-chart family (line, bar, scatter, donut, heatmap, treemap,
+ * sparkline, kpi). Plain custom properties, not @theme tokens: a chart paints them through `style.fill`,
+ * never through a utility class, so they need no Tailwind output.
+ *
+ * The 8 categorical slots are a validated colour-blind-safe ORDER (adjacent pairs clear ΔE 8 under
+ * protan/deutan/tritan simulation in both modes) — the order is the safety mechanism, so re-order or
+ * re-step them only after re-validating. A series takes the slot of its position in the `series` array
+ * and keeps it when other series are hidden (colour follows the entity, never its rank). A brand may
+ * override any slot in its own preset, e.g. `--sds-chart-1: var(--color-brand-500)`.
+ *
+ * Dark mode is SELECTED, not flipped: the same eight hues re-stepped for the dark surface.
+ */
+:root {
+  --sds-chart-1: #2a78d6; /* blue    */
+  --sds-chart-2: #eb6834; /* orange  */
+  --sds-chart-3: #1baf7a; /* aqua    */
+  --sds-chart-4: #eda100; /* yellow  */
+  --sds-chart-5: #e87ba4; /* magenta */
+  --sds-chart-6: #008300; /* green   */
+  --sds-chart-7: #4a3aa7; /* violet  */
+  --sds-chart-8: #e34948; /* red     */
+
+  /* Chrome — hairline grid one step off the surface, a slightly firmer baseline/axis. */
+  --sds-chart-grid: #eef0f4;
+  --sds-chart-axis: #d3d8e2;
+
+  /* Sequential (magnitude): one hue, near-zero recedes toward the surface. */
+  --sds-chart-seq-0: #e3eefc;
+  --sds-chart-seq-1: #0d366b;
+  /* Diverging (polarity): warm/cool poles around a neutral gray midpoint — never a hue at the middle. */
+  --sds-chart-div-neg: #d03b3b;
+  --sds-chart-div-mid: #efeeeb;
+  --sds-chart-div-pos: #1c5cab;
+  /* Ink for a label set inside a ramp-coloured cell: `lo` on the pale end, `hi` on the strong end. */
+  --sds-chart-ink-lo: #1b2440;
+  --sds-chart-ink-hi: #ffffff;
+
+  /* Ink for a label set ON a categorical fill (treemap tiles): the higher-contrast of white / near-black per slot. */
+  --sds-chart-1-ink: #ffffff;
+  --sds-chart-2-ink: #10131c;
+  --sds-chart-3-ink: #10131c;
+  --sds-chart-4-ink: #10131c;
+  --sds-chart-5-ink: #10131c;
+  --sds-chart-6-ink: #ffffff;
+  --sds-chart-7-ink: #ffffff;
+  --sds-chart-8-ink: #10131c;
+}
+
+html.dark {
+  --sds-chart-1: #3987e5;
+  --sds-chart-2: #d95926;
+  --sds-chart-3: #199e70;
+  --sds-chart-4: #c98500;
+  --sds-chart-5: #d55181;
+  --sds-chart-6: #008300;
+  --sds-chart-7: #9085e9;
+  --sds-chart-8: #e66767;
+
+  --sds-chart-grid: #26262b;
+  --sds-chart-axis: #3a3a41;
+
+  --sds-chart-seq-0: #1d2633;
+  --sds-chart-seq-1: #9ec5f4;
+  --sds-chart-div-neg: #e66767;
+  --sds-chart-div-mid: #34343a;
+  --sds-chart-div-pos: #5598e7;
+  --sds-chart-ink-lo: #f4f4f5;
+  --sds-chart-ink-hi: #0b0b0d;
+
+  --sds-chart-1-ink: #0b0b0d;
+  --sds-chart-2-ink: #0b0b0d;
+  --sds-chart-3-ink: #0b0b0d;
+  --sds-chart-4-ink: #0b0b0d;
+  --sds-chart-5-ink: #0b0b0d;
+  --sds-chart-6-ink: #ffffff;
+  --sds-chart-7-ink: #0b0b0d;
+  --sds-chart-8-ink: #0b0b0d;
+}
+
 /* Honour a reader's reduced-motion setting: the ambient drift is decoration, so it simply stops. */
 @media (prefers-reduced-motion: reduce) {
   .animate-sds-ambient {