@yuneta/gobj-ui 7.23.88 → 7.23.89

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/package.json

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

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 {