chroma-panel 0.2.0 → 1.0.0

package/dist/components/ChromaPanel.js

@@ -24,7 +24,7 @@ const FALLBACK = {
 	a: 1
 };
 function ChromaPanel(props) {
-	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, modes = [
+	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, onValueChange, onValueCommit, modes = [
 		"wheel",
 		"sliders",
 		"palettes",
@@ -62,13 +62,15 @@ function ChromaPanel(props) {
 			return;
 		}
 		if (sameRendered(parsed, store.get())) return;
-		store.ingest(parsed);
+		store.ingest(parsed, "programmatic");
 	}, [value, store]);
 	const [internalRecents, setInternalRecents] = React.useState(() => defaultRecentColors ?? []);
 	const activeRecents = recentColors ?? internalRecents;
 	const callbacks = React.useRef({
 		onChange,
 		onChangeComplete,
+		onValueChange,
+		onValueCommit,
 		format,
 		activeRecents,
 		onRecentColorsChange,
@@ -78,16 +80,24 @@ function ChromaPanel(props) {
 		callbacks.current = {
 			onChange,
 			onChangeComplete,
+			onValueChange,
+			onValueCommit,
 			format,
 			activeRecents,
 			onRecentColorsChange,
 			controlled: recentColors !== void 0
 		};
 	});
-	React.useEffect(() => store.subscribe((c) => callbacks.current.onChange?.(toResult(c, callbacks.current.format))), [store]);
-	React.useEffect(() => store.subscribeCommit((c) => {
-		const { onChangeComplete: done, format: fmt, activeRecents: recents, onRecentColorsChange: notify, controlled } = callbacks.current;
-		done?.(toResult(c, fmt));
+	React.useEffect(() => store.subscribe((c, meta) => {
+		const result = toResult(c, callbacks.current.format);
+		callbacks.current.onChange?.(result);
+		callbacks.current.onValueChange?.(result, meta);
+	}), [store]);
+	React.useEffect(() => store.subscribeCommit((c, meta) => {
+		const { onChangeComplete: done, format: fmt, activeRecents: recents, onValueCommit: commit, onRecentColorsChange: notify, controlled } = callbacks.current;
+		const result = toResult(c, fmt);
+		done?.(result);
+		commit?.(result, meta);
 		const next = pushRecent(recents, toHex(c));
 		if (!controlled) setInternalRecents(next);
 		notify?.(next);

package/dist/components/ColorInput.cjs

@@ -58,7 +58,7 @@ function ColorInput(props) {
 	});
 	require_useFormControl.useFormReset(hiddenRef, () => {
 		const parsed = typeof defaultValue === "string" ? require_parse.parse(defaultValue) : defaultValue;
-		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed, "programmatic");
 	});
 	require_useFormControl.useConstraintValidation(hiddenRef, {
 		behavior: validationBehavior,

package/dist/components/ColorInput.js

@@ -56,7 +56,7 @@ function ColorInput(props) {
 	});
 	useFormReset(hiddenRef, () => {
 		const parsed = typeof defaultValue === "string" ? parse(defaultValue) : defaultValue;
-		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed, "programmatic");
 	});
 	useConstraintValidation(hiddenRef, {
 		behavior: validationBehavior,

package/dist/components/PanelFooter.cjs

@@ -33,8 +33,8 @@ function PanelFooter() {
 		if (hex === null) return;
 		const parsed = require_parse.parse(hex);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "eyedropper");
+		store.commit("eyedropper");
 	};
 	const recentsRef = react.useRef(null);
 	const [current, setCurrent] = react.useState(null);
@@ -66,8 +66,8 @@ function PanelFooter() {
 					onClick: () => {
 						const parsed = require_parse.parse(color);
 						if (parsed === null) return;
-						store.ingest(parsed);
-						store.commit();
+						store.ingest(parsed, "recent");
+						store.commit("recent");
 					}
 				}) }, `${color}-${index}`))
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cp-footer-spacer" }),

package/dist/components/PanelFooter.js

@@ -31,8 +31,8 @@ function PanelFooter() {
 		if (hex === null) return;
 		const parsed = parse(hex);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "eyedropper");
+		store.commit("eyedropper");
 	};
 	const recentsRef = React.useRef(null);
 	const [current, setCurrent] = React.useState(null);
@@ -64,8 +64,8 @@ function PanelFooter() {
 					onClick: () => {
 						const parsed = parse(color);
 						if (parsed === null) return;
-						store.ingest(parsed);
-						store.commit();
+						store.ingest(parsed, "recent");
+						store.commit("recent");
 					}
 				}) }, `${color}-${index}`))
 			}) : /* @__PURE__ */ jsx("div", { className: "cp-footer-spacer" }),

package/dist/contrast.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_contrast = require("./a11y/contrast.cjs");
 exports.apcaContrast = require_contrast.apcaContrast;
+exports.compositeColor = require_contrast.compositeColor;
 exports.contrastRatio = require_contrast.contrastRatio;
+exports.contrastRatioWithAlpha = require_contrast.contrastRatioWithAlpha;
 exports.contrastReport = require_contrast.contrastReport;
 exports.meetsContrast = require_contrast.meetsContrast;
 exports.meetsNonTextContrast = require_contrast.meetsNonTextContrast;
 exports.readableTextColor = require_contrast.readableTextColor;
 exports.relativeLuminance = require_contrast.relativeLuminance;
+exports.suggestAccessibleColor = require_contrast.suggestAccessibleColor;
 exports.wcagLevel = require_contrast.wcagLevel;

package/dist/contrast.d.cts

@@ -1,2 +1,2 @@
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.cjs";
-export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.cjs";
+export { type AccessibleColorSuggestion, type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/contrast.d.ts

@@ -1,2 +1,2 @@
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
-export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
+export { type AccessibleColorSuggestion, type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/contrast.js

@@ -1,2 +1,2 @@
-import { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
-export { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
+export { apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/core/store.cjs

@@ -2,26 +2,34 @@ const require_sticky = require("../color/sticky.cjs");
 //#region src/core/store.ts
 function createColorStore(initial) {
 	let state = initial;
+	let lastSource = "unknown";
 	const listeners = /* @__PURE__ */ new Set();
 	const commitListeners = /* @__PURE__ */ new Set();
-	function emit() {
-		for (const listener of Array.from(listeners)) listener(state);
+	function emit(source) {
+		for (const listener of Array.from(listeners)) listener(state, {
+			phase: "change",
+			source
+		});
 	}
-	function set(next) {
+	function set(next, source = "unknown") {
 		if (require_sticky.sameHsva(state, next)) return;
 		state = next;
-		emit();
+		lastSource = source;
+		emit(source);
 	}
 	return {
 		get: () => state,
 		set,
-		patch: (partial) => set({
+		patch: (partial, source) => set({
 			...state,
 			...partial
-		}),
-		ingest: (next) => set(require_sticky.ingest(next, state)),
-		commit: () => {
-			for (const listener of Array.from(commitListeners)) listener(state);
+		}, source),
+		ingest: (next, source) => set(require_sticky.ingest(next, state), source),
+		commit: (source = lastSource) => {
+			for (const listener of Array.from(commitListeners)) listener(state, {
+				phase: "commit",
+				source
+			});
 		},
 		subscribe: (listener) => {
 			listeners.add(listener);

package/dist/core/store.d.cts

@@ -1,13 +1,13 @@
-import { Hsva } from "../color/types.cjs";
+import { ColorChangeMeta, ColorChangeSource, Hsva } from "../color/types.cjs";
 //#region src/core/store.d.ts
-export type ColorListener = (color: Hsva) => void;
+export type ColorListener = (color: Hsva, meta: ColorChangeMeta) => void;
 export type Unsubscribe = () => void;
 export interface ColorStore {
   get(): Hsva;
-  set(next: Hsva): void;
-  patch(partial: Partial<Hsva>): void;
-  ingest(next: Hsva): void;
-  commit(): void;
+  set(next: Hsva, source?: ColorChangeSource): void;
+  patch(partial: Partial<Hsva>, source?: ColorChangeSource): void;
+  ingest(next: Hsva, source?: ColorChangeSource): void;
+  commit(source?: ColorChangeSource): void;
   subscribe(listener: ColorListener): Unsubscribe;
   subscribeCommit(listener: ColorListener): Unsubscribe;
   getSnapshot(): Hsva;

package/dist/core/store.d.ts

@@ -1,13 +1,13 @@
-import { Hsva } from "../color/types.js";
+import { ColorChangeMeta, ColorChangeSource, Hsva } from "../color/types.js";
 //#region src/core/store.d.ts
-export type ColorListener = (color: Hsva) => void;
+export type ColorListener = (color: Hsva, meta: ColorChangeMeta) => void;
 export type Unsubscribe = () => void;
 export interface ColorStore {
   get(): Hsva;
-  set(next: Hsva): void;
-  patch(partial: Partial<Hsva>): void;
-  ingest(next: Hsva): void;
-  commit(): void;
+  set(next: Hsva, source?: ColorChangeSource): void;
+  patch(partial: Partial<Hsva>, source?: ColorChangeSource): void;
+  ingest(next: Hsva, source?: ColorChangeSource): void;
+  commit(source?: ColorChangeSource): void;
   subscribe(listener: ColorListener): Unsubscribe;
   subscribeCommit(listener: ColorListener): Unsubscribe;
   getSnapshot(): Hsva;

package/dist/core/store.js

@@ -2,26 +2,34 @@ import { ingest, sameHsva } from "../color/sticky.js";
 //#region src/core/store.ts
 function createColorStore(initial) {
 	let state = initial;
+	let lastSource = "unknown";
 	const listeners = /* @__PURE__ */ new Set();
 	const commitListeners = /* @__PURE__ */ new Set();
-	function emit() {
-		for (const listener of Array.from(listeners)) listener(state);
+	function emit(source) {
+		for (const listener of Array.from(listeners)) listener(state, {
+			phase: "change",
+			source
+		});
 	}
-	function set(next) {
+	function set(next, source = "unknown") {
 		if (sameHsva(state, next)) return;
 		state = next;
-		emit();
+		lastSource = source;
+		emit(source);
 	}
 	return {
 		get: () => state,
 		set,
-		patch: (partial) => set({
+		patch: (partial, source) => set({
 			...state,
 			...partial
-		}),
-		ingest: (next) => set(ingest(next, state)),
-		commit: () => {
-			for (const listener of Array.from(commitListeners)) listener(state);
+		}, source),
+		ingest: (next, source) => set(ingest(next, state), source),
+		commit: (source = lastSource) => {
+			for (const listener of Array.from(commitListeners)) listener(state, {
+				phase: "commit",
+				source
+			});
 		},
 		subscribe: (listener) => {
 			listeners.add(listener);

package/dist/core.cjs

@@ -1,13 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_convert = require("./color/convert.cjs");
+const require_css4 = require("./color/css4.cjs");
 const require_parse = require("./color/parse.cjs");
 const require_serialize = require("./color/serialize.cjs");
 const require_sticky = require("./color/sticky.cjs");
 const require_store = require("./core/store.cjs");
+const require_value = require("./color/value.cjs");
 exports.clamp = require_convert.clamp;
 exports.clearNamedColors = require_parse.clearNamedColors;
+exports.colorValueToHsva = require_css4.colorValueToHsva;
+exports.convertColor = require_css4.convertColor;
 exports.createColorStore = require_store.createColorStore;
 exports.hslaToHsva = require_convert.hslaToHsva;
+exports.hsvaToColorValue = require_css4.hsvaToColorValue;
 exports.hsvaToHsl = require_convert.hsvaToHsl;
 exports.hsvaToHsla = require_convert.hsvaToHsla;
 exports.hsvaToHwba = require_convert.hsvaToHwba;
@@ -15,14 +20,19 @@ exports.hsvaToRgb = require_convert.hsvaToRgb;
 exports.hsvaToRgba = require_convert.hsvaToRgba;
 exports.hwbaToHsva = require_convert.hwbaToHsva;
 exports.ingest = require_sticky.ingest;
+exports.isInGamut = require_css4.isInGamut;
 exports.isValidColor = require_parse.isValidColor;
+exports.mapToGamut = require_css4.mapToGamut;
 exports.normalizeHue = require_convert.normalizeHue;
 exports.parse = require_parse.parse;
+exports.parseColor = require_value.parseColor;
+exports.parseCss4Color = require_css4.parseCss4Color;
 exports.registerNamedColors = require_parse.registerNamedColors;
 exports.rgbaToHsva = require_convert.rgbaToHsva;
 exports.roundRgba = require_convert.roundRgba;
 exports.sameHsva = require_sticky.sameHsva;
 exports.sameRendered = require_sticky.sameRendered;
+exports.serializeColor = require_css4.serializeColor;
 exports.toFormat = require_serialize.toFormat;
 exports.toHex = require_serialize.toHex;
 exports.toHexa = require_serialize.toHexa;

package/dist/core.d.cts

@@ -1,7 +1,9 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.cjs";
+import { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions } from "./color/types.cjs";
 import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.cjs";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.cjs";
+import { parseColor } from "./color/value.cjs";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.cjs";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.cjs";
 import { ingest, sameHsva, sameRendered } from "./color/sticky.cjs";
 import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.cjs";
-export { ColorChangeResult, ColorFormat, type ColorListener, type ColorStore, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba, type Unsubscribe, clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+export { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, type ColorListener, type ColorStore, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/core.d.ts

@@ -1,7 +1,9 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.js";
+import { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions } from "./color/types.js";
 import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
+import { parseColor } from "./color/value.js";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.js";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
 import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
 import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.js";
-export { ColorChangeResult, ColorFormat, type ColorListener, type ColorStore, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba, type Unsubscribe, clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+export { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, type ColorListener, type ColorStore, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/core.js

@@ -1,6 +1,8 @@
 import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.js";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
 import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
 import { createColorStore } from "./core/store.js";
-export { clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+import { parseColor } from "./color/value.js";
+export { clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/export/tokens.cjs

@@ -0,0 +1,39 @@
+const require_css4 = require("../color/css4.cjs");
+const require_value = require("../color/value.cjs");
+//#region src/export/tokens.ts
+function safeName(name) {
+	return name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "color";
+}
+function formatColor(color, format) {
+	if (format === "preserve") return color;
+	const parsed = require_value.parseColor(color);
+	return parsed === null ? color : require_css4.serializeColor(parsed, {
+		format,
+		gamut: format === "display-p3" ? "display-p3" : "preserve"
+	});
+}
+function toCssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	const lines = Object.entries(tokens).map(([name, color]) => `  --${prefix}-${safeName(name)}: ${formatColor(color, format)};`);
+	return `${options.selector ?? ":root"} {\n${lines.join("\n")}\n}`;
+}
+function toScssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	return Object.entries(tokens).map(([name, color]) => `$${prefix}-${safeName(name)}: ${formatColor(color, format)};`).join("\n");
+}
+function toTailwindColors(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), color]));
+}
+function toDesignTokens(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), {
+		$type: "color",
+		$value: color
+	}]));
+}
+//#endregion
+exports.toCssVariables = toCssVariables;
+exports.toDesignTokens = toDesignTokens;
+exports.toScssVariables = toScssVariables;
+exports.toTailwindColors = toTailwindColors;

package/dist/export/tokens.d.cts

@@ -0,0 +1,16 @@
+import { ModernColorSpace } from "../color/types.cjs";
+//#region src/export/tokens.d.ts
+export type ColorTokenMap = Record<string, string>;
+export interface TokenExportOptions {
+  prefix?: string;
+  format?: ModernColorSpace | "preserve";
+  selector?: string;
+}
+export declare function toCssVariables(tokens: ColorTokenMap, options?: TokenExportOptions): string;
+export declare function toScssVariables(tokens: ColorTokenMap, options?: Omit<TokenExportOptions, "selector">): string;
+export declare function toTailwindColors(tokens: ColorTokenMap): Record<string, string>;
+export declare function toDesignTokens(tokens: ColorTokenMap): Record<string, {
+  $type: "color";
+  $value: string;
+}>;
+//#endregion

package/dist/export/tokens.d.ts

@@ -0,0 +1,16 @@
+import { ModernColorSpace } from "../color/types.js";
+//#region src/export/tokens.d.ts
+export type ColorTokenMap = Record<string, string>;
+export interface TokenExportOptions {
+  prefix?: string;
+  format?: ModernColorSpace | "preserve";
+  selector?: string;
+}
+export declare function toCssVariables(tokens: ColorTokenMap, options?: TokenExportOptions): string;
+export declare function toScssVariables(tokens: ColorTokenMap, options?: Omit<TokenExportOptions, "selector">): string;
+export declare function toTailwindColors(tokens: ColorTokenMap): Record<string, string>;
+export declare function toDesignTokens(tokens: ColorTokenMap): Record<string, {
+  $type: "color";
+  $value: string;
+}>;
+//#endregion

package/dist/export/tokens.js

@@ -0,0 +1,37 @@
+import { serializeColor } from "../color/css4.js";
+import { parseColor } from "../color/value.js";
+//#region src/export/tokens.ts
+function safeName(name) {
+	return name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "color";
+}
+function formatColor(color, format) {
+	if (format === "preserve") return color;
+	const parsed = parseColor(color);
+	return parsed === null ? color : serializeColor(parsed, {
+		format,
+		gamut: format === "display-p3" ? "display-p3" : "preserve"
+	});
+}
+function toCssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	const lines = Object.entries(tokens).map(([name, color]) => `  --${prefix}-${safeName(name)}: ${formatColor(color, format)};`);
+	return `${options.selector ?? ":root"} {\n${lines.join("\n")}\n}`;
+}
+function toScssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	return Object.entries(tokens).map(([name, color]) => `$${prefix}-${safeName(name)}: ${formatColor(color, format)};`).join("\n");
+}
+function toTailwindColors(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), color]));
+}
+function toDesignTokens(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), {
+		$type: "color",
+		$value: color
+	}]));
+}
+//#endregion
+export { toCssVariables, toDesignTokens, toScssVariables, toTailwindColors };
+

package/dist/export.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tokens = require("./export/tokens.cjs");
+exports.toCssVariables = require_tokens.toCssVariables;
+exports.toDesignTokens = require_tokens.toDesignTokens;
+exports.toScssVariables = require_tokens.toScssVariables;
+exports.toTailwindColors = require_tokens.toTailwindColors;

package/dist/export.d.cts

@@ -0,0 +1,2 @@
+import { ColorTokenMap, TokenExportOptions, toCssVariables, toDesignTokens, toScssVariables, toTailwindColors } from "./export/tokens.cjs";
+export { type ColorTokenMap, type TokenExportOptions, toCssVariables, toDesignTokens, toScssVariables, toTailwindColors };

package/dist/export.d.ts

@@ -0,0 +1,2 @@
+import { ColorTokenMap, TokenExportOptions, toCssVariables, toDesignTokens, toScssVariables, toTailwindColors } from "./export/tokens.js";
+export { type ColorTokenMap, type TokenExportOptions, toCssVariables, toDesignTokens, toScssVariables, toTailwindColors };

package/dist/export.js

@@ -0,0 +1,2 @@
+import { toCssVariables, toDesignTokens, toScssVariables, toTailwindColors } from "./export/tokens.js";
+export { toCssVariables, toDesignTokens, toScssVariables, toTailwindColors };