@webstudio-is/css-engine 0.257.0 → 0.258.0

package/lib/index.js

@@ -90,6 +90,12 @@ var toValue = (styleValue, transformValue) => {
     let [c1, c2, c3] = value.components;
     const alpha = typeof value.alpha === "number" ? value.alpha : toValue(value.alpha);
     switch (value.colorSpace) {
+      case "hex": {
+        const toHex = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255).toString(16).padStart(2, "0");
+        const hex = `#${toHex(c1)}${toHex(c2)}${toHex(c3)}`;
+        const alphaNum = typeof alpha === "number" ? alpha : 1;
+        return alphaNum < 1 ? hex + toHex(alphaNum) : hex;
+      }
       case "srgb": {
         c1 = Math.round(c1 * 255);
         c2 = Math.round(c2 * 255);
@@ -109,7 +115,7 @@ var toValue = (styleValue, transformValue) => {
       case "oklch":
         return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
       // Fall back to color() function for less common color spaces.
-      // Webstudio uses colorjs internal names; map to CSS predefined color space names.
+      // colorjs uses internal short names that differ from CSS predefined color space identifiers.
       case "p3":
         return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
       case "a98rgb":
@@ -212,6 +218,7 @@ var ColorValue = z.object({
   type: z.literal("color"),
   // all these color spaces are defined by design tokens specification
   colorSpace: z.union([
+    z.literal("hex"),
     z.literal("srgb"),
     z.literal("p3"),
     z.literal("srgb-linear"),
@@ -371,12 +378,12 @@ var isLonghandValue = (value) => {
 var mergeBorder = (styleMap, base) => {
   const width = styleMap.get(`${base}-width`);
   const style = styleMap.get(`${base}-style`);
-  const color = styleMap.get(`${base}-color`);
-  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color)) {
+  const color2 = styleMap.get(`${base}-color`);
+  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color2)) {
     styleMap.delete(`${base}-width`);
     styleMap.delete(`${base}-style`);
     styleMap.delete(`${base}-color`);
-    styleMap.set(base, { type: "tuple", value: [width, style, color] });
+    styleMap.set(base, { type: "tuple", value: [width, style, color2] });
   }
 };
 var mergeBox = (styleMap, base) => {
@@ -1058,6 +1065,116 @@ var generateAtomic = (sheet, options) => {
   });
   return { cssText, classes };
 };
+
+// src/color.ts
+import * as colorjs from "colorjs.io/fn";
+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);
+colorjs.ColorSpace.registry["display-p3"] = colorjs.P3;
+colorjs.ColorSpace.registry["a98-rgb"] = colorjs.A98RGB;
+colorjs.ColorSpace.registry["prophoto-rgb"] = colorjs.ProPhoto;
+var color = colorjs;
+var registeredSpaces = /* @__PURE__ */ new Map([
+  [colorjs.sRGB, "srgb"],
+  [colorjs.sRGB_Linear, "srgb-linear"],
+  [colorjs.HSL, "hsl"],
+  [colorjs.HWB, "hwb"],
+  [colorjs.Lab, "lab"],
+  [colorjs.LCH, "lch"],
+  [colorjs.OKLab, "oklab"],
+  [colorjs.OKLCH, "oklch"],
+  [colorjs.P3, "p3"],
+  [colorjs.A98RGB, "a98rgb"],
+  [colorjs.ProPhoto, "prophoto"],
+  [colorjs.REC_2020, "rec2020"],
+  [colorjs.XYZ_D65, "xyz-d65"],
+  [colorjs.XYZ_D50, "xyz-d50"]
+]);
+var toColorSpace = (space) => {
+  const id = registeredSpaces.get(space);
+  if (id === void 0) {
+    throw new Error(`Unregistered color space: ${space.id}`);
+  }
+  return id;
+};
+var toColorComponent = (value) => Math.round((value ?? 0) * 1e4) / 1e4;
+var srgbColor = (r, g, b, alpha = 1) => ({
+  space: colorjs.sRGB,
+  coords: [r, g, b],
+  alpha
+});
+var transparentColor = srgbColor(0, 0, 0, 0);
+var whiteColor = srgbColor(1, 1, 1, 1);
+var resolveColorViaCanvas = (colorString) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.fillStyle = colorString;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  return srgbColor(
+    (r ?? 0) / 255,
+    (g ?? 0) / 255,
+    (b ?? 0) / 255,
+    (a ?? 255) / 255
+  );
+};
+var parseColor = (cssString) => {
+  try {
+    return colorjs.to(cssString, "srgb");
+  } catch {
+    return resolveColorViaCanvas(cssString) ?? transparentColor;
+  }
+};
+var colorDistance = (a, b) => {
+  const [ar, ag, ab] = a.coords;
+  const [br, bg, bb] = b.coords;
+  return Math.sqrt(
+    ((ar ?? 0) - (br ?? 0)) ** 2 + ((ag ?? 0) - (bg ?? 0)) ** 2 + ((ab ?? 0) - (bb ?? 0)) ** 2 + ((a.alpha ?? 1) - (b.alpha ?? 1)) ** 2
+  );
+};
+var lerpColor = (a, b, ratio) => {
+  const lerp = (start, end, t) => start * (1 - t) + end * t;
+  return {
+    space: a.space,
+    coords: [
+      lerp(a.coords[0] ?? 0, b.coords[0] ?? 0, ratio),
+      lerp(a.coords[1] ?? 0, b.coords[1] ?? 0, ratio),
+      lerp(a.coords[2] ?? 0, b.coords[2] ?? 0, ratio)
+    ],
+    alpha: lerp(a.alpha ?? 1, b.alpha ?? 1, ratio)
+  };
+};
+var serializeColor = (color2) => {
+  const [r, g, b] = color2.coords;
+  const red = Math.round((r ?? 0) * 255);
+  const green = Math.round((g ?? 0) * 255);
+  const blue = Math.round((b ?? 0) * 255);
+  const alpha = color2.alpha ?? 1;
+  if (alpha < 1) {
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+  return `rgb(${red}, ${green}, ${blue})`;
+};
 export {
   ColorValue,
   FakeStyleElement,
@@ -1074,6 +1191,8 @@ export {
   UnitValue,
   UnparsedValue,
   VarFallback,
+  color,
+  colorDistance,
   compareMedia,
   createRegularStyleSheet,
   cssWideKeywords,
@@ -1082,9 +1201,17 @@ export {
   generateAtomic,
   generateStyleMap,
   hyphenateProperty,
+  lerpColor,
   matchMedia,
   mergeStyles,
+  parseColor,
   prefixStyles,
+  serializeColor,
+  srgbColor,
+  toColorComponent,
+  toColorSpace,
   toValue,
-  toVarFallback
+  toVarFallback,
+  transparentColor,
+  whiteColor
 };

package/lib/runtime.js

@@ -63,6 +63,12 @@ var toValue = (styleValue, transformValue) => {
     let [c1, c2, c3] = value.components;
     const alpha = typeof value.alpha === "number" ? value.alpha : toValue(value.alpha);
     switch (value.colorSpace) {
+      case "hex": {
+        const toHex = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255).toString(16).padStart(2, "0");
+        const hex = `#${toHex(c1)}${toHex(c2)}${toHex(c3)}`;
+        const alphaNum = typeof alpha === "number" ? alpha : 1;
+        return alphaNum < 1 ? hex + toHex(alphaNum) : hex;
+      }
       case "srgb": {
         c1 = Math.round(c1 * 255);
         c2 = Math.round(c2 * 255);
@@ -82,7 +88,7 @@ var toValue = (styleValue, transformValue) => {
       case "oklch":
         return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
       // Fall back to color() function for less common color spaces.
-      // Webstudio uses colorjs internal names; map to CSS predefined color space names.
+      // colorjs uses internal short names that differ from CSS predefined color space identifiers.
       case "p3":
         return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
       case "a98rgb":

package/lib/types/color.d.ts

@@ -0,0 +1,14 @@
+import * as colorjs from "colorjs.io/fn";
+export type { PlainColorObject, ColorConstructor, ColorSpace, Coords, } from "colorjs.io/fn";
+import type { ColorSpace, PlainColorObject } from "colorjs.io/fn";
+import type { ColorValue } from "./schema";
+export declare const color: typeof colorjs;
+export declare const toColorSpace: (space: ColorSpace) => ColorValue["colorSpace"];
+export declare const toColorComponent: (value: undefined | null | number) => number;
+export declare const srgbColor: (r: number, g: number, b: number, alpha?: number) => PlainColorObject;
+export declare const transparentColor: import("colorjs.io/src/color.js").PlainColorObject;
+export declare const whiteColor: import("colorjs.io/src/color.js").PlainColorObject;
+export declare const parseColor: (cssString: string) => PlainColorObject;
+export declare const colorDistance: (a: PlainColorObject, b: PlainColorObject) => number;
+export declare const lerpColor: (a: PlainColorObject, b: PlainColorObject, ratio: number) => PlainColorObject;
+export declare const serializeColor: (color: PlainColorObject) => string;

package/lib/types/color.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./core/index";
 export * from "./schema";
 export * from "./css";
+export * from "./color";
 export type { Unit as __Unit } from "./__generated__/types";
 export type { HyphenatedProperty as __HyphenatedProperty } from "./__generated__/types";

package/lib/types/schema.d.ts

@@ -94,7 +94,7 @@ declare const RgbValue: z.ZodObject<{
 export type RgbValue = z.infer<typeof RgbValue>;
 export type ColorValue = {
     type: "color";
-    colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
+    colorSpace: "hex" | "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
     components: [number, number, number];
     alpha: number | VarValue;
     hidden?: boolean;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.257.0",
+  "version": "0.258.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "@emotion/hash": "^0.9.2",
+    "colorjs.io": "^0.6.1",
     "zod": "^3.24.2",
-    "@webstudio-is/fonts": "0.257.0"
+    "@webstudio-is/fonts": "0.258.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",