@zag-js/color-utils 0.10.2 → 0.10.4
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/color.d.ts +2 -5
- package/dist/color.js +7 -30
- package/dist/color.mjs +31 -7
- package/dist/hsb-color.d.ts +3 -6
- package/dist/hsb-color.js +22 -351
- package/dist/hsb-color.mjs +107 -9
- package/dist/hsl-color.d.ts +4 -7
- package/dist/hsl-color.js +23 -353
- package/dist/hsl-color.mjs +107 -11
- package/dist/index.d.ts +3 -3
- package/dist/index.js +7 -455
- package/dist/index.mjs +2 -15
- package/dist/parse-color.d.ts +3 -6
- package/dist/parse-color.js +9 -442
- package/dist/parse-color.mjs +20 -12
- package/dist/rgb-color.d.ts +3 -6
- package/dist/rgb-color.js +23 -297
- package/dist/rgb-color.mjs +162 -9
- package/dist/types.d.ts +5 -7
- package/dist/utils.d.ts +3 -5
- package/dist/utils.js +7 -32
- package/dist/utils.mjs +11 -11
- package/package.json +2 -7
- package/dist/chunk-7VB2GGWQ.mjs +0 -382
- package/dist/chunk-NHABU752.mjs +0 -10
- package/dist/chunk-NSR5W5ST.mjs +0 -34
- package/dist/chunk-TXOVH6IE.mjs +0 -16
- package/dist/chunk-WWI4IDFU.mjs +0 -26
- package/dist/types.js +0 -18
- package/dist/types.mjs +0 -0
package/dist/rgb-color.js
CHANGED
|
@@ -1,284 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
|
|
20
|
-
var __publicField = (obj, key, value) => {
|
|
21
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
22
|
-
return value;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
// src/rgb-color.ts
|
|
26
|
-
var rgb_color_exports = {};
|
|
27
|
-
__export(rgb_color_exports, {
|
|
28
|
-
RGBColor: () => RGBColor
|
|
29
|
-
});
|
|
30
|
-
module.exports = __toCommonJS(rgb_color_exports);
|
|
1
|
+
'use strict';
|
|
31
2
|
|
|
32
|
-
|
|
33
|
-
var Color = class {
|
|
34
|
-
toHexInt() {
|
|
35
|
-
return this.toFormat("rgb").toHexInt();
|
|
36
|
-
}
|
|
37
|
-
getChannelValue(channel) {
|
|
38
|
-
if (channel in this) {
|
|
39
|
-
return this[channel];
|
|
40
|
-
}
|
|
41
|
-
throw new Error("Unsupported color channel: " + channel);
|
|
42
|
-
}
|
|
43
|
-
withChannelValue(channel, value) {
|
|
44
|
-
if (channel in this) {
|
|
45
|
-
let clone = this.clone();
|
|
46
|
-
clone[channel] = value;
|
|
47
|
-
return clone;
|
|
48
|
-
}
|
|
49
|
-
throw new Error("Unsupported color channel: " + channel);
|
|
50
|
-
}
|
|
51
|
-
getColorSpaceAxes(xyChannels) {
|
|
52
|
-
let { xChannel, yChannel } = xyChannels;
|
|
53
|
-
let xCh = xChannel || this.getColorChannels().find((c) => c !== yChannel);
|
|
54
|
-
let yCh = yChannel || this.getColorChannels().find((c) => c !== xCh);
|
|
55
|
-
let zCh = this.getColorChannels().find((c) => c !== xCh && c !== yCh);
|
|
56
|
-
return { xChannel: xCh, yChannel: yCh, zChannel: zCh };
|
|
57
|
-
}
|
|
58
|
-
isEqual(color) {
|
|
59
|
-
return this.toHexInt() === color.toHexInt();
|
|
60
|
-
}
|
|
61
|
-
};
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
62
4
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
function toFixedNumber(num, digits) {
|
|
68
|
-
return Math.round(Math.pow(10, digits) * num) / Math.pow(10, digits);
|
|
69
|
-
}
|
|
70
|
-
function clampValue(value, min, max) {
|
|
71
|
-
return Math.min(Math.max(value, min), max);
|
|
72
|
-
}
|
|
5
|
+
const color = require('./color.js');
|
|
6
|
+
const hsbColor = require('./hsb-color.js');
|
|
7
|
+
const hslColor = require('./hsl-color.js');
|
|
8
|
+
const utils = require('./utils.js');
|
|
73
9
|
|
|
74
|
-
|
|
75
|
-
var HSL_REGEX = /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+)?)\)/;
|
|
76
|
-
var _HSLColor = class extends Color {
|
|
77
|
-
constructor(hue, saturation, lightness, alpha) {
|
|
78
|
-
super();
|
|
79
|
-
this.hue = hue;
|
|
80
|
-
this.saturation = saturation;
|
|
81
|
-
this.lightness = lightness;
|
|
82
|
-
this.alpha = alpha;
|
|
83
|
-
}
|
|
84
|
-
static parse(value) {
|
|
85
|
-
let m;
|
|
86
|
-
if (m = value.match(HSL_REGEX)) {
|
|
87
|
-
const [h, s, l, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
|
|
88
|
-
return new _HSLColor(mod(h, 360), clampValue(s, 0, 100), clampValue(l, 0, 100), clampValue(a ?? 1, 0, 1));
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
toString(format) {
|
|
92
|
-
switch (format) {
|
|
93
|
-
case "hex":
|
|
94
|
-
return this.toRGB().toString("hex");
|
|
95
|
-
case "hexa":
|
|
96
|
-
return this.toRGB().toString("hexa");
|
|
97
|
-
case "hsl":
|
|
98
|
-
return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
|
|
99
|
-
case "css":
|
|
100
|
-
case "hsla":
|
|
101
|
-
return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
|
|
102
|
-
default:
|
|
103
|
-
return this.toFormat(format).toString(format);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
toFormat(format) {
|
|
107
|
-
switch (format) {
|
|
108
|
-
case "hsl":
|
|
109
|
-
case "hsla":
|
|
110
|
-
return this;
|
|
111
|
-
case "hsb":
|
|
112
|
-
case "hsba":
|
|
113
|
-
return this.toHSB();
|
|
114
|
-
case "rgb":
|
|
115
|
-
case "rgba":
|
|
116
|
-
return this.toRGB();
|
|
117
|
-
default:
|
|
118
|
-
throw new Error("Unsupported color conversion: hsl -> " + format);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* Converts a HSL color to HSB.
|
|
123
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
|
|
124
|
-
* @returns An HSBColor object.
|
|
125
|
-
*/
|
|
126
|
-
toHSB() {
|
|
127
|
-
let saturation = this.saturation / 100;
|
|
128
|
-
let lightness = this.lightness / 100;
|
|
129
|
-
let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
|
|
130
|
-
saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
|
|
131
|
-
return new HSBColor(
|
|
132
|
-
toFixedNumber(this.hue, 2),
|
|
133
|
-
toFixedNumber(saturation * 100, 2),
|
|
134
|
-
toFixedNumber(brightness * 100, 2),
|
|
135
|
-
this.alpha
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Converts a HSL color to RGB.
|
|
140
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
|
|
141
|
-
* @returns An RGBColor object.
|
|
142
|
-
*/
|
|
143
|
-
toRGB() {
|
|
144
|
-
let hue = this.hue;
|
|
145
|
-
let saturation = this.saturation / 100;
|
|
146
|
-
let lightness = this.lightness / 100;
|
|
147
|
-
let a = saturation * Math.min(lightness, 1 - lightness);
|
|
148
|
-
let fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
149
|
-
return new RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
|
|
150
|
-
}
|
|
151
|
-
clone() {
|
|
152
|
-
return new _HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
|
|
153
|
-
}
|
|
154
|
-
getChannelRange(channel) {
|
|
155
|
-
switch (channel) {
|
|
156
|
-
case "hue":
|
|
157
|
-
return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
|
|
158
|
-
case "saturation":
|
|
159
|
-
case "lightness":
|
|
160
|
-
return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
|
|
161
|
-
case "alpha":
|
|
162
|
-
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
163
|
-
default:
|
|
164
|
-
throw new Error("Unknown color channel: " + channel);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
getColorSpace() {
|
|
168
|
-
return "hsl";
|
|
169
|
-
}
|
|
170
|
-
getColorChannels() {
|
|
171
|
-
return _HSLColor.colorChannels;
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
var HSLColor = _HSLColor;
|
|
175
|
-
__publicField(HSLColor, "colorChannels", ["hue", "saturation", "lightness"]);
|
|
176
|
-
|
|
177
|
-
// src/hsb-color.ts
|
|
178
|
-
var HSB_REGEX = /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+)?)\)/;
|
|
179
|
-
var _HSBColor = class extends Color {
|
|
180
|
-
constructor(hue, saturation, brightness, alpha) {
|
|
181
|
-
super();
|
|
182
|
-
this.hue = hue;
|
|
183
|
-
this.saturation = saturation;
|
|
184
|
-
this.brightness = brightness;
|
|
185
|
-
this.alpha = alpha;
|
|
186
|
-
}
|
|
187
|
-
static parse(value) {
|
|
188
|
-
let m;
|
|
189
|
-
if (m = value.match(HSB_REGEX)) {
|
|
190
|
-
const [h, s, b, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
|
|
191
|
-
return new _HSBColor(mod(h, 360), clampValue(s, 0, 100), clampValue(b, 0, 100), clampValue(a ?? 1, 0, 1));
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
toString(format) {
|
|
195
|
-
switch (format) {
|
|
196
|
-
case "css":
|
|
197
|
-
return this.toHSL().toString("css");
|
|
198
|
-
case "hex":
|
|
199
|
-
return this.toRGB().toString("hex");
|
|
200
|
-
case "hexa":
|
|
201
|
-
return this.toRGB().toString("hexa");
|
|
202
|
-
case "hsb":
|
|
203
|
-
return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`;
|
|
204
|
-
case "hsba":
|
|
205
|
-
return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
|
|
206
|
-
default:
|
|
207
|
-
return this.toFormat(format).toString(format);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
toFormat(format) {
|
|
211
|
-
switch (format) {
|
|
212
|
-
case "hsb":
|
|
213
|
-
case "hsba":
|
|
214
|
-
return this;
|
|
215
|
-
case "hsl":
|
|
216
|
-
case "hsla":
|
|
217
|
-
return this.toHSL();
|
|
218
|
-
case "rgb":
|
|
219
|
-
case "rgba":
|
|
220
|
-
return this.toRGB();
|
|
221
|
-
default:
|
|
222
|
-
throw new Error("Unsupported color conversion: hsb -> " + format);
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
/**
|
|
226
|
-
* Converts a HSB color to HSL.
|
|
227
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
|
|
228
|
-
* @returns An HSLColor object.
|
|
229
|
-
*/
|
|
230
|
-
toHSL() {
|
|
231
|
-
let saturation = this.saturation / 100;
|
|
232
|
-
let brightness = this.brightness / 100;
|
|
233
|
-
let lightness = brightness * (1 - saturation / 2);
|
|
234
|
-
saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
|
|
235
|
-
return new HSLColor(
|
|
236
|
-
toFixedNumber(this.hue, 2),
|
|
237
|
-
toFixedNumber(saturation * 100, 2),
|
|
238
|
-
toFixedNumber(lightness * 100, 2),
|
|
239
|
-
this.alpha
|
|
240
|
-
);
|
|
241
|
-
}
|
|
242
|
-
/**
|
|
243
|
-
* Converts a HSV color value to RGB.
|
|
244
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
|
|
245
|
-
* @returns An RGBColor object.
|
|
246
|
-
*/
|
|
247
|
-
toRGB() {
|
|
248
|
-
let hue = this.hue;
|
|
249
|
-
let saturation = this.saturation / 100;
|
|
250
|
-
let brightness = this.brightness / 100;
|
|
251
|
-
let fn = (n, k = (n + hue / 60) % 6) => brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
|
|
252
|
-
return new RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
|
|
253
|
-
}
|
|
254
|
-
clone() {
|
|
255
|
-
return new _HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
|
|
256
|
-
}
|
|
257
|
-
getChannelRange(channel) {
|
|
258
|
-
switch (channel) {
|
|
259
|
-
case "hue":
|
|
260
|
-
return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
|
|
261
|
-
case "saturation":
|
|
262
|
-
case "brightness":
|
|
263
|
-
return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
|
|
264
|
-
case "alpha":
|
|
265
|
-
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
266
|
-
default:
|
|
267
|
-
throw new Error("Unknown color channel: " + channel);
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
getColorSpace() {
|
|
271
|
-
return "hsb";
|
|
272
|
-
}
|
|
273
|
-
getColorChannels() {
|
|
274
|
-
return _HSBColor.colorChannels;
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
var HSBColor = _HSBColor;
|
|
278
|
-
__publicField(HSBColor, "colorChannels", ["hue", "saturation", "brightness"]);
|
|
279
|
-
|
|
280
|
-
// src/rgb-color.ts
|
|
281
|
-
var _RGBColor = class extends Color {
|
|
10
|
+
class RGBColor extends color.Color {
|
|
282
11
|
constructor(red, green, blue, alpha) {
|
|
283
12
|
super();
|
|
284
13
|
this.red = red;
|
|
@@ -297,9 +26,9 @@ var _RGBColor = class extends Color {
|
|
|
297
26
|
}
|
|
298
27
|
const match = value.match(/^rgba?\((.*)\)$/);
|
|
299
28
|
if (match?.[1]) {
|
|
300
|
-
colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1));
|
|
29
|
+
colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => utils.clampValue(num, 0, i < 3 ? 255 : 1));
|
|
301
30
|
}
|
|
302
|
-
return colors.length < 3 ? void 0 : new
|
|
31
|
+
return colors.length < 3 ? void 0 : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
|
|
303
32
|
}
|
|
304
33
|
toString(format) {
|
|
305
34
|
switch (format) {
|
|
@@ -364,10 +93,10 @@ var _RGBColor = class extends Color {
|
|
|
364
93
|
}
|
|
365
94
|
hue /= 6;
|
|
366
95
|
}
|
|
367
|
-
return new HSBColor(
|
|
368
|
-
toFixedNumber(hue * 360, 2),
|
|
369
|
-
toFixedNumber(saturation * 100, 2),
|
|
370
|
-
toFixedNumber(brightness * 100, 2),
|
|
96
|
+
return new hsbColor.HSBColor(
|
|
97
|
+
utils.toFixedNumber(hue * 360, 2),
|
|
98
|
+
utils.toFixedNumber(saturation * 100, 2),
|
|
99
|
+
utils.toFixedNumber(brightness * 100, 2),
|
|
371
100
|
this.alpha
|
|
372
101
|
);
|
|
373
102
|
}
|
|
@@ -403,15 +132,15 @@ var _RGBColor = class extends Color {
|
|
|
403
132
|
}
|
|
404
133
|
hue /= 6;
|
|
405
134
|
}
|
|
406
|
-
return new HSLColor(
|
|
407
|
-
toFixedNumber(hue * 360, 2),
|
|
408
|
-
toFixedNumber(saturation * 100, 2),
|
|
409
|
-
toFixedNumber(lightness * 100, 2),
|
|
135
|
+
return new hslColor.HSLColor(
|
|
136
|
+
utils.toFixedNumber(hue * 360, 2),
|
|
137
|
+
utils.toFixedNumber(saturation * 100, 2),
|
|
138
|
+
utils.toFixedNumber(lightness * 100, 2),
|
|
410
139
|
this.alpha
|
|
411
140
|
);
|
|
412
141
|
}
|
|
413
142
|
clone() {
|
|
414
|
-
return new
|
|
143
|
+
return new RGBColor(this.red, this.green, this.blue, this.alpha);
|
|
415
144
|
}
|
|
416
145
|
getChannelRange(channel) {
|
|
417
146
|
switch (channel) {
|
|
@@ -428,13 +157,10 @@ var _RGBColor = class extends Color {
|
|
|
428
157
|
getColorSpace() {
|
|
429
158
|
return "rgb";
|
|
430
159
|
}
|
|
160
|
+
static colorChannels = ["red", "green", "blue"];
|
|
431
161
|
getColorChannels() {
|
|
432
|
-
return
|
|
162
|
+
return RGBColor.colorChannels;
|
|
433
163
|
}
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
438
|
-
0 && (module.exports = {
|
|
439
|
-
RGBColor
|
|
440
|
-
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
exports.RGBColor = RGBColor;
|
package/dist/rgb-color.mjs
CHANGED
|
@@ -1,9 +1,162 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { Color } from './color.mjs';
|
|
2
|
+
import { HSBColor } from './hsb-color.mjs';
|
|
3
|
+
import { HSLColor } from './hsl-color.mjs';
|
|
4
|
+
import { clampValue, toFixedNumber } from './utils.mjs';
|
|
5
|
+
|
|
6
|
+
class RGBColor extends Color {
|
|
7
|
+
constructor(red, green, blue, alpha) {
|
|
8
|
+
super();
|
|
9
|
+
this.red = red;
|
|
10
|
+
this.green = green;
|
|
11
|
+
this.blue = blue;
|
|
12
|
+
this.alpha = alpha;
|
|
13
|
+
}
|
|
14
|
+
static parse(value) {
|
|
15
|
+
let colors = [];
|
|
16
|
+
if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {
|
|
17
|
+
const values = (value.length < 6 ? value.replace(/[^#]/gi, "$&$&") : value).slice(1).split("");
|
|
18
|
+
while (values.length > 0) {
|
|
19
|
+
colors.push(parseInt(values.splice(0, 2).join(""), 16));
|
|
20
|
+
}
|
|
21
|
+
colors[3] = colors[3] !== void 0 ? colors[3] / 255 : void 0;
|
|
22
|
+
}
|
|
23
|
+
const match = value.match(/^rgba?\((.*)\)$/);
|
|
24
|
+
if (match?.[1]) {
|
|
25
|
+
colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1));
|
|
26
|
+
}
|
|
27
|
+
return colors.length < 3 ? void 0 : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
|
|
28
|
+
}
|
|
29
|
+
toString(format) {
|
|
30
|
+
switch (format) {
|
|
31
|
+
case "hex":
|
|
32
|
+
return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
|
|
33
|
+
case "hexa":
|
|
34
|
+
return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0") + Math.round(this.alpha * 255).toString(16).padStart(2, "0")).toUpperCase();
|
|
35
|
+
case "rgb":
|
|
36
|
+
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
|
|
37
|
+
case "css":
|
|
38
|
+
case "rgba":
|
|
39
|
+
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
|
|
40
|
+
default:
|
|
41
|
+
return this.toFormat(format).toString(format);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
toFormat(format) {
|
|
45
|
+
switch (format) {
|
|
46
|
+
case "hex":
|
|
47
|
+
case "hexa":
|
|
48
|
+
case "rgb":
|
|
49
|
+
case "rgba":
|
|
50
|
+
return this;
|
|
51
|
+
case "hsb":
|
|
52
|
+
case "hsba":
|
|
53
|
+
return this.toHSB();
|
|
54
|
+
case "hsl":
|
|
55
|
+
case "hsla":
|
|
56
|
+
return this.toHSL();
|
|
57
|
+
default:
|
|
58
|
+
throw new Error("Unsupported color conversion: rgb -> " + format);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
toHexInt() {
|
|
62
|
+
return this.red << 16 | this.green << 8 | this.blue;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Converts an RGB color value to HSB.
|
|
66
|
+
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
|
|
67
|
+
* @returns An HSBColor object.
|
|
68
|
+
*/
|
|
69
|
+
toHSB() {
|
|
70
|
+
const red = this.red / 255;
|
|
71
|
+
const green = this.green / 255;
|
|
72
|
+
const blue = this.blue / 255;
|
|
73
|
+
const min = Math.min(red, green, blue);
|
|
74
|
+
const brightness = Math.max(red, green, blue);
|
|
75
|
+
const chroma = brightness - min;
|
|
76
|
+
const saturation = brightness === 0 ? 0 : chroma / brightness;
|
|
77
|
+
let hue = 0;
|
|
78
|
+
if (chroma !== 0) {
|
|
79
|
+
switch (brightness) {
|
|
80
|
+
case red:
|
|
81
|
+
hue = (green - blue) / chroma + (green < blue ? 6 : 0);
|
|
82
|
+
break;
|
|
83
|
+
case green:
|
|
84
|
+
hue = (blue - red) / chroma + 2;
|
|
85
|
+
break;
|
|
86
|
+
case blue:
|
|
87
|
+
hue = (red - green) / chroma + 4;
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
hue /= 6;
|
|
91
|
+
}
|
|
92
|
+
return new HSBColor(
|
|
93
|
+
toFixedNumber(hue * 360, 2),
|
|
94
|
+
toFixedNumber(saturation * 100, 2),
|
|
95
|
+
toFixedNumber(brightness * 100, 2),
|
|
96
|
+
this.alpha
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Converts an RGB color value to HSL.
|
|
101
|
+
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
|
|
102
|
+
* @returns An HSLColor object.
|
|
103
|
+
*/
|
|
104
|
+
toHSL() {
|
|
105
|
+
const red = this.red / 255;
|
|
106
|
+
const green = this.green / 255;
|
|
107
|
+
const blue = this.blue / 255;
|
|
108
|
+
const min = Math.min(red, green, blue);
|
|
109
|
+
const max = Math.max(red, green, blue);
|
|
110
|
+
const lightness = (max + min) / 2;
|
|
111
|
+
const chroma = max - min;
|
|
112
|
+
let hue = -1;
|
|
113
|
+
let saturation = -1;
|
|
114
|
+
if (chroma === 0) {
|
|
115
|
+
hue = saturation = 0;
|
|
116
|
+
} else {
|
|
117
|
+
saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min);
|
|
118
|
+
switch (max) {
|
|
119
|
+
case red:
|
|
120
|
+
hue = (green - blue) / chroma + (green < blue ? 6 : 0);
|
|
121
|
+
break;
|
|
122
|
+
case green:
|
|
123
|
+
hue = (blue - red) / chroma + 2;
|
|
124
|
+
break;
|
|
125
|
+
case blue:
|
|
126
|
+
hue = (red - green) / chroma + 4;
|
|
127
|
+
break;
|
|
128
|
+
}
|
|
129
|
+
hue /= 6;
|
|
130
|
+
}
|
|
131
|
+
return new HSLColor(
|
|
132
|
+
toFixedNumber(hue * 360, 2),
|
|
133
|
+
toFixedNumber(saturation * 100, 2),
|
|
134
|
+
toFixedNumber(lightness * 100, 2),
|
|
135
|
+
this.alpha
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
clone() {
|
|
139
|
+
return new RGBColor(this.red, this.green, this.blue, this.alpha);
|
|
140
|
+
}
|
|
141
|
+
getChannelRange(channel) {
|
|
142
|
+
switch (channel) {
|
|
143
|
+
case "red":
|
|
144
|
+
case "green":
|
|
145
|
+
case "blue":
|
|
146
|
+
return { minValue: 0, maxValue: 255, step: 1, pageSize: 17 };
|
|
147
|
+
case "alpha":
|
|
148
|
+
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
149
|
+
default:
|
|
150
|
+
throw new Error("Unknown color channel: " + channel);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
getColorSpace() {
|
|
154
|
+
return "rgb";
|
|
155
|
+
}
|
|
156
|
+
static colorChannels = ["red", "green", "blue"];
|
|
157
|
+
getColorChannels() {
|
|
158
|
+
return RGBColor.colorChannels;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export { RGBColor };
|
package/dist/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba";
|
|
2
|
-
type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
|
|
3
|
-
type ColorAxes = {
|
|
1
|
+
export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba";
|
|
2
|
+
export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
|
|
3
|
+
export type ColorAxes = {
|
|
4
4
|
xChannel: ColorChannel;
|
|
5
5
|
yChannel: ColorChannel;
|
|
6
6
|
zChannel: ColorChannel;
|
|
7
7
|
};
|
|
8
|
-
interface ColorChannelRange {
|
|
8
|
+
export interface ColorChannelRange {
|
|
9
9
|
/** The minimum value of the color channel. */
|
|
10
10
|
minValue: number;
|
|
11
11
|
/** The maximum value of the color channel. */
|
|
@@ -15,7 +15,7 @@ interface ColorChannelRange {
|
|
|
15
15
|
/** The page step value of the color channel, used when incrementing and decrementing. */
|
|
16
16
|
pageSize: number;
|
|
17
17
|
}
|
|
18
|
-
interface ColorType {
|
|
18
|
+
export interface ColorType {
|
|
19
19
|
/** Converts the color to the given color format, and returns a new Color object. */
|
|
20
20
|
toFormat(format: ColorFormat): ColorType;
|
|
21
21
|
/** Converts the color to a string in the given format. */
|
|
@@ -60,5 +60,3 @@ interface ColorType {
|
|
|
60
60
|
*/
|
|
61
61
|
isEqual(color: ColorType): boolean;
|
|
62
62
|
}
|
|
63
|
-
|
|
64
|
-
export { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorType };
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
declare function mod(n: number, m: number): number;
|
|
2
|
-
declare function toFixedNumber(num: number, digits: number): number;
|
|
3
|
-
declare function clampValue(value: number, min: number, max: number): number;
|
|
4
|
-
|
|
5
|
-
export { clampValue, mod, toFixedNumber };
|
|
1
|
+
export declare function mod(n: number, m: number): number;
|
|
2
|
+
export declare function toFixedNumber(num: number, digits: number): number;
|
|
3
|
+
export declare function clampValue(value: number, min: number, max: number): number;
|
package/dist/utils.js
CHANGED
|
@@ -1,30 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
19
4
|
|
|
20
|
-
// src/utils.ts
|
|
21
|
-
var utils_exports = {};
|
|
22
|
-
__export(utils_exports, {
|
|
23
|
-
clampValue: () => clampValue,
|
|
24
|
-
mod: () => mod,
|
|
25
|
-
toFixedNumber: () => toFixedNumber
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(utils_exports);
|
|
28
5
|
function mod(n, m) {
|
|
29
6
|
return (n % m + m) % m;
|
|
30
7
|
}
|
|
@@ -34,9 +11,7 @@ function toFixedNumber(num, digits) {
|
|
|
34
11
|
function clampValue(value, min, max) {
|
|
35
12
|
return Math.min(Math.max(value, min), max);
|
|
36
13
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
toFixedNumber
|
|
42
|
-
});
|
|
14
|
+
|
|
15
|
+
exports.clampValue = clampValue;
|
|
16
|
+
exports.mod = mod;
|
|
17
|
+
exports.toFixedNumber = toFixedNumber;
|
package/dist/utils.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
1
|
+
function mod(n, m) {
|
|
2
|
+
return (n % m + m) % m;
|
|
3
|
+
}
|
|
4
|
+
function toFixedNumber(num, digits) {
|
|
5
|
+
return Math.round(Math.pow(10, digits) * num) / Math.pow(10, digits);
|
|
6
|
+
}
|
|
7
|
+
function clampValue(value, min, max) {
|
|
8
|
+
return Math.min(Math.max(value, min), max);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { clampValue, mod, toFixedNumber };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/color-utils",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.4",
|
|
4
4
|
"description": "Color utilities for zag.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -38,13 +38,8 @@
|
|
|
38
38
|
"./package.json": "./package.json"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build
|
|
42
|
-
"start": "pnpm build --watch",
|
|
43
|
-
"build": "tsup src --dts",
|
|
44
|
-
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
41
|
+
"build": "vite build -c ../../../vite.config.ts",
|
|
45
42
|
"lint": "eslint src --ext .ts,.tsx",
|
|
46
|
-
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
-
"test-watch": "pnpm test --watch -u",
|
|
48
43
|
"typecheck": "tsc --noEmit"
|
|
49
44
|
}
|
|
50
45
|
}
|