@react-stately/color 3.6.1-nightly.4623 → 3.6.1
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.main.js +156 -156
- package/dist/Color.mjs +156 -156
- package/dist/Color.module.js +156 -156
- package/dist/useColor.main.js +1 -1
- package/dist/useColor.mjs +1 -1
- package/dist/useColor.module.js +1 -1
- package/dist/useColorAreaState.main.js +2 -2
- package/dist/useColorAreaState.mjs +2 -2
- package/dist/useColorAreaState.module.js +2 -2
- package/dist/useColorChannelFieldState.main.js +2 -2
- package/dist/useColorChannelFieldState.mjs +2 -2
- package/dist/useColorChannelFieldState.module.js +2 -2
- package/dist/useColorFieldState.main.js +14 -14
- package/dist/useColorFieldState.mjs +14 -14
- package/dist/useColorFieldState.module.js +14 -14
- package/dist/useColorPickerState.main.js +2 -2
- package/dist/useColorPickerState.mjs +2 -2
- package/dist/useColorPickerState.module.js +2 -2
- package/dist/useColorSliderState.main.js +12 -12
- package/dist/useColorSliderState.mjs +12 -12
- package/dist/useColorSliderState.module.js +12 -12
- package/dist/useColorWheelState.main.js +7 -7
- package/dist/useColorWheelState.mjs +7 -7
- package/dist/useColorWheelState.module.js +7 -7
- package/package.json +11 -11
package/dist/Color.main.js
CHANGED
|
@@ -33,19 +33,19 @@ let $83fe1a57d631223b$var$dictionary = new (0, $5BFmN$internationalizedstring.Lo
|
|
|
33
33
|
function $83fe1a57d631223b$export$6e865ea70d7724f(value) {
|
|
34
34
|
let res = $83fe1a57d631223b$var$RGBColor.parse(value) || $83fe1a57d631223b$var$HSBColor.parse(value) || $83fe1a57d631223b$var$HSLColor.parse(value);
|
|
35
35
|
if (res) return res;
|
|
36
|
-
throw new Error(
|
|
36
|
+
throw new Error('Invalid color value: ' + value);
|
|
37
37
|
}
|
|
38
38
|
function $83fe1a57d631223b$export$4cde5df63f53f473(v) {
|
|
39
|
-
if (typeof v ===
|
|
39
|
+
if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v);
|
|
40
40
|
else return v;
|
|
41
41
|
}
|
|
42
42
|
function $83fe1a57d631223b$export$1c0c08912582810c(colorSpace) {
|
|
43
43
|
switch(colorSpace){
|
|
44
|
-
case
|
|
44
|
+
case 'rgb':
|
|
45
45
|
return $83fe1a57d631223b$var$RGBColor.colorChannels;
|
|
46
|
-
case
|
|
46
|
+
case 'hsl':
|
|
47
47
|
return $83fe1a57d631223b$var$HSLColor.colorChannels;
|
|
48
|
-
case
|
|
48
|
+
case 'hsb':
|
|
49
49
|
return $83fe1a57d631223b$var$HSBColor.colorChannels;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -60,52 +60,52 @@ const $83fe1a57d631223b$var$GRAY_THRESHOLD = 0.001;
|
|
|
60
60
|
const $83fe1a57d631223b$var$OKLCH_HUES = [
|
|
61
61
|
[
|
|
62
62
|
0,
|
|
63
|
-
|
|
63
|
+
'pink'
|
|
64
64
|
],
|
|
65
65
|
[
|
|
66
66
|
15,
|
|
67
|
-
|
|
67
|
+
'red'
|
|
68
68
|
],
|
|
69
69
|
[
|
|
70
70
|
48,
|
|
71
|
-
|
|
71
|
+
'orange'
|
|
72
72
|
],
|
|
73
73
|
[
|
|
74
74
|
94,
|
|
75
|
-
|
|
75
|
+
'yellow'
|
|
76
76
|
],
|
|
77
77
|
[
|
|
78
78
|
135,
|
|
79
|
-
|
|
79
|
+
'green'
|
|
80
80
|
],
|
|
81
81
|
[
|
|
82
82
|
175,
|
|
83
|
-
|
|
83
|
+
'cyan'
|
|
84
84
|
],
|
|
85
85
|
[
|
|
86
86
|
264,
|
|
87
|
-
|
|
87
|
+
'blue'
|
|
88
88
|
],
|
|
89
89
|
[
|
|
90
90
|
284,
|
|
91
|
-
|
|
91
|
+
'purple'
|
|
92
92
|
],
|
|
93
93
|
[
|
|
94
94
|
320,
|
|
95
|
-
|
|
95
|
+
'magenta'
|
|
96
96
|
],
|
|
97
97
|
[
|
|
98
98
|
349,
|
|
99
|
-
|
|
99
|
+
'pink'
|
|
100
100
|
]
|
|
101
101
|
];
|
|
102
102
|
class $83fe1a57d631223b$var$Color {
|
|
103
103
|
toHexInt() {
|
|
104
|
-
return this.toFormat(
|
|
104
|
+
return this.toFormat('rgb').toHexInt();
|
|
105
105
|
}
|
|
106
106
|
getChannelValue(channel) {
|
|
107
107
|
if (channel in this) return this[channel];
|
|
108
|
-
throw new Error(
|
|
108
|
+
throw new Error('Unsupported color channel: ' + channel);
|
|
109
109
|
}
|
|
110
110
|
withChannelValue(channel, value) {
|
|
111
111
|
if (channel in this) {
|
|
@@ -113,10 +113,10 @@ class $83fe1a57d631223b$var$Color {
|
|
|
113
113
|
x[channel] = value;
|
|
114
114
|
return x;
|
|
115
115
|
}
|
|
116
|
-
throw new Error(
|
|
116
|
+
throw new Error('Unsupported color channel: ' + channel);
|
|
117
117
|
}
|
|
118
118
|
getChannelName(channel, locale) {
|
|
119
|
-
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage(
|
|
119
|
+
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/color') || $83fe1a57d631223b$var$dictionary;
|
|
120
120
|
return strings.getStringForLocale(channel, locale);
|
|
121
121
|
}
|
|
122
122
|
getColorSpaceAxes(xyChannels) {
|
|
@@ -133,65 +133,65 @@ class $83fe1a57d631223b$var$Color {
|
|
|
133
133
|
getColorName(locale) {
|
|
134
134
|
// Convert to oklch color space, which has perceptually uniform lightness across all hues.
|
|
135
135
|
let [l, c, h] = $83fe1a57d631223b$var$toOKLCH(this);
|
|
136
|
-
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage(
|
|
137
|
-
if (l > 0.999) return strings.getStringForLocale(
|
|
138
|
-
if (l < 0.001) return strings.getStringForLocale(
|
|
136
|
+
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/color') || $83fe1a57d631223b$var$dictionary;
|
|
137
|
+
if (l > 0.999) return strings.getStringForLocale('white', locale);
|
|
138
|
+
if (l < 0.001) return strings.getStringForLocale('black', locale);
|
|
139
139
|
let hue;
|
|
140
140
|
[hue, l] = this.getOklchHue(l, c, h, locale);
|
|
141
|
-
let lightness =
|
|
142
|
-
let chroma =
|
|
141
|
+
let lightness = '';
|
|
142
|
+
let chroma = '';
|
|
143
143
|
if (c <= 0.1 && c >= $83fe1a57d631223b$var$GRAY_THRESHOLD) {
|
|
144
|
-
if (l >= 0.7) chroma =
|
|
145
|
-
else chroma =
|
|
146
|
-
} else if (c >= 0.15) chroma =
|
|
147
|
-
if (l < 0.3) lightness =
|
|
148
|
-
else if (l < $83fe1a57d631223b$var$MAX_DARK_LIGHTNESS) lightness =
|
|
144
|
+
if (l >= 0.7) chroma = 'pale';
|
|
145
|
+
else chroma = 'grayish';
|
|
146
|
+
} else if (c >= 0.15) chroma = 'vibrant';
|
|
147
|
+
if (l < 0.3) lightness = 'very dark';
|
|
148
|
+
else if (l < $83fe1a57d631223b$var$MAX_DARK_LIGHTNESS) lightness = 'dark';
|
|
149
149
|
else if (l < 0.7) ;
|
|
150
|
-
else if (l < 0.85) lightness =
|
|
151
|
-
else lightness =
|
|
150
|
+
else if (l < 0.85) lightness = 'light';
|
|
151
|
+
else lightness = 'very light';
|
|
152
152
|
if (chroma) chroma = strings.getStringForLocale(chroma, locale);
|
|
153
153
|
if (lightness) lightness = strings.getStringForLocale(lightness, locale);
|
|
154
|
-
let alpha = this.getChannelValue(
|
|
154
|
+
let alpha = this.getChannelValue('alpha');
|
|
155
155
|
let formatter = new (0, $5BFmN$internationalizedstring.LocalizedStringFormatter)(locale, strings);
|
|
156
156
|
if (alpha < 1) {
|
|
157
157
|
let percentTransparent = new (0, $5BFmN$internationalizednumber.NumberFormatter)(locale, {
|
|
158
|
-
style:
|
|
158
|
+
style: 'percent'
|
|
159
159
|
}).format(1 - alpha);
|
|
160
|
-
return formatter.format(
|
|
160
|
+
return formatter.format('transparentColorName', {
|
|
161
161
|
lightness: lightness,
|
|
162
162
|
chroma: chroma,
|
|
163
163
|
hue: hue,
|
|
164
164
|
percentTransparent: percentTransparent
|
|
165
|
-
}).replace(/\s+/g,
|
|
166
|
-
} else return formatter.format(
|
|
165
|
+
}).replace(/\s+/g, ' ').trim();
|
|
166
|
+
} else return formatter.format('colorName', {
|
|
167
167
|
lightness: lightness,
|
|
168
168
|
chroma: chroma,
|
|
169
169
|
hue: hue
|
|
170
|
-
}).replace(/\s+/g,
|
|
170
|
+
}).replace(/\s+/g, ' ').trim();
|
|
171
171
|
}
|
|
172
172
|
getOklchHue(l, c, h, locale) {
|
|
173
|
-
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage(
|
|
173
|
+
let strings = (0, $5BFmN$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/color') || $83fe1a57d631223b$var$dictionary;
|
|
174
174
|
if (c < $83fe1a57d631223b$var$GRAY_THRESHOLD) return [
|
|
175
|
-
strings.getStringForLocale(
|
|
175
|
+
strings.getStringForLocale('gray', locale),
|
|
176
176
|
l
|
|
177
177
|
];
|
|
178
178
|
for(let i = 0; i < $83fe1a57d631223b$var$OKLCH_HUES.length; i++){
|
|
179
179
|
let [hue, hueName] = $83fe1a57d631223b$var$OKLCH_HUES[i];
|
|
180
180
|
let [nextHue, nextHueName] = $83fe1a57d631223b$var$OKLCH_HUES[i + 1] || [
|
|
181
181
|
360,
|
|
182
|
-
|
|
182
|
+
'pink'
|
|
183
183
|
];
|
|
184
184
|
if (h >= hue && h < nextHue) {
|
|
185
185
|
// Split orange hue into brown/orange depending on lightness.
|
|
186
|
-
if (hueName ===
|
|
187
|
-
if (l < $83fe1a57d631223b$var$ORANGE_LIGHTNESS_THRESHOLD) hueName =
|
|
186
|
+
if (hueName === 'orange') {
|
|
187
|
+
if (l < $83fe1a57d631223b$var$ORANGE_LIGHTNESS_THRESHOLD) hueName = 'brown';
|
|
188
188
|
else // Adjust lightness.
|
|
189
189
|
l = l - $83fe1a57d631223b$var$ORANGE_LIGHTNESS_THRESHOLD + $83fe1a57d631223b$var$MAX_DARK_LIGHTNESS;
|
|
190
190
|
}
|
|
191
191
|
// If the hue is at least halfway to the next hue, add the next hue name as well.
|
|
192
192
|
if (h > hue + (nextHue - hue) / 2 && hueName !== nextHueName) hueName = `${hueName} ${nextHueName}`;
|
|
193
|
-
else if (hueName ===
|
|
194
|
-
hueName =
|
|
193
|
+
else if (hueName === 'yellow' && l < $83fe1a57d631223b$var$YELLOW_GREEN_LIGHTNESS_THRESHOLD) // Yellow shifts toward green at lower lightnesses.
|
|
194
|
+
hueName = 'yellow green';
|
|
195
195
|
let name = strings.getStringForLocale(hueName, locale).toLocaleLowerCase(locale);
|
|
196
196
|
return [
|
|
197
197
|
name,
|
|
@@ -199,7 +199,7 @@ class $83fe1a57d631223b$var$Color {
|
|
|
199
199
|
];
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
throw new Error(
|
|
202
|
+
throw new Error('Unexpected hue');
|
|
203
203
|
}
|
|
204
204
|
getHueName(locale) {
|
|
205
205
|
let [l, c, h] = $83fe1a57d631223b$var$toOKLCH(this);
|
|
@@ -217,29 +217,29 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
217
217
|
7,
|
|
218
218
|
9
|
|
219
219
|
].includes(value.length)) {
|
|
220
|
-
const values = (value.length < 6 ? value.replace(/[^#]/gi,
|
|
221
|
-
while(values.length > 0)colors.push(parseInt(values.splice(0, 2).join(
|
|
220
|
+
const values = (value.length < 6 ? value.replace(/[^#]/gi, '$&$&') : value).slice(1).split('');
|
|
221
|
+
while(values.length > 0)colors.push(parseInt(values.splice(0, 2).join(''), 16));
|
|
222
222
|
colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined;
|
|
223
223
|
}
|
|
224
224
|
// matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a)
|
|
225
225
|
const match = value.match(/^rgba?\((.*)\)$/);
|
|
226
226
|
if (match === null || match === void 0 ? void 0 : match[1]) {
|
|
227
|
-
colors = match[1].split(
|
|
227
|
+
colors = match[1].split(',').map((value)=>Number(value.trim()));
|
|
228
228
|
colors = colors.map((num, i)=>(0, $5BFmN$reactstatelyutils.clamp)(num, 0, i < 3 ? 255 : 1));
|
|
229
229
|
}
|
|
230
230
|
var _colors_;
|
|
231
231
|
return colors.length < 3 ? undefined : new $83fe1a57d631223b$var$RGBColor(colors[0], colors[1], colors[2], (_colors_ = colors[3]) !== null && _colors_ !== void 0 ? _colors_ : 1);
|
|
232
232
|
}
|
|
233
|
-
toString(format =
|
|
233
|
+
toString(format = 'css') {
|
|
234
234
|
switch(format){
|
|
235
|
-
case
|
|
236
|
-
return
|
|
237
|
-
case
|
|
238
|
-
return
|
|
239
|
-
case
|
|
235
|
+
case 'hex':
|
|
236
|
+
return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')).toUpperCase();
|
|
237
|
+
case 'hexa':
|
|
238
|
+
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();
|
|
239
|
+
case 'rgb':
|
|
240
240
|
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
|
|
241
|
-
case
|
|
242
|
-
case
|
|
241
|
+
case 'css':
|
|
242
|
+
case 'rgba':
|
|
243
243
|
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
|
|
244
244
|
default:
|
|
245
245
|
return this.toFormat(format).toString(format);
|
|
@@ -247,19 +247,19 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
247
247
|
}
|
|
248
248
|
toFormat(format) {
|
|
249
249
|
switch(format){
|
|
250
|
-
case
|
|
251
|
-
case
|
|
252
|
-
case
|
|
253
|
-
case
|
|
250
|
+
case 'hex':
|
|
251
|
+
case 'hexa':
|
|
252
|
+
case 'rgb':
|
|
253
|
+
case 'rgba':
|
|
254
254
|
return this;
|
|
255
|
-
case
|
|
256
|
-
case
|
|
255
|
+
case 'hsb':
|
|
256
|
+
case 'hsba':
|
|
257
257
|
return this.toHSB();
|
|
258
|
-
case
|
|
259
|
-
case
|
|
258
|
+
case 'hsl':
|
|
259
|
+
case 'hsla':
|
|
260
260
|
return this.toHSL();
|
|
261
261
|
default:
|
|
262
|
-
throw new Error(
|
|
262
|
+
throw new Error('Unsupported color conversion: rgb -> ' + format);
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
toHexInt() {
|
|
@@ -331,16 +331,16 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
331
331
|
}
|
|
332
332
|
getChannelRange(channel) {
|
|
333
333
|
switch(channel){
|
|
334
|
-
case
|
|
335
|
-
case
|
|
336
|
-
case
|
|
334
|
+
case 'red':
|
|
335
|
+
case 'green':
|
|
336
|
+
case 'blue':
|
|
337
337
|
return {
|
|
338
338
|
minValue: 0x0,
|
|
339
339
|
maxValue: 0xFF,
|
|
340
340
|
step: 0x1,
|
|
341
341
|
pageSize: 0x11
|
|
342
342
|
};
|
|
343
|
-
case
|
|
343
|
+
case 'alpha':
|
|
344
344
|
return {
|
|
345
345
|
minValue: 0,
|
|
346
346
|
maxValue: 1,
|
|
@@ -348,23 +348,23 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
348
348
|
pageSize: 0.1
|
|
349
349
|
};
|
|
350
350
|
default:
|
|
351
|
-
throw new Error(
|
|
351
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
354
|
getChannelFormatOptions(channel) {
|
|
355
355
|
switch(channel){
|
|
356
|
-
case
|
|
357
|
-
case
|
|
358
|
-
case
|
|
356
|
+
case 'red':
|
|
357
|
+
case 'green':
|
|
358
|
+
case 'blue':
|
|
359
359
|
return {
|
|
360
|
-
style:
|
|
360
|
+
style: 'decimal'
|
|
361
361
|
};
|
|
362
|
-
case
|
|
362
|
+
case 'alpha':
|
|
363
363
|
return {
|
|
364
|
-
style:
|
|
364
|
+
style: 'percent'
|
|
365
365
|
};
|
|
366
366
|
default:
|
|
367
|
-
throw new Error(
|
|
367
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
368
368
|
}
|
|
369
369
|
}
|
|
370
370
|
formatChannelValue(channel, locale) {
|
|
@@ -373,7 +373,7 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
373
373
|
return new (0, $5BFmN$internationalizednumber.NumberFormatter)(locale, options).format(value);
|
|
374
374
|
}
|
|
375
375
|
getColorSpace() {
|
|
376
|
-
return
|
|
376
|
+
return 'rgb';
|
|
377
377
|
}
|
|
378
378
|
getColorChannels() {
|
|
379
379
|
return $83fe1a57d631223b$var$RGBColor.colorChannels;
|
|
@@ -387,9 +387,9 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
|
|
|
387
387
|
}
|
|
388
388
|
}
|
|
389
389
|
$83fe1a57d631223b$var$RGBColor.colorChannels = [
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
390
|
+
'red',
|
|
391
|
+
'green',
|
|
392
|
+
'blue'
|
|
393
393
|
];
|
|
394
394
|
// X = <negative/positive number with/without decimal places>
|
|
395
395
|
// before/after a comma, 0 or more whitespaces are allowed
|
|
@@ -401,21 +401,21 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
|
|
|
401
401
|
let m;
|
|
402
402
|
if (m = value.match($83fe1a57d631223b$var$HSB_REGEX)) {
|
|
403
403
|
var _m_;
|
|
404
|
-
const [h, s, b, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(
|
|
404
|
+
const [h, s, b, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')));
|
|
405
405
|
return new $83fe1a57d631223b$var$HSBColor($83fe1a57d631223b$var$mod(h, 360), (0, $5BFmN$reactstatelyutils.clamp)(s, 0, 100), (0, $5BFmN$reactstatelyutils.clamp)(b, 0, 100), (0, $5BFmN$reactstatelyutils.clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
|
|
406
406
|
}
|
|
407
407
|
}
|
|
408
|
-
toString(format =
|
|
408
|
+
toString(format = 'css') {
|
|
409
409
|
switch(format){
|
|
410
|
-
case
|
|
411
|
-
return this.toHSL().toString(
|
|
412
|
-
case
|
|
413
|
-
return this.toRGB().toString(
|
|
414
|
-
case
|
|
415
|
-
return this.toRGB().toString(
|
|
416
|
-
case
|
|
410
|
+
case 'css':
|
|
411
|
+
return this.toHSL().toString('css');
|
|
412
|
+
case 'hex':
|
|
413
|
+
return this.toRGB().toString('hex');
|
|
414
|
+
case 'hexa':
|
|
415
|
+
return this.toRGB().toString('hexa');
|
|
416
|
+
case 'hsb':
|
|
417
417
|
return `hsb(${this.hue}, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.brightness, 2)}%)`;
|
|
418
|
-
case
|
|
418
|
+
case 'hsba':
|
|
419
419
|
return `hsba(${this.hue}, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.brightness, 2)}%, ${this.alpha})`;
|
|
420
420
|
default:
|
|
421
421
|
return this.toFormat(format).toString(format);
|
|
@@ -423,17 +423,17 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
|
|
|
423
423
|
}
|
|
424
424
|
toFormat(format) {
|
|
425
425
|
switch(format){
|
|
426
|
-
case
|
|
427
|
-
case
|
|
426
|
+
case 'hsb':
|
|
427
|
+
case 'hsba':
|
|
428
428
|
return this;
|
|
429
|
-
case
|
|
430
|
-
case
|
|
429
|
+
case 'hsl':
|
|
430
|
+
case 'hsla':
|
|
431
431
|
return this.toHSL();
|
|
432
|
-
case
|
|
433
|
-
case
|
|
432
|
+
case 'rgb':
|
|
433
|
+
case 'rgba':
|
|
434
434
|
return this.toRGB();
|
|
435
435
|
default:
|
|
436
|
-
throw new Error(
|
|
436
|
+
throw new Error('Unsupported color conversion: hsb -> ' + format);
|
|
437
437
|
}
|
|
438
438
|
}
|
|
439
439
|
/**
|
|
@@ -463,22 +463,22 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
|
|
|
463
463
|
}
|
|
464
464
|
getChannelRange(channel) {
|
|
465
465
|
switch(channel){
|
|
466
|
-
case
|
|
466
|
+
case 'hue':
|
|
467
467
|
return {
|
|
468
468
|
minValue: 0,
|
|
469
469
|
maxValue: 360,
|
|
470
470
|
step: 1,
|
|
471
471
|
pageSize: 15
|
|
472
472
|
};
|
|
473
|
-
case
|
|
474
|
-
case
|
|
473
|
+
case 'saturation':
|
|
474
|
+
case 'brightness':
|
|
475
475
|
return {
|
|
476
476
|
minValue: 0,
|
|
477
477
|
maxValue: 100,
|
|
478
478
|
step: 1,
|
|
479
479
|
pageSize: 10
|
|
480
480
|
};
|
|
481
|
-
case
|
|
481
|
+
case 'alpha':
|
|
482
482
|
return {
|
|
483
483
|
minValue: 0,
|
|
484
484
|
maxValue: 1,
|
|
@@ -486,35 +486,35 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
|
|
|
486
486
|
pageSize: 0.1
|
|
487
487
|
};
|
|
488
488
|
default:
|
|
489
|
-
throw new Error(
|
|
489
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
490
490
|
}
|
|
491
491
|
}
|
|
492
492
|
getChannelFormatOptions(channel) {
|
|
493
493
|
switch(channel){
|
|
494
|
-
case
|
|
494
|
+
case 'hue':
|
|
495
495
|
return {
|
|
496
|
-
style:
|
|
497
|
-
unit:
|
|
498
|
-
unitDisplay:
|
|
496
|
+
style: 'unit',
|
|
497
|
+
unit: 'degree',
|
|
498
|
+
unitDisplay: 'narrow'
|
|
499
499
|
};
|
|
500
|
-
case
|
|
501
|
-
case
|
|
502
|
-
case
|
|
500
|
+
case 'saturation':
|
|
501
|
+
case 'brightness':
|
|
502
|
+
case 'alpha':
|
|
503
503
|
return {
|
|
504
|
-
style:
|
|
504
|
+
style: 'percent'
|
|
505
505
|
};
|
|
506
506
|
default:
|
|
507
|
-
throw new Error(
|
|
507
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
508
508
|
}
|
|
509
509
|
}
|
|
510
510
|
formatChannelValue(channel, locale) {
|
|
511
511
|
let options = this.getChannelFormatOptions(channel);
|
|
512
512
|
let value = this.getChannelValue(channel);
|
|
513
|
-
if (channel ===
|
|
513
|
+
if (channel === 'saturation' || channel === 'brightness') value /= 100;
|
|
514
514
|
return new (0, $5BFmN$internationalizednumber.NumberFormatter)(locale, options).format(value);
|
|
515
515
|
}
|
|
516
516
|
getColorSpace() {
|
|
517
|
-
return
|
|
517
|
+
return 'hsb';
|
|
518
518
|
}
|
|
519
519
|
getColorChannels() {
|
|
520
520
|
return $83fe1a57d631223b$var$HSBColor.colorChannels;
|
|
@@ -528,9 +528,9 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
|
|
|
528
528
|
}
|
|
529
529
|
}
|
|
530
530
|
$83fe1a57d631223b$var$HSBColor.colorChannels = [
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
531
|
+
'hue',
|
|
532
|
+
'saturation',
|
|
533
|
+
'brightness'
|
|
534
534
|
];
|
|
535
535
|
// X = <negative/positive number with/without decimal places>
|
|
536
536
|
// before/after a comma, 0 or more whitespaces are allowed
|
|
@@ -545,20 +545,20 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
|
|
|
545
545
|
let m;
|
|
546
546
|
if (m = value.match($83fe1a57d631223b$var$HSL_REGEX)) {
|
|
547
547
|
var _m_;
|
|
548
|
-
const [h, s, l, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(
|
|
548
|
+
const [h, s, l, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')));
|
|
549
549
|
return new $83fe1a57d631223b$var$HSLColor($83fe1a57d631223b$var$mod(h, 360), (0, $5BFmN$reactstatelyutils.clamp)(s, 0, 100), (0, $5BFmN$reactstatelyutils.clamp)(l, 0, 100), (0, $5BFmN$reactstatelyutils.clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
toString(format =
|
|
552
|
+
toString(format = 'css') {
|
|
553
553
|
switch(format){
|
|
554
|
-
case
|
|
555
|
-
return this.toRGB().toString(
|
|
556
|
-
case
|
|
557
|
-
return this.toRGB().toString(
|
|
558
|
-
case
|
|
554
|
+
case 'hex':
|
|
555
|
+
return this.toRGB().toString('hex');
|
|
556
|
+
case 'hexa':
|
|
557
|
+
return this.toRGB().toString('hexa');
|
|
558
|
+
case 'hsl':
|
|
559
559
|
return `hsl(${this.hue}, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.lightness, 2)}%)`;
|
|
560
|
-
case
|
|
561
|
-
case
|
|
560
|
+
case 'css':
|
|
561
|
+
case 'hsla':
|
|
562
562
|
return `hsla(${this.hue}, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $5BFmN$reactstatelyutils.toFixedNumber)(this.lightness, 2)}%, ${this.alpha})`;
|
|
563
563
|
default:
|
|
564
564
|
return this.toFormat(format).toString(format);
|
|
@@ -566,17 +566,17 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
|
|
|
566
566
|
}
|
|
567
567
|
toFormat(format) {
|
|
568
568
|
switch(format){
|
|
569
|
-
case
|
|
570
|
-
case
|
|
569
|
+
case 'hsl':
|
|
570
|
+
case 'hsla':
|
|
571
571
|
return this;
|
|
572
|
-
case
|
|
573
|
-
case
|
|
572
|
+
case 'hsb':
|
|
573
|
+
case 'hsba':
|
|
574
574
|
return this.toHSB();
|
|
575
|
-
case
|
|
576
|
-
case
|
|
575
|
+
case 'rgb':
|
|
576
|
+
case 'rgba':
|
|
577
577
|
return this.toRGB();
|
|
578
578
|
default:
|
|
579
|
-
throw new Error(
|
|
579
|
+
throw new Error('Unsupported color conversion: hsl -> ' + format);
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
582
|
/**
|
|
@@ -607,22 +607,22 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
|
|
|
607
607
|
}
|
|
608
608
|
getChannelRange(channel) {
|
|
609
609
|
switch(channel){
|
|
610
|
-
case
|
|
610
|
+
case 'hue':
|
|
611
611
|
return {
|
|
612
612
|
minValue: 0,
|
|
613
613
|
maxValue: 360,
|
|
614
614
|
step: 1,
|
|
615
615
|
pageSize: 15
|
|
616
616
|
};
|
|
617
|
-
case
|
|
618
|
-
case
|
|
617
|
+
case 'saturation':
|
|
618
|
+
case 'lightness':
|
|
619
619
|
return {
|
|
620
620
|
minValue: 0,
|
|
621
621
|
maxValue: 100,
|
|
622
622
|
step: 1,
|
|
623
623
|
pageSize: 10
|
|
624
624
|
};
|
|
625
|
-
case
|
|
625
|
+
case 'alpha':
|
|
626
626
|
return {
|
|
627
627
|
minValue: 0,
|
|
628
628
|
maxValue: 1,
|
|
@@ -630,35 +630,35 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
|
|
|
630
630
|
pageSize: 0.1
|
|
631
631
|
};
|
|
632
632
|
default:
|
|
633
|
-
throw new Error(
|
|
633
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
634
634
|
}
|
|
635
635
|
}
|
|
636
636
|
getChannelFormatOptions(channel) {
|
|
637
637
|
switch(channel){
|
|
638
|
-
case
|
|
638
|
+
case 'hue':
|
|
639
639
|
return {
|
|
640
|
-
style:
|
|
641
|
-
unit:
|
|
642
|
-
unitDisplay:
|
|
640
|
+
style: 'unit',
|
|
641
|
+
unit: 'degree',
|
|
642
|
+
unitDisplay: 'narrow'
|
|
643
643
|
};
|
|
644
|
-
case
|
|
645
|
-
case
|
|
646
|
-
case
|
|
644
|
+
case 'saturation':
|
|
645
|
+
case 'lightness':
|
|
646
|
+
case 'alpha':
|
|
647
647
|
return {
|
|
648
|
-
style:
|
|
648
|
+
style: 'percent'
|
|
649
649
|
};
|
|
650
650
|
default:
|
|
651
|
-
throw new Error(
|
|
651
|
+
throw new Error('Unknown color channel: ' + channel);
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
654
|
formatChannelValue(channel, locale) {
|
|
655
655
|
let options = this.getChannelFormatOptions(channel);
|
|
656
656
|
let value = this.getChannelValue(channel);
|
|
657
|
-
if (channel ===
|
|
657
|
+
if (channel === 'saturation' || channel === 'lightness') value /= 100;
|
|
658
658
|
return new (0, $5BFmN$internationalizednumber.NumberFormatter)(locale, options).format(value);
|
|
659
659
|
}
|
|
660
660
|
getColorSpace() {
|
|
661
|
-
return
|
|
661
|
+
return 'hsl';
|
|
662
662
|
}
|
|
663
663
|
getColorChannels() {
|
|
664
664
|
return $83fe1a57d631223b$var$HSLColor.colorChannels;
|
|
@@ -672,16 +672,16 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
|
|
|
672
672
|
}
|
|
673
673
|
}
|
|
674
674
|
$83fe1a57d631223b$var$HSLColor.colorChannels = [
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
675
|
+
'hue',
|
|
676
|
+
'saturation',
|
|
677
|
+
'lightness'
|
|
678
678
|
];
|
|
679
679
|
// https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
680
680
|
function $83fe1a57d631223b$var$toOKLCH(color) {
|
|
681
|
-
let rgb = color.toFormat(
|
|
682
|
-
let red = rgb.getChannelValue(
|
|
683
|
-
let green = rgb.getChannelValue(
|
|
684
|
-
let blue = rgb.getChannelValue(
|
|
681
|
+
let rgb = color.toFormat('rgb');
|
|
682
|
+
let red = rgb.getChannelValue('red') / 255;
|
|
683
|
+
let green = rgb.getChannelValue('green') / 255;
|
|
684
|
+
let blue = rgb.getChannelValue('blue') / 255;
|
|
685
685
|
[red, green, blue] = $83fe1a57d631223b$var$lin_sRGB(red, green, blue);
|
|
686
686
|
let [x, y, z] = $83fe1a57d631223b$var$lin_sRGB_to_XYZ(red, green, blue);
|
|
687
687
|
let [l, a, b] = $83fe1a57d631223b$var$XYZ_to_OKLab(x, y, z);
|