@yuneta/gobj-ui 7.23.88 → 7.23.90

package/README.md

@@ -2211,6 +2211,33 @@ metadata (`__md_treedb__`).
 
 ## Conventions
 
+### Colour: a brand token as INK takes `-on-scheme`, as a FILL it does not
+
+A Bulma brand colour (`--bulma-link`, `--bulma-danger`, …) is built to carry
+**white text on it**, so it is the wrong colour to write WITH: measured
+against the scheme background, the raw tokens as ink are
+
+| token | raw, light | raw, dark | `-on-scheme`, light | `-on-scheme`, dark |
+|---|---|---|---|---|
+| `link`    | 5.16 | **3.51** | 6.33 | 5.65 |
+| `danger`  | **2.80** | 6.46 | 5.83 | 6.46 |
+| `success` | **2.14** | 8.48 | 8.14 | 8.48 |
+| `warning` | **1.75** | 10.38 | 7.09 | 10.38 |
+| `info`    | **1.73** | 10.46 | 7.66 | 10.46 |
+| `primary` | **1.95** | 9.28 | 6.45 | 9.28 |
+
+— every one of them fails the 4.5:1 of small text in one scheme or the other
+(`link` in dark, the rest in light). So:
+
+- **ink** (`color`, a glyph, a thin border that MARKS a state):
+  `var(--bulma-<name>-on-scheme, var(--bulma-<name>, #fallback))`;
+- **fill** (`background`, a chip, a pressed button): the raw token, paired
+  with `--bulma-<name>-invert` for the text on it. A darkened background
+  under inverted text is a button nobody asked for.
+
+Bulma computes `-on-scheme` per scheme: the same hue, darkened on a light
+page (`warning` goes to 23% lightness), unchanged on a dark one.
+
 ### i18n: a string must be able to CHANGE language, not just be translated once
 
 Passing a string through `t()` is **not** enough. `refresh_language()` only

package/dist/gobj-ui.cjs.js

@@ -59213,7 +59213,7 @@ 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";
 	}
@@ -59222,7 +59222,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		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 = `
@@ -60054,7 +60054,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 +60077,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

package/dist/gobj-ui.es.js

@@ -59208,7 +59208,7 @@ 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";
 	}
@@ -59217,7 +59217,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		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 = `
@@ -60049,7 +60049,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 +60072,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

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -7297,8 +7297,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)`
@@ -7310,7 +7316,12 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         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)";
@@ -8605,9 +8616,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 +8653,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>`;
 }
 
 /************************************************************

package/src/c_yui_json.css

@@ -164,7 +164,7 @@
 
 .C_YUI_JSON .JSON_TOGGLE_REMOTE i {
     font-size: 0.8em;
-    color: var(--bulma-link, #3273dc);
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));
 }
 
 .C_YUI_JSON .JSON_KEY {
@@ -195,7 +195,7 @@
 }
 
 .C_YUI_JSON .JSON_STUB {
-    color: var(--bulma-link, #3273dc);
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));
     font-weight: 600;
 }
 
@@ -286,6 +286,12 @@
 /*  Bulma's `.button.is-active` only borrows the :active border, which on a
  *  three-way switch is not enough to say WHICH view you are looking at.
  *  Fill it instead — the mark has to survive a glance. */
+/*  The raw `--bulma-link` on purpose, and not `-on-scheme`: this is a
+ *  FILL. The `-on-scheme` variants exist for a brand colour used as
+ *  INK -- they darken it on a light scheme so text can sit on the
+ *  page -- and a darkened fill under `link-invert` text is a button
+ *  nobody asked for. Ink takes `-on-scheme`; a background takes the
+ *  raw token and pairs it with `-invert`.  */
 .C_YUI_JSON .JSON_VIEW_MODE.is-active {
     background-color: var(--bulma-link, #3273dc);
     border-color: var(--bulma-link, #3273dc);

package/src/c_yui_shell.css

@@ -228,7 +228,9 @@
 }
 
 /*--- per-item state class (item.class) — generic disconnected tint ---*/
-.yui-nav-tabs .tabs li.yui-nav-disconnected a { color: var(--bulma-danger, #f14668); }
+.yui-nav-tabs .tabs li.yui-nav-disconnected a {
+    color: var(--bulma-danger-on-scheme, var(--bulma-danger, #f14668));
+}
 
 /*--- cards (section-index landing grid, mounted as a stage view) ---*/
 .yui-nav-cards {
@@ -261,11 +263,11 @@
 }
 .yui-nav-cards .yui-nav-card:hover,
 .yui-nav-cards .yui-nav-card:focus-visible {
-    border-color: var(--bulma-link, #485fc7);
-    color: var(--bulma-link, #485fc7);
+    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
 }
 .yui-nav-cards .yui-nav-card.is-active {
-    border-color: var(--bulma-link, #485fc7);
+    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
 }
 .yui-nav-cards .yui-nav-card[data-disabled="1"] {
     opacity: 0.5;
@@ -629,7 +631,7 @@
     align-items: center;
     flex: 0 0 auto;
     visibility: hidden;
-    color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
 }
 .yui-toolbar-dropdown-item.is-selected .yui-toolbar-dropdown-check {
     visibility: visible;

package/src/c_yui_treedb_topics.css

@@ -27,8 +27,8 @@
 }
 /*  Selected (clicked) card: link-coloured border + soft ring. */
 .TREEDB_TOPIC_CARD.is-selected {
-    border-color: var(--bulma-link, #485fc7);
-    box-shadow: 0 0 0 2px var(--bulma-link, #485fc7) inset;
+    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
+    box-shadow: 0 0 0 2px var(--bulma-link-on-scheme, var(--bulma-link, #485fc7)) inset;
 }
 .TREEDB_TOPIC_CARD .TREEDB_TOPIC_CARD_NAME {
     font-weight: 600;
@@ -57,7 +57,7 @@
 .TREEDB_TOPIC_CARD_ACTIONS > a:hover,
 .TREEDB_TOPIC_CARD_ACTIONS > a:focus-visible {
     background: var(--bulma-background, #f5f5f5);
-    color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
 }
 
 /*  Routed topic-info panel. */

package/src/shell_route_map.css

@@ -124,7 +124,7 @@ a.ROUTEMAP_LINK .ROUTEMAP_NAME {
 }
 .ROUTEMAP_ROUTE {
     background: transparent;
-    color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
     padding: 0;
     font-size: 0.8rem;
 }

package/src/tabulator.css

@@ -224,7 +224,7 @@
     background-color: var(--bulma-grey-darker, #2b2f38);
     color: var(--bulma-text-strong, #f5f6f7) !important;
     caret-color: var(--bulma-text-strong, #f5f6f7);
-    border-color: var(--bulma-link, #4a9eff);
+    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
 }
 
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
@@ -263,7 +263,7 @@
 
 .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
 .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:focus {
-    border-color: var(--bulma-link, #4a9eff);
+    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
     outline: none;
 }
 
@@ -373,7 +373,7 @@
         background-color: var(--bulma-grey-darker, #2b2f38);
         color: var(--bulma-text-strong, #f5f6f7) !important;
         caret-color: var(--bulma-text-strong, #f5f6f7);
-        border-color: var(--bulma-link, #4a9eff);
+        border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
     }
     [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
     [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {