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