@thednp/color-picker 0.0.2-alpha1 → 0.0.2-alpha4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -1
- package/dist/js/color-esm.js +94 -105
- package/dist/js/color-esm.min.js +2 -2
- package/dist/js/color-palette-esm.js +105 -119
- package/dist/js/color-palette-esm.min.js +2 -2
- package/dist/js/color-palette.js +105 -119
- package/dist/js/color-palette.min.js +2 -2
- package/dist/js/color-picker-element-esm.js +279 -375
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +279 -375
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +235 -323
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +235 -323
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +94 -105
- package/dist/js/color.min.js +2 -2
- package/package.json +7 -4
- package/src/js/color-palette.js +10 -13
- package/src/js/color-picker-element.js +46 -54
- package/src/js/color-picker.js +131 -206
- package/src/js/color.js +93 -106
- package/types/cp.d.ts +31 -29
- package/types/source/types.d.ts +1 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPalette v0.0.
|
2
|
+
* ColorPalette v0.0.2alpha4 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -141,6 +141,8 @@ function isColorName(color) {
|
|
141
141
|
if (nonColors.includes(color)
|
142
142
|
|| ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
|
143
143
|
|
144
|
+
if (['black', 'white'].includes(color)) return true;
|
145
|
+
|
144
146
|
return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
|
145
147
|
setElementStyle(documentHead, { color });
|
146
148
|
const computedColor = getElementStyle(documentHead, 'color');
|
@@ -167,6 +169,11 @@ function isValidCSSUnit(color) {
|
|
167
169
|
*/
|
168
170
|
function bound01(N, max) {
|
169
171
|
let n = N;
|
172
|
+
|
173
|
+
if (typeof N === 'number'
|
174
|
+
&& Math.min(N, 0) === 0 // round values to 6 decimals Math.round(N * (10 ** 6)) / 10 ** 6
|
175
|
+
&& Math.max(N, 1) === 1) return N;
|
176
|
+
|
170
177
|
if (isOnePointZero(N)) n = '100%';
|
171
178
|
|
172
179
|
const processPercent = isPercentage(n);
|
@@ -270,15 +277,12 @@ function pad2(c) {
|
|
270
277
|
/**
|
271
278
|
* Converts an RGB colour value to HSL.
|
272
279
|
*
|
273
|
-
* @param {number}
|
274
|
-
* @param {number}
|
275
|
-
* @param {number}
|
280
|
+
* @param {number} r Red component [0, 1]
|
281
|
+
* @param {number} g Green component [0, 1]
|
282
|
+
* @param {number} b Blue component [0, 1]
|
276
283
|
* @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
|
277
284
|
*/
|
278
|
-
function rgbToHsl(
|
279
|
-
const r = R / 255;
|
280
|
-
const g = G / 255;
|
281
|
-
const b = B / 255;
|
285
|
+
function rgbToHsl(r, g, b) {
|
282
286
|
const max = Math.max(r, g, b);
|
283
287
|
const min = Math.min(r, g, b);
|
284
288
|
let h = 0;
|
@@ -290,17 +294,10 @@ function rgbToHsl(R, G, B) {
|
|
290
294
|
} else {
|
291
295
|
const d = max - min;
|
292
296
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
case g:
|
298
|
-
h = (b - r) / d + 2;
|
299
|
-
break;
|
300
|
-
case b:
|
301
|
-
h = (r - g) / d + 4;
|
302
|
-
break;
|
303
|
-
}
|
297
|
+
if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
|
298
|
+
if (max === g) h = (b - r) / d + 2;
|
299
|
+
if (max === b) h = (r - g) / d + 4;
|
300
|
+
|
304
301
|
h /= 6;
|
305
302
|
}
|
306
303
|
return { h, s, l };
|
@@ -329,7 +326,7 @@ function hueToRgb(p, q, t) {
|
|
329
326
|
* @param {number} h Hue Angle [0, 1]
|
330
327
|
* @param {number} s Saturation [0, 1]
|
331
328
|
* @param {number} l Lightness Angle [0, 1]
|
332
|
-
* @returns {CP.RGB} {r,g,b} object with [0,
|
329
|
+
* @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
333
330
|
*/
|
334
331
|
function hslToRgb(h, s, l) {
|
335
332
|
let r = 0;
|
@@ -348,7 +345,6 @@ function hslToRgb(h, s, l) {
|
|
348
345
|
g = hueToRgb(p, q, h);
|
349
346
|
b = hueToRgb(p, q, h - 1 / 3);
|
350
347
|
}
|
351
|
-
[r, g, b] = [r, g, b].map((x) => x * 255);
|
352
348
|
|
353
349
|
return { r, g, b };
|
354
350
|
}
|
@@ -358,16 +354,12 @@ function hslToRgb(h, s, l) {
|
|
358
354
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
359
355
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
360
356
|
*
|
361
|
-
* @param {number}
|
362
|
-
* @param {number}
|
363
|
-
* @param {number}
|
357
|
+
* @param {number} r Red component [0, 1]
|
358
|
+
* @param {number} g Green [0, 1]
|
359
|
+
* @param {number} b Blue [0, 1]
|
364
360
|
* @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
|
365
361
|
*/
|
366
|
-
function rgbToHwb(
|
367
|
-
const r = R / 255;
|
368
|
-
const g = G / 255;
|
369
|
-
const b = B / 255;
|
370
|
-
|
362
|
+
function rgbToHwb(r, g, b) {
|
371
363
|
let f = 0;
|
372
364
|
let i = 0;
|
373
365
|
const whiteness = Math.min(r, g, b);
|
@@ -397,20 +389,18 @@ function rgbToHwb(R, G, B) {
|
|
397
389
|
* @param {number} H Hue Angle [0, 1]
|
398
390
|
* @param {number} W Whiteness [0, 1]
|
399
391
|
* @param {number} B Blackness [0, 1]
|
400
|
-
* @return {CP.RGB} {r,g,b} object with [0,
|
392
|
+
* @return {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
401
393
|
*
|
402
394
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
403
395
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
404
396
|
*/
|
405
397
|
function hwbToRgb(H, W, B) {
|
406
398
|
if (W + B >= 1) {
|
407
|
-
const gray =
|
399
|
+
const gray = W / (W + B);
|
408
400
|
return { r: gray, g: gray, b: gray };
|
409
401
|
}
|
410
402
|
let { r, g, b } = hslToRgb(H, 1, 0.5);
|
411
|
-
[r, g, b] = [r, g, b]
|
412
|
-
.map((v) => (v / 255) * (1 - W - B) + W)
|
413
|
-
.map((v) => v * 255);
|
403
|
+
[r, g, b] = [r, g, b].map((v) => v * (1 - W - B) + W);
|
414
404
|
|
415
405
|
return { r, g, b };
|
416
406
|
}
|
@@ -418,15 +408,12 @@ function hwbToRgb(H, W, B) {
|
|
418
408
|
/**
|
419
409
|
* Converts an RGB colour value to HSV.
|
420
410
|
*
|
421
|
-
* @param {number}
|
422
|
-
* @param {number}
|
423
|
-
* @param {number}
|
411
|
+
* @param {number} r Red component [0, 1]
|
412
|
+
* @param {number} g Green [0, 1]
|
413
|
+
* @param {number} b Blue [0, 1]
|
424
414
|
* @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
|
425
415
|
*/
|
426
|
-
function rgbToHsv(
|
427
|
-
const r = R / 255;
|
428
|
-
const g = G / 255;
|
429
|
-
const b = B / 255;
|
416
|
+
function rgbToHsv(r, g, b) {
|
430
417
|
const max = Math.max(r, g, b);
|
431
418
|
const min = Math.min(r, g, b);
|
432
419
|
let h = 0;
|
@@ -436,17 +423,10 @@ function rgbToHsv(R, G, B) {
|
|
436
423
|
if (max === min) {
|
437
424
|
h = 0; // achromatic
|
438
425
|
} else {
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
case g:
|
444
|
-
h = (b - r) / d + 2;
|
445
|
-
break;
|
446
|
-
case b:
|
447
|
-
h = (r - g) / d + 4;
|
448
|
-
break;
|
449
|
-
}
|
426
|
+
if (r === max) h = (g - b) / d + (g < b ? 6 : 0);
|
427
|
+
if (g === max) h = (b - r) / d + 2;
|
428
|
+
if (b === max) h = (r - g) / d + 4;
|
429
|
+
|
450
430
|
h /= 6;
|
451
431
|
}
|
452
432
|
return { h, s, v };
|
@@ -470,10 +450,9 @@ function hsvToRgb(H, S, V) {
|
|
470
450
|
const q = v * (1 - f * s);
|
471
451
|
const t = v * (1 - (1 - f) * s);
|
472
452
|
const mod = i % 6;
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
[r, g, b] = [r, g, b].map((n) => n * 255);
|
453
|
+
const r = [v, q, p, p, t, v][mod];
|
454
|
+
const g = [t, v, v, q, p, p][mod];
|
455
|
+
const b = [p, p, t, v, v, q][mod];
|
477
456
|
return { r, g, b };
|
478
457
|
}
|
479
458
|
|
@@ -541,15 +520,15 @@ function rgbaToHex(r, g, b, a, allow4Char) {
|
|
541
520
|
*/
|
542
521
|
function stringInputToObject(input) {
|
543
522
|
let color = toLowerCase(input.trim());
|
523
|
+
|
544
524
|
if (color.length === 0) {
|
545
525
|
return {
|
546
526
|
r: 0, g: 0, b: 0, a: 1,
|
547
527
|
};
|
548
528
|
}
|
549
|
-
|
529
|
+
|
550
530
|
if (isColorName(color)) {
|
551
531
|
color = getRGBFromName(color);
|
552
|
-
named = true;
|
553
532
|
} else if (nonColors.includes(color)) {
|
554
533
|
const a = color === 'transparent' ? 0 : 1;
|
555
534
|
return {
|
@@ -568,24 +547,28 @@ function stringInputToObject(input) {
|
|
568
547
|
r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
|
569
548
|
};
|
570
549
|
}
|
550
|
+
|
571
551
|
[, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
|
572
552
|
if (m1 && m2 && m3/* && m4 */) {
|
573
553
|
return {
|
574
554
|
h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
|
575
555
|
};
|
576
556
|
}
|
557
|
+
|
577
558
|
[, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
|
578
559
|
if (m1 && m2 && m3/* && m4 */) {
|
579
560
|
return {
|
580
561
|
h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
|
581
562
|
};
|
582
563
|
}
|
564
|
+
|
583
565
|
[, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
|
584
566
|
if (m1 && m2 && m3) {
|
585
567
|
return {
|
586
568
|
h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
|
587
569
|
};
|
588
570
|
}
|
571
|
+
|
589
572
|
[, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
|
590
573
|
if (m1 && m2 && m3 && m4) {
|
591
574
|
return {
|
@@ -593,18 +576,20 @@ function stringInputToObject(input) {
|
|
593
576
|
g: parseIntFromHex(m2),
|
594
577
|
b: parseIntFromHex(m3),
|
595
578
|
a: convertHexToDecimal(m4),
|
596
|
-
format:
|
579
|
+
format: 'hex',
|
597
580
|
};
|
598
581
|
}
|
582
|
+
|
599
583
|
[, m1, m2, m3] = matchers.hex6.exec(color) || [];
|
600
584
|
if (m1 && m2 && m3) {
|
601
585
|
return {
|
602
586
|
r: parseIntFromHex(m1),
|
603
587
|
g: parseIntFromHex(m2),
|
604
588
|
b: parseIntFromHex(m3),
|
605
|
-
format:
|
589
|
+
format: 'hex',
|
606
590
|
};
|
607
591
|
}
|
592
|
+
|
608
593
|
[, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
|
609
594
|
if (m1 && m2 && m3 && m4) {
|
610
595
|
return {
|
@@ -612,19 +597,20 @@ function stringInputToObject(input) {
|
|
612
597
|
g: parseIntFromHex(m2 + m2),
|
613
598
|
b: parseIntFromHex(m3 + m3),
|
614
599
|
a: convertHexToDecimal(m4 + m4),
|
615
|
-
|
616
|
-
format: named ? 'rgb' : 'hex',
|
600
|
+
format: 'hex',
|
617
601
|
};
|
618
602
|
}
|
603
|
+
|
619
604
|
[, m1, m2, m3] = matchers.hex3.exec(color) || [];
|
620
605
|
if (m1 && m2 && m3) {
|
621
606
|
return {
|
622
607
|
r: parseIntFromHex(m1 + m1),
|
623
608
|
g: parseIntFromHex(m2 + m2),
|
624
609
|
b: parseIntFromHex(m3 + m3),
|
625
|
-
format:
|
610
|
+
format: 'hex',
|
626
611
|
};
|
627
612
|
}
|
613
|
+
|
628
614
|
return false;
|
629
615
|
}
|
630
616
|
|
@@ -655,6 +641,7 @@ function stringInputToObject(input) {
|
|
655
641
|
*/
|
656
642
|
function inputToRGB(input) {
|
657
643
|
let rgb = { r: 0, g: 0, b: 0 };
|
644
|
+
/** @type {*} */
|
658
645
|
let color = input;
|
659
646
|
/** @type {string | number} */
|
660
647
|
let a = 1;
|
@@ -671,39 +658,41 @@ function inputToRGB(input) {
|
|
671
658
|
let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
|
672
659
|
|
673
660
|
if (typeof input === 'string') {
|
674
|
-
// @ts-ignore -- this now is converted to object
|
675
661
|
color = stringInputToObject(input);
|
676
662
|
if (color) ok = true;
|
677
663
|
}
|
678
664
|
if (typeof color === 'object') {
|
679
665
|
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
|
680
666
|
({ r, g, b } = color);
|
681
|
-
// RGB values now are all in [0,
|
682
|
-
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255)
|
667
|
+
// RGB values now are all in [0, 1] range
|
668
|
+
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255));
|
683
669
|
rgb = { r, g, b };
|
684
670
|
ok = true;
|
685
|
-
format = 'rgb';
|
686
|
-
}
|
671
|
+
format = color.format || 'rgb';
|
672
|
+
}
|
673
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
|
687
674
|
({ h, s, v } = color);
|
688
|
-
h =
|
689
|
-
s =
|
690
|
-
v =
|
675
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
676
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
677
|
+
v = bound01(v, 100); // brightness can be `5%` or a [0, 1] value
|
691
678
|
rgb = hsvToRgb(h, s, v);
|
692
679
|
ok = true;
|
693
680
|
format = 'hsv';
|
694
|
-
}
|
681
|
+
}
|
682
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
|
695
683
|
({ h, s, l } = color);
|
696
|
-
h =
|
697
|
-
s =
|
698
|
-
l =
|
684
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
685
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
686
|
+
l = bound01(l, 100); // lightness can be `5%` or a [0, 1] value
|
699
687
|
rgb = hslToRgb(h, s, l);
|
700
688
|
ok = true;
|
701
689
|
format = 'hsl';
|
702
|
-
}
|
690
|
+
}
|
691
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
|
703
692
|
({ h, w, b } = color);
|
704
|
-
h =
|
705
|
-
w =
|
706
|
-
b =
|
693
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
694
|
+
w = bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
|
695
|
+
b = bound01(b, 100); // blackness can be `5%` or a [0, 1] value
|
707
696
|
rgb = hwbToRgb(h, w, b);
|
708
697
|
ok = true;
|
709
698
|
format = 'hwb';
|
@@ -720,9 +709,12 @@ function inputToRGB(input) {
|
|
720
709
|
return {
|
721
710
|
ok,
|
722
711
|
format,
|
723
|
-
r: Math.min(255, Math.max(rgb.r, 0)),
|
724
|
-
g: Math.min(255, Math.max(rgb.g, 0)),
|
725
|
-
b: Math.min(255, Math.max(rgb.b, 0)),
|
712
|
+
// r: Math.min(255, Math.max(rgb.r, 0)),
|
713
|
+
// g: Math.min(255, Math.max(rgb.g, 0)),
|
714
|
+
// b: Math.min(255, Math.max(rgb.b, 0)),
|
715
|
+
r: rgb.r,
|
716
|
+
g: rgb.g,
|
717
|
+
b: rgb.b,
|
726
718
|
a: boundAlpha(a),
|
727
719
|
};
|
728
720
|
}
|
@@ -741,16 +733,13 @@ class Color {
|
|
741
733
|
constructor(input, config) {
|
742
734
|
let color = input;
|
743
735
|
const configFormat = config && COLOR_FORMAT.includes(config)
|
744
|
-
? config : '
|
736
|
+
? config : '';
|
745
737
|
|
746
|
-
// If input is already a `Color`,
|
738
|
+
// If input is already a `Color`, clone its values
|
747
739
|
if (color instanceof Color) {
|
748
740
|
color = inputToRGB(color);
|
749
741
|
}
|
750
|
-
|
751
|
-
const len = `${color}`.length;
|
752
|
-
color = `#${(len === 2 ? '0' : '00')}${color}`;
|
753
|
-
}
|
742
|
+
|
754
743
|
const {
|
755
744
|
r, g, b, a, ok, format,
|
756
745
|
} = inputToRGB(color);
|
@@ -800,24 +789,21 @@ class Color {
|
|
800
789
|
let R = 0;
|
801
790
|
let G = 0;
|
802
791
|
let B = 0;
|
803
|
-
const rp = r / 255;
|
804
|
-
const rg = g / 255;
|
805
|
-
const rb = b / 255;
|
806
792
|
|
807
|
-
if (
|
808
|
-
R =
|
793
|
+
if (r <= 0.03928) {
|
794
|
+
R = r / 12.92;
|
809
795
|
} else {
|
810
|
-
R = ((
|
796
|
+
R = ((r + 0.055) / 1.055) ** 2.4;
|
811
797
|
}
|
812
|
-
if (
|
813
|
-
G =
|
798
|
+
if (g <= 0.03928) {
|
799
|
+
G = g / 12.92;
|
814
800
|
} else {
|
815
|
-
G = ((
|
801
|
+
G = ((g + 0.055) / 1.055) ** 2.4;
|
816
802
|
}
|
817
|
-
if (
|
818
|
-
B =
|
803
|
+
if (b <= 0.03928) {
|
804
|
+
B = b / 12.92;
|
819
805
|
} else {
|
820
|
-
B = ((
|
806
|
+
B = ((b + 0.055) / 1.055) ** 2.4;
|
821
807
|
}
|
822
808
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
823
809
|
}
|
@@ -827,7 +813,7 @@ class Color {
|
|
827
813
|
* @returns {number} a number in the [0, 255] range
|
828
814
|
*/
|
829
815
|
get brightness() {
|
830
|
-
const { r, g, b } = this;
|
816
|
+
const { r, g, b } = this.toRgb();
|
831
817
|
return (r * 299 + g * 587 + b * 114) / 1000;
|
832
818
|
}
|
833
819
|
|
@@ -836,12 +822,14 @@ class Color {
|
|
836
822
|
* @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
|
837
823
|
*/
|
838
824
|
toRgb() {
|
839
|
-
|
825
|
+
let {
|
840
826
|
r, g, b, a,
|
841
827
|
} = this;
|
842
828
|
|
829
|
+
[r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
|
830
|
+
a = roundPart(a * 100) / 100;
|
843
831
|
return {
|
844
|
-
r, g, b, a
|
832
|
+
r, g, b, a,
|
845
833
|
};
|
846
834
|
}
|
847
835
|
|
@@ -935,7 +923,7 @@ class Color {
|
|
935
923
|
toHsv() {
|
936
924
|
const {
|
937
925
|
r, g, b, a,
|
938
|
-
} = this
|
926
|
+
} = this;
|
939
927
|
const { h, s, v } = rgbToHsv(r, g, b);
|
940
928
|
|
941
929
|
return {
|
@@ -950,7 +938,7 @@ class Color {
|
|
950
938
|
toHsl() {
|
951
939
|
const {
|
952
940
|
r, g, b, a,
|
953
|
-
} = this
|
941
|
+
} = this;
|
954
942
|
const { h, s, l } = rgbToHsl(r, g, b);
|
955
943
|
|
956
944
|
return {
|
@@ -1035,6 +1023,7 @@ class Color {
|
|
1035
1023
|
*/
|
1036
1024
|
setAlpha(alpha) {
|
1037
1025
|
const self = this;
|
1026
|
+
if (typeof alpha !== 'number') return self;
|
1038
1027
|
self.a = boundAlpha(alpha);
|
1039
1028
|
return self;
|
1040
1029
|
}
|
@@ -1201,26 +1190,23 @@ class ColorPalette {
|
|
1201
1190
|
} else if (args.length === 2) {
|
1202
1191
|
[hueSteps, lightSteps] = args;
|
1203
1192
|
if ([hueSteps, lightSteps].some((n) => n < 1)) {
|
1204
|
-
throw TypeError('ColorPalette:
|
1193
|
+
throw TypeError('ColorPalette: both arguments must be higher than 0.');
|
1205
1194
|
}
|
1206
|
-
} else {
|
1207
|
-
throw TypeError('ColorPalette requires minimum 2 arguments');
|
1208
1195
|
}
|
1209
1196
|
|
1210
|
-
/** @type {
|
1197
|
+
/** @type {*} */
|
1211
1198
|
const colors = [];
|
1212
|
-
|
1213
1199
|
const hueStep = 360 / hueSteps;
|
1214
1200
|
const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
|
1215
|
-
const
|
1216
|
-
|
1217
|
-
|
1218
|
-
|
1219
|
-
lightStep
|
1220
|
-
|
1221
|
-
lightStep =
|
1222
|
-
|
1223
|
-
|
1201
|
+
const steps1To13 = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075];
|
1202
|
+
const lightSets = [[1, 2, 3], [4, 5], [6, 7], [8, 9], [10, 11], [12, 13]];
|
1203
|
+
const closestSet = lightSets.find((set) => set.includes(lightSteps));
|
1204
|
+
|
1205
|
+
// find a lightStep that won't go beyond black and white
|
1206
|
+
// something within the [10-90] range of lightness
|
1207
|
+
const lightStep = closestSet
|
1208
|
+
? steps1To13[lightSets.indexOf(closestSet)]
|
1209
|
+
: (100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100);
|
1224
1210
|
|
1225
1211
|
// light tints
|
1226
1212
|
for (let i = 1; i < half + 1; i += 1) {
|
@@ -1,2 +1,2 @@
|
|
1
|
-
// ColorPalette v0.0.
|
2
|
-
const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],
|
1
|
+
// ColorPalette v0.0.2alpha4 | thednp © 2022 | MIT-License
|
2
|
+
const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}function S(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,h=0;const a=(n+o)/2;if(n===o)h=0,s=0;else{const i=n-o;h=a>.5?i/(2-n-o):i/(n+o),n===t&&(s=(r-e)/i+(r<e?6:0)),n===r&&(s=(e-t)/i+2),n===e&&(s=(t-r)/i+4),s/=6}return{h:s,s:h,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,a=2*e-h;n=F(a,h,t+1/3),o=F(a,h,t),s=F(a,h,t-1/3)}return{r:n,g:o,b:s}}function M(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),a=1-h;if(h===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const i=(o-n/(h-s))/6;return{h:1===i?0:i,w:s,b:a}}function y(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),a=n-h,i=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=h%6;return{r:[s,u,i,i,c,s][l],g:[c,s,s,u,i,i][l],b:[i,i,c,s,s,u][l]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,i=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.includes(m)?m:"rgb";return"string"==typeof t&&(e=k(t),e&&(b=!0)),"object"==typeof e&&(S(e.r)&&S(e.g)&&S(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),S(e.h)&&S(e.s)&&S(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),S(e.h)&&S(e.s)&&S(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),S(e.h)&&S(e.w)&&S(e.b)&&(({h:c,w:i,b:u}=e),c=x(c,360),i=x(i,100),u=x(u,100),r=y(c,i,u),b=!0,p="hwb"),S(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:d(n)}}class j{constructor(t,r){let e=t;const n=r&&h.includes(r)?r:"";e instanceof j&&(e=_(e));const{r:o,g:s,b:a,a:i,ok:u,format:c}=_(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=i,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${a})`:`rgba(${s}, ${h}, ${a}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return`rgb(${s} ${h} ${a}${1===o?"":` / ${r(100*o)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o)/100,1===o?`hsl(${t}, ${e}%, ${n}%)`:`hsla(${t}, ${e}%, ${n}%, ${o})`}toHslCSS4String(){let{h:t,s:e,l:n,a:o}=this.toHsl();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=M(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,p(n+r/100),o);return t(this,{r:s,g:h,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,n,p(o+r/100));return t(this,{r:s,g:h,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,b:a}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}t(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:S,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:d,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:M,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class U{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],a=360/n,i=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=u.find(t=>t.includes(o)),l=c?[.25,.2,.15,.11,.09,.075][u.indexOf(c)]:100/(o+(o%2?0:1))/100;for(let t=1;t<i+1;t+=1)s=[...s,.5+l*t];for(let t=1;t<o-i;t+=1)s=[.5-l*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*a)%360/360;s.forEach(t=>{h.push(new j({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}t(U,{Color:j});export{U as default};
|