@yuneta/gobj-ui 7.26.39 → 7.26.40

package/README.md

@@ -3394,6 +3394,22 @@ the middle, and **a toolbar left with a single group is centred**. An unknown
 name is reported, not silently dropped: a typo would otherwise remove the save
 button with no trace of why.
 
+### Charts — the ink of the axes, on both schemes
+
+uPlot is built for a white page: its axis labels are black, its grid 7% black.
+`C_YUI_UPLOT` gives its axes the ink of the theme -- both of them: uPlot always
+draws an X and a Y axis, and until 7.26.40 the Y axis kept uPlot's black, which
+no one could read on the dark scheme. A uPlot built by the app itself takes the
+same axes from `yui_uplot_axes()`, and redraws on a change of the theme
+(`yui_watch_theme(gobj)` sends `EV_THEME`; its action calls `chart.redraw()`):
+
+```js
+import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+
+new uPlot({width: 600, height: 300, series: [{}, {label: "temperature"}],
+           axes: yui_uplot_axes([{}])}, data, $el);
+```
+
 ### `C_YUI_FORM` — what closing it asks about
 
 `changes` says the form is not what is stored: the reader changed it, or the

package/dist/gobj-ui.cjs.js

@@ -13396,41 +13396,58 @@ function register_c_yui_map() {
 	return create_gclass$16(GCLASS_NAME$16);
 }
 //#endregion
-//#region src/c_yui_uplot.js
+//#region src/yui_uplot_ink.js
 /***********************************************************************
-*          c_yui_uplot.js
+*          yui_uplot_ink.js
 *
-*          Graphics, Charts with uPlot
+*      The ink of a uPlot chart, on both schemes, and its palette.
 *
-*          Copyright (c) 2025-2026, ArtGins.
+*      uPlot is built for a white page: its axis labels are `#000`
+*      and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*      1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*      not there. The inks here are handed to uPlot as FUNCTIONS: it
+*      calls them when it draws, so the value can never be stale --
+*      what goes stale is the canvas, and a change of the theme has to
+*      ask for a redraw (yui_watch_theme() turns it into an event).
+*
+*      uPlot ALWAYS draws a Y axis: its setDefaults() makes axes[1]
+*      whether it was given or not, with its own black. So the axes are
+*      padded to two before they are inked. C_YUI_UPLOT's default is
+*      `[{}]`, the X axis alone, and until 7.26.40 every chart of the
+*      library had a Y axis whose values could not be read in the dark.
+*
+*      C_YUI_UPLOT uses it, and so can an app that builds a uPlot of its
+*      own:
+*
+*          import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+*
+*          const chart = new uPlot({
+*              width: 600, height: 300,
+*              series: [{}, {label: "temperature"}],
+*              axes: yui_uplot_axes([{}]),     // X and Y, with the ink of the theme
+*          }, data, $el);
+*
+*      The palette is six colours that clear 3:1 on BOTH grounds
+*      (worst 3.39 on white, 3.71 on near-black), ordered so the first
+*      two are the pair that survives colour blindness -- blue and
+*      orange, never red and green as the opening pair.
+*
+*          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
-/***************************************************************
-*  The ink of a chart, and its palette.
-*
-*  uPlot is built for a white page: its axis labels are `#000`
-*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
-*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
-*  not there. And the series were CSS colour names: `blue` is
-*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
-*  whichever scheme you were in, one of the lines was a rumour.
-*
-*  These are given to uPlot as FUNCTIONS: it calls them when it
-*  draws, so the value can never be stale -- what goes stale is
-*  the canvas, and that is what EV_THEME redraws.
-*
-*  The palette is six colours that clear 3:1 on BOTH grounds
-*  (worst 3.39 on white, 3.71 on near-black), ordered so the
-*  first two are the pair that survives colour blindness -- blue
-*  and orange, never red and green as the opening pair.
-***************************************************************/
-function axis_ink() {
+/************************************************************
+*  The ink of the labels of an axis.
+************************************************************/
+function yui_uplot_axis_ink() {
 	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
 }
-function grid_ink() {
+/************************************************************
+*  The ink of the grid and of the ticks.
+************************************************************/
+function yui_uplot_grid_ink() {
 	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
 }
-var CHART_PALETTE = [
+var YUI_UPLOT_PALETTE = [
 	{
 		stroke: "#2f6fd0",
 		fill: "rgba(47,111,208,0.10)"
@@ -13456,15 +13473,33 @@ var CHART_PALETTE = [
 		fill: "rgba(209,52,75,0.10)"
 	}
 ];
-function themed_axes(axes) {
-	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+/************************************************************
+*  The axes the host asked for -- at least the X and the Y,
+*  the two uPlot always draws -- with the ink it did not ask
+*  about. A stroke, a grid or a ticks the host gave is kept.
+*  Answers new objects: the host's are not touched.
+************************************************************/
+function yui_uplot_axes(axes) {
+	let list = Array.isArray(axes) ? axes.slice() : [axes || {}];
+	while (list.length < 2) list.push({});
+	return list.map((ax) => {
 		let a = Object.assign({}, ax || {});
-		if (a.stroke === void 0) a.stroke = axis_ink;
-		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
-		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		if (a.stroke === void 0) a.stroke = yui_uplot_axis_ink;
+		a.grid = Object.assign({ stroke: yui_uplot_grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: yui_uplot_grid_ink }, a.ticks || {});
 		return a;
 	});
 }
+//#endregion
+//#region src/c_yui_uplot.js
+/***********************************************************************
+*          c_yui_uplot.js
+*
+*          Graphics, Charts with uPlot
+*
+*          Copyright (c) 2025-2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
 /***************************************************************
 *              Constants
 ***************************************************************/
@@ -13482,7 +13517,7 @@ var attrs_table$15 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, YUI_UPLOT_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -13549,7 +13584,7 @@ function build_ui$14(gobj) {
 		width: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "width"),
 		height: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "height"),
 		series: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "series"),
-		axes: themed_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
+		axes: yui_uplot_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
 		scales: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "scales")
 	};
 	let uplot$2 = new uplot.default(uPlot_options, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "data"), $container);
@@ -13650,7 +13685,7 @@ function ac_add_serie(gobj, event, kw, src) {
 		}
 	}
 	let colors = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "colors");
-	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	if (!Array.isArray(colors) || !colors.length) colors = YUI_UPLOT_PALETTE;
 	let color = colors[Math.max(0, idx - 1) % colors.length];
 	if (kw.stroke === void 0) kw.stroke = color.stroke;
 	if (kw.fill === void 0) kw.fill = color.fill;

package/dist/gobj-ui.es.js

@@ -13391,41 +13391,58 @@ function register_c_yui_map() {
 	return create_gclass$16(GCLASS_NAME$16);
 }
 //#endregion
-//#region src/c_yui_uplot.js
+//#region src/yui_uplot_ink.js
 /***********************************************************************
-*          c_yui_uplot.js
+*          yui_uplot_ink.js
 *
-*          Graphics, Charts with uPlot
+*      The ink of a uPlot chart, on both schemes, and its palette.
 *
-*          Copyright (c) 2025-2026, ArtGins.
+*      uPlot is built for a white page: its axis labels are `#000`
+*      and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*      1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*      not there. The inks here are handed to uPlot as FUNCTIONS: it
+*      calls them when it draws, so the value can never be stale --
+*      what goes stale is the canvas, and a change of the theme has to
+*      ask for a redraw (yui_watch_theme() turns it into an event).
+*
+*      uPlot ALWAYS draws a Y axis: its setDefaults() makes axes[1]
+*      whether it was given or not, with its own black. So the axes are
+*      padded to two before they are inked. C_YUI_UPLOT's default is
+*      `[{}]`, the X axis alone, and until 7.26.40 every chart of the
+*      library had a Y axis whose values could not be read in the dark.
+*
+*      C_YUI_UPLOT uses it, and so can an app that builds a uPlot of its
+*      own:
+*
+*          import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+*
+*          const chart = new uPlot({
+*              width: 600, height: 300,
+*              series: [{}, {label: "temperature"}],
+*              axes: yui_uplot_axes([{}]),     // X and Y, with the ink of the theme
+*          }, data, $el);
+*
+*      The palette is six colours that clear 3:1 on BOTH grounds
+*      (worst 3.39 on white, 3.71 on near-black), ordered so the first
+*      two are the pair that survives colour blindness -- blue and
+*      orange, never red and green as the opening pair.
+*
+*          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
-/***************************************************************
-*  The ink of a chart, and its palette.
-*
-*  uPlot is built for a white page: its axis labels are `#000`
-*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
-*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
-*  not there. And the series were CSS colour names: `blue` is
-*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
-*  whichever scheme you were in, one of the lines was a rumour.
-*
-*  These are given to uPlot as FUNCTIONS: it calls them when it
-*  draws, so the value can never be stale -- what goes stale is
-*  the canvas, and that is what EV_THEME redraws.
-*
-*  The palette is six colours that clear 3:1 on BOTH grounds
-*  (worst 3.39 on white, 3.71 on near-black), ordered so the
-*  first two are the pair that survives colour blindness -- blue
-*  and orange, never red and green as the opening pair.
-***************************************************************/
-function axis_ink() {
+/************************************************************
+*  The ink of the labels of an axis.
+************************************************************/
+function yui_uplot_axis_ink() {
 	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
 }
-function grid_ink() {
+/************************************************************
+*  The ink of the grid and of the ticks.
+************************************************************/
+function yui_uplot_grid_ink() {
 	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
 }
-var CHART_PALETTE = [
+var YUI_UPLOT_PALETTE = [
 	{
 		stroke: "#2f6fd0",
 		fill: "rgba(47,111,208,0.10)"
@@ -13451,15 +13468,33 @@ var CHART_PALETTE = [
 		fill: "rgba(209,52,75,0.10)"
 	}
 ];
-function themed_axes(axes) {
-	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+/************************************************************
+*  The axes the host asked for -- at least the X and the Y,
+*  the two uPlot always draws -- with the ink it did not ask
+*  about. A stroke, a grid or a ticks the host gave is kept.
+*  Answers new objects: the host's are not touched.
+************************************************************/
+function yui_uplot_axes(axes) {
+	let list = Array.isArray(axes) ? axes.slice() : [axes || {}];
+	while (list.length < 2) list.push({});
+	return list.map((ax) => {
 		let a = Object.assign({}, ax || {});
-		if (a.stroke === void 0) a.stroke = axis_ink;
-		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
-		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		if (a.stroke === void 0) a.stroke = yui_uplot_axis_ink;
+		a.grid = Object.assign({ stroke: yui_uplot_grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: yui_uplot_grid_ink }, a.ticks || {});
 		return a;
 	});
 }
+//#endregion
+//#region src/c_yui_uplot.js
+/***********************************************************************
+*          c_yui_uplot.js
+*
+*          Graphics, Charts with uPlot
+*
+*          Copyright (c) 2025-2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
 /***************************************************************
 *              Constants
 ***************************************************************/
@@ -13477,7 +13512,7 @@ var attrs_table$15 = [
 	SDATA(data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	SDATA(data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	SDATA(data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	SDATA(data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
+	SDATA(data_type_t.DTP_JSON, "colors", 0, YUI_UPLOT_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	SDATA(data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	SDATA(data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -13544,7 +13579,7 @@ function build_ui$14(gobj) {
 		width: gobj_read_attr(gobj, "width"),
 		height: gobj_read_attr(gobj, "height"),
 		series: gobj_read_attr(gobj, "series"),
-		axes: themed_axes(gobj_read_attr(gobj, "axes")),
+		axes: yui_uplot_axes(gobj_read_attr(gobj, "axes")),
 		scales: gobj_read_attr(gobj, "scales")
 	};
 	let uplot = new uPlot(uPlot_options, gobj_read_attr(gobj, "data"), $container);
@@ -13645,7 +13680,7 @@ function ac_add_serie(gobj, event, kw, src) {
 		}
 	}
 	let colors = gobj_read_attr(gobj, "colors");
-	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	if (!Array.isArray(colors) || !colors.length) colors = YUI_UPLOT_PALETTE;
 	let color = colors[Math.max(0, idx - 1) % colors.length];
 	if (kw.stroke === void 0) kw.stroke = color.stroke;
 	if (kw.fill === void 0) kw.fill = color.fill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.26.39",
+  "version": "7.26.40",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_uplot.js

@@ -30,62 +30,12 @@ import {
 import uPlot from "uplot";
 import "uplot/dist/uPlot.min.css";
 
-import {yui_is_dark, yui_watch_theme} from "./yui_theme.js";
+import {yui_watch_theme} from "./yui_theme.js";
+/*  The ink of the axes -- the X and the Y -- and the palette of the
+ *  series, on both schemes: see yui_uplot_ink.js.  */
+import {yui_uplot_axes, YUI_UPLOT_PALETTE} from "./yui_uplot_ink.js";
 
 
-/***************************************************************
- *  The ink of a chart, and its palette.
- *
- *  uPlot is built for a white page: its axis labels are `#000`
- *  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
- *  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
- *  not there. And the series were CSS colour names: `blue` is
- *  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
- *  whichever scheme you were in, one of the lines was a rumour.
- *
- *  These are given to uPlot as FUNCTIONS: it calls them when it
- *  draws, so the value can never be stale -- what goes stale is
- *  the canvas, and that is what EV_THEME redraws.
- *
- *  The palette is six colours that clear 3:1 on BOTH grounds
- *  (worst 3.39 on white, 3.71 on near-black), ordered so the
- *  first two are the pair that survives colour blindness -- blue
- *  and orange, never red and green as the opening pair.
- ***************************************************************/
-function axis_ink()
-{
-    return yui_is_dark()? "#c7cdd8" : "#2e333d";
-}
-
-function grid_ink()
-{
-    return yui_is_dark()? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
-}
-
-const CHART_PALETTE = [
-    {stroke: "#2f6fd0", fill: "rgba(47,111,208,0.10)"},     /*  4.88 / 3.71  */
-    {stroke: "#b8620a", fill: "rgba(184,98,10,0.10)"},      /*  4.38 / 4.13  */
-    {stroke: "#2f8f4e", fill: "rgba(47,143,78,0.10)"},      /*  4.07 / 4.45  */
-    {stroke: "#8b5cf6", fill: "rgba(139,92,246,0.10)"},     /*  4.23 / 4.28  */
-    {stroke: "#0e9aa7", fill: "rgba(14,154,167,0.10)"},     /*  3.39 / 5.35  */
-    {stroke: "#d1344b", fill: "rgba(209,52,75,0.10)"},      /*  4.88 / 3.71  */
-];
-
-/*  The axes the host asked for, with the ink it did not ask about.  */
-function themed_axes(axes)
-{
-    let list = Array.isArray(axes)? axes : [axes || {}];
-    return list.map((ax) => {
-        let a = Object.assign({}, ax || {});
-        if(a.stroke === undefined) {
-            a.stroke = axis_ink;
-        }
-        a.grid = Object.assign({stroke: grid_ink}, a.grid || {});
-        a.ticks = Object.assign({stroke: grid_ink}, a.ticks || {});
-        return a;
-    });
-}
-
 /***************************************************************
  *              Constants
  ***************************************************************/
@@ -104,7 +54,7 @@ SDATA(data_type_t.DTP_JSON,     "series",           0,  [{}],   "Data series"),
 SDATA(data_type_t.DTP_JSON,     "axes",             0,  [{}],   "Chart axes"),
 SDATA(data_type_t.DTP_JSON,     "scales",           0,  {},     "Chart scales"),
 SDATA(data_type_t.DTP_JSON,     "data",             0,  [[]],   "Chart data"),
-SDATA(data_type_t.DTP_JSON,     "colors",           0,  CHART_PALETTE,
+SDATA(data_type_t.DTP_JSON,     "colors",           0,  YUI_UPLOT_PALETTE,
     "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "HTML container for the chart"),
 SDATA(data_type_t.DTP_BOOLEAN,  "own_container",    0,  false,  "If true, container is gobj-managed"),
@@ -138,7 +88,7 @@ function mt_create(gobj)
     build_ui(gobj);
 
     /*  A canvas does not restyle itself: the ink is read when uPlot
-     *  DRAWS (see axis_ink), so a theme change only has to reach the
+     *  DRAWS (yui_uplot_ink.js), so a theme change only has to reach the
      *  machine and ask for a redraw. Same wiring as the graphs.  */
     gobj.priv.theme_observer = yui_watch_theme(gobj);
 
@@ -220,7 +170,7 @@ function build_ui(gobj)
         width: gobj_read_attr(gobj, "width"),
         height: gobj_read_attr(gobj, "height"),
         series: gobj_read_attr(gobj, "series"),
-        axes: themed_axes(gobj_read_attr(gobj, "axes")),
+        axes: yui_uplot_axes(gobj_read_attr(gobj, "axes")),
         scales: gobj_read_attr(gobj, "scales"),
     };
     let uplot = new uPlot(
@@ -444,7 +394,7 @@ function ac_add_serie(gobj, event, kw, src)
     }
     let colors = gobj_read_attr(gobj, "colors");
     if(!Array.isArray(colors) || !colors.length) {
-        colors = CHART_PALETTE;
+        colors = YUI_UPLOT_PALETTE;
     }
     /*  `idx` counts uPlot's series, and series[0] is the X AXIS -- so
      *  the first line drawn was taking colours[1] and the palette's

package/src/uplot_ink.test.js

@@ -0,0 +1,105 @@
+/***********************************************************************
+ *          uplot_ink.test.js
+ *
+ *      The axes of a chart carry the ink of the theme -- the Y axis
+ *      too. uPlot always draws one (its setDefaults() makes axes[1]
+ *      whether it was given or not, with its own black), and
+ *      C_YUI_UPLOT inked only the axes it was handed: by default one,
+ *      the X. In the dark scheme the values of every Y axis of the
+ *      library were black on near-black (a user's report, the cards of
+ *      estadodelaire).
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach, afterEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+/*  What C_YUI_UPLOT hands to uPlot, kept by the stand-in.  */
+let given = null;
+vi.mock("uplot", () => ({
+    default: class {
+        constructor(opts) {
+            given = opts;
+            this.series = [{}];
+        }
+        setSize() {}
+        addSeries() {}
+        redraw() {}
+        destroy() {}
+    }
+}));
+
+const {
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child, gclass_create,
+    set_log_callback, SDATA_END,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_uplot} = await import("./c_yui_uplot.js");
+const {
+    yui_uplot_axes, yui_uplot_axis_ink, yui_uplot_grid_ink,
+} = await import("./yui_uplot_ink.js");
+
+const logged = [];
+let yuno = null;
+
+beforeAll(() => {
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback((level, msg) => {
+        logged.push({level: String(level), msg: String(msg)});
+    });
+    gclass_create("C_TEST_INK_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    register_c_yui_uplot();
+    yuno = gobj_create_yuno("ink_yuno", "C_TEST_INK_HOST", {});
+});
+
+beforeEach(() => {
+    logged.length = 0;
+    given = null;
+});
+
+afterEach(() => {
+    document.documentElement.removeAttribute("data-theme");
+});
+
+describe("yui_uplot_axes()", () => {
+    test("gives the X and the Y axes, the two uPlot draws", () => {
+        expect(yui_uplot_axes([{}]).length).toBe(2);
+        expect(yui_uplot_axes(undefined).length).toBe(2);
+        expect(yui_uplot_axes([]).length).toBe(2);
+        expect(yui_uplot_axes([{}, {}, {scale: "%"}]).length).toBe(3);
+    });
+
+    test("inks each one with the theme, read when uPlot draws", () => {
+        const axes = yui_uplot_axes([{}]);
+        for(const a of axes) {
+            expect(a.stroke).toBe(yui_uplot_axis_ink);
+            expect(a.grid.stroke).toBe(yui_uplot_grid_ink);
+            expect(a.ticks.stroke).toBe(yui_uplot_grid_ink);
+        }
+        document.documentElement.setAttribute("data-theme", "light");
+        expect(axes[1].stroke()).toBe("#2e333d");
+        document.documentElement.setAttribute("data-theme", "dark");
+        expect(axes[1].stroke()).toBe("#c7cdd8");
+    });
+
+    test("keeps what the host gave, and does not touch its objects", () => {
+        const mine = [{stroke: "red", grid: {show: false}}];
+        const axes = yui_uplot_axes(mine);
+        expect(axes[0].stroke).toBe("red");
+        expect(axes[0].grid).toEqual({stroke: yui_uplot_grid_ink, show: false});
+        expect(mine).toEqual([{stroke: "red", grid: {show: false}}]);
+    });
+});
+
+describe("C_YUI_UPLOT", () => {
+    test("hands uPlot a Y axis with the ink of the theme", () => {
+        gobj_create_pure_child("ink_chart", "C_YUI_UPLOT", {}, yuno);
+        expect(given).toBeTruthy();
+        expect(given.axes.length).toBe(2);
+        expect(given.axes[1].stroke).toBe(yui_uplot_axis_ink);
+        expect(given.axes[1].grid.stroke).toBe(yui_uplot_grid_ink);
+        expect(logged.filter((l) => /error/i.test(l.level))).toEqual([]);
+    });
+});

package/src/yui_uplot_ink.js

@@ -0,0 +1,94 @@
+/***********************************************************************
+ *          yui_uplot_ink.js
+ *
+ *      The ink of a uPlot chart, on both schemes, and its palette.
+ *
+ *      uPlot is built for a white page: its axis labels are `#000`
+ *      and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+ *      1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+ *      not there. The inks here are handed to uPlot as FUNCTIONS: it
+ *      calls them when it draws, so the value can never be stale --
+ *      what goes stale is the canvas, and a change of the theme has to
+ *      ask for a redraw (yui_watch_theme() turns it into an event).
+ *
+ *      uPlot ALWAYS draws a Y axis: its setDefaults() makes axes[1]
+ *      whether it was given or not, with its own black. So the axes are
+ *      padded to two before they are inked. C_YUI_UPLOT's default is
+ *      `[{}]`, the X axis alone, and until 7.26.40 every chart of the
+ *      library had a Y axis whose values could not be read in the dark.
+ *
+ *      C_YUI_UPLOT uses it, and so can an app that builds a uPlot of its
+ *      own:
+ *
+ *          import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+ *
+ *          const chart = new uPlot({
+ *              width: 600, height: 300,
+ *              series: [{}, {label: "temperature"}],
+ *              axes: yui_uplot_axes([{}]),     // X and Y, with the ink of the theme
+ *          }, data, $el);
+ *
+ *      The palette is six colours that clear 3:1 on BOTH grounds
+ *      (worst 3.39 on white, 3.71 on near-black), ordered so the first
+ *      two are the pair that survives colour blindness -- blue and
+ *      orange, never red and green as the opening pair.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {yui_is_dark} from "./yui_theme.js";
+
+/************************************************************
+ *  The ink of the labels of an axis.
+ ************************************************************/
+function yui_uplot_axis_ink()
+{
+    return yui_is_dark()? "#c7cdd8" : "#2e333d";
+}
+
+/************************************************************
+ *  The ink of the grid and of the ticks.
+ ************************************************************/
+function yui_uplot_grid_ink()
+{
+    return yui_is_dark()? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+
+const YUI_UPLOT_PALETTE = [
+    {stroke: "#2f6fd0", fill: "rgba(47,111,208,0.10)"},     /*  4.88 / 3.71  */
+    {stroke: "#b8620a", fill: "rgba(184,98,10,0.10)"},      /*  4.38 / 4.13  */
+    {stroke: "#2f8f4e", fill: "rgba(47,143,78,0.10)"},      /*  4.07 / 4.45  */
+    {stroke: "#8b5cf6", fill: "rgba(139,92,246,0.10)"},     /*  4.23 / 4.28  */
+    {stroke: "#0e9aa7", fill: "rgba(14,154,167,0.10)"},     /*  3.39 / 5.35  */
+    {stroke: "#d1344b", fill: "rgba(209,52,75,0.10)"},      /*  4.88 / 3.71  */
+];
+
+/************************************************************
+ *  The axes the host asked for -- at least the X and the Y,
+ *  the two uPlot always draws -- with the ink it did not ask
+ *  about. A stroke, a grid or a ticks the host gave is kept.
+ *  Answers new objects: the host's are not touched.
+ ************************************************************/
+function yui_uplot_axes(axes)
+{
+    let list = Array.isArray(axes)? axes.slice() : [axes || {}];
+    while(list.length < 2) {
+        list.push({});
+    }
+    return list.map((ax) => {
+        let a = Object.assign({}, ax || {});
+        if(a.stroke === undefined) {
+            a.stroke = yui_uplot_axis_ink;
+        }
+        a.grid = Object.assign({stroke: yui_uplot_grid_ink}, a.grid || {});
+        a.ticks = Object.assign({stroke: yui_uplot_grid_ink}, a.ticks || {});
+        return a;
+    });
+}
+
+export {
+    yui_uplot_axes,
+    yui_uplot_axis_ink,
+    yui_uplot_grid_ink,
+    YUI_UPLOT_PALETTE,
+};