begin new custom chart implementation for js ui

go/jsruntime/styles/theme.css

@@ -141,6 +141,29 @@
     --color-on-warning: var(--color-white);
     --color-danger: var(--color-red-500);
     --color-on-danger: var(--color-white);
+
+    /* ---- the categorical CHART palette -------------------------------------
+       Eight fixed slots for uikit/Chart.tsx. A series is painted by its INDEX
+       (slot 1, 2, 3 …) and never by a cycled/derived hue — a ninth series folds
+       into "Other" rather than inventing a colour. Unlike the state colours these
+       are a set, tuned as a set: the ordering maximises the minimum colour-blind
+       ΔE between neighbouring slots, so adjacent series stay distinguishable under
+       protanopia/deuteranopia (worst adjacent ΔE 24 in light, 10 in dark — see the
+       data-viz palette validator).
+
+       These CAN be named in a component because a chart is SVG and SVG fills read
+       CSS variables (a canvas cannot, so it would need a literal hex). The dark
+       column below is the same eight hues stepped for the near-black surface, not a
+       second palette. Brand overrides by redefining these (or passing `palette` to a
+       single chart). */
+    --color-chart-1: #2a78d6; /* blue    */
+    --color-chart-2: #1baf7a; /* aqua    */
+    --color-chart-3: #eda100; /* yellow  */
+    --color-chart-4: #008300; /* green   */
+    --color-chart-5: #4a3aa7; /* violet  */
+    --color-chart-6: #e34948; /* red     */
+    --color-chart-7: #e87ba4; /* magenta */
+    --color-chart-8: #eb6834; /* orange  */
 }
 
 /* ---------------------------------------------------------------------------
@@ -182,6 +205,19 @@
     --color-primary-subtle: #1f1f24;
     --color-primary-border: #3d3d45;
     --color-accent: #e5e5e5;
+
+    /* The chart palette, re-stepped for the dark surface. Same eight hues, lifted
+       into the dark-mode lightness band so every slot clears 3:1 against #101013 —
+       a light-mode aqua or yellow would sink into the surface. Validated as a set
+       against the dark surface, exactly as the light column was against white. */
+    --color-chart-1: #3987e5;
+    --color-chart-2: #199e70;
+    --color-chart-3: #c98500;
+    --color-chart-4: #008300;
+    --color-chart-5: #9085e9;
+    --color-chart-6: #e66767;
+    --color-chart-7: #d55181;
+    --color-chart-8: #d95926;
 }
 
 /* The page's own background — painted before anything mounts, and behind it