haze-ui 1.22.0 → 1.23.0

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

package/dist/tokens/registry.js

@@ -1,149 +1,15 @@
+import { formatOklch as e } from "./oklch.js";
+import { SEMANTIC_COLOR_TOKENS as t } from "./palette.js";
 //#region src/lib/tokens/registry.ts
-var e = [
-	{
-		name: "--haze-color-primary",
-		category: "color",
-		label: "Primary",
-		type: "color",
-		light: "#0066ff",
-		dark: "#4d94ff"
-	},
-	{
-		name: "--haze-color-primary-hover",
-		category: "color",
-		label: "Primary Hover",
-		type: "color",
-		light: "#0052cc",
-		dark: "#6aa6ff"
-	},
-	{
-		name: "--haze-color-primary-active",
-		category: "color",
-		label: "Primary Active",
-		type: "color",
-		light: "#003d99",
-		dark: "#80b3ff"
-	},
-	{
-		name: "--haze-color-primary-subtle",
-		category: "color",
-		label: "Primary Subtle",
-		type: "color",
-		light: "#e6f0ff",
-		dark: "#1a2e4a"
-	},
-	{
-		name: "--haze-color-bg",
-		category: "color",
-		label: "Background",
-		type: "color",
-		light: "#ffffff",
-		dark: "#121212"
-	},
-	{
-		name: "--haze-color-bg-subtle",
-		category: "color",
-		label: "Background Subtle",
-		type: "color",
-		light: "#f7f8fa",
-		dark: "#1e1e1e"
-	},
-	{
-		name: "--haze-color-bg-muted",
-		category: "color",
-		label: "Background Muted",
-		type: "color",
-		light: "#eef0f4",
-		dark: "#2a2a2a"
-	},
-	{
-		name: "--haze-color-text",
-		category: "color",
-		label: "Text",
-		type: "color",
-		light: "#1a1a1a",
-		dark: "#e8e8e8"
-	},
-	{
-		name: "--haze-color-text-secondary",
-		category: "color",
-		label: "Text Secondary",
-		type: "color",
-		light: "#4a4a4a",
-		dark: "#b0b0b0"
-	},
-	{
-		name: "--haze-color-text-muted",
-		category: "color",
-		label: "Text Muted",
-		type: "color",
-		light: "#8a8a8a",
-		dark: "#707070"
-	},
-	{
-		name: "--haze-color-text-inverse",
-		category: "color",
-		label: "Text Inverse",
-		type: "color",
-		light: "#ffffff",
-		dark: "#1a1a1a"
-	},
-	{
-		name: "--haze-color-border",
-		category: "color",
-		label: "Border",
-		type: "color",
-		light: "#e0e0e0",
-		dark: "#333333"
-	},
-	{
-		name: "--haze-color-border-hover",
-		category: "color",
-		label: "Border Hover",
-		type: "color",
-		light: "#c0c0c0",
-		dark: "#4a4a4a"
-	},
-	{
-		name: "--haze-color-success",
-		category: "color",
-		label: "Success",
-		type: "color",
-		light: "#16a34a",
-		dark: "#22c55e"
-	},
-	{
-		name: "--haze-color-warning",
-		category: "color",
-		label: "Warning",
-		type: "color",
-		light: "#f59e0b",
-		dark: "#fbbf24"
-	},
-	{
-		name: "--haze-color-danger",
-		category: "color",
-		label: "Danger",
-		type: "color",
-		light: "#dc2626",
-		dark: "#ef4444"
-	},
-	{
-		name: "--haze-color-info",
-		category: "color",
-		label: "Info",
-		type: "color",
-		light: "#2563eb",
-		dark: "#3b82f6"
-	},
-	{
-		name: "--haze-color-focus-ring",
+var n = [
+	...t.map((t) => ({
+		name: t.name,
 		category: "color",
-		label: "Focus Ring",
+		label: t.label,
 		type: "color",
-		light: "rgba(0, 102, 255, 0.4)",
-		dark: "rgba(77, 148, 255, 0.4)"
-	},
+		light: e(t.resolved.light),
+		dark: e(t.resolved.dark)
+	})),
 	{
 		name: "--haze-font-sans",
 		category: "typography",
@@ -448,7 +314,7 @@ var e = [
 		light: "0 20px 25px rgba(0, 0, 0, 0.1)",
 		dark: "0 20px 25px rgba(0, 0, 0, 0.1)"
 	}
-], t = {
+], r = {
 	accordion: [
 		"--haze-color-border",
 		"--haze-color-bg-subtle",
@@ -466,10 +332,14 @@ var e = [
 	],
 	alert: [
 		"--haze-color-danger",
+		"--haze-color-danger-subtle",
 		"--haze-color-focus-ring",
 		"--haze-color-info",
+		"--haze-color-info-subtle",
 		"--haze-color-success",
+		"--haze-color-success-subtle",
 		"--haze-color-warning",
+		"--haze-color-warning-subtle",
 		"--haze-font-sans",
 		"--haze-leading-normal",
 		"--haze-radius-md",
@@ -479,6 +349,43 @@ var e = [
 		"--haze-text-lg",
 		"--haze-text-sm"
 	],
+	approvalcard: [
+		"--haze-color-bg",
+		"--haze-color-border",
+		"--haze-color-primary",
+		"--haze-color-text",
+		"--haze-color-text-muted",
+		"--haze-color-warning",
+		"--haze-color-warning-subtle",
+		"--haze-font-sans",
+		"--haze-radius-md",
+		"--haze-space-2",
+		"--haze-space-3",
+		"--haze-space-4",
+		"--haze-text-sm",
+		"--haze-weight-medium"
+	],
+	asyncsection: [
+		"--haze-color-bg-subtle",
+		"--haze-color-border",
+		"--haze-color-border-hover",
+		"--haze-color-danger",
+		"--haze-color-danger-subtle",
+		"--haze-color-focus-ring",
+		"--haze-color-text",
+		"--haze-color-text-muted",
+		"--haze-font-sans",
+		"--haze-leading-normal",
+		"--haze-leading-tight",
+		"--haze-radius-md",
+		"--haze-space-1",
+		"--haze-space-2",
+		"--haze-space-3",
+		"--haze-space-4",
+		"--haze-space-8",
+		"--haze-text-sm",
+		"--haze-weight-medium"
+	],
 	avatar: [
 		"--haze-color-bg-muted",
 		"--haze-color-text-secondary",
@@ -492,10 +399,14 @@ var e = [
 	badge: [
 		"--haze-color-bg-muted",
 		"--haze-color-danger",
+		"--haze-color-danger-subtle",
 		"--haze-color-info",
+		"--haze-color-info-subtle",
 		"--haze-color-success",
+		"--haze-color-success-subtle",
 		"--haze-color-text-secondary",
 		"--haze-color-warning",
+		"--haze-color-warning-subtle",
 		"--haze-font-sans",
 		"--haze-leading-tight",
 		"--haze-radius-full",
@@ -507,6 +418,23 @@ var e = [
 		"--haze-text-xs",
 		"--haze-weight-medium"
 	],
+	banner: [
+		"--haze-color-danger",
+		"--haze-color-danger-subtle",
+		"--haze-color-info",
+		"--haze-color-info-subtle",
+		"--haze-color-success",
+		"--haze-color-success-subtle",
+		"--haze-color-warning",
+		"--haze-color-warning-subtle",
+		"--haze-font-sans",
+		"--haze-radius-md",
+		"--haze-space-2",
+		"--haze-space-3",
+		"--haze-space-4",
+		"--haze-text-lg",
+		"--haze-text-sm"
+	],
 	breadcrumb: [
 		"--haze-color-primary",
 		"--haze-color-primary-hover",
@@ -578,6 +506,49 @@ var e = [
 		"--haze-text-sm",
 		"--haze-weight-medium"
 	],
+	chip: [
+		"--haze-color-bg-muted",
+		"--haze-color-border",
+		"--haze-color-danger",
+		"--haze-color-danger-subtle",
+		"--haze-color-primary",
+		"--haze-color-primary-subtle",
+		"--haze-color-success",
+		"--haze-color-success-subtle",
+		"--haze-color-text-secondary",
+		"--haze-color-warning",
+		"--haze-color-warning-subtle",
+		"--haze-font-sans",
+		"--haze-radius-full",
+		"--haze-space-1",
+		"--haze-space-3",
+		"--haze-text-xs",
+		"--haze-weight-medium"
+	],
+	confirmdialog: [
+		"--haze-color-bg",
+		"--haze-color-border",
+		"--haze-color-danger",
+		"--haze-color-danger-active",
+		"--haze-color-danger-hover",
+		"--haze-color-primary",
+		"--haze-color-text",
+		"--haze-color-text-inverse",
+		"--haze-color-text-muted",
+		"--haze-font-sans",
+		"--haze-leading-relaxed",
+		"--haze-radius-md",
+		"--haze-radius-xl",
+		"--haze-shadow-xl",
+		"--haze-space-2",
+		"--haze-space-3",
+		"--haze-space-4",
+		"--haze-space-6",
+		"--haze-text-lg",
+		"--haze-text-sm",
+		"--haze-weight-medium",
+		"--haze-weight-semibold"
+	],
 	combobox: [
 		"--haze-color-bg",
 		"--haze-color-border",
@@ -627,6 +598,20 @@ var e = [
 		"--haze-shadow-xl",
 		"--haze-space-6"
 	],
+	diffviewer: [
+		"--haze-color-border",
+		"--haze-color-danger",
+		"--haze-color-danger-subtle",
+		"--haze-color-success",
+		"--haze-color-success-subtle",
+		"--haze-color-text-muted",
+		"--haze-font-mono",
+		"--haze-leading-relaxed",
+		"--haze-radius-md",
+		"--haze-space-2",
+		"--haze-space-3",
+		"--haze-text-xs"
+	],
 	disclosure: [
 		"--haze-color-bg-subtle",
 		"--haze-color-border",
@@ -777,6 +762,24 @@ var e = [
 		"--haze-radius-full",
 		"--haze-shadow-sm"
 	],
+	steptimeline: [
+		"--haze-color-bg",
+		"--haze-color-border",
+		"--haze-color-danger",
+		"--haze-color-primary",
+		"--haze-color-success",
+		"--haze-color-text",
+		"--haze-color-text-inverse",
+		"--haze-color-text-muted",
+		"--haze-font-sans",
+		"--haze-radius-full",
+		"--haze-space-1",
+		"--haze-space-3",
+		"--haze-space-4",
+		"--haze-text-sm",
+		"--haze-text-xs",
+		"--haze-weight-medium"
+	],
 	switch: [
 		"--haze-color-bg-muted",
 		"--haze-color-primary",
@@ -813,8 +816,11 @@ var e = [
 		"--haze-color-primary",
 		"--haze-color-primary-subtle",
 		"--haze-color-success",
+		"--haze-color-success-subtle",
 		"--haze-color-warning",
+		"--haze-color-warning-subtle",
 		"--haze-color-danger",
+		"--haze-color-danger-subtle",
 		"--haze-color-focus-ring",
 		"--haze-font-sans",
 		"--haze-radius-md",
@@ -851,8 +857,11 @@ var e = [
 		"--haze-color-border",
 		"--haze-color-text",
 		"--haze-color-success",
+		"--haze-color-success-subtle",
 		"--haze-color-warning",
+		"--haze-color-warning-subtle",
 		"--haze-color-danger",
+		"--haze-color-danger-subtle",
 		"--haze-font-sans",
 		"--haze-leading-normal",
 		"--haze-radius-md",
@@ -875,4 +884,4 @@ var e = [
 	]
 };
 //#endregion
-export { t as COMPONENT_TOKENS, e as TOKEN_REGISTRY };
+export { r as COMPONENT_TOKENS, n as TOKEN_REGISTRY };

package/dist/types/tokens/index.d.ts

@@ -1,3 +1,7 @@
 export { lightTheme, darkTheme } from './colors';
 export { spacing } from './spacing';
 export { typography } from './typography';
+export { PRIMITIVES, SEMANTIC_COLOR_TOKENS } from './palette';
+export type { Family, Mode, PrimitiveScales, SemanticColorToken } from './palette';
+export { deltaE, formatOklch, oklchToHex, parseHex, parseOklch, wcagContrast } from './oklch';
+export type { Oklch } from './oklch';