@cube-dev/ui-kit 0.114.0 → 0.116.0

package/dist/tasty/utils/okhsl-to-rgb.js

@@ -0,0 +1,297 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+//#region src/tasty/utils/okhsl-to-rgb.ts
+const OKLab_to_LMS_M = [
+	[
+		1,
+		.3963377773761749,
+		.2158037573099136
+	],
+	[
+		1,
+		-.1055613458156586,
+		-.0638541728258133
+	],
+	[
+		1,
+		-.0894841775298119,
+		-1.2914855480194092
+	]
+];
+const LMS_to_linear_sRGB_M = [
+	[
+		4.076741636075959,
+		-3.307711539258062,
+		.2309699031821041
+	],
+	[
+		-1.2684379732850313,
+		2.6097573492876878,
+		-.3413193760026569
+	],
+	[
+		-.004196076138675526,
+		-.703418617935936,
+		1.7076146940746113
+	]
+];
+const OKLab_to_linear_sRGB_coefficients = [
+	[[-1.8817030993265873, -.8093650129914302], [
+		1.19086277,
+		1.76576728,
+		.59662641,
+		.75515197,
+		.56771245
+	]],
+	[[1.8144407988010998, -1.194452667805235], [
+		.73956515,
+		-.45954404,
+		.08285427,
+		.12541073,
+		-.14503204
+	]],
+	[[.13110757611180954, 1.813339709266608], [
+		1.35733652,
+		-.00915799,
+		-1.1513021,
+		-.50559606,
+		.00692167
+	]]
+];
+const TAU = 2 * Math.PI;
+const K1 = .206;
+const K2 = .03;
+const K3 = (1 + K1) / (1 + K2);
+const constrainAngle = (angle) => (angle % 360 + 360) % 360;
+const toeInv = (x) => (x ** 2 + K1 * x) / (K3 * (x + K2));
+const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+const dotXY = (a, b) => a[0] * b[0] + a[1] * b[1];
+const transform = (input, matrix) => [
+	dot3(input, matrix[0]),
+	dot3(input, matrix[1]),
+	dot3(input, matrix[2])
+];
+const cubed3 = (lms) => [
+	lms[0] ** 3,
+	lms[1] ** 3,
+	lms[2] ** 3
+];
+const OKLabToLinearSRGB = (lab) => {
+	return transform(cubed3(transform(lab, OKLab_to_LMS_M)), LMS_to_linear_sRGB_M);
+};
+const sRGBLinearToGamma = (val) => {
+	const sign = val < 0 ? -1 : 1;
+	const abs = Math.abs(val);
+	return abs > .0031308 ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - .055) : 12.92 * val;
+};
+const computeMaxSaturationOKLC = (a, b) => {
+	const okCoeff = OKLab_to_linear_sRGB_coefficients;
+	const lmsToRgb = LMS_to_linear_sRGB_M;
+	const tmp2 = [a, b];
+	const tmp3 = [
+		0,
+		a,
+		b
+	];
+	let chnlCoeff;
+	let chnlLMS;
+	if (dotXY(okCoeff[0][0], tmp2) > 1) {
+		chnlCoeff = okCoeff[0][1];
+		chnlLMS = lmsToRgb[0];
+	} else if (dotXY(okCoeff[1][0], tmp2) > 1) {
+		chnlCoeff = okCoeff[1][1];
+		chnlLMS = lmsToRgb[1];
+	} else {
+		chnlCoeff = okCoeff[2][1];
+		chnlLMS = lmsToRgb[2];
+	}
+	const [k0, k1, k2, k3, k4] = chnlCoeff;
+	const [wl, wm, ws] = chnlLMS;
+	let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;
+	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
+	const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
+	const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
+	const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
+	let l_ = 1 + sat * kl;
+	let m_ = 1 + sat * km;
+	let s_ = 1 + sat * ks;
+	const l = l_ ** 3;
+	const m = m_ ** 3;
+	const s = s_ ** 3;
+	const lds = 3 * kl * l_ * l_;
+	const mds = 3 * km * m_ * m_;
+	const sds = 3 * ks * s_ * s_;
+	const lds2 = 6 * kl * kl * l_;
+	const mds2 = 6 * km * km * m_;
+	const sds2 = 6 * ks * ks * s_;
+	const f = wl * l + wm * m + ws * s;
+	const f1 = wl * lds + wm * mds + ws * sds;
+	const f2 = wl * lds2 + wm * mds2 + ws * sds2;
+	sat = sat - f * f1 / (f1 * f1 - .5 * f * f2);
+	return sat;
+};
+const findCuspOKLCH = (a, b) => {
+	const S_cusp = computeMaxSaturationOKLC(a, b);
+	const rgb_at_max = OKLabToLinearSRGB([
+		1,
+		S_cusp * a,
+		S_cusp * b
+	]);
+	const L_cusp = Math.cbrt(1 / Math.max(Math.max(rgb_at_max[0], rgb_at_max[1]), Math.max(rgb_at_max[2], 0)));
+	return [L_cusp, L_cusp * S_cusp];
+};
+const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp) => {
+	const lmsToRgb = LMS_to_linear_sRGB_M;
+	const tmp3 = [
+		0,
+		a,
+		b
+	];
+	const floatMax = Number.MAX_VALUE;
+	let t;
+	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
+	const dotXYZ = (vec, x, y, z) => vec[0] * x + vec[1] * y + vec[2] * z;
+	if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0) {
+		const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);
+		t = denom === 0 ? 0 : cusp[1] * l0 / denom;
+	} else {
+		const denom = c1 * (cusp[0] - 1) + cusp[1] * (l0 - l1);
+		t = denom === 0 ? 0 : cusp[1] * (l0 - 1) / denom;
+		const dl = l1 - l0;
+		const dc = c1;
+		const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
+		const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
+		const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
+		const L = l0 * (1 - t) + t * l1;
+		const C = t * c1;
+		const l_ = L + C * kl;
+		const m_ = L + C * km;
+		const s_ = L + C * ks;
+		const l = l_ ** 3;
+		const m = m_ ** 3;
+		const s = s_ ** 3;
+		const ldt = 3 * (dl + dc * kl) * l_ * l_;
+		const mdt = 3 * (dl + dc * km) * m_ * m_;
+		const sdt = 3 * (dl + dc * ks) * s_ * s_;
+		const ldt2 = 6 * (dl + dc * kl) ** 2 * l_;
+		const mdt2 = 6 * (dl + dc * km) ** 2 * m_;
+		const sdt2 = 6 * (dl + dc * ks) ** 2 * s_;
+		const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;
+		const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);
+		const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);
+		const ur = r1 / (r1 * r1 - .5 * r_ * r2);
+		let tr = -r_ * ur;
+		const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;
+		const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);
+		const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);
+		const ug = g1 / (g1 * g1 - .5 * g_ * g2);
+		let tg = -g_ * ug;
+		const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;
+		const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);
+		const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);
+		const ub = b1 / (b1 * b1 - .5 * b_ * b2);
+		let tb = -b_ * ub;
+		tr = ur >= 0 ? tr : floatMax;
+		tg = ug >= 0 ? tg : floatMax;
+		tb = ub >= 0 ? tb : floatMax;
+		t += Math.min(tr, Math.min(tg, tb));
+	}
+	return t;
+};
+const computeSt = (cusp) => [cusp[1] / cusp[0], cusp[1] / (1 - cusp[0])];
+const computeStMid = (a, b) => [.11516993 + 1 / (7.4477897 + 4.1590124 * b + a * (-2.19557347 + 1.75198401 * b + a * (-2.13704948 - 10.02301043 * b + a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))), .11239642 + 1 / (1.6132032 - .68124379 * b + a * (.40370612 + .90148123 * b + a * (-.27087943 + .6122399 * b + a * (.00299215 - .45399568 * b - .14661872 * a))))];
+const getCs = (L, a, b, cusp) => {
+	const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);
+	const stMax = computeSt(cusp);
+	const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);
+	const stMid = computeStMid(a, b);
+	let ca = L * stMid[0];
+	let cb = (1 - L) * stMid[1];
+	const cMid = .9 * k * Math.sqrt(Math.sqrt(1 / (1 / ca ** 4 + 1 / cb ** 4)));
+	ca = L * .4;
+	cb = (1 - L) * .8;
+	return [
+		Math.sqrt(1 / (1 / ca ** 2 + 1 / cb ** 2)),
+		cMid,
+		cMax
+	];
+};
+const OKHSLToOKLab = (hsl) => {
+	let h = hsl[0];
+	const s = hsl[1];
+	const l = hsl[2];
+	let L = toeInv(l);
+	let a = 0;
+	let b = 0;
+	h = constrainAngle(h) / 360;
+	if (L !== 0 && L !== 1 && s !== 0) {
+		const a_ = Math.cos(TAU * h);
+		const b_ = Math.sin(TAU * h);
+		const [c0, cMid, cMax] = getCs(L, a_, b_, findCuspOKLCH(a_, b_));
+		const mid = .8;
+		const midInv = 1.25;
+		let t, k0, k1, k2;
+		if (s < mid) {
+			t = midInv * s;
+			k0 = 0;
+			k1 = mid * c0;
+			k2 = 1 - k1 / cMid;
+		} else {
+			t = 5 * (s - .8);
+			k0 = cMid;
+			k1 = .2 * cMid ** 2 * 1.25 ** 2 / c0;
+			k2 = 1 - k1 / (cMax - cMid);
+		}
+		const c = k0 + t * k1 / (1 - k2 * t);
+		a = c * a_;
+		b = c * b_;
+	}
+	return [
+		L,
+		a,
+		b
+	];
+};
+function okhslToSrgbInternal(h, s, l) {
+	const linearRGB = OKLabToLinearSRGB(OKHSLToOKLab([
+		h,
+		s,
+		l
+	]));
+	return [
+		sRGBLinearToGamma(linearRGB[0]),
+		sRGBLinearToGamma(linearRGB[1]),
+		sRGBLinearToGamma(linearRGB[2])
+	];
+}
+/**
+* Convert OKHSL color string to RGB.
+* Uses the same algorithm as the okhsl-plugin.
+*/
+function okhslToRgb(okhslStr) {
+	const match = okhslStr.match(/okhsl\(([^)]+)\)/i);
+	if (!match) return null;
+	const [colorPart, alphaPart] = match[1].trim().split("/");
+	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	let h = parseFloat(parts[0]);
+	const hueStr = parts[0].toLowerCase();
+	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
+	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
+	else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
+	const parsePercent = (val) => {
+		const num = parseFloat(val);
+		return val.includes("%") ? num / 100 : num;
+	};
+	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
+	const [r, g, b] = okhslToSrgbInternal(h, s, l);
+	const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
+	const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
+	const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
+	if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
+	return `rgb(${r255} ${g255} ${b255})`;
+}
+
+//#endregion
+export { okhslToRgb };
+//# sourceMappingURL=okhsl-to-rgb.js.map

package/dist/tasty/utils/okhsl-to-rgb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"okhsl-to-rgb.js","names":[],"sources":["../../../src/tasty/utils/okhsl-to-rgb.ts"],"sourcesContent":["// ============================================================================\n// OKHSL to RGB conversion (inlined from okhsl-plugin for static conversion)\n// ============================================================================\n\ntype Vec3 = [number, number, number];\n\n// OKHSL conversion internals (from texel-color, same as okhsl-plugin)\nconst OKLab_to_LMS_M: Vec3[] = [\n  [1.0, 0.3963377773761749, 0.2158037573099136],\n  [1.0, -0.1055613458156586, -0.0638541728258133],\n  [1.0, -0.0894841775298119, -1.2914855480194092],\n];\n\nconst LMS_to_linear_sRGB_M: Vec3[] = [\n  [4.076741636075959, -3.307711539258062, 0.2309699031821041],\n  [-1.2684379732850313, 2.6097573492876878, -0.3413193760026569],\n  [-0.004196076138675526, -0.703418617935936, 1.7076146940746113],\n];\n\nconst OKLab_to_linear_sRGB_coefficients: [\n  [[number, number], number[]],\n  [[number, number], number[]],\n  [[number, number], number[]],\n] = [\n  [\n    [-1.8817030993265873, -0.8093650129914302],\n    [1.19086277, 1.76576728, 0.59662641, 0.75515197, 0.56771245],\n  ],\n  [\n    [1.8144407988010998, -1.194452667805235],\n    [0.73956515, -0.45954404, 0.08285427, 0.12541073, -0.14503204],\n  ],\n  [\n    [0.13110757611180954, 1.813339709266608],\n    [1.35733652, -0.00915799, -1.1513021, -0.50559606, 0.00692167],\n  ],\n];\n\nconst TAU = 2 * Math.PI;\nconst K1 = 0.206;\nconst K2 = 0.03;\nconst K3 = (1.0 + K1) / (1.0 + K2);\n\nconst constrainAngle = (angle: number): number => ((angle % 360) + 360) % 360;\nconst toeInv = (x: number): number => (x ** 2 + K1 * x) / (K3 * (x + K2));\nconst dot3 = (a: Vec3, b: Vec3): number =>\n  a[0] * b[0] + a[1] * b[1] + a[2] * b[2];\nconst dotXY = (a: [number, number], b: [number, number]): number =>\n  a[0] * b[0] + a[1] * b[1];\nconst transform = (input: Vec3, matrix: Vec3[]): Vec3 => [\n  dot3(input, matrix[0]),\n  dot3(input, matrix[1]),\n  dot3(input, matrix[2]),\n];\nconst cubed3 = (lms: Vec3): Vec3 => [lms[0] ** 3, lms[1] ** 3, lms[2] ** 3];\n\nconst OKLabToLinearSRGB = (lab: Vec3): Vec3 => {\n  const lms = transform(lab, OKLab_to_LMS_M);\n  return transform(cubed3(lms), LMS_to_linear_sRGB_M);\n};\n\nconst sRGBLinearToGamma = (val: number): number => {\n  const sign = val < 0 ? -1 : 1;\n  const abs = Math.abs(val);\n  return abs > 0.0031308\n    ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055)\n    : 12.92 * val;\n};\n\nconst computeMaxSaturationOKLC = (a: number, b: number): number => {\n  const okCoeff = OKLab_to_linear_sRGB_coefficients;\n  const lmsToRgb = LMS_to_linear_sRGB_M;\n  const tmp2: [number, number] = [a, b];\n  const tmp3: Vec3 = [0, a, b];\n\n  let chnlCoeff: number[];\n  let chnlLMS: Vec3;\n\n  if (dotXY(okCoeff[0][0], tmp2) > 1) {\n    chnlCoeff = okCoeff[0][1];\n    chnlLMS = lmsToRgb[0];\n  } else if (dotXY(okCoeff[1][0], tmp2) > 1) {\n    chnlCoeff = okCoeff[1][1];\n    chnlLMS = lmsToRgb[1];\n  } else {\n    chnlCoeff = okCoeff[2][1];\n    chnlLMS = lmsToRgb[2];\n  }\n\n  const [k0, k1, k2, k3, k4] = chnlCoeff;\n  const [wl, wm, ws] = chnlLMS;\n\n  let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;\n\n  const dotYZ = (mat: Vec3, vec: Vec3): number =>\n    mat[1] * vec[1] + mat[2] * vec[2];\n\n  const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);\n  const km = dotYZ(OKLab_to_LMS_M[1], tmp3);\n  const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);\n\n  let l_ = 1.0 + sat * kl;\n  let m_ = 1.0 + sat * km;\n  let s_ = 1.0 + sat * ks;\n\n  const l = l_ ** 3;\n  const m = m_ ** 3;\n  const s = s_ ** 3;\n\n  const lds = 3.0 * kl * l_ * l_;\n  const mds = 3.0 * km * m_ * m_;\n  const sds = 3.0 * ks * s_ * s_;\n\n  const lds2 = 6.0 * kl * kl * l_;\n  const mds2 = 6.0 * km * km * m_;\n  const sds2 = 6.0 * ks * ks * s_;\n\n  const f = wl * l + wm * m + ws * s;\n  const f1 = wl * lds + wm * mds + ws * sds;\n  const f2 = wl * lds2 + wm * mds2 + ws * sds2;\n\n  sat = sat - (f * f1) / (f1 * f1 - 0.5 * f * f2);\n\n  return sat;\n};\n\nconst findCuspOKLCH = (a: number, b: number): [number, number] => {\n  const S_cusp = computeMaxSaturationOKLC(a, b);\n  const lab: Vec3 = [1, S_cusp * a, S_cusp * b];\n  const rgb_at_max = OKLabToLinearSRGB(lab);\n  const L_cusp = Math.cbrt(\n    1 /\n      Math.max(\n        Math.max(rgb_at_max[0], rgb_at_max[1]),\n        Math.max(rgb_at_max[2], 0.0),\n      ),\n  );\n  return [L_cusp, L_cusp * S_cusp];\n};\n\nconst findGamutIntersectionOKLCH = (\n  a: number,\n  b: number,\n  l1: number,\n  c1: number,\n  l0: number,\n  cusp: [number, number],\n): number => {\n  const lmsToRgb = LMS_to_linear_sRGB_M;\n  const tmp3: Vec3 = [0, a, b];\n  const floatMax = Number.MAX_VALUE;\n\n  let t: number;\n\n  const dotYZ = (mat: Vec3, vec: Vec3): number =>\n    mat[1] * vec[1] + mat[2] * vec[2];\n  const dotXYZ = (vec: Vec3, x: number, y: number, z: number): number =>\n    vec[0] * x + vec[1] * y + vec[2] * z;\n\n  if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0.0) {\n    const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);\n    t = denom === 0 ? 0 : (cusp[1] * l0) / denom;\n  } else {\n    const denom = c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1);\n    t = denom === 0 ? 0 : (cusp[1] * (l0 - 1.0)) / denom;\n\n    const dl = l1 - l0;\n    const dc = c1;\n    const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);\n    const km = dotYZ(OKLab_to_LMS_M[1], tmp3);\n    const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);\n\n    const L = l0 * (1.0 - t) + t * l1;\n    const C = t * c1;\n\n    const l_ = L + C * kl;\n    const m_ = L + C * km;\n    const s_ = L + C * ks;\n\n    const l = l_ ** 3;\n    const m = m_ ** 3;\n    const s = s_ ** 3;\n\n    const ldt = 3 * (dl + dc * kl) * l_ * l_;\n    const mdt = 3 * (dl + dc * km) * m_ * m_;\n    const sdt = 3 * (dl + dc * ks) * s_ * s_;\n\n    const ldt2 = 6 * (dl + dc * kl) ** 2 * l_;\n    const mdt2 = 6 * (dl + dc * km) ** 2 * m_;\n    const sdt2 = 6 * (dl + dc * ks) ** 2 * s_;\n\n    const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;\n    const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);\n    const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);\n    const ur = r1 / (r1 * r1 - 0.5 * r_ * r2);\n    let tr = -r_ * ur;\n\n    const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;\n    const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);\n    const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);\n    const ug = g1 / (g1 * g1 - 0.5 * g_ * g2);\n    let tg = -g_ * ug;\n\n    const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;\n    const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);\n    const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);\n    const ub = b1 / (b1 * b1 - 0.5 * b_ * b2);\n    let tb = -b_ * ub;\n\n    tr = ur >= 0.0 ? tr : floatMax;\n    tg = ug >= 0.0 ? tg : floatMax;\n    tb = ub >= 0.0 ? tb : floatMax;\n\n    t += Math.min(tr, Math.min(tg, tb));\n  }\n\n  return t;\n};\n\nconst computeSt = (cusp: [number, number]): [number, number] => [\n  cusp[1] / cusp[0],\n  cusp[1] / (1 - cusp[0]),\n];\n\nconst computeStMid = (a: number, b: number): [number, number] => [\n  0.11516993 +\n    1.0 /\n      (7.4477897 +\n        4.1590124 * b +\n        a *\n          (-2.19557347 +\n            1.75198401 * b +\n            a *\n              (-2.13704948 -\n                10.02301043 * b +\n                a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))),\n  0.11239642 +\n    1.0 /\n      (1.6132032 -\n        0.68124379 * b +\n        a *\n          (0.40370612 +\n            0.90148123 * b +\n            a *\n              (-0.27087943 +\n                0.6122399 * b +\n                a * (0.00299215 - 0.45399568 * b - 0.14661872 * a)))),\n];\n\nconst getCs = (\n  L: number,\n  a: number,\n  b: number,\n  cusp: [number, number],\n): [number, number, number] => {\n  const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);\n  const stMax = computeSt(cusp);\n  const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);\n  const stMid = computeStMid(a, b);\n  let ca = L * stMid[0];\n  let cb = (1.0 - L) * stMid[1];\n  const cMid =\n    0.9 * k * Math.sqrt(Math.sqrt(1.0 / (1.0 / ca ** 4 + 1.0 / cb ** 4)));\n  ca = L * 0.4;\n  cb = (1.0 - L) * 0.8;\n  const c0 = Math.sqrt(1.0 / (1.0 / ca ** 2 + 1.0 / cb ** 2));\n  return [c0, cMid, cMax];\n};\n\nconst OKHSLToOKLab = (hsl: Vec3): Vec3 => {\n  let h = hsl[0];\n  const s = hsl[1];\n  const l = hsl[2];\n\n  let L = toeInv(l);\n  let a = 0;\n  let b = 0;\n\n  h = constrainAngle(h) / 360.0;\n\n  if (L !== 0.0 && L !== 1.0 && s !== 0) {\n    const a_ = Math.cos(TAU * h);\n    const b_ = Math.sin(TAU * h);\n\n    const cusp = findCuspOKLCH(a_, b_);\n    const Cs = getCs(L, a_, b_, cusp);\n    const [c0, cMid, cMax] = Cs;\n\n    const mid = 0.8;\n    const midInv = 1.25;\n    let t: number, k0: number, k1: number, k2: number;\n\n    if (s < mid) {\n      t = midInv * s;\n      k0 = 0.0;\n      k1 = mid * c0;\n      k2 = 1.0 - k1 / cMid;\n    } else {\n      t = 5 * (s - 0.8);\n      k0 = cMid;\n      k1 = (0.2 * cMid ** 2 * 1.25 ** 2) / c0;\n      k2 = 1.0 - k1 / (cMax - cMid);\n    }\n\n    const c = k0 + (t * k1) / (1.0 - k2 * t);\n    a = c * a_;\n    b = c * b_;\n  }\n\n  return [L, a, b];\n};\n\nfunction okhslToSrgbInternal(h: number, s: number, l: number): Vec3 {\n  const oklab = OKHSLToOKLab([h, s, l]);\n  const linearRGB = OKLabToLinearSRGB(oklab);\n  return [\n    sRGBLinearToGamma(linearRGB[0]),\n    sRGBLinearToGamma(linearRGB[1]),\n    sRGBLinearToGamma(linearRGB[2]),\n  ];\n}\n\n/**\n * Convert OKHSL color string to RGB.\n * Uses the same algorithm as the okhsl-plugin.\n */\nexport function okhslToRgb(okhslStr: string): string | null {\n  const match = okhslStr.match(/okhsl\\(([^)]+)\\)/i);\n  if (!match) return null;\n\n  const inner = match[1].trim();\n  const [colorPart, alphaPart] = inner.split('/');\n  const parts = colorPart\n    .trim()\n    .split(/[,\\s]+/)\n    .filter(Boolean);\n\n  if (parts.length < 3) return null;\n\n  // Parse hue (can have units)\n  let h = parseFloat(parts[0]);\n  const hueStr = parts[0].toLowerCase();\n  if (hueStr.endsWith('turn')) h = parseFloat(hueStr) * 360;\n  else if (hueStr.endsWith('rad')) h = (parseFloat(hueStr) * 180) / Math.PI;\n  else if (hueStr.endsWith('deg')) h = parseFloat(hueStr);\n\n  // Parse saturation and lightness (percentages)\n  const parsePercent = (val: string): number => {\n    const num = parseFloat(val);\n    return val.includes('%') ? num / 100 : num;\n  };\n  const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n  const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n  // OKHSL to sRGB conversion\n  const [r, g, b] = okhslToSrgbInternal(h, s, l);\n\n  // Convert to 0-255 range\n  const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);\n  const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);\n  const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);\n\n  if (alphaPart) {\n    const alpha = parseFloat(alphaPart.trim());\n    return `rgba(${r255}, ${g255}, ${b255}, ${alpha})`;\n  }\n\n  return `rgb(${r255} ${g255} ${b255})`;\n}\n"],"mappings":"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"}

package/dist/tasty/utils/process-tokens.d.ts

@@ -0,0 +1,32 @@
+
+import { Tokens } from "../types.js";
+import { CSSProperties } from "react";
+
+//#region src/tasty/utils/process-tokens.d.ts
+/**
+ * Convert HSL to RGB (sRGB).
+ * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+ * Same as used in CSS Color 4 spec.
+ *
+ * @param h - Hue in degrees (0-360)
+ * @param s - Saturation (0-1)
+ * @param l - Lightness (0-1)
+ * @returns RGB values in 0-255 range (may have fractional values)
+ */
+declare function hslToRgbValues(h: number, s: number, l: number): [number, number, number];
+/**
+ * Process tokens object into inline style properties.
+ * - $name -> --name with parsed value
+ * - #name -> --name-color AND --name-color-rgb with parsed values
+ *
+ * @param tokens - The tokens object to process
+ * @returns CSSProperties object or undefined if no tokens to process
+ */
+declare function processTokens(tokens: Tokens | undefined): CSSProperties | undefined;
+/**
+ * Stringify tokens for memoization key.
+ */
+declare function stringifyTokens(tokens: Tokens | undefined): string;
+//#endregion
+export { hslToRgbValues, processTokens, stringifyTokens };
+//# sourceMappingURL=process-tokens.d.ts.map

package/dist/tasty/utils/process-tokens.js

@@ -0,0 +1,172 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { okhslToRgb } from "./okhsl-to-rgb.js";
+import { getRgbValuesFromRgbaString, hexToRgb, normalizeColorTokenValue, parseStyle } from "./styles.js";
+
+//#region src/tasty/utils/process-tokens.ts
+/**
+* Parse HSL values from an hsl()/hsla() string.
+* Supports both comma-separated (legacy) and space-separated (modern) syntax:
+*   hsl(200, 40%, 50%)
+*   hsl(200 40% 50%)
+*   hsl(200 40% 50% / 0.5)
+*
+* Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.
+*/
+function parseHslValues(str) {
+	const match = str.match(/hsla?\(([^)]+)\)/i);
+	if (!match) return null;
+	const [colorPart] = match[1].trim().split("/");
+	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	let h = parseFloat(parts[0]);
+	const hueStr = parts[0].toLowerCase();
+	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
+	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
+	else if (hueStr.endsWith("grad")) h = parseFloat(hueStr) * .9;
+	h = h % 360;
+	if (h < 0) h += 360;
+	const parsePercent = (val) => {
+		const num = parseFloat(val);
+		return val.includes("%") ? num / 100 : num;
+	};
+	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
+	return [
+		h,
+		s,
+		l
+	];
+}
+/**
+* Convert HSL to RGB (sRGB).
+* Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+* Same as used in CSS Color 4 spec.
+*
+* @param h - Hue in degrees (0-360)
+* @param s - Saturation (0-1)
+* @param l - Lightness (0-1)
+* @returns RGB values in 0-255 range (may have fractional values)
+*/
+function hslToRgbValues(h, s, l) {
+	const a = s * Math.min(l, 1 - l);
+	const f = (n) => {
+		const k = (n + h / 30) % 12;
+		return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+	};
+	return [
+		f(0) * 255,
+		f(8) * 255,
+		f(4) * 255
+	];
+}
+/**
+* Format a number to a string with up to 1 decimal place, removing trailing zeros.
+*/
+function formatRgbComponent(n) {
+	return parseFloat(n.toFixed(1)).toString();
+}
+/**
+* Extract RGB triplet from a color value.
+* Returns the RGB values as a space-separated string (e.g., "255 128 0")
+* or a CSS variable reference for token colors.
+*/
+function extractRgbValue(colorValue, parsedOutput) {
+	const varMatch = parsedOutput.match(/var\(--([a-z0-9-]+)-color\)/);
+	if (varMatch) return `var(--${varMatch[1]}-color-rgb)`;
+	if (parsedOutput.startsWith("rgb(")) {
+		const rgbValues = getRgbValuesFromRgbaString(parsedOutput);
+		if (rgbValues && rgbValues.length >= 3) return rgbValues.join(" ");
+	}
+	if (parsedOutput.startsWith("hsl(") || parsedOutput.startsWith("hsla(") || colorValue.startsWith("hsl(") || colorValue.startsWith("hsla(")) {
+		const hslValues = parseHslValues(parsedOutput) || parseHslValues(colorValue);
+		if (hslValues) {
+			const [r, g, b] = hslToRgbValues(hslValues[0], hslValues[1], hslValues[2]);
+			return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;
+		}
+	}
+	if (parsedOutput.startsWith("okhsl(") || colorValue.startsWith("okhsl(")) {
+		const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);
+		if (rgbResult) {
+			const rgbValues = getRgbValuesFromRgbaString(rgbResult);
+			if (rgbValues && rgbValues.length >= 3) return rgbValues.join(" ");
+		}
+	}
+	if (colorValue.startsWith("#") && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {
+		const rgbResult = hexToRgb(colorValue);
+		if (rgbResult) {
+			const rgbValues = getRgbValuesFromRgbaString(rgbResult);
+			if (rgbValues && rgbValues.length >= 3) return rgbValues.join(" ");
+		}
+	}
+	return parsedOutput;
+}
+/**
+* Check if a value is a valid token value (string, number, or boolean - not object).
+* Returns false for `false` values (they mean "skip this token").
+*/
+function isValidTokenValue(value) {
+	if (value === void 0 || value === null || value === false) return false;
+	if (typeof value === "object") {
+		console.warn("CubeUIKit: Object values are not allowed in tokens prop. Tokens do not support state-based styling. Use a primitive value instead.");
+		return false;
+	}
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+/**
+* Process a single token value through the tasty parser.
+* Numbers are converted to strings; 0 stays as "0".
+*/
+function processTokenValue(value) {
+	if (typeof value === "number") {
+		if (value === 0) return "0";
+		return parseStyle(String(value)).output;
+	}
+	return parseStyle(value).output;
+}
+/**
+* Process tokens object into inline style properties.
+* - $name -> --name with parsed value
+* - #name -> --name-color AND --name-color-rgb with parsed values
+*
+* @param tokens - The tokens object to process
+* @returns CSSProperties object or undefined if no tokens to process
+*/
+function processTokens(tokens) {
+	if (!tokens) return;
+	const keys = Object.keys(tokens);
+	if (keys.length === 0) return;
+	let result;
+	for (const key of keys) {
+		const value = tokens[key];
+		if (!isValidTokenValue(value)) continue;
+		if (key.startsWith("$")) {
+			const propName = `--${key.slice(1)}`;
+			const processedValue = processTokenValue(value === true ? "" : value);
+			if (!result) result = {};
+			result[propName] = processedValue;
+		} else if (key.startsWith("#")) {
+			const colorName = key.slice(1);
+			const effectiveValue = normalizeColorTokenValue(value);
+			if (effectiveValue === null) continue;
+			const originalValue = typeof effectiveValue === "number" ? String(effectiveValue) : effectiveValue;
+			const lowerValue = originalValue.toLowerCase();
+			const processedValue = processTokenValue(effectiveValue);
+			if (!result) result = {};
+			result[`--${colorName}-color`] = processedValue;
+			if (/^#current(?:\.|$)/i.test(lowerValue)) continue;
+			result[`--${colorName}-color-rgb`] = extractRgbValue(originalValue, processedValue);
+		}
+	}
+	return result;
+}
+/**
+* Stringify tokens for memoization key.
+*/
+function stringifyTokens(tokens) {
+	if (!tokens) return "";
+	return JSON.stringify(tokens);
+}
+
+//#endregion
+export { hslToRgbValues, processTokens, stringifyTokens };
+//# sourceMappingURL=process-tokens.js.map

package/dist/tasty/utils/process-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-tokens.js","names":[],"sources":["../../../src/tasty/utils/process-tokens.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { Tokens, TokenValue } from '../types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n  getRgbValuesFromRgbaString,\n  hexToRgb,\n  normalizeColorTokenValue,\n  parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n *   hsl(200, 40%, 50%)\n *   hsl(200 40% 50%)\n *   hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n  const match = str.match(/hsla?\\(([^)]+)\\)/i);\n  if (!match) return null;\n\n  const inner = match[1].trim();\n  // Split by slash first (for alpha), then handle color components\n  const [colorPart] = inner.split('/');\n  // Split by comma or whitespace\n  const parts = colorPart\n    .trim()\n    .split(/[,\\s]+/)\n    .filter(Boolean);\n\n  if (parts.length < 3) return null;\n\n  // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n  let h = parseFloat(parts[0]);\n  const hueStr = parts[0].toLowerCase();\n  if (hueStr.endsWith('turn')) {\n    h = parseFloat(hueStr) * 360;\n  } else if (hueStr.endsWith('rad')) {\n    h = (parseFloat(hueStr) * 180) / Math.PI;\n  } else if (hueStr.endsWith('grad')) {\n    h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n  }\n  // deg or unitless are already in degrees\n\n  // Normalize hue to 0-360 range\n  h = h % 360;\n  if (h < 0) h += 360;\n\n  // Parse saturation and lightness (percentages)\n  const parsePercent = (val: string): number => {\n    const num = parseFloat(val);\n    return val.includes('%') ? num / 100 : num;\n  };\n\n  const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n  const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n  return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n  h: number,\n  s: number,\n  l: number,\n): [number, number, number] {\n  const a = s * Math.min(l, 1 - l);\n\n  const f = (n: number): number => {\n    const k = (n + h / 30) % 12;\n    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n  };\n\n  // Convert 0-1 range to 0-255\n  return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n  return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n  // If the parsed output references a color variable, use the -rgb variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-rgb)`;\n  }\n\n  // For rgb(...) values, extract the triplet\n  if (parsedOutput.startsWith('rgb(')) {\n    const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n    if (rgbValues && rgbValues.length >= 3) {\n      return rgbValues.join(' ');\n    }\n  }\n\n  // For hsl(...) values, convert to RGB triplet\n  if (\n    parsedOutput.startsWith('hsl(') ||\n    parsedOutput.startsWith('hsla(') ||\n    colorValue.startsWith('hsl(') ||\n    colorValue.startsWith('hsla(')\n  ) {\n    // Try parsedOutput first, then original colorValue\n    const hslValues =\n      parseHslValues(parsedOutput) || parseHslValues(colorValue);\n    if (hslValues) {\n      const [r, g, b] = hslToRgbValues(\n        hslValues[0],\n        hslValues[1],\n        hslValues[2],\n      );\n      return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n    }\n  }\n\n  // For okhsl(...) values, convert to RGB triplet\n  if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n    // Try parsedOutput first, then original colorValue\n    const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // For hex values, convert to RGB triplet\n  if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n    const rgbResult = hexToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // Fallback: return the parsed output (may not be ideal but covers edge cases)\n  return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n  value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n\n  if (typeof value === 'object') {\n    if (devMode) {\n      console.warn(\n        'CubeUIKit: Object values are not allowed in tokens prop. ' +\n          'Tokens do not support state-based styling. Use a primitive value instead.',\n      );\n    }\n    return false;\n  }\n\n  return (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n  if (typeof value === 'number') {\n    // 0 should remain as \"0\", not converted to any unit\n    if (value === 0) {\n      return '0';\n    }\n    return parseStyle(String(value)).output;\n  }\n  return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n  tokens: Tokens | undefined,\n): CSSProperties | undefined {\n  if (!tokens) {\n    return undefined;\n  }\n\n  const keys = Object.keys(tokens);\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let result: Record<string, string> | undefined;\n\n  for (const key of keys) {\n    const value = tokens[key as keyof Tokens];\n\n    // Skip undefined/null values\n    if (!isValidTokenValue(value)) {\n      continue;\n    }\n\n    if (key.startsWith('$')) {\n      // Custom property token: $name -> --name\n      const propName = `--${key.slice(1)}`;\n      // Boolean true for custom properties converts to empty string (valid CSS value)\n      const effectiveValue = value === true ? '' : value;\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[propName] = processedValue;\n    } else if (key.startsWith('#')) {\n      // Color token: #name -> --name-color and --name-color-rgb\n      const colorName = key.slice(1);\n\n      // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n      const effectiveValue = normalizeColorTokenValue(value);\n      // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n      if (effectiveValue === null) continue;\n\n      const originalValue =\n        typeof effectiveValue === 'number'\n          ? String(effectiveValue)\n          : effectiveValue;\n      const lowerValue = originalValue.toLowerCase();\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[`--${colorName}-color`] = processedValue;\n\n      // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n      // Match only #current or #current.opacity, not #current-theme or #currently-used\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-rgb`] = extractRgbValue(\n        originalValue,\n        processedValue,\n      );\n    }\n  }\n\n  return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n  if (!tokens) return '';\n  return JSON.stringify(tokens);\n}\n"],"mappings":"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"}

package/dist/tasty/utils/resolve-recipes.d.ts

@@ -0,0 +1,18 @@
+
+import { Styles } from "../styles/types.js";
+
+//#region src/tasty/utils/resolve-recipes.d.ts
+/**
+ * Resolve all `recipe` style properties in a styles object.
+ *
+ * Handles both top-level and sub-element recipe references.
+ * Returns the same object reference if no recipes are present anywhere
+ * (zero overhead for the common case).
+ *
+ * @param styles - The styles object potentially containing `recipe` keys
+ * @returns Resolved styles with recipe values merged in, or the original object if unchanged
+ */
+declare function resolveRecipes(styles: Styles): Styles;
+//#endregion
+export { resolveRecipes };
+//# sourceMappingURL=resolve-recipes.d.ts.map