@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/theme/colorVision.d.ts

@@ -0,0 +1,23 @@
+import { type Rgb } from './color';
+/** A color vision deficiency, at full severity: red-blind, green-blind or blue-blind. */
+export type ColorVisionDeficiency = 'protanopia' | 'deuteranopia' | 'tritanopia';
+/** A color as a person with a color vision deficiency sees it. */
+export declare function simulateColorVision(color: Rgb, deficiency: ColorVisionDeficiency): Rgb;
+/** The perceived difference between two colors: the CIE76 distance in CIELAB. */
+export declare function colorDifference(first: Rgb, second: Rgb): number;
+/** Two colors of a palette that look too alike, for everyone or with a deficiency. */
+export interface ColorDifferenceCheck {
+    vision: 'typical' | ColorVisionDeficiency;
+    first: string;
+    second: string;
+    difference: number;
+    minimum: number;
+}
+/**
+ * Checks that the colors of a palette (the categorical colors of charts) stay distinct, for
+ * typical vision and under protanopia, deuteranopia and tritanopia: every pair must differ by at
+ * least `minimum` (CIE76, 10 by default, a difference anyone notices side by side). Colors Panneau
+ * can't read are skipped. Returns the pairs below the minimum.
+ */
+export declare function checkColorDifferences(colors: readonly string[], minimum?: number): ColorDifferenceCheck[];
+//# sourceMappingURL=colorVision.d.ts.map

package/dist/theme/colorVision.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorVision.d.ts","sourceRoot":"","sources":["../../src/theme/colorVision.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,SAAS,CAAC;AAE/C,yFAAyF;AACzF,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;AA+BjF,kEAAkE;AAClE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,qBAAqB,GAAG,GAAG,CAMtF;AAWD,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CAI/D;AAED,sFAAsF;AACtF,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,SAAS,GAAG,qBAAqB,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,OAAO,SAAK,GACb,oBAAoB,EAAE,CAoBxB"}

package/dist/theme/colorVision.js

@@ -0,0 +1,140 @@
+import { parseColor } from "./color.js";
+//#region src/theme/colorVision.ts
+/** Simulation matrices of Machado, Oliveira and Fernandes (2009), severity 1, on linear RGB. */
+var MATRICES = {
+	protanopia: [
+		[
+			.152286,
+			1.052583,
+			-.204868
+		],
+		[
+			.114503,
+			.786281,
+			.099216
+		],
+		[
+			-.003882,
+			-.048116,
+			1.051998
+		]
+	],
+	deuteranopia: [
+		[
+			.367322,
+			.860646,
+			-.227968
+		],
+		[
+			.280085,
+			.672501,
+			.047413
+		],
+		[
+			-.01182,
+			.04294,
+			.968881
+		]
+	],
+	tritanopia: [
+		[
+			1.255528,
+			-.076749,
+			-.178779
+		],
+		[
+			-.078411,
+			.930809,
+			.147602
+		],
+		[
+			.004733,
+			.691367,
+			.3039
+		]
+	]
+};
+var toLinear = (channel) => {
+	const value = channel / 255;
+	return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+};
+var fromLinear = (value) => {
+	const clamped = Math.min(1, Math.max(0, value));
+	return (clamped <= .0031308 ? clamped * 12.92 : 1.055 * clamped ** (1 / 2.4) - .055) * 255;
+};
+/** A color as a person with a color vision deficiency sees it. */
+function simulateColorVision(color, deficiency) {
+	const linear = [
+		toLinear(color.r),
+		toLinear(color.g),
+		toLinear(color.b)
+	];
+	const [r = 0, g = 0, b = 0] = MATRICES[deficiency].map((row) => fromLinear(row.reduce((sum, weight, index) => sum + weight * (linear[index] ?? 0), 0)));
+	return {
+		r,
+		g,
+		b
+	};
+}
+function toLab(color) {
+	const [r, g, b] = [
+		toLinear(color.r),
+		toLinear(color.g),
+		toLinear(color.b)
+	];
+	const f = (t) => t > .008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116;
+	const x = f((.4124 * r + .3576 * g + .1805 * b) / .95047);
+	const y = f(.2126 * r + .7152 * g + .0722 * b);
+	const z = f((.0193 * r + .1192 * g + .9505 * b) / 1.08883);
+	return [
+		116 * y - 16,
+		500 * (x - y),
+		200 * (y - z)
+	];
+}
+/** The perceived difference between two colors: the CIE76 distance in CIELAB. */
+function colorDifference(first, second) {
+	const [l1, a1, b1] = toLab(first);
+	const [l2, a2, b2] = toLab(second);
+	return Math.hypot(l1 - l2, a1 - a2, b1 - b2);
+}
+/**
+* Checks that the colors of a palette (the categorical colors of charts) stay distinct, for
+* typical vision and under protanopia, deuteranopia and tritanopia: every pair must differ by at
+* least `minimum` (CIE76, 10 by default, a difference anyone notices side by side). Colors Panneau
+* can't read are skipped. Returns the pairs below the minimum.
+*/
+function checkColorDifferences(colors, minimum = 10) {
+	const parsed = colors.flatMap((color) => {
+		const rgb = parseColor(color);
+		return rgb !== null ? [{
+			color,
+			rgb
+		}] : [];
+	});
+	return [
+		"typical",
+		"protanopia",
+		"deuteranopia",
+		"tritanopia"
+	].flatMap((vision) => {
+		const seen = parsed.map(({ color, rgb }) => ({
+			color,
+			rgb: vision === "typical" ? rgb : simulateColorVision(rgb, vision)
+		}));
+		return seen.flatMap((first, index) => seen.slice(index + 1).flatMap((second) => {
+			const difference = Math.round(colorDifference(first.rgb, second.rgb) * 10) / 10;
+			return difference < minimum ? [{
+				vision,
+				first: first.color,
+				second: second.color,
+				difference,
+				minimum
+			}] : [];
+		}));
+	});
+}
+//#endregion
+export { checkColorDifferences, colorDifference, simulateColorVision };
+
+//# sourceMappingURL=colorVision.js.map

package/dist/theme/colorVision.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorVision.js","names":[],"sources":["../../src/theme/colorVision.ts"],"sourcesContent":["import { type Rgb, parseColor } from './color';\n\n/** A color vision deficiency, at full severity: red-blind, green-blind or blue-blind. */\nexport type ColorVisionDeficiency = 'protanopia' | 'deuteranopia' | 'tritanopia';\n\n/** Simulation matrices of Machado, Oliveira and Fernandes (2009), severity 1, on linear RGB. */\nconst MATRICES: Record<ColorVisionDeficiency, readonly (readonly number[])[]> = {\n    protanopia: [\n        [0.152286, 1.052583, -0.204868],\n        [0.114503, 0.786281, 0.099216],\n        [-0.003882, -0.048116, 1.051998],\n    ],\n    deuteranopia: [\n        [0.367322, 0.860646, -0.227968],\n        [0.280085, 0.672501, 0.047413],\n        [-0.01182, 0.04294, 0.968881],\n    ],\n    tritanopia: [\n        [1.255528, -0.076749, -0.178779],\n        [-0.078411, 0.930809, 0.147602],\n        [0.004733, 0.691367, 0.3039],\n    ],\n};\n\nconst toLinear = (channel: number) => {\n    const value = channel / 255;\n    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;\n};\n\nconst fromLinear = (value: number) => {\n    const clamped = Math.min(1, Math.max(0, value));\n    return (clamped <= 0.0031308 ? clamped * 12.92 : 1.055 * clamped ** (1 / 2.4) - 0.055) * 255;\n};\n\n/** A color as a person with a color vision deficiency sees it. */\nexport function simulateColorVision(color: Rgb, deficiency: ColorVisionDeficiency): Rgb {\n    const linear = [toLinear(color.r), toLinear(color.g), toLinear(color.b)];\n    const [r = 0, g = 0, b = 0] = MATRICES[deficiency].map((row) =>\n        fromLinear(row.reduce((sum, weight, index) => sum + weight * (linear[index] ?? 0), 0)),\n    );\n    return { r, g, b };\n}\n\nfunction toLab(color: Rgb): [number, number, number] {\n    const [r, g, b] = [toLinear(color.r), toLinear(color.g), toLinear(color.b)];\n    const f = (t: number) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);\n    const x = f((0.4124 * r + 0.3576 * g + 0.1805 * b) / 0.95047);\n    const y = f(0.2126 * r + 0.7152 * g + 0.0722 * b);\n    const z = f((0.0193 * r + 0.1192 * g + 0.9505 * b) / 1.08883);\n    return [116 * y - 16, 500 * (x - y), 200 * (y - z)];\n}\n\n/** The perceived difference between two colors: the CIE76 distance in CIELAB. */\nexport function colorDifference(first: Rgb, second: Rgb): number {\n    const [l1, a1, b1] = toLab(first);\n    const [l2, a2, b2] = toLab(second);\n    return Math.hypot(l1 - l2, a1 - a2, b1 - b2);\n}\n\n/** Two colors of a palette that look too alike, for everyone or with a deficiency. */\nexport interface ColorDifferenceCheck {\n    vision: 'typical' | ColorVisionDeficiency;\n    first: string;\n    second: string;\n    difference: number;\n    minimum: number;\n}\n\n/**\n * Checks that the colors of a palette (the categorical colors of charts) stay distinct, for\n * typical vision and under protanopia, deuteranopia and tritanopia: every pair must differ by at\n * least `minimum` (CIE76, 10 by default, a difference anyone notices side by side). Colors Panneau\n * can't read are skipped. Returns the pairs below the minimum.\n */\nexport function checkColorDifferences(\n    colors: readonly string[],\n    minimum = 10,\n): ColorDifferenceCheck[] {\n    const parsed = colors.flatMap((color) => {\n        const rgb = parseColor(color);\n        return rgb !== null ? [{ color, rgb }] : [];\n    });\n    const visions = ['typical', 'protanopia', 'deuteranopia', 'tritanopia'] as const;\n    return visions.flatMap((vision) => {\n        const seen = parsed.map(({ color, rgb }) => ({\n            color,\n            rgb: vision === 'typical' ? rgb : simulateColorVision(rgb, vision),\n        }));\n        return seen.flatMap((first, index) =>\n            seen.slice(index + 1).flatMap((second) => {\n                const difference = Math.round(colorDifference(first.rgb, second.rgb) * 10) / 10;\n                return difference < minimum\n                    ? [{ vision, first: first.color, second: second.color, difference, minimum }]\n                    : [];\n            }),\n        );\n    });\n}\n"],"mappings":";;;AAMA,IAAM,WAA0E;CAC5E,YAAY;EACR;GAAC;GAAU;GAAU;EAAS;EAC9B;GAAC;GAAU;GAAU;EAAQ;EAC7B;GAAC;GAAW;GAAW;EAAQ;CAAC;CAEpC,cAAc;EACV;GAAC;GAAU;GAAU;EAAS;EAC9B;GAAC;GAAU;GAAU;EAAQ;EAC7B;GAAC;GAAU;GAAS;EAAQ;CAAC;CAEjC,YAAY;EACR;GAAC;GAAU;GAAW;EAAS;EAC/B;GAAC;GAAW;GAAU;EAAQ;EAC9B;GAAC;GAAU;GAAU;EAAM;CAAC;AAEpC;AAEA,IAAM,YAAY,YAAoB;CAClC,MAAM,QAAQ,UAAU;CACxB,OAAO,SAAS,SAAU,QAAQ,UAAU,QAAQ,QAAS,UAAU;AAC3E;AAEA,IAAM,cAAc,UAAkB;CAClC,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;CAC9C,QAAQ,WAAW,WAAY,UAAU,QAAQ,QAAQ,YAAY,IAAI,OAAO,QAAS;AAC7F;;AAGA,SAAgB,oBAAoB,OAAY,YAAwC;CACpF,MAAM,SAAS;EAAC,SAAS,MAAM,CAAC;EAAG,SAAS,MAAM,CAAC;EAAG,SAAS,MAAM,CAAC;CAAC;CACvE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,KAAK,SAAS,WAAW,CAAC,KAAK,QACpD,WAAW,IAAI,QAAQ,KAAK,QAAQ,UAAU,MAAM,UAAU,OAAO,UAAU,IAAI,CAAC,CAAC,CACzF;CACA,OAAO;EAAE;EAAG;EAAG;CAAE;AACrB;AAEA,SAAS,MAAM,OAAsC;CACjD,MAAM,CAAC,GAAG,GAAG,KAAK;EAAC,SAAS,MAAM,CAAC;EAAG,SAAS,MAAM,CAAC;EAAG,SAAS,MAAM,CAAC;CAAC;CAC1E,MAAM,KAAK,MAAe,IAAI,UAAW,KAAK,KAAK,CAAC,IAAI,QAAQ,IAAI,KAAK;CACzE,MAAM,IAAI,GAAG,QAAS,IAAI,QAAS,IAAI,QAAS,KAAK,MAAO;CAC5D,MAAM,IAAI,EAAE,QAAS,IAAI,QAAS,IAAI,QAAS,CAAC;CAChD,MAAM,IAAI,GAAG,QAAS,IAAI,QAAS,IAAI,QAAS,KAAK,OAAO;CAC5D,OAAO;EAAC,MAAM,IAAI;EAAI,OAAO,IAAI;EAAI,OAAO,IAAI;CAAE;AACtD;;AAGA,SAAgB,gBAAgB,OAAY,QAAqB;CAC7D,MAAM,CAAC,IAAI,IAAI,MAAM,MAAM,KAAK;CAChC,MAAM,CAAC,IAAI,IAAI,MAAM,MAAM,MAAM;CACjC,OAAO,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE;AAC/C;;;;;;;AAiBA,SAAgB,sBACZ,QACA,UAAU,IACY;CACtB,MAAM,SAAS,OAAO,SAAS,UAAU;EACrC,MAAM,MAAM,WAAW,KAAK;EAC5B,OAAO,QAAQ,OAAO,CAAC;GAAE;GAAO;EAAI,CAAC,IAAI,CAAA;CAC7C,CAAC;CAED,OAAO;EADU;EAAW;EAAc;EAAgB;CACnD,CAAA,CAAQ,SAAS,WAAW;EAC/B,MAAM,OAAO,OAAO,KAAK,EAAE,OAAO,WAAW;GACzC;GACA,KAAK,WAAW,YAAY,MAAM,oBAAoB,KAAK,MAAM;EACrE,EAAE;EACF,OAAO,KAAK,SAAS,OAAO,UACxB,KAAK,MAAM,QAAQ,CAAC,CAAC,CAAC,SAAS,WAAW;GACtC,MAAM,aAAa,KAAK,MAAM,gBAAgB,MAAM,KAAK,OAAO,GAAG,IAAI,EAAE,IAAI;GAC7E,OAAO,aAAa,UACd,CAAC;IAAE;IAAQ,OAAO,MAAM;IAAO,QAAQ,OAAO;IAAO;IAAY;GAAQ,CAAC,IAC1E,CAAA;EACV,CAAC,CACL;CACJ,CAAC;AACL"}

package/dist/theme/componentTokens.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The tokens of one component: CSS variables named `--panneau-<component>-<token>`, with their
+ * default values (decision 0024).
+ */
+export interface ComponentTokens<Component extends string = string, Name extends string = string> {
+    /**
+     * The component or the part it styles, as in its `panneau-<component>` class (`button`,
+     * `badge`), or a part shared by several components (`input`, `field`, `list-box`, `calendar`).
+     */
+    readonly component: Component;
+    /** Default values, keyed by token name without the leading `--`: `panneau-button-radius`. */
+    readonly tokens: Readonly<Record<Name, string>>;
+}
+/**
+ * Declares the tokens of a component, as `{ <token>: <default> }`. Each token becomes the CSS
+ * variable `--panneau-<component>-<token>`.
+ *
+ * The component's CSS reads every token with its default as the fallback,
+ * `var(--panneau-button-radius, var(--panneau-radius-md))`, and never declares it: a value set by a
+ * theme, a scope or any ancestor element then reaches the component, and semantic tokens resolve
+ * where the component is. A test checks that the CSS and this declaration agree.
+ */
+export declare function defineComponentTokens<const Component extends string, const Tokens extends Record<string, string>>(component: Component, tokens: Tokens): ComponentTokens<Component, `panneau-${Component}-${keyof Tokens & string}`>;
+//# sourceMappingURL=componentTokens.d.ts.map

package/dist/theme/componentTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentTokens.d.ts","sourceRoot":"","sources":["../../src/theme/componentTokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM;IAC5F;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;CACnD;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACjC,KAAK,CAAC,SAAS,SAAS,MAAM,EAC9B,KAAK,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAE3C,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,GACf,eAAe,CAAC,SAAS,EAAE,WAAW,SAAS,IAAI,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,CAY7E"}

package/dist/theme/componentTokens.js

@@ -0,0 +1,20 @@
+//#region src/theme/componentTokens.ts
+/**
+* Declares the tokens of a component, as `{ <token>: <default> }`. Each token becomes the CSS
+* variable `--panneau-<component>-<token>`.
+*
+* The component's CSS reads every token with its default as the fallback,
+* `var(--panneau-button-radius, var(--panneau-radius-md))`, and never declares it: a value set by a
+* theme, a scope or any ancestor element then reaches the component, and semantic tokens resolve
+* where the component is. A test checks that the CSS and this declaration agree.
+*/
+function defineComponentTokens(component, tokens) {
+	return {
+		component,
+		tokens: Object.freeze(Object.fromEntries(Object.entries(tokens).map(([name, value]) => [`panneau-${component}-${name}`, value])))
+	};
+}
+//#endregion
+export { defineComponentTokens };
+
+//# sourceMappingURL=componentTokens.js.map

package/dist/theme/componentTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentTokens.js","names":[],"sources":["../../src/theme/componentTokens.ts"],"sourcesContent":["/**\n * The tokens of one component: CSS variables named `--panneau-<component>-<token>`, with their\n * default values (decision 0024).\n */\nexport interface ComponentTokens<Component extends string = string, Name extends string = string> {\n    /**\n     * The component or the part it styles, as in its `panneau-<component>` class (`button`,\n     * `badge`), or a part shared by several components (`input`, `field`, `list-box`, `calendar`).\n     */\n    readonly component: Component;\n    /** Default values, keyed by token name without the leading `--`: `panneau-button-radius`. */\n    readonly tokens: Readonly<Record<Name, string>>;\n}\n\n/**\n * Declares the tokens of a component, as `{ <token>: <default> }`. Each token becomes the CSS\n * variable `--panneau-<component>-<token>`.\n *\n * The component's CSS reads every token with its default as the fallback,\n * `var(--panneau-button-radius, var(--panneau-radius-md))`, and never declares it: a value set by a\n * theme, a scope or any ancestor element then reaches the component, and semantic tokens resolve\n * where the component is. A test checks that the CSS and this declaration agree.\n */\nexport function defineComponentTokens<\n    const Component extends string,\n    const Tokens extends Record<string, string>,\n>(\n    component: Component,\n    tokens: Tokens,\n): ComponentTokens<Component, `panneau-${Component}-${keyof Tokens & string}`> {\n    return {\n        component,\n        tokens: Object.freeze(\n            Object.fromEntries(\n                Object.entries(tokens).map(([name, value]) => [\n                    `panneau-${component}-${name}`,\n                    value,\n                ]),\n            ),\n        ) as Record<`panneau-${Component}-${keyof Tokens & string}`, string>,\n    };\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,sBAIZ,WACA,QAC2E;CAC3E,OAAO;EACH;EACA,QAAQ,OAAO,OACX,OAAO,YACH,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAAW,CAC1C,WAAW,UAAS,GAAI,QACxB,KAAK,CACR,CACL,CACJ;CACJ;AACJ"}

package/dist/theme/components.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The component tokens of `@panneau/ui` and their defaults, by component: what a theme, a scope or
+ * a project's CSS can set to restyle one component without touching the others (decision 0024).
+ */
+export declare const componentTokens: Readonly<{
+    alert: Readonly<Record<"panneau-alert-radius" | "panneau-alert-gap" | "panneau-alert-padding-y" | "panneau-alert-padding-x" | "panneau-alert-border-width" | "panneau-alert-title-font-weight", string>>;
+    badge: Readonly<Record<"panneau-badge-height" | "panneau-badge-radius" | "panneau-badge-gap" | "panneau-badge-padding-x" | "panneau-badge-border-width" | "panneau-badge-font-size" | "panneau-badge-font-weight", string>>;
+    button: Readonly<Record<"panneau-button-radius" | "panneau-button-gap" | "panneau-button-padding-x" | "panneau-button-border-width" | "panneau-button-font-size" | "panneau-button-font-weight" | "panneau-button-padding-x-sm" | "panneau-button-font-size-sm", string>>;
+    calendar: Readonly<Record<"panneau-calendar-cell-size" | "panneau-calendar-cell-radius" | "panneau-calendar-selected-color" | "panneau-calendar-selected-bg", string>>;
+    card: Readonly<Record<"panneau-card-radius" | "panneau-card-gap" | "panneau-card-padding-y" | "panneau-card-padding-x" | "panneau-card-border-width" | "panneau-card-title-font-weight" | "panneau-card-bg" | "panneau-card-border-color" | "panneau-card-shadow" | "panneau-card-header-padding-y" | "panneau-card-title-font-size", string>>;
+    checkbox: Readonly<Record<"panneau-checkbox-size" | "panneau-checkbox-radius" | "panneau-checkbox-bg" | "panneau-checkbox-border-color" | "panneau-checkbox-checked-color" | "panneau-checkbox-checked-bg", string>>;
+    container: Readonly<Record<"panneau-container-padding-x" | "panneau-container-width-sm" | "panneau-container-width-md" | "panneau-container-width-lg" | "panneau-container-width-xl", string>>;
+    dialog: Readonly<Record<"panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-backdrop", string>>;
+    disclosure: Readonly<Record<"panneau-disclosure-gap" | "panneau-disclosure-title-font-weight" | "panneau-disclosure-title-font-size", string>>;
+    divider: Readonly<Record<"panneau-divider-color" | "panneau-divider-width", string>>;
+    field: Readonly<Record<"panneau-field-gap" | "panneau-field-label-font-size" | "panneau-field-label-font-weight", string>>;
+    grid: Readonly<Record<"panneau-grid-gap", string>>;
+    heading: Readonly<Record<"panneau-heading-color" | "panneau-heading-font-family" | "panneau-heading-display-font-family" | "panneau-heading-1-font-size" | "panneau-heading-1-font-weight" | "panneau-heading-1-line-height" | "panneau-heading-1-letter-spacing" | "panneau-heading-2-font-size" | "panneau-heading-2-font-weight" | "panneau-heading-2-line-height" | "panneau-heading-2-letter-spacing" | "panneau-heading-3-font-size" | "panneau-heading-3-font-weight" | "panneau-heading-3-line-height" | "panneau-heading-3-letter-spacing" | "panneau-heading-4-font-size" | "panneau-heading-4-font-weight" | "panneau-heading-4-line-height" | "panneau-heading-4-letter-spacing" | "panneau-heading-display-1-font-size" | "panneau-heading-display-1-font-weight" | "panneau-heading-display-1-line-height" | "panneau-heading-display-1-letter-spacing" | "panneau-heading-display-2-font-size" | "panneau-heading-display-2-font-weight" | "panneau-heading-display-2-line-height" | "panneau-heading-display-2-letter-spacing", string>>;
+    inline: Readonly<Record<"panneau-inline-gap", string>>;
+    input: Readonly<Record<"panneau-input-radius" | "panneau-input-padding-x" | "panneau-input-border-width" | "panneau-input-bg" | "panneau-input-border-color" | "panneau-input-border-color-hover", string>>;
+    'list-box': Readonly<Record<"panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-radius" | "panneau-list-box-item-bg-hover", string>>;
+    'number-input': Readonly<Record<"panneau-number-input-stepper-width", string>>;
+    popover: Readonly<Record<"panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow", string>>;
+    prose: Readonly<Record<"panneau-prose-gap" | "panneau-prose-border-color" | "panneau-prose-line-height" | "panneau-prose-heading-gap" | "panneau-prose-list-indent" | "panneau-prose-link-color" | "panneau-prose-code-font-size" | "panneau-prose-code-color" | "panneau-prose-code-bg" | "panneau-prose-code-radius" | "panneau-prose-quote-border-color" | "panneau-prose-quote-color", string>>;
+    radio: Readonly<Record<"panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width", string>>;
+    spinner: Readonly<Record<"panneau-spinner-border-width", string>>;
+    stack: Readonly<Record<"panneau-stack-gap", string>>;
+    switch: Readonly<Record<"panneau-switch-height" | "panneau-switch-width" | "panneau-switch-radius" | "panneau-switch-checked-bg" | "panneau-switch-track-bg" | "panneau-switch-thumb-size" | "panneau-switch-thumb-bg" | "panneau-switch-checked-thumb-bg", string>>;
+    tabs: Readonly<Record<"panneau-tabs-gap" | "panneau-tabs-border-color" | "panneau-tabs-tab-padding-x" | "panneau-tabs-tab-font-weight" | "panneau-tabs-tab-color" | "panneau-tabs-indicator-height" | "panneau-tabs-tab-color-selected" | "panneau-tabs-indicator-color", string>>;
+    text: Readonly<Record<"panneau-text-muted-color", string>>;
+    toast: Readonly<Record<"panneau-toast-width" | "panneau-toast-radius" | "panneau-toast-bg" | "panneau-toast-border-color" | "panneau-toast-shadow" | "panneau-toast-tone-width", string>>;
+    tooltip: Readonly<Record<"panneau-tooltip-color" | "panneau-tooltip-radius" | "panneau-tooltip-padding-y" | "panneau-tooltip-padding-x" | "panneau-tooltip-font-size" | "panneau-tooltip-bg", string>>;
+}>;
+/** The name of a component token of `@panneau/ui`, without the leading `--`. */
+export type ComponentTokenName = {
+    [Component in keyof typeof componentTokens]: keyof (typeof componentTokens)[Component];
+}[keyof typeof componentTokens];
+//# sourceMappingURL=components.d.ts.map

package/dist/theme/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/theme/components.ts"],"names":[],"mappings":"AA4BA;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4B1B,CAAC;AAEH,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;KAC5B,SAAS,IAAI,MAAM,OAAO,eAAe,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC;CACzF,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC"}

package/dist/theme/components.js

@@ -0,0 +1,65 @@
+import { alertTokens } from "../alert/tokens.js";
+import { badgeTokens } from "../badge/tokens.js";
+import { buttonTokens } from "../button/tokens.js";
+import { cardTokens } from "../card/tokens.js";
+import { checkboxTokens } from "../checkbox/tokens.js";
+import { containerTokens } from "../container/tokens.js";
+import { calendarTokens } from "../date-picker/calendarTokens.js";
+import { dialogTokens } from "../dialog/tokens.js";
+import { disclosureTokens } from "../disclosure/tokens.js";
+import { dividerTokens } from "../divider/tokens.js";
+import { inputTokens } from "../field/inputTokens.js";
+import { fieldTokens } from "../field/tokens.js";
+import { gridTokens } from "../grid/tokens.js";
+import { headingTokens } from "../heading/tokens.js";
+import { inlineTokens } from "../inline/tokens.js";
+import { numberInputTokens } from "../number-input/tokens.js";
+import { popoverTokens } from "../popover/tokens.js";
+import { proseTokens } from "../prose/tokens.js";
+import { radioTokens } from "../radio-group/tokens.js";
+import { listBoxTokens } from "../select/listBoxTokens.js";
+import { spinnerTokens } from "../spinner/tokens.js";
+import { stackTokens } from "../stack/tokens.js";
+import { switchTokens } from "../switch/tokens.js";
+import { tabsTokens } from "../tabs/tokens.js";
+import { textTokens } from "../text/tokens.js";
+import { toastTokens } from "../toast/tokens.js";
+import { tooltipTokens } from "../tooltip/tokens.js";
+//#region src/theme/components.ts
+/**
+* The component tokens of `@panneau/ui` and their defaults, by component: what a theme, a scope or
+* a project's CSS can set to restyle one component without touching the others (decision 0024).
+*/
+var componentTokens = Object.freeze({
+	alert: alertTokens.tokens,
+	badge: badgeTokens.tokens,
+	button: buttonTokens.tokens,
+	calendar: calendarTokens.tokens,
+	card: cardTokens.tokens,
+	checkbox: checkboxTokens.tokens,
+	container: containerTokens.tokens,
+	dialog: dialogTokens.tokens,
+	disclosure: disclosureTokens.tokens,
+	divider: dividerTokens.tokens,
+	field: fieldTokens.tokens,
+	grid: gridTokens.tokens,
+	heading: headingTokens.tokens,
+	inline: inlineTokens.tokens,
+	input: inputTokens.tokens,
+	"list-box": listBoxTokens.tokens,
+	"number-input": numberInputTokens.tokens,
+	popover: popoverTokens.tokens,
+	prose: proseTokens.tokens,
+	radio: radioTokens.tokens,
+	spinner: spinnerTokens.tokens,
+	stack: stackTokens.tokens,
+	switch: switchTokens.tokens,
+	tabs: tabsTokens.tokens,
+	text: textTokens.tokens,
+	toast: toastTokens.tokens,
+	tooltip: tooltipTokens.tokens
+});
+//#endregion
+export { componentTokens };
+
+//# sourceMappingURL=components.js.map

package/dist/theme/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","names":[],"sources":["../../src/theme/components.ts"],"sourcesContent":["import { alertTokens } from '../alert/tokens';\nimport { badgeTokens } from '../badge/tokens';\nimport { buttonTokens } from '../button/tokens';\nimport { cardTokens } from '../card/tokens';\nimport { checkboxTokens } from '../checkbox/tokens';\nimport { containerTokens } from '../container/tokens';\nimport { calendarTokens } from '../date-picker/calendarTokens';\nimport { dialogTokens } from '../dialog/tokens';\nimport { disclosureTokens } from '../disclosure/tokens';\nimport { dividerTokens } from '../divider/tokens';\nimport { inputTokens } from '../field/inputTokens';\nimport { fieldTokens } from '../field/tokens';\nimport { gridTokens } from '../grid/tokens';\nimport { headingTokens } from '../heading/tokens';\nimport { inlineTokens } from '../inline/tokens';\nimport { numberInputTokens } from '../number-input/tokens';\nimport { popoverTokens } from '../popover/tokens';\nimport { proseTokens } from '../prose/tokens';\nimport { radioTokens } from '../radio-group/tokens';\nimport { listBoxTokens } from '../select/listBoxTokens';\nimport { spinnerTokens } from '../spinner/tokens';\nimport { stackTokens } from '../stack/tokens';\nimport { switchTokens } from '../switch/tokens';\nimport { tabsTokens } from '../tabs/tokens';\nimport { textTokens } from '../text/tokens';\nimport { toastTokens } from '../toast/tokens';\nimport { tooltipTokens } from '../tooltip/tokens';\n\n/**\n * The component tokens of `@panneau/ui` and their defaults, by component: what a theme, a scope or\n * a project's CSS can set to restyle one component without touching the others (decision 0024).\n */\nexport const componentTokens = Object.freeze({\n    alert: alertTokens.tokens,\n    badge: badgeTokens.tokens,\n    button: buttonTokens.tokens,\n    calendar: calendarTokens.tokens,\n    card: cardTokens.tokens,\n    checkbox: checkboxTokens.tokens,\n    container: containerTokens.tokens,\n    dialog: dialogTokens.tokens,\n    disclosure: disclosureTokens.tokens,\n    divider: dividerTokens.tokens,\n    field: fieldTokens.tokens,\n    grid: gridTokens.tokens,\n    heading: headingTokens.tokens,\n    inline: inlineTokens.tokens,\n    input: inputTokens.tokens,\n    'list-box': listBoxTokens.tokens,\n    'number-input': numberInputTokens.tokens,\n    popover: popoverTokens.tokens,\n    prose: proseTokens.tokens,\n    radio: radioTokens.tokens,\n    spinner: spinnerTokens.tokens,\n    stack: stackTokens.tokens,\n    switch: switchTokens.tokens,\n    tabs: tabsTokens.tokens,\n    text: textTokens.tokens,\n    toast: toastTokens.tokens,\n    tooltip: tooltipTokens.tokens,\n});\n\n/** The name of a component token of `@panneau/ui`, without the leading `--`. */\nexport type ComponentTokenName = {\n    [Component in keyof typeof componentTokens]: keyof (typeof componentTokens)[Component];\n}[keyof typeof componentTokens];\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,OAAO,OAAO;CACzC,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,QAAQ,aAAa;CACrB,UAAU,eAAe;CACzB,MAAM,WAAW;CACjB,UAAU,eAAe;CACzB,WAAW,gBAAgB;CAC3B,QAAQ,aAAa;CACrB,YAAY,iBAAiB;CAC7B,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,MAAM,WAAW;CACjB,SAAS,cAAc;CACvB,QAAQ,aAAa;CACrB,OAAO,YAAY;CACnB,YAAY,cAAc;CAC1B,gBAAgB,kBAAkB;CAClC,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,QAAQ,aAAa;CACrB,MAAM,WAAW;CACjB,MAAM,WAAW;CACjB,OAAO,YAAY;CACnB,SAAS,cAAc;AAC3B,CAAC"}

package/dist/theme/defineTheme.d.ts

@@ -0,0 +1,85 @@
+import { type ComponentTokenName } from './components';
+import type { ThemeFont } from './fonts';
+import { type SemanticTokenName } from './semanticTokens';
+import type { Density, Theme } from './theme';
+import type { ToneInput } from './tones';
+/**
+ * Tokens that a project adds, such as those of its own components: declare them here so that
+ * `defineTheme()` accepts them.
+ *
+ * ```ts
+ * declare module '@panneau/ui' {
+ *     interface PanneauTokens {
+ *         'panneau-map-marker-color': true;
+ *     }
+ * }
+ * ```
+ */
+export interface PanneauTokens {
+}
+/** The variable of a palette color: `panneau-palette-orange`. */
+export type PaletteTokenName = `panneau-palette-${string}`;
+/**
+ * The name of a token a theme can set, without the leading `--`: a semantic token, a component
+ * token, a palette color, or a token declared in `PanneauTokens`.
+ */
+export type TokenName = SemanticTokenName | ComponentTokenName | PaletteTokenName | (keyof PanneauTokens & string);
+/** Values of tokens, keyed by their name: only known names type-check. */
+export type ThemeTokens = {
+    [Name in SemanticTokenName | ComponentTokenName | (keyof PanneauTokens & string)]?: string;
+} & {
+    [Name in PaletteTokenName]?: string;
+};
+/** A theme as `defineTheme()` takes it: like `Theme`, with typed tokens and `extends`. */
+export interface ThemeDefinition {
+    /** A name for theme pickers. */
+    label?: string;
+    /** Themes this one builds on, in order: its own values override theirs. */
+    extends?: Theme | readonly Theme[];
+    /** Tokens of the light scheme, or of both schemes when `dark` does not set them. */
+    tokens?: ThemeTokens;
+    /** Tokens that change in the dark scheme. */
+    dark?: ThemeTokens;
+    /** Raw colors, used with `var(--panneau-palette-<name>)`. */
+    palette?: Record<string, string>;
+    /** Tones added or redefined by the theme. Declare added tones in `PanneauTones`. */
+    tones?: Record<string, ToneInput>;
+    /** Named variants of components. Declare them in `BadgeVariants` (and the like). */
+    components?: Record<string, {
+        variants?: Record<string, ThemeTokens>;
+    }>;
+    /** Tokens of each density, which change with the density of the root. */
+    densities?: Partial<Record<Exclude<Density, 'auto'>, ThemeTokens>>;
+    /** Font faces and font stylesheets. */
+    fonts?: ThemeFont[];
+}
+/**
+ * Merges themes, in order: each one overrides the tokens, palette colors, tones and variants of
+ * those before it. A token a theme sets in `tokens` but not in `dark` applies to both schemes, so it
+ * also replaces the dark value of earlier themes. Variants merge token by token; tones are replaced
+ * whole; densities merge token by token; fonts add up. The label is the last one set. Same as `mergeThemes()` of `@panneau/protocol`.
+ */
+export declare function mergeThemes(...themes: readonly Partial<Theme>[]): Theme;
+/**
+ * Tokens of a theme (in its tokens, dark tokens, densities and variants) that Panneau doesn't know although they are in its namespaces
+ * (`panneau-color-*`, `panneau-button-*`…): most likely typos. Tokens of a project's own components
+ * are outside these namespaces, and palette colors are always accepted.
+ */
+export declare function findUnknownTokens(theme: Theme): string[];
+/**
+ * Declares a theme: TypeScript checks the names of its tokens, and `extends` builds it on other
+ * themes (`bootstrapTheme`, a shared brand theme), whose values its own override. It returns a
+ * plain `Theme`, which `PanneauRoot`, plugins and JSON files all take. Tokens that Panneau doesn't
+ * know in its own namespaces, most likely typos, are reported in the console.
+ *
+ * ```ts
+ * const brand = defineTheme({
+ *     palette: { orange: '#f25c05' },
+ *     tokens: { 'panneau-color-accent': 'var(--panneau-palette-orange)' },
+ *     tones: { signal: 'var(--panneau-palette-orange)' },
+ * });
+ * const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });
+ * ```
+ */
+export declare function defineTheme(definition: ThemeDefinition): Theme;
+//# sourceMappingURL=defineTheme.d.ts.map

package/dist/theme/defineTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defineTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,aAAa;CAAG;AAEjC,iEAAiE;AACjE,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,MAAM,EAAE,CAAC;AAE3D;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB,iBAAiB,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC;AAE/F,0EAA0E;AAC1E,MAAM,MAAM,WAAW,GAAG;KACrB,IAAI,IAAI,iBAAiB,GAAG,kBAAkB,GAAG,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM;CAC7F,GAAG;KAAG,IAAI,IAAI,gBAAgB,CAAC,CAAC,EAAE,MAAM;CAAE,CAAC;AAE5C,0FAA0F;AAC1F,MAAM,WAAW,eAAe;IAC5B,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,EAAE,CAAC;IACnC,oFAAoF;IACpF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;IACxE,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IACnE,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACvB;AAmED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,GAAG,MAAM,EAAE,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAgCvE;AAgBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,CAmBxD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,KAAK,CAY9D"}

package/dist/theme/defineTheme.js

@@ -0,0 +1,130 @@
+import { componentTokens } from "./components.js";
+import { SEMANTIC_TOKENS } from "./semanticTokens.js";
+//#region src/theme/defineTheme.ts
+function mergeRecords(first, second) {
+	return first === void 0 && second === void 0 ? void 0 : {
+		...first,
+		...second
+	};
+}
+function mergeComponents(first, second) {
+	const components = mergeRecords(first, second);
+	if (components === void 0) return;
+	return Object.fromEntries(Object.keys(components).map((component) => {
+		const before = first?.[component];
+		const after = second?.[component];
+		const variants = mergeRecords(before?.variants, after?.variants);
+		return [component, {
+			...before,
+			...after,
+			...variants !== void 0 && { variants: Object.fromEntries(Object.keys(variants).map((name) => [name, {
+				...before?.variants?.[name],
+				...after?.variants?.[name]
+			}])) }
+		}];
+	}));
+}
+var DENSITIES = [
+	"compact",
+	"comfortable",
+	"touch"
+];
+function mergeDensities(first, second) {
+	if (first === void 0 && second === void 0) return;
+	const densities = {
+		...first,
+		...second
+	};
+	DENSITIES.forEach((density) => {
+		if (first?.[density] !== void 0 && second?.[density] !== void 0) densities[density] = {
+			...first[density],
+			...second[density]
+		};
+	});
+	return densities;
+}
+function mergeFonts(first, second) {
+	if (first === void 0 && second === void 0) return;
+	const fonts = [...first ?? [], ...second ?? []];
+	return fonts.filter((font, index) => fonts.findIndex((other) => JSON.stringify(other) === JSON.stringify(font)) === index);
+}
+/**
+* Merges themes, in order: each one overrides the tokens, palette colors, tones and variants of
+* those before it. A token a theme sets in `tokens` but not in `dark` applies to both schemes, so it
+* also replaces the dark value of earlier themes. Variants merge token by token; tones are replaced
+* whole; densities merge token by token; fonts add up. The label is the last one set. Same as `mergeThemes()` of `@panneau/protocol`.
+*/
+function mergeThemes(...themes) {
+	return themes.reduce((merged, theme) => {
+		const tokens = theme.tokens ?? {};
+		const dark = mergeRecords(merged.dark !== void 0 ? Object.fromEntries(Object.entries(merged.dark).filter(([name]) => !Object.hasOwn(tokens, name))) : void 0, theme.dark);
+		const result = {
+			...merged,
+			...theme,
+			label: theme.label ?? merged.label,
+			tokens: {
+				...merged.tokens,
+				...tokens
+			},
+			dark: dark !== void 0 && Object.keys(dark).length > 0 ? dark : void 0,
+			palette: mergeRecords(merged.palette, theme.palette),
+			tones: mergeRecords(merged.tones, theme.tones),
+			components: mergeComponents(merged.components, theme.components),
+			densities: mergeDensities(merged.densities, theme.densities),
+			fonts: mergeFonts(merged.fonts, theme.fonts)
+		};
+		return Object.fromEntries(Object.entries(result).filter(([, value]) => value !== void 0));
+	}, { tokens: {} });
+}
+/** The first segments of the semantic tokens, and the components: names Panneau owns. */
+var NAMESPACES = [.../* @__PURE__ */ new Set([
+	...SEMANTIC_TOKENS.map((name) => name.split("-")[1]),
+	...Object.keys(componentTokens),
+	"tone"
+])];
+var KNOWN_TOKENS = /* @__PURE__ */ new Set([...SEMANTIC_TOKENS, ...Object.values(componentTokens).flatMap((tokens) => Object.keys(tokens))]);
+/**
+* Tokens of a theme (in its tokens, dark tokens, densities and variants) that Panneau doesn't know although they are in its namespaces
+* (`panneau-color-*`, `panneau-button-*`…): most likely typos. Tokens of a project's own components
+* are outside these namespaces, and palette colors are always accepted.
+*/
+function findUnknownTokens(theme) {
+	const names = [
+		...Object.keys(theme.tokens),
+		...Object.keys(theme.dark ?? {}),
+		...Object.values(theme.densities ?? {}).flatMap((tokens) => Object.keys(tokens)),
+		...Object.values(theme.components ?? {}).flatMap(({ variants = {} }) => Object.values(variants).flatMap((tokens) => Object.keys(tokens)))
+	];
+	return [...new Set(names.filter((name) => !KNOWN_TOKENS.has(name) && !name.startsWith("panneau-palette-") && NAMESPACES.some((namespace) => name.startsWith(`panneau-${namespace}-`))))];
+}
+/**
+* Declares a theme: TypeScript checks the names of its tokens, and `extends` builds it on other
+* themes (`bootstrapTheme`, a shared brand theme), whose values its own override. It returns a
+* plain `Theme`, which `PanneauRoot`, plugins and JSON files all take. Tokens that Panneau doesn't
+* know in its own namespaces, most likely typos, are reported in the console.
+*
+* ```ts
+* const brand = defineTheme({
+*     palette: { orange: '#f25c05' },
+*     tokens: { 'panneau-color-accent': 'var(--panneau-palette-orange)' },
+*     tones: { signal: 'var(--panneau-palette-orange)' },
+* });
+* const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });
+* ```
+*/
+function defineTheme(definition) {
+	const { extends: extended = [], ...own } = definition;
+	const bases = Array.isArray(extended) ? extended : [extended];
+	const ownTheme = {
+		...own,
+		tokens: own.tokens ?? {}
+	};
+	const theme = mergeThemes(...bases, ownTheme);
+	const unknown = findUnknownTokens(ownTheme);
+	if (unknown.length > 0) console.warn(`[panneau] Unknown tokens in theme${theme.label !== void 0 ? ` "${theme.label}"` : ""}: ${unknown.join(", ")}.`);
+	return theme;
+}
+//#endregion
+export { defineTheme, findUnknownTokens, mergeThemes };
+
+//# sourceMappingURL=defineTheme.js.map

package/dist/theme/defineTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineTheme.js","names":[],"sources":["../../src/theme/defineTheme.ts"],"sourcesContent":["import { type ComponentTokenName, componentTokens } from './components';\nimport type { ThemeFont } from './fonts';\nimport { SEMANTIC_TOKENS, type SemanticTokenName } from './semanticTokens';\nimport type { Density, Theme } from './theme';\nimport type { ToneInput } from './tones';\n\n/**\n * Tokens that a project adds, such as those of its own components: declare them here so that\n * `defineTheme()` accepts them.\n *\n * ```ts\n * declare module '@panneau/ui' {\n *     interface PanneauTokens {\n *         'panneau-map-marker-color': true;\n *     }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface PanneauTokens {}\n\n/** The variable of a palette color: `panneau-palette-orange`. */\nexport type PaletteTokenName = `panneau-palette-${string}`;\n\n/**\n * The name of a token a theme can set, without the leading `--`: a semantic token, a component\n * token, a palette color, or a token declared in `PanneauTokens`.\n */\nexport type TokenName =\n    SemanticTokenName | ComponentTokenName | PaletteTokenName | (keyof PanneauTokens & string);\n\n/** Values of tokens, keyed by their name: only known names type-check. */\nexport type ThemeTokens = {\n    [Name in SemanticTokenName | ComponentTokenName | (keyof PanneauTokens & string)]?: string;\n} & { [Name in PaletteTokenName]?: string };\n\n/** A theme as `defineTheme()` takes it: like `Theme`, with typed tokens and `extends`. */\nexport interface ThemeDefinition {\n    /** A name for theme pickers. */\n    label?: string;\n    /** Themes this one builds on, in order: its own values override theirs. */\n    extends?: Theme | readonly Theme[];\n    /** Tokens of the light scheme, or of both schemes when `dark` does not set them. */\n    tokens?: ThemeTokens;\n    /** Tokens that change in the dark scheme. */\n    dark?: ThemeTokens;\n    /** Raw colors, used with `var(--panneau-palette-<name>)`. */\n    palette?: Record<string, string>;\n    /** Tones added or redefined by the theme. Declare added tones in `PanneauTones`. */\n    tones?: Record<string, ToneInput>;\n    /** Named variants of components. Declare them in `BadgeVariants` (and the like). */\n    components?: Record<string, { variants?: Record<string, ThemeTokens> }>;\n    /** Tokens of each density, which change with the density of the root. */\n    densities?: Partial<Record<Exclude<Density, 'auto'>, ThemeTokens>>;\n    /** Font faces and font stylesheets. */\n    fonts?: ThemeFont[];\n}\n\nfunction mergeRecords<T>(\n    first: Readonly<Record<string, T>> | undefined,\n    second: Readonly<Record<string, T>> | undefined,\n): Record<string, T> | undefined {\n    return first === undefined && second === undefined ? undefined : { ...first, ...second };\n}\n\nfunction mergeComponents(\n    first: Theme['components'],\n    second: Theme['components'],\n): Theme['components'] {\n    const components = mergeRecords(first, second);\n    if (components === undefined) {\n        return undefined;\n    }\n    return Object.fromEntries(\n        Object.keys(components).map((component) => {\n            const before = first?.[component];\n            const after = second?.[component];\n            const variants = mergeRecords(before?.variants, after?.variants);\n            return [\n                component,\n                {\n                    ...before,\n                    ...after,\n                    ...(variants !== undefined && {\n                        variants: Object.fromEntries(\n                            Object.keys(variants).map((name) => [\n                                name,\n                                { ...before?.variants?.[name], ...after?.variants?.[name] },\n                            ]),\n                        ),\n                    }),\n                },\n            ];\n        }),\n    );\n}\n\nconst DENSITIES = ['compact', 'comfortable', 'touch'] as const;\n\nfunction mergeDensities(first: Theme['densities'], second: Theme['densities']): Theme['densities'] {\n    if (first === undefined && second === undefined) {\n        return undefined;\n    }\n    const densities = { ...first, ...second };\n    DENSITIES.forEach((density) => {\n        if (first?.[density] !== undefined && second?.[density] !== undefined) {\n            densities[density] = { ...first[density], ...second[density] };\n        }\n    });\n    return densities;\n}\n\nfunction mergeFonts(first: Theme['fonts'], second: Theme['fonts']): Theme['fonts'] {\n    if (first === undefined && second === undefined) {\n        return undefined;\n    }\n    const fonts = [...(first ?? []), ...(second ?? [])];\n    return fonts.filter(\n        (font, index) =>\n            fonts.findIndex((other) => JSON.stringify(other) === JSON.stringify(font)) === index,\n    );\n}\n\n/**\n * Merges themes, in order: each one overrides the tokens, palette colors, tones and variants of\n * those before it. A token a theme sets in `tokens` but not in `dark` applies to both schemes, so it\n * also replaces the dark value of earlier themes. Variants merge token by token; tones are replaced\n * whole; densities merge token by token; fonts add up. The label is the last one set. Same as `mergeThemes()` of `@panneau/protocol`.\n */\nexport function mergeThemes(...themes: readonly Partial<Theme>[]): Theme {\n    return themes.reduce<Theme>(\n        (merged, theme) => {\n            const tokens = theme.tokens ?? {};\n            const dark = mergeRecords(\n                merged.dark !== undefined\n                    ? Object.fromEntries(\n                          Object.entries(merged.dark).filter(\n                              ([name]) => !Object.hasOwn(tokens, name),\n                          ),\n                      )\n                    : undefined,\n                theme.dark,\n            );\n            const result: Theme = {\n                ...merged,\n                ...theme,\n                label: theme.label ?? merged.label,\n                tokens: { ...merged.tokens, ...tokens },\n                dark: dark !== undefined && Object.keys(dark).length > 0 ? dark : undefined,\n                palette: mergeRecords(merged.palette, theme.palette),\n                tones: mergeRecords(merged.tones, theme.tones),\n                components: mergeComponents(merged.components, theme.components),\n                densities: mergeDensities(merged.densities, theme.densities),\n                fonts: mergeFonts(merged.fonts, theme.fonts),\n            };\n            return Object.fromEntries(\n                Object.entries(result).filter(([, value]) => value !== undefined),\n            ) as unknown as Theme;\n        },\n        { tokens: {} },\n    );\n}\n\n/** The first segments of the semantic tokens, and the components: names Panneau owns. */\nconst NAMESPACES = [\n    ...new Set([\n        ...SEMANTIC_TOKENS.map((name) => name.split('-')[1]),\n        ...Object.keys(componentTokens),\n        'tone',\n    ]),\n];\n\nconst KNOWN_TOKENS = new Set<string>([\n    ...SEMANTIC_TOKENS,\n    ...Object.values(componentTokens).flatMap((tokens) => Object.keys(tokens)),\n]);\n\n/**\n * Tokens of a theme (in its tokens, dark tokens, densities and variants) that Panneau doesn't know although they are in its namespaces\n * (`panneau-color-*`, `panneau-button-*`…): most likely typos. Tokens of a project's own components\n * are outside these namespaces, and palette colors are always accepted.\n */\nexport function findUnknownTokens(theme: Theme): string[] {\n    const names = [\n        ...Object.keys(theme.tokens),\n        ...Object.keys(theme.dark ?? {}),\n        ...Object.values(theme.densities ?? {}).flatMap((tokens) => Object.keys(tokens)),\n        ...Object.values(theme.components ?? {}).flatMap(({ variants = {} }) =>\n            Object.values(variants).flatMap((tokens) => Object.keys(tokens)),\n        ),\n    ];\n    return [\n        ...new Set(\n            names.filter(\n                (name) =>\n                    !KNOWN_TOKENS.has(name) &&\n                    !name.startsWith('panneau-palette-') &&\n                    NAMESPACES.some((namespace) => name.startsWith(`panneau-${namespace}-`)),\n            ),\n        ),\n    ];\n}\n\n/**\n * Declares a theme: TypeScript checks the names of its tokens, and `extends` builds it on other\n * themes (`bootstrapTheme`, a shared brand theme), whose values its own override. It returns a\n * plain `Theme`, which `PanneauRoot`, plugins and JSON files all take. Tokens that Panneau doesn't\n * know in its own namespaces, most likely typos, are reported in the console.\n *\n * ```ts\n * const brand = defineTheme({\n *     palette: { orange: '#f25c05' },\n *     tokens: { 'panneau-color-accent': 'var(--panneau-palette-orange)' },\n *     tones: { signal: 'var(--panneau-palette-orange)' },\n * });\n * const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });\n * ```\n */\nexport function defineTheme(definition: ThemeDefinition): Theme {\n    const { extends: extended = [], ...own } = definition;\n    const bases: readonly Theme[] = Array.isArray(extended) ? extended : [extended as Theme];\n    const ownTheme = { ...own, tokens: own.tokens ?? {} } as Theme;\n    const theme = mergeThemes(...bases, ownTheme);\n    const unknown = findUnknownTokens(ownTheme);\n    if (unknown.length > 0) {\n        console.warn(\n            `[panneau] Unknown tokens in theme${theme.label !== undefined ? ` \"${theme.label}\"` : ''}: ${unknown.join(', ')}.`,\n        );\n    }\n    return theme;\n}\n"],"mappings":"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"}