@yuneta/gobj-ui 7.23.89 → 7.23.91

package/dist/gobj-ui.cjs.js

@@ -54572,8 +54572,16 @@ ensure_pinch_zoom_patch();
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$4 = "C_G6_NODES_TREE";
-var HIGHLIGHT_COLOR = "#f0a020";
-var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
+var HIGHLIGHT_COLOR_DARK = "#f0a020";
+var HIGHLIGHT_COLOR_LIGHT = "#b45309";
+var HIGHLIGHT_HALO_DARK = "rgba(240,160,32,0.35)";
+var HIGHLIGHT_HALO_LIGHT = "rgba(180,83,9,0.35)";
+function highlight_color(theme) {
+	return theme === "dark" ? HIGHLIGHT_COLOR_DARK : HIGHLIGHT_COLOR_LIGHT;
+}
+function highlight_halo(theme) {
+	return theme === "dark" ? HIGHLIGHT_HALO_DARK : HIGHLIGHT_HALO_LIGHT;
+}
 var SELECT_RING = "rgba(59,130,246,0.95)";
 var PORT_R_ENTITY = 14;
 var PORT_R_CHILD = 8;
@@ -55491,6 +55499,53 @@ function calculate_hooks_fkeys_counter(desc) {
 /************************************************************
 *  Build ports for a topic desc
 ************************************************************/
+/************************************************************
+*  Mix two colours the way `color-mix(in srgb, a p%, b)` does,
+*  in JS.
+*
+*  The cards are html and can say `color-mix()`; a PORT is drawn
+*  on the canvas by `@antv/g`, which parses a colour string and
+*  knows nothing about CSS functions -- so the same arithmetic
+*  has to happen here.
+************************************************************/
+function mix_colors(a, p, b) {
+	let rgb = (c) => {
+		if (c.charAt(0) === "#") {
+			let h = c.slice(1);
+			if (h.length === 3) h = h.split("").map((x) => x + x).join("");
+			return [
+				0,
+				2,
+				4
+			].map((i) => parseInt(h.slice(i, i + 2), 16));
+		}
+		return (c.match(/[\d.]+/g) || []).map(Number).slice(0, 3);
+	};
+	let A = rgb(a);
+	let B = rgb(b);
+	return `rgb(${A.map((v, i) => Math.round(v * p + B[i] * (1 - p))).join(",")})`;
+}
+/************************************************************
+*  The rim of a port.
+*
+*  A port is a knob half on a CARD and half on the canvas, and
+*  the card is a tint of a topic colour -- so a port of that
+*  same topic used to sit on its own colour: 2.62:1 against the
+*  card in dark, 1.54 in light, where a graphical object needs
+*  3:1 to be told from what is next to it. The FILL keeps saying
+*  which topic links there; the rim is what separates it, and it
+*  is the port's own colour pushed towards the surface -- 60% of
+*  the hue is enough to clear 3:1 on both grounds in both
+*  themes (4.49 / 3.64 against the card, 9.11 / 3.80 against the
+*  canvas) and little enough to keep the hue.
+*
+*  It used to be `getStrokeColor(color)` called with no theme,
+*  which is its LIGHT branch always: a rim darkened by 20% of a
+*  colour, on a card of the same colour.
+************************************************************/
+function port_rim(color, theme) {
+	return mix_colors(color, .6, theme === "dark" ? "#ffffff" : "#0f172a");
+}
 function build_ports(gobj, desc) {
 	let priv = gobj.priv;
 	let top_ports = [];
@@ -55509,7 +55564,7 @@ function build_ports(gobj, desc) {
 					port = {
 						key: col.id,
 						fill: child_desc ? child_desc.color : desc.color,
-						stroke: getStrokeColor(desc.color)
+						stroke: port_rim(child_desc ? child_desc.color : desc.color, priv.theme)
 					};
 					bottom_ports.push(port);
 				}
@@ -55518,7 +55573,7 @@ function build_ports(gobj, desc) {
 				port = {
 					key: col.id,
 					fill: desc.color,
-					stroke: getStrokeColor(desc.color)
+					stroke: port_rim(desc.color, priv.theme)
 				};
 				top_ports.push(port);
 		}
@@ -55879,7 +55934,8 @@ function node_figure_of(gobj, desc, geometry) {
 *      flags   {highlight, selected, anchored}
 ************************************************************/
 function figure_shape_of(gobj, desc, record, geometry, flags) {
-	let dark = gobj.priv.theme === "dark";
+	let priv = gobj.priv;
+	let dark = priv.theme === "dark";
 	let f = flags || {};
 	let tier = desc.node_treedb_type;
 	let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
@@ -55893,7 +55949,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 		line_width = 3;
 	}
 	if (f.highlight) {
-		stroke = HIGHLIGHT_COLOR;
+		stroke = highlight_color(priv.theme);
 		line_width = 3;
 	}
 	let dash = [];
@@ -55910,7 +55966,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 		lineWidth: line_width,
 		lineDash: dash,
 		halo: !!f.highlight,
-		haloStroke: HIGHLIGHT_HALO,
+		haloStroke: highlight_halo(priv.theme),
 		haloLineWidth: 8,
 		port: false,
 		ports: [],
@@ -58920,7 +58976,7 @@ function auto_layout(gobj) {
 *  Its shapes are drawn by hand. G6's minimap clones each element's key
 *  shape into its own canvas, and every node here is an `html` node
 *  whose key shape is a DOM element — the same reason the `active`
-*  state never painted (see HIGHLIGHT_COLOR). A block in the topic's
+*  state never painted (see highlight_color()). A block in the topic's
 *  colour is also what a minimap of cards SHOULD show: at that scale a
 *  card is a rectangle anyway.
 ************************************************************/
@@ -59143,9 +59199,9 @@ function refresh_default_edges_theme(gobj, theme) {
 function anchor_outline(anchored) {
 	return anchored ? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
 }
-function ring_shadow(highlight, selected, base_shadow) {
+function ring_shadow(highlight, selected, base_shadow, theme) {
 	let rings = [];
-	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+	if (highlight) rings.push(`0 0 0 4px ${highlight_halo(theme)}`);
 	if (selected) rings.push(`0 0 0 ${highlight ? "7px" : "3px"} ${SELECT_RING}`);
 	if (base_shadow) rings.push(base_shadow);
 	if (!rings.length) return "";
@@ -59160,10 +59216,10 @@ function ring_shadow(highlight, selected, base_shadow) {
 function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected, anchored) {
 	let title = key || label;
 	let dark = theme === "dark";
-	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
+	let bg = dark ? `color-mix(in srgb, ${color} 25%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
 	let border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 	let text_color = dark ? "#e8eaed" : "#0f172a";
-	if (highlight) border = HIGHLIGHT_COLOR;
+	if (highlight) border = highlight_color(theme);
 	let icon_html = "";
 	if (icon) icon_html = `<img src="${(0, _yuneta_gobj_js.safeSrc)(icon)}" alt="" style="
         width: 16px; height: 16px; object-fit: contain;
@@ -59176,7 +59232,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
-    ${ring_shadow(highlight, selected, "")}
+    ${ring_shadow(highlight, selected, "", theme)}
     ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
@@ -59213,16 +59269,16 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		border = dark ? "#7c8694" : "#94a3b8";
 		border_style = "dashed";
 	} else {
-		bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${surface})`;
+		bg = dark ? `color-mix(in srgb, ${color} 25%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${surface})`;
 		border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 		border_style = "solid";
 	}
 	if (highlight) {
-		border = HIGHLIGHT_COLOR;
+		border = highlight_color(theme);
 		border_style = "solid";
 	}
 	let title_color = dark ? "#e8eaed" : "#0f172a";
-	let sub_color = dark ? "#9aa4b2" : "#64748b";
+	let sub_color = dark ? "#ccd3dd" : "#556173";
 	let shadow = dark ? "0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30)" : "0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06)";
 	let icon_html = "";
 	if (icon) icon_html = `
@@ -59251,7 +59307,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    ${ring_shadow(highlight, selected, shadow)}
+    ${ring_shadow(highlight, selected, shadow, theme)}
     ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -60054,7 +60110,7 @@ function pill_colors(color, theme) {
 	let dark = theme === "dark";
 	return {
 		bg: dark ? `color-mix(in srgb, ${color} 45%, #1b2230)` : `color-mix(in srgb, ${color} 22%, #ffffff)`,
-		fg: dark ? `color-mix(in srgb, ${color} 35%, #ffffff)` : `color-mix(in srgb, ${color} 55%, #0f172a)`,
+		fg: dark ? `color-mix(in srgb, ${color} 25%, #ffffff)` : `color-mix(in srgb, ${color} 45%, #0f172a)`,
 		border: dark ? `color-mix(in srgb, ${color} 80%, #ffffff)` : color
 	};
 }
@@ -60077,7 +60133,7 @@ function build_pill_html(pill, color, theme) {
         font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis;
         cursor: pointer; user-select: none;
-    "><span style="font-size: 9px;">${glyph}</span>${(0, _yuneta_gobj_js.escapeHtml)(pill.hook)}<span style="opacity: .75; font-weight: 600;">${count}</span></span>`;
+    "><span style="font-size: 9px;">${glyph}</span>${(0, _yuneta_gobj_js.escapeHtml)(pill.hook)}<span style="font-weight: 600;">${count}</span></span>`;
 }
 /************************************************************
 *  The pill row of one node, as html; "" when it has nothing to
@@ -60392,7 +60448,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 					sourcePort: p.hook,
 					lineWidth: 1,
 					lineDash: [4, 3],
-					stroke: dark ? "#8b94a3" : "#94a3b8",
+					stroke: dark ? "#8b94a3" : "#6b7280",
 					startArrow: false,
 					endArrow: false
 				},
@@ -60459,6 +60515,31 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The rims of every port, on a theme change.
+*
+*  A rim is half of the surface it sits on (see port_rim), so it
+*  belongs to the theme -- and it lives in each node's
+*  `style.ports`, which is the one place refresh_html_nodes_theme()
+*  does not reach: it rebuilds the html INSIDE a card.
+************************************************************/
+function refresh_port_rims(gobj, theme) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	let updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		if (!nd || !nd.style || !(0, _yuneta_gobj_js.is_array)(nd.style.ports) || !nd.style.ports.length) continue;
+		updates.push({
+			id: nd.id,
+			style: { ports: nd.style.ports.map((p) => Object.assign({}, p, { stroke: port_rim(p.fill, theme) })) }
+		});
+	}
+	if (updates.length) try {
+		graph.updateNodeData(updates);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot repaint the port rims: ${e}`);
+	}
+}
+/************************************************************
 *  Repaint the `+N` chips (theme or language changed).
 ************************************************************/
 function repaint_more_chips(gobj) {
@@ -60780,6 +60861,7 @@ function ac_theme$1(gobj, event, kw, src) {
 	});
 	refresh_html_nodes_theme(gobj, theme);
 	refresh_default_edges_theme(gobj, theme);
+	refresh_port_rims(gobj, theme);
 	repaint_more_chips(gobj);
 	graph_draw(gobj).then(() => {
 		update_history_buttons(gobj);

package/dist/gobj-ui.es.js

@@ -54567,8 +54567,16 @@ ensure_pinch_zoom_patch();
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$4 = "C_G6_NODES_TREE";
-var HIGHLIGHT_COLOR = "#f0a020";
-var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
+var HIGHLIGHT_COLOR_DARK = "#f0a020";
+var HIGHLIGHT_COLOR_LIGHT = "#b45309";
+var HIGHLIGHT_HALO_DARK = "rgba(240,160,32,0.35)";
+var HIGHLIGHT_HALO_LIGHT = "rgba(180,83,9,0.35)";
+function highlight_color(theme) {
+	return theme === "dark" ? HIGHLIGHT_COLOR_DARK : HIGHLIGHT_COLOR_LIGHT;
+}
+function highlight_halo(theme) {
+	return theme === "dark" ? HIGHLIGHT_HALO_DARK : HIGHLIGHT_HALO_LIGHT;
+}
 var SELECT_RING = "rgba(59,130,246,0.95)";
 var PORT_R_ENTITY = 14;
 var PORT_R_CHILD = 8;
@@ -55486,6 +55494,53 @@ function calculate_hooks_fkeys_counter(desc) {
 /************************************************************
 *  Build ports for a topic desc
 ************************************************************/
+/************************************************************
+*  Mix two colours the way `color-mix(in srgb, a p%, b)` does,
+*  in JS.
+*
+*  The cards are html and can say `color-mix()`; a PORT is drawn
+*  on the canvas by `@antv/g`, which parses a colour string and
+*  knows nothing about CSS functions -- so the same arithmetic
+*  has to happen here.
+************************************************************/
+function mix_colors(a, p, b) {
+	let rgb = (c) => {
+		if (c.charAt(0) === "#") {
+			let h = c.slice(1);
+			if (h.length === 3) h = h.split("").map((x) => x + x).join("");
+			return [
+				0,
+				2,
+				4
+			].map((i) => parseInt(h.slice(i, i + 2), 16));
+		}
+		return (c.match(/[\d.]+/g) || []).map(Number).slice(0, 3);
+	};
+	let A = rgb(a);
+	let B = rgb(b);
+	return `rgb(${A.map((v, i) => Math.round(v * p + B[i] * (1 - p))).join(",")})`;
+}
+/************************************************************
+*  The rim of a port.
+*
+*  A port is a knob half on a CARD and half on the canvas, and
+*  the card is a tint of a topic colour -- so a port of that
+*  same topic used to sit on its own colour: 2.62:1 against the
+*  card in dark, 1.54 in light, where a graphical object needs
+*  3:1 to be told from what is next to it. The FILL keeps saying
+*  which topic links there; the rim is what separates it, and it
+*  is the port's own colour pushed towards the surface -- 60% of
+*  the hue is enough to clear 3:1 on both grounds in both
+*  themes (4.49 / 3.64 against the card, 9.11 / 3.80 against the
+*  canvas) and little enough to keep the hue.
+*
+*  It used to be `getStrokeColor(color)` called with no theme,
+*  which is its LIGHT branch always: a rim darkened by 20% of a
+*  colour, on a card of the same colour.
+************************************************************/
+function port_rim(color, theme) {
+	return mix_colors(color, .6, theme === "dark" ? "#ffffff" : "#0f172a");
+}
 function build_ports(gobj, desc) {
 	let priv = gobj.priv;
 	let top_ports = [];
@@ -55504,7 +55559,7 @@ function build_ports(gobj, desc) {
 					port = {
 						key: col.id,
 						fill: child_desc ? child_desc.color : desc.color,
-						stroke: getStrokeColor(desc.color)
+						stroke: port_rim(child_desc ? child_desc.color : desc.color, priv.theme)
 					};
 					bottom_ports.push(port);
 				}
@@ -55513,7 +55568,7 @@ function build_ports(gobj, desc) {
 				port = {
 					key: col.id,
 					fill: desc.color,
-					stroke: getStrokeColor(desc.color)
+					stroke: port_rim(desc.color, priv.theme)
 				};
 				top_ports.push(port);
 		}
@@ -55874,7 +55929,8 @@ function node_figure_of(gobj, desc, geometry) {
 *      flags   {highlight, selected, anchored}
 ************************************************************/
 function figure_shape_of(gobj, desc, record, geometry, flags) {
-	let dark = gobj.priv.theme === "dark";
+	let priv = gobj.priv;
+	let dark = priv.theme === "dark";
 	let f = flags || {};
 	let tier = desc.node_treedb_type;
 	let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
@@ -55888,7 +55944,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 		line_width = 3;
 	}
 	if (f.highlight) {
-		stroke = HIGHLIGHT_COLOR;
+		stroke = highlight_color(priv.theme);
 		line_width = 3;
 	}
 	let dash = [];
@@ -55905,7 +55961,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 		lineWidth: line_width,
 		lineDash: dash,
 		halo: !!f.highlight,
-		haloStroke: HIGHLIGHT_HALO,
+		haloStroke: highlight_halo(priv.theme),
 		haloLineWidth: 8,
 		port: false,
 		ports: [],
@@ -58915,7 +58971,7 @@ function auto_layout(gobj) {
 *  Its shapes are drawn by hand. G6's minimap clones each element's key
 *  shape into its own canvas, and every node here is an `html` node
 *  whose key shape is a DOM element — the same reason the `active`
-*  state never painted (see HIGHLIGHT_COLOR). A block in the topic's
+*  state never painted (see highlight_color()). A block in the topic's
 *  colour is also what a minimap of cards SHOULD show: at that scale a
 *  card is a rectangle anyway.
 ************************************************************/
@@ -59138,9 +59194,9 @@ function refresh_default_edges_theme(gobj, theme) {
 function anchor_outline(anchored) {
 	return anchored ? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
 }
-function ring_shadow(highlight, selected, base_shadow) {
+function ring_shadow(highlight, selected, base_shadow, theme) {
 	let rings = [];
-	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+	if (highlight) rings.push(`0 0 0 4px ${highlight_halo(theme)}`);
 	if (selected) rings.push(`0 0 0 ${highlight ? "7px" : "3px"} ${SELECT_RING}`);
 	if (base_shadow) rings.push(base_shadow);
 	if (!rings.length) return "";
@@ -59155,10 +59211,10 @@ function ring_shadow(highlight, selected, base_shadow) {
 function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected, anchored) {
 	let title = key || label;
 	let dark = theme === "dark";
-	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
+	let bg = dark ? `color-mix(in srgb, ${color} 25%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
 	let border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 	let text_color = dark ? "#e8eaed" : "#0f172a";
-	if (highlight) border = HIGHLIGHT_COLOR;
+	if (highlight) border = highlight_color(theme);
 	let icon_html = "";
 	if (icon) icon_html = `<img src="${safeSrc(icon)}" alt="" style="
         width: 16px; height: 16px; object-fit: contain;
@@ -59171,7 +59227,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
-    ${ring_shadow(highlight, selected, "")}
+    ${ring_shadow(highlight, selected, "", theme)}
     ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
@@ -59208,16 +59264,16 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		border = dark ? "#7c8694" : "#94a3b8";
 		border_style = "dashed";
 	} else {
-		bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${surface})`;
+		bg = dark ? `color-mix(in srgb, ${color} 25%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${surface})`;
 		border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 		border_style = "solid";
 	}
 	if (highlight) {
-		border = HIGHLIGHT_COLOR;
+		border = highlight_color(theme);
 		border_style = "solid";
 	}
 	let title_color = dark ? "#e8eaed" : "#0f172a";
-	let sub_color = dark ? "#9aa4b2" : "#64748b";
+	let sub_color = dark ? "#ccd3dd" : "#556173";
 	let shadow = dark ? "0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30)" : "0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06)";
 	let icon_html = "";
 	if (icon) icon_html = `
@@ -59246,7 +59302,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    ${ring_shadow(highlight, selected, shadow)}
+    ${ring_shadow(highlight, selected, shadow, theme)}
     ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -60049,7 +60105,7 @@ function pill_colors(color, theme) {
 	let dark = theme === "dark";
 	return {
 		bg: dark ? `color-mix(in srgb, ${color} 45%, #1b2230)` : `color-mix(in srgb, ${color} 22%, #ffffff)`,
-		fg: dark ? `color-mix(in srgb, ${color} 35%, #ffffff)` : `color-mix(in srgb, ${color} 55%, #0f172a)`,
+		fg: dark ? `color-mix(in srgb, ${color} 25%, #ffffff)` : `color-mix(in srgb, ${color} 45%, #0f172a)`,
 		border: dark ? `color-mix(in srgb, ${color} 80%, #ffffff)` : color
 	};
 }
@@ -60072,7 +60128,7 @@ function build_pill_html(pill, color, theme) {
         font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis;
         cursor: pointer; user-select: none;
-    "><span style="font-size: 9px;">${glyph}</span>${escapeHtml(pill.hook)}<span style="opacity: .75; font-weight: 600;">${count}</span></span>`;
+    "><span style="font-size: 9px;">${glyph}</span>${escapeHtml(pill.hook)}<span style="font-weight: 600;">${count}</span></span>`;
 }
 /************************************************************
 *  The pill row of one node, as html; "" when it has nothing to
@@ -60387,7 +60443,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 					sourcePort: p.hook,
 					lineWidth: 1,
 					lineDash: [4, 3],
-					stroke: dark ? "#8b94a3" : "#94a3b8",
+					stroke: dark ? "#8b94a3" : "#6b7280",
 					startArrow: false,
 					endArrow: false
 				},
@@ -60454,6 +60510,31 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The rims of every port, on a theme change.
+*
+*  A rim is half of the surface it sits on (see port_rim), so it
+*  belongs to the theme -- and it lives in each node's
+*  `style.ports`, which is the one place refresh_html_nodes_theme()
+*  does not reach: it rebuilds the html INSIDE a card.
+************************************************************/
+function refresh_port_rims(gobj, theme) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	let updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		if (!nd || !nd.style || !is_array(nd.style.ports) || !nd.style.ports.length) continue;
+		updates.push({
+			id: nd.id,
+			style: { ports: nd.style.ports.map((p) => Object.assign({}, p, { stroke: port_rim(p.fill, theme) })) }
+		});
+	}
+	if (updates.length) try {
+		graph.updateNodeData(updates);
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot repaint the port rims: ${e}`);
+	}
+}
+/************************************************************
 *  Repaint the `+N` chips (theme or language changed).
 ************************************************************/
 function repaint_more_chips(gobj) {
@@ -60775,6 +60856,7 @@ function ac_theme$1(gobj, event, kw, src) {
 	});
 	refresh_html_nodes_theme(gobj, theme);
 	refresh_default_edges_theme(gobj, theme);
+	refresh_port_rims(gobj, theme);
 	repaint_more_chips(gobj);
 	graph_draw(gobj).then(() => {
 		update_history_buttons(gobj);

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -240,8 +240,27 @@ const GCLASS_NAME = "C_G6_NODES_TREE";
  *  is an `html` node, whose key shape is a DOM element — the state's
  *  `stroke` / `halo` have nothing to paint on and the amber never
  *  appeared, for the topic focus either.  */
-const HIGHLIGHT_COLOR = "#f0a020";
-const HIGHLIGHT_HALO  = "rgba(240,160,32,0.35)";
+/*  The mark of a focused topic and of a find: one amber for a
+ *  near-black canvas (8.41:1) which on a WHITE one is 2.15 -- under
+ *  the 3:1 a graphical mark needs, and this one is the whole answer
+ *  to "which nodes matched". The light scheme takes the same hue
+ *  burnt down (5.02:1); the halo follows it at the same alpha. Same
+ *  rule as a brand colour used as ink: the colour that carries a
+ *  mark is not one colour, it is one per scheme.  */
+const HIGHLIGHT_COLOR_DARK  = "#f0a020";
+const HIGHLIGHT_COLOR_LIGHT = "#b45309";
+const HIGHLIGHT_HALO_DARK   = "rgba(240,160,32,0.35)";
+const HIGHLIGHT_HALO_LIGHT  = "rgba(180,83,9,0.35)";
+
+function highlight_color(theme)
+{
+    return (theme === "dark")? HIGHLIGHT_COLOR_DARK : HIGHLIGHT_COLOR_LIGHT;
+}
+
+function highlight_halo(theme)
+{
+    return (theme === "dark")? HIGHLIGHT_HALO_DARK : HIGHLIGHT_HALO_LIGHT;
+}
 
 /*
  *  The selection ring. Deliberately NOT the amber of the highlight:
@@ -1807,6 +1826,56 @@ function calculate_hooks_fkeys_counter(desc)
 /************************************************************
  *  Build ports for a topic desc
  ************************************************************/
+/************************************************************
+ *  Mix two colours the way `color-mix(in srgb, a p%, b)` does,
+ *  in JS.
+ *
+ *  The cards are html and can say `color-mix()`; a PORT is drawn
+ *  on the canvas by `@antv/g`, which parses a colour string and
+ *  knows nothing about CSS functions -- so the same arithmetic
+ *  has to happen here.
+ ************************************************************/
+function mix_colors(a, p, b)
+{
+    let rgb = (c) => {
+        if(c.charAt(0) === "#") {
+            let h = c.slice(1);
+            if(h.length === 3) {
+                h = h.split("").map((x) => x + x).join("");
+            }
+            return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+        }
+        let n = (c.match(/[\d.]+/g) || []).map(Number);
+        return n.slice(0, 3);
+    };
+    let A = rgb(a);
+    let B = rgb(b);
+    return `rgb(${A.map((v, i) => Math.round(v * p + B[i] * (1 - p))).join(",")})`;
+}
+
+/************************************************************
+ *  The rim of a port.
+ *
+ *  A port is a knob half on a CARD and half on the canvas, and
+ *  the card is a tint of a topic colour -- so a port of that
+ *  same topic used to sit on its own colour: 2.62:1 against the
+ *  card in dark, 1.54 in light, where a graphical object needs
+ *  3:1 to be told from what is next to it. The FILL keeps saying
+ *  which topic links there; the rim is what separates it, and it
+ *  is the port's own colour pushed towards the surface -- 60% of
+ *  the hue is enough to clear 3:1 on both grounds in both
+ *  themes (4.49 / 3.64 against the card, 9.11 / 3.80 against the
+ *  canvas) and little enough to keep the hue.
+ *
+ *  It used to be `getStrokeColor(color)` called with no theme,
+ *  which is its LIGHT branch always: a rim darkened by 20% of a
+ *  colour, on a card of the same colour.
+ ************************************************************/
+function port_rim(color, theme)
+{
+    return mix_colors(color, 0.6, (theme === "dark")? "#ffffff" : "#0f172a");
+}
+
 function build_ports(gobj, desc)
 {
     let priv = gobj.priv;
@@ -1833,7 +1902,7 @@ function build_ports(gobj, desc)
                     port = {
                         key: col.id,
                         fill: child_desc?child_desc.color:desc.color,
-                        stroke: getStrokeColor(desc.color),
+                        stroke: port_rim(child_desc?child_desc.color:desc.color, priv.theme),
                     };
                     bottom_ports.push(port);
                 }
@@ -1844,7 +1913,7 @@ function build_ports(gobj, desc)
                 port = {
                     key: col.id,
                     fill: desc.color,
-                    stroke: getStrokeColor(desc.color),
+                    stroke: port_rim(desc.color, priv.theme),
                 };
                 top_ports.push(port);
                 break;
@@ -2374,7 +2443,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
         line_width = 3;
     }
     if(f.highlight) {
-        stroke = HIGHLIGHT_COLOR;
+        stroke = highlight_color(priv.theme);
         line_width = 3;
     }
     /*  Dashed says "structural", as the extended card does; the
@@ -2396,7 +2465,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
         lineWidth: line_width,
         lineDash: dash,
         halo: !!f.highlight,
-        haloStroke: HIGHLIGHT_HALO,
+        haloStroke: highlight_halo(priv.theme),
         haloLineWidth: 8,
         port: false,
         ports: [],
@@ -6854,7 +6923,7 @@ function auto_layout(gobj)
  *  Its shapes are drawn by hand. G6's minimap clones each element's key
  *  shape into its own canvas, and every node here is an `html` node
  *  whose key shape is a DOM element — the same reason the `active`
- *  state never painted (see HIGHLIGHT_COLOR). A block in the topic's
+ *  state never painted (see highlight_color()). A block in the topic's
  *  colour is also what a minimap of cards SHOULD show: at that scale a
  *  card is a rectangle anyway.
  ************************************************************/
@@ -7194,12 +7263,12 @@ function anchor_outline(anchored)
     return anchored? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
 }
 
-function ring_shadow(highlight, selected, base_shadow)
+function ring_shadow(highlight, selected, base_shadow, theme)
 {
     let rings = [];
 
     if(highlight) {
-        rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+        rings.push(`0 0 0 4px ${highlight_halo(theme)}`);
     }
     if(selected) {
         rings.push(`0 0 0 ${highlight? "7px" : "3px"} ${SELECT_RING}`);
@@ -7225,15 +7294,18 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
     let title = key || label;
     let dark = (theme === "dark");
     let surface = dark ? "#1b2230" : "#ffffff";
+    /*  The same 25% as the card (build_node_innerHTML): a leaf chip and
+     *  the card it hangs from are side by side, and two tints of one
+     *  colour read as two topics.  */
     let bg = dark
-        ? `color-mix(in srgb, ${color} 30%, #2c3542)`
+        ? `color-mix(in srgb, ${color} 25%, #2c3542)`
         : `color-mix(in srgb, ${color} 10%, ${surface})`;
     let border = dark
         ? `color-mix(in srgb, ${color} 85%, #ffffff)`
         : color;
     let text_color = dark ? "#e8eaed" : "#0f172a";
     if(highlight) {
-        border = HIGHLIGHT_COLOR;
+        border = highlight_color(theme);
     }
 
     let icon_html = "";
@@ -7251,7 +7323,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
     height: 100%;
     background: ${bg};
     border: ${highlight? "3px" : "1px"} solid ${border};
-    ${ring_shadow(highlight, selected, "")}
+    ${ring_shadow(highlight, selected, "", theme)}
     ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
@@ -7297,8 +7369,14 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         // On dark, lift the card off the (near-black) canvas with a
         // clearly-lighter slate base + a vivid border, or the cards
         // become invisible.
+        /*  25% and not 30% in dark: the tint is what says WHICH topic
+         *  a card belongs to, and it is also the ground everything on
+         *  the card is written on. At 30% the yellow of the palette
+         *  left the record's name at 5.17:1 and the topic under it at
+         *  2.47 -- unreadable at 11px. Five points of tint buy the
+         *  name 5.80 and cost the colour almost nothing.  */
         bg = dark
-            ? `color-mix(in srgb, ${color} 30%, #2c3542)`
+            ? `color-mix(in srgb, ${color} 25%, #2c3542)`
             : `color-mix(in srgb, ${color} 10%, ${surface})`;
         border = dark
             ? `color-mix(in srgb, ${color} 85%, #ffffff)`
@@ -7306,11 +7384,16 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         border_style = "solid";
     }
     if(highlight) {
-        border = HIGHLIGHT_COLOR;
+        border = highlight_color(theme);
         border_style = "solid";
     }
     let title_color = dark ? "#e8eaed" : "#0f172a";
-    let sub_color = dark ? "#9aa4b2" : "#64748b";
+    /*  The topic name under the record's, at 11px, so it needs the
+     *  4.5:1 of small text on the WORST tint of the palette: the old
+     *  greys gave 2.47 in dark and 4.28 in light. These give 4.64 and
+     *  5.65, and the hierarchy stays where it belongs -- in the size
+     *  and the weight, not in a grey nobody can read.  */
+    let sub_color = dark ? "#ccd3dd" : "#556173";
     let shadow = dark
         ? "0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30)"
         : "0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06)";
@@ -7354,7 +7437,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    ${ring_shadow(highlight, selected, shadow)}
+    ${ring_shadow(highlight, selected, shadow, theme)}
     ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -8605,9 +8688,14 @@ function pill_colors(color, theme)
         bg: dark
             ? `color-mix(in srgb, ${color} 45%, #1b2230)`
             : `color-mix(in srgb, ${color} 22%, #ffffff)`,
+        /*  The INK of a pill, a leaf chip and a `+N`: it carries the
+         *  topic's hue, and it is 10-12px text on the same hue. At
+         *  35/55 the palette's yellow read 4.36 in dark and 3.89 in
+         *  light; at 25/45 the worst of the seven is 4.57 and 5.07,
+         *  and the hue is still plainly there.  */
         fg: dark
-            ? `color-mix(in srgb, ${color} 35%, #ffffff)`
-            : `color-mix(in srgb, ${color} 55%, #0f172a)`,
+            ? `color-mix(in srgb, ${color} 25%, #ffffff)`
+            : `color-mix(in srgb, ${color} 45%, #0f172a)`,
         border: dark
             ? `color-mix(in srgb, ${color} 80%, #ffffff)`
             : color,
@@ -8637,7 +8725,7 @@ function build_pill_html(pill, color, theme)
         font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis;
         cursor: pointer; user-select: none;
-    "><span style="font-size: 9px;">${glyph}</span>${escapeHtml(pill.hook)}<span style="opacity: .75; font-weight: 600;">${count}</span></span>`;
+    "><span style="font-size: 9px;">${glyph}</span>${escapeHtml(pill.hook)}<span style="font-weight: 600;">${count}</span></span>`;
 }
 
 /************************************************************
@@ -9068,7 +9156,11 @@ async function reconcile_fold_apply(gobj, opts, visible)
                     sourcePort: p.hook,
                     lineWidth: 1,
                     lineDash: [4, 3],
-                    stroke: dark? '#8b94a3' : '#94a3b8',
+                    /*  The same grey as a cross link (refresh_default_edges_theme):
+                     *  `#94a3b8` on a white canvas is 2.56:1, under the 3:1 a
+                     *  line needs to be seen at all. The DASH is what says
+                     *  this one leads to a cut, not the colour.  */
+                    stroke: dark? '#8b94a3' : '#6b7280',
                     startArrow: false,
                     endArrow: false,
                 },
@@ -9157,6 +9249,40 @@ function ac_language_changed(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The rims of every port, on a theme change.
+ *
+ *  A rim is half of the surface it sits on (see port_rim), so it
+ *  belongs to the theme -- and it lives in each node's
+ *  `style.ports`, which is the one place refresh_html_nodes_theme()
+ *  does not reach: it rebuilds the html INSIDE a card.
+ ************************************************************/
+function refresh_port_rims(gobj, theme)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    if(!graph) {
+        return;
+    }
+    let updates = [];
+    for(let nd of (graph.getNodeData() || [])) {
+        if(!nd || !nd.style || !is_array(nd.style.ports) || !nd.style.ports.length) {
+            continue;
+        }
+        updates.push({id: nd.id, style: {ports: nd.style.ports.map((p) =>
+            Object.assign({}, p, {stroke: port_rim(p.fill, theme)})
+        )}});
+    }
+    if(updates.length) {
+        try {
+            graph.updateNodeData(updates);
+        } catch(e) {
+            log_error(`${gobj_short_name(gobj)}: cannot repaint the port rims: ${e}`);
+        }
+    }
+}
+
 /************************************************************
  *  Repaint the `+N` chips (theme or language changed).
  ************************************************************/
@@ -9680,6 +9806,7 @@ function ac_theme(gobj, event, kw, src)
 
     refresh_html_nodes_theme(gobj, theme);
     refresh_default_edges_theme(gobj, theme);
+    refresh_port_rims(gobj, theme);
     repaint_more_chips(gobj);
 
     graph_draw(gobj).then(() => {