@hairy/palette 1.46.0 → 1.49.0
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/LICENSE.md +21 -21
- package/README.md +36 -36
- package/dist/index.cjs +204 -115
- package/dist/{index.d.ts → index.d.cts} +24 -8
- package/dist/index.d.mts +127 -0
- package/dist/index.mjs +201 -0
- package/package.json +16 -17
- package/dist/index.global.js +0 -338
- package/dist/index.js +0 -107
package/LICENSE.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025-PRESENT Hairyf <https://github.com/antfu>
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-PRESENT Hairyf <https://github.com/antfu>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
# @hairy/palette
|
|
2
|
-
|
|
3
|
-
[![npm version][npm-version-src]][npm-version-href]
|
|
4
|
-
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
5
|
-
[![bundle][bundle-src]][bundle-href]
|
|
6
|
-
[![JSDocs][jsdocs-src]][jsdocs-href]
|
|
7
|
-
[![License][license-src]][license-href]
|
|
8
|
-
|
|
9
|
-
## Install
|
|
10
|
-
|
|
11
|
-
```
|
|
12
|
-
ni @hairy/palette
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## CDN
|
|
16
|
-
|
|
17
|
-
```html
|
|
18
|
-
<script src="https://unpkg.com/@hairy/palette"></script>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## License
|
|
22
|
-
|
|
23
|
-
[MIT](./LICENSE) License © [Hairyf](https://github.com/hairyf)
|
|
24
|
-
|
|
25
|
-
<!-- Badges -->
|
|
26
|
-
|
|
27
|
-
[npm-version-src]: https://img.shields.io/npm/v/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669
|
|
28
|
-
[npm-version-href]: https://npmjs.com/package/@hairy/palette
|
|
29
|
-
[npm-downloads-src]: https://img.shields.io/npm/dm/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669
|
|
30
|
-
[npm-downloads-href]: https://npmjs.com/package/@hairy/palette
|
|
31
|
-
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669&label=minzip
|
|
32
|
-
[bundle-href]: https://bundlephobia.com/result?p=@hairy/palette
|
|
33
|
-
[license-src]: https://img.shields.io/github/license/hairyf/hairylib.svg?style=flat&colorA=080f12&colorB=1fa669
|
|
34
|
-
[license-href]: https://github.com/hairyf/hairylib/blob/main/LICENSE
|
|
35
|
-
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
|
|
36
|
-
[jsdocs-href]: https://www.jsdocs.io/package/@hairy/palette
|
|
1
|
+
# @hairy/palette
|
|
2
|
+
|
|
3
|
+
[![npm version][npm-version-src]][npm-version-href]
|
|
4
|
+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
5
|
+
[![bundle][bundle-src]][bundle-href]
|
|
6
|
+
[![JSDocs][jsdocs-src]][jsdocs-href]
|
|
7
|
+
[![License][license-src]][license-href]
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
ni @hairy/palette
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## CDN
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<script src="https://unpkg.com/@hairy/palette"></script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## License
|
|
22
|
+
|
|
23
|
+
[MIT](./LICENSE) License © [Hairyf](https://github.com/hairyf)
|
|
24
|
+
|
|
25
|
+
<!-- Badges -->
|
|
26
|
+
|
|
27
|
+
[npm-version-src]: https://img.shields.io/npm/v/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669
|
|
28
|
+
[npm-version-href]: https://npmjs.com/package/@hairy/palette
|
|
29
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669
|
|
30
|
+
[npm-downloads-href]: https://npmjs.com/package/@hairy/palette
|
|
31
|
+
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@hairy/palette?style=flat&colorA=080f12&colorB=1fa669&label=minzip
|
|
32
|
+
[bundle-href]: https://bundlephobia.com/result?p=@hairy/palette
|
|
33
|
+
[license-src]: https://img.shields.io/github/license/hairyf/hairylib.svg?style=flat&colorA=080f12&colorB=1fa669
|
|
34
|
+
[license-href]: https://github.com/hairyf/hairylib/blob/main/LICENSE
|
|
35
|
+
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
|
|
36
|
+
[jsdocs-href]: https://www.jsdocs.io/package/@hairy/palette
|
package/dist/index.cjs
CHANGED
|
@@ -1,152 +1,241 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
7
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
9
|
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
12
|
+
key = keys[i];
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
14
|
+
__defProp(to, key, {
|
|
15
|
+
get: ((k) => from[k]).bind(null, key),
|
|
16
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
19
22
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
)
|
|
28
|
-
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
24
|
+
value: mod,
|
|
25
|
+
enumerable: true
|
|
26
|
+
}) : target, mod));
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
let colord = require("colord");
|
|
30
|
+
let colord_plugins_a11y = require("colord/plugins/a11y");
|
|
31
|
+
colord_plugins_a11y = __toESM(colord_plugins_a11y);
|
|
32
|
+
let colord_plugins_mix = require("colord/plugins/mix");
|
|
33
|
+
colord_plugins_mix = __toESM(colord_plugins_mix);
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
textToRgb: () => textToRgb
|
|
44
|
-
});
|
|
45
|
-
module.exports = __toCommonJS(index_exports);
|
|
46
|
-
var import_colord = require("colord");
|
|
47
|
-
var import_a11y = __toESM(require("colord/plugins/a11y"), 1);
|
|
48
|
-
var import_mix = __toESM(require("colord/plugins/mix"), 1);
|
|
49
|
-
(0, import_colord.extend)([import_a11y.default, import_mix.default]);
|
|
35
|
+
//#region src/index.ts
|
|
36
|
+
(0, colord.extend)([colord_plugins_a11y.default, colord_plugins_mix.default]);
|
|
37
|
+
/**
|
|
38
|
+
* Converts a RGB/A color
|
|
39
|
+
*
|
|
40
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
|
|
41
|
+
*
|
|
42
|
+
* to its HEX/A representation as a
|
|
43
|
+
*
|
|
44
|
+
* String (`#RRGGBB<AA>`).
|
|
45
|
+
*
|
|
46
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
47
|
+
*/
|
|
50
48
|
function rgbToHex({ r, g, b, a }) {
|
|
51
|
-
|
|
49
|
+
return (0, colord.colord)({
|
|
50
|
+
r,
|
|
51
|
+
g,
|
|
52
|
+
b,
|
|
53
|
+
a
|
|
54
|
+
}).toHex();
|
|
52
55
|
}
|
|
56
|
+
/**
|
|
57
|
+
* Converts a HEX/A color
|
|
58
|
+
*
|
|
59
|
+
* String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
|
|
60
|
+
*
|
|
61
|
+
* to its RGB/A representation as an
|
|
62
|
+
*
|
|
63
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
|
|
64
|
+
*
|
|
65
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
66
|
+
*/
|
|
53
67
|
function hexToRgb(hex) {
|
|
54
|
-
|
|
68
|
+
return (0, colord.colord)(hex).toRgb();
|
|
55
69
|
}
|
|
70
|
+
/**
|
|
71
|
+
* Converts a HEX/A color
|
|
72
|
+
*
|
|
73
|
+
* String (`#RRGGBB<AA>`)
|
|
74
|
+
*
|
|
75
|
+
* to its RGB/A representation as an
|
|
76
|
+
*
|
|
77
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`) .
|
|
78
|
+
*
|
|
79
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
80
|
+
*/
|
|
56
81
|
function hsvToRgb({ h, s, v, a }) {
|
|
57
|
-
|
|
82
|
+
return (0, colord.colord)({
|
|
83
|
+
h,
|
|
84
|
+
s,
|
|
85
|
+
v,
|
|
86
|
+
a
|
|
87
|
+
}).toRgb();
|
|
58
88
|
}
|
|
89
|
+
/**
|
|
90
|
+
* Converts a RGB/A color
|
|
91
|
+
*
|
|
92
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
|
|
93
|
+
*
|
|
94
|
+
* to its HSV/A representation as an
|
|
95
|
+
*
|
|
96
|
+
* Object (`{ h: [0-360], s: [0-100], v: [0-100}, a: [0-1]}`).
|
|
97
|
+
*
|
|
98
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
99
|
+
*/
|
|
59
100
|
function rgbToHsv({ r, g, b, a }) {
|
|
60
|
-
|
|
101
|
+
return (0, colord.colord)({
|
|
102
|
+
r,
|
|
103
|
+
b,
|
|
104
|
+
g,
|
|
105
|
+
a
|
|
106
|
+
}).toHsv();
|
|
61
107
|
}
|
|
108
|
+
/**
|
|
109
|
+
* Converts a HEX/A color
|
|
110
|
+
*
|
|
111
|
+
* String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
|
|
112
|
+
*
|
|
113
|
+
* to its RGB/A representation as an
|
|
114
|
+
*
|
|
115
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
|
|
116
|
+
*
|
|
117
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
118
|
+
*/
|
|
62
119
|
function textToRgb(str) {
|
|
63
|
-
|
|
120
|
+
return (0, colord.colord)(str).toRgb();
|
|
64
121
|
}
|
|
122
|
+
/**
|
|
123
|
+
* Lighten the `color` (if `percent` is positive) or darken it (if `percent` is negative).
|
|
124
|
+
*
|
|
125
|
+
* Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 1 or -1 to 0) of lighten/darken to be applied to the `color`. Returns a HEX String representation of the calculated `color`.
|
|
126
|
+
*/
|
|
65
127
|
function lighten(color, percent) {
|
|
66
|
-
|
|
128
|
+
return (0, colord.colord)(color).lighten(percent).toHex();
|
|
67
129
|
}
|
|
130
|
+
/**
|
|
131
|
+
* Calculates the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the `color`.
|
|
132
|
+
*
|
|
133
|
+
* Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
|
|
134
|
+
*/
|
|
68
135
|
function luminance(color) {
|
|
69
|
-
|
|
136
|
+
return (0, colord.colord)(color).luminance();
|
|
70
137
|
}
|
|
138
|
+
/**
|
|
139
|
+
* Calculates the [color contrast](https://www.w3.org/TR/AERT/#color-contrast) of the `color`.
|
|
140
|
+
*
|
|
141
|
+
* Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
|
|
142
|
+
*/
|
|
71
143
|
function brightness(color) {
|
|
72
|
-
|
|
144
|
+
return (0, colord.colord)(color).brightness();
|
|
73
145
|
}
|
|
146
|
+
/**
|
|
147
|
+
* Calculates the [blend](https://www.w3.org/TR/compositing-1/#simplealphacompositing) of two colors.
|
|
148
|
+
*
|
|
149
|
+
* Accepts a HEX/A String or a RGB/A Object as `fgColor`/`bgColor`. If the alpha channel of the `fgColor` is completely opaque, then the result will be the `fgColor`. If the alpha channel of the `bgColor` is completely opaque, then the resulting blended color will also be opaque. Returns the same type as input for fgColor.
|
|
150
|
+
*/
|
|
74
151
|
function blend(fgColor, bgColor) {
|
|
75
|
-
|
|
152
|
+
return (0, colord.colord)(fgColor).mix(bgColor);
|
|
76
153
|
}
|
|
154
|
+
/**
|
|
155
|
+
* Change color transparency
|
|
156
|
+
*/
|
|
77
157
|
function changeAlpha(color, alpha) {
|
|
78
|
-
|
|
158
|
+
return (0, colord.colord)(color).alpha(alpha).toHex();
|
|
79
159
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
160
|
+
const hueStep = 2;
|
|
161
|
+
const saturationStep = 16;
|
|
162
|
+
const saturationStep2 = 5;
|
|
163
|
+
const brightnessStep1 = 5;
|
|
164
|
+
const brightnessStep2 = 15;
|
|
165
|
+
const lightColorCount = 5;
|
|
166
|
+
const darkColorCount = 4;
|
|
167
|
+
/**
|
|
168
|
+
* Obtain palette colors based on color (from left to right, from light to dark, with 6 as the main color number)
|
|
169
|
+
* @param color - Color
|
|
170
|
+
* @param index - The corresponding color number of the color palette (6 as the main color number)
|
|
171
|
+
* @description algorithm implementation draws inspiration from ant design palette algorithm https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
|
|
172
|
+
*/
|
|
87
173
|
function colorPalette(color, index) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
a: oldHsv.a
|
|
101
|
-
};
|
|
102
|
-
return (0, import_colord.colord)(newHsv).toHex();
|
|
174
|
+
if (typeof color !== "string" && (!color || color.r === void 0)) throw new TypeError("Expected a string or a {r, g, b} object as color");
|
|
175
|
+
const rgb = typeof color === "string" ? textToRgb(color) : color;
|
|
176
|
+
const oldHsv = (0, colord.colord)(rgb).toHsv();
|
|
177
|
+
if (index === 6) return rgbToHex(rgb);
|
|
178
|
+
const light = index < 6;
|
|
179
|
+
const i = light ? lightColorCount + 1 - index : index - lightColorCount - 1;
|
|
180
|
+
return (0, colord.colord)({
|
|
181
|
+
h: hue(oldHsv, i, light),
|
|
182
|
+
s: saturation(oldHsv, i, light),
|
|
183
|
+
v: value(oldHsv, i, light),
|
|
184
|
+
a: oldHsv.a
|
|
185
|
+
}).toHex();
|
|
103
186
|
}
|
|
187
|
+
/**
|
|
188
|
+
* Obtain color gradient
|
|
189
|
+
* @param hsv - Color values in HSV format
|
|
190
|
+
* @param i - relative distance to 6
|
|
191
|
+
* @param isLight - Is it a bright color
|
|
192
|
+
*/
|
|
104
193
|
function hue(hsv, i, isLight) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (hue2 < 0)
|
|
112
|
-
hue2 += 360;
|
|
113
|
-
else if (hue2 >= 360)
|
|
114
|
-
hue2 -= 360;
|
|
115
|
-
return hue2;
|
|
194
|
+
let hue;
|
|
195
|
+
if (hsv.h >= 60 && hsv.h <= 240) hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
|
|
196
|
+
else hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
|
|
197
|
+
if (hue < 0) hue += 360;
|
|
198
|
+
else if (hue >= 360) hue -= 360;
|
|
199
|
+
return hue;
|
|
116
200
|
}
|
|
201
|
+
/**
|
|
202
|
+
* Obtain saturation gradient
|
|
203
|
+
* @param hsv - Color values in HSV format
|
|
204
|
+
* @param i - relative distance to 6
|
|
205
|
+
* @param isLight - Is it a bright color
|
|
206
|
+
*/
|
|
117
207
|
function saturation(hsv, i, isLight) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
if (isLight && i === lightColorCount && saturation2 > 10)
|
|
127
|
-
saturation2 = 10;
|
|
128
|
-
if (saturation2 < 6)
|
|
129
|
-
saturation2 = 6;
|
|
130
|
-
return saturation2;
|
|
208
|
+
let saturation;
|
|
209
|
+
if (isLight) saturation = hsv.s - saturationStep * i;
|
|
210
|
+
else if (i === darkColorCount) saturation = hsv.s + saturationStep;
|
|
211
|
+
else saturation = hsv.s + saturationStep2 * i;
|
|
212
|
+
if (saturation > 100) saturation = 100;
|
|
213
|
+
if (isLight && i === lightColorCount && saturation > 10) saturation = 10;
|
|
214
|
+
if (saturation < 6) saturation = 6;
|
|
215
|
+
return saturation;
|
|
131
216
|
}
|
|
217
|
+
/**
|
|
218
|
+
* Obtain brightness gradient
|
|
219
|
+
* @param hsv - Color values in HSV format
|
|
220
|
+
* @param i - relative distance to 6
|
|
221
|
+
* @param isLight - Is it a bright color
|
|
222
|
+
*/
|
|
132
223
|
function value(hsv, i, isLight) {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
return value2;
|
|
224
|
+
let value;
|
|
225
|
+
value = isLight ? hsv.v + brightnessStep1 * i : hsv.v - brightnessStep2 * i;
|
|
226
|
+
if (value > 100) value = 100;
|
|
227
|
+
return value;
|
|
138
228
|
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
});
|
|
229
|
+
|
|
230
|
+
//#endregion
|
|
231
|
+
exports.blend = blend;
|
|
232
|
+
exports.brightness = brightness;
|
|
233
|
+
exports.changeAlpha = changeAlpha;
|
|
234
|
+
exports.colorPalette = colorPalette;
|
|
235
|
+
exports.hexToRgb = hexToRgb;
|
|
236
|
+
exports.hsvToRgb = hsvToRgb;
|
|
237
|
+
exports.lighten = lighten;
|
|
238
|
+
exports.luminance = luminance;
|
|
239
|
+
exports.rgbToHex = rgbToHex;
|
|
240
|
+
exports.rgbToHsv = rgbToHsv;
|
|
241
|
+
exports.textToRgb = textToRgb;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import * as colord from
|
|
2
|
-
import {
|
|
1
|
+
import * as colord from "colord";
|
|
2
|
+
import { AnyColor, HsvaColor, RgbaColor } from "colord";
|
|
3
3
|
|
|
4
|
+
//#region src/index.d.ts
|
|
4
5
|
type RGBA = Record<'r' | 'g' | 'b' | 'a', number>;
|
|
5
6
|
type RGB = Record<'r' | 'g' | 'b', number> & {
|
|
6
|
-
|
|
7
|
+
a?: number;
|
|
7
8
|
};
|
|
8
9
|
type HexColor = string;
|
|
9
10
|
type HSVA = Record<'h' | 's' | 'v' | 'a', number>;
|
|
@@ -23,7 +24,12 @@ type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
|
|
23
24
|
*
|
|
24
25
|
* If Alpha channel is present in the original object it will be present also in the output.
|
|
25
26
|
*/
|
|
26
|
-
declare function rgbToHex({
|
|
27
|
+
declare function rgbToHex({
|
|
28
|
+
r,
|
|
29
|
+
g,
|
|
30
|
+
b,
|
|
31
|
+
a
|
|
32
|
+
}: RgbaColor): HexColor;
|
|
27
33
|
/**
|
|
28
34
|
* Converts a HEX/A color
|
|
29
35
|
*
|
|
@@ -47,7 +53,12 @@ declare function hexToRgb(hex: HexColor): RgbaColor;
|
|
|
47
53
|
*
|
|
48
54
|
* If Alpha channel is present in the original object it will be present also in the output.
|
|
49
55
|
*/
|
|
50
|
-
declare function hsvToRgb({
|
|
56
|
+
declare function hsvToRgb({
|
|
57
|
+
h,
|
|
58
|
+
s,
|
|
59
|
+
v,
|
|
60
|
+
a
|
|
61
|
+
}: HsvaColor): RgbaColor;
|
|
51
62
|
/**
|
|
52
63
|
* Converts a RGB/A color
|
|
53
64
|
*
|
|
@@ -59,7 +70,12 @@ declare function hsvToRgb({ h, s, v, a }: HsvaColor): RgbaColor;
|
|
|
59
70
|
*
|
|
60
71
|
* If Alpha channel is present in the original object it will be present also in the output.
|
|
61
72
|
*/
|
|
62
|
-
declare function rgbToHsv({
|
|
73
|
+
declare function rgbToHsv({
|
|
74
|
+
r,
|
|
75
|
+
g,
|
|
76
|
+
b,
|
|
77
|
+
a
|
|
78
|
+
}: RgbaColor): HsvaColor;
|
|
63
79
|
/**
|
|
64
80
|
* Converts a HEX/A color
|
|
65
81
|
*
|
|
@@ -107,5 +123,5 @@ declare function changeAlpha(color: COLOR, alpha: number): string;
|
|
|
107
123
|
* @description algorithm implementation draws inspiration from ant design palette algorithm https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
|
|
108
124
|
*/
|
|
109
125
|
declare function colorPalette(color: string | RgbaColor, index: PALETTE_INDEXES): string;
|
|
110
|
-
|
|
111
|
-
export {
|
|
126
|
+
//#endregion
|
|
127
|
+
export { COLOR, HEX_TEXT, HSVA, HSVA_TEXT, HexColor, PALETTE_INDEXES, RGB, RGBA, RGBA_TEXT, blend, brightness, changeAlpha, colorPalette, hexToRgb, hsvToRgb, lighten, luminance, rgbToHex, rgbToHsv, textToRgb };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as colord$1 from "colord";
|
|
2
|
+
import { AnyColor, HsvaColor, RgbaColor } from "colord";
|
|
3
|
+
|
|
4
|
+
//#region src/index.d.ts
|
|
5
|
+
type RGBA = Record<'r' | 'g' | 'b' | 'a', number>;
|
|
6
|
+
type RGB = Record<'r' | 'g' | 'b', number> & {
|
|
7
|
+
a?: number;
|
|
8
|
+
};
|
|
9
|
+
type HexColor = string;
|
|
10
|
+
type HSVA = Record<'h' | 's' | 'v' | 'a', number>;
|
|
11
|
+
type RGBA_TEXT = string;
|
|
12
|
+
type HEX_TEXT = string;
|
|
13
|
+
type HSVA_TEXT = string;
|
|
14
|
+
type COLOR = RGBA_TEXT | HEX_TEXT | HSVA_TEXT;
|
|
15
|
+
type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
|
16
|
+
/**
|
|
17
|
+
* Converts a RGB/A color
|
|
18
|
+
*
|
|
19
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
|
|
20
|
+
*
|
|
21
|
+
* to its HEX/A representation as a
|
|
22
|
+
*
|
|
23
|
+
* String (`#RRGGBB<AA>`).
|
|
24
|
+
*
|
|
25
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
26
|
+
*/
|
|
27
|
+
declare function rgbToHex({
|
|
28
|
+
r,
|
|
29
|
+
g,
|
|
30
|
+
b,
|
|
31
|
+
a
|
|
32
|
+
}: RgbaColor): HexColor;
|
|
33
|
+
/**
|
|
34
|
+
* Converts a HEX/A color
|
|
35
|
+
*
|
|
36
|
+
* String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
|
|
37
|
+
*
|
|
38
|
+
* to its RGB/A representation as an
|
|
39
|
+
*
|
|
40
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
|
|
41
|
+
*
|
|
42
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
43
|
+
*/
|
|
44
|
+
declare function hexToRgb(hex: HexColor): RgbaColor;
|
|
45
|
+
/**
|
|
46
|
+
* Converts a HEX/A color
|
|
47
|
+
*
|
|
48
|
+
* String (`#RRGGBB<AA>`)
|
|
49
|
+
*
|
|
50
|
+
* to its RGB/A representation as an
|
|
51
|
+
*
|
|
52
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`) .
|
|
53
|
+
*
|
|
54
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
55
|
+
*/
|
|
56
|
+
declare function hsvToRgb({
|
|
57
|
+
h,
|
|
58
|
+
s,
|
|
59
|
+
v,
|
|
60
|
+
a
|
|
61
|
+
}: HsvaColor): RgbaColor;
|
|
62
|
+
/**
|
|
63
|
+
* Converts a RGB/A color
|
|
64
|
+
*
|
|
65
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
|
|
66
|
+
*
|
|
67
|
+
* to its HSV/A representation as an
|
|
68
|
+
*
|
|
69
|
+
* Object (`{ h: [0-360], s: [0-100], v: [0-100}, a: [0-1]}`).
|
|
70
|
+
*
|
|
71
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
72
|
+
*/
|
|
73
|
+
declare function rgbToHsv({
|
|
74
|
+
r,
|
|
75
|
+
g,
|
|
76
|
+
b,
|
|
77
|
+
a
|
|
78
|
+
}: RgbaColor): HsvaColor;
|
|
79
|
+
/**
|
|
80
|
+
* Converts a HEX/A color
|
|
81
|
+
*
|
|
82
|
+
* String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
|
|
83
|
+
*
|
|
84
|
+
* to its RGB/A representation as an
|
|
85
|
+
*
|
|
86
|
+
* Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
|
|
87
|
+
*
|
|
88
|
+
* If Alpha channel is present in the original object it will be present also in the output.
|
|
89
|
+
*/
|
|
90
|
+
declare function textToRgb(str: AnyColor): RgbaColor;
|
|
91
|
+
/**
|
|
92
|
+
* Lighten the `color` (if `percent` is positive) or darken it (if `percent` is negative).
|
|
93
|
+
*
|
|
94
|
+
* Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 1 or -1 to 0) of lighten/darken to be applied to the `color`. Returns a HEX String representation of the calculated `color`.
|
|
95
|
+
*/
|
|
96
|
+
declare function lighten(color: AnyColor, percent: number): string;
|
|
97
|
+
/**
|
|
98
|
+
* Calculates the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the `color`.
|
|
99
|
+
*
|
|
100
|
+
* Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
|
|
101
|
+
*/
|
|
102
|
+
declare function luminance(color: AnyColor): number;
|
|
103
|
+
/**
|
|
104
|
+
* Calculates the [color contrast](https://www.w3.org/TR/AERT/#color-contrast) of the `color`.
|
|
105
|
+
*
|
|
106
|
+
* Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
|
|
107
|
+
*/
|
|
108
|
+
declare function brightness(color: AnyColor): number;
|
|
109
|
+
/**
|
|
110
|
+
* Calculates the [blend](https://www.w3.org/TR/compositing-1/#simplealphacompositing) of two colors.
|
|
111
|
+
*
|
|
112
|
+
* Accepts a HEX/A String or a RGB/A Object as `fgColor`/`bgColor`. If the alpha channel of the `fgColor` is completely opaque, then the result will be the `fgColor`. If the alpha channel of the `bgColor` is completely opaque, then the resulting blended color will also be opaque. Returns the same type as input for fgColor.
|
|
113
|
+
*/
|
|
114
|
+
declare function blend(fgColor: AnyColor, bgColor: AnyColor): colord$1.Colord;
|
|
115
|
+
/**
|
|
116
|
+
* Change color transparency
|
|
117
|
+
*/
|
|
118
|
+
declare function changeAlpha(color: COLOR, alpha: number): string;
|
|
119
|
+
/**
|
|
120
|
+
* Obtain palette colors based on color (from left to right, from light to dark, with 6 as the main color number)
|
|
121
|
+
* @param color - Color
|
|
122
|
+
* @param index - The corresponding color number of the color palette (6 as the main color number)
|
|
123
|
+
* @description algorithm implementation draws inspiration from ant design palette algorithm https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
|
|
124
|
+
*/
|
|
125
|
+
declare function colorPalette(color: string | RgbaColor, index: PALETTE_INDEXES): string;
|
|
126
|
+
//#endregion
|
|
127
|
+
export { COLOR, HEX_TEXT, HSVA, HSVA_TEXT, HexColor, PALETTE_INDEXES, RGB, RGBA, RGBA_TEXT, blend, brightness, changeAlpha, colorPalette, hexToRgb, hsvToRgb, lighten, luminance, rgbToHex, rgbToHsv, textToRgb };
|