@parallelworks/ui 0.50.0 → 0.51.0

package/dist/theme/derive.d.ts

@@ -1,5 +1,5 @@
 import { type CodeStyle, type Scheme } from './model.js';
-export declare const THEME_TOKENS: readonly ['--theme-app-bg', '--theme-panel-bg', '--theme-panel-hover', '--theme-muted-panel-bg', '--theme-hover', '--theme-input-bg', '--theme-input-disabled-bg', '--theme-app', '--theme-muted-text-color', '--theme-placeholder', '--theme-link', '--theme-border', '--theme-border-strong', '--theme-accent', '--theme-accent-text', '--theme-accent-hover', '--theme-accent-subtle', '--theme-focus', '--theme-focus-ring', '--theme-success', '--theme-success-muted', '--theme-error', '--theme-error-muted', '--theme-warning', '--theme-warning-muted', '--theme-info', '--theme-info-muted', '--theme-favorite', '--theme-favorite-muted', '--theme-shadow-sm', '--theme-shadow', '--theme-shadow-lg', '--theme-shadow-xl', '--theme-sidebar-bg', '--theme-sidebar-text', '--theme-sidebar-hover', '--theme-sidebar-active-bg', '--theme-sidebar-active-text', '--theme-code-bg', '--theme-code-text', '--theme-code-comment', '--theme-code-keyword', '--theme-code-string', '--theme-code-number', '--theme-code-function', '--theme-code-type', '--theme-code-property', '--theme-ansi-black', '--theme-ansi-red', '--theme-ansi-green', '--theme-ansi-yellow', '--theme-ansi-blue', '--theme-ansi-magenta', '--theme-ansi-cyan', '--theme-ansi-white'];
+export declare const THEME_TOKENS: readonly ['--theme-app-bg', '--theme-panel-bg', '--theme-panel-hover', '--theme-muted-panel-bg', '--theme-hover', '--theme-input-bg', '--theme-input-disabled-bg', '--theme-app', '--theme-muted-text-color', '--theme-placeholder', '--theme-link', '--theme-border', '--theme-border-strong', '--theme-accent', '--theme-accent-text', '--theme-accent-hover', '--theme-accent-subtle', '--theme-focus', '--theme-focus-ring', '--theme-success', '--theme-success-text', '--theme-success-solid', '--theme-success-muted', '--theme-error', '--theme-error-text', '--theme-error-solid', '--theme-error-muted', '--theme-warning', '--theme-warning-text', '--theme-warning-solid', '--theme-warning-muted', '--theme-info', '--theme-info-text', '--theme-info-solid', '--theme-info-muted', '--theme-favorite', '--theme-favorite-text', '--theme-favorite-solid', '--theme-favorite-muted', '--theme-shadow-sm', '--theme-shadow', '--theme-shadow-lg', '--theme-shadow-xl', '--theme-sidebar-bg', '--theme-sidebar-text', '--theme-sidebar-hover', '--theme-sidebar-active-bg', '--theme-sidebar-active-text', '--theme-code-bg', '--theme-code-text', '--theme-code-comment', '--theme-code-keyword', '--theme-code-string', '--theme-code-number', '--theme-code-function', '--theme-code-type', '--theme-code-property', '--theme-ansi-black', '--theme-ansi-red', '--theme-ansi-green', '--theme-ansi-yellow', '--theme-ansi-blue', '--theme-ansi-magenta', '--theme-ansi-cyan', '--theme-ansi-white'];
 export type ThemeToken = (typeof THEME_TOKENS)[number];
 export type ThemeVariables = Record<ThemeToken, string>;
 /** The tokens the sidebar owns. A host's chrome may supply its own fallbacks, so the stylesheet gives them no defaults. */

package/dist/theme/derive.js

@@ -23,14 +23,24 @@ var THEME_TOKENS = [
 	"--theme-focus",
 	"--theme-focus-ring",
 	"--theme-success",
+	"--theme-success-text",
+	"--theme-success-solid",
 	"--theme-success-muted",
 	"--theme-error",
+	"--theme-error-text",
+	"--theme-error-solid",
 	"--theme-error-muted",
 	"--theme-warning",
+	"--theme-warning-text",
+	"--theme-warning-solid",
 	"--theme-warning-muted",
 	"--theme-info",
+	"--theme-info-text",
+	"--theme-info-solid",
 	"--theme-info-muted",
 	"--theme-favorite",
+	"--theme-favorite-text",
+	"--theme-favorite-solid",
 	"--theme-favorite-muted",
 	"--theme-shadow-sm",
 	"--theme-shadow",
@@ -131,7 +141,7 @@ function targets(k) {
 			50,
 			65
 		]),
-		focus: { wcag: byContrast(k, [
+		graphic: { wcag: byContrast(k, [
 			3,
 			3,
 			4.5
@@ -141,9 +151,14 @@ function targets(k) {
 			2.2,
 			3
 		]) },
-		onAccent: { wcag: 4.5 }
+		label: { wcag: 4.5 }
 	};
 }
+var WHITE = {
+	l: 1,
+	c: 0,
+	h: 0
+};
 var STATUS = {
 	success: 150,
 	error: 27,
@@ -217,7 +232,7 @@ function build(scheme, options) {
 	const t = targets(k);
 	const paints = {};
 	const checks = [];
-	const hexOf = (d) => typeof d === "string" ? toHex(paints[d].color) : compositeHex(paints[d.fill], paints[d.over]);
+	const hexOf = (d) => typeof d === "string" ? toHex(paints[d].color) : "fixed" in d ? toHex(d.fixed) : compositeHex(paints[d.fill], paints[d.over]);
 	const set = (token, color, alpha) => {
 		paints[token] = alpha === void 0 ? { color } : {
 			color,
@@ -287,7 +302,7 @@ function build(scheme, options) {
 		"--theme-app-bg",
 		"--theme-panel-bg",
 		"--theme-input-bg"
-	], t.focus), dark ? .35 : .25);
+	], t.graphic), dark ? .35 : .25);
 	solved("--theme-border-strong", border, [
 		"--theme-app-bg",
 		"--theme-panel-bg",
@@ -303,18 +318,21 @@ function build(scheme, options) {
 		l: white ? 1 : 0,
 		c: 0,
 		h: 0
-	}, ["--theme-accent", "--theme-accent-hover"], t.onAccent);
+	}, ["--theme-accent", "--theme-accent-hover"], t.label);
 	const mutedAlpha = dark ? .15 : .1;
+	const statusOn = [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-panel-hover",
+		"--theme-muted-panel-bg",
+		"--theme-hover",
+		"--theme-input-bg"
+	];
 	for (const [name, hue] of Object.entries(STATUS)) {
 		const token = `--theme-${name}`;
 		const muted = `--theme-${name}-muted`;
-		const plain = [
-			"--theme-app-bg",
-			"--theme-panel-bg",
-			"--theme-muted-panel-bg"
-		];
 		const on = [
-			...plain,
+			...statusOn,
 			{
 				fill: muted,
 				over: "--theme-app-bg"
@@ -324,18 +342,24 @@ function build(scheme, options) {
 				over: "--theme-panel-bg"
 			}
 		];
-		let color = solve({
-			l: dark ? .75 : .55,
-			c: .17,
+		let vivid = solve({
+			l: dark ? .7 : .66,
+			c: .2,
 			h: hue
-		}, plain.map(hexOf), t.secondary);
+		}, statusOn.map(hexOf), t.graphic);
 		for (let round = 0; round < 6; round++) {
-			set(muted, color, mutedAlpha);
-			const next = solve(color, on.map(hexOf), t.secondary);
-			if (next === color) break;
-			color = next;
+			set(muted, vivid, mutedAlpha);
+			const next = solve(vivid, on.map(hexOf), t.graphic);
+			if (next === vivid) break;
+			vivid = next;
 		}
-		keep(token, color, on, t.secondary);
+		keep(token, vivid, on, t.graphic);
+		solved(`--theme-${name}-text`, {
+			l: dark ? .75 : .55,
+			c: .17,
+			h: hue
+		}, on, t.secondary);
+		solved(`--theme-${name}-solid`, vivid, [{ fixed: WHITE }], t.label);
 	}
 	const sidebarBase = scheme.sidebar?.base ? oklch(scheme.sidebar.base) : neutral(dark ? Math.max(.08, base.l - .035 * s) : base.l - .035 * s);
 	const sidebarAccent = scheme.sidebar?.accent ? oklch(scheme.sidebar.accent) : accent;
@@ -431,6 +455,7 @@ function p3Overrides(paints, checks) {
 	const show = (token) => shown(paints[token].color, gamutOf(token));
 	const backdrop = (d) => {
 		if (typeof d === "string") return show(d);
+		if ("fixed" in d) return shown(d.fixed, "srgb");
 		const fill = paints[d.fill];
 		return over(show(d.fill), fill.alpha ?? 1, rendered(paints[d.over].color, gamutOf(d.over)));
 	};
@@ -443,7 +468,7 @@ function p3Overrides(paints, checks) {
 				changed = true;
 				if (passes(check)) continue;
 			}
-			for (const d of check.on) for (const token of typeof d === "string" ? [d] : [d.fill, d.over]) changed = wide.delete(token) || changed;
+			for (const d of check.on) for (const token of typeof d === "string" ? [d] : "fixed" in d ? [] : [d.fill, d.over]) changed = wide.delete(token) || changed;
 		}
 		if (!changed) break;
 	}

package/dist/theme/fit.js

@@ -19,10 +19,16 @@ var FLOORS = {
 	"--theme-placeholder": ["--theme-input-bg", 3],
 	"--theme-focus": ["--theme-app-bg", 3],
 	"--theme-accent-text": ["--theme-accent", 4.5],
-	"--theme-success": ["--theme-app-bg", 4.5],
-	"--theme-error": ["--theme-app-bg", 4.5],
-	"--theme-warning": ["--theme-app-bg", 4.5],
-	"--theme-info": ["--theme-app-bg", 4.5],
+	"--theme-success": ["--theme-app-bg", 3],
+	"--theme-success-text": ["--theme-app-bg", 4.5],
+	"--theme-error": ["--theme-app-bg", 3],
+	"--theme-error-text": ["--theme-app-bg", 4.5],
+	"--theme-warning": ["--theme-app-bg", 3],
+	"--theme-warning-text": ["--theme-app-bg", 4.5],
+	"--theme-info": ["--theme-app-bg", 3],
+	"--theme-info-text": ["--theme-app-bg", 4.5],
+	"--theme-favorite": ["--theme-app-bg", 3],
+	"--theme-favorite-text": ["--theme-app-bg", 4.5],
 	"--theme-sidebar-text": ["--theme-sidebar-bg", 4.5],
 	"--theme-sidebar-active-text": ["--theme-sidebar-active-bg", 4.5],
 	"--theme-code-text": ["--theme-code-bg", 4.5],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {