nhb-toolbox 3.4.2 → 3.4.6
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/colors/Color.d.ts +26 -23
- package/dist/colors/Color.d.ts.map +1 -1
- package/dist/colors/Color.js +61 -50
- package/dist/colors/convert.js +2 -2
- package/dist/colors/types.d.ts +7 -1
- package/dist/colors/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/colors/Color.d.ts
CHANGED
|
@@ -1,30 +1,40 @@
|
|
|
1
1
|
import type { AlphaColors, ColorType, Hex6, Hex8, HSL, HSLA, OpacityValue, RGB, RGBA, SolidColors } from './types';
|
|
2
2
|
/**
|
|
3
|
-
* * Class representing a color and its conversions
|
|
4
|
-
* * It has 1 instance method to apply opacity to `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` color.
|
|
3
|
+
* * Class representing a color and its conversions among `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` and `HSLA` formats.
|
|
4
|
+
* * It has 1 instance method `applyOpacity()` to apply opacity to `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` color.
|
|
5
5
|
* * It has 6 static methods that can be used to check if a color is in `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` format.
|
|
6
6
|
*
|
|
7
7
|
* @property {Hex} hex - The color in `Hex` format.
|
|
8
|
+
* @property {Hex8} hex8 - The color in `Hex8` format.
|
|
8
9
|
* @property {RGB} rgb - The color in `RGB` format.
|
|
10
|
+
* @property {RGBA} rgba - The color in `RGBA` format.
|
|
9
11
|
* @property {HSL} hsl - The color in `HSL` format.
|
|
12
|
+
* @property {HSLA} hsla - The color in `HSLA` format.
|
|
10
13
|
*
|
|
11
14
|
* @example
|
|
12
|
-
* const color = new Color("#ff5733"); // Accepts a color in `Hex`, `RGB` or `
|
|
15
|
+
* const color = new Color("#ff5733"); // Accepts a color in `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` format.
|
|
16
|
+
* console.log(color.hex); // Get Hex equivalent
|
|
17
|
+
* console.log(color.hex8); // Get Hex8 equivalent
|
|
13
18
|
* console.log(color.rgb); // Get RGB equivalent
|
|
19
|
+
* console.log(color.rgba); // Get RGBA equivalent
|
|
14
20
|
* console.log(color.hsl); // Get HSL equivalent
|
|
21
|
+
* console.log(color.hsla); // Get HSLA equivalent
|
|
15
22
|
*
|
|
16
23
|
* @example
|
|
17
24
|
* const randomColor = new Color(); // Generate a random color
|
|
18
|
-
* console.log(randomColor.hex, randomColor.rgb, randomColor.hsl);
|
|
25
|
+
* console.log(randomColor.hex, randomColor.rgb, randomColor.hsl, randomColor.hex8, randomColor.rgba, randomColor.hsla); // Get RGBA and HSLA equivalent
|
|
19
26
|
*/
|
|
20
27
|
export declare class Color {
|
|
21
|
-
hex: Hex6
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
hex: Hex6;
|
|
29
|
+
hex8: Hex8;
|
|
30
|
+
rgb: RGB;
|
|
31
|
+
rgba: RGBA;
|
|
32
|
+
hsl: HSL;
|
|
33
|
+
hsla: HSLA;
|
|
24
34
|
/** - Iterates over the color representations (Hex, RGB, HSL). */
|
|
25
35
|
[Symbol.iterator](): Generator<Hex6 | RGB | HSL | Hex8 | RGBA | HSLA, void, unknown>;
|
|
26
36
|
/**
|
|
27
|
-
* * Creates a new Color instance, optionally
|
|
37
|
+
* * Creates a new `Color` instance, optionally converts an input color to other 5 different color formats.
|
|
28
38
|
*
|
|
29
39
|
* @param toConvert - The color to convert. If not provided, a random color is generated.
|
|
30
40
|
*/
|
|
@@ -45,61 +55,54 @@ export declare class Color {
|
|
|
45
55
|
* @example
|
|
46
56
|
* const alphaColor = new Color("#ff000080"); // Color with 50% opacity
|
|
47
57
|
* const alpha75 = alphaColor.applyOpacity(75); // Change to 75% opacity
|
|
48
|
-
* console.log(alpha75.hex8); // #
|
|
58
|
+
* console.log(alpha75.hex8); // #FF0000BF
|
|
49
59
|
*/
|
|
50
60
|
applyOpacity(opacity: OpacityValue): SolidColors & AlphaColors;
|
|
51
61
|
/**
|
|
52
|
-
* @static
|
|
53
|
-
* Checks if a color is in `Hex6` format.
|
|
62
|
+
* @static Checks if a color is in `Hex6` format.
|
|
54
63
|
*
|
|
55
64
|
* @param color Color to check.
|
|
56
65
|
* @returns Boolean: `true` if it's a `Hex6` color, `false` if not.
|
|
57
66
|
*/
|
|
58
67
|
static isHex6(color: string): color is Hex6;
|
|
59
68
|
/**
|
|
60
|
-
* @static
|
|
61
|
-
* Checks if a color is in `Hex8` format.
|
|
69
|
+
* @static Checks if a color is in `Hex8` format.
|
|
62
70
|
*
|
|
63
71
|
* @param color Color to check.
|
|
64
72
|
* @returns Boolean: `true` if it's a `Hex8` color, `false` if not.
|
|
65
73
|
*/
|
|
66
74
|
static isHex8(color: string): color is Hex8;
|
|
67
75
|
/**
|
|
68
|
-
* @static
|
|
69
|
-
* Checks if a color is in `RGB` format.
|
|
76
|
+
* @static Checks if a color is in `RGB` format.
|
|
70
77
|
*
|
|
71
78
|
* @param color Color to check.
|
|
72
79
|
* @returns Boolean: `true` if it's an `RGB` color, `false` if not.
|
|
73
80
|
*/
|
|
74
81
|
static isRGB(color: string): color is RGB;
|
|
75
82
|
/**
|
|
76
|
-
* @static
|
|
77
|
-
* Checks if a color is in `RGBA` format.
|
|
83
|
+
* @static Checks if a color is in `RGBA` format.
|
|
78
84
|
*
|
|
79
85
|
* @param color Color to check.
|
|
80
86
|
* @returns Boolean: `true` if it's an `RGBA` color, `false` if not.
|
|
81
87
|
*/
|
|
82
88
|
static isRGBA(color: string): color is RGBA;
|
|
83
89
|
/**
|
|
84
|
-
* @static
|
|
85
|
-
* Checks if a color is in `HSL` format.
|
|
90
|
+
* @static Checks if a color is in `HSL` format.
|
|
86
91
|
*
|
|
87
92
|
* @param color Color to check.
|
|
88
93
|
* @returns Boolean: `true` if it's an `HSL` color, `false` if not.
|
|
89
94
|
*/
|
|
90
95
|
static isHSL(color: string): color is HSL;
|
|
91
96
|
/**
|
|
92
|
-
* @static
|
|
93
|
-
* Checks if a color is in `HSLA` format.
|
|
97
|
+
* @static Checks if a color is in `HSLA` format.
|
|
94
98
|
*
|
|
95
99
|
* @param color Color to check.
|
|
96
100
|
* @returns Boolean: `true` if it's an `HSLA` color, `false` if not.
|
|
97
101
|
*/
|
|
98
102
|
static isHSLA(color: string): color is HSLA;
|
|
99
103
|
/**
|
|
100
|
-
*
|
|
104
|
+
* @private Converts the given color to all other formats while preserving the original.
|
|
101
105
|
*
|
|
102
|
-
* @private
|
|
103
106
|
* @param color - The color to convert.
|
|
104
107
|
* @returns An object containing Hex, RGB, and HSL representations.
|
|
105
108
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/colors/Color.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACX,WAAW,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,IAAI,EACJ,WAAW,EACX,MAAM,SAAS,CAAC;AAKjB
|
|
1
|
+
{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/colors/Color.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACX,WAAW,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,IAAI,EACJ,WAAW,EACX,MAAM,SAAS,CAAC;AAKjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,KAAK;IACV,GAAG,EAAE,IAAI,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IAElB,iEAAiE;IAChE,CAAC,MAAM,CAAC,QAAQ,CAAC;IASlB;;;;OAIG;gBACS,SAAS,CAAC,EAAE,SAAS;IA2CjC;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW,GAAG,WAAW;IAkB9D;;;;;OAKG;WACW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAIlD;;;;;OAKG;WACW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAIlD;;;;;OAKG;WACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIhD;;;;;OAKG;WACW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAMlD;;;;;OAKG;WACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIhD;;;;;OAKG;WACW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAMlD;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;CAuB7B"}
|
package/dist/colors/Color.js
CHANGED
|
@@ -2,61 +2,91 @@ import { convertColorCode } from './convert';
|
|
|
2
2
|
import { _convertOpacityToHex, _extractAlphaColorValues, _extractSolidColorValues, } from './helpers';
|
|
3
3
|
import { generateRandomHSLColor } from './random';
|
|
4
4
|
const hsl = generateRandomHSLColor();
|
|
5
|
-
const
|
|
5
|
+
const { hex, rgb } = convertColorCode(hsl);
|
|
6
6
|
/**
|
|
7
|
-
* * Class representing a color and its conversions
|
|
8
|
-
* * It has 1 instance method to apply opacity to `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` color.
|
|
7
|
+
* * Class representing a color and its conversions among `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` and `HSLA` formats.
|
|
8
|
+
* * It has 1 instance method `applyOpacity()` to apply opacity to `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` color.
|
|
9
9
|
* * It has 6 static methods that can be used to check if a color is in `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` format.
|
|
10
10
|
*
|
|
11
11
|
* @property {Hex} hex - The color in `Hex` format.
|
|
12
|
+
* @property {Hex8} hex8 - The color in `Hex8` format.
|
|
12
13
|
* @property {RGB} rgb - The color in `RGB` format.
|
|
14
|
+
* @property {RGBA} rgba - The color in `RGBA` format.
|
|
13
15
|
* @property {HSL} hsl - The color in `HSL` format.
|
|
16
|
+
* @property {HSLA} hsla - The color in `HSLA` format.
|
|
14
17
|
*
|
|
15
18
|
* @example
|
|
16
|
-
* const color = new Color("#ff5733"); // Accepts a color in `Hex`, `RGB` or `
|
|
19
|
+
* const color = new Color("#ff5733"); // Accepts a color in `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` or `HSLA` format.
|
|
20
|
+
* console.log(color.hex); // Get Hex equivalent
|
|
21
|
+
* console.log(color.hex8); // Get Hex8 equivalent
|
|
17
22
|
* console.log(color.rgb); // Get RGB equivalent
|
|
23
|
+
* console.log(color.rgba); // Get RGBA equivalent
|
|
18
24
|
* console.log(color.hsl); // Get HSL equivalent
|
|
25
|
+
* console.log(color.hsla); // Get HSLA equivalent
|
|
19
26
|
*
|
|
20
27
|
* @example
|
|
21
28
|
* const randomColor = new Color(); // Generate a random color
|
|
22
|
-
* console.log(randomColor.hex, randomColor.rgb, randomColor.hsl);
|
|
29
|
+
* console.log(randomColor.hex, randomColor.rgb, randomColor.hsl, randomColor.hex8, randomColor.rgba, randomColor.hsla); // Get RGBA and HSLA equivalent
|
|
23
30
|
*/
|
|
24
31
|
export class Color {
|
|
25
32
|
hex;
|
|
33
|
+
hex8;
|
|
26
34
|
rgb;
|
|
35
|
+
rgba;
|
|
27
36
|
hsl;
|
|
37
|
+
hsla;
|
|
28
38
|
/** - Iterates over the color representations (Hex, RGB, HSL). */
|
|
29
39
|
*[Symbol.iterator]() {
|
|
30
40
|
yield this.hex;
|
|
41
|
+
yield this.hex8;
|
|
31
42
|
yield this.rgb;
|
|
43
|
+
yield this.rgba;
|
|
32
44
|
yield this.hsl;
|
|
45
|
+
yield this.hsla;
|
|
33
46
|
}
|
|
34
47
|
/**
|
|
35
|
-
* * Creates a new Color instance, optionally
|
|
48
|
+
* * Creates a new `Color` instance, optionally converts an input color to other 5 different color formats.
|
|
36
49
|
*
|
|
37
50
|
* @param toConvert - The color to convert. If not provided, a random color is generated.
|
|
38
51
|
*/
|
|
39
52
|
constructor(toConvert) {
|
|
40
53
|
if (toConvert) {
|
|
41
|
-
const
|
|
42
|
-
if ('hex8' in
|
|
43
|
-
//
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
this.
|
|
54
|
+
const colors = this._convertColorToOthers(toConvert);
|
|
55
|
+
if ('hex8' in colors) {
|
|
56
|
+
// Extract alpha color values (Hex8, RGBA, HSLA)
|
|
57
|
+
const rgbaValues = _extractAlphaColorValues(colors.rgba);
|
|
58
|
+
const hslaValues = _extractAlphaColorValues(colors.hsla);
|
|
59
|
+
this.hex = colors.hex8.toUpperCase().slice(0, 7);
|
|
60
|
+
this.hex8 = colors.hex8.toUpperCase();
|
|
61
|
+
this.rgb = `rgb(${rgbaValues[0]}, ${rgbaValues[1]}, ${rgbaValues[2]})`;
|
|
62
|
+
this.rgba = colors.rgba;
|
|
63
|
+
this.hsl = `hsl(${hslaValues[0]}, ${hslaValues[1]}%, ${hslaValues[2]}%)`;
|
|
64
|
+
this.hsla = colors.hsla;
|
|
47
65
|
}
|
|
48
66
|
else {
|
|
49
|
-
//
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
this.
|
|
67
|
+
// Extract solid color values (Hex, RGB, HSL)
|
|
68
|
+
const rgbValues = _extractSolidColorValues(colors.rgb);
|
|
69
|
+
const hslValues = _extractSolidColorValues(colors.hsl);
|
|
70
|
+
this.hex = colors.hex.toUpperCase();
|
|
71
|
+
this.hex8 =
|
|
72
|
+
`${colors.hex.toUpperCase()}${_convertOpacityToHex(100)}`;
|
|
73
|
+
this.rgb = colors.rgb;
|
|
74
|
+
this.rgba = `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, 1)`;
|
|
75
|
+
this.hsl = colors.hsl;
|
|
76
|
+
this.hsla = `hsla(${hslValues[0]}, ${hslValues[1]}%, ${hslValues[2]}%, 1)`;
|
|
53
77
|
}
|
|
54
78
|
}
|
|
55
79
|
else {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
80
|
+
const rgbValues = _extractSolidColorValues(rgb);
|
|
81
|
+
const hslValues = _extractSolidColorValues(hsl);
|
|
82
|
+
// Generate random colors
|
|
83
|
+
this.hex = hex.toUpperCase();
|
|
84
|
+
this.hex8 =
|
|
85
|
+
`${hex.toUpperCase()}${_convertOpacityToHex(100)}`;
|
|
86
|
+
this.rgb = rgb;
|
|
87
|
+
this.rgba = `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, 1)`;
|
|
59
88
|
this.hsl = hsl;
|
|
89
|
+
this.hsla = `hsla(${hslValues[0]}, ${hslValues[1]}%, ${hslValues[2]}%, 1)`;
|
|
60
90
|
}
|
|
61
91
|
}
|
|
62
92
|
/**
|
|
@@ -75,38 +105,25 @@ export class Color {
|
|
|
75
105
|
* @example
|
|
76
106
|
* const alphaColor = new Color("#ff000080"); // Color with 50% opacity
|
|
77
107
|
* const alpha75 = alphaColor.applyOpacity(75); // Change to 75% opacity
|
|
78
|
-
* console.log(alpha75.hex8); // #
|
|
108
|
+
* console.log(alpha75.hex8); // #FF0000BF
|
|
79
109
|
*/
|
|
80
110
|
applyOpacity(opacity) {
|
|
81
111
|
const validOpacity = Math.min(100, Math.max(0, opacity));
|
|
82
112
|
const alphaHex = _convertOpacityToHex(opacity);
|
|
83
113
|
const alphaDecimal = validOpacity / 100;
|
|
84
|
-
if (Color.isHex8(this.hex)) {
|
|
85
|
-
const rgbaValues = _extractAlphaColorValues(this.rgb);
|
|
86
|
-
const hslaValues = _extractAlphaColorValues(this.hsl);
|
|
87
|
-
return {
|
|
88
|
-
hex: this.hex.slice(0, 7),
|
|
89
|
-
hex8: `${this.hex.slice(0, 7)}${alphaHex}`,
|
|
90
|
-
rgb: `rgba(${rgbaValues[0]}, ${rgbaValues[1]}, ${rgbaValues[2]})`,
|
|
91
|
-
rgba: `rgba(${rgbaValues[0]}, ${rgbaValues[1]}, ${rgbaValues[2]}, ${alphaDecimal})`,
|
|
92
|
-
hsl: `hsla(${hslaValues[0]}, ${hslaValues[1]}%, ${hslaValues[2]}%)`,
|
|
93
|
-
hsla: `hsla(${hslaValues[0]}, ${hslaValues[1]}%, ${hslaValues[2]}%, ${alphaDecimal})`,
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
114
|
const rgbValues = _extractSolidColorValues(this.rgb);
|
|
97
115
|
const hslValues = _extractSolidColorValues(this.hsl);
|
|
98
116
|
return {
|
|
99
|
-
hex: this.hex,
|
|
100
|
-
hex8: `${this.hex}${alphaHex}
|
|
101
|
-
rgb:
|
|
117
|
+
hex: this.hex.slice(0, 7).toUpperCase(),
|
|
118
|
+
hex8: `${this.hex.slice(0, 7)}${alphaHex}`.toUpperCase(),
|
|
119
|
+
rgb: `rgb(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]})`,
|
|
102
120
|
rgba: `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, ${alphaDecimal})`,
|
|
103
|
-
hsl:
|
|
121
|
+
hsl: `hsl(${hslValues[0]}, ${hslValues[1]}%, ${hslValues[2]}%)`,
|
|
104
122
|
hsla: `hsla(${hslValues[0]}, ${hslValues[1]}%, ${hslValues[2]}%, ${alphaDecimal})`,
|
|
105
123
|
};
|
|
106
124
|
}
|
|
107
125
|
/**
|
|
108
|
-
* @static
|
|
109
|
-
* Checks if a color is in `Hex6` format.
|
|
126
|
+
* @static Checks if a color is in `Hex6` format.
|
|
110
127
|
*
|
|
111
128
|
* @param color Color to check.
|
|
112
129
|
* @returns Boolean: `true` if it's a `Hex6` color, `false` if not.
|
|
@@ -115,8 +132,7 @@ export class Color {
|
|
|
115
132
|
return /^#[0-9A-Fa-f]{6}$/.test(color);
|
|
116
133
|
}
|
|
117
134
|
/**
|
|
118
|
-
* @static
|
|
119
|
-
* Checks if a color is in `Hex8` format.
|
|
135
|
+
* @static Checks if a color is in `Hex8` format.
|
|
120
136
|
*
|
|
121
137
|
* @param color Color to check.
|
|
122
138
|
* @returns Boolean: `true` if it's a `Hex8` color, `false` if not.
|
|
@@ -125,8 +141,7 @@ export class Color {
|
|
|
125
141
|
return /^#[0-9A-Fa-f]{8}$/.test(color);
|
|
126
142
|
}
|
|
127
143
|
/**
|
|
128
|
-
* @static
|
|
129
|
-
* Checks if a color is in `RGB` format.
|
|
144
|
+
* @static Checks if a color is in `RGB` format.
|
|
130
145
|
*
|
|
131
146
|
* @param color Color to check.
|
|
132
147
|
* @returns Boolean: `true` if it's an `RGB` color, `false` if not.
|
|
@@ -135,8 +150,7 @@ export class Color {
|
|
|
135
150
|
return /^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/.test(color);
|
|
136
151
|
}
|
|
137
152
|
/**
|
|
138
|
-
* @static
|
|
139
|
-
* Checks if a color is in `RGBA` format.
|
|
153
|
+
* @static Checks if a color is in `RGBA` format.
|
|
140
154
|
*
|
|
141
155
|
* @param color Color to check.
|
|
142
156
|
* @returns Boolean: `true` if it's an `RGBA` color, `false` if not.
|
|
@@ -145,8 +159,7 @@ export class Color {
|
|
|
145
159
|
return /^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(0|1|0?\.\d+)\)$/.test(color);
|
|
146
160
|
}
|
|
147
161
|
/**
|
|
148
|
-
* @static
|
|
149
|
-
* Checks if a color is in `HSL` format.
|
|
162
|
+
* @static Checks if a color is in `HSL` format.
|
|
150
163
|
*
|
|
151
164
|
* @param color Color to check.
|
|
152
165
|
* @returns Boolean: `true` if it's an `HSL` color, `false` if not.
|
|
@@ -155,8 +168,7 @@ export class Color {
|
|
|
155
168
|
return /^hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%\)$/.test(color);
|
|
156
169
|
}
|
|
157
170
|
/**
|
|
158
|
-
* @static
|
|
159
|
-
* Checks if a color is in `HSLA` format.
|
|
171
|
+
* @static Checks if a color is in `HSLA` format.
|
|
160
172
|
*
|
|
161
173
|
* @param color Color to check.
|
|
162
174
|
* @returns Boolean: `true` if it's an `HSLA` color, `false` if not.
|
|
@@ -165,9 +177,8 @@ export class Color {
|
|
|
165
177
|
return /^hsla\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}%,\s*(0|1|0?\.\d+)\)$/.test(color);
|
|
166
178
|
}
|
|
167
179
|
/**
|
|
168
|
-
*
|
|
180
|
+
* @private Converts the given color to all other formats while preserving the original.
|
|
169
181
|
*
|
|
170
|
-
* @private
|
|
171
182
|
* @param color - The color to convert.
|
|
172
183
|
* @returns An object containing Hex, RGB, and HSL representations.
|
|
173
184
|
*/
|
package/dist/colors/convert.js
CHANGED
|
@@ -166,7 +166,7 @@ export const convertRgbaToHex8 = (r, g, b, a = 1) => {
|
|
|
166
166
|
}
|
|
167
167
|
const hex = convertRgbToHex(r, g, b);
|
|
168
168
|
const alphaHex = _convertOpacityToHex(Math.round(newAlpha * 100));
|
|
169
|
-
return
|
|
169
|
+
return `${hex}${alphaHex}`;
|
|
170
170
|
};
|
|
171
171
|
/**
|
|
172
172
|
* * Converts HSLA to RGBA color format, including alpha channel.
|
|
@@ -239,7 +239,7 @@ export const convertHslaToHex8 = (h, s, l, a = 1) => {
|
|
|
239
239
|
}
|
|
240
240
|
const hex = convertHslToHex(h, s, l);
|
|
241
241
|
const alphaHex = _convertOpacityToHex(Math.round(newAlpha * 100));
|
|
242
|
-
return
|
|
242
|
+
return `${hex}${alphaHex}`;
|
|
243
243
|
};
|
|
244
244
|
/**
|
|
245
245
|
* * Converts Hex8 to HSLA color format.
|
package/dist/colors/types.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export type ColorInput = string | number;
|
|
|
4
4
|
/** - An array of strings/numbers or nested arrays of strings/numbers for generating colors. */
|
|
5
5
|
export interface ColorInputArray extends Array<ColorInput | ColorInputArray> {
|
|
6
6
|
}
|
|
7
|
-
/** - Opacity
|
|
7
|
+
/** - Opacity value in percentage `(0% - 100%)` without `%` symbol. */
|
|
8
8
|
export type OpacityValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
|
|
9
9
|
/**
|
|
10
10
|
* * Represents a hexadecimal color code.
|
|
@@ -57,14 +57,20 @@ export type ColorTypeAlpha = Hex8 | RGBA | HSLA;
|
|
|
57
57
|
export type ColorType = Hex | Hex6 | RGB | HSL | Hex8 | RGBA | HSLA;
|
|
58
58
|
/** - Colors Object that includes `Hex8`, `RGBA` and `HSLA` formats of the same color. */
|
|
59
59
|
export interface SolidColors {
|
|
60
|
+
/** Represents a normal Hex color */
|
|
60
61
|
hex: Hex6;
|
|
62
|
+
/** Represents a normal RGB color */
|
|
61
63
|
rgb: RGB;
|
|
64
|
+
/** Represents a normal HSL color */
|
|
62
65
|
hsl: HSL;
|
|
63
66
|
}
|
|
64
67
|
/** - Colors Object that includes `Hex`, `RGB` and `HSL` formats of the same color. */
|
|
65
68
|
export interface AlphaColors {
|
|
69
|
+
/** Represents a Hex color with alpha channel */
|
|
66
70
|
hex8: Hex8;
|
|
71
|
+
/** Represents a RGBA color with alpha channel */
|
|
67
72
|
rgba: RGBA;
|
|
73
|
+
/** Represents a HSLA color with alpha channel */
|
|
68
74
|
hsla: HSLA;
|
|
69
75
|
}
|
|
70
76
|
/** * Represents a tuple of three numerical values corresponding to RGB or HSL color components. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/colors/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,+CAA+C;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,+FAA+F;AAC/F,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,UAAU,GAAG,eAAe,CAAC;CAAG;AAE/E,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/colors/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nhb-toolbox",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.6",
|
|
4
4
|
"description": "A versatile collection of smart, efficient, and reusable utility functions for everyday development needs.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"build": "node scripts/build.mjs",
|
|
58
58
|
"test": "jest --coverage --verbose",
|
|
59
59
|
"format": "prettier --write .",
|
|
60
|
-
"lint": "node scripts
|
|
60
|
+
"lint": "node scripts/lint.mjs",
|
|
61
61
|
"fix": "node scripts/fix.mjs",
|
|
62
62
|
"commit": "node scripts/commit.mjs"
|
|
63
63
|
}
|