Replace tinycolor2 with @colordx/core

packages/utils/package.json

@@ -15,14 +15,13 @@
   "author": "Andrew Lisowski <lisowski54@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@jimp/types": "workspace:*",
-    "tinycolor2": "^1.6.0"
+    "@colordx/core": "^6.3.0",
+    "@jimp/types": "workspace:*"
   },
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
     "@types/node": "^18.19.48",
-    "@types/tinycolor2": "^1.4.6",
     "eslint": "^9.9.1",
     "tshy": "^3.0.2",
     "typescript": "^5.5.4",

packages/utils/src/index.ts

@@ -1,5 +1,11 @@
 import { RGBAColor, JimpClass, Bitmap, RGBColor } from "@jimp/types";
-import tinyColor from "tinycolor2";
+import { Colordx, extend } from "@colordx/core";
+import names from "@colordx/core/plugins/names";
+import hsv from "@colordx/core/plugins/hsv";
+
+extend([names, hsv]);
+
+const BARE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 
 export function clone<I extends JimpClass>(image: I): I {
   const newBitmap = {
@@ -267,5 +273,9 @@ export function cssColorToHex(cssColor: string | number) {
     return cssColor;
   }
 
-  return parseInt(tinyColor(cssColor).toHex8(), 16);
+  const trimmed = cssColor.trim();
+
+  return new Colordx(
+    BARE_HEX.test(trimmed) ? `#${trimmed}` : cssColor
+  ).toNumber32();
 }

plugins/plugin-color/package.json

@@ -23,7 +23,6 @@
     "@jimp/js-png": "workspace:*",
     "@jimp/test-utils": "workspace:*",
     "@types/node": "^18.19.48",
-    "@types/tinycolor2": "^1.4.6",
     "@vitest/browser": "^2.0.5",
     "eslint": "^9.9.1",
     "tshy": "^3.0.2",
@@ -32,10 +31,10 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
+    "@colordx/core": "^6.3.0",
     "@jimp/core": "workspace:*",
     "@jimp/types": "workspace:*",
     "@jimp/utils": "workspace:*",
-    "tinycolor2": "^1.6.0",
     "zod": "^3.23.8"
   },
   "tshy": {

plugins/plugin-color/src/index.ts

@@ -1,4 +1,4 @@
-import tinyColor from "tinycolor2";
+import { Colordx } from "@colordx/core";
 import { clone, limit255, scan } from "@jimp/utils";
 import { Edge, JimpClass, RGBColor } from "@jimp/types";
 import { z } from "zod";
@@ -799,7 +799,7 @@ export const methods = {
 
     actions = actions.map((action) => {
       if (action.apply === "xor" || action.apply === "mix") {
-        action.params[0] = tinyColor(action.params[0]).toRgb();
+        action.params[0] = new Colordx(action.params[0]).toRgb();
       }
 
       return action;
@@ -835,21 +835,43 @@ export const methods = {
         } else if (action.apply === "blue") {
           clr.b = colorModifier("b", action.params[0]);
         } else {
-          if (action.apply === "hue") {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            action.apply = "spin";
+          const amount = (action.params?.[0] as number | undefined) ?? 10;
+          const color = new Colordx(clr);
+
+          switch (action.apply) {
+            case "hue":
+            case "spin":
+              clr = color.rotate(amount).toRgb();
+              break;
+            case "lighten":
+              clr = color.lighten(amount / 100).toRgb();
+              break;
+            case "darken":
+              clr = color.darken(amount / 100).toRgb();
+              break;
+            case "saturate":
+              clr = color.saturate(amount / 100).toRgb();
+              break;
+            case "desaturate":
+              clr = color.desaturate(amount / 100).toRgb();
+              break;
+            case "greyscale":
+              clr = color.grayscale().toRgb();
+              break;
+            case "brighten": {
+              const offset = -Math.round(255 * -(amount / 100));
+              clr = {
+                r: limit255(clr.r! + offset),
+                g: limit255(clr.g! + offset),
+                b: limit255(clr.b! + offset),
+              };
+              break;
+            }
+            default:
+              throw new Error(
+                "action " + (action as ColorAction).apply + " not supported"
+              );
           }
-
-          const tnyClr = tinyColor(clr);
-          const fn = tnyClr[action.apply].bind(tnyClr);
-
-          if (!fn) {
-            throw new Error("action " + action.apply + " not supported");
-          }
-
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          clr = (fn as any)(...(action.params || [])).toRgb();
         }
       });