@zag-js/color-utils 0.21.0 → 0.22.0

package/src/color-format-gradient.ts

@@ -0,0 +1,139 @@
+export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+        `hsl(${zValue}, 100%, 50%)`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${
+          orientation[Number(!dir)]
+        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "hsl(0, 0%, 50%)",
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      backgroundImage: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+        `hsl(${zValue}, 100%, 50%)`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "#000",
+      ].join(","),
+    },
+  }
+  return result
+}

package/src/color.ts

@@ -5,9 +5,13 @@ export abstract class Color implements ColorType {
   abstract toString(format: ColorFormat | "css"): string
   abstract clone(): ColorType
   abstract getChannelRange(channel: ColorChannel): ColorChannelRange
-  abstract getColorSpace(): ColorFormat
+  abstract getColorFormat(): ColorFormat
   abstract getColorChannels(): [ColorChannel, ColorChannel, ColorChannel]
 
+  hasColorChannel(channel: ColorChannel): boolean {
+    return this.getColorChannels().includes(channel)
+  }
+
   toHexInt(): number {
     return this.toFormat("rgb").toHexInt()
   }

package/src/hsb-color.ts

@@ -113,7 +113,7 @@ export class HSBColor extends Color {
     }
   }
 
-  getColorSpace(): ColorFormat {
+  getColorFormat(): ColorFormat {
     return "hsb"
   }
 

package/src/hsl-color.ts

@@ -108,7 +108,7 @@ export class HSLColor extends Color {
     }
   }
 
-  getColorSpace(): ColorFormat {
+  getColorFormat(): ColorFormat {
     return "hsl"
   }
 

package/src/index.ts

@@ -1,3 +1,4 @@
+export { getColorAreaGradient } from "./area-gradient"
 export { Color } from "./color"
-export { parseColor, normalizeColor } from "./parse-color"
-export type { ColorChannel, ColorFormat, ColorAxes, ColorChannelRange, ColorType } from "./types"
+export { normalizeColor, parseColor } from "./parse-color"
+export type { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorType } from "./types"

package/src/native-color.ts

@@ -0,0 +1,14 @@
+const nativeColors /* @__PURE__ */ =
+  "aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgrey:d3d3d3,lightgreen:90ee90,lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:778899,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370d8,mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc,mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:d87093,papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080,red:ff0000,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32"
+
+const makeMap = (str: string) => {
+  const map = new Map<string, string>()
+  const list = str.split(",")
+  for (let i = 0; i < list.length; i++) {
+    const [key, val] = list[i].split(":")
+    map.set(key, `#${val}`)
+  }
+  return map
+}
+
+export const nativeColorMap /* @__PURE__ */ = makeMap(nativeColors)

package/src/parse-color.ts

@@ -1,20 +1,25 @@
 import { HSBColor } from "./hsb-color"
 import { HSLColor } from "./hsl-color"
+import { nativeColorMap } from "./native-color"
 import { RGBColor } from "./rgb-color"
 import type { ColorType } from "./types"
 
-export function parseColor(value: string): ColorType {
-  let result = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value)
+export const parseColor = (value: string): ColorType => {
+  if (nativeColorMap.has(value)) {
+    return parseColor(nativeColorMap.get(value)!)
+  }
+
+  const result = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value)
+
   if (!result) {
-    throw new Error("Invalid color value: " + value)
+    const error = new Error("Invalid color value: " + value)
+    Error.captureStackTrace?.(error, parseColor)
+    throw error
   }
+
   return result
 }
 
-export function normalizeColor(v: string | ColorType) {
-  if (typeof v === "string") {
-    return parseColor(v)
-  } else {
-    return v
-  }
+export const normalizeColor = (v: string | ColorType) => {
+  return typeof v === "string" ? parseColor(v) : v
 }

package/src/rgb-color.ts

@@ -196,7 +196,7 @@ export class RGBColor extends Color {
     }
   }
 
-  getColorSpace(): ColorFormat {
+  getColorFormat(): ColorFormat {
     return "rgb"
   }
 

package/src/types.ts

@@ -39,7 +39,7 @@ export interface ColorType {
   /**
    * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color.
    */
-  getColorSpace(): ColorFormat
+  getColorFormat(): ColorFormat
   /**
    * Returns the color space axes, xChannel, yChannel, zChannel.
    */