@soybeanjs/colord 0.1.1 → 0.2.0

package/README.md

@@ -17,7 +17,7 @@
 
 ## Differences from [colord](https://github.com/omgovich/colord)
 
-- support `oklab` and `oklch` color models
+- support `oklab` and `oklch` color models, and `oklch` is support directly without extra plugin
 - support `palette` API to generate and find the nearest palette color
 - more correct color parsing
 - simplify type definitions
@@ -37,6 +37,7 @@ colord("#ff0000").grayscale().alpha(0.25).toRgbString(); // "rgba(128, 128, 128,
 colord("rgb(192, 192, 192)").isLight(); // true
 colord("hsl(0, 50%, 50%)").darken(0.25).toHex(); // "#602020"
 colord({ r: 128, g: 128, b: 128, alpha: 0.25 }).toRgbString(); // "rgba(128, 128, 128, 0.25)"
+colord('hsl(210.003, 34.547%, 98.004%)').toOklchString(); // 'oklch(98.4% 0.003 247.858)'
 ```
 
 ## Palette API
@@ -62,7 +63,6 @@ generateNearestPalette('red'); // find the nearest color in the palette of the c
 - LAB objects ([via plugin](#plugins))
 - XYZ objects ([via plugin](#plugins))
 - OKLAB objects ([via plugin](#plugins))
-- OKLCH objects ([via plugin](#plugins))
 
 
 ## More API

package/dist/{colord-iJvjkDaN.d.ts → colord-AfN0aSRY.d.ts}

@@ -1,4 +1,4 @@
-import { a as HsvColor, c as InputSource, i as HslColor, t as AnyColor, v as RgbColor } from "./types-CV5bTriG.js";
+import { a as HsvColor, c as InputSource, i as HslColor, p as OklchColor, t as AnyColor, v as RgbColor } from "./types-BP0NSyqd.js";
 
 //#region src/colord.d.ts
 
@@ -67,6 +67,16 @@ declare class Colord {
    * Always includes an alpha value from 0 to 1.
    */
   toHsv(): HsvColor;
+  /**
+   * Converts a color to OKLCH color space and returns an object.
+   * Always includes an alpha value from 0 to 1.
+   */
+  toOklch(): OklchColor;
+  /**
+   * Converts a color to OKLCH color space and returns a string representation.
+   * Always includes an alpha value from 0 to 1.
+   */
+  toOklchString(): string;
   /**
    * Creates a new instance containing an inverted (opposite) version of the color.
    */

package/dist/{colord-CiL21DdP.js → colord-_3vDrvhI.js}

@@ -1,8 +1,8 @@
-import { l as round, v as ALPHA_PRECISION } from "./utils-BhDL0kto.js";
-import { a as parseRgbString, c as roundRgb, i as parseRgb, s as rgbToRgbString } from "./rgb-BIWjP3hJ.js";
-import { i as roundHsv, n as parseHsv, r as rgbToHsv } from "./hsv-6f-Avk00.js";
-import { a as saturate, c as rgbToHsl, l as rgbToHslString, n as invert, o as parseHsl, r as lighten, s as parseHslString, t as changeAlpha, u as roundHsl } from "./manipulate-DJ-cBonL.js";
-import { t as getBrightness } from "./get-DjkEJgax.js";
+import { _ as OKLAB_M2_INV, a as mul3x3, c as parseValueToDecimal, g as OKLAB_M2, h as OKLAB_M1_INV, i as isPresent, l as round, m as OKLAB_M1, n as clampHue, o as parseAlpha, s as parseHue, t as clamp, v as ALPHA_PRECISION } from "./utils-CshL9w1R.js";
+import { a as parseRgbString, c as roundRgb, i as parseRgb, n as clampRgb, o as rgbToLinearRgb, r as linearRgbToRgb, s as rgbToRgbString, t as clampLinearRgb } from "./rgb-DzRkOBLO.js";
+import { i as roundHsv, n as parseHsv, r as rgbToHsv } from "./hsv-OOAVcaRH.js";
+import { a as saturate, c as rgbToHsl, l as rgbToHslString, n as invert, o as parseHsl, r as lighten, s as parseHslString, t as changeAlpha, u as roundHsl } from "./manipulate-DG6jOj5-.js";
+import { t as getBrightness } from "./get-B9GsrsfV.js";
 
 //#region src/models/hex.ts
 const hexMatcher = /^#([0-9a-f]{3,8})$/i;
@@ -37,6 +37,170 @@ const rgbToHex = (rgb) => {
 	return `#${format(r)}${format(g)}${format(b)}${alphaHex}`;
 };
 
+//#endregion
+//#region src/models/oklch.ts
+const clampOklch = (oklch) => {
+	const { l, c, h, alpha } = oklch;
+	return {
+		l: clamp(l, 0, 1),
+		c: clamp(c, 0, .37),
+		h: clampHue(h),
+		alpha: clamp(alpha)
+	};
+};
+const roundOklch = (oklch) => {
+	const { l, c, h, alpha } = oklch;
+	return {
+		l: round(l, 3),
+		c: round(c, 3),
+		h: round(h, 3),
+		alpha: round(alpha, ALPHA_PRECISION)
+	};
+};
+/**
+* Convert OKLCH to Linear RGB without gamut mapping
+*/
+const oklchToLinearRgb = (oklch) => {
+	const { l, c, h, alpha } = oklch;
+	const hRad = h * Math.PI / 180;
+	const [r, g, b] = mul3x3(OKLAB_M1_INV, mul3x3(OKLAB_M2_INV, [
+		l,
+		c * Math.cos(hRad),
+		c * Math.sin(hRad)
+	]).map((v) => v * v * v));
+	return {
+		r,
+		g,
+		b,
+		alpha
+	};
+};
+/**
+* Check if a linear RGB color is within sRGB gamut
+*/
+const isInGamut = (linearRgb, epsilon = 1e-6) => {
+	return linearRgb.r >= -epsilon && linearRgb.r <= 1 + epsilon && linearRgb.g >= -epsilon && linearRgb.g <= 1 + epsilon && linearRgb.b >= -epsilon && linearRgb.b <= 1 + epsilon;
+};
+/**
+* Binary search to find maximum chroma that fits in sRGB gamut
+* @param l - Lightness (0-1)
+* @param h - Hue (0-360)
+* @param alpha - Alpha (0-1)
+* @returns Maximum chroma that fits in sRGB gamut
+*/
+const findGamutChroma = (l, h, alpha) => {
+	let min = 0;
+	let max = .37;
+	const epsilon = 1e-5;
+	if (isInGamut(oklchToLinearRgb({
+		l,
+		c: max,
+		h,
+		alpha
+	}), epsilon)) return max;
+	while (max - min > epsilon) {
+		const mid = (min + max) / 2;
+		if (isInGamut(oklchToLinearRgb({
+			l,
+			c: mid,
+			h,
+			alpha
+		}), epsilon)) min = mid;
+		else max = mid;
+	}
+	return min;
+};
+const oklchToRgb = (oklch) => {
+	const { l, h, alpha } = oklch;
+	let linearRgb = oklchToLinearRgb(oklch);
+	if (!isInGamut(linearRgb)) linearRgb = oklchToLinearRgb({
+		l,
+		c: findGamutChroma(l, h, alpha),
+		h,
+		alpha
+	});
+	linearRgb = clampLinearRgb(linearRgb);
+	return clampRgb(linearRgbToRgb(linearRgb));
+};
+const rgbToOklch = (rgb) => {
+	const lRgb = rgbToLinearRgb(rgb);
+	const [l, a, b] = mul3x3(OKLAB_M2, mul3x3(OKLAB_M1, [
+		lRgb.r,
+		lRgb.g,
+		lRgb.b
+	]).map((v) => Math.cbrt(v)));
+	const chroma = Math.sqrt(a * a + b * b);
+	let hue;
+	if (chroma < 1e-4) hue = 0;
+	else {
+		hue = Math.atan2(b, a) * (180 / Math.PI);
+		if (hue < 0) hue += 360;
+	}
+	return clampOklch({
+		l,
+		c: chroma,
+		h: hue,
+		alpha: rgb.alpha
+	});
+};
+const parseOriginOklch = ({ l, c, h, alpha = 1 }) => {
+	if (!isPresent(l) || !isPresent(c) || !isPresent(h)) return null;
+	return clampOklch({
+		l: Number(l),
+		c: Number(c),
+		h: Number(h),
+		alpha: Number(alpha)
+	});
+};
+const parseOklch = (input) => {
+	const oklch = parseOriginOklch(input);
+	if (!oklch) return null;
+	return oklchToRgb(oklch);
+};
+/**
+* Parsing syntax: oklch(L c h [/ alpha])
+* - L: <number|percentage>
+* - c: <number>
+* - h: <number>
+* - alpha: <number|percentage>
+*/
+const oklchMatcher = /^oklch\(\s*([+-]?[\d.]+)%?\s+([+-]?[\d.]+)\s+([+-]?[\d.]+)(deg|grad|rad|turn)?(?:\s*\/\s*([+-]?[\d.]+%?))?\s*\)$/i;
+const parseOriginOklchString = (input) => {
+	const match = oklchMatcher.exec(input);
+	if (!match) return null;
+	const [_, l, c, h, unit, alpha] = match;
+	return clampOklch({
+		l: parseValueToDecimal(l),
+		c: Number.parseFloat(c),
+		h: parseHue(h, unit),
+		alpha: parseAlpha(alpha)
+	});
+};
+const parseOklchString = (input) => {
+	const oklch = parseOriginOklchString(input);
+	if (!oklch) return null;
+	return oklchToRgb(oklch);
+};
+const toOklchString = (oklch) => {
+	const { l, c, h, alpha } = roundOklch(oklch);
+	return alpha < 1 ? `oklch(${l} ${c} ${h} / ${alpha})` : `oklch(${l} ${c} ${h})`;
+};
+const rgbToOklchString = (rgb) => {
+	return toOklchString(rgbToOklch(rgb));
+};
+const parseOklchBySource = (source) => {
+	if (!source || source.format !== "oklch") return null;
+	const { input } = source;
+	if (typeof input === "string") return parseOriginOklchString(input);
+	if (typeof input === "object") return parseOriginOklch(input);
+	return null;
+};
+const toOklchStringBySource = (source) => {
+	const oklch = parseOklchBySource(source);
+	if (!oklch) return null;
+	return toOklchString(oklch);
+};
+
 //#endregion
 //#region src/shared/common.ts
 function keysOf(record) {
@@ -49,12 +213,14 @@ const parsers = {
 	string: [
 		[parseHex, "hex"],
 		[parseRgbString, "rgb"],
-		[parseHslString, "hsl"]
+		[parseHslString, "hsl"],
+		[parseOklchString, "oklch"]
 	],
 	object: [
 		[parseRgb, "rgb"],
 		[parseHsl, "hsl"],
-		[parseHsv, "hsv"]
+		[parseHsv, "hsv"],
+		[parseOklch, "oklch"]
 	]
 };
 const findValidColor = (input, $parsers) => {
@@ -191,6 +357,20 @@ var Colord = class {
 		return roundHsv(rgbToHsv(this.rgb));
 	}
 	/**
+	* Converts a color to OKLCH color space and returns an object.
+	* Always includes an alpha value from 0 to 1.
+	*/
+	toOklch() {
+		return roundOklch(parseOklchBySource(this.getSource()) || rgbToOklch(this.rgb));
+	}
+	/**
+	* Converts a color to OKLCH color space and returns a string representation.
+	* Always includes an alpha value from 0 to 1.
+	*/
+	toOklchString() {
+		return toOklchStringBySource(this.getSource()) || rgbToOklchString(this.rgb);
+	}
+	/**
 	* Creates a new instance containing an inverted (opposite) version of the color.
 	*/
 	invert() {

package/dist/colord.d.ts

@@ -1,2 +1,2 @@
-import { n as colord, t as Colord } from "./colord-iJvjkDaN.js";
+import { n as colord, t as Colord } from "./colord-AfN0aSRY.js";
 export { Colord, colord };

package/dist/colord.js

@@ -1,10 +1,10 @@
-import "./utils-BhDL0kto.js";
-import "./rgb-BIWjP3hJ.js";
-import { n as colord, t as Colord } from "./colord-CiL21DdP.js";
-import "./hsv-6f-Avk00.js";
-import "./manipulate-DJ-cBonL.js";
-import "./xyz-Czd8MTub.js";
-import "./lab-DklZwOkG.js";
-import "./get-DjkEJgax.js";
+import "./utils-CshL9w1R.js";
+import "./rgb-DzRkOBLO.js";
+import { n as colord, t as Colord } from "./colord-_3vDrvhI.js";
+import "./hsv-OOAVcaRH.js";
+import "./manipulate-DG6jOj5-.js";
+import "./xyz-WMIP19rd.js";
+import "./lab-NxNRMUqK.js";
+import "./get-B9GsrsfV.js";
 
 export { Colord, colord };

package/dist/{extend-Cjbo01n8.js → extend-1NvzfDMp.js}

@@ -1,4 +1,4 @@
-import { a as parsers, t as Colord } from "./colord-CiL21DdP.js";
+import { a as parsers, t as Colord } from "./colord-_3vDrvhI.js";
 
 //#region src/extend.ts
 const activePlugins = [];

package/dist/{extend-BwkxQVzY.d.ts → extend-UYBGWCHH.d.ts}

@@ -1,5 +1,5 @@
-import { _ as Parsers } from "./types-CV5bTriG.js";
-import { t as Colord } from "./colord-iJvjkDaN.js";
+import { _ as Parsers } from "./types-BP0NSyqd.js";
+import { t as Colord } from "./colord-AfN0aSRY.js";
 
 //#region src/extend.d.ts
 type Plugin = (ColordClass: typeof Colord, parsers: Parsers) => void;

package/dist/{get-DjkEJgax.js → get-B9GsrsfV.js}

@@ -1,4 +1,4 @@
-import { o as rgbToLinearRgb } from "./rgb-BIWjP3hJ.js";
+import { o as rgbToLinearRgb } from "./rgb-DzRkOBLO.js";
 
 //#region src/shared/get.ts
 /**

package/dist/{hsv-6f-Avk00.js → hsv-OOAVcaRH.js}

@@ -1,4 +1,4 @@
-import { i as isPresent, l as round, n as clampHue, t as clamp, v as ALPHA_PRECISION } from "./utils-BhDL0kto.js";
+import { i as isPresent, l as round, n as clampHue, t as clamp, v as ALPHA_PRECISION } from "./utils-CshL9w1R.js";
 
 //#region src/models/hsv.ts
 const clampHsv = (hsv) => ({

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { a as HsvColor, b as TailwindPaletteColorKey, f as OklabColor, g as PaletteColorLevel, i as HslColor, l as LabColor, o as HwbColor, p as OklchColor, r as Format, s as Input, t as AnyColor, u as LchColor, v as RgbColor, x as XyzColor } from "./types-CV5bTriG.js";
-import { n as colord, t as Colord } from "./colord-iJvjkDaN.js";
-import { n as extend, t as Plugin } from "./extend-BwkxQVzY.js";
+import { a as HsvColor, b as TailwindPaletteColorKey, f as OklabColor, g as PaletteColorLevel, i as HslColor, l as LabColor, o as HwbColor, p as OklchColor, r as Format, s as Input, t as AnyColor, u as LchColor, v as RgbColor, x as XyzColor } from "./types-BP0NSyqd.js";
+import { n as colord, t as Colord } from "./colord-AfN0aSRY.js";
+import { n as extend, t as Plugin } from "./extend-UYBGWCHH.js";
 
 //#region src/shared/parse.d.ts
 

package/dist/index.js

@@ -1,11 +1,11 @@
-import "./utils-BhDL0kto.js";
-import "./rgb-BIWjP3hJ.js";
-import { i as getFormat, n as colord, r as random, t as Colord } from "./colord-CiL21DdP.js";
-import "./hsv-6f-Avk00.js";
-import "./manipulate-DJ-cBonL.js";
-import "./xyz-Czd8MTub.js";
-import "./lab-DklZwOkG.js";
-import "./get-DjkEJgax.js";
-import { t as extend } from "./extend-Cjbo01n8.js";
+import "./utils-CshL9w1R.js";
+import "./rgb-DzRkOBLO.js";
+import { i as getFormat, n as colord, r as random, t as Colord } from "./colord-_3vDrvhI.js";
+import "./hsv-OOAVcaRH.js";
+import "./manipulate-DG6jOj5-.js";
+import "./xyz-WMIP19rd.js";
+import "./lab-NxNRMUqK.js";
+import "./get-B9GsrsfV.js";
+import { t as extend } from "./extend-1NvzfDMp.js";
 
 export { Colord, colord, extend, getFormat, random };

package/dist/{lab-BXLaTQvQ.js → lab-DRO6J6z8.js}

@@ -1,6 +1,6 @@
-import { l as round, t as clamp } from "./utils-BhDL0kto.js";
-import { a as parseLabToRgb, c as roundLab, i as parseLabStringToRgb, l as toLabStringBySource, o as rgbToLab, r as parseLabBySource, s as rgbToLabString } from "./lab-DklZwOkG.js";
-import { r as getDeltaE2000 } from "./get-DjkEJgax.js";
+import { l as round, t as clamp } from "./utils-CshL9w1R.js";
+import { a as parseLabString, c as roundLab, i as parseLabBySource, l as toLabStringBySource, o as rgbToLab, r as parseLab, s as rgbToLabString } from "./lab-NxNRMUqK.js";
+import { r as getDeltaE2000 } from "./get-B9GsrsfV.js";
 
 //#region src/plugins/lab.ts
 /**
@@ -18,8 +18,8 @@ const labPlugin = (ColordClass, parsers) => {
 		const compared = color instanceof ColordClass ? color : new ColordClass(color);
 		return clamp(round(getDeltaE2000(this.toLab(), compared.toLab()) / 100, 3));
 	};
-	parsers.string.push([parseLabStringToRgb, "lab"]);
-	parsers.object.push([parseLabToRgb, "lab"]);
+	parsers.string.push([parseLabString, "lab"]);
+	parsers.object.push([parseLab, "lab"]);
 };
 var lab_default = labPlugin;
 

package/dist/{lab-DklZwOkG.js → lab-NxNRMUqK.js}

@@ -1,6 +1,6 @@
-import { a as mul3x3, d as M_D65_TO_D50, i as isPresent, l as round, o as parseAlpha, t as clamp, u as M_D50_TO_D65, v as ALPHA_PRECISION, y as D50 } from "./utils-BhDL0kto.js";
-import { n as clampRgb } from "./rgb-BIWjP3hJ.js";
-import { a as xyzToRgb, r as rgbToXyz } from "./xyz-Czd8MTub.js";
+import { a as mul3x3, d as M_D65_TO_D50, i as isPresent, l as round, o as parseAlpha, t as clamp, u as M_D50_TO_D65, v as ALPHA_PRECISION, y as D50 } from "./utils-CshL9w1R.js";
+import { n as clampRgb } from "./rgb-DzRkOBLO.js";
+import { a as xyzToRgb, r as rgbToXyz } from "./xyz-WMIP19rd.js";
 
 //#region src/models/lab.ts
 const EPSILON = 216 / 24389;
@@ -157,7 +157,7 @@ function labToXyzRaw(lab) {
 		alpha
 	};
 }
-const parseLab = ({ l, a, b, alpha = 1 }) => {
+const parseOriginLab = ({ l, a, b, alpha = 1 }) => {
 	if (!isPresent(l) || !isPresent(a) || !isPresent(b)) return null;
 	return clampLab({
 		l: Number(l),
@@ -166,8 +166,8 @@ const parseLab = ({ l, a, b, alpha = 1 }) => {
 		alpha: Number(alpha)
 	});
 };
-const parseLabToRgb = (input) => {
-	const lab = parseLab(input);
+const parseLab = (input) => {
+	const lab = parseOriginLab(input);
 	if (!lab) return null;
 	return labToRgb(lab);
 };
@@ -179,7 +179,7 @@ const parseLabToRgb = (input) => {
 * - alpha: <number|percentage> [0,1]
 */
 const labMatcher = /^lab\(\s*([+-]?[\d.]+)%?\s+([+-]?[\d.]+)\s+([+-]?[\d.]+)(?:\s*\/\s*([+-]?[\d.]+%?))?\s*\)$/i;
-const parseLabString = (input) => {
+const parseOriginLabString = (input) => {
 	const match = labMatcher.exec(input);
 	if (!match) return null;
 	const [_, l, a, b, alpha] = match;
@@ -190,8 +190,8 @@ const parseLabString = (input) => {
 		alpha: parseAlpha(alpha)
 	});
 };
-const parseLabStringToRgb = (input) => {
-	const lab = parseLabString(input);
+const parseLabString = (input) => {
+	const lab = parseOriginLabString(input);
 	if (!lab) return null;
 	return labToRgb(lab);
 };
@@ -205,8 +205,8 @@ const rgbToLabString = (rgb) => {
 const parseLabBySource = (source) => {
 	if (!source || source.format !== "lab") return null;
 	const { input } = source;
-	if (typeof input === "string") return parseLabString(input);
-	if (typeof input === "object") return parseLab(input);
+	if (typeof input === "string") return parseOriginLabString(input);
+	if (typeof input === "object") return parseOriginLab(input);
 	return null;
 };
 const toLabStringBySource = (source) => {
@@ -216,4 +216,4 @@ const toLabStringBySource = (source) => {
 };
 
 //#endregion
-export { parseLabToRgb as a, roundLab as c, parseLabStringToRgb as i, toLabStringBySource as l, labToRgb as n, rgbToLab as o, parseLabBySource as r, rgbToLabString as s, clampLab as t };
+export { parseLabString as a, roundLab as c, parseLabBySource as i, toLabStringBySource as l, labToRgb as n, rgbToLab as o, parseLab as r, rgbToLabString as s, clampLab as t };

package/dist/{manipulate-DJ-cBonL.js → manipulate-DG6jOj5-.js}

@@ -1,6 +1,6 @@
-import { i as isPresent, l as round, n as clampHue, o as parseAlpha, s as parseHue, t as clamp, v as ALPHA_PRECISION } from "./utils-BhDL0kto.js";
-import { r as rgbToHsv, t as hsvToRgb } from "./hsv-6f-Avk00.js";
-import { n as labToRgb, o as rgbToLab, t as clampLab } from "./lab-DklZwOkG.js";
+import { i as isPresent, l as round, n as clampHue, o as parseAlpha, s as parseHue, t as clamp, v as ALPHA_PRECISION } from "./utils-CshL9w1R.js";
+import { r as rgbToHsv, t as hsvToRgb } from "./hsv-OOAVcaRH.js";
+import { n as labToRgb, o as rgbToLab, t as clampLab } from "./lab-NxNRMUqK.js";
 
 //#region src/models/hsl.ts
 const clampHsl = (hsl) => {

package/dist/palette/index.d.ts

@@ -1,13 +1,19 @@
-import { d as NearestPalette, g as PaletteColorLevel, h as OutputFormat, m as OutputColorMap, t as AnyColor, y as TailwindPaletteColor } from "../types-CV5bTriG.js";
+import { d as NearestPalette, g as PaletteColorLevel, h as OutputFormat, m as OutputColorMap, t as AnyColor, y as TailwindPaletteColor } from "../types-BP0NSyqd.js";
 
 //#region src/palette/constant.d.ts
 
 /**
  * TailwindCSS v4 official oklch palette data
  *
- * the format is `oklch` string
+ * the format is `oklch` string, like `oklch(98.4% 0.003 247.858)`
  */
 declare const tailwindPalette: TailwindPaletteColor;
+/**
+ * TailwindCSS v4 official hsl palette data
+ *
+ * the format is `hsl` string, but no `hsl()` like `210.003, 34.547%, 98.004%`
+ */
+declare const tailwindPaletteHsl: TailwindPaletteColor;
 //#endregion
 //#region src/palette/generate.d.ts
 /**
@@ -27,4 +33,4 @@ declare function generatePalette<F extends OutputFormat>(input: AnyColor, format
  */
 declare function generateNearestPalette<F extends OutputFormat>(input: AnyColor, format?: F): NearestPalette<F>;
 //#endregion
-export { generateNearestPalette, generatePalette, tailwindPalette };
+export { generateNearestPalette, generatePalette, tailwindPalette, tailwindPaletteHsl };