refactor: migrate to colorjs.io (#5463)

colord library we used does not support new color spaces like oklch.
colorjs.io is mature library and handles this stuff just well.

Author: TrySound

apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx

@@ -1,5 +1,3 @@
-import { colord, extend, type RgbaColor } from "colord";
-import namesPlugin from "colord/plugins/names";
 import {
   toValue,
   type CssProperty,
@@ -16,9 +14,6 @@ import {
 } from "../../shared/repeated-style";
 import { parseCssFragment } from "../../shared/css-fragment";
 
-// To support color names
-extend([namesPlugin]);
-
 export const properties = ["box-shadow"] satisfies [
   CssProperty,
   ...CssProperty[],
@@ -46,11 +41,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
   } else {
     labels.push(toValue(shadowValue));
   }
-  let color: undefined | RgbaColor;
-  const colordValue = colord(toValue(shadowValue?.color));
-  if (colordValue.isValid()) {
-    color = colordValue.toRgb();
-  }
+  const color = shadowValue?.color ? toValue(shadowValue.color) : undefined;
   return { label: labels.join(" "), color };
 };
 

apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx

@@ -1,5 +1,3 @@
-import { colord, extend, type RgbaColor } from "colord";
-import namesPlugin from "colord/plugins/names";
 import {
   toValue,
   type CssProperty,
@@ -16,9 +14,6 @@ import {
 import { parseCssFragment } from "../../shared/css-fragment";
 import { useComputedStyleDecl } from "../../shared/model";
 
-// To support color names
-extend([namesPlugin]);
-
 export const properties = ["text-shadow"] satisfies [
   CssProperty,
   ...CssProperty[],
@@ -40,11 +35,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
   } else {
     labels.push(toValue(shadowValue));
   }
-  let color: undefined | RgbaColor;
-  const colordValue = colord(toValue(shadowValue?.color));
-  if (colordValue.isValid()) {
-    color = colordValue.toRgb();
-  }
+  const color = shadowValue?.color ? toValue(shadowValue.color) : undefined;
   return { label: labels.join(" "), color };
 };
 

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -933,14 +933,7 @@ export const CssValueInput = ({
                           </Text>
                         )}
                         {item.fallback?.type === "rgb" && (
-                          <ColorThumb
-                            color={{
-                              r: item.fallback.r,
-                              g: item.fallback.g,
-                              b: item.fallback.b,
-                              a: item.fallback.alpha,
-                            }}
-                          />
+                          <ColorThumb color={toValue(item.fallback)} />
                         )}
                       </Flex>
                     ) : (

apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx

@@ -1,5 +1,4 @@
 import { useMemo, type ComponentProps, type JSX, type ReactNode } from "react";
-import type { RgbaColor } from "colord";
 import {
   toValue,
   type CssProperty,
@@ -328,7 +327,7 @@ export const RepeatedStyle = (props: {
   getItemProps: (
     index: number,
     primaryValue: StyleValue
-  ) => { label: string; color?: RgbaColor };
+  ) => { label: string; color?: string };
   floatingPanelOffset?: ComponentProps<typeof FloatingPanel>["offset"];
   renderThumbnail?: (index: number, primaryItem: StyleValue) => JSX.Element;
   renderItemContent: (index: number, primaryItem: StyleValue) => JSX.Element;
@@ -426,7 +425,7 @@ export const RepeatedStyle = (props: {
                 hidden={isHidden}
                 thumbnail={
                   renderThumbnail?.(index, primaryItem) ??
-                  (itemColor && <ColorThumb color={itemColor} />)
+                  (itemColor ? <ColorThumb color={itemColor} /> : undefined)
                 }
                 buttons={
                   <>

apps/builder/app/builder/shared/css-editor/css-editor.tsx

@@ -1,5 +1,5 @@
 import { mergeRefs } from "@react-aria/utils";
-import { colord } from "colord";
+import Color from "colorjs.io";
 import {
   memo,
   useEffect,
@@ -132,7 +132,13 @@ const AdvancedPropertyValue = ({
   inputRef?: RefObject<HTMLInputElement>;
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
-  const isColor = colord(toValue(styleDecl.usedValue)).isValid();
+  let isColor = false;
+  try {
+    new Color(toValue(styleDecl.usedValue));
+    isColor = true;
+  } catch {
+    isColor = false;
+  }
 
   return (
     <CssValueInputContainer

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -60,7 +60,7 @@ import {
 import { isDescendantOrSelf, type InstanceSelector } from "~/shared/tree-utils";
 import { ToolbarConnectorPlugin } from "./toolbar-connector";
 import { type Refs, $convertToLexical, $convertToUpdates } from "./interop";
-import { colord } from "colord";
+import Color from "colorjs.io";
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 import {
   deleteInstanceMutable,
@@ -144,8 +144,16 @@ const CaretColorPlugin = () => {
 
     const elementColor = window.getComputedStyle(rootElement).color;
 
-    const color = colord(elementColor).toRgb();
-    if (color.a < 0.1) {
+    let isLightBackground = false;
+    try {
+      const color = new Color(elementColor);
+      const alpha = color.alpha ?? 1;
+      isLightBackground = alpha < 0.1;
+    } catch {
+      // If we can't parse the color, assume it's not light
+    }
+
+    if (isLightBackground) {
       // Apply caret color with animated color
       const sheet = createRegularStyleSheet({ name: "text-editor-caret" });
 

apps/builder/package.json

@@ -86,7 +86,7 @@
     "args-tokenizer": "^0.3.0",
     "bcp-47": "^2.1.0",
     "change-case": "^5.4.4",
-    "colord": "^2.9.3",
+    "colorjs.io": "^0.5.0",
     "cookie": "^1.0.1",
     "css-tree": "^3.1.0",
     "debug": "^4.3.7",

packages/css-data/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@webstudio-is/css-engine": "workspace:*",
     "change-case": "^5.4.4",
-    "colord": "^2.9.3",
+    "colorjs.io": "^0.5.0",
     "css-tree": "^3.1.0",
     "openai": "^3.2.1",
     "p-retry": "^6.2.1",

packages/css-data/src/parse-css-value.ts

@@ -1,5 +1,4 @@
-import { colord, extend } from "colord";
-import namesPlugin from "colord/plugins/names";
+import Color from "colorjs.io";
 import {
   type CssNode,
   type FunctionNode,
@@ -30,9 +29,6 @@ import {
 import { keywordValues } from "./__generated__/keyword-values";
 import { units } from "./__generated__/units";
 
-// To support color names
-extend([namesPlugin]);
-
 export const cssTryParseValue = (input: string): undefined | CssNode => {
   try {
     const ast = parse(input, { context: "value" });
@@ -159,16 +155,20 @@ const tupleProps = new Set<CssProperty>([
 const availableUnits = new Set<string>(Object.values(units).flat());
 
 const parseColor = (colorString: string): undefined | RgbValue => {
-  const color = colord(colorString);
-  if (color.isValid()) {
-    const rgb = color.toRgb();
+  try {
+    const color = new Color(colorString).to("srgb");
+    // colorjs.io represents RGB values as 0-1 range
+    const [r, g, b] = color.coords.map((coord) => coord.valueOf());
+    const alpha = Number(color.alpha.valueOf().toFixed(2));
     return {
       type: "rgb",
-      alpha: rgb.a,
-      r: rgb.r,
-      g: rgb.g,
-      b: rgb.b,
+      alpha: alpha ?? 1,
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
     };
+  } catch {
+    return;
   }
 };
 

packages/css-data/src/property-parsers/gradient-utils.ts

@@ -6,12 +6,9 @@ import {
   type VarValue,
   toValue,
 } from "@webstudio-is/css-engine";
-import { colord, extend } from "colord";
-import namesPlugin from "colord/plugins/names";
+import Color from "colorjs.io";
 import type { GradientColorValue, GradientStop } from "./types";
 
-extend([namesPlugin]);
-
 export const angleUnitIdentifiers = ["deg", "grad", "rad", "turn"] as const;
 const angleUnitSet = new Set<string>(angleUnitIdentifiers);
 
@@ -119,16 +116,19 @@ export const getColor = (
     return parsed;
   }
   if (parsed.type === "keyword") {
-    const color = colord(parsed.value);
-    if (color.isValid()) {
-      const { r, g, b, a } = color.toRgb();
+    try {
+      const color = new Color(parsed.value);
+      const [r, g, b] = color.coords;
+      const alpha = color.alpha;
       return {
         type: "rgb",
-        r,
-        g,
-        b,
-        alpha: a,
+        r: r * 255,
+        g: g * 255,
+        b: b * 255,
+        alpha: alpha ?? 1,
       } satisfies GradientColorValue;
+    } catch {
+      // Invalid color
     }
   }
 };