chroma-panel 0.2.0 → 1.0.0

package/dist/color/css4.cjs

@@ -0,0 +1,397 @@
+const require_convert = require("./convert.cjs");
+//#region src/color/css4.ts
+const D50 = [
+	.96422,
+	1,
+	.82521
+];
+const D65_TO_D50 = [
+	[
+		1.0479298,
+		.0229468,
+		-.0501922
+	],
+	[
+		.0296278,
+		.9904345,
+		-.0170738
+	],
+	[
+		-.009243,
+		.0150552,
+		.7518743
+	]
+];
+const D50_TO_D65 = [
+	[
+		.9554734,
+		-.0230985,
+		.0632593
+	],
+	[
+		-.0283697,
+		1.0099955,
+		.0210414
+	],
+	[
+		.012314,
+		-.0205077,
+		1.3303659
+	]
+];
+function mul(matrix, value) {
+	return matrix.map((row) => row[0] * value[0] + row[1] * value[1] + row[2] * value[2]);
+}
+function linear(value) {
+	const sign = value < 0 ? -1 : 1;
+	const abs = Math.abs(value);
+	return sign * (abs <= .04045 ? abs / 12.92 : ((abs + .055) / 1.055) ** 2.4);
+}
+function gamma(value) {
+	const sign = value < 0 ? -1 : 1;
+	const abs = Math.abs(value);
+	return sign * (abs <= .0031308 ? 12.92 * abs : 1.055 * abs ** (1 / 2.4) - .055);
+}
+function rgbToXyz(rgb, space) {
+	return mul(space === "srgb" ? [
+		[
+			.4123908,
+			.3575843,
+			.1804808
+		],
+		[
+			.212639,
+			.7151687,
+			.0721923
+		],
+		[
+			.0193308,
+			.1191948,
+			.9505322
+		]
+	] : [
+		[
+			.4865709,
+			.2656677,
+			.1982173
+		],
+		[
+			.2289746,
+			.6917385,
+			.0792869
+		],
+		[
+			0,
+			.0451134,
+			1.0439444
+		]
+	], rgb.map(linear));
+}
+function xyzToRgb(xyz, space) {
+	return mul(space === "srgb" ? [
+		[
+			3.2409699,
+			-1.5373832,
+			-.4986108
+		],
+		[
+			-.9692436,
+			1.8759675,
+			.0415551
+		],
+		[
+			.0556301,
+			-.203977,
+			1.0569715
+		]
+	] : [
+		[
+			2.4934969,
+			-.9313836,
+			-.4027108
+		],
+		[
+			-.829489,
+			1.762664,
+			.0236247
+		],
+		[
+			.0358458,
+			-.0761724,
+			.9568845
+		]
+	], xyz).map(gamma);
+}
+function xyzToOklab(xyz) {
+	return mul([
+		[
+			.2104543,
+			.7936178,
+			-.004072
+		],
+		[
+			1.9779985,
+			-2.4285922,
+			.4505937
+		],
+		[
+			.025904,
+			.7827718,
+			-.8086758
+		]
+	], mul([
+		[
+			.8190224,
+			.3619063,
+			-.1288738
+		],
+		[
+			.0329837,
+			.9292868,
+			.0361447
+		],
+		[
+			.0481772,
+			.2642395,
+			.6335478
+		]
+	], xyz).map(Math.cbrt));
+}
+function oklabToXyz(lab) {
+	return mul([
+		[
+			1.2268798758,
+			-.5578149945,
+			.2813910457
+		],
+		[
+			-.0405757452,
+			1.1122868033,
+			-.0717110581
+		],
+		[
+			-.0763729367,
+			-.4214933324,
+			1.5869240198
+		]
+	], mul([
+		[
+			1,
+			.3963378,
+			.2158038
+		],
+		[
+			1,
+			-.1055613,
+			-.0638542
+		],
+		[
+			1,
+			-.0894842,
+			-1.2914855
+		]
+	], lab).map((v) => v ** 3));
+}
+function xyzD50ToLab(xyz) {
+	const e = 216 / 24389;
+	const k = 24389 / 27;
+	const f = xyz.map((v, i) => {
+		const n = v / D50[i];
+		return n > e ? Math.cbrt(n) : (k * n + 16) / 116;
+	});
+	return [
+		116 * f[1] - 16,
+		500 * (f[0] - f[1]),
+		200 * (f[1] - f[2])
+	];
+}
+function labToXyzD50(lab) {
+	const f = [
+		lab[1] / 500 + (lab[0] + 16) / 116,
+		(lab[0] + 16) / 116,
+		(lab[0] + 16) / 116 - lab[2] / 200
+	];
+	const e = 216 / 24389;
+	const k = 24389 / 27;
+	return f.map((v, i) => D50[i] * (v ** 3 > e ? v ** 3 : (116 * v - 16) / k));
+}
+function polar(value) {
+	const r = value[2] * Math.PI / 180;
+	return [
+		value[0],
+		value[1] * Math.cos(r),
+		value[1] * Math.sin(r)
+	];
+}
+function cylindrical(value) {
+	const c = Math.hypot(value[1], value[2]);
+	return [
+		value[0],
+		c,
+		c < 1e-7 ? 0 : (Math.atan2(value[2], value[1]) * 180 / Math.PI + 360) % 360
+	];
+}
+function toXyz(color) {
+	switch (color.space) {
+		case "srgb":
+		case "display-p3": return rgbToXyz([...color.channels], color.space);
+		case "oklab": return oklabToXyz([...color.channels]);
+		case "oklch": return oklabToXyz(polar([...color.channels]));
+		case "lab": return mul(D50_TO_D65, labToXyzD50([...color.channels]));
+		case "lch": return mul(D50_TO_D65, labToXyzD50(polar([...color.channels])));
+	}
+}
+function convertColor(color, space) {
+	if (color.space === space) return {
+		...color,
+		channels: [...color.channels]
+	};
+	const xyz = toXyz(color);
+	let channels;
+	switch (space) {
+		case "srgb":
+		case "display-p3":
+			channels = xyzToRgb(xyz, space);
+			break;
+		case "oklab":
+			channels = xyzToOklab(xyz);
+			break;
+		case "oklch":
+			channels = cylindrical(xyzToOklab(xyz));
+			break;
+		case "lab":
+			channels = xyzD50ToLab(mul(D65_TO_D50, xyz));
+			break;
+		case "lch": channels = cylindrical(xyzD50ToLab(mul(D65_TO_D50, xyz)));
+	}
+	return {
+		space,
+		channels,
+		alpha: color.alpha
+	};
+}
+function isInGamut(color, gamut = "srgb") {
+	return convertColor(color, gamut).channels.every((v) => v >= -1e-7 && v <= 1 + 1e-7);
+}
+function mapToGamut(color, gamut = "srgb") {
+	if (isInGamut(color, gamut)) return convertColor(color, gamut);
+	const source = convertColor(color, "oklch");
+	let low = 0;
+	let high = Math.max(0, source.channels[1]);
+	for (let i = 0; i < 24; i++) {
+		const c = (low + high) / 2;
+		if (isInGamut({
+			...source,
+			channels: [
+				source.channels[0],
+				c,
+				source.channels[2]
+			]
+		}, gamut)) low = c;
+		else high = c;
+	}
+	const mapped = convertColor({
+		...source,
+		channels: [
+			source.channels[0],
+			low,
+			source.channels[2]
+		]
+	}, gamut);
+	return {
+		...mapped,
+		channels: mapped.channels.map((channel) => require_convert.clamp(channel, 0, 1))
+	};
+}
+function num(token, percentScale = 1) {
+	if (token.toLowerCase() === "none") return 0;
+	const percent = token.endsWith("%");
+	const value = Number(percent ? token.slice(0, -1) : token);
+	return Number.isFinite(value) ? value * (percent ? percentScale / 100 : 1) : null;
+}
+function hue(token) {
+	if (token.toLowerCase() === "none") return 0;
+	const m = token.match(/^([-+]?(?:\d*\.)?\d+)(deg|grad|rad|turn)?$/i);
+	if (m === null) return null;
+	const value = Number(m[1]);
+	return m[2] === "grad" ? value * .9 : m[2] === "rad" ? value * 180 / Math.PI : m[2] === "turn" ? value * 360 : value;
+}
+function lightness(token, ok) {
+	if (token.toLowerCase() === "none") return 0;
+	const percent = token.endsWith("%");
+	const value = Number(percent ? token.slice(0, -1) : token);
+	if (!Number.isFinite(value)) return null;
+	return ok && percent ? value / 100 : value;
+}
+function parseCss4Color(input) {
+	const rgb = input.trim().match(/^color\((srgb|display-p3)\s+([^/]+?)(?:\s*\/\s*([^\s]+))?\)$/i);
+	if (rgb !== null) {
+		const values = rgb[2].trim().split(/\s+/).map((v) => num(v, 1));
+		const alpha = rgb[3] === void 0 ? 1 : num(rgb[3], 1);
+		return values.length === 3 && values.every((v) => v !== null) && alpha !== null ? {
+			space: rgb[1].toLowerCase(),
+			channels: values,
+			alpha: require_convert.clamp(alpha, 0, 1)
+		} : null;
+	}
+	const match = input.trim().match(/^(oklab|oklch|lab|lch)\((.*)\)$/i);
+	if (match === null) return null;
+	const sections = match[2].split("/");
+	const parts = sections[0].trim().split(/\s+/);
+	const space = match[1].toLowerCase();
+	if (parts.length !== 3 || sections.length > 2) return null;
+	const l = lightness(parts[0], space.startsWith("ok"));
+	const second = num(parts[1], space.startsWith("ok") ? .4 : space === "lch" ? 150 : 125);
+	const third = space.endsWith("ch") ? hue(parts[2]) : num(parts[2], space === "oklab" ? .4 : 125);
+	const alpha = sections[1] === void 0 ? 1 : num(sections[1].trim(), 1);
+	if (l === null || second === null || third === null || alpha === null) return null;
+	return {
+		space,
+		channels: [
+			l,
+			space.endsWith("ch") ? Math.max(0, second) : second,
+			space.endsWith("ch") ? (third % 360 + 360) % 360 : third
+		],
+		alpha: require_convert.clamp(alpha, 0, 1)
+	};
+}
+function colorValueToHsva(color) {
+	const rgb = mapToGamut(color, "srgb");
+	return require_convert.rgbaToHsva({
+		r: require_convert.clamp(rgb.channels[0], 0, 1) * 255,
+		g: require_convert.clamp(rgb.channels[1], 0, 1) * 255,
+		b: require_convert.clamp(rgb.channels[2], 0, 1) * 255,
+		a: color.alpha
+	});
+}
+function hsvaToColorValue(color) {
+	const rgb = require_convert.hsvaToRgba(color);
+	return {
+		space: "srgb",
+		channels: [
+			rgb.r / 255,
+			rgb.g / 255,
+			rgb.b / 255
+		],
+		alpha: rgb.a
+	};
+}
+const out = (value, precision) => String(Number(value.toFixed(precision)));
+function serializeColor(color, options = {}) {
+	const format = options.format ?? color.space;
+	const precision = Math.min(8, Math.max(0, options.precision ?? 4));
+	const converted = convertColor(options.gamut === void 0 || options.gamut === "preserve" ? color : mapToGamut(color, options.gamut), format);
+	const [x, y, z] = converted.channels;
+	const alpha = converted.alpha < 1 ? ` / ${out(converted.alpha, precision)}` : "";
+	if (format === "srgb" || format === "display-p3") return `color(${format} ${out(x, precision)} ${out(y, precision)} ${out(z, precision)}${alpha})`;
+	const lightness = format.startsWith("ok") ? x * 100 : x;
+	return `${format}(${out(lightness, precision)}% ${out(y, precision)} ${out(z, precision)}${alpha})`;
+}
+//#endregion
+exports.colorValueToHsva = colorValueToHsva;
+exports.convertColor = convertColor;
+exports.hsvaToColorValue = hsvaToColorValue;
+exports.isInGamut = isInGamut;
+exports.mapToGamut = mapToGamut;
+exports.parseCss4Color = parseCss4Color;
+exports.serializeColor = serializeColor;

package/dist/color/css4.d.cts

@@ -0,0 +1,10 @@
+import { ColorValue, Hsva, ModernColorSpace, SerializeColorOptions } from "./types.cjs";
+//#region src/color/css4.d.ts
+export declare function convertColor(color: ColorValue, space: ModernColorSpace): ColorValue;
+export declare function isInGamut(color: ColorValue, gamut?: "srgb" | "display-p3"): boolean;
+export declare function mapToGamut(color: ColorValue, gamut?: "srgb" | "display-p3"): ColorValue;
+export declare function parseCss4Color(input: string): ColorValue | null;
+export declare function colorValueToHsva(color: ColorValue): Hsva;
+export declare function hsvaToColorValue(color: Hsva): ColorValue;
+export declare function serializeColor(color: ColorValue, options?: SerializeColorOptions): string;
+//#endregion

package/dist/color/css4.d.ts

@@ -0,0 +1,10 @@
+import { ColorValue, Hsva, ModernColorSpace, SerializeColorOptions } from "./types.js";
+//#region src/color/css4.d.ts
+export declare function convertColor(color: ColorValue, space: ModernColorSpace): ColorValue;
+export declare function isInGamut(color: ColorValue, gamut?: "srgb" | "display-p3"): boolean;
+export declare function mapToGamut(color: ColorValue, gamut?: "srgb" | "display-p3"): ColorValue;
+export declare function parseCss4Color(input: string): ColorValue | null;
+export declare function colorValueToHsva(color: ColorValue): Hsva;
+export declare function hsvaToColorValue(color: Hsva): ColorValue;
+export declare function serializeColor(color: ColorValue, options?: SerializeColorOptions): string;
+//#endregion