@parallelworks/ui 0.56.0 → 0.58.0

package/dist/theme/derive.d.ts

@@ -1,5 +1,5 @@
 import { type CodeStyle, type Mode, 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-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 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-field', '--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', '--theme-category-1', '--theme-category-1-text', '--theme-category-2', '--theme-category-2-text', '--theme-category-3', '--theme-category-3-text', '--theme-category-4', '--theme-category-4-text', '--theme-category-5', '--theme-category-5-text', '--theme-category-6', '--theme-category-6-text', '--theme-category-7', '--theme-category-7-text', '--theme-category-8', '--theme-category-8-text'];
 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. */
@@ -19,6 +19,7 @@ export interface DeriveOptions {
 export declare const PLACEHOLDER_ON: ThemeToken[];
 /** The surfaces a control's edge sits on: the page, panels, and the control's own fill. */
 export declare const CONTROL_ON: ThemeToken[];
+export declare const CATEGORY_COUNT = 8;
 /** Every token as sRGB, plus display-p3 overrides that keep every contrast the sRGB output meets. */
 export declare function generateTheme(scheme: Scheme, options?: DeriveOptions): GeneratedTheme;
 /** Every `--theme-*` token for a scheme, in sRGB. */

package/dist/theme/derive.js

@@ -15,6 +15,7 @@ var THEME_TOKENS = [
 	"--theme-placeholder",
 	"--theme-link",
 	"--theme-border",
+	"--theme-border-field",
 	"--theme-border-strong",
 	"--theme-accent",
 	"--theme-accent-text",
@@ -67,7 +68,23 @@ var THEME_TOKENS = [
 	"--theme-ansi-blue",
 	"--theme-ansi-magenta",
 	"--theme-ansi-cyan",
-	"--theme-ansi-white"
+	"--theme-ansi-white",
+	"--theme-category-1",
+	"--theme-category-1-text",
+	"--theme-category-2",
+	"--theme-category-2-text",
+	"--theme-category-3",
+	"--theme-category-3-text",
+	"--theme-category-4",
+	"--theme-category-4-text",
+	"--theme-category-5",
+	"--theme-category-5-text",
+	"--theme-category-6",
+	"--theme-category-6-text",
+	"--theme-category-7",
+	"--theme-category-7-text",
+	"--theme-category-8",
+	"--theme-category-8-text"
 ];
 /** The tokens the sidebar owns. A host's chrome may supply its own fallbacks, so the stylesheet gives them no defaults. */
 var SIDEBAR_TOKENS = THEME_TOKENS.filter((t) => t.startsWith("--theme-sidebar-"));
@@ -153,6 +170,11 @@ function targets(k) {
 			3,
 			4.5
 		]) },
+		field: { wcag: byContrast(k, [
+			1.3,
+			1.5,
+			3
+		]) },
 		label: { wcag: 4.5 }
 	};
 }
@@ -189,6 +211,11 @@ var SYNTAX = {
 	type: 195,
 	property: 240
 };
+var CATEGORY_START = 20;
+var CATEGORY_CHROMA = {
+	light: .055,
+	dark: .06
+};
 var CODE_CHROMA = {
 	balanced: .13,
 	vivid: .19,
@@ -319,6 +346,7 @@ function build(scheme, options) {
 	];
 	set("--theme-focus-ring", solved("--theme-focus", accent, focusOn, meets(toHex(accent), focusOn.map(hexOf), t.graphic) ? t.graphic : { wcag: t.secondary.wcag }), dark ? .35 : .25);
 	solved("--theme-border-strong", border, CONTROL_ON, t.graphic);
+	solved("--theme-border-field", border, CONTROL_ON, t.field);
 	set("--theme-accent", accent);
 	const white = contrastRatio("#ffffff", toHex(accent)) >= 4.5;
 	set("--theme-accent-hover", {
@@ -431,6 +459,29 @@ function build(scheme, options) {
 	}, codeOn, t.secondary);
 	keep("--theme-ansi-black", dark ? comment : codeText, codeOn, t.secondary);
 	keep("--theme-ansi-white", dark ? codeText : comment, codeOn, t.secondary);
+	const categoryL = (dark ? clamp(base.l + .14, .36, .46) : clamp(base.l - .07, .86, .9)) - dir * byContrast(k, [
+		0,
+		0,
+		.03
+	]);
+	for (let i = 0; i < 8; i++) {
+		const h = (CATEGORY_START + 45 * i) % 360;
+		const token = `--theme-category-${i + 1}`;
+		set(token, {
+			l: categoryL,
+			c: CATEGORY_CHROMA[dark ? "dark" : "light"],
+			h
+		});
+		solved(`--theme-category-${i + 1}-text`, dark ? {
+			l: .9,
+			c: .05,
+			h
+		} : {
+			l: .42,
+			c: .08,
+			h
+		}, [token], t.secondary);
+	}
 	const shade = dark ? .35 : .07;
 	const a = (v) => Number((v * b).toFixed(3));
 	const shadows = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.56.0",
+  "version": "0.58.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": {