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

package/dist/theme/color.js

@@ -0,0 +1,94 @@
+//#region src/theme/color.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var RGB = /^rgba?\(\s*(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/i;
+/**
+* Reads a hex (`#05f`, `#0055ff`) or `rgb()` color. Returns `null` for anything else (a CSS
+* variable, a named color, `color-mix()`), which Panneau can't compute with.
+*/
+function parseColor(value) {
+	const color = value.trim();
+	const hex = HEX.exec(color);
+	if (hex?.[1] !== void 0) {
+		const digits = hex[1].length === 3 ? [...hex[1]].map((digit) => digit + digit).join("") : hex[1];
+		return {
+			r: Number.parseInt(digits.slice(0, 2), 16),
+			g: Number.parseInt(digits.slice(2, 4), 16),
+			b: Number.parseInt(digits.slice(4, 6), 16)
+		};
+	}
+	const rgb = RGB.exec(color);
+	if (rgb !== null) {
+		const [r, g, b] = [
+			rgb[1],
+			rgb[2],
+			rgb[3]
+		].map((channel) => Math.min(255, Math.max(0, Number(channel))));
+		return {
+			r: r ?? 0,
+			g: g ?? 0,
+			b: b ?? 0
+		};
+	}
+	return null;
+}
+/** A color as `#rrggbb`. */
+function toHex({ r, g, b }) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+/** Mixes two colors in sRGB, like `color-mix(in srgb, a, b <amount>)`: 0 gives `a`, 1 gives `b`. */
+function mixColors(a, b, amount) {
+	return {
+		r: a.r + (b.r - a.r) * amount,
+		g: a.g + (b.g - a.g) * amount,
+		b: a.b + (b.b - a.b) * amount
+	};
+}
+function linear(channel) {
+	const value = channel / 255;
+	return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+}
+/** Relative luminance, as defined by WCAG 2. */
+function luminance({ r, g, b }) {
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+}
+/** Contrast ratio between two colors, from 1 to 21 (WCAG 2). */
+function contrastRatio(a, b) {
+	const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (light + .05) / (dark + .05);
+}
+var WHITE = {
+	r: 255,
+	g: 255,
+	b: 255
+};
+var BLACK = {
+	r: 0,
+	g: 0,
+	b: 0
+};
+/**
+* The closest color to `color` that reaches `ratio` against `background`, by mixing it with black
+* or white (whichever moves away from the background), like Bootstrap's shade and tint. Returns
+* the color itself when it already passes.
+*/
+function ensureContrast(color, background, ratio) {
+	if (contrastRatio(color, background) >= ratio) return color;
+	const target = luminance(background) > .18 ? BLACK : WHITE;
+	for (let step = 1; step <= 20; step += 1) {
+		const mixed = mixColors(color, target, step / 20);
+		if (contrastRatio(mixed, background) >= ratio) return mixed;
+	}
+	return target;
+}
+/** White or black, whichever reads better on `background`, like Bootstrap's `color-contrast()`. */
+function readableTextColor(background) {
+	return contrastRatio(WHITE, background) >= contrastRatio(BLACK, background) ? WHITE : BLACK;
+}
+//#endregion
+export { BLACK, WHITE, contrastRatio, ensureContrast, luminance, mixColors, parseColor, readableTextColor, toHex };
+
+//# sourceMappingURL=color.js.map

package/dist/theme/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/theme/color.ts"],"sourcesContent":["/** An sRGB color, with channels from 0 to 255. */\nexport interface Rgb {\n    r: number;\n    g: number;\n    b: number;\n}\n\nconst HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;\nconst RGB =\n    /^rgba?\\(\\s*(\\d+(?:\\.\\d+)?)[\\s,]+(\\d+(?:\\.\\d+)?)[\\s,]+(\\d+(?:\\.\\d+)?)\\s*(?:[,/]\\s*[\\d.]+%?\\s*)?\\)$/i;\n\n/**\n * Reads a hex (`#05f`, `#0055ff`) or `rgb()` color. Returns `null` for anything else (a CSS\n * variable, a named color, `color-mix()`), which Panneau can't compute with.\n */\nexport function parseColor(value: string): Rgb | null {\n    const color = value.trim();\n    const hex = HEX.exec(color);\n    if (hex?.[1] !== undefined) {\n        const digits =\n            hex[1].length === 3 ? [...hex[1]].map((digit) => digit + digit).join('') : hex[1];\n        return {\n            r: Number.parseInt(digits.slice(0, 2), 16),\n            g: Number.parseInt(digits.slice(2, 4), 16),\n            b: Number.parseInt(digits.slice(4, 6), 16),\n        };\n    }\n    const rgb = RGB.exec(color);\n    if (rgb !== null) {\n        const [r, g, b] = [rgb[1], rgb[2], rgb[3]].map((channel) =>\n            Math.min(255, Math.max(0, Number(channel))),\n        );\n        return { r: r ?? 0, g: g ?? 0, b: b ?? 0 };\n    }\n    return null;\n}\n\n/** A color as `#rrggbb`. */\nexport function toHex({ r, g, b }: Rgb): string {\n    return `#${[r, g, b]\n        .map((channel) => Math.round(channel).toString(16).padStart(2, '0'))\n        .join('')}`;\n}\n\n/** Mixes two colors in sRGB, like `color-mix(in srgb, a, b <amount>)`: 0 gives `a`, 1 gives `b`. */\nexport function mixColors(a: Rgb, b: Rgb, amount: number): Rgb {\n    return {\n        r: a.r + (b.r - a.r) * amount,\n        g: a.g + (b.g - a.g) * amount,\n        b: a.b + (b.b - a.b) * amount,\n    };\n}\n\nfunction linear(channel: number): number {\n    const value = channel / 255;\n    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;\n}\n\n/** Relative luminance, as defined by WCAG 2. */\nexport function luminance({ r, g, b }: Rgb): number {\n    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/** Contrast ratio between two colors, from 1 to 21 (WCAG 2). */\nexport function contrastRatio(a: Rgb, b: Rgb): number {\n    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];\n    return (light + 0.05) / (dark + 0.05);\n}\n\nexport const WHITE: Rgb = { r: 255, g: 255, b: 255 };\nexport const BLACK: Rgb = { r: 0, g: 0, b: 0 };\n\n/**\n * The closest color to `color` that reaches `ratio` against `background`, by mixing it with black\n * or white (whichever moves away from the background), like Bootstrap's shade and tint. Returns\n * the color itself when it already passes.\n */\nexport function ensureContrast(color: Rgb, background: Rgb, ratio: number): Rgb {\n    if (contrastRatio(color, background) >= ratio) {\n        return color;\n    }\n    const target = luminance(background) > 0.18 ? BLACK : WHITE;\n    for (let step = 1; step <= 20; step += 1) {\n        const mixed = mixColors(color, target, step / 20);\n        if (contrastRatio(mixed, background) >= ratio) {\n            return mixed;\n        }\n    }\n    return target;\n}\n\n/** White or black, whichever reads better on `background`, like Bootstrap's `color-contrast()`. */\nexport function readableTextColor(background: Rgb): Rgb {\n    return contrastRatio(WHITE, background) >= contrastRatio(BLACK, background) ? WHITE : BLACK;\n}\n"],"mappings":";AAOA,IAAM,MAAM;AACZ,IAAM,MACF;;;;;AAMJ,SAAgB,WAAW,OAA2B;CAClD,MAAM,QAAQ,MAAM,KAAK;CACzB,MAAM,MAAM,IAAI,KAAK,KAAK;CAC1B,IAAI,MAAM,OAAO,KAAA,GAAW;EACxB,MAAM,SACF,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,KAAK,UAAU,QAAQ,KAAK,CAAC,CAAC,KAAK,EAAE,IAAI,IAAI;EACnF,OAAO;GACH,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;GACzC,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;GACzC,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;EAC7C;CACJ;CACA,MAAM,MAAM,IAAI,KAAK,KAAK;CAC1B,IAAI,QAAQ,MAAM;EACd,MAAM,CAAC,GAAG,GAAG,KAAK;GAAC,IAAI;GAAI,IAAI;GAAI,IAAI;EAAE,CAAC,CAAC,KAAK,YAC5C,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,OAAO,CAAC,CAAC,CAC9C;EACA,OAAO;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;EAAE;CAC7C;CACA,OAAO;AACX;;AAGA,SAAgB,MAAM,EAAE,GAAG,GAAG,KAAkB;CAC5C,OAAO,IAAI;EAAC;EAAG;EAAG;CAAC,CAAC,CACf,KAAK,YAAY,KAAK,MAAM,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CACnE,KAAK,EAAE;AAChB;;AAGA,SAAgB,UAAU,GAAQ,GAAQ,QAAqB;CAC3D,OAAO;EACH,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;EACvB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;EACvB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;CAC3B;AACJ;AAEA,SAAS,OAAO,SAAyB;CACrC,MAAM,QAAQ,UAAU;CACxB,OAAO,SAAS,SAAU,QAAQ,UAAU,QAAQ,QAAS,UAAU;AAC3E;;AAGA,SAAgB,UAAU,EAAE,GAAG,GAAG,KAAkB;CAChD,OAAO,QAAS,OAAO,CAAC,IAAI,QAAS,OAAO,CAAC,IAAI,QAAS,OAAO,CAAC;AACtE;;AAGA,SAAgB,cAAc,GAAQ,GAAgB;CAClD,MAAM,CAAC,OAAO,QAAQ,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CACvE,QAAQ,QAAQ,QAAS,OAAO;AACpC;AAEA,IAAa,QAAa;CAAE,GAAG;CAAK,GAAG;CAAK,GAAG;AAAI;AACnD,IAAa,QAAa;CAAE,GAAG;CAAG,GAAG;CAAG,GAAG;AAAE;;;;;;AAO7C,SAAgB,eAAe,OAAY,YAAiB,OAAoB;CAC5E,IAAI,cAAc,OAAO,UAAU,KAAK,OACpC,OAAO;CAEX,MAAM,SAAS,UAAU,UAAU,IAAI,MAAO,QAAQ;CACtD,KAAK,IAAI,OAAO,GAAG,QAAQ,IAAI,QAAQ,GAAG;EACtC,MAAM,QAAQ,UAAU,OAAO,QAAQ,OAAO,EAAE;EAChD,IAAI,cAAc,OAAO,UAAU,KAAK,OACpC,OAAO;CAEf;CACA,OAAO;AACX;;AAGA,SAAgB,kBAAkB,YAAsB;CACpD,OAAO,cAAc,OAAO,UAAU,KAAK,cAAc,OAAO,UAAU,IAAI,QAAQ;AAC1F"}

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"}