@tsparticles/plugin-oklch-color 4.0.5 → 4.1.0

package/browser/OklchColorManager.js

@@ -1,6 +1,6 @@
-import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
+import { getRangeValue, identity, none, parseAlpha, percentDenominator, } from "@tsparticles/engine";
 import { oklchToRgb, oklchaToRgba } from "./utils.js";
-const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
+const oklchRegex = /oklch\(\s*(\d+(?:\.\d+)?)(%?)\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
 export class OklchColorManager {
     accepts(input) {
         return input.startsWith("oklch");
@@ -29,17 +29,30 @@ export class OklchColorManager {
         }
         const result = oklchRegex.exec(input), indexes = {
             l: 1,
+            lPercent: 2,
             c: 3,
-            h: 5,
-            a: 7,
+            h: 4,
+            a: 6,
         }, defaultAlpha = 1;
-        return result
-            ? oklchaToRgba({
-                a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c] ?? "0"),
-                h: parseFloat(result[indexes.h] ?? "0"),
-                l: parseFloat(result[indexes.l] ?? "0"),
-            })
-            : undefined;
+        if (!result) {
+            return undefined;
+        }
+        const rawL = parseFloat(result[indexes.l] ?? "0");
+        if (result[indexes.lPercent]) {
+            if (rawL < none || rawL > percentDenominator) {
+                return undefined;
+            }
+        }
+        else {
+            if (rawL < none || rawL > identity) {
+                return undefined;
+            }
+        }
+        return oklchaToRgba({
+            a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
+            c: parseFloat(result[indexes.c] ?? "0"),
+            h: parseFloat(result[indexes.h] ?? "0"),
+            l: rawL * (result[indexes.lPercent] ? identity : percentDenominator),
+        });
     }
 }

package/browser/conversion.spec.js

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { OklchColorManager } from "./OklchColorManager.js";
+import { oklchToRgb } from "./utils.js";
+describe("OKLCH conversion", () => {
+    const manager = new OklchColorManager();
+    describe("oklchToRgb (programmatic API)", () => {
+        const testCases = [
+            { name: "red", input: { l: 62.7955, c: 0.2577, h: 29.2339 }, expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: { l: 86.644, c: 0.2948, h: 142.4953 }, expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: { l: 45.2014, c: 0.3132, h: 264.052 }, expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: { l: 96.7983, c: 0.211, h: 109.7692 }, expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: { l: 90.5399, c: 0.1546, h: 194.7689 }, expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: { l: 70.1674, c: 0.3225, h: 328.3634 }, expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: { l: 100, c: 0, h: 0 }, expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: { l: 0, c: 0, h: 0 }, expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of testCases) {
+            it(`should convert OKLCH(${input.l},${input.c},${input.h}) to ${name}`, () => {
+                const result = oklchToRgb(input);
+                expect(result).toEqual(expected);
+            });
+        }
+    });
+    describe("parseString (CSS string format)", () => {
+        const stringCases = [
+            { name: "red", input: "oklch(62.7955% 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "red (no % on L)", input: "oklch(0.627955 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: "oklch(86.644% 0.2948 142.4953°)", expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: "oklch(45.2014% 0.3132 264.052°)", expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: "oklch(96.7983% 0.211 109.7692°)", expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: "oklch(90.5399% 0.1546 194.7689°)", expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: "oklch(70.1674% 0.3225 328.3634°)", expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: "oklch(100% 0 0)", expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: "oklch(0% 0 0)", expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of stringCases) {
+            it(`should parse "${input}" to ${name}`, () => {
+                const result = manager.parseString(input);
+                expect(result).toMatchObject(expected);
+            });
+        }
+    });
+});

package/browser/index.js

@@ -1,6 +1,6 @@
 import { OklchColorManager } from "./OklchColorManager.js";
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addColorManager("oklch", new OklchColorManager());
     });

package/browser/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(async (e) => {
         const { OklchColorManager } = await import("./OklchColorManager.js");
         e.pluginManager.addColorManager("oklch", new OklchColorManager());

package/browser/utils.js

@@ -15,7 +15,7 @@ const OKLAB_LMS = {
     OFFSET: 0.055,
 }, minSrgbValue = 0, maxSrgbValue = 1;
 export function oklchToRgb(oklch) {
-    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+    const L = oklch.l / percentDenominator, C = oklch.c, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
         ? SRGB.LINEAR_SCALE * x
         : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
@@ -32,5 +32,5 @@ export function oklchaToRgba(oklcha) {
 }
 export function getStyleFromOklch(color, opacity) {
     const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
-    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
+    return `oklch(${l.toString()}% ${c.toString()} ${h.toString()}°${alpha})`;
 }

package/cjs/OklchColorManager.js

@@ -1,6 +1,6 @@
-import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
+import { getRangeValue, identity, none, parseAlpha, percentDenominator, } from "@tsparticles/engine";
 import { oklchToRgb, oklchaToRgba } from "./utils.js";
-const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
+const oklchRegex = /oklch\(\s*(\d+(?:\.\d+)?)(%?)\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
 export class OklchColorManager {
     accepts(input) {
         return input.startsWith("oklch");
@@ -29,17 +29,30 @@ export class OklchColorManager {
         }
         const result = oklchRegex.exec(input), indexes = {
             l: 1,
+            lPercent: 2,
             c: 3,
-            h: 5,
-            a: 7,
+            h: 4,
+            a: 6,
         }, defaultAlpha = 1;
-        return result
-            ? oklchaToRgba({
-                a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c] ?? "0"),
-                h: parseFloat(result[indexes.h] ?? "0"),
-                l: parseFloat(result[indexes.l] ?? "0"),
-            })
-            : undefined;
+        if (!result) {
+            return undefined;
+        }
+        const rawL = parseFloat(result[indexes.l] ?? "0");
+        if (result[indexes.lPercent]) {
+            if (rawL < none || rawL > percentDenominator) {
+                return undefined;
+            }
+        }
+        else {
+            if (rawL < none || rawL > identity) {
+                return undefined;
+            }
+        }
+        return oklchaToRgba({
+            a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
+            c: parseFloat(result[indexes.c] ?? "0"),
+            h: parseFloat(result[indexes.h] ?? "0"),
+            l: rawL * (result[indexes.lPercent] ? identity : percentDenominator),
+        });
     }
 }

package/cjs/conversion.spec.js

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { OklchColorManager } from "./OklchColorManager.js";
+import { oklchToRgb } from "./utils.js";
+describe("OKLCH conversion", () => {
+    const manager = new OklchColorManager();
+    describe("oklchToRgb (programmatic API)", () => {
+        const testCases = [
+            { name: "red", input: { l: 62.7955, c: 0.2577, h: 29.2339 }, expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: { l: 86.644, c: 0.2948, h: 142.4953 }, expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: { l: 45.2014, c: 0.3132, h: 264.052 }, expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: { l: 96.7983, c: 0.211, h: 109.7692 }, expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: { l: 90.5399, c: 0.1546, h: 194.7689 }, expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: { l: 70.1674, c: 0.3225, h: 328.3634 }, expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: { l: 100, c: 0, h: 0 }, expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: { l: 0, c: 0, h: 0 }, expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of testCases) {
+            it(`should convert OKLCH(${input.l},${input.c},${input.h}) to ${name}`, () => {
+                const result = oklchToRgb(input);
+                expect(result).toEqual(expected);
+            });
+        }
+    });
+    describe("parseString (CSS string format)", () => {
+        const stringCases = [
+            { name: "red", input: "oklch(62.7955% 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "red (no % on L)", input: "oklch(0.627955 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: "oklch(86.644% 0.2948 142.4953°)", expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: "oklch(45.2014% 0.3132 264.052°)", expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: "oklch(96.7983% 0.211 109.7692°)", expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: "oklch(90.5399% 0.1546 194.7689°)", expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: "oklch(70.1674% 0.3225 328.3634°)", expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: "oklch(100% 0 0)", expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: "oklch(0% 0 0)", expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of stringCases) {
+            it(`should parse "${input}" to ${name}`, () => {
+                const result = manager.parseString(input);
+                expect(result).toMatchObject(expected);
+            });
+        }
+    });
+});

package/cjs/index.js

@@ -1,6 +1,6 @@
 import { OklchColorManager } from "./OklchColorManager.js";
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addColorManager("oklch", new OklchColorManager());
     });

package/cjs/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(async (e) => {
         const { OklchColorManager } = await import("./OklchColorManager.js");
         e.pluginManager.addColorManager("oklch", new OklchColorManager());

package/cjs/utils.js

@@ -15,7 +15,7 @@ const OKLAB_LMS = {
     OFFSET: 0.055,
 }, minSrgbValue = 0, maxSrgbValue = 1;
 export function oklchToRgb(oklch) {
-    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+    const L = oklch.l / percentDenominator, C = oklch.c, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
         ? SRGB.LINEAR_SCALE * x
         : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
@@ -32,5 +32,5 @@ export function oklchaToRgba(oklcha) {
 }
 export function getStyleFromOklch(color, opacity) {
     const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
-    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
+    return `oklch(${l.toString()}% ${c.toString()} ${h.toString()}°${alpha})`;
 }

package/esm/OklchColorManager.js

@@ -1,6 +1,6 @@
-import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
+import { getRangeValue, identity, none, parseAlpha, percentDenominator, } from "@tsparticles/engine";
 import { oklchToRgb, oklchaToRgba } from "./utils.js";
-const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
+const oklchRegex = /oklch\(\s*(\d+(?:\.\d+)?)(%?)\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
 export class OklchColorManager {
     accepts(input) {
         return input.startsWith("oklch");
@@ -29,17 +29,30 @@ export class OklchColorManager {
         }
         const result = oklchRegex.exec(input), indexes = {
             l: 1,
+            lPercent: 2,
             c: 3,
-            h: 5,
-            a: 7,
+            h: 4,
+            a: 6,
         }, defaultAlpha = 1;
-        return result
-            ? oklchaToRgba({
-                a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c] ?? "0"),
-                h: parseFloat(result[indexes.h] ?? "0"),
-                l: parseFloat(result[indexes.l] ?? "0"),
-            })
-            : undefined;
+        if (!result) {
+            return undefined;
+        }
+        const rawL = parseFloat(result[indexes.l] ?? "0");
+        if (result[indexes.lPercent]) {
+            if (rawL < none || rawL > percentDenominator) {
+                return undefined;
+            }
+        }
+        else {
+            if (rawL < none || rawL > identity) {
+                return undefined;
+            }
+        }
+        return oklchaToRgba({
+            a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
+            c: parseFloat(result[indexes.c] ?? "0"),
+            h: parseFloat(result[indexes.h] ?? "0"),
+            l: rawL * (result[indexes.lPercent] ? identity : percentDenominator),
+        });
     }
 }

package/esm/conversion.spec.js

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { OklchColorManager } from "./OklchColorManager.js";
+import { oklchToRgb } from "./utils.js";
+describe("OKLCH conversion", () => {
+    const manager = new OklchColorManager();
+    describe("oklchToRgb (programmatic API)", () => {
+        const testCases = [
+            { name: "red", input: { l: 62.7955, c: 0.2577, h: 29.2339 }, expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: { l: 86.644, c: 0.2948, h: 142.4953 }, expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: { l: 45.2014, c: 0.3132, h: 264.052 }, expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: { l: 96.7983, c: 0.211, h: 109.7692 }, expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: { l: 90.5399, c: 0.1546, h: 194.7689 }, expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: { l: 70.1674, c: 0.3225, h: 328.3634 }, expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: { l: 100, c: 0, h: 0 }, expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: { l: 0, c: 0, h: 0 }, expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of testCases) {
+            it(`should convert OKLCH(${input.l},${input.c},${input.h}) to ${name}`, () => {
+                const result = oklchToRgb(input);
+                expect(result).toEqual(expected);
+            });
+        }
+    });
+    describe("parseString (CSS string format)", () => {
+        const stringCases = [
+            { name: "red", input: "oklch(62.7955% 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "red (no % on L)", input: "oklch(0.627955 0.2577 29.2339°)", expected: { r: 255, g: 0, b: 0 } },
+            { name: "green", input: "oklch(86.644% 0.2948 142.4953°)", expected: { r: 0, g: 255, b: 0 } },
+            { name: "blue", input: "oklch(45.2014% 0.3132 264.052°)", expected: { r: 0, g: 0, b: 255 } },
+            { name: "yellow", input: "oklch(96.7983% 0.211 109.7692°)", expected: { r: 255, g: 255, b: 0 } },
+            { name: "cyan", input: "oklch(90.5399% 0.1546 194.7689°)", expected: { r: 0, g: 255, b: 255 } },
+            { name: "magenta", input: "oklch(70.1674% 0.3225 328.3634°)", expected: { r: 255, g: 0, b: 255 } },
+            { name: "white", input: "oklch(100% 0 0)", expected: { r: 255, g: 255, b: 255 } },
+            { name: "black", input: "oklch(0% 0 0)", expected: { r: 0, g: 0, b: 0 } },
+        ];
+        for (const { name, input, expected } of stringCases) {
+            it(`should parse "${input}" to ${name}`, () => {
+                const result = manager.parseString(input);
+                expect(result).toMatchObject(expected);
+            });
+        }
+    });
+});

package/esm/index.js

@@ -1,6 +1,6 @@
 import { OklchColorManager } from "./OklchColorManager.js";
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addColorManager("oklch", new OklchColorManager());
     });

package/esm/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadOklchColorPlugin(engine) {
-    engine.checkVersion("4.0.5");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(async (e) => {
         const { OklchColorManager } = await import("./OklchColorManager.js");
         e.pluginManager.addColorManager("oklch", new OklchColorManager());

package/esm/utils.js

@@ -15,7 +15,7 @@ const OKLAB_LMS = {
     OFFSET: 0.055,
 }, minSrgbValue = 0, maxSrgbValue = 1;
 export function oklchToRgb(oklch) {
-    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+    const L = oklch.l / percentDenominator, C = oklch.c, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
         ? SRGB.LINEAR_SCALE * x
         : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
@@ -32,5 +32,5 @@ export function oklchaToRgba(oklcha) {
 }
 export function getStyleFromOklch(color, opacity) {
     const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
-    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
+    return `oklch(${l.toString()}% ${c.toString()} ${h.toString()}°${alpha})`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-oklch-color",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "tsParticles OKLCH color plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -106,7 +106,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@tsparticles/engine": "4.0.5"
+    "@tsparticles/engine": "4.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.plugin.oklchColor.js","children":[{"name":"dist/browser","children":[{"uid":"9dfe3e26-1","name":"utils.js"},{"uid":"9dfe3e26-3","name":"OklchColorManager.js"},{"uid":"9dfe3e26-5","name":"index.js"},{"uid":"9dfe3e26-7","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"9dfe3e26-1":{"renderedLength":1911,"gzipLength":0,"brotliLength":0,"metaUid":"9dfe3e26-0"},"9dfe3e26-3":{"renderedLength":1703,"gzipLength":0,"brotliLength":0,"metaUid":"9dfe3e26-2"},"9dfe3e26-5":{"renderedLength":235,"gzipLength":0,"brotliLength":0,"metaUid":"9dfe3e26-4"},"9dfe3e26-7":{"renderedLength":183,"gzipLength":0,"brotliLength":0,"metaUid":"9dfe3e26-6"}},"nodeMetas":{"9dfe3e26-0":{"id":"/dist/browser/utils.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"9dfe3e26-1"},"imported":[{"uid":"9dfe3e26-8"}],"importedBy":[{"uid":"9dfe3e26-2"}]},"9dfe3e26-2":{"id":"/dist/browser/OklchColorManager.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"9dfe3e26-3"},"imported":[{"uid":"9dfe3e26-8"},{"uid":"9dfe3e26-0"}],"importedBy":[{"uid":"9dfe3e26-4"}]},"9dfe3e26-4":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"9dfe3e26-5"},"imported":[{"uid":"9dfe3e26-2"}],"importedBy":[{"uid":"9dfe3e26-6"}]},"9dfe3e26-6":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"9dfe3e26-7"},"imported":[{"uid":"9dfe3e26-4"}],"importedBy":[],"isEntry":true},"9dfe3e26-8":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"9dfe3e26-2"},{"uid":"9dfe3e26-0"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.plugin.oklchColor.js","children":[{"name":"dist/browser","children":[{"uid":"ddfb7f27-1","name":"utils.js"},{"uid":"ddfb7f27-3","name":"OklchColorManager.js"},{"uid":"ddfb7f27-5","name":"index.js"},{"uid":"ddfb7f27-7","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"ddfb7f27-1":{"renderedLength":1883,"gzipLength":0,"brotliLength":0,"metaUid":"ddfb7f27-0"},"ddfb7f27-3":{"renderedLength":2198,"gzipLength":0,"brotliLength":0,"metaUid":"ddfb7f27-2"},"ddfb7f27-5":{"renderedLength":235,"gzipLength":0,"brotliLength":0,"metaUid":"ddfb7f27-4"},"ddfb7f27-7":{"renderedLength":183,"gzipLength":0,"brotliLength":0,"metaUid":"ddfb7f27-6"}},"nodeMetas":{"ddfb7f27-0":{"id":"/dist/browser/utils.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"ddfb7f27-1"},"imported":[{"uid":"ddfb7f27-8"}],"importedBy":[{"uid":"ddfb7f27-2"}]},"ddfb7f27-2":{"id":"/dist/browser/OklchColorManager.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"ddfb7f27-3"},"imported":[{"uid":"ddfb7f27-8"},{"uid":"ddfb7f27-0"}],"importedBy":[{"uid":"ddfb7f27-4"}]},"ddfb7f27-4":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"ddfb7f27-5"},"imported":[{"uid":"ddfb7f27-2"}],"importedBy":[{"uid":"ddfb7f27-6"}]},"ddfb7f27-6":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.plugin.oklchColor.js":"ddfb7f27-7"},"imported":[{"uid":"ddfb7f27-4"}],"importedBy":[],"isEntry":true},"ddfb7f27-8":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"ddfb7f27-2"},{"uid":"ddfb7f27-0"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/tsparticles.plugin.oklchColor.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Plugin v4.0.5 */
+/* Plugin v4.1.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine')) :
     typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine'], factory) :
@@ -22,7 +22,7 @@
         OFFSET: 0.055,
     }, minSrgbValue = 0, maxSrgbValue = 1;
     function oklchToRgb(oklch) {
-        const L = oklch.l / engine.percentDenominator, C = oklch.c / engine.percentDenominator, hRad = engine.degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+        const L = oklch.l / engine.percentDenominator, C = oklch.c, hRad = engine.degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
             ? SRGB.LINEAR_SCALE * x
             : SRGB.SCALE * Math.pow(x, engine.inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(engine.clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * engine.rgbMax);
         return {
@@ -38,7 +38,7 @@
         };
     }
 
-    const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
+    const oklchRegex = /oklch\(\s*(\d+(?:\.\d+)?)(%?)\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
     class OklchColorManager {
         accepts(input) {
             return input.startsWith("oklch");
@@ -67,23 +67,36 @@
             }
             const result = oklchRegex.exec(input), indexes = {
                 l: 1,
+                lPercent: 2,
                 c: 3,
-                h: 5,
-                a: 7,
+                h: 4,
+                a: 6,
             }, defaultAlpha = 1;
-            return result
-                ? oklchaToRgba({
-                    a: result[indexes.a] ? engine.parseAlpha(result[indexes.a]) : defaultAlpha,
-                    c: parseFloat(result[indexes.c] ?? "0"),
-                    h: parseFloat(result[indexes.h] ?? "0"),
-                    l: parseFloat(result[indexes.l] ?? "0"),
-                })
-                : undefined;
+            if (!result) {
+                return undefined;
+            }
+            const rawL = parseFloat(result[indexes.l] ?? "0");
+            if (result[indexes.lPercent]) {
+                if (rawL < engine.none || rawL > engine.percentDenominator) {
+                    return undefined;
+                }
+            }
+            else {
+                if (rawL < engine.none || rawL > engine.identity) {
+                    return undefined;
+                }
+            }
+            return oklchaToRgba({
+                a: result[indexes.a] ? engine.parseAlpha(result[indexes.a]) : defaultAlpha,
+                c: parseFloat(result[indexes.c] ?? "0"),
+                h: parseFloat(result[indexes.h] ?? "0"),
+                l: rawL * (result[indexes.lPercent] ? engine.identity : engine.percentDenominator),
+            });
         }
     }
 
     async function loadOklchColorPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklch", new OklchColorManager());
         });

package/tsparticles.plugin.oklchColor.min.js

@@ -1 +1 @@
-!function(s){s.__tsParticlesInternals=s.__tsParticlesInternals||{},s.__tsParticlesInternals.bundles=s.__tsParticlesInternals.bundles||{},s.__tsParticlesInternals.effects=s.__tsParticlesInternals.effects||{},s.__tsParticlesInternals.engine=s.__tsParticlesInternals.engine||{},s.__tsParticlesInternals.interactions=s.__tsParticlesInternals.interactions||{},s.__tsParticlesInternals.palettes=s.__tsParticlesInternals.palettes||{},s.__tsParticlesInternals.paths=s.__tsParticlesInternals.paths||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins.emittersShapes=s.__tsParticlesInternals.plugins.emittersShapes||{},s.__tsParticlesInternals.presets=s.__tsParticlesInternals.presets||{},s.__tsParticlesInternals.shapes=s.__tsParticlesInternals.shapes||{},s.__tsParticlesInternals.updaters=s.__tsParticlesInternals.updaters||{},s.__tsParticlesInternals.utils=s.__tsParticlesInternals.utils||{},s.__tsParticlesInternals.canvas=s.__tsParticlesInternals.canvas||{},s.__tsParticlesInternals.canvas=s.__tsParticlesInternals.canvas||{},s.__tsParticlesInternals.canvas.utils=s.__tsParticlesInternals.canvas.utils||{},s.__tsParticlesInternals.path=s.__tsParticlesInternals.path||{},s.__tsParticlesInternals.path=s.__tsParticlesInternals.path||{},s.__tsParticlesInternals.path.utils=s.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(s){return new Proxy(s,{get:function(s,t){return t in s||(s[t]={}),s[t]}})}:function(s){return s};s.__tsParticlesInternals.bundles=t(s.__tsParticlesInternals.bundles),s.__tsParticlesInternals.effects=t(s.__tsParticlesInternals.effects),s.__tsParticlesInternals.interactions=t(s.__tsParticlesInternals.interactions),s.__tsParticlesInternals.palettes=t(s.__tsParticlesInternals.palettes),s.__tsParticlesInternals.paths=t(s.__tsParticlesInternals.paths),s.__tsParticlesInternals.plugins=t(s.__tsParticlesInternals.plugins),s.__tsParticlesInternals.plugins.emittersShapes=t(s.__tsParticlesInternals.plugins.emittersShapes),s.__tsParticlesInternals.presets=t(s.__tsParticlesInternals.presets),s.__tsParticlesInternals.shapes=t(s.__tsParticlesInternals.shapes),s.__tsParticlesInternals.updaters=t(s.__tsParticlesInternals.updaters),s.__tsParticlesInternals.utils=t(s.__tsParticlesInternals.utils),s.__tsParticlesInternals.canvas=t(s.__tsParticlesInternals.canvas),s.__tsParticlesInternals.path=t(s.__tsParticlesInternals.path),s.tsparticlesInternalExports=s.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(s,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine"],t):t(((s="undefined"!=typeof globalThis?globalThis:s||self).__tsParticlesInternals=s.__tsParticlesInternals||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins.oklchColor=s.__tsParticlesInternals.plugins.oklchColor||{}),s.__tsParticlesInternals.engine)}(this,function(s,t){"use strict";const e={L:1,a:.3963377774,b:.2158037573},n={L:1,a:-.1055613458,b:-.0638541728},a={L:1,a:-.0894841775,b:-1.291485548},l={l:4.0767416621,m:-3.3077115913,s:.2309699292},r={l:-1.2684380046,m:2.6097574011,s:-.3413193965},i={l:-.0041960863,m:-.7034186147,s:1.707614701},_=2.4,c=.0031308,o=12.92,P=1.055,p=.055;function I(s){const I=s.l/t.percentDenominator,u=s.c/t.percentDenominator,h=t.degToRad(s.h),g=u*Math.cos(h),d=u*Math.sin(h),f=(e.L*I+e.a*g+e.b*d)**3,b=(n.L*I+n.a*g+n.b*d)**3,v=(a.L*I+a.a*g+a.b*d)**3,m=l.l*f+l.m*b+l.s*v,k=r.l*f+r.m*b+r.s*v,w=i.l*f+i.m*b+i.s*v,T=s=>{return Math.round(t.clamp((e=s)<=c?o*e:P*Math.pow(e,t.inverseFactorNumerator/_)-p,0,1)*t.rgbMax);var e};return{r:T(m),g:T(k),b:T(w)}}const u=/oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;class h{accepts(s){return s.startsWith("oklch")}handleColor(s){const t=s.value.oklch??s.value;if("l"in t&&"c"in t&&"h"in t)return I(t)}handleRangeColor(s){const e=s.value.oklch??s.value;if("l"in e&&"c"in e&&"h"in e)return I({l:t.getRangeValue(e.l),c:t.getRangeValue(e.c),h:t.getRangeValue(e.h)})}parseString(s){if(!this.accepts(s))return;const e=u.exec(s),n=1,a=3,l=5,r=7;return e?{a:(i={a:e[r]?t.parseAlpha(e[r]):1,c:parseFloat(e[a]??"0"),h:parseFloat(e[l]??"0"),l:parseFloat(e[n]??"0")}).a,...I(i)}:void 0;var i}}async function g(s){s.checkVersion("4.0.5"),await s.pluginManager.register(s=>{s.pluginManager.addColorManager("oklch",new h)})}const d=globalThis;d.__tsParticlesInternals=d.__tsParticlesInternals??{},d.loadOklchColorPlugin=g,s.loadOklchColorPlugin=g}),Object.assign(globalThis.window||globalThis,{loadOklchColorPlugin:(globalThis.__tsParticlesInternals.plugins.oklchColor||{}).loadOklchColorPlugin}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
+!function(s){s.__tsParticlesInternals=s.__tsParticlesInternals||{},s.__tsParticlesInternals.bundles=s.__tsParticlesInternals.bundles||{},s.__tsParticlesInternals.effects=s.__tsParticlesInternals.effects||{},s.__tsParticlesInternals.engine=s.__tsParticlesInternals.engine||{},s.__tsParticlesInternals.interactions=s.__tsParticlesInternals.interactions||{},s.__tsParticlesInternals.palettes=s.__tsParticlesInternals.palettes||{},s.__tsParticlesInternals.paths=s.__tsParticlesInternals.paths||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins.emittersShapes=s.__tsParticlesInternals.plugins.emittersShapes||{},s.__tsParticlesInternals.presets=s.__tsParticlesInternals.presets||{},s.__tsParticlesInternals.shapes=s.__tsParticlesInternals.shapes||{},s.__tsParticlesInternals.updaters=s.__tsParticlesInternals.updaters||{},s.__tsParticlesInternals.utils=s.__tsParticlesInternals.utils||{},s.__tsParticlesInternals.canvas=s.__tsParticlesInternals.canvas||{},s.__tsParticlesInternals.canvas=s.__tsParticlesInternals.canvas||{},s.__tsParticlesInternals.canvas.utils=s.__tsParticlesInternals.canvas.utils||{},s.__tsParticlesInternals.path=s.__tsParticlesInternals.path||{},s.__tsParticlesInternals.path=s.__tsParticlesInternals.path||{},s.__tsParticlesInternals.path.utils=s.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(s){return new Proxy(s,{get:function(s,t){return t in s||(s[t]={}),s[t]}})}:function(s){return s};s.__tsParticlesInternals.bundles=t(s.__tsParticlesInternals.bundles),s.__tsParticlesInternals.effects=t(s.__tsParticlesInternals.effects),s.__tsParticlesInternals.interactions=t(s.__tsParticlesInternals.interactions),s.__tsParticlesInternals.palettes=t(s.__tsParticlesInternals.palettes),s.__tsParticlesInternals.paths=t(s.__tsParticlesInternals.paths),s.__tsParticlesInternals.plugins=t(s.__tsParticlesInternals.plugins),s.__tsParticlesInternals.plugins.emittersShapes=t(s.__tsParticlesInternals.plugins.emittersShapes),s.__tsParticlesInternals.presets=t(s.__tsParticlesInternals.presets),s.__tsParticlesInternals.shapes=t(s.__tsParticlesInternals.shapes),s.__tsParticlesInternals.updaters=t(s.__tsParticlesInternals.updaters),s.__tsParticlesInternals.utils=t(s.__tsParticlesInternals.utils),s.__tsParticlesInternals.canvas=t(s.__tsParticlesInternals.canvas),s.__tsParticlesInternals.path=t(s.__tsParticlesInternals.path),s.tsparticlesInternalExports=s.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(s,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine"],t):t(((s="undefined"!=typeof globalThis?globalThis:s||self).__tsParticlesInternals=s.__tsParticlesInternals||{},s.__tsParticlesInternals.plugins=s.__tsParticlesInternals.plugins||{},s.__tsParticlesInternals.plugins.oklchColor=s.__tsParticlesInternals.plugins.oklchColor||{}),s.__tsParticlesInternals.engine)}(this,function(s,t){"use strict";const e={L:1,a:.3963377774,b:.2158037573},n={L:1,a:-.1055613458,b:-.0638541728},a={L:1,a:-.0894841775,b:-1.291485548},l={l:4.0767416621,m:-3.3077115913,s:.2309699292},r={l:-1.2684380046,m:2.6097574011,s:-.3413193965},i={l:-.0041960863,m:-.7034186147,s:1.707614701},_=2.4,c=.0031308,o=12.92,P=1.055,p=.055;function I(s){const I=s.l/t.percentDenominator,u=s.c,h=t.degToRad(s.h),g=u*Math.cos(h),d=u*Math.sin(h),f=(e.L*I+e.a*g+e.b*d)**3,b=(n.L*I+n.a*g+n.b*d)**3,m=(a.L*I+a.a*g+a.b*d)**3,v=l.l*f+l.m*b+l.s*m,k=r.l*f+r.m*b+r.s*m,w=i.l*f+i.m*b+i.s*m,y=s=>{return Math.round(t.clamp((e=s)<=c?o*e:P*Math.pow(e,t.inverseFactorNumerator/_)-p,0,1)*t.rgbMax);var e};return{r:y(v),g:y(k),b:y(w)}}const u=/oklch\(\s*(\d+(?:\.\d+)?)(%?)\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;class h{accepts(s){return s.startsWith("oklch")}handleColor(s){const t=s.value.oklch??s.value;if("l"in t&&"c"in t&&"h"in t)return I(t)}handleRangeColor(s){const e=s.value.oklch??s.value;if("l"in e&&"c"in e&&"h"in e)return I({l:t.getRangeValue(e.l),c:t.getRangeValue(e.c),h:t.getRangeValue(e.h)})}parseString(s){if(!this.accepts(s))return;const e=u.exec(s),n=2,a=3,l=4,r=6;if(!e)return;const i=parseFloat(e[1]??"0");if(e[n]){if(i<t.none||i>t.percentDenominator)return}else if(i<t.none||i>t.identity)return;return{a:(_={a:e[r]?t.parseAlpha(e[r]):1,c:parseFloat(e[a]??"0"),h:parseFloat(e[l]??"0"),l:i*(e[n]?t.identity:t.percentDenominator)}).a,...I(_)};var _}}async function g(s){s.checkVersion("4.1.0"),await s.pluginManager.register(s=>{s.pluginManager.addColorManager("oklch",new h)})}const d=globalThis;d.__tsParticlesInternals=d.__tsParticlesInternals??{},d.loadOklchColorPlugin=g,s.loadOklchColorPlugin=g}),Object.assign(globalThis.window||globalThis,{loadOklchColorPlugin:(globalThis.__tsParticlesInternals.plugins.oklchColor||{}).loadOklchColorPlugin}),delete(globalThis.window||globalThis).tsparticlesInternalExports;

package/types/conversion.spec.d.ts

@@ -0,0 +1 @@
+export {};