@yuneta/gobj-ui 7.23.93 → 7.23.95

package/README.md

@@ -2245,6 +2245,14 @@ against the scheme background, the raw tokens as ink are
 Bulma computes `-on-scheme` per scheme: the same hue, darkened on a light
 page (`warning` goes to 23% lightness), unchanged on a dark one.
 
+**Quiet text**: `.yui-text-quiet` (the text colour at 75%), never Bulma's
+`has-text-grey` — one mid grey for both schemes, 3.86:1 on the dark one, and
+what the library writes in grey is an empty state, a timestamp, a topic id, a
+notice's detail: text somebody has to read. And a **placeholder** is text
+too; the shell's stylesheet raises Bulma's 30% alpha to 70% (2.47:1 → 7.96 in
+dark) where Bulma declares the variable, since a `:root` override does not
+reach it.
+
 ### 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

@@ -4420,8 +4420,13 @@ function ensure_dock_style() {
     background: var(--bulma-scheme-main); color: var(--bulma-text); cursor: pointer; white-space: nowrap;
 }
 .yui-dock-chip:hover { border-color: var(--bulma-text-weak); }
-.yui-dock-chip.is-active { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,0.10); font-weight: 600; }
-.yui-dock-chip.is-min { opacity: 0.65; }
+/*  The BORDER says active, not the text: blue ink on a blue tint is
+ *  the same hue on itself -- 4.49:1 on the light chip, under the 4.5
+ *  its 12px label needs. The label takes the text colour (11:1).  */
+.yui-dock-chip.is-active { border-color: #2563eb; color: var(--bulma-text, #2e333d); background: rgba(37,99,235,0.10); font-weight: 600; }
+/*  A minimised window is quieter, not unreadable: 0.65 is 4.3:1 on the
+ *  light scheme for a 12px label.  */
+.yui-dock-chip.is-min { opacity: 0.7; }
 .yui-dock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
 .yui-dock-chip.is-min .yui-dock-dot { background: var(--bulma-text-weak); }
 .yui-dock-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 14px; flex: 0 0 auto; }
@@ -4439,7 +4444,7 @@ function ensure_dock_style() {
 }
 .yui-dock-close:hover { background: #e0364a; color: #fff; }
 .yui-dock-close svg { width: 11px; height: 11px; display: block; }
-:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: #93c5fd; background: rgba(96,165,250,0.16); }
+:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: var(--bulma-text, #ebecf0); background: rgba(96,165,250,0.16); }
 `;
 	let $style = document.createElement("style");
 	$style.id = "yui-dock-style";
@@ -10651,7 +10656,7 @@ function yui_graph_camera_items(gobj, graph, wide) {
 		[
 			"span",
 			{
-				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 yui-text-quiet",
 				style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
 				title: (0, i18next.t)("zoom level"),
 				"data-i18n-title": "zoom level"
@@ -13427,7 +13432,7 @@ function render_graph(gobj) {
 		$graph.appendChild((0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13496,7 +13501,7 @@ function render_text(gobj) {
 		$text.appendChild((0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13540,7 +13545,7 @@ function render_tree(gobj) {
 		$tree.appendChild((0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13716,7 +13721,7 @@ function toggle_row(gobj, key, size, is_object, depth, path, open, value) {
 	}
 	body.push([
 		"span",
-		{ class: "JSON_SUMMARY has-text-grey" },
+		{ class: "JSON_SUMMARY yui-text-quiet" },
 		summary
 	]);
 	let label = container_label(value, MAX_LABEL_CHARS);
@@ -13786,7 +13791,7 @@ function leaf_row(key, value, depth) {
 		let wall = format_epoch(value);
 		if (wall) body.push([
 			"span",
-			{ class: "JSON_TIME is-size-7 has-text-grey ml-2" },
+			{ class: "JSON_TIME is-size-7 yui-text-quiet ml-2" },
 			wall
 		]);
 	}
@@ -15723,7 +15728,7 @@ function render_raw(gobj) {
 		$raw.appendChild((0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "GCLASS_EMPTY p-4 has-text-grey",
+				class: "GCLASS_EMPTY p-4 yui-text-quiet",
 				i18n: "no data"
 			},
 			(0, i18next.t)("no data")
@@ -15739,7 +15744,7 @@ function render_raw(gobj) {
 	if (dump.capped) children.push([
 		"div",
 		{
-			class: "GCLASS_RAW_CAPPED has-text-grey is-size-7 p-2",
+			class: "GCLASS_RAW_CAPPED yui-text-quiet is-size-7 p-2",
 			i18n: "text truncated"
 		},
 		(0, i18next.t)("text truncated")
@@ -15772,7 +15777,7 @@ function render_zones(gobj) {
 		$zones.appendChild((0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "GCLASS_EMPTY p-4 has-text-grey",
+				class: "GCLASS_EMPTY p-4 yui-text-quiet",
 				i18n: "no data"
 			},
 			(0, i18next.t)("no data")
@@ -20959,7 +20964,7 @@ function build_body(shell, t) {
 	]);
 	let $count = (0, _yuneta_gobj_js.createElement2)([
 		"span",
-		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
+		{ class: "ROUTEMAP_COUNT is-size-7 yui-text-quiet is-hidden" },
 		[$count_n]
 	]);
 	let $refs_input = (0, _yuneta_gobj_js.createElement2)(["input", {
@@ -24751,7 +24756,7 @@ function create_tabulator(gobj) {
 		index: pkey,
 		columns,
 		selectableRows: selectable,
-		footerElement: "<span class='yui-tabulator-rowcount' style='display:block;text-align:right;font-size:0.8rem;color:#6b7280;padding:0 0.6rem;'></span>"
+		footerElement: "<span class='yui-tabulator-rowcount yui-text-quiet' style='display:block;text-align:right;font-size:0.8rem;padding:0 0.6rem;'></span>"
 	});
 	let $view_container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	let $table_el = $view_container ? $view_container.querySelector(`#${table_id}`) : null;
@@ -24911,7 +24916,7 @@ function icon_formatter(cell) {
 	if (!/^[a-z0-9-]+$/.test(name) || !yui_icon_is_defined(name)) return (0, _yuneta_gobj_js.createElement2)([
 		"span",
 		{
-			class: "ICON_CELL_UNKNOWN is-size-7 has-text-grey",
+			class: "ICON_CELL_UNKNOWN is-size-7 yui-text-quiet",
 			title: name
 		},
 		name
@@ -64451,7 +64456,7 @@ function build_graph(gobj) {
 		let $empty = (0, _yuneta_gobj_js.createElement2)([
 			"div",
 			{
-				class: "TREEDB_SCHEMA_EMPTY p-4 has-text-grey",
+				class: "TREEDB_SCHEMA_EMPTY p-4 yui-text-quiet",
 				i18n: "no topics"
 			},
 			(0, i18next.t)("no topics", { defaultValue: "No topics" })
@@ -66525,7 +66530,7 @@ function build_ui$1(gobj) {
 			],
 			[
 				"div",
-				{ class: "SCHEMA_NOTICE p-4 has-text-grey is-hidden" },
+				{ class: "SCHEMA_NOTICE p-4 yui-text-quiet is-hidden" },
 				[]
 			],
 			[
@@ -66825,7 +66830,7 @@ function show_notice(gobj, key, detail) {
 	]));
 	if (detail) $notice.appendChild((0, _yuneta_gobj_js.createElement2)([
 		"span",
-		{ class: "SCHEMA_NOTICE_DETAIL has-text-grey ml-2" },
+		{ class: "SCHEMA_NOTICE_DETAIL yui-text-quiet ml-2" },
 		`${detail}`
 	]));
 }
@@ -66947,7 +66952,7 @@ function render_toolbar(gobj) {
 	}
 	$left.push([
 		"nav",
-		{ class: "SCHEMA_CRUMBS is-size-7 has-text-grey ml-1" },
+		{ class: "SCHEMA_CRUMBS is-size-7 yui-text-quiet ml-1" },
 		$trail
 	]);
 	let $right = [];
@@ -67203,7 +67208,7 @@ function render_topics(gobj, $body) {
 						],
 						ambiguous ? [
 							"div",
-							{ class: "SCHEMA_TOPIC_ID is-size-7 has-text-grey" },
+							{ class: "SCHEMA_TOPIC_ID is-size-7 yui-text-quiet" },
 							[[
 								"code",
 								{},
@@ -67454,7 +67459,7 @@ function render_columns(gobj, $body) {
 	if (topic.cols.length === 0) $wrap.appendChild((0, _yuneta_gobj_js.createElement2)([
 		"p",
 		{
-			class: "SCHEMA_COLUMNS_EMPTY has-text-grey p-3",
+			class: "SCHEMA_COLUMNS_EMPTY yui-text-quiet p-3",
 			i18n: "this topic has no column"
 		},
 		(0, i18next.t)("this topic has no column")
@@ -67566,7 +67571,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 				{ class: "SCHEMA_COL_HANDLE" },
 				readonly ? [] : [[
 					"span",
-					{ class: "icon has-text-grey" },
+					{ class: "icon yui-text-quiet" },
 					[["i", { class: "yi-grip-vertical" }]]
 				]]
 			],
@@ -67581,7 +67586,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 					],
 					ambiguous ? [
 						"span",
-						{ class: "SCHEMA_COL_ID is-size-7 has-text-grey ml-2" },
+						{ class: "SCHEMA_COL_ID is-size-7 yui-text-quiet ml-2" },
 						[[
 							"code",
 							{},
@@ -67923,7 +67928,7 @@ function flags_field(gobj, type, current) {
 			return [
 				"label",
 				el_attrs({
-					class: "SCHEMA_FLAG checkbox " + (flag.meaningful ? "" : "SCHEMA_FLAG_DIM has-text-grey-light"),
+					class: "SCHEMA_FLAG checkbox " + (flag.meaningful ? "" : "SCHEMA_FLAG_DIM yui-text-quiet-light"),
 					title: flag.desc ? (0, i18next.t)(flag.desc) : "",
 					"data-i18n-title": flag.desc || void 0
 				}),
@@ -67945,7 +67950,7 @@ function flags_field(gobj, type, current) {
 			[[
 				"p",
 				{
-					class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold has-text-grey",
+					class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold yui-text-quiet",
 					i18n: group.group
 				},
 				(0, i18next.t)(group.group)
@@ -68639,7 +68644,7 @@ function render_import_plan(gobj, plan) {
 		{ class: "SCHEMA_IMPORT_SUMMARY" },
 		[[
 			"p",
-			{ class: "SCHEMA_IMPORT_COUNT is-size-7 has-text-grey mb-2" },
+			{ class: "SCHEMA_IMPORT_COUNT is-size-7 yui-text-quiet mb-2" },
 			[
 				[
 					"span",
@@ -71174,7 +71179,7 @@ function build_days_grid(gobj, view, locale) {
 		let d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
 		$dow.push([
 			"div",
-			{ class: "has-text-centered is-size-7 has-text-grey YUI_PERIOD_CAL_DOW" },
+			{ class: "has-text-centered is-size-7 yui-text-quiet YUI_PERIOD_CAL_DOW" },
 			new Intl.DateTimeFormat(locale, { weekday: "narrow" }).format(d)
 		]);
 	}
@@ -71200,7 +71205,7 @@ function build_days_grid(gobj, view, locale) {
 			let $wk = (0, _yuneta_gobj_js.createElement2)([
 				"button",
 				{
-					class: "button is-small is-ghost is-size-7 has-text-grey YUI_PERIOD_CAL_WEEKNUM",
+					class: "button is-small is-ghost is-size-7 yui-text-quiet YUI_PERIOD_CAL_WEEKNUM",
 					type: "button",
 					style: "width:100%;",
 					title: wk_name,
@@ -71218,7 +71223,7 @@ function build_days_grid(gobj, view, locale) {
 			let ts = d.getTime();
 			let selected = ts >= sel.from && ts <= sel.to;
 			let $btn = cell_button(gobj, d.getDate(), ts, selected, "YUI_PERIOD_CAL_DAY", day_name.format(d));
-			if (d.getMonth() !== view.getMonth()) $btn.classList.add("has-text-grey-light");
+			if (d.getMonth() !== view.getMonth()) $btn.classList.add("yui-text-quiet-light");
 			if (day_number(d) === today) $btn.classList.add("has-text-weight-bold", "YUI_PERIOD_CAL_TODAY_CELL");
 			cells.push({
 				ts,

package/dist/gobj-ui.es.js

@@ -4415,8 +4415,13 @@ function ensure_dock_style() {
     background: var(--bulma-scheme-main); color: var(--bulma-text); cursor: pointer; white-space: nowrap;
 }
 .yui-dock-chip:hover { border-color: var(--bulma-text-weak); }
-.yui-dock-chip.is-active { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,0.10); font-weight: 600; }
-.yui-dock-chip.is-min { opacity: 0.65; }
+/*  The BORDER says active, not the text: blue ink on a blue tint is
+ *  the same hue on itself -- 4.49:1 on the light chip, under the 4.5
+ *  its 12px label needs. The label takes the text colour (11:1).  */
+.yui-dock-chip.is-active { border-color: #2563eb; color: var(--bulma-text, #2e333d); background: rgba(37,99,235,0.10); font-weight: 600; }
+/*  A minimised window is quieter, not unreadable: 0.65 is 4.3:1 on the
+ *  light scheme for a 12px label.  */
+.yui-dock-chip.is-min { opacity: 0.7; }
 .yui-dock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
 .yui-dock-chip.is-min .yui-dock-dot { background: var(--bulma-text-weak); }
 .yui-dock-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 14px; flex: 0 0 auto; }
@@ -4434,7 +4439,7 @@ function ensure_dock_style() {
 }
 .yui-dock-close:hover { background: #e0364a; color: #fff; }
 .yui-dock-close svg { width: 11px; height: 11px; display: block; }
-:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: #93c5fd; background: rgba(96,165,250,0.16); }
+:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: var(--bulma-text, #ebecf0); background: rgba(96,165,250,0.16); }
 `;
 	let $style = document.createElement("style");
 	$style.id = "yui-dock-style";
@@ -10646,7 +10651,7 @@ function yui_graph_camera_items(gobj, graph, wide) {
 		[
 			"span",
 			{
-				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 yui-text-quiet",
 				style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
 				title: t("zoom level"),
 				"data-i18n-title": "zoom level"
@@ -13422,7 +13427,7 @@ function render_graph(gobj) {
 		$graph.appendChild(createElement2([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13491,7 +13496,7 @@ function render_text(gobj) {
 		$text.appendChild(createElement2([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13535,7 +13540,7 @@ function render_tree(gobj) {
 		$tree.appendChild(createElement2([
 			"div",
 			{
-				class: "JSON_EMPTY has-text-grey p-3",
+				class: "JSON_EMPTY yui-text-quiet p-3",
 				"data-i18n": "no data"
 			},
 			"no data"
@@ -13711,7 +13716,7 @@ function toggle_row(gobj, key, size, is_object, depth, path, open, value) {
 	}
 	body.push([
 		"span",
-		{ class: "JSON_SUMMARY has-text-grey" },
+		{ class: "JSON_SUMMARY yui-text-quiet" },
 		summary
 	]);
 	let label = container_label(value, MAX_LABEL_CHARS);
@@ -13781,7 +13786,7 @@ function leaf_row(key, value, depth) {
 		let wall = format_epoch(value);
 		if (wall) body.push([
 			"span",
-			{ class: "JSON_TIME is-size-7 has-text-grey ml-2" },
+			{ class: "JSON_TIME is-size-7 yui-text-quiet ml-2" },
 			wall
 		]);
 	}
@@ -15718,7 +15723,7 @@ function render_raw(gobj) {
 		$raw.appendChild(createElement2([
 			"div",
 			{
-				class: "GCLASS_EMPTY p-4 has-text-grey",
+				class: "GCLASS_EMPTY p-4 yui-text-quiet",
 				i18n: "no data"
 			},
 			t("no data")
@@ -15734,7 +15739,7 @@ function render_raw(gobj) {
 	if (dump.capped) children.push([
 		"div",
 		{
-			class: "GCLASS_RAW_CAPPED has-text-grey is-size-7 p-2",
+			class: "GCLASS_RAW_CAPPED yui-text-quiet is-size-7 p-2",
 			i18n: "text truncated"
 		},
 		t("text truncated")
@@ -15767,7 +15772,7 @@ function render_zones(gobj) {
 		$zones.appendChild(createElement2([
 			"div",
 			{
-				class: "GCLASS_EMPTY p-4 has-text-grey",
+				class: "GCLASS_EMPTY p-4 yui-text-quiet",
 				i18n: "no data"
 			},
 			t("no data")
@@ -20954,7 +20959,7 @@ function build_body(shell, t) {
 	]);
 	let $count = createElement2([
 		"span",
-		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
+		{ class: "ROUTEMAP_COUNT is-size-7 yui-text-quiet is-hidden" },
 		[$count_n]
 	]);
 	let $refs_input = createElement2(["input", {
@@ -24746,7 +24751,7 @@ function create_tabulator(gobj) {
 		index: pkey,
 		columns,
 		selectableRows: selectable,
-		footerElement: "<span class='yui-tabulator-rowcount' style='display:block;text-align:right;font-size:0.8rem;color:#6b7280;padding:0 0.6rem;'></span>"
+		footerElement: "<span class='yui-tabulator-rowcount yui-text-quiet' style='display:block;text-align:right;font-size:0.8rem;padding:0 0.6rem;'></span>"
 	});
 	let $view_container = gobj_read_attr(gobj, "$container");
 	let $table_el = $view_container ? $view_container.querySelector(`#${table_id}`) : null;
@@ -24906,7 +24911,7 @@ function icon_formatter(cell) {
 	if (!/^[a-z0-9-]+$/.test(name) || !yui_icon_is_defined(name)) return createElement2([
 		"span",
 		{
-			class: "ICON_CELL_UNKNOWN is-size-7 has-text-grey",
+			class: "ICON_CELL_UNKNOWN is-size-7 yui-text-quiet",
 			title: name
 		},
 		name
@@ -64446,7 +64451,7 @@ function build_graph(gobj) {
 		let $empty = createElement2([
 			"div",
 			{
-				class: "TREEDB_SCHEMA_EMPTY p-4 has-text-grey",
+				class: "TREEDB_SCHEMA_EMPTY p-4 yui-text-quiet",
 				i18n: "no topics"
 			},
 			t("no topics", { defaultValue: "No topics" })
@@ -66520,7 +66525,7 @@ function build_ui$1(gobj) {
 			],
 			[
 				"div",
-				{ class: "SCHEMA_NOTICE p-4 has-text-grey is-hidden" },
+				{ class: "SCHEMA_NOTICE p-4 yui-text-quiet is-hidden" },
 				[]
 			],
 			[
@@ -66820,7 +66825,7 @@ function show_notice(gobj, key, detail) {
 	]));
 	if (detail) $notice.appendChild(createElement2([
 		"span",
-		{ class: "SCHEMA_NOTICE_DETAIL has-text-grey ml-2" },
+		{ class: "SCHEMA_NOTICE_DETAIL yui-text-quiet ml-2" },
 		`${detail}`
 	]));
 }
@@ -66942,7 +66947,7 @@ function render_toolbar(gobj) {
 	}
 	$left.push([
 		"nav",
-		{ class: "SCHEMA_CRUMBS is-size-7 has-text-grey ml-1" },
+		{ class: "SCHEMA_CRUMBS is-size-7 yui-text-quiet ml-1" },
 		$trail
 	]);
 	let $right = [];
@@ -67198,7 +67203,7 @@ function render_topics(gobj, $body) {
 						],
 						ambiguous ? [
 							"div",
-							{ class: "SCHEMA_TOPIC_ID is-size-7 has-text-grey" },
+							{ class: "SCHEMA_TOPIC_ID is-size-7 yui-text-quiet" },
 							[[
 								"code",
 								{},
@@ -67449,7 +67454,7 @@ function render_columns(gobj, $body) {
 	if (topic.cols.length === 0) $wrap.appendChild(createElement2([
 		"p",
 		{
-			class: "SCHEMA_COLUMNS_EMPTY has-text-grey p-3",
+			class: "SCHEMA_COLUMNS_EMPTY yui-text-quiet p-3",
 			i18n: "this topic has no column"
 		},
 		t("this topic has no column")
@@ -67561,7 +67566,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 				{ class: "SCHEMA_COL_HANDLE" },
 				readonly ? [] : [[
 					"span",
-					{ class: "icon has-text-grey" },
+					{ class: "icon yui-text-quiet" },
 					[["i", { class: "yi-grip-vertical" }]]
 				]]
 			],
@@ -67576,7 +67581,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 					],
 					ambiguous ? [
 						"span",
-						{ class: "SCHEMA_COL_ID is-size-7 has-text-grey ml-2" },
+						{ class: "SCHEMA_COL_ID is-size-7 yui-text-quiet ml-2" },
 						[[
 							"code",
 							{},
@@ -67918,7 +67923,7 @@ function flags_field(gobj, type, current) {
 			return [
 				"label",
 				el_attrs({
-					class: "SCHEMA_FLAG checkbox " + (flag.meaningful ? "" : "SCHEMA_FLAG_DIM has-text-grey-light"),
+					class: "SCHEMA_FLAG checkbox " + (flag.meaningful ? "" : "SCHEMA_FLAG_DIM yui-text-quiet-light"),
 					title: flag.desc ? t(flag.desc) : "",
 					"data-i18n-title": flag.desc || void 0
 				}),
@@ -67940,7 +67945,7 @@ function flags_field(gobj, type, current) {
 			[[
 				"p",
 				{
-					class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold has-text-grey",
+					class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold yui-text-quiet",
 					i18n: group.group
 				},
 				t(group.group)
@@ -68634,7 +68639,7 @@ function render_import_plan(gobj, plan) {
 		{ class: "SCHEMA_IMPORT_SUMMARY" },
 		[[
 			"p",
-			{ class: "SCHEMA_IMPORT_COUNT is-size-7 has-text-grey mb-2" },
+			{ class: "SCHEMA_IMPORT_COUNT is-size-7 yui-text-quiet mb-2" },
 			[
 				[
 					"span",
@@ -71169,7 +71174,7 @@ function build_days_grid(gobj, view, locale) {
 		let d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
 		$dow.push([
 			"div",
-			{ class: "has-text-centered is-size-7 has-text-grey YUI_PERIOD_CAL_DOW" },
+			{ class: "has-text-centered is-size-7 yui-text-quiet YUI_PERIOD_CAL_DOW" },
 			new Intl.DateTimeFormat(locale, { weekday: "narrow" }).format(d)
 		]);
 	}
@@ -71195,7 +71200,7 @@ function build_days_grid(gobj, view, locale) {
 			let $wk = createElement2([
 				"button",
 				{
-					class: "button is-small is-ghost is-size-7 has-text-grey YUI_PERIOD_CAL_WEEKNUM",
+					class: "button is-small is-ghost is-size-7 yui-text-quiet YUI_PERIOD_CAL_WEEKNUM",
 					type: "button",
 					style: "width:100%;",
 					title: wk_name,
@@ -71213,7 +71218,7 @@ function build_days_grid(gobj, view, locale) {
 			let ts = d.getTime();
 			let selected = ts >= sel.from && ts <= sel.to;
 			let $btn = cell_button(gobj, d.getDate(), ts, selected, "YUI_PERIOD_CAL_DAY", day_name.format(d));
-			if (d.getMonth() !== view.getMonth()) $btn.classList.add("has-text-grey-light");
+			if (d.getMonth() !== view.getMonth()) $btn.classList.add("yui-text-quiet-light");
 			if (day_number(d) === today) $btn.classList.add("has-text-weight-bold", "YUI_PERIOD_CAL_TODAY_CELL");
 			cells.push({
 				ts,

package/package.json

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

package/src/c_yui_form.css

@@ -42,9 +42,13 @@
 }
 
 /*--- readonly fields (e.g. the pkey in update mode) look readonly ---*/
+/*  The BACKGROUND and the cursor are what say "not editable"; the text
+ *  is not dimmed for it. `--bulma-text-weak` on that background reads
+ *  4.07:1 in dark, under the 4.5 of small text -- and a value you may
+ *  read but not change is exactly a value you have to be able to read. */
 .C_YUI_FORM input.input[readonly] {
     background-color: var(--bulma-background, #f5f5f5);
-    color: var(--bulma-text-weak, #7a7a7a);
+    color: var(--bulma-text, #2e333d);
     border-color: var(--bulma-border, #dbdbdb);
     cursor: default;
 }

package/src/c_yui_gclass.js

@@ -439,7 +439,7 @@ function render_raw(gobj)
     let description = gobj_read_attr(gobj, "description");
     if(description === null || description === undefined) {
         $raw.appendChild(createElement2(
-            ['div', {class: 'GCLASS_EMPTY p-4 has-text-grey',
+            ['div', {class: 'GCLASS_EMPTY p-4 yui-text-quiet',
                      i18n: 'no data'}, t("no data")]));
         return;
     }
@@ -450,7 +450,7 @@ function render_raw(gobj)
     ];
     if(dump.capped) {
         children.push(
-            ['div', {class: 'GCLASS_RAW_CAPPED has-text-grey is-size-7 p-2',
+            ['div', {class: 'GCLASS_RAW_CAPPED yui-text-quiet is-size-7 p-2',
                      i18n: 'text truncated'}, t("text truncated")]);
     }
     if(dump.error) {
@@ -484,7 +484,7 @@ function render_zones(gobj)
     let model = priv.model;
     if(!model) {
         $zones.appendChild(createElement2(
-            ['div', {class: 'GCLASS_EMPTY p-4 has-text-grey',
+            ['div', {class: 'GCLASS_EMPTY p-4 yui-text-quiet',
                      i18n: 'no data'}, t("no data")]));
         return;
     }

package/src/c_yui_json.js

@@ -597,7 +597,7 @@ function render_graph(gobj)
         teardown_graph_child(gobj);
         $graph.textContent = "";
         $graph.appendChild(createElement2(
-            ['div', {class: 'JSON_EMPTY has-text-grey p-3', 'data-i18n': 'no data'}, 'no data']
+            ['div', {class: 'JSON_EMPTY yui-text-quiet p-3', 'data-i18n': 'no data'}, 'no data']
         ));
         refresh_language($graph, t);
         return;
@@ -687,7 +687,7 @@ function render_text(gobj)
 
     if(priv.root === null || priv.root === undefined) {
         $text.appendChild(createElement2(
-            ['div', {class: 'JSON_EMPTY has-text-grey p-3', 'data-i18n': 'no data'}, 'no data']
+            ['div', {class: 'JSON_EMPTY yui-text-quiet p-3', 'data-i18n': 'no data'}, 'no data']
         ));
         return;
     }
@@ -736,7 +736,7 @@ function render_tree(gobj)
 
     if(priv.root === null || priv.root === undefined) {
         $tree.appendChild(createElement2(
-            ['div', {class: 'JSON_EMPTY has-text-grey p-3', 'data-i18n': 'no data'}, 'no data']
+            ['div', {class: 'JSON_EMPTY yui-text-quiet p-3', 'data-i18n': 'no data'}, 'no data']
         ));
         return;
     }
@@ -915,7 +915,7 @@ function toggle_row(gobj, key, size, is_object, depth, path, open, value)
         body.push(['span', {class: 'JSON_KEY'}, String(key)]);
         body.push(['span', {class: 'JSON_PUNCT'}, ': ']);
     }
-    body.push(['span', {class: 'JSON_SUMMARY has-text-grey'}, summary]);
+    body.push(['span', {class: 'JSON_SUMMARY yui-text-quiet'}, summary]);
 
     /*
      *  A dict that carries an id says WHICH one it is, right here.
@@ -977,7 +977,7 @@ function leaf_row(key, value, depth)
     if(key !== null && is_time_field(String(key))) {
         let wall = format_epoch(value);
         if(wall) {
-            body.push(['span', {class: 'JSON_TIME is-size-7 has-text-grey ml-2'}, wall]);
+            body.push(['span', {class: 'JSON_TIME is-size-7 yui-text-quiet ml-2'}, wall]);
         }
     }
 

package/src/c_yui_period.js

@@ -1055,7 +1055,7 @@ function build_days_grid(gobj, view, locale)
     }
     for(let i = 0; i < 7; i++) {
         let d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
-        $dow.push(["div", {class: "has-text-centered is-size-7 has-text-grey YUI_PERIOD_CAL_DOW"},
+        $dow.push(["div", {class: "has-text-centered is-size-7 yui-text-quiet YUI_PERIOD_CAL_DOW"},
             new Intl.DateTimeFormat(locale, {weekday: "narrow"}).format(d)]);
     }
     $rows.push(["div", {class: "YUI_PERIOD_CAL_WEEK",
@@ -1073,7 +1073,7 @@ function build_days_grid(gobj, view, locale)
             let wk = iso_week(monday).week;
             let wk_name = t("week {{n}}", {n: wk});
             let $wk = createElement2(
-                ["button", {class: "button is-small is-ghost is-size-7 has-text-grey " +
+                ["button", {class: "button is-small is-ghost is-size-7 yui-text-quiet " +
                                    "YUI_PERIOD_CAL_WEEKNUM",
                             type: "button", style: "width:100%;",
                             title: wk_name, "aria-label": wk_name}, String(wk)]);
@@ -1093,7 +1093,7 @@ function build_days_grid(gobj, view, locale)
             let $btn = cell_button(gobj, d.getDate(), ts, selected, "YUI_PERIOD_CAL_DAY",
                                    day_name.format(d));
             if(d.getMonth() !== view.getMonth()) {
-                $btn.classList.add("has-text-grey-light");
+                $btn.classList.add("yui-text-quiet-light");
             }
             if(day_number(d) === today) {
                 $btn.classList.add("has-text-weight-bold", "YUI_PERIOD_CAL_TODAY_CELL");

package/src/c_yui_schema_editor.js

@@ -319,7 +319,7 @@ function build_ui(gobj)
                  style: "height:100%; display:flex; flex-direction:column; min-height:0;"}, [
             ["div", {class: "SCHEMA_TOOLBAR is-flex is-align-items-center",
                      style: "gap:.25rem; padding:.25rem;"}, []],
-            ["div", {class: "SCHEMA_NOTICE p-4 has-text-grey is-hidden"}, []],
+            ["div", {class: "SCHEMA_NOTICE p-4 yui-text-quiet is-hidden"}, []],
             ["div", {class: "SCHEMA_BODY", style: "flex:1 1 auto; min-height:0; overflow:auto;"}, []]
         ]]
     );
@@ -721,7 +721,7 @@ function show_notice(gobj, key, detail)
     ));
     if(detail) {
         $notice.appendChild(createElement2(
-            ["span", {class: "SCHEMA_NOTICE_DETAIL has-text-grey ml-2"}, `${detail}`]
+            ["span", {class: "SCHEMA_NOTICE_DETAIL yui-text-quiet ml-2"}, `${detail}`]
         ));
     }
 }
@@ -800,7 +800,7 @@ function render_toolbar(gobj)
         $trail.push(["span", {class: "SCHEMA_CRUMB_SEP"}, "/"]);
         $trail.push(["span", {class: "SCHEMA_CRUMB_DIAGRAM", i18n: "diagram"}, t("diagram")]);
     }
-    $left.push(["nav", {class: "SCHEMA_CRUMBS is-size-7 has-text-grey ml-1"}, $trail]);
+    $left.push(["nav", {class: "SCHEMA_CRUMBS is-size-7 yui-text-quiet ml-1"}, $trail]);
 
     /*----------------------------------------------*
      *  Right: what is legal HERE. A button that is not
@@ -1061,7 +1061,7 @@ function render_topics(gobj, $body)
                                 i18n: "system"}, t("system")]
                     : ["span", {}, ""],
                 ambiguous
-                    ? ["div", {class: "SCHEMA_TOPIC_ID is-size-7 has-text-grey"},
+                    ? ["div", {class: "SCHEMA_TOPIC_ID is-size-7 yui-text-quiet"},
                         [["code", {}, `${topic.id}`]]]
                     : ["span", {}, ""]
             ]],
@@ -1215,7 +1215,7 @@ function render_columns(gobj, $body)
 
     if(topic.cols.length === 0) {
         $wrap.appendChild(createElement2(
-            ["p", {class: "SCHEMA_COLUMNS_EMPTY has-text-grey p-3",
+            ["p", {class: "SCHEMA_COLUMNS_EMPTY yui-text-quiet p-3",
                    i18n: "this topic has no column"}, t("this topic has no column")]
         ));
     }
@@ -1320,12 +1320,12 @@ function column_row(gobj, topic, col, index, readonly, twice)
         ["tr", {class: "SCHEMA_COL_ROW", "data-index": `${index}`,
                 draggable: readonly ? "false" : "true"}, [
             ["td", {class: "SCHEMA_COL_HANDLE"},
-                readonly ? [] : [["span", {class: "icon has-text-grey"},
+                readonly ? [] : [["span", {class: "icon yui-text-quiet"},
                     [["i", {class: "yi-grip-vertical"}]]]]],
             ["td", {class: "SCHEMA_COL_NAME"}, [
                 ["code", {}, `${col.name}`],
                 ambiguous
-                    ? ["span", {class: "SCHEMA_COL_ID is-size-7 has-text-grey ml-2"},
+                    ? ["span", {class: "SCHEMA_COL_ID is-size-7 yui-text-quiet ml-2"},
                         [["code", {}, `${col.id}`]]]
                     : ["span", {}, ""],
                 is_pkey
@@ -1640,7 +1640,7 @@ function flags_field(gobj, type, current)
     for(let group of grouped_flags(type, current)) {
         let $boxes = group.flags.map((flag) => {
             return ["label", el_attrs({class: "SCHEMA_FLAG checkbox " +
-                                     (flag.meaningful ? "" : "SCHEMA_FLAG_DIM has-text-grey-light"),
+                                     (flag.meaningful ? "" : "SCHEMA_FLAG_DIM yui-text-quiet-light"),
                               title: flag.desc ? t(flag.desc) : "",
                               "data-i18n-title": flag.desc || undefined}), [
                 ["input", el_attrs({type: "checkbox", class: "SCHEMA_FLAG_BOX",
@@ -1651,7 +1651,7 @@ function flags_field(gobj, type, current)
         });
 
         $groups.push(["div", {class: "SCHEMA_FLAG_GROUP mb-2"}, [
-            ["p", {class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold has-text-grey",
+            ["p", {class: "SCHEMA_FLAG_GROUP_NAME has-text-weight-semibold yui-text-quiet",
                    i18n: group.group}, t(group.group)],
             ["div", {class: "SCHEMA_FLAG_LIST"}, $boxes]
         ]]);
@@ -2109,7 +2109,7 @@ function render_import_plan(gobj, plan)
 
     $pane.appendChild(createElement2(
         ["div", {class: "SCHEMA_IMPORT_SUMMARY"}, [
-            ["p", {class: "SCHEMA_IMPORT_COUNT is-size-7 has-text-grey mb-2"}, [
+            ["p", {class: "SCHEMA_IMPORT_COUNT is-size-7 yui-text-quiet mb-2"}, [
                 ["span", {i18n: "writes"}, t("writes")],
                 ["span", {class: "ml-1"}, `${plan.writes.length}`],
                 ["span", {class: "ml-3", i18n: "deletions"}, t("deletions")],

package/src/c_yui_shell.css

@@ -269,8 +269,13 @@
 .yui-nav-cards .yui-nav-card.is-active {
     border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
 }
+/*  Dimmed, not erased. WCAG exempts a DISABLED control from its
+ *  contrast minimum, and half opacity is 2.85:1 in light -- but a nav
+ *  entry you cannot reach is one you still have to be able to READ, or
+ *  it is a door with no sign. 0.7 is 4.96 and still plainly quieter
+ *  than a live card at 12.67.  */
 .yui-nav-cards .yui-nav-card[data-disabled="1"] {
-    opacity: 0.5;
+    opacity: 0.7;
 }
 
 /*--- breadcrumb: the path as one line (C_YUI_NODE's `projection.path`) ---*/
@@ -521,6 +526,46 @@
     white-space: nowrap;
 }
 
+/*============================================================
+ *      Legibility: two rules the whole library leans on
+ *
+ *      A PLACEHOLDER is text, and Bulma paints it with the text
+ *      colour at 30% alpha: 2.47:1 on the dark scheme, 1.79 on
+ *      the light one. It is what says what a box is FOR -- the
+ *      graph's `search`, a form's hint -- so it is written at
+ *      70%: 7.96 and 4.95, and plainly still secondary. The
+ *      `opacity: 1` is for Firefox, which dims a placeholder
+ *      again on top of its colour.
+ *
+ *      And `.yui-text-quiet` is what the library uses where it
+ *      used to say `has-text-grey`: Bulma's grey is ONE mid tone
+ *      for both schemes (3.86:1 on the dark one), and every use
+ *      of it in here is text somebody has to read -- an empty
+ *      state, a timestamp, a topic id, the detail of a notice.
+ *      The text colour at 75% is the same intent, legible.
+ *============================================================*/
+/*  Bulma declares `--bulma-input-placeholder-color` INSIDE the
+ *  `.input, .textarea, .select` block (its `.input::placeholder` rule
+ *  reads it there), so a `:root` override never reaches it and a bare
+ *  `input::placeholder` loses to Bulma's class selector. The variable
+ *  is redefined where Bulma defines it, with the alpha it should have
+ *  had: same hue, same lightness, 0.7 instead of 0.3.  */
+.input,
+.textarea,
+.select select {
+    --bulma-input-placeholder-color:
+        hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.7);
+}
+
+input::placeholder,
+textarea::placeholder {
+    opacity: 1;     /*  Firefox dims a placeholder again, on top of its colour  */
+}
+
+.yui-text-quiet {
+    opacity: 0.75;
+}
+
 /*============================================================
  *      Toolbar — type:"avatar"
  *      Circular badge populated by the host-registered provider

package/src/c_yui_treedb_schema.js

@@ -547,7 +547,7 @@ function build_graph(gobj)
     let data = schema_to_graph(gobj);
     if(data.nodes.length === 0) {
         let $empty = createElement2(
-            ['div', {class: 'TREEDB_SCHEMA_EMPTY p-4 has-text-grey',
+            ['div', {class: 'TREEDB_SCHEMA_EMPTY p-4 yui-text-quiet',
                      i18n: 'no topics'}, t('no topics', {defaultValue: 'No topics'})]
         );
         $container.appendChild($empty);

package/src/c_yui_treedb_topic_with_form.js

@@ -1503,9 +1503,13 @@ function create_tabulator(gobj)
         columns: columns,
         selectableRows: selectable,
         /*  Row-count footer (updated on every data change below). */
-        footerElement: "<span class='yui-tabulator-rowcount' " +
+        /*  No colour of its own: `#6b7280` was one grey written into
+         *  the html for both schemes, and on the dark footer it read
+         *  3.29:1. It inherits the footer's, which tabulator.css
+         *  themes.  */
+        footerElement: "<span class='yui-tabulator-rowcount yui-text-quiet' " +
             "style='display:block;text-align:right;font-size:0.8rem;" +
-            "color:#6b7280;padding:0 0.6rem;'></span>",
+            "padding:0 0.6rem;'></span>",
     });
 
     /*
@@ -1799,7 +1803,7 @@ function icon_formatter(cell)
          *  that mounts this table.  */
         return createElement2([
             "span",
-            {class: "ICON_CELL_UNKNOWN is-size-7 has-text-grey", title: name},
+            {class: "ICON_CELL_UNKNOWN is-size-7 yui-text-quiet", title: name},
             name
         ]);
     }

package/src/c_yui_window_manager.js

@@ -197,8 +197,13 @@ function ensure_dock_style()
     background: var(--bulma-scheme-main); color: var(--bulma-text); cursor: pointer; white-space: nowrap;
 }
 .yui-dock-chip:hover { border-color: var(--bulma-text-weak); }
-.yui-dock-chip.is-active { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,0.10); font-weight: 600; }
-.yui-dock-chip.is-min { opacity: 0.65; }
+/*  The BORDER says active, not the text: blue ink on a blue tint is
+ *  the same hue on itself -- 4.49:1 on the light chip, under the 4.5
+ *  its 12px label needs. The label takes the text colour (11:1).  */
+.yui-dock-chip.is-active { border-color: #2563eb; color: var(--bulma-text, #2e333d); background: rgba(37,99,235,0.10); font-weight: 600; }
+/*  A minimised window is quieter, not unreadable: 0.65 is 4.3:1 on the
+ *  light scheme for a 12px label.  */
+.yui-dock-chip.is-min { opacity: 0.7; }
 .yui-dock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
 .yui-dock-chip.is-min .yui-dock-dot { background: var(--bulma-text-weak); }
 .yui-dock-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 14px; flex: 0 0 auto; }
@@ -216,7 +221,7 @@ function ensure_dock_style()
 }
 .yui-dock-close:hover { background: #e0364a; color: #fff; }
 .yui-dock-close svg { width: 11px; height: 11px; display: block; }
-:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: #93c5fd; background: rgba(96,165,250,0.16); }
+:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: var(--bulma-text, #ebecf0); background: rgba(96,165,250,0.16); }
 `;
     let $style = document.createElement('style');
     $style.id = 'yui-dock-style';

package/src/shell_route_map.css

@@ -177,6 +177,17 @@ a.ROUTEMAP_LINK .ROUTEMAP_NAME {
     background: rgba(120, 150, 255, 0.16) !important;
     outline-color: rgba(120, 150, 255, 0.55);
 }
+/*  On the row you are ON, the route leaves the blue.
+ *
+ *  The tint that marks the row and the ink of a route are the SAME
+ *  HUE, so the ink lands on its own colour: 3.95:1 in light (the row
+ *  is a saturated `--bulma-link-light`) and 4.42 in dark. The row is
+ *  already marked by that tint and its outline, so the blue says
+ *  nothing there -- and the NAME beside it has always been written
+ *  in the text colour, at 5.89 and 6.59. The route joins it.  */
+.ROUTEMAP_CURRENT .ROUTEMAP_ROUTE {
+    color: var(--bulma-text, #2e333d);
+}
 /*--- reference row: this route's subtree is drawn where the nav owns
  *    it, so the copy reachable from a drawer or the account menu is a
  *    live link without the repeated branch.  Quiet on purpose: it is a

package/src/shell_route_map.js

@@ -268,7 +268,7 @@ function build_body(shell, t)
      *  every keystroke, is what repaints it.  */
     let $count_n = createElement2(["span", {class: "ROUTEMAP_COUNT_N"}, ""]);
     let $count = createElement2(
-        ["span", {class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden"},
+        ["span", {class: "ROUTEMAP_COUNT is-size-7 yui-text-quiet is-hidden"},
             [$count_n]]
     );
     /*  References are hidden by default and revealed by this toggle.

package/src/tabulator.css

@@ -227,9 +227,16 @@
     border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
 }
 
-[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {
-    color: var(--bulma-text-weak, #8a8f98);
+/*  Tabulator's inputs are bare `input`s, so Bulma's placeholder colour
+ *  never reaches them: in the light scheme they were left at the
+ *  BROWSER's default (3.09:1) and in the dark one they were painted
+ *  with `--bulma-text-weak` (4.07). One rule for every scheme, the same
+ *  70% of the text colour the rest of the library uses -- `filter
+ *  column…` is what says what that box does.  */
+.tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
+.tabulator .tabulator-header .tabulator-header-filter input::placeholder {
+    color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.7);
+    opacity: 1;
 }
 
 /* ====================================================================
@@ -375,10 +382,6 @@
         caret-color: var(--bulma-text-strong, #f5f6f7);
         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 {
-        color: var(--bulma-text-weak, #8a8f98);
-    }
     /*  same furniture-not-editor rule as [data-theme=dark] above  */
     [data-theme=system] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
     [data-theme=system] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {

package/src/yui_graph_camera.js

@@ -110,7 +110,7 @@ export function yui_graph_camera_items(gobj, graph, wide)
     return [
         camera_button(gobj, "yi-magnifying-glass-plus", "EV_ZOOM_IN", "zoom in", wide),
         camera_button(gobj, "yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out", wide),
-        ['span', {class: 'GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
+        ['span', {class: 'GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 yui-text-quiet',
                   style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
                   title: t('zoom level'), 'data-i18n-title': 'zoom level'},
          yui_graph_zoom_text(graph)],