haze-ui 1.22.0 → 1.24.0

package/dist/tokens/oklch.js

@@ -0,0 +1,117 @@
+function e(e) {
+	return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
+function t(e) {
+	return e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055;
+}
+function n({ r: e, g: t, b: n }) {
+	let r = Math.cbrt(.4122214708 * e + .5363325363 * t + .0514459929 * n), i = Math.cbrt(.2119034982 * e + .6806995451 * t + .1073969566 * n), a = Math.cbrt(.0883024619 * e + .2817188376 * t + .6299787005 * n);
+	return {
+		L: .2104542553 * r + .793617785 * i - .0040720468 * a,
+		a: 1.9779984951 * r - 2.428592205 * i + .4505937099 * a,
+		b: .0259040371 * r + .7827717662 * i - .808675766 * a
+	};
+}
+function r({ L: e, a: t, b: n }) {
+	let r = e + .3963377774 * t + .2158037573 * n, i = e - .1055613458 * t - .0638541728 * n, a = e - .0894841775 * t - 1.291485548 * n, o = r * r * r, s = i * i * i, c = a * a * a;
+	return {
+		r: 4.0767416621 * o - 3.3077115913 * s + .2309699292 * c,
+		g: -1.2684380046 * o + 2.6097574011 * s - .3413193965 * c,
+		b: -.0041960863 * o - .7034186147 * s + 1.707614701 * c
+	};
+}
+function i({ l: e, c: t, h: n }) {
+	let r = n * Math.PI / 180;
+	return {
+		L: e,
+		a: t * Math.cos(r),
+		b: t * Math.sin(r)
+	};
+}
+function a({ L: e, a: t, b: n }) {
+	let r = Math.atan2(n, t) * 180 / Math.PI;
+	return {
+		l: e,
+		c: Math.sqrt(t * t + n * n),
+		h: r < 0 ? r + 360 : r
+	};
+}
+function o(e) {
+	return e.r >= -1e-5 && e.r <= 1.00001 && e.g >= -1e-5 && e.g <= 1.00001 && e.b >= -1e-5 && e.b <= 1.00001;
+}
+function s(e) {
+	return r(i(c(e)));
+}
+function c(e) {
+	let t = Math.min(1, Math.max(0, e.l)), n = e.h * Math.PI / 180, i = 0, a = Math.max(e.c, 0);
+	for (let e = 0; e < 20; e++) {
+		let e = (i + a) / 2;
+		o(r({
+			L: t,
+			a: e * Math.cos(n),
+			b: e * Math.sin(n)
+		})) ? i = e : a = e;
+	}
+	return e.alpha === void 0 ? {
+		l: t,
+		c: i,
+		h: e.h
+	} : {
+		l: t,
+		c: i,
+		h: e.h,
+		alpha: e.alpha
+	};
+}
+function l(e) {
+	return Math.round(Math.min(1, Math.max(0, e)) * 255).toString(16).padStart(2, "0");
+}
+function u(t) {
+	let r = /^#([0-9a-f]{3,8})$/i.exec(t.trim())?.[1];
+	if (r === void 0 || r.length !== 3 && r.length !== 4 && r.length !== 6 && r.length !== 8) throw Error(`Invalid hex color: ${t}`);
+	let i = r.length === 3 || r.length === 4 ? r.split("").map((e) => e + e).join("") : r, o = i.length === 8 ? parseInt(i.slice(6, 8), 16) / 255 : void 0, s = a(n({
+		r: e(parseInt(i.slice(0, 2), 16) / 255),
+		g: e(parseInt(i.slice(2, 4), 16) / 255),
+		b: e(parseInt(i.slice(4, 6), 16) / 255)
+	}));
+	return o === void 0 ? s : {
+		...s,
+		alpha: o
+	};
+}
+function d(e) {
+	let t = /^oklch\(\s*(none|[+-]?[\d.]+%?)\s+(none|[+-]?[\d.]+%?)\s+(none|[+-]?[\d.]+(?:deg)?)\s*(?:\/\s*(none|[+-]?[\d.]+%?)\s*)?\)$/i.exec(e.trim());
+	if (!t) throw Error(`Invalid oklch color: ${e}`);
+	let n = (e, t = 1) => e === void 0 || e.toLowerCase() === "none" ? 0 : e.endsWith("%") ? parseFloat(e) / 100 * t : parseFloat(e), r = Math.min(1, Math.max(0, n(t[1]))), i = Math.max(0, n(t[2])), a = (n(t[3]) % 360 + 360) % 360, o = t[4];
+	return o === void 0 ? {
+		l: r,
+		c: i,
+		h: a
+	} : {
+		l: r,
+		c: i,
+		h: a,
+		alpha: Math.min(1, Math.max(0, n(o)))
+	};
+}
+function f(e) {
+	let n = s(e), r = `#${l(t(n.r))}${l(t(n.g))}${l(t(n.b))}`;
+	return e.alpha === void 0 ? r : r + l(e.alpha);
+}
+function p(e) {
+	let t = `${e.l.toFixed(3)} ${e.c.toFixed(3)} ${e.h.toFixed(1)}`;
+	return e.alpha === void 0 ? `oklch(${t})` : `oklch(${t} / ${e.alpha.toFixed(3)})`;
+}
+function m(e, t) {
+	let n = (e) => {
+		let { r: t, g: n, b: a } = r(i(e));
+		return .2126 * t + .7152 * n + .0722 * a;
+	}, a = n(e), o = n(t), s = Math.max(a, o), c = Math.min(a, o);
+	return (s + .05) / (c + .05);
+}
+function h(e, t) {
+	let n = i(e), r = i(t);
+	return Math.sqrt((n.L - r.L) ** 2 + (n.a - r.a) ** 2 + (n.b - r.b) ** 2);
+}
+//#endregion
+export { c as clampChroma, h as deltaE, p as formatOklch, f as oklchToHex, u as parseHex, d as parseOklch, m as wcagContrast };

package/dist/tokens/palette.js

@@ -0,0 +1,327 @@
+import { clampChroma as e, formatOklch as t, parseHex as n, parseOklch as r } from "./oklch.js";
+//#region src/lib/tokens/palette.ts
+var i = {
+	light: {
+		hover: -.045,
+		active: -.09,
+		borderHover: -.09,
+		subtleL: .945,
+		subtleC: .2
+	},
+	dark: {
+		hover: .05,
+		active: .09,
+		borderHover: .08,
+		subtleL: .26,
+		subtleC: .35
+	}
+}, a = .4, o = {
+	light: -.008,
+	dark: .014
+}, s = {
+	light: {
+		gray: {
+			1: "#ffffff",
+			2: "#f7f8fa",
+			3: "#eef0f4",
+			4: "#e0e0e0",
+			9: "#8a8a8a",
+			11: "#4a4a4a",
+			12: "#1a1a1a"
+		},
+		blue: {
+			9: "#0066ff",
+			10: "#2563eb"
+		},
+		green: { 9: "#15803d" },
+		amber: { 9: "#f59e0b" },
+		red: { 9: "#dc2626" }
+	},
+	dark: {
+		gray: {
+			1: "#121212",
+			2: "#1e1e1e",
+			3: "#2a2a2a",
+			4: "#333333",
+			9: "#707070",
+			11: "#b0b0b0",
+			12: "#e8e8e8"
+		},
+		blue: {
+			8: "#3b82f6",
+			9: "#4d94ff"
+		},
+		green: { 8: "#22c55e" },
+		amber: { 8: "#fbbf24" },
+		red: { 8: "#ef4444" }
+	}
+}, c = {
+	light: {
+		l1: .982,
+		l12: .16,
+		c1: .018,
+		c12: .045
+	},
+	dark: {
+		l1: .155,
+		l12: .982,
+		c1: .03,
+		c12: .012
+	}
+};
+function l(e, t) {
+	let n = e[0];
+	if (t <= n.x) return n.y;
+	for (let n = 1; n < e.length; n++) {
+		let r = e[n];
+		if (t <= r.x) {
+			let i = e[n - 1], a = (t - i.x) / (r.x - i.x);
+			return i.y + a * (r.y - i.y);
+		}
+	}
+	return e[e.length - 1].y;
+}
+function u(e, t, r) {
+	return Object.entries(e).map(([e, i]) => {
+		let a = n(i), s = r && Number(e) === 9 ? a.l + o[t] : a.l;
+		return {
+			step: Number(e),
+			color: r ? {
+				l: s,
+				c: 0,
+				h: 0
+			} : a
+		};
+	}).sort((e, t) => e.step - t.step);
+}
+function d(n, r, i) {
+	let a = [];
+	for (let o = 1; o <= 12; o++) a.push(t(e({
+		l: l(n, o),
+		c: r(o),
+		h: i(o)
+	})));
+	return a;
+}
+function f(e, t) {
+	return d(u(e, t, !0).map((e) => ({
+		x: e.step,
+		y: e.color.l
+	})), () => 0, () => 0);
+}
+function p(e, t) {
+	let n = u(e, t, !1), r = c[t], i = [
+		{
+			x: 1,
+			y: r.l1
+		},
+		...n.map((e) => ({
+			x: e.step,
+			y: e.color.l
+		})),
+		{
+			x: 12,
+			y: r.l12
+		}
+	], a = [
+		{
+			x: 1,
+			y: r.c1
+		},
+		...n.map((e) => ({
+			x: e.step,
+			y: e.color.c
+		})),
+		{
+			x: 12,
+			y: r.c12
+		}
+	], o = [
+		{
+			x: 1,
+			y: n[0].color.h
+		},
+		...n.map((e) => ({
+			x: e.step,
+			y: e.color.h
+		})),
+		{
+			x: 12,
+			y: n[n.length - 1].color.h
+		}
+	];
+	return d(i, (e) => l(a, e), (e) => l(o, e));
+}
+var m = {
+	light: {
+		gray: f(s.light.gray, "light"),
+		blue: p(s.light.blue, "light"),
+		green: p(s.light.green, "light"),
+		amber: p(s.light.amber, "light"),
+		red: p(s.light.red, "light")
+	},
+	dark: {
+		gray: f(s.dark.gray, "dark"),
+		blue: p(s.dark.blue, "dark"),
+		green: p(s.dark.green, "dark"),
+		amber: p(s.dark.amber, "dark"),
+		red: p(s.dark.red, "dark")
+	}
+};
+function h(e, t, n) {
+	let r = m[e][t][n - 1];
+	if (r === void 0) throw Error(`Missing primitive ${t}-${n} in ${e} mode`);
+	return r;
+}
+var g = {
+	primary: "blue",
+	success: "green",
+	warning: "amber",
+	danger: "red",
+	info: "blue"
+}, _ = {
+	light: {
+		primary: 9,
+		success: 9,
+		warning: 9,
+		danger: 9,
+		info: 10
+	},
+	dark: {
+		primary: 9,
+		success: 8,
+		warning: 8,
+		danger: 8,
+		info: 8
+	}
+}, v = {
+	bg: 1,
+	"bg-subtle": 2,
+	"bg-muted": 3,
+	text: 12,
+	"text-secondary": 11,
+	"text-muted": 9,
+	border: 4
+}, y = (e, t) => `var(--haze-${e}-${t})`, b = (e, t, n) => r(h(e, t, n)), x = (e) => `calc(l ${e < 0 ? "-" : "+"} ${Math.abs(e)})`;
+function S(e, t, n) {
+	let r = i[e];
+	switch (n) {
+		case "hover": return `oklch(from ${t} ${x(r.hover)} c h)`;
+		case "active": return `oklch(from ${t} ${x(r.active)} c h)`;
+		case "subtle": return `oklch(from ${t} ${r.subtleL} calc(c * ${r.subtleC}) h)`;
+		case "border-hover": return `oklch(from ${t} ${x(r.borderHover)} c h)`;
+		case "focus-ring": return `oklch(from ${t} l c h / ${a})`;
+	}
+}
+function C(t, n, r) {
+	let o = i[t];
+	switch (r) {
+		case "hover": return e({
+			l: n.l + o.hover,
+			c: n.c,
+			h: n.h
+		});
+		case "active": return e({
+			l: n.l + o.active,
+			c: n.c,
+			h: n.h
+		});
+		case "subtle": return e({
+			l: o.subtleL,
+			c: n.c * o.subtleC,
+			h: n.h
+		});
+		case "border-hover": return e({
+			l: n.l + o.borderHover,
+			c: n.c,
+			h: n.h
+		});
+		case "focus-ring": return {
+			l: n.l,
+			c: n.c,
+			h: n.h,
+			alpha: a
+		};
+	}
+}
+function w(e, t, n, r) {
+	return {
+		name: e,
+		label: t,
+		css: {
+			light: y(n, r.light),
+			dark: y(n, r.dark)
+		},
+		resolved: {
+			light: b("light", n, r.light),
+			dark: b("dark", n, r.dark)
+		}
+	};
+}
+function T(e, t, n, r, i) {
+	let a = `var(${n})`;
+	return {
+		name: e,
+		label: t,
+		css: {
+			light: S("light", a, i),
+			dark: S("dark", a, i)
+		},
+		resolved: {
+			light: C("light", r.light, i),
+			dark: C("dark", r.dark, i)
+		}
+	};
+}
+function E(e) {
+	let t = w(`--haze-color-${e}`, e[0].toUpperCase() + e.slice(1), g[e], {
+		light: _.light[e],
+		dark: _.dark[e]
+	});
+	return [
+		t,
+		T(`${t.name}-hover`, `${t.label} Hover`, t.name, t.resolved, "hover"),
+		T(`${t.name}-active`, `${t.label} Active`, t.name, t.resolved, "active"),
+		T(`${t.name}-subtle`, `${t.label} Subtle`, t.name, t.resolved, "subtle")
+	];
+}
+function D(e, t) {
+	return w(`--haze-color-${e}`, t, "gray", {
+		light: v[e],
+		dark: v[e]
+	});
+}
+var O = E("primary"), k = O[0], A = {
+	name: "--haze-color-text-inverse",
+	label: "Text Inverse",
+	css: {
+		light: "oklch(1 0 0)",
+		dark: h("light", "gray", 12)
+	},
+	resolved: {
+		light: {
+			l: 1,
+			c: 0,
+			h: 0
+		},
+		dark: b("light", "gray", 12)
+	}
+}, j = D("border", "Border"), M = [
+	...O,
+	D("bg", "Background"),
+	D("bg-subtle", "Background Subtle"),
+	D("bg-muted", "Background Muted"),
+	D("text", "Text"),
+	D("text-secondary", "Text Secondary"),
+	D("text-muted", "Text Muted"),
+	A,
+	j,
+	T("--haze-color-border-hover", "Border Hover", j.name, j.resolved, "border-hover"),
+	...E("success"),
+	...E("warning"),
+	...E("danger"),
+	...E("info"),
+	T("--haze-color-focus-ring", "Focus Ring", k.name, k.resolved, "focus-ring")
+];
+//#endregion
+export { m as PRIMITIVES, M as SEMANTIC_COLOR_TOKENS };