@zag-js/color-utils 0.69.0 → 0.71.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +41 -79
- package/dist/index.mjs +22 -37
- package/package.json +3 -4
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/area-gradient.ts +0 -95
- package/src/color-format-gradient.ts +0 -139
- package/src/color.ts +0 -89
- package/src/hsb-color.ts +0 -157
- package/src/hsl-color.ts +0 -153
- package/src/index.ts +0 -4
- package/src/native-color.ts +0 -14
- package/src/parse-color.ts +0 -25
- package/src/rgb-color.ts +0 -230
- package/src/types.ts +0 -94
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/color-format-gradient.ts","../src/area-gradient.ts","../src/color.ts","../src/hsb-color.ts","../src/hsl-color.ts","../src/rgb-color.ts","../src/native-color.ts","../src/parse-color.ts"],"sourcesContent":["export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {\n const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n const result = {\n areaStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,\n },\n areaGradientStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n WebkitMaskImage: maskImage,\n maskImage,\n },\n }\n return result\n}\n\nexport const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {\n const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n const result = {\n areaStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,\n },\n areaGradientStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n WebkitMaskImage: maskImage,\n maskImage,\n },\n }\n return result\n}\n\nexport const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {\n const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n const result = {\n areaStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,\n },\n areaGradientStyles: {\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n WebkitMaskImage: maskImage,\n maskImage,\n },\n }\n return result\n}\n\nexport const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n background: [\n `linear-gradient(to ${\n orientation[Number(dir)]\n }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n `hsl(${zValue}, 100%, 50%)`,\n ].join(\",\"),\n },\n }\n return result\n}\n\nexport const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n background: [\n `linear-gradient(to ${\n orientation[Number(!dir)]\n }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n `linear-gradient(to ${\n orientation[Number(dir)]\n },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}))`,\n \"hsl(0, 0%, 50%)\",\n ].join(\",\"),\n },\n }\n return result\n}\n\nexport const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n backgroundImage: [\n `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n `linear-gradient(to ${\n orientation[Number(dir)]\n },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}%))`,\n ].join(\",\"),\n },\n }\n return result\n}\n\nexport const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n background: [\n `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n `hsl(${zValue}, 100%, 50%)`,\n ].join(\",\"),\n },\n }\n return result\n}\n\nexport const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n background: [\n `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n `linear-gradient(to ${\n orientation[Number(dir)]\n },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}))`,\n `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,\n ].join(\",\"),\n },\n }\n return result\n}\n\nexport const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n const result = {\n areaStyles: {},\n areaGradientStyles: {\n background: [\n `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n `linear-gradient(to ${\n orientation[Number(dir)]\n },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}))`,\n \"#000\",\n ].join(\",\"),\n },\n }\n return result\n}\n","import type { Color } from \"./color\"\nimport {\n generateRGB_R,\n generateRGB_G,\n generateRGB_B,\n generateHSL_H,\n generateHSB_H,\n generateHSL_S,\n generateHSB_S,\n generateHSB_B,\n generateHSL_L,\n} from \"./color-format-gradient\"\nimport type { ColorChannel } from \"./types\"\n\ninterface GradientOptions {\n xChannel: ColorChannel\n yChannel: ColorChannel\n dir?: \"rtl\" | \"ltr\"\n}\n\ninterface GradientStyles {\n areaStyles: Record<string, string>\n areaGradientStyles: Record<string, string>\n}\n\nexport function getColorAreaGradient(color: Color, options: GradientOptions): GradientStyles {\n const { xChannel, yChannel, dir: dirProp = \"ltr\" } = options\n\n const { zChannel } = color.getColorAxes({ xChannel, yChannel })\n const zValue = color.getChannelValue(zChannel)\n\n const { minValue: zMin, maxValue: zMax } = color.getChannelRange(zChannel)\n const orientation: [string, string] = [\"top\", dirProp === \"rtl\" ? \"left\" : \"right\"]\n\n let dir = false\n\n let background = { areaStyles: {}, areaGradientStyles: {} }\n\n let alphaValue = (zValue - zMin) / (zMax - zMin)\n let isHSL = color.getFormat() === \"hsla\"\n\n switch (zChannel) {\n case \"red\": {\n dir = xChannel === \"green\"\n background = generateRGB_R(orientation, dir, zValue)\n break\n }\n\n case \"green\": {\n dir = xChannel === \"red\"\n background = generateRGB_G(orientation, dir, zValue)\n break\n }\n\n case \"blue\": {\n dir = xChannel === \"red\"\n background = generateRGB_B(orientation, dir, zValue)\n break\n }\n\n case \"hue\": {\n dir = xChannel !== \"saturation\"\n if (isHSL) {\n background = generateHSL_H(orientation, dir, zValue)\n } else {\n background = generateHSB_H(orientation, dir, zValue)\n }\n break\n }\n\n case \"saturation\": {\n dir = xChannel === \"hue\"\n if (isHSL) {\n background = generateHSL_S(orientation, dir, alphaValue)\n } else {\n background = generateHSB_S(orientation, dir, alphaValue)\n }\n break\n }\n\n case \"brightness\": {\n dir = xChannel === \"hue\"\n background = generateHSB_B(orientation, dir, alphaValue)\n break\n }\n\n case \"lightness\": {\n dir = xChannel === \"hue\"\n background = generateHSL_L(orientation, dir, zValue)\n break\n }\n }\n\n return background\n}\n","import { clampValue, getPercentValue, getValuePercent, snapValueToStep } from \"@zag-js/numeric-range\"\nimport type {\n Color2DAxes,\n ColorAxes,\n ColorChannel,\n ColorChannelRange,\n ColorFormat,\n ColorStringFormat,\n ColorType,\n} from \"./types\"\n\nconst isEqualObject = (a: Record<string, number>, b: Record<string, number>): boolean => {\n if (Object.keys(a).length !== Object.keys(b).length) return false\n for (let key in a) if (a[key] !== b[key]) return false\n return true\n}\n\nexport abstract class Color implements ColorType {\n abstract toFormat(format: ColorFormat): ColorType\n abstract toJSON(): Record<string, number>\n abstract toString(format: ColorStringFormat): string\n abstract clone(): ColorType\n abstract getChannelRange(channel: ColorChannel): ColorChannelRange\n abstract getFormat(): ColorFormat\n abstract getChannels(): [ColorChannel, ColorChannel, ColorChannel]\n abstract formatChannelValue(channel: ColorChannel, locale: string): string\n\n toHexInt(): number {\n return this.toFormat(\"rgba\").toHexInt()\n }\n\n getChannelValue(channel: ColorChannel): number {\n // @ts-ignore\n if (channel in this) return this[channel]\n throw new Error(\"Unsupported color channel: \" + channel)\n }\n\n getChannelValuePercent(channel: ColorChannel, valueToCheck?: number): number {\n const value = valueToCheck ?? this.getChannelValue(channel)\n const { minValue, maxValue } = this.getChannelRange(channel)\n return getValuePercent(value, minValue, maxValue)\n }\n\n getChannelPercentValue(channel: ColorChannel, percentToCheck: number): number {\n const { minValue, maxValue, step } = this.getChannelRange(channel)\n const percentValue = getPercentValue(percentToCheck, minValue, maxValue, step)\n return snapValueToStep(percentValue, minValue, maxValue, step)\n }\n\n withChannelValue(channel: ColorChannel, value: number): ColorType {\n const { minValue, maxValue } = this.getChannelRange(channel)\n if (channel in this) {\n let clone = this.clone()\n // @ts-ignore\n clone[channel] = clampValue(value, minValue, maxValue)\n return clone\n }\n\n throw new Error(\"Unsupported color channel: \" + channel)\n }\n\n getColorAxes(xyChannels: Color2DAxes): ColorAxes {\n let { xChannel, yChannel } = xyChannels\n let xCh = xChannel || this.getChannels().find((c) => c !== yChannel)\n let yCh = yChannel || this.getChannels().find((c) => c !== xCh)\n let zCh = this.getChannels().find((c) => c !== xCh && c !== yCh)\n return { xChannel: xCh!, yChannel: yCh!, zChannel: zCh! }\n }\n\n incrementChannel(channel: ColorChannel, stepSize: number): ColorType {\n const { minValue, maxValue, step } = this.getChannelRange(channel)\n const value = snapValueToStep(\n clampValue(this.getChannelValue(channel) + stepSize, minValue, maxValue),\n minValue,\n maxValue,\n step,\n )\n return this.withChannelValue(channel, value)\n }\n\n decrementChannel(channel: ColorChannel, stepSize: number): ColorType {\n return this.incrementChannel(channel, -stepSize)\n }\n\n isEqual(color: ColorType): boolean {\n const isSame = isEqualObject(this.toJSON(), color.toJSON())\n return isSame && this.getChannelValue(\"alpha\") === color.getChannelValue(\"alpha\")\n }\n}\n","import { clampValue, mod, toFixedNumber } from \"@zag-js/numeric-range\"\nimport { Color } from \"./color\"\nimport { HSLColor } from \"./hsl-color\"\nimport { RGBColor } from \"./rgb-color\"\nimport type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from \"./types\"\n\nconst HSB_REGEX =\n /hsb\\(([-+]?\\d+(?:.\\d+)?\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d+(?:.\\d+)?%)\\)|hsba\\(([-+]?\\d+(?:.\\d+)?\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d(.\\d+)?)\\)/\n\nexport class HSBColor extends Color {\n constructor(\n private hue: number,\n private saturation: number,\n private brightness: number,\n private alpha: number,\n ) {\n super()\n }\n\n static parse(value: string): HSBColor | void {\n let m: RegExpMatchArray | null\n if ((m = value.match(HSB_REGEX))) {\n const [h, s, b, a] = (m[1] ?? m[2]).split(\",\").map((n) => Number(n.trim().replace(\"%\", \"\")))\n return new HSBColor(mod(h, 360), clampValue(s, 0, 100), clampValue(b, 0, 100), clampValue(a ?? 1, 0, 1))\n }\n }\n\n toString(format: ColorStringFormat) {\n switch (format) {\n case \"css\":\n return this.toHSL().toString(\"css\")\n case \"hex\":\n return this.toRGB().toString(\"hex\")\n case \"hexa\":\n return this.toRGB().toString(\"hexa\")\n case \"hsb\":\n return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`\n case \"hsba\":\n return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${\n this.alpha\n })`\n case \"hsl\":\n return this.toHSL().toString(\"hsl\")\n case \"rgb\":\n return this.toRGB().toString(\"rgb\")\n default:\n return this.toFormat(format).toString(format)\n }\n }\n\n toFormat(format: ColorFormat): ColorType {\n switch (format) {\n case \"hsba\":\n return this\n case \"hsla\":\n return this.toHSL()\n case \"rgba\":\n return this.toRGB()\n default:\n throw new Error(\"Unsupported color conversion: hsb -> \" + format)\n }\n }\n\n /**\n * Converts a HSB color to HSL.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.\n * @returns An HSLColor object.\n */\n private toHSL(): ColorType {\n let saturation = this.saturation / 100\n let brightness = this.brightness / 100\n let lightness = brightness * (1 - saturation / 2)\n saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness)\n\n return new HSLColor(\n toFixedNumber(this.hue, 2),\n toFixedNumber(saturation * 100, 2),\n toFixedNumber(lightness * 100, 2),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n /**\n * Converts a HSV color value to RGB.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.\n * @returns An RGBColor object.\n */\n private toRGB(): ColorType {\n let hue = this.hue\n let saturation = this.saturation / 100\n let brightness = this.brightness / 100\n\n let fn = (n: number, k = (n + hue / 60) % 6) =>\n brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0)\n\n return new RGBColor(\n Math.round(fn(5) * 255),\n Math.round(fn(3) * 255),\n Math.round(fn(1) * 255),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n clone(): ColorType {\n return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha)\n }\n\n getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {\n switch (channel) {\n case \"hue\":\n return { style: \"unit\", unit: \"degree\", unitDisplay: \"narrow\" }\n case \"saturation\":\n case \"brightness\":\n case \"alpha\":\n return { style: \"percent\" }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n formatChannelValue(channel: ColorChannel, locale: string) {\n let options = this.getChannelFormatOptions(channel)\n let value = this.getChannelValue(channel)\n if (channel === \"saturation\" || channel === \"brightness\") {\n value /= 100\n }\n return new Intl.NumberFormat(locale, options).format(value)\n }\n\n getChannelRange(channel: ColorChannel): ColorChannelRange {\n switch (channel) {\n case \"hue\":\n return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 }\n case \"saturation\":\n case \"brightness\":\n return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 }\n case \"alpha\":\n return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n toJSON(): Record<\"h\" | \"s\" | \"b\" | \"a\", number> {\n return { h: this.hue, s: this.saturation, b: this.brightness, a: this.alpha }\n }\n\n getFormat(): ColorFormat {\n return \"hsba\"\n }\n\n private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = [\"hue\", \"saturation\", \"brightness\"]\n\n getChannels(): [ColorChannel, ColorChannel, ColorChannel] {\n return HSBColor.colorChannels\n }\n}\n","import { clampValue, mod, toFixedNumber } from \"@zag-js/numeric-range\"\nimport { Color } from \"./color\"\nimport { HSBColor } from \"./hsb-color\"\nimport { RGBColor } from \"./rgb-color\"\nimport type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from \"./types\"\n\nexport const HSL_REGEX =\n /hsl\\(([-+]?\\d+(?:.\\d+)?\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d+(?:.\\d+)?%)\\)|hsla\\(([-+]?\\d+(?:.\\d+)?\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d+(?:.\\d+)?%\\s*,\\s*[-+]?\\d(.\\d+)?)\\)/\n\nexport class HSLColor extends Color {\n constructor(\n private hue: number,\n private saturation: number,\n private lightness: number,\n private alpha: number,\n ) {\n super()\n }\n\n static parse(value: string): HSLColor | void {\n let m: RegExpMatchArray | null\n if ((m = value.match(HSL_REGEX))) {\n const [h, s, l, a] = (m[1] ?? m[2]).split(\",\").map((n) => Number(n.trim().replace(\"%\", \"\")))\n return new HSLColor(mod(h, 360), clampValue(s, 0, 100), clampValue(l, 0, 100), clampValue(a ?? 1, 0, 1))\n }\n }\n\n toString(format: ColorStringFormat) {\n switch (format) {\n case \"hex\":\n return this.toRGB().toString(\"hex\")\n case \"hexa\":\n return this.toRGB().toString(\"hexa\")\n case \"hsl\":\n return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`\n case \"css\":\n case \"hsla\":\n return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${\n this.alpha\n })`\n case \"hsb\":\n return this.toHSB().toString(\"hsb\")\n case \"rgb\":\n return this.toRGB().toString(\"rgb\")\n default:\n return this.toFormat(format).toString(format)\n }\n }\n\n toFormat(format: ColorFormat): ColorType {\n switch (format) {\n case \"hsla\":\n return this\n case \"hsba\":\n return this.toHSB()\n case \"rgba\":\n return this.toRGB()\n default:\n throw new Error(\"Unsupported color conversion: hsl -> \" + format)\n }\n }\n\n /**\n * Converts a HSL color to HSB.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.\n * @returns An HSBColor object.\n */\n private toHSB(): ColorType {\n let saturation = this.saturation / 100\n let lightness = this.lightness / 100\n let brightness = lightness + saturation * Math.min(lightness, 1 - lightness)\n saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness)\n return new HSBColor(\n toFixedNumber(this.hue, 2),\n toFixedNumber(saturation * 100, 2),\n toFixedNumber(brightness * 100, 2),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n /**\n * Converts a HSL color to RGB.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.\n * @returns An RGBColor object.\n */\n private toRGB(): ColorType {\n let hue = this.hue\n let saturation = this.saturation / 100\n let lightness = this.lightness / 100\n let a = saturation * Math.min(lightness, 1 - lightness)\n let fn = (n: number, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n return new RGBColor(\n Math.round(fn(0) * 255),\n Math.round(fn(8) * 255),\n Math.round(fn(4) * 255),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n clone(): ColorType {\n return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha)\n }\n\n getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {\n switch (channel) {\n case \"hue\":\n return { style: \"unit\", unit: \"degree\", unitDisplay: \"narrow\" }\n case \"saturation\":\n case \"lightness\":\n case \"alpha\":\n return { style: \"percent\" }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n formatChannelValue(channel: ColorChannel, locale: string) {\n let options = this.getChannelFormatOptions(channel)\n let value = this.getChannelValue(channel)\n if (channel === \"saturation\" || channel === \"lightness\") {\n value /= 100\n }\n return new Intl.NumberFormat(locale, options).format(value)\n }\n\n getChannelRange(channel: ColorChannel): ColorChannelRange {\n switch (channel) {\n case \"hue\":\n return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 }\n case \"saturation\":\n case \"lightness\":\n return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 }\n case \"alpha\":\n return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n toJSON(): Record<\"h\" | \"s\" | \"l\" | \"a\", number> {\n return { h: this.hue, s: this.saturation, l: this.lightness, a: this.alpha }\n }\n\n getFormat(): ColorFormat {\n return \"hsla\"\n }\n\n private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = [\"hue\", \"saturation\", \"lightness\"]\n\n getChannels(): [ColorChannel, ColorChannel, ColorChannel] {\n return HSLColor.colorChannels\n }\n}\n","import { clampValue, toFixedNumber } from \"@zag-js/numeric-range\"\nimport { Color } from \"./color\"\nimport { HSBColor } from \"./hsb-color\"\nimport { HSLColor } from \"./hsl-color\"\nimport type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from \"./types\"\n\nexport class RGBColor extends Color {\n constructor(\n private red: number,\n private green: number,\n private blue: number,\n private alpha: number,\n ) {\n super()\n }\n\n static parse(value: string) {\n let colors: (number | undefined)[] = []\n\n // matching #rgb, #rgba, #rrggbb, #rrggbbaa\n if (/^#[\\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {\n const values = (value.length < 6 ? value.replace(/[^#]/gi, \"$&$&\") : value).slice(1).split(\"\")\n while (values.length > 0) {\n colors.push(parseInt(values.splice(0, 2).join(\"\"), 16))\n }\n colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined\n }\n\n // matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a)\n const match = value.match(/^rgba?\\((.*)\\)$/)\n\n if (match?.[1]) {\n colors = match[1]\n .split(\",\")\n .map((value) => Number(value.trim()))\n .map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1))\n }\n\n //@ts-expect-error\n return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1)\n }\n\n toString(format: ColorStringFormat) {\n switch (format) {\n case \"hex\":\n return (\n \"#\" +\n (\n this.red.toString(16).padStart(2, \"0\") +\n this.green.toString(16).padStart(2, \"0\") +\n this.blue.toString(16).padStart(2, \"0\")\n ).toUpperCase()\n )\n case \"hexa\":\n return (\n \"#\" +\n (\n this.red.toString(16).padStart(2, \"0\") +\n this.green.toString(16).padStart(2, \"0\") +\n this.blue.toString(16).padStart(2, \"0\") +\n Math.round(this.alpha * 255)\n .toString(16)\n .padStart(2, \"0\")\n ).toUpperCase()\n )\n case \"rgb\":\n return `rgb(${this.red}, ${this.green}, ${this.blue})`\n case \"css\":\n case \"rgba\":\n return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`\n case \"hsl\":\n return this.toHSL().toString(\"hsl\")\n case \"hsb\":\n return this.toHSB().toString(\"hsb\")\n default:\n return this.toFormat(format).toString(format)\n }\n }\n\n toFormat(format: ColorFormat): ColorType {\n switch (format) {\n case \"rgba\":\n return this\n case \"hsba\":\n return this.toHSB()\n case \"hsla\":\n return this.toHSL()\n default:\n throw new Error(\"Unsupported color conversion: rgb -> \" + format)\n }\n }\n\n toHexInt(): number {\n return (this.red << 16) | (this.green << 8) | this.blue\n }\n\n /**\n * Converts an RGB color value to HSB.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.\n * @returns An HSBColor object.\n */\n private toHSB(): ColorType {\n const red = this.red / 255\n const green = this.green / 255\n const blue = this.blue / 255\n const min = Math.min(red, green, blue)\n const brightness = Math.max(red, green, blue)\n const chroma = brightness - min\n const saturation = brightness === 0 ? 0 : chroma / brightness\n let hue = 0 // achromatic\n\n if (chroma !== 0) {\n switch (brightness) {\n case red:\n hue = (green - blue) / chroma + (green < blue ? 6 : 0)\n break\n case green:\n hue = (blue - red) / chroma + 2\n break\n case blue:\n hue = (red - green) / chroma + 4\n break\n }\n\n hue /= 6\n }\n\n return new HSBColor(\n toFixedNumber(hue * 360, 2),\n toFixedNumber(saturation * 100, 2),\n toFixedNumber(brightness * 100, 2),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n /**\n * Converts an RGB color value to HSL.\n * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.\n * @returns An HSLColor object.\n */\n private toHSL(): ColorType {\n const red = this.red / 255\n const green = this.green / 255\n const blue = this.blue / 255\n const min = Math.min(red, green, blue)\n const max = Math.max(red, green, blue)\n const lightness = (max + min) / 2\n const chroma = max - min\n\n let hue = -1\n let saturation = -1\n\n if (chroma === 0) {\n hue = saturation = 0 // achromatic\n } else {\n saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min)\n\n switch (max) {\n case red:\n hue = (green - blue) / chroma + (green < blue ? 6 : 0)\n break\n case green:\n hue = (blue - red) / chroma + 2\n break\n case blue:\n hue = (red - green) / chroma + 4\n break\n }\n\n hue /= 6\n }\n\n return new HSLColor(\n toFixedNumber(hue * 360, 2),\n toFixedNumber(saturation * 100, 2),\n toFixedNumber(lightness * 100, 2),\n toFixedNumber(this.alpha, 2),\n )\n }\n\n clone(): ColorType {\n return new RGBColor(this.red, this.green, this.blue, this.alpha)\n }\n\n getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {\n switch (channel) {\n case \"red\":\n case \"green\":\n case \"blue\":\n return { style: \"decimal\" }\n case \"alpha\":\n return { style: \"percent\" }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n formatChannelValue(channel: ColorChannel, locale: string) {\n let options = this.getChannelFormatOptions(channel)\n let value = this.getChannelValue(channel)\n return new Intl.NumberFormat(locale, options).format(value)\n }\n\n getChannelRange(channel: ColorChannel): ColorChannelRange {\n switch (channel) {\n case \"red\":\n case \"green\":\n case \"blue\":\n return { minValue: 0x0, maxValue: 0xff, step: 0x1, pageSize: 0x11 }\n case \"alpha\":\n return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }\n default:\n throw new Error(\"Unknown color channel: \" + channel)\n }\n }\n\n toJSON(): Record<\"r\" | \"g\" | \"b\" | \"a\", number> {\n return { r: this.red, g: this.green, b: this.blue, a: this.alpha }\n }\n\n getFormat(): ColorFormat {\n return \"rgba\"\n }\n\n private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = [\"red\", \"green\", \"blue\"]\n\n getChannels(): [ColorChannel, ColorChannel, ColorChannel] {\n return RGBColor.colorChannels\n }\n}\n","const nativeColors /* @__PURE__ */ =\n \"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\"\n\nconst makeMap = (str: string) => {\n const map = new Map<string, string>()\n const list = str.split(\",\")\n for (let i = 0; i < list.length; i++) {\n const [key, val] = list[i].split(\":\")\n map.set(key, `#${val}`)\n }\n return map\n}\n\nexport const nativeColorMap /* @__PURE__ */ = makeMap(nativeColors)\n","import { HSBColor } from \"./hsb-color\"\nimport { HSLColor } from \"./hsl-color\"\nimport { nativeColorMap } from \"./native-color\"\nimport { RGBColor } from \"./rgb-color\"\nimport type { ColorType } from \"./types\"\n\nexport const parseColor = (value: string): ColorType => {\n if (nativeColorMap.has(value)) {\n return parseColor(nativeColorMap.get(value)!)\n }\n\n const result = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value)\n\n if (!result) {\n const error = new Error(\"Invalid color value: \" + value)\n Error.captureStackTrace?.(error, parseColor)\n throw error\n }\n\n return result\n}\n\nexport const normalizeColor = (v: string | ColorType) => {\n return typeof v === \"string\" ? parseColor(v) : v\n}\n"],"mappings":"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","names":["clampValue","mod","toFixedNumber","clampValue","toFixedNumber","clampValue","value","clampValue","clampValue","toFixedNumber","mod","clampValue","toFixedNumber"]}
|
package/src/area-gradient.ts
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import type { Color } from "./color"
|
|
2
|
-
import {
|
|
3
|
-
generateRGB_R,
|
|
4
|
-
generateRGB_G,
|
|
5
|
-
generateRGB_B,
|
|
6
|
-
generateHSL_H,
|
|
7
|
-
generateHSB_H,
|
|
8
|
-
generateHSL_S,
|
|
9
|
-
generateHSB_S,
|
|
10
|
-
generateHSB_B,
|
|
11
|
-
generateHSL_L,
|
|
12
|
-
} from "./color-format-gradient"
|
|
13
|
-
import type { ColorChannel } from "./types"
|
|
14
|
-
|
|
15
|
-
interface GradientOptions {
|
|
16
|
-
xChannel: ColorChannel
|
|
17
|
-
yChannel: ColorChannel
|
|
18
|
-
dir?: "rtl" | "ltr"
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
interface GradientStyles {
|
|
22
|
-
areaStyles: Record<string, string>
|
|
23
|
-
areaGradientStyles: Record<string, string>
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function getColorAreaGradient(color: Color, options: GradientOptions): GradientStyles {
|
|
27
|
-
const { xChannel, yChannel, dir: dirProp = "ltr" } = options
|
|
28
|
-
|
|
29
|
-
const { zChannel } = color.getColorAxes({ xChannel, yChannel })
|
|
30
|
-
const zValue = color.getChannelValue(zChannel)
|
|
31
|
-
|
|
32
|
-
const { minValue: zMin, maxValue: zMax } = color.getChannelRange(zChannel)
|
|
33
|
-
const orientation: [string, string] = ["top", dirProp === "rtl" ? "left" : "right"]
|
|
34
|
-
|
|
35
|
-
let dir = false
|
|
36
|
-
|
|
37
|
-
let background = { areaStyles: {}, areaGradientStyles: {} }
|
|
38
|
-
|
|
39
|
-
let alphaValue = (zValue - zMin) / (zMax - zMin)
|
|
40
|
-
let isHSL = color.getFormat() === "hsla"
|
|
41
|
-
|
|
42
|
-
switch (zChannel) {
|
|
43
|
-
case "red": {
|
|
44
|
-
dir = xChannel === "green"
|
|
45
|
-
background = generateRGB_R(orientation, dir, zValue)
|
|
46
|
-
break
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
case "green": {
|
|
50
|
-
dir = xChannel === "red"
|
|
51
|
-
background = generateRGB_G(orientation, dir, zValue)
|
|
52
|
-
break
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
case "blue": {
|
|
56
|
-
dir = xChannel === "red"
|
|
57
|
-
background = generateRGB_B(orientation, dir, zValue)
|
|
58
|
-
break
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
case "hue": {
|
|
62
|
-
dir = xChannel !== "saturation"
|
|
63
|
-
if (isHSL) {
|
|
64
|
-
background = generateHSL_H(orientation, dir, zValue)
|
|
65
|
-
} else {
|
|
66
|
-
background = generateHSB_H(orientation, dir, zValue)
|
|
67
|
-
}
|
|
68
|
-
break
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
case "saturation": {
|
|
72
|
-
dir = xChannel === "hue"
|
|
73
|
-
if (isHSL) {
|
|
74
|
-
background = generateHSL_S(orientation, dir, alphaValue)
|
|
75
|
-
} else {
|
|
76
|
-
background = generateHSB_S(orientation, dir, alphaValue)
|
|
77
|
-
}
|
|
78
|
-
break
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
case "brightness": {
|
|
82
|
-
dir = xChannel === "hue"
|
|
83
|
-
background = generateHSB_B(orientation, dir, alphaValue)
|
|
84
|
-
break
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
case "lightness": {
|
|
88
|
-
dir = xChannel === "hue"
|
|
89
|
-
background = generateHSL_L(orientation, dir, zValue)
|
|
90
|
-
break
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
return background
|
|
95
|
-
}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
2
|
-
const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
|
|
3
|
-
const result = {
|
|
4
|
-
areaStyles: {
|
|
5
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,
|
|
6
|
-
},
|
|
7
|
-
areaGradientStyles: {
|
|
8
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
|
|
9
|
-
WebkitMaskImage: maskImage,
|
|
10
|
-
maskImage,
|
|
11
|
-
},
|
|
12
|
-
}
|
|
13
|
-
return result
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
17
|
-
const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
|
|
18
|
-
const result = {
|
|
19
|
-
areaStyles: {
|
|
20
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,
|
|
21
|
-
},
|
|
22
|
-
areaGradientStyles: {
|
|
23
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
|
|
24
|
-
WebkitMaskImage: maskImage,
|
|
25
|
-
maskImage,
|
|
26
|
-
},
|
|
27
|
-
}
|
|
28
|
-
return result
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
32
|
-
const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
|
|
33
|
-
const result = {
|
|
34
|
-
areaStyles: {
|
|
35
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,
|
|
36
|
-
},
|
|
37
|
-
areaGradientStyles: {
|
|
38
|
-
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
|
|
39
|
-
WebkitMaskImage: maskImage,
|
|
40
|
-
maskImage,
|
|
41
|
-
},
|
|
42
|
-
}
|
|
43
|
-
return result
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
47
|
-
const result = {
|
|
48
|
-
areaStyles: {},
|
|
49
|
-
areaGradientStyles: {
|
|
50
|
-
background: [
|
|
51
|
-
`linear-gradient(to ${
|
|
52
|
-
orientation[Number(dir)]
|
|
53
|
-
}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
|
|
54
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
|
|
55
|
-
`hsl(${zValue}, 100%, 50%)`,
|
|
56
|
-
].join(","),
|
|
57
|
-
},
|
|
58
|
-
}
|
|
59
|
-
return result
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
|
|
63
|
-
const result = {
|
|
64
|
-
areaStyles: {},
|
|
65
|
-
areaGradientStyles: {
|
|
66
|
-
background: [
|
|
67
|
-
`linear-gradient(to ${
|
|
68
|
-
orientation[Number(!dir)]
|
|
69
|
-
}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
|
|
70
|
-
`linear-gradient(to ${
|
|
71
|
-
orientation[Number(dir)]
|
|
72
|
-
},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}))`,
|
|
73
|
-
"hsl(0, 0%, 50%)",
|
|
74
|
-
].join(","),
|
|
75
|
-
},
|
|
76
|
-
}
|
|
77
|
-
return result
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
export const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
81
|
-
const result = {
|
|
82
|
-
areaStyles: {},
|
|
83
|
-
areaGradientStyles: {
|
|
84
|
-
backgroundImage: [
|
|
85
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
|
|
86
|
-
`linear-gradient(to ${
|
|
87
|
-
orientation[Number(dir)]
|
|
88
|
-
},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}%))`,
|
|
89
|
-
].join(","),
|
|
90
|
-
},
|
|
91
|
-
}
|
|
92
|
-
return result
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
export const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {
|
|
96
|
-
const result = {
|
|
97
|
-
areaStyles: {},
|
|
98
|
-
areaGradientStyles: {
|
|
99
|
-
background: [
|
|
100
|
-
`linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
|
|
101
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
|
|
102
|
-
`hsl(${zValue}, 100%, 50%)`,
|
|
103
|
-
].join(","),
|
|
104
|
-
},
|
|
105
|
-
}
|
|
106
|
-
return result
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
|
|
110
|
-
const result = {
|
|
111
|
-
areaStyles: {},
|
|
112
|
-
areaGradientStyles: {
|
|
113
|
-
background: [
|
|
114
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
|
|
115
|
-
`linear-gradient(to ${
|
|
116
|
-
orientation[Number(dir)]
|
|
117
|
-
},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}))`,
|
|
118
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,
|
|
119
|
-
].join(","),
|
|
120
|
-
},
|
|
121
|
-
}
|
|
122
|
-
return result
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
export const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {
|
|
126
|
-
const result = {
|
|
127
|
-
areaStyles: {},
|
|
128
|
-
areaGradientStyles: {
|
|
129
|
-
background: [
|
|
130
|
-
`linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
|
|
131
|
-
`linear-gradient(to ${
|
|
132
|
-
orientation[Number(dir)]
|
|
133
|
-
},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}))`,
|
|
134
|
-
"#000",
|
|
135
|
-
].join(","),
|
|
136
|
-
},
|
|
137
|
-
}
|
|
138
|
-
return result
|
|
139
|
-
}
|
package/src/color.ts
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { clampValue, getPercentValue, getValuePercent, snapValueToStep } from "@zag-js/numeric-range"
|
|
2
|
-
import type {
|
|
3
|
-
Color2DAxes,
|
|
4
|
-
ColorAxes,
|
|
5
|
-
ColorChannel,
|
|
6
|
-
ColorChannelRange,
|
|
7
|
-
ColorFormat,
|
|
8
|
-
ColorStringFormat,
|
|
9
|
-
ColorType,
|
|
10
|
-
} from "./types"
|
|
11
|
-
|
|
12
|
-
const isEqualObject = (a: Record<string, number>, b: Record<string, number>): boolean => {
|
|
13
|
-
if (Object.keys(a).length !== Object.keys(b).length) return false
|
|
14
|
-
for (let key in a) if (a[key] !== b[key]) return false
|
|
15
|
-
return true
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export abstract class Color implements ColorType {
|
|
19
|
-
abstract toFormat(format: ColorFormat): ColorType
|
|
20
|
-
abstract toJSON(): Record<string, number>
|
|
21
|
-
abstract toString(format: ColorStringFormat): string
|
|
22
|
-
abstract clone(): ColorType
|
|
23
|
-
abstract getChannelRange(channel: ColorChannel): ColorChannelRange
|
|
24
|
-
abstract getFormat(): ColorFormat
|
|
25
|
-
abstract getChannels(): [ColorChannel, ColorChannel, ColorChannel]
|
|
26
|
-
abstract formatChannelValue(channel: ColorChannel, locale: string): string
|
|
27
|
-
|
|
28
|
-
toHexInt(): number {
|
|
29
|
-
return this.toFormat("rgba").toHexInt()
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
getChannelValue(channel: ColorChannel): number {
|
|
33
|
-
// @ts-ignore
|
|
34
|
-
if (channel in this) return this[channel]
|
|
35
|
-
throw new Error("Unsupported color channel: " + channel)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
getChannelValuePercent(channel: ColorChannel, valueToCheck?: number): number {
|
|
39
|
-
const value = valueToCheck ?? this.getChannelValue(channel)
|
|
40
|
-
const { minValue, maxValue } = this.getChannelRange(channel)
|
|
41
|
-
return getValuePercent(value, minValue, maxValue)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
getChannelPercentValue(channel: ColorChannel, percentToCheck: number): number {
|
|
45
|
-
const { minValue, maxValue, step } = this.getChannelRange(channel)
|
|
46
|
-
const percentValue = getPercentValue(percentToCheck, minValue, maxValue, step)
|
|
47
|
-
return snapValueToStep(percentValue, minValue, maxValue, step)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
withChannelValue(channel: ColorChannel, value: number): ColorType {
|
|
51
|
-
const { minValue, maxValue } = this.getChannelRange(channel)
|
|
52
|
-
if (channel in this) {
|
|
53
|
-
let clone = this.clone()
|
|
54
|
-
// @ts-ignore
|
|
55
|
-
clone[channel] = clampValue(value, minValue, maxValue)
|
|
56
|
-
return clone
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
throw new Error("Unsupported color channel: " + channel)
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
getColorAxes(xyChannels: Color2DAxes): ColorAxes {
|
|
63
|
-
let { xChannel, yChannel } = xyChannels
|
|
64
|
-
let xCh = xChannel || this.getChannels().find((c) => c !== yChannel)
|
|
65
|
-
let yCh = yChannel || this.getChannels().find((c) => c !== xCh)
|
|
66
|
-
let zCh = this.getChannels().find((c) => c !== xCh && c !== yCh)
|
|
67
|
-
return { xChannel: xCh!, yChannel: yCh!, zChannel: zCh! }
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
incrementChannel(channel: ColorChannel, stepSize: number): ColorType {
|
|
71
|
-
const { minValue, maxValue, step } = this.getChannelRange(channel)
|
|
72
|
-
const value = snapValueToStep(
|
|
73
|
-
clampValue(this.getChannelValue(channel) + stepSize, minValue, maxValue),
|
|
74
|
-
minValue,
|
|
75
|
-
maxValue,
|
|
76
|
-
step,
|
|
77
|
-
)
|
|
78
|
-
return this.withChannelValue(channel, value)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
decrementChannel(channel: ColorChannel, stepSize: number): ColorType {
|
|
82
|
-
return this.incrementChannel(channel, -stepSize)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
isEqual(color: ColorType): boolean {
|
|
86
|
-
const isSame = isEqualObject(this.toJSON(), color.toJSON())
|
|
87
|
-
return isSame && this.getChannelValue("alpha") === color.getChannelValue("alpha")
|
|
88
|
-
}
|
|
89
|
-
}
|
package/src/hsb-color.ts
DELETED
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
import { clampValue, mod, toFixedNumber } from "@zag-js/numeric-range"
|
|
2
|
-
import { Color } from "./color"
|
|
3
|
-
import { HSLColor } from "./hsl-color"
|
|
4
|
-
import { RGBColor } from "./rgb-color"
|
|
5
|
-
import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
|
|
6
|
-
|
|
7
|
-
const HSB_REGEX =
|
|
8
|
-
/hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/
|
|
9
|
-
|
|
10
|
-
export class HSBColor extends Color {
|
|
11
|
-
constructor(
|
|
12
|
-
private hue: number,
|
|
13
|
-
private saturation: number,
|
|
14
|
-
private brightness: number,
|
|
15
|
-
private alpha: number,
|
|
16
|
-
) {
|
|
17
|
-
super()
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
static parse(value: string): HSBColor | void {
|
|
21
|
-
let m: RegExpMatchArray | null
|
|
22
|
-
if ((m = value.match(HSB_REGEX))) {
|
|
23
|
-
const [h, s, b, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")))
|
|
24
|
-
return new HSBColor(mod(h, 360), clampValue(s, 0, 100), clampValue(b, 0, 100), clampValue(a ?? 1, 0, 1))
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
toString(format: ColorStringFormat) {
|
|
29
|
-
switch (format) {
|
|
30
|
-
case "css":
|
|
31
|
-
return this.toHSL().toString("css")
|
|
32
|
-
case "hex":
|
|
33
|
-
return this.toRGB().toString("hex")
|
|
34
|
-
case "hexa":
|
|
35
|
-
return this.toRGB().toString("hexa")
|
|
36
|
-
case "hsb":
|
|
37
|
-
return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`
|
|
38
|
-
case "hsba":
|
|
39
|
-
return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${
|
|
40
|
-
this.alpha
|
|
41
|
-
})`
|
|
42
|
-
case "hsl":
|
|
43
|
-
return this.toHSL().toString("hsl")
|
|
44
|
-
case "rgb":
|
|
45
|
-
return this.toRGB().toString("rgb")
|
|
46
|
-
default:
|
|
47
|
-
return this.toFormat(format).toString(format)
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
toFormat(format: ColorFormat): ColorType {
|
|
52
|
-
switch (format) {
|
|
53
|
-
case "hsba":
|
|
54
|
-
return this
|
|
55
|
-
case "hsla":
|
|
56
|
-
return this.toHSL()
|
|
57
|
-
case "rgba":
|
|
58
|
-
return this.toRGB()
|
|
59
|
-
default:
|
|
60
|
-
throw new Error("Unsupported color conversion: hsb -> " + format)
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Converts a HSB color to HSL.
|
|
66
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
|
|
67
|
-
* @returns An HSLColor object.
|
|
68
|
-
*/
|
|
69
|
-
private toHSL(): ColorType {
|
|
70
|
-
let saturation = this.saturation / 100
|
|
71
|
-
let brightness = this.brightness / 100
|
|
72
|
-
let lightness = brightness * (1 - saturation / 2)
|
|
73
|
-
saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness)
|
|
74
|
-
|
|
75
|
-
return new HSLColor(
|
|
76
|
-
toFixedNumber(this.hue, 2),
|
|
77
|
-
toFixedNumber(saturation * 100, 2),
|
|
78
|
-
toFixedNumber(lightness * 100, 2),
|
|
79
|
-
toFixedNumber(this.alpha, 2),
|
|
80
|
-
)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Converts a HSV color value to RGB.
|
|
85
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
|
|
86
|
-
* @returns An RGBColor object.
|
|
87
|
-
*/
|
|
88
|
-
private toRGB(): ColorType {
|
|
89
|
-
let hue = this.hue
|
|
90
|
-
let saturation = this.saturation / 100
|
|
91
|
-
let brightness = this.brightness / 100
|
|
92
|
-
|
|
93
|
-
let fn = (n: number, k = (n + hue / 60) % 6) =>
|
|
94
|
-
brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0)
|
|
95
|
-
|
|
96
|
-
return new RGBColor(
|
|
97
|
-
Math.round(fn(5) * 255),
|
|
98
|
-
Math.round(fn(3) * 255),
|
|
99
|
-
Math.round(fn(1) * 255),
|
|
100
|
-
toFixedNumber(this.alpha, 2),
|
|
101
|
-
)
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
clone(): ColorType {
|
|
105
|
-
return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha)
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
|
|
109
|
-
switch (channel) {
|
|
110
|
-
case "hue":
|
|
111
|
-
return { style: "unit", unit: "degree", unitDisplay: "narrow" }
|
|
112
|
-
case "saturation":
|
|
113
|
-
case "brightness":
|
|
114
|
-
case "alpha":
|
|
115
|
-
return { style: "percent" }
|
|
116
|
-
default:
|
|
117
|
-
throw new Error("Unknown color channel: " + channel)
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
formatChannelValue(channel: ColorChannel, locale: string) {
|
|
122
|
-
let options = this.getChannelFormatOptions(channel)
|
|
123
|
-
let value = this.getChannelValue(channel)
|
|
124
|
-
if (channel === "saturation" || channel === "brightness") {
|
|
125
|
-
value /= 100
|
|
126
|
-
}
|
|
127
|
-
return new Intl.NumberFormat(locale, options).format(value)
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
getChannelRange(channel: ColorChannel): ColorChannelRange {
|
|
131
|
-
switch (channel) {
|
|
132
|
-
case "hue":
|
|
133
|
-
return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 }
|
|
134
|
-
case "saturation":
|
|
135
|
-
case "brightness":
|
|
136
|
-
return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 }
|
|
137
|
-
case "alpha":
|
|
138
|
-
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }
|
|
139
|
-
default:
|
|
140
|
-
throw new Error("Unknown color channel: " + channel)
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
toJSON(): Record<"h" | "s" | "b" | "a", number> {
|
|
145
|
-
return { h: this.hue, s: this.saturation, b: this.brightness, a: this.alpha }
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
getFormat(): ColorFormat {
|
|
149
|
-
return "hsba"
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ["hue", "saturation", "brightness"]
|
|
153
|
-
|
|
154
|
-
getChannels(): [ColorChannel, ColorChannel, ColorChannel] {
|
|
155
|
-
return HSBColor.colorChannels
|
|
156
|
-
}
|
|
157
|
-
}
|