@zag-js/color-utils 0.10.2 → 0.10.3
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/hsl-color.js
CHANGED
|
@@ -1,341 +1,14 @@
|
|
|
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/hsl-color.ts
|
|
26
|
-
var hsl_color_exports = {};
|
|
27
|
-
__export(hsl_color_exports, {
|
|
28
|
-
HSLColor: () => HSLColor,
|
|
29
|
-
HSL_REGEX: () => HSL_REGEX
|
|
30
|
-
});
|
|
31
|
-
module.exports = __toCommonJS(hsl_color_exports);
|
|
32
|
-
|
|
33
|
-
// src/color.ts
|
|
34
|
-
var Color = class {
|
|
35
|
-
toHexInt() {
|
|
36
|
-
return this.toFormat("rgb").toHexInt();
|
|
37
|
-
}
|
|
38
|
-
getChannelValue(channel) {
|
|
39
|
-
if (channel in this) {
|
|
40
|
-
return this[channel];
|
|
41
|
-
}
|
|
42
|
-
throw new Error("Unsupported color channel: " + channel);
|
|
43
|
-
}
|
|
44
|
-
withChannelValue(channel, value) {
|
|
45
|
-
if (channel in this) {
|
|
46
|
-
let clone = this.clone();
|
|
47
|
-
clone[channel] = value;
|
|
48
|
-
return clone;
|
|
49
|
-
}
|
|
50
|
-
throw new Error("Unsupported color channel: " + channel);
|
|
51
|
-
}
|
|
52
|
-
getColorSpaceAxes(xyChannels) {
|
|
53
|
-
let { xChannel, yChannel } = xyChannels;
|
|
54
|
-
let xCh = xChannel || this.getColorChannels().find((c) => c !== yChannel);
|
|
55
|
-
let yCh = yChannel || this.getColorChannels().find((c) => c !== xCh);
|
|
56
|
-
let zCh = this.getColorChannels().find((c) => c !== xCh && c !== yCh);
|
|
57
|
-
return { xChannel: xCh, yChannel: yCh, zChannel: zCh };
|
|
58
|
-
}
|
|
59
|
-
isEqual(color) {
|
|
60
|
-
return this.toHexInt() === color.toHexInt();
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// src/utils.ts
|
|
65
|
-
function mod(n, m) {
|
|
66
|
-
return (n % m + m) % m;
|
|
67
|
-
}
|
|
68
|
-
function toFixedNumber(num, digits) {
|
|
69
|
-
return Math.round(Math.pow(10, digits) * num) / Math.pow(10, digits);
|
|
70
|
-
}
|
|
71
|
-
function clampValue(value, min, max) {
|
|
72
|
-
return Math.min(Math.max(value, min), max);
|
|
73
|
-
}
|
|
1
|
+
'use strict';
|
|
74
2
|
|
|
75
|
-
|
|
76
|
-
var _RGBColor = class extends Color {
|
|
77
|
-
constructor(red, green, blue, alpha) {
|
|
78
|
-
super();
|
|
79
|
-
this.red = red;
|
|
80
|
-
this.green = green;
|
|
81
|
-
this.blue = blue;
|
|
82
|
-
this.alpha = alpha;
|
|
83
|
-
}
|
|
84
|
-
static parse(value) {
|
|
85
|
-
let colors = [];
|
|
86
|
-
if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {
|
|
87
|
-
const values = (value.length < 6 ? value.replace(/[^#]/gi, "$&$&") : value).slice(1).split("");
|
|
88
|
-
while (values.length > 0) {
|
|
89
|
-
colors.push(parseInt(values.splice(0, 2).join(""), 16));
|
|
90
|
-
}
|
|
91
|
-
colors[3] = colors[3] !== void 0 ? colors[3] / 255 : void 0;
|
|
92
|
-
}
|
|
93
|
-
const match = value.match(/^rgba?\((.*)\)$/);
|
|
94
|
-
if (match?.[1]) {
|
|
95
|
-
colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1));
|
|
96
|
-
}
|
|
97
|
-
return colors.length < 3 ? void 0 : new _RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
|
|
98
|
-
}
|
|
99
|
-
toString(format) {
|
|
100
|
-
switch (format) {
|
|
101
|
-
case "hex":
|
|
102
|
-
return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
|
|
103
|
-
case "hexa":
|
|
104
|
-
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();
|
|
105
|
-
case "rgb":
|
|
106
|
-
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
|
|
107
|
-
case "css":
|
|
108
|
-
case "rgba":
|
|
109
|
-
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
|
|
110
|
-
default:
|
|
111
|
-
return this.toFormat(format).toString(format);
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
toFormat(format) {
|
|
115
|
-
switch (format) {
|
|
116
|
-
case "hex":
|
|
117
|
-
case "hexa":
|
|
118
|
-
case "rgb":
|
|
119
|
-
case "rgba":
|
|
120
|
-
return this;
|
|
121
|
-
case "hsb":
|
|
122
|
-
case "hsba":
|
|
123
|
-
return this.toHSB();
|
|
124
|
-
case "hsl":
|
|
125
|
-
case "hsla":
|
|
126
|
-
return this.toHSL();
|
|
127
|
-
default:
|
|
128
|
-
throw new Error("Unsupported color conversion: rgb -> " + format);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
toHexInt() {
|
|
132
|
-
return this.red << 16 | this.green << 8 | this.blue;
|
|
133
|
-
}
|
|
134
|
-
/**
|
|
135
|
-
* Converts an RGB color value to HSB.
|
|
136
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
|
|
137
|
-
* @returns An HSBColor object.
|
|
138
|
-
*/
|
|
139
|
-
toHSB() {
|
|
140
|
-
const red = this.red / 255;
|
|
141
|
-
const green = this.green / 255;
|
|
142
|
-
const blue = this.blue / 255;
|
|
143
|
-
const min = Math.min(red, green, blue);
|
|
144
|
-
const brightness = Math.max(red, green, blue);
|
|
145
|
-
const chroma = brightness - min;
|
|
146
|
-
const saturation = brightness === 0 ? 0 : chroma / brightness;
|
|
147
|
-
let hue = 0;
|
|
148
|
-
if (chroma !== 0) {
|
|
149
|
-
switch (brightness) {
|
|
150
|
-
case red:
|
|
151
|
-
hue = (green - blue) / chroma + (green < blue ? 6 : 0);
|
|
152
|
-
break;
|
|
153
|
-
case green:
|
|
154
|
-
hue = (blue - red) / chroma + 2;
|
|
155
|
-
break;
|
|
156
|
-
case blue:
|
|
157
|
-
hue = (red - green) / chroma + 4;
|
|
158
|
-
break;
|
|
159
|
-
}
|
|
160
|
-
hue /= 6;
|
|
161
|
-
}
|
|
162
|
-
return new HSBColor(
|
|
163
|
-
toFixedNumber(hue * 360, 2),
|
|
164
|
-
toFixedNumber(saturation * 100, 2),
|
|
165
|
-
toFixedNumber(brightness * 100, 2),
|
|
166
|
-
this.alpha
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
/**
|
|
170
|
-
* Converts an RGB color value to HSL.
|
|
171
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
|
|
172
|
-
* @returns An HSLColor object.
|
|
173
|
-
*/
|
|
174
|
-
toHSL() {
|
|
175
|
-
const red = this.red / 255;
|
|
176
|
-
const green = this.green / 255;
|
|
177
|
-
const blue = this.blue / 255;
|
|
178
|
-
const min = Math.min(red, green, blue);
|
|
179
|
-
const max = Math.max(red, green, blue);
|
|
180
|
-
const lightness = (max + min) / 2;
|
|
181
|
-
const chroma = max - min;
|
|
182
|
-
let hue = -1;
|
|
183
|
-
let saturation = -1;
|
|
184
|
-
if (chroma === 0) {
|
|
185
|
-
hue = saturation = 0;
|
|
186
|
-
} else {
|
|
187
|
-
saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min);
|
|
188
|
-
switch (max) {
|
|
189
|
-
case red:
|
|
190
|
-
hue = (green - blue) / chroma + (green < blue ? 6 : 0);
|
|
191
|
-
break;
|
|
192
|
-
case green:
|
|
193
|
-
hue = (blue - red) / chroma + 2;
|
|
194
|
-
break;
|
|
195
|
-
case blue:
|
|
196
|
-
hue = (red - green) / chroma + 4;
|
|
197
|
-
break;
|
|
198
|
-
}
|
|
199
|
-
hue /= 6;
|
|
200
|
-
}
|
|
201
|
-
return new HSLColor(
|
|
202
|
-
toFixedNumber(hue * 360, 2),
|
|
203
|
-
toFixedNumber(saturation * 100, 2),
|
|
204
|
-
toFixedNumber(lightness * 100, 2),
|
|
205
|
-
this.alpha
|
|
206
|
-
);
|
|
207
|
-
}
|
|
208
|
-
clone() {
|
|
209
|
-
return new _RGBColor(this.red, this.green, this.blue, this.alpha);
|
|
210
|
-
}
|
|
211
|
-
getChannelRange(channel) {
|
|
212
|
-
switch (channel) {
|
|
213
|
-
case "red":
|
|
214
|
-
case "green":
|
|
215
|
-
case "blue":
|
|
216
|
-
return { minValue: 0, maxValue: 255, step: 1, pageSize: 17 };
|
|
217
|
-
case "alpha":
|
|
218
|
-
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
219
|
-
default:
|
|
220
|
-
throw new Error("Unknown color channel: " + channel);
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
getColorSpace() {
|
|
224
|
-
return "rgb";
|
|
225
|
-
}
|
|
226
|
-
getColorChannels() {
|
|
227
|
-
return _RGBColor.colorChannels;
|
|
228
|
-
}
|
|
229
|
-
};
|
|
230
|
-
var RGBColor = _RGBColor;
|
|
231
|
-
__publicField(RGBColor, "colorChannels", ["red", "green", "blue"]);
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
232
4
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
super();
|
|
238
|
-
this.hue = hue;
|
|
239
|
-
this.saturation = saturation;
|
|
240
|
-
this.brightness = brightness;
|
|
241
|
-
this.alpha = alpha;
|
|
242
|
-
}
|
|
243
|
-
static parse(value) {
|
|
244
|
-
let m;
|
|
245
|
-
if (m = value.match(HSB_REGEX)) {
|
|
246
|
-
const [h, s, b, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
|
|
247
|
-
return new _HSBColor(mod(h, 360), clampValue(s, 0, 100), clampValue(b, 0, 100), clampValue(a ?? 1, 0, 1));
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
toString(format) {
|
|
251
|
-
switch (format) {
|
|
252
|
-
case "css":
|
|
253
|
-
return this.toHSL().toString("css");
|
|
254
|
-
case "hex":
|
|
255
|
-
return this.toRGB().toString("hex");
|
|
256
|
-
case "hexa":
|
|
257
|
-
return this.toRGB().toString("hexa");
|
|
258
|
-
case "hsb":
|
|
259
|
-
return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`;
|
|
260
|
-
case "hsba":
|
|
261
|
-
return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
|
|
262
|
-
default:
|
|
263
|
-
return this.toFormat(format).toString(format);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
toFormat(format) {
|
|
267
|
-
switch (format) {
|
|
268
|
-
case "hsb":
|
|
269
|
-
case "hsba":
|
|
270
|
-
return this;
|
|
271
|
-
case "hsl":
|
|
272
|
-
case "hsla":
|
|
273
|
-
return this.toHSL();
|
|
274
|
-
case "rgb":
|
|
275
|
-
case "rgba":
|
|
276
|
-
return this.toRGB();
|
|
277
|
-
default:
|
|
278
|
-
throw new Error("Unsupported color conversion: hsb -> " + format);
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
/**
|
|
282
|
-
* Converts a HSB color to HSL.
|
|
283
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
|
|
284
|
-
* @returns An HSLColor object.
|
|
285
|
-
*/
|
|
286
|
-
toHSL() {
|
|
287
|
-
let saturation = this.saturation / 100;
|
|
288
|
-
let brightness = this.brightness / 100;
|
|
289
|
-
let lightness = brightness * (1 - saturation / 2);
|
|
290
|
-
saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
|
|
291
|
-
return new HSLColor(
|
|
292
|
-
toFixedNumber(this.hue, 2),
|
|
293
|
-
toFixedNumber(saturation * 100, 2),
|
|
294
|
-
toFixedNumber(lightness * 100, 2),
|
|
295
|
-
this.alpha
|
|
296
|
-
);
|
|
297
|
-
}
|
|
298
|
-
/**
|
|
299
|
-
* Converts a HSV color value to RGB.
|
|
300
|
-
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
|
|
301
|
-
* @returns An RGBColor object.
|
|
302
|
-
*/
|
|
303
|
-
toRGB() {
|
|
304
|
-
let hue = this.hue;
|
|
305
|
-
let saturation = this.saturation / 100;
|
|
306
|
-
let brightness = this.brightness / 100;
|
|
307
|
-
let fn = (n, k = (n + hue / 60) % 6) => brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
|
|
308
|
-
return new RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
|
|
309
|
-
}
|
|
310
|
-
clone() {
|
|
311
|
-
return new _HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
|
|
312
|
-
}
|
|
313
|
-
getChannelRange(channel) {
|
|
314
|
-
switch (channel) {
|
|
315
|
-
case "hue":
|
|
316
|
-
return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
|
|
317
|
-
case "saturation":
|
|
318
|
-
case "brightness":
|
|
319
|
-
return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
|
|
320
|
-
case "alpha":
|
|
321
|
-
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
322
|
-
default:
|
|
323
|
-
throw new Error("Unknown color channel: " + channel);
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
getColorSpace() {
|
|
327
|
-
return "hsb";
|
|
328
|
-
}
|
|
329
|
-
getColorChannels() {
|
|
330
|
-
return _HSBColor.colorChannels;
|
|
331
|
-
}
|
|
332
|
-
};
|
|
333
|
-
var HSBColor = _HSBColor;
|
|
334
|
-
__publicField(HSBColor, "colorChannels", ["hue", "saturation", "brightness"]);
|
|
5
|
+
const color = require('./color.js');
|
|
6
|
+
const hsbColor = require('./hsb-color.js');
|
|
7
|
+
const rgbColor = require('./rgb-color.js');
|
|
8
|
+
const utils = require('./utils.js');
|
|
335
9
|
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
var _HSLColor = class extends Color {
|
|
10
|
+
const 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+)?)\)/;
|
|
11
|
+
class HSLColor extends color.Color {
|
|
339
12
|
constructor(hue, saturation, lightness, alpha) {
|
|
340
13
|
super();
|
|
341
14
|
this.hue = hue;
|
|
@@ -347,7 +20,7 @@ var _HSLColor = class extends Color {
|
|
|
347
20
|
let m;
|
|
348
21
|
if (m = value.match(HSL_REGEX)) {
|
|
349
22
|
const [h, s, l, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
|
|
350
|
-
return new
|
|
23
|
+
return new HSLColor(utils.mod(h, 360), utils.clampValue(s, 0, 100), utils.clampValue(l, 0, 100), utils.clampValue(a ?? 1, 0, 1));
|
|
351
24
|
}
|
|
352
25
|
}
|
|
353
26
|
toString(format) {
|
|
@@ -357,10 +30,10 @@ var _HSLColor = class extends Color {
|
|
|
357
30
|
case "hexa":
|
|
358
31
|
return this.toRGB().toString("hexa");
|
|
359
32
|
case "hsl":
|
|
360
|
-
return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
|
|
33
|
+
return `hsl(${this.hue}, ${utils.toFixedNumber(this.saturation, 2)}%, ${utils.toFixedNumber(this.lightness, 2)}%)`;
|
|
361
34
|
case "css":
|
|
362
35
|
case "hsla":
|
|
363
|
-
return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
|
|
36
|
+
return `hsla(${this.hue}, ${utils.toFixedNumber(this.saturation, 2)}%, ${utils.toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
|
|
364
37
|
default:
|
|
365
38
|
return this.toFormat(format).toString(format);
|
|
366
39
|
}
|
|
@@ -390,10 +63,10 @@ var _HSLColor = class extends Color {
|
|
|
390
63
|
let lightness = this.lightness / 100;
|
|
391
64
|
let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
|
|
392
65
|
saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
|
|
393
|
-
return new HSBColor(
|
|
394
|
-
toFixedNumber(this.hue, 2),
|
|
395
|
-
toFixedNumber(saturation * 100, 2),
|
|
396
|
-
toFixedNumber(brightness * 100, 2),
|
|
66
|
+
return new hsbColor.HSBColor(
|
|
67
|
+
utils.toFixedNumber(this.hue, 2),
|
|
68
|
+
utils.toFixedNumber(saturation * 100, 2),
|
|
69
|
+
utils.toFixedNumber(brightness * 100, 2),
|
|
397
70
|
this.alpha
|
|
398
71
|
);
|
|
399
72
|
}
|
|
@@ -408,10 +81,10 @@ var _HSLColor = class extends Color {
|
|
|
408
81
|
let lightness = this.lightness / 100;
|
|
409
82
|
let a = saturation * Math.min(lightness, 1 - lightness);
|
|
410
83
|
let fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
411
|
-
return new RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
|
|
84
|
+
return new rgbColor.RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
|
|
412
85
|
}
|
|
413
86
|
clone() {
|
|
414
|
-
return new
|
|
87
|
+
return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
|
|
415
88
|
}
|
|
416
89
|
getChannelRange(channel) {
|
|
417
90
|
switch (channel) {
|
|
@@ -429,14 +102,11 @@ var _HSLColor = class extends Color {
|
|
|
429
102
|
getColorSpace() {
|
|
430
103
|
return "hsl";
|
|
431
104
|
}
|
|
105
|
+
static colorChannels = ["hue", "saturation", "lightness"];
|
|
432
106
|
getColorChannels() {
|
|
433
|
-
return
|
|
107
|
+
return HSLColor.colorChannels;
|
|
434
108
|
}
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
0 && (module.exports = {
|
|
440
|
-
HSLColor,
|
|
441
|
-
HSL_REGEX
|
|
442
|
-
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
exports.HSLColor = HSLColor;
|
|
112
|
+
exports.HSL_REGEX = HSL_REGEX;
|
package/dist/hsl-color.mjs
CHANGED
|
@@ -1,11 +1,107 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
} from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { Color } from './color.mjs';
|
|
2
|
+
import { HSBColor } from './hsb-color.mjs';
|
|
3
|
+
import { RGBColor } from './rgb-color.mjs';
|
|
4
|
+
import { mod, clampValue, toFixedNumber } from './utils.mjs';
|
|
5
|
+
|
|
6
|
+
const 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+)?)\)/;
|
|
7
|
+
class HSLColor extends Color {
|
|
8
|
+
constructor(hue, saturation, lightness, alpha) {
|
|
9
|
+
super();
|
|
10
|
+
this.hue = hue;
|
|
11
|
+
this.saturation = saturation;
|
|
12
|
+
this.lightness = lightness;
|
|
13
|
+
this.alpha = alpha;
|
|
14
|
+
}
|
|
15
|
+
static parse(value) {
|
|
16
|
+
let m;
|
|
17
|
+
if (m = value.match(HSL_REGEX)) {
|
|
18
|
+
const [h, s, l, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
|
|
19
|
+
return new HSLColor(mod(h, 360), clampValue(s, 0, 100), clampValue(l, 0, 100), clampValue(a ?? 1, 0, 1));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
toString(format) {
|
|
23
|
+
switch (format) {
|
|
24
|
+
case "hex":
|
|
25
|
+
return this.toRGB().toString("hex");
|
|
26
|
+
case "hexa":
|
|
27
|
+
return this.toRGB().toString("hexa");
|
|
28
|
+
case "hsl":
|
|
29
|
+
return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
|
|
30
|
+
case "css":
|
|
31
|
+
case "hsla":
|
|
32
|
+
return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
|
|
33
|
+
default:
|
|
34
|
+
return this.toFormat(format).toString(format);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
toFormat(format) {
|
|
38
|
+
switch (format) {
|
|
39
|
+
case "hsl":
|
|
40
|
+
case "hsla":
|
|
41
|
+
return this;
|
|
42
|
+
case "hsb":
|
|
43
|
+
case "hsba":
|
|
44
|
+
return this.toHSB();
|
|
45
|
+
case "rgb":
|
|
46
|
+
case "rgba":
|
|
47
|
+
return this.toRGB();
|
|
48
|
+
default:
|
|
49
|
+
throw new Error("Unsupported color conversion: hsl -> " + format);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Converts a HSL color to HSB.
|
|
54
|
+
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
|
|
55
|
+
* @returns An HSBColor object.
|
|
56
|
+
*/
|
|
57
|
+
toHSB() {
|
|
58
|
+
let saturation = this.saturation / 100;
|
|
59
|
+
let lightness = this.lightness / 100;
|
|
60
|
+
let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
|
|
61
|
+
saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
|
|
62
|
+
return new HSBColor(
|
|
63
|
+
toFixedNumber(this.hue, 2),
|
|
64
|
+
toFixedNumber(saturation * 100, 2),
|
|
65
|
+
toFixedNumber(brightness * 100, 2),
|
|
66
|
+
this.alpha
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Converts a HSL color to RGB.
|
|
71
|
+
* Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
|
|
72
|
+
* @returns An RGBColor object.
|
|
73
|
+
*/
|
|
74
|
+
toRGB() {
|
|
75
|
+
let hue = this.hue;
|
|
76
|
+
let saturation = this.saturation / 100;
|
|
77
|
+
let lightness = this.lightness / 100;
|
|
78
|
+
let a = saturation * Math.min(lightness, 1 - lightness);
|
|
79
|
+
let fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
80
|
+
return new RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
|
|
81
|
+
}
|
|
82
|
+
clone() {
|
|
83
|
+
return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
|
|
84
|
+
}
|
|
85
|
+
getChannelRange(channel) {
|
|
86
|
+
switch (channel) {
|
|
87
|
+
case "hue":
|
|
88
|
+
return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
|
|
89
|
+
case "saturation":
|
|
90
|
+
case "lightness":
|
|
91
|
+
return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
|
|
92
|
+
case "alpha":
|
|
93
|
+
return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
|
|
94
|
+
default:
|
|
95
|
+
throw new Error("Unknown color channel: " + channel);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
getColorSpace() {
|
|
99
|
+
return "hsl";
|
|
100
|
+
}
|
|
101
|
+
static colorChannels = ["hue", "saturation", "lightness"];
|
|
102
|
+
getColorChannels() {
|
|
103
|
+
return HSLColor.colorChannels;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export { HSLColor, HSL_REGEX };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Color } from
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
1
|
+
export { Color } from "./color";
|
|
2
|
+
export { parseColor, normalizeColor } from "./parse-color";
|
|
3
|
+
export type { ColorChannel, ColorFormat, ColorAxes } from "./types";
|