refactor: upgrade colorjs.io to v0.6 and adopt functional API (#5617)

## Summary

Upgrades colorjs.io from v0.5.x to v0.6.x and adopts the new functional
API to fix TypeScript compatibility issues and reduce bundle size.

## Breaking Changes in v0.6

This release includes two major changes from colorjs.io that required
code updates:

1. `null` instead of `NaN` for "none" values — Coordinates now use
`number | null` instead of the custom `Number` instance that previously
used `"none"` strings. This eliminates runtime casting and improves
TypeScript DX.

2. Plain numbers instead of `Number` objects — Coordinates are now plain
number primitives rather than `Number` objects with parsing metadata,
improving performance and bundle size.

## Changes Made

- Upgraded colorjs.io to v0.6.x
- Adopted functional API (`/fn` entry point) for tree-shakeable imports
and reduced bundle size
- Updated coordinate handling to use `number | null` directly instead of
custom `Number` instances with `"none"` values
- Removed runtime casting previously required for TypeScript
compatibility
- Aligned with engramma and hdr-color-input — both already use the
functional style, enabling code deduplication

## Migration Notes

See [colorjs.io v0.6.0 release
notes](https://github.com/color-js/color.js/releases/tag/v0.6.0) for
full details on the breaking changes.

Author: TrySound

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

@@ -1,5 +1,5 @@
 import { mergeRefs } from "@react-aria/utils";
-import Color from "colorjs.io";
+import * as colorjs from "colorjs.io/fn";
 import {
   memo,
   useEffect,
@@ -134,7 +134,7 @@ const AdvancedPropertyValue = ({
   const inputRef = useRef<HTMLInputElement>(null);
   let isColor = false;
   try {
-    new Color(toValue(styleDecl.usedValue));
+    colorjs.parse(toValue(styleDecl.usedValue));
     isColor = true;
   } catch {
     isColor = false;

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

@@ -1,3 +1,4 @@
+import * as colorjs from "colorjs.io/fn";
 import {
   useState,
   useEffect,
@@ -60,7 +61,6 @@ import {
 import { isDescendantOrSelf, type InstanceSelector } from "~/shared/tree-utils";
 import { ToolbarConnectorPlugin } from "./toolbar-connector";
 import { type Refs, $convertToLexical, $convertToUpdates } from "./interop";
-import Color from "colorjs.io";
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 import {
   deleteInstanceMutable,
@@ -146,7 +146,7 @@ const CaretColorPlugin = () => {
 
     let isLightBackground = false;
     try {
-      const color = new Color(elementColor);
+      const color = colorjs.parse(elementColor);
       const alpha = color.alpha ?? 1;
       isLightBackground = alpha < 0.1;
     } catch {

apps/builder/package.json

@@ -86,7 +86,7 @@
     "args-tokenizer": "^0.3.0",
     "bcp-47": "^2.1.0",
     "change-case": "^5.4.4",
-    "colorjs.io": "^0.5.0",
+    "colorjs.io": "^0.6.1",
     "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",
-    "colorjs.io": "^0.5.0",
+    "colorjs.io": "^0.6.1",
     "css-tree": "^3.1.0",
     "openai": "^3.2.1",
     "p-retry": "^6.2.1",

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

@@ -1,4 +1,4 @@
-import Color from "colorjs.io";
+import * as colorjs from "colorjs.io/fn";
 import {
   type CssNode,
   type FunctionNode,
@@ -30,6 +30,21 @@ import {
 import { keywordValues } from "./__generated__/keyword-values";
 import { units } from "./__generated__/units";
 
+colorjs.ColorSpace.register(colorjs.sRGB);
+colorjs.ColorSpace.register(colorjs.sRGB_Linear);
+colorjs.ColorSpace.register(colorjs.HSL);
+colorjs.ColorSpace.register(colorjs.HWB);
+colorjs.ColorSpace.register(colorjs.Lab);
+colorjs.ColorSpace.register(colorjs.LCH);
+colorjs.ColorSpace.register(colorjs.OKLab);
+colorjs.ColorSpace.register(colorjs.OKLCH);
+colorjs.ColorSpace.register(colorjs.P3);
+colorjs.ColorSpace.register(colorjs.A98RGB);
+colorjs.ColorSpace.register(colorjs.ProPhoto);
+colorjs.ColorSpace.register(colorjs.REC_2020);
+colorjs.ColorSpace.register(colorjs.XYZ_D65);
+colorjs.ColorSpace.register(colorjs.XYZ_D50);
+
 export const cssTryParseValue = (input: string): undefined | CssNode => {
   try {
     const ast = parse(input, { context: "value" });
@@ -165,16 +180,16 @@ const colorSpace: Record<string, ColorValue["colorSpace"]> = {
   xyz: "xyz-d65", // default to d65
 };
 
-const toColorComponent = (value: number) =>
-  Math.round(value.valueOf() * 10000) / 10000;
+const toColorComponent = (value: undefined | null | number) =>
+  Math.round((value ?? 0) * 10000) / 10000;
 
 export const parseColor = (colorString: string): undefined | ColorValue => {
   // does not match css variables which are incorrectly treated by colorjs.io
   if (!lexer.match("<color>", colorString).matched) {
     return;
   }
   try {
-    const color = new Color(colorString);
+    const color = colorjs.parse(colorString);
     return {
       type: "color",
       colorSpace: colorSpace[color.spaceId],

packages/design-system/package.json

@@ -63,7 +63,7 @@
     "@webstudio-is/icons": "workspace:*",
     "change-case": "^5.4.4",
     "cmdk": "^1.1.1",
-    "colorjs.io": "^0.5.2",
+    "colorjs.io": "^0.6.1",
     "downshift": "^6.1.7",
     "match-sorter": "^8.0.0",
     "react-colorful": "^5.6.1",

packages/design-system/src/components/color-picker.tsx

@@ -1,11 +1,11 @@
+import * as colorjs from "colorjs.io/fn";
 import {
   forwardRef,
   type ComponentProps,
   type ElementRef,
   useEffect,
   useState,
 } from "react";
-import Color from "colorjs.io";
 import { clamp } from "@react-aria/utils";
 import { useDebouncedCallback } from "use-debounce";
 import { RgbaColorPicker } from "react-colorful";
@@ -23,6 +23,21 @@ import { IconButton } from "./icon-button";
 import { InputField } from "./input-field";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
+colorjs.ColorSpace.register(colorjs.sRGB);
+colorjs.ColorSpace.register(colorjs.sRGB_Linear);
+colorjs.ColorSpace.register(colorjs.HSL);
+colorjs.ColorSpace.register(colorjs.HWB);
+colorjs.ColorSpace.register(colorjs.Lab);
+colorjs.ColorSpace.register(colorjs.LCH);
+colorjs.ColorSpace.register(colorjs.OKLab);
+colorjs.ColorSpace.register(colorjs.OKLCH);
+colorjs.ColorSpace.register(colorjs.P3);
+colorjs.ColorSpace.register(colorjs.A98RGB);
+colorjs.ColorSpace.register(colorjs.ProPhoto);
+colorjs.ColorSpace.register(colorjs.REC_2020);
+colorjs.ColorSpace.register(colorjs.XYZ_D65);
+colorjs.ColorSpace.register(colorjs.XYZ_D50);
+
 type RgbaColor = {
   r: number;
   g: number;
@@ -31,12 +46,12 @@ type RgbaColor = {
 };
 
 // Helper to create RgbaColor from colorjs.io Color
-const colorToRgba = (color: Color): RgbaColor => {
+const colorToRgba = (color: colorjs.PlainColorObject): RgbaColor => {
   const [r, g, b] = color.coords;
   return {
-    r: r * 255,
-    g: g * 255,
-    b: b * 255,
+    r: (r ?? 0) * 255,
+    g: (g ?? 0) * 255,
+    b: (b ?? 0) * 255,
     a: color.alpha ?? 1,
   };
 };
@@ -46,8 +61,7 @@ const transparentColor: RgbaColor = { r: 0, g: 0, b: 0, a: 0 };
 // Helper to parse color string to RgbaColor
 export const parseColorString = (colorString: string): RgbaColor => {
   try {
-    const color = new Color(colorString);
-    return colorToRgba(color.to("srgb"));
+    return colorToRgba(colorjs.to(colorString, "srgb"));
   } catch {
     return transparentColor;
   }
@@ -81,7 +95,7 @@ const colorfulStyles = css({
 
 const whiteColor: RgbaColor = { r: 255, g: 255, b: 255, a: 1 };
 const borderColorSwatch = colorToRgba(
-  new Color(rawTheme.colors.borderColorSwatch)
+  colorjs.to(rawTheme.colors.borderColorSwatch, "srgb")
 );
 
 const distance = (a: RgbaColor, b: RgbaColor) =>
@@ -281,7 +295,10 @@ export const ColorPicker = ({
           onChange={(event) => {
             setHex(event.target.value);
             try {
-              const color = new Color(normalizeHex(event.target.value));
+              const color = colorjs.to(
+                normalizeHex(event.target.value),
+                "srgb"
+              );
               const rgba = colorToRgba(color);
               const newValue = colorResultToRgbValue(rgba);
               onChange(newValue);

packages/design-system/src/components/gradient-picker.tsx

@@ -19,7 +19,7 @@ import type {
   GradientStop,
   ParsedGradient,
 } from "@webstudio-is/css-data";
-import Color from "colorjs.io";
+import * as colorjs from "colorjs.io/fn";
 import { ChevronFilledUpIcon } from "@webstudio-is/icons";
 import { styled, theme } from "../stitches.config";
 import { Flex } from "./flex";
@@ -32,23 +32,31 @@ const mixColors = (
   color2: RgbValue,
   ratio: number
 ): RgbValue => {
-  const c1 = new Color("srgb", [
-    color1.r / 255,
-    color1.g / 255,
-    color1.b / 255,
-  ]);
-  const c2 = new Color("srgb", [
-    color2.r / 255,
-    color2.g / 255,
-    color2.b / 255,
-  ]);
-  const mixed = c1.mix(c2, ratio);
+  const c1: colorjs.ColorConstructor = {
+    spaceId: "srgb",
+    coords: [
+      (color1.r ?? 0) / 255,
+      (color1.g ?? 0) / 255,
+      (color1.b ?? 0) / 255,
+    ],
+    alpha: undefined,
+  };
+  const c2: colorjs.ColorConstructor = {
+    spaceId: "srgb",
+    coords: [
+      (color2.r ?? 0) / 255,
+      (color2.g ?? 0) / 255,
+      (color2.b ?? 0) / 255,
+    ],
+    alpha: undefined,
+  };
+  const mixed = colorjs.mix(c1, c2, ratio);
   const [r, g, b] = mixed.coords;
   return {
     type: "rgb",
-    r: r * 255,
-    g: g * 255,
-    b: b * 255,
+    r: (r ?? 0) * 255,
+    g: (g ?? 0) * 255,
+    b: (b ?? 0) * 255,
     alpha: color1.alpha ?? 1,
   };
 };
@@ -88,14 +96,14 @@ const toRgbColor = (
   }
 
   try {
-    const parsed = new Color(toValue(color));
+    const parsed = colorjs.parse(toValue(color));
     const [r, g, b] = parsed.coords;
     const alpha = parsed.alpha;
     return {
       type: "rgb",
-      r: r * 255,
-      g: g * 255,
-      b: b * 255,
+      r: (r ?? 0) * 255,
+      g: (g ?? 0) * 255,
+      b: (b ?? 0) * 255,
       alpha: alpha ?? 1,
     };
   } catch {