Use apca-w3 and colorparsley to calculate APCA values

package.json

@@ -33,7 +33,9 @@
   "type": "module",
   "dependencies": {
     "@types/chroma-js": "2.1.4",
+    "apca-w3": "0.1.9",
     "chroma-js": "^2.4.2",
+    "colorparsley": "0.1.8",
     "nanoid": "^3.3.3"
   }
 }

src/helpers.ts

@@ -1,6 +1,7 @@
 import type { BaseColor } from './stores';
 import chroma, { Color } from 'chroma-js';
-import { APCAcontrast } from './vendor/APCAonly.98e_d12e';
+import { calcAPCA } from 'apca-w3';
+import { colorParsley } from 'colorparsley';
 
 const roundTo = (num: number, multiplier: number): number => Math.round(num * multiplier) / multiplier;
 
@@ -33,14 +34,9 @@ export function sortBaseColors(a: BaseColor, b: BaseColor): number {
   }
 }
 
-export const colorStringToHex = (color: string): number => {
-  color = color.replace('#', '0x');
-  return parseInt(color, 16);
-};
-
 export const getWcag2CR = (fg: string, bg: string): number => roundTo10th(chroma.contrast(fg, bg));
 
 export const getWcag3CR = (fg: string, bg: string): number =>
-  roundToWhole(APCAcontrast(colorStringToHex(bg), colorStringToHex(fg)));
+  roundToWhole(calcAPCA(colorParsley(fg), colorParsley(bg)));
 
 export const useProperMinus = (num: number): string => num.toString().replace('-', '\u2212');