Remove apca w3 (#158)

* remove apca-w3 from repo

Removing apca-w3 from repo since the licence doesn't fit ours, replaced the contrast function with colorjs.io

* add changeset

.changeset/thin-gorillas-melt.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": patch
+---
+
+Removed apca-w3 and replaced it with colorjs.io

packages/graph-engine/package.json

@@ -39,7 +39,6 @@
   "dependencies": {
     "@tokens-studio/types": "^0.2.3",
     "ajv": "^8.12.0",
-    "apca-w3": "^0.1.9",
     "chroma-js": "^2.4.2",
     "color-blind": "^0.1.3",
     "color-namer": "^1.4.0",

packages/graph-engine/src/nodes/accessibility/contrast.ts

@@ -5,7 +5,7 @@
  */
 
 import { NodeDefinition, NodeTypes } from "../../types.js";
-import { calcAPCA } from "apca-w3";
+import Color from "colorjs.io";
 
 const type = NodeTypes.CONTRAST;
 
@@ -27,7 +27,11 @@ const process = (input: Inputs, state) => {
     ...state,
     ...input,
   };
-  const calculated = calcAPCA(final.a, final.b);
+
+  let color = new Color(final.a);
+  let background = new Color(final.b);
+
+  const calculated = background.contrast(color, "APCA");
 
   return final.absolute ? Math.abs(calculated) : calculated;
 };

packages/graph-engine/src/nodes/color/contrasting.ts

@@ -5,8 +5,7 @@
  */
 
 import { NodeDefinition, NodeTypes } from "#/types.js";
-import { calcAPCA } from "apca-w3";
-import chroma from "chroma-js";
+import Color from "colorjs.io";
 
 export const type = NodeTypes.CONTRASTING;
 
@@ -46,13 +45,16 @@ export const process = (input, state: State): contrastingValues => {
   };
 
   let a, b;
+  let colorA = new Color(final.a);
+  let colorB = new Color(final.b);
+  let background = new Color(final.background);
 
   if (final.wcag == WcagVersion.V2) {
-    a = chroma.contrast(final.a, final.background);
-    b = chroma.contrast(final.b, final.background);
+    a = background.contrast(colorA, "WCAG21");
+    b = background.contrast(colorB, "WCAG21");
   } else {
-    a = Math.abs(calcAPCA(final.a, final.background));
-    b = Math.abs(calcAPCA(final.b, final.background));
+    a = Math.abs(background.contrast(colorA, "APCA"));
+    b = Math.abs(background.contrast(colorB, "APCA"));
   }
 
   let contrast: contrastingValues;

packages/graph-engine/src/nodes/color/contrastingFromSet.ts

@@ -1,7 +1,6 @@
 import { NodeDefinition, NodeTypes } from "../../types.js";
 import { SingleToken } from "@tokens-studio/types";
-import { calcAPCA } from "apca-w3";
-import chroma from "chroma-js";
+import Color from "colorjs.io";
 
 export const type = NodeTypes.CONTRASTING_FROM_SET;
 
@@ -36,11 +35,13 @@ export const process = (input, state: State) => {
   for (let i = 0; i < final.tokens.length; i++) {
     let token = final.tokens[i];
     let value = token.value;
+    let background = new Color(final.background);
+    let foreground = new Color(value);
 
     if (final.wcag == WcagVersion.V2) {
-      contrast = chroma.contrast(value, final.background);
+      contrast = foreground.contrast(background, "WCAG21");
     } else {
-      contrast = Math.abs(calcAPCA(value, final.background));
+      contrast = Math.abs(foreground.contrast(background, "APCA"));
     }
 
     if (contrast >= final.threshold) {

packages/graph-engine/src/nodes/color/nearest.ts

@@ -1,8 +1,7 @@
 // nearestTokens.js
 import { NodeDefinition, NodeTypes } from "../../types.js";
 import { SingleToken } from "@tokens-studio/types";
-import { calcAPCA } from "apca-w3";
-import chroma from "chroma-js";
+import Color from "colorjs.io";
 import orderBy from "lodash.orderby";
 
 export const type = NodeTypes.NEAREST_TOKENS;
@@ -34,29 +33,34 @@ export const process = (input, state: State) => {
     ...input,
   };
 
+
   const compareFunctions = {
-    Contrast: (color1, color2) => {
+    Contrast: (foreground, background) => {
       if (final.wcag == WcagVersion.V2) {
-        return chroma.contrast(color1, color2);
+        return background.contrast(foreground, "WCAG21");
       } else {
-        // Please make sure to import and define the `calcAPCA` function
-        return Math.abs(calcAPCA(color1, color2));
+        return Math.abs(background.contrast(foreground, "APCA"));
       }
     },
-    Hue: (color1, color2) =>
-      Math.abs(chroma(color1).get("hsl.h") - chroma(color2).get("hsl.h")),
-    Lightness: (color1, color2) =>
-      Math.abs(chroma(color1).get("hsl.l") - chroma(color2).get("hsl.l")),
-    Saturation: (color1, color2) =>
-      Math.abs(chroma(color1).get("hsl.s") - chroma(color2).get("hsl.s")),
-    Distance: (color1, color2) => chroma.deltaE(color1, color2),
+    Hue: (foreground, background) =>
+      Math.abs(foreground.hsl[0] - background.hsl[0]),
+    Lightness: (foreground, background) =>
+      Math.abs(foreground.contrast(background, "Lstar")),
+    Saturation: (foreground, background) =>
+      Math.abs(foreground.hsl[1] - background.hsl[1]),
+    Distance: (foreground, background) => 
+      foreground.deltaE(background, "2000"),
   };
 
   const sortedTokens = orderBy(
     final.tokens,
     [
-      (token) =>
-        compareFunctions[final.compare](final.sourceColor, token.value),
+      (token) => {
+        let foreground = new Color(token.value);
+        let background = new Color(final.sourceColor);
+
+        return compareFunctions[final.compare](foreground, background);
+      }
     ],
     [final.inverted ? "desc" : "asc"]
   );

yarn.lock

@@ -5256,13 +5256,6 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apca-w3@^0.1.9:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/apca-w3/-/apca-w3-0.1.9.tgz#5fe32d4a0bc6295f89532a856dbb81a4d6818fc5"
-  integrity sha512-Zrf6AeBeQjNe/fxK7U1jCo5zfdjDl6T4/kdw5Xlky3G7u+EJTZkyItjMYQGtwf9pkftsINxcYyOpuLkzKf1ITQ==
-  dependencies:
-    colorparsley "^0.1.8"
-
 arch@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
@@ -6108,11 +6101,6 @@ colorjs.io@^0.4.3:
   resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.4.5.tgz#7775f787ff90aca7a38f6edb7b7c0f8cce1e6418"
   integrity sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==
 
-colorparsley@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/colorparsley/-/colorparsley-0.1.8.tgz#fd5c1b3d2befbc08c4ab73dc5c2c88f72f743132"
-  integrity sha512-rObESTTTE6G5qO5WFwFxWPggpw4KfpxnLC6Ssl8bITBnNVRhDsyCeTRAUxWQNVTx2pRknKlO2nddYTxjkdNFaw==
-
 combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"