remove chroma.js

package.json

@@ -23,7 +23,6 @@
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
-    "chroma-js": "^2.1.2",
     "colord": "^2.7.0",
     "craco-swc": "^0.1.3",
     "csv-parse": "^4.15.3",
@@ -100,7 +99,6 @@
     ]
   },
   "devDependencies": {
-    "@types/chroma-js": "^2.1.3",
     "@types/dompurify": "^2.2.1",
     "@types/file-saver": "^2.0.1",
     "@types/lodash": "^4.14.168",

src/components/fields/Percentage/BasicCell.tsx

@@ -11,7 +11,7 @@ export default function Percentage({ value }: IBasicCellProps) {
       <>
         <div
           style={{
-            backgroundColor: resultColorsScale(value).hex(),
+            backgroundColor: resultColorsScale(value).toHex(),
 
             position: "absolute",
             top: 0,

src/components/fields/Percentage/SideDrawerField.tsx

@@ -11,11 +11,11 @@ const useStyles = makeStyles((theme) =>
     resultColor: ({ value }: { value: number | undefined }) => ({
       backgroundColor:
         typeof value === "number"
-          ? resultColorsScale(value).hex() + "!important"
+          ? resultColorsScale(value).toHex() + "!important"
           : undefined,
       color:
         typeof value === "number"
-          ? emphasize(resultColorsScale(value).hex(), 1) + "!important"
+          ? emphasize(resultColorsScale(value).toHex(), 1) + "!important"
           : undefined,
     }),
 

src/components/fields/Slider/TableCell.tsx

@@ -48,7 +48,7 @@ export default function Slider({ column, value }: IHeavyCellProps) {
               maxWidth: "100%",
 
               width: `${progress}%`,
-              backgroundColor: resultColorsScale(progress / 100).hex(),
+              backgroundColor: resultColorsScale(progress / 100).toHex(),
             }}
           />
         </Box>

src/utils/color.ts

@@ -1,4 +1,6 @@
-import { scale } from "chroma-js";
+import { colord, extend } from "colord";
+import mixPlugin from "colord/plugins/mix";
+extend([mixPlugin]);
 
 export const resultColors = {
   No: "#ED4747",
@@ -6,4 +8,7 @@ export const resultColors = {
   Yes: "#1fad5f",
 };
 
-export const resultColorsScale = scale(Object.values(resultColors)).mode("lab");
+export const resultColorsScale = (value: number) =>
+  value <= 0.5
+    ? colord(resultColors.No).mix(resultColors.Maybe, value * 2)
+    : colord(resultColors.Maybe).mix(resultColors.Yes, (value - 0.5) * 2);

yarn.lock

@@ -2957,11 +2957,6 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/chroma-js@^2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.1.3.tgz#0b03d737ff28fad10eb884e0c6cedd5ffdc4ba0a"
-  integrity sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g==
-
 "@types/dompurify@^2.2.1":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.2.3.tgz#6e89677a07902ac1b6821c345f34bd85da239b08"
@@ -5119,13 +5114,6 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chroma-js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.2.tgz#1075cb9ae25bcb2017c109394168b5cf3aa500ec"
-  integrity sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==
-  dependencies:
-    cross-env "^6.0.3"
-
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -5742,13 +5730,6 @@ cross-env@^5.1.3:
   dependencies:
     cross-spawn "^6.0.5"
 
-cross-env@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
-  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
-  dependencies:
-    cross-spawn "^7.0.0"
-
 cross-fetch@^3.0.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"