feat: New color formats and color picker

apps/builder/app/builder/features/style-panel/sections/backgrounds/gradient-utils.test.ts

@@ -638,7 +638,7 @@ describe("styleValueToColor", () => {
     };
     expect(styleValueToColor(style)).toEqual({
       type: "color",
-      colorSpace: "srgb",
+      colorSpace: "hex",
       components: [0, 0, 1],
       alpha: 1,
     });

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -6,7 +6,7 @@ import {
   type VarValue,
   type CssProperty,
 } from "@webstudio-is/css-engine";
-import { Box, ColorPickerPopover } from "@webstudio-is/design-system";
+import { Box, ColorPicker } from "@webstudio-is/design-system";
 import { CssValueInput } from "./css-value-input";
 import type { IntermediateStyleValue } from "./css-value-input/css-value-input";
 
@@ -43,7 +43,7 @@ export const ColorPickerControl = ({
       styleSource="default"
       prefix={
         <Box css={{ paddingLeft: 2 }}>
-          <ColorPickerPopover
+          <ColorPicker
             value={currentColor}
             onChange={(styleValue) => {
               setIntermediateValue(styleValue);
@@ -80,6 +80,7 @@ export const ColorPickerControl = ({
           styleValue.type === "color" ||
           styleValue.type === "keyword" ||
           styleValue.type === "var" ||
+          styleValue.type === "unparsed" ||
           styleValue.type === "invalid"
         ) {
           setIntermediateValue(styleValue);
@@ -104,7 +105,8 @@ export const ColorPickerControl = ({
           value.type === "rgb" ||
           value.type === "color" ||
           value.type === "keyword" ||
-          value.type === "var"
+          value.type === "var" ||
+          value.type === "unparsed"
         ) {
           setIntermediateValue(undefined);
           onChangeComplete(value);

apps/builder/app/builder/features/style-panel/shared/css-fragment.test.ts

@@ -30,10 +30,7 @@ test("fallback further to valid values", () => {
     ["background-attachment", parseCssValue("background-attachment", "scroll")],
     ["background-origin", parseCssValue("background-origin", "padding-box")],
     ["background-clip", parseCssValue("background-clip", "border-box")],
-    [
-      "background-color",
-      parseCssValue("background-color", "rgba(255, 255, 255, 1)"),
-    ],
+    ["background-color", parseCssValue("background-color", "#fff")],
   ]);
   expect(parseCssFragment("#fff", ["background-image", "background"])).toEqual(
     result

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts

@@ -470,7 +470,7 @@ describe("Colors", () => {
     expect(result).toEqual({
       type: "color",
       alpha: 1,
-      colorSpace: "srgb",
+      colorSpace: "hex",
       components: [1, 0, 0],
     });
   });
@@ -484,7 +484,7 @@ describe("Colors", () => {
     expect(result).toEqual({
       type: "color",
       alpha: 1,
-      colorSpace: "srgb",
+      colorSpace: "hex",
       components: [0.9412, 0.9333, 0.0588],
     });
   });
@@ -498,7 +498,7 @@ describe("Colors", () => {
     expect(result).toEqual({
       type: "color",
       alpha: 1,
-      colorSpace: "srgb",
+      colorSpace: "hex",
       components: [1, 0, 0],
     });
   });
@@ -512,7 +512,7 @@ describe("Colors", () => {
     expect(result).toEqual({
       type: "color",
       alpha: 1,
-      colorSpace: "srgb",
+      colorSpace: "hex",
       components: [0.9412, 0.9333, 0.0588],
     });
   });
@@ -531,6 +531,188 @@ describe("Colors", () => {
       components: [0.0392, 0.0784, 0.1176],
     });
   });
+
+  test("hsl color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "hsl(120 100% 50%)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "hsl",
+      alpha: 1,
+      components: [120, 100, 50],
+    });
+  });
+
+  test("hwb color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "hwb(120 0% 0%)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "hwb",
+      alpha: 1,
+      components: [120, 0, 0],
+    });
+  });
+
+  test("lab color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "lab(50 20 30)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "lab",
+      alpha: 1,
+      components: [50, 20, 30],
+    });
+  });
+
+  test("lch color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "lch(50 40 120)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "lch",
+      alpha: 1,
+      components: [50, 40, 120],
+    });
+  });
+
+  test("oklab color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "oklab(0.7 0.1 -0.1)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "oklab",
+      alpha: 1,
+      components: [0.7, 0.1, -0.1],
+    });
+  });
+
+  test("oklch color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "oklch(0.7 0.1 180)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "oklch",
+      alpha: 1,
+      components: [0.7, 0.1, 180],
+    });
+  });
+
+  test("srgb-linear color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(srgb-linear 1 0 0)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "srgb-linear",
+      alpha: 1,
+      components: [1, 0, 0],
+    });
+  });
+
+  test("display-p3 color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(display-p3 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "p3",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
+
+  test("a98-rgb color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(a98-rgb 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "a98rgb",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
+
+  test("prophoto-rgb color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(prophoto-rgb 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "prophoto",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
+
+  test("rec2020 color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(rec2020 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "rec2020",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
+
+  test("xyz-d65 color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(xyz-d65 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "xyz-d65",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
+
+  test("xyz-d50 color", () => {
+    expect(
+      parseIntermediateOrInvalidValue("color", {
+        type: "intermediate",
+        value: "color(xyz-d50 0.4 0.6 0.3)",
+      })
+    ).toEqual({
+      type: "color",
+      colorSpace: "xyz-d50",
+      alpha: 1,
+      components: [0.4, 0.6, 0.3],
+    });
+  });
 });
 
 test("parse css variable reference", () => {
@@ -595,7 +777,7 @@ test("parse color in css variable", () => {
     })
   ).toEqual({
     type: "color",
-    colorSpace: "srgb",
+    colorSpace: "hex",
     components: [0.0588, 0.0588, 0.0588],
     alpha: 1,
   });

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

@@ -1,5 +1,5 @@
 import { mergeRefs } from "@react-aria/utils";
-import * as colorjs from "colorjs.io/fn";
+import { color } from "@webstudio-is/css-engine";
 import {
   memo,
   useEffect,
@@ -35,7 +35,7 @@ import {
 import { CssValueInputContainer } from "../../features/style-panel/shared/css-value-input";
 import { $availableVariables } from "../../features/style-panel/shared/model";
 import { PropertyInfo } from "../../features/style-panel/property-label";
-import { ColorPickerPopover } from "@webstudio-is/design-system";
+import { ColorPicker } from "@webstudio-is/design-system";
 import { useClientSupports } from "~/shared/client-supports";
 import { CssEditorContextMenu, copyAttribute } from "./css-editor-context-menu";
 import { AddStyleInput } from "./add-style-input";
@@ -134,7 +134,7 @@ const AdvancedPropertyValue = ({
   const inputRef = useRef<HTMLInputElement>(null);
   let isColor = false;
   try {
-    colorjs.parse(toValue(styleDecl.usedValue));
+    color.parse(toValue(styleDecl.usedValue));
     isColor = true;
   } catch {
     isColor = false;
@@ -148,7 +148,7 @@ const AdvancedPropertyValue = ({
       fieldSizing="content"
       prefix={
         isColor && (
-          <ColorPickerPopover
+          <ColorPicker
             value={styleDecl.usedValue}
             onChange={(styleValue) => {
               const options = { isEphemeral: true, listed: true };

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

@@ -1,4 +1,4 @@
-import * as colorjs from "colorjs.io/fn";
+import { color } from "@webstudio-is/css-engine";
 import {
   useState,
   useEffect,
@@ -146,8 +146,8 @@ const CaretColorPlugin = () => {
 
     let isLightBackground = false;
     try {
-      const color = colorjs.parse(elementColor);
-      const alpha = color.alpha ?? 1;
+      const parsed = color.parse(elementColor);
+      const alpha = parsed.alpha ?? 1;
       isLightBackground = alpha < 0.1;
     } catch {
       // If we can't parse the color, assume it's not light

apps/builder/app/routes/_ui.(builder).tsx

@@ -189,9 +189,11 @@ export const loader = async (loaderArgs: LoaderFunctionArgs) => {
       // Disallowing iframes from loading any content except the canvas
       // Still possible create iframes on canvas itself (but we use credentialless attribute)
       // Still possible create iframe without src attribute
-      // Disable workers on builder
+      // Allow blob: workers so hdr-color-input can spawn its inline canvas-rendering worker.
+      // blob: workers can only be created from JS already running in this page, so the
+      // attack surface is no wider than allowing eval.
       "Content-Security-Policy",
-      `frame-src ${url.origin}/canvas https://app.goentri.com/ https://help.webstudio.is/; worker-src 'none'`
+      `frame-src ${url.origin}/canvas https://app.goentri.com/ https://help.webstudio.is/; worker-src blob:`
     );
 
     return json(

apps/builder/app/shared/commands-emitter.ts

@@ -162,7 +162,7 @@ export const createCommandsEmitter = <CommandName extends string>({
         if (disableOnInputLikeControls) {
           const element = event.target as HTMLElement;
           const isOnInputLikeControl =
-            ["input", "select", "textarea"].includes(
+            ["input", "select", "textarea", "color-input"].includes(
               element.tagName.toLowerCase()
             ) ||
             element.isContentEditable ||