@texel/color 1.1.1 → 1.1.3

package/README.md

@@ -85,7 +85,7 @@ The return value is the new coordinates in the destination space; such as `[r,g,
 
 #### `output = gamutMapOKLCH(oklch, gamut = sRGBGamut, targetSpace = gamut.space, out = [0, 0, 0], mapping = MapToCuspL, [cusp])`
 
-Performs fast gamut mapping in OKLCH as [described by Björn Ottoson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's to the gamut's space), for example to get a linear-light sRGB and avoid the transfer function, or to keep the result in OKLCH:
+Performs fast gamut mapping in OKLCH as [described by Björn Ottosson](https://bottosson.github.io/posts/gamutclipping/) (2021). This takes an input `[l,c,h]` coords in OKLCH space, and ensures the final result will lie within the specified color `gamut` (default `sRGBGamut`). You can further specify a different target space (which default's to the gamut's space), for example to get a linear-light sRGB and avoid the transfer function, or to keep the result in OKLCH:
 
 ```js
 import { gamutMapOKLCH, sRGBGamut, sRGBLinear, OKLCH } from "@texel/color";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texel/color",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "a minimal and modern color library",
   "type": "module",
   "main": "./src/index.js",

package/src/core.js

@@ -64,6 +64,7 @@ export const serialize = (input, inputSpace, outputSpace = inputSpace) => {
   }
   const id = outputSpace.id;
   if (id == "srgb") {
+    // uses the legacy rgb() format
     const r = floatToByte(tmp3[0]);
     const g = floatToByte(tmp3[1]);
     const b = floatToByte(tmp3[2]);
@@ -72,7 +73,8 @@ export const serialize = (input, inputSpace, outputSpace = inputSpace) => {
   } else {
     const alphaSuffix = alpha === 1 ? "" : ` / ${alpha}`;
     if (id == "oklab" || id == "oklch") {
-      return `${id}(${tmp3[0]} ${tmp3[1]} ${tmp3[2]}${alphaSuffix})`;
+      // older versions of Safari don't support oklch with 0..1 L but do support %
+      return `${id}(${tmp3[0] * 100}% ${tmp3[1]} ${tmp3[2]}${alphaSuffix})`;
     } else {
       return `color(${id} ${tmp3[0]} ${tmp3[1]} ${tmp3[2]}${alphaSuffix})`;
     }
@@ -84,6 +86,13 @@ const stripAlpha = (coords) => {
   return coords;
 };
 
+const parseFloatValue = str => parseFloat(str) || 0;
+
+const parseColorValue = (str, is255 = false) => {
+  if (is255) return clamp(parseFloatValue(str) / 0xff, 0, 0xff);
+  else return str.includes('%') ? parseFloatValue(str) / 100 : parseFloatValue(str);
+};
+
 export const deserialize = (input) => {
   if (typeof input !== "string") {
     throw new Error(`expected a string as input`);
@@ -105,26 +114,19 @@ export const deserialize = (input) => {
       throw new Error(`could not parse color string ${input}`);
     }
     const fn = parts[1].toLowerCase();
-    if (/^rgba?$/i.test(fn)) {
-      const hasAlpha = fn == "rgba";
-      const coords = parts[2]
-        .split(",")
-        .map((v, i) =>
-          i < 3 ? clamp(parseInt(v, 10) || 0, 0, 255) / 255 : parseFloat(v)
-        );
-      const expectedLen = hasAlpha ? 4 : 3;
-      if (coords.length !== expectedLen) {
-        throw new Error(
-          `got ${fn} with incorrect number of coords, expected ${expectedLen}`
-        );
-      }
+    if (/^rgba?$/i.test(fn) && parts[2].includes(',')) {
+      const coords = parts[2].split(',').map((v, i) => {
+        return parseColorValue(v.trim(), i < 3)
+      });
       return {
         id: "srgb",
         coords: stripAlpha(coords),
       };
     } else {
       let id, coordsStrings;
-      if (fn === "color") {
+      let div255 = false;
+
+      if (/^color$/i.test(fn)) {
         const params =
           /([^\s]+)\s+([^\s]+)\s+([^\s]+)\s+([^\s/]+)(?:\s?\/\s?([^\s]+))?/.exec(
             parts[2]
@@ -133,8 +135,15 @@ export const deserialize = (input) => {
           throw new Error(`could not parse color() function ${input}`);
         id = params[1].toLowerCase();
         coordsStrings = params.slice(2, 6);
-      } else if (/^(oklab|oklch)$/.test(fn)) {
-        id = fn;
+      } else {
+        if (/^(oklab|oklch)$/i.test(fn)) {
+          id = fn;
+        } else if (/rgba?/i.test(fn)) {
+          id = 'srgb';
+          div255 = true;
+        } else {
+          throw new Error(`unknown color function ${fn}`);
+        }
         const params =
           /([^\s]+)\s+([^\s]+)\s+([^\s/]+)(?:\s?\/\s?([^\s]+))?/.exec(parts[2]);
         if (!params)
@@ -146,7 +155,9 @@ export const deserialize = (input) => {
         coordsStrings = coordsStrings.slice(0, 3);
       }
 
-      const coords = coordsStrings.map((f) => parseFloat(f));
+      const coords = coordsStrings.map((f, i) => {
+        return parseColorValue(f.trim(), div255 && i < 3);
+      });
       if (coords.length < 3 || coords.length > 4)
         throw new Error(`invalid number of coordinates`);
       return {
@@ -156,6 +167,7 @@ export const deserialize = (input) => {
     }
   }
 };
+
 export const parse = (input, targetSpace, out = vec3()) => {
   if (!targetSpace)
     throw new Error(`must specify a target space to parse into`);

package/src/gamut.js

@@ -182,13 +182,15 @@ export const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp, gamut) => {
 
   // Find the intersection for upper and lower half separately
   if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0.0) {
+    const denom = (c1 * cusp[0] + cusp[1] * (l0 - l1));
     // Lower half
-    t = (cusp[1] * l0) / (c1 * cusp[0] + cusp[1] * (l0 - l1));
+    t = denom === 0 ? 0 : (cusp[1] * l0) / denom;
   } else {
     // Upper half
 
     // First intersect with triangle
-    t = (cusp[1] * (l0 - 1.0)) / (c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1));
+    const denom = (c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1));
+    t = denom === 0 ? 0 : (cusp[1] * (l0 - 1.0)) / denom;
 
     // Then one step Halley's method
     let dl = l1 - l0;

package/test/spaces/hsl.js

@@ -1,3 +1,8 @@
+// HSL space (hue, saturation, lightness within sRGB gamut)
+
+// Reference:
+// https://github.com/color-js/color.js/blob/cfe55d358adb6c2e23c8a897282adf42904fd32d/src/spaces/hsl.js
+
 import { sRGB, sRGBLinear } from "../../src/index.js";
 
 export const HSL = {

package/test/spaces/lab.js

@@ -1,6 +1,8 @@
 // Lab aka CIELAB aka L*a*b* (uses a D50 WHITE_D50 point and has to be adapted)
 // refer to CSS Color Module Level 4 Spec for more details
-// Source code reference: Colorjs.io
+
+// Reference:
+// https://github.com/color-js/color.js/blob/cfe55d358adb6c2e23c8a897282adf42904fd32d/src/spaces/lab.js
 import { D50_to_D65_M, D65_to_D50_M } from "../../src/index.js";
 
 // K * e  = 2^3 = 8

package/test/test.js

@@ -44,6 +44,7 @@ import {
   DisplayP3Gamut,
   deserialize,
   parse,
+  MapToL,
 } from "../src/index.js";
 
 test("should convert XYZ in different whitepoints", async (t) => {
@@ -230,61 +231,98 @@ test("should serialize", async (t) => {
   t.deepEqual(serialize([0, 0.5, 1], sRGB), "rgb(0, 128, 255)");
   t.deepEqual(serialize([0, 0.5, 1], sRGBLinear), "color(srgb-linear 0 0.5 1)");
   t.deepEqual(serialize([1, 0, 0], OKLCH, sRGB), "rgb(255, 255, 255)");
-  t.deepEqual(serialize([1, 0, 0], OKLCH), "oklch(1 0 0)");
-  t.deepEqual(serialize([1, 0, 0], OKLab), "oklab(1 0 0)");
+  t.deepEqual(serialize([1, 0, 0], OKLCH), "oklch(100% 0 0)");
+  t.deepEqual(serialize([1, 0, 0], OKLab), "oklab(100% 0 0)");
   t.deepEqual(
     serialize([1, 0, 0, 0.4523], OKLCH, sRGB),
     "rgba(255, 255, 255, 0.4523)"
   );
   t.deepEqual(
     serialize([1, 0, 0, 0.4523], OKLCH, OKLCH),
-    "oklch(1 0 0 / 0.4523)"
+    "oklch(100% 0 0 / 0.4523)"
   );
-  t.deepEqual(serialize([1, 0, 0, 0.4523], OKLCH), "oklch(1 0 0 / 0.4523)");
+  t.deepEqual(serialize([1, 0, 0, 0.4523], OKLCH), "oklch(100% 0 0 / 0.4523)");
   t.deepEqual(
     serialize([1, 0, 0, 0.4523], DisplayP3),
     "color(display-p3 1 0 0 / 0.4523)"
   );
 });
 
-test("should parse to a color coord", async (t) => {
-  t.deepEqual(parse("rgb(0, 128, 255)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
-  t.deepEqual(parse("rgba(0, 128, 255, .25)", sRGB), [
-    0,
-    128 / 0xff,
-    255 / 0xff,
-    0.25,
-  ]);
-  let outVec = [0, 0, 0];
-  t.deepEqual(parse("rgba(0, 128, 255, 1)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
-  let out;
-  out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
-  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
-  t.equal(out, outVec);
-
-  // trims to 3
-  outVec = [0, 0, 0, 0];
-  out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
-  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
-  t.equal(out, outVec);
-
-  // ensures 4
-  outVec = [0, 0, 0, 0];
-  out = parse("rgba(0, 128, 255, 0.91)", sRGB, outVec);
-  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff, 0.91]);
-  t.equal(out, outVec);
-
-  t.deepEqual(
-    serialize(parse("oklch(1 0 0)", sRGB), sRGB),
-    "rgb(255, 255, 255)"
-  );
-});
+// not yet finished
+// test("should parse to a color coord", async (t) => {
+//   t.deepEqual(parse("rgb(0, 128, 255)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
+//   t.deepEqual(parse("rgba(0, 128, 255, .25)", sRGB), [
+//     0,
+//     128 / 0xff,
+//     255 / 0xff,
+//     0.25,
+//   ]);
+//   let outVec = [0, 0, 0];
+//   t.deepEqual(parse("rgba(0, 128, 255, 1)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
+//   let out;
+//   out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
+//   t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
+//   t.equal(out, outVec);
+
+//   // trims to 3
+//   outVec = [0, 0, 0, 0];
+//   out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
+//   t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
+//   t.equal(out, outVec);
+
+//   // ensures 4
+//   outVec = [0, 0, 0, 0];
+//   out = parse("rgba(0, 128, 255, 0.91)", sRGB, outVec);
+//   t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff, 0.91]);
+//   t.equal(out, outVec);
+
+//   t.deepEqual(
+//     serialize(parse("oklch(1 0 0)", sRGB), sRGB),
+//     "rgb(255, 255, 255)"
+//   );
+// });
 
 test("should deserialize color string information", async (t) => {
   t.deepEqual(deserialize("rgb(0, 128, 255)"), {
     coords: [0, 128 / 0xff, 255 / 0xff],
     id: "srgb",
   });
+  t.deepEqual(deserialize("rgba(0, 128, 255)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgba(0, 128, 255, 50%)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.5],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0, 128, 255, 0.5)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.5],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0 128 255)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0 128 255 / 0.5)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.5],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0 128 255 / 1e-2)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 1e-2],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0 128 255 / 50%)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.5],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgb(0 128 255 / 0.35)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.35],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("RGBA(0 128 255 / 0.35)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.35],
+    id: "srgb",
+  });
   t.deepEqual(deserialize("rgba(0, 128, 255, 0.35)"), {
     coords: [0, 128 / 0xff, 255 / 0xff, 0.35],
     id: "srgb",
@@ -297,10 +335,22 @@ test("should deserialize color string information", async (t) => {
     id: "srgb",
     coords: [1, 0, 0.8, 0.8],
   });
+  t.deepEqual(deserialize("COLOR(sRGB-Linear 0 0.5 1)"), {
+    id: "srgb-linear",
+    coords: [0, 0.5, 1],
+  });
+  t.deepEqual(deserialize("COLOR(sRGB-Linear 0 50% 1)"), {
+    id: "srgb-linear",
+    coords: [0, 0.5, 1],
+  });
   t.deepEqual(deserialize("color(srgb-linear 0 0.5 1)"), {
     id: "srgb-linear",
     coords: [0, 0.5, 1],
   });
+  t.deepEqual(deserialize("color(srgb-linear 0 1e-2 1)"), {
+    id: "srgb-linear",
+    coords: [0, 1e-2, 1],
+  });
   t.deepEqual(deserialize("color(srgb-linear 0 0.5 1/0.25)"), {
     id: "srgb-linear",
     coords: [0, 0.5, 1, 0.25],
@@ -401,6 +451,28 @@ test("should handle problematic coords", async (t) => {
     ),
     true
   );
+
+  t.deepEqual(
+    convert([1, 0, 0], OKLCH, OKLab, undefined),
+    [1, 0, 0],
+    "handles [1,0,0] OKLCH to OKLab gamut map"
+  );
+
+  t.deepEqual(
+    arrayAlmostEqual(convert([1, 0, 0], OKLCH, sRGBLinear), [1, 1, 1]),
+    true,
+    "handles [1,1,1] OKLCH to sRGBLinear"
+  );
+  t.deepEqual(
+    gamutMapOKLCH([1, 0, 0], sRGBGamut, OKLCH, undefined, MapToL),
+    [1, 0, 0],
+    "handles [1,0,0] OKLCH to sRGB gamut map"
+  );
+  t.deepEqual(
+    gamutMapOKLCH([0, 0, 0], sRGBGamut, OKLCH, undefined, MapToL),
+    [0, 0, 0],
+    "handles [0,0,0] OKLCH to sRGB gamut map"
+  );
 });
 
 function roundToNDecimals(value, digits) {