@phun-ky/moebius 0.1.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 +21 -0
- package/README.md +26 -0
- package/moebius.d.ts +526 -0
- package/moebius.js +2 -0
- package/moebius.js.map +1 -0
- package/package.json +78 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Alexander Vassbotn Røyne-Helgesen
|
|
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
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# @phun-ky/moebius
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
> Möebius …
|
|
6
|
+
|
|
7
|
+
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)      
|
|
8
|
+
|
|
9
|
+
- [@phun-ky/moebius](#phun-kymoebius)
|
|
10
|
+
- [About](#about)
|
|
11
|
+
- [API](#api)
|
|
12
|
+
- [Usage](#usage)
|
|
13
|
+
|
|
14
|
+
## About
|
|
15
|
+
|
|
16
|
+
…
|
|
17
|
+
|
|
18
|
+
```shell-session
|
|
19
|
+
npm i -S @phun-ky/moebius
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## API
|
|
23
|
+
|
|
24
|
+
Go [here](https://github.com/phun-ky/moebius/blob/main/api/README.md) to read the full API documentation.
|
|
25
|
+
|
|
26
|
+
## Usage
|
package/moebius.d.ts
ADDED
|
@@ -0,0 +1,526 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents a color object with various color representations.
|
|
3
|
+
*/
|
|
4
|
+
interface MoebiusColorInterface {
|
|
5
|
+
color: MoebiusChromaColorInputType;
|
|
6
|
+
name: string;
|
|
7
|
+
hex: MoebiusColorValueHexType;
|
|
8
|
+
rgb: MoebiusColorValueRgbType;
|
|
9
|
+
hsl: MoebiusHSLObjectType;
|
|
10
|
+
hwb: MoebiusHWBObjectType;
|
|
11
|
+
hsv: MoebiusHSVObjectType;
|
|
12
|
+
lab: MoebiusLABObjectType;
|
|
13
|
+
xyz: MoebiusXYZObjectType;
|
|
14
|
+
lch: MoebiusLCHObjectType;
|
|
15
|
+
oklch: MoebiusLCHObjectType;
|
|
16
|
+
hsi: MoebiusHSIObjectType;
|
|
17
|
+
oklab: MoebiusLABObjectType;
|
|
18
|
+
cmyk: MoebiusCMYKObjectType;
|
|
19
|
+
}
|
|
20
|
+
interface MoebiusPaletteInterface {
|
|
21
|
+
baseColor: MoebiusColorInterface;
|
|
22
|
+
secondaryColor: MoebiusColorInterface;
|
|
23
|
+
colors: Record<string, unknown> | MoebiusPaletteColorsInterface;
|
|
24
|
+
defaultOptions: MoebiusPaletteDefaultOptionsType;
|
|
25
|
+
options: MoebiusPaletteOptionsType;
|
|
26
|
+
all: MoebiusColorValueHexType[];
|
|
27
|
+
accents: MoebiusPaletteAccentColorsInterface;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Represents a palette of colors with different schemes.
|
|
31
|
+
*/
|
|
32
|
+
interface MoebiusPaletteColorsInterface {
|
|
33
|
+
interpolate: MoebiusColorValueHexType[];
|
|
34
|
+
luminanceShift: MoebiusColorValueHexType[];
|
|
35
|
+
monochromatic: MoebiusColorValueHexType[];
|
|
36
|
+
complement: MoebiusColorValueHexType[];
|
|
37
|
+
split: MoebiusColorValueHexType[];
|
|
38
|
+
triadic: MoebiusColorValueHexType[];
|
|
39
|
+
tetradic: MoebiusColorValueHexType[];
|
|
40
|
+
pentadic: MoebiusColorValueHexType[];
|
|
41
|
+
hexadic: MoebiusColorValueHexType[];
|
|
42
|
+
analogous: MoebiusColorValueHexType[];
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Represents a palette of accent colors with different schemes.
|
|
46
|
+
*/
|
|
47
|
+
interface MoebiusPaletteAccentColorsInterface {
|
|
48
|
+
interpolate: MoebiusColorValueHexType[][];
|
|
49
|
+
luminanceShift: MoebiusColorValueHexType[][];
|
|
50
|
+
monochromatic: MoebiusColorValueHexType[][];
|
|
51
|
+
complement: MoebiusColorValueHexType[][];
|
|
52
|
+
split: MoebiusColorValueHexType[][];
|
|
53
|
+
triadic: MoebiusColorValueHexType[][];
|
|
54
|
+
tetradic: MoebiusColorValueHexType[][];
|
|
55
|
+
pentadic: MoebiusColorValueHexType[][];
|
|
56
|
+
hexadic: MoebiusColorValueHexType[][];
|
|
57
|
+
analogous: MoebiusColorValueHexType[][];
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Represents options for generating a color palette.
|
|
61
|
+
*/
|
|
62
|
+
type MoebiusPaletteOptionsType = {
|
|
63
|
+
baseColor: MoebiusColorInterface;
|
|
64
|
+
secondaryColor: MoebiusColorInterface;
|
|
65
|
+
divergentColor?: MoebiusColorValueHexType;
|
|
66
|
+
diverging?: boolean;
|
|
67
|
+
bezier?: boolean;
|
|
68
|
+
randomOffset?: boolean;
|
|
69
|
+
correctLightness?: boolean;
|
|
70
|
+
noDuplicates?: boolean;
|
|
71
|
+
colorScaleMode?: string;
|
|
72
|
+
divergingColor?: string;
|
|
73
|
+
reverseDirection?: boolean;
|
|
74
|
+
numberOfColors?: number;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Represents default options for generating a color palette.
|
|
78
|
+
*/
|
|
79
|
+
type MoebiusPaletteDefaultOptionsType = {
|
|
80
|
+
divergentColor?: MoebiusColorValueHexType;
|
|
81
|
+
diverging: boolean;
|
|
82
|
+
bezier: boolean;
|
|
83
|
+
randomOffset: boolean;
|
|
84
|
+
correctLightness: boolean;
|
|
85
|
+
noDuplicates: boolean;
|
|
86
|
+
colorScaleMode: string;
|
|
87
|
+
reverseDirection: boolean;
|
|
88
|
+
numberOfColors?: number;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Represents a color value in hexadecimal format.
|
|
92
|
+
*/
|
|
93
|
+
type MoebiusColorValueHexType = `#${string}`;
|
|
94
|
+
/**
|
|
95
|
+
* Represents a color value in RGB format.
|
|
96
|
+
*/
|
|
97
|
+
type MoebiusColorValueRgbType = `rgb(${number}, ${number}, ${number})`;
|
|
98
|
+
/**
|
|
99
|
+
* Represents an RGB color object.
|
|
100
|
+
*/
|
|
101
|
+
type MoebiusRGBObjectType = {
|
|
102
|
+
r: number;
|
|
103
|
+
g: number;
|
|
104
|
+
b: number;
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* Represents an HSL color object.
|
|
108
|
+
*/
|
|
109
|
+
type MoebiusHSLObjectType = {
|
|
110
|
+
h: number;
|
|
111
|
+
s: number;
|
|
112
|
+
l: number;
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* Represents an HSV color object.
|
|
116
|
+
*/
|
|
117
|
+
type MoebiusHSVObjectType = {
|
|
118
|
+
h: number;
|
|
119
|
+
s: number;
|
|
120
|
+
v: number;
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* Represents an LCH color object.
|
|
124
|
+
*/
|
|
125
|
+
type MoebiusLCHObjectType = {
|
|
126
|
+
l: number;
|
|
127
|
+
c: number;
|
|
128
|
+
h: number;
|
|
129
|
+
};
|
|
130
|
+
/**
|
|
131
|
+
* Represents an HSI color object.
|
|
132
|
+
*/
|
|
133
|
+
type MoebiusHSIObjectType = {
|
|
134
|
+
h: number;
|
|
135
|
+
s: number;
|
|
136
|
+
i: number;
|
|
137
|
+
};
|
|
138
|
+
/**
|
|
139
|
+
* Represents an XYZ color object.
|
|
140
|
+
*/
|
|
141
|
+
type MoebiusXYZObjectType = {
|
|
142
|
+
x: number;
|
|
143
|
+
y: number;
|
|
144
|
+
z: number;
|
|
145
|
+
};
|
|
146
|
+
/**
|
|
147
|
+
* Represents an HWB color object.
|
|
148
|
+
*/
|
|
149
|
+
type MoebiusHWBObjectType = {
|
|
150
|
+
h: number;
|
|
151
|
+
w: number;
|
|
152
|
+
b: number;
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Represents a LAB color object.
|
|
156
|
+
*/
|
|
157
|
+
type MoebiusLABObjectType = {
|
|
158
|
+
l: number;
|
|
159
|
+
a: number;
|
|
160
|
+
b: number;
|
|
161
|
+
};
|
|
162
|
+
/**
|
|
163
|
+
* Represents a CMYK color object.
|
|
164
|
+
*/
|
|
165
|
+
type MoebiusCMYKObjectType = {
|
|
166
|
+
c: number;
|
|
167
|
+
m: number;
|
|
168
|
+
y: number;
|
|
169
|
+
k: number;
|
|
170
|
+
};
|
|
171
|
+
type MoebiusChromaColorInputType = MoebiusCMYKObjectType | MoebiusLCHObjectType | MoebiusHSLObjectType | MoebiusColorValueHexType | string;
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Helper class for generating SVG paths for colored pie slices.
|
|
175
|
+
*/
|
|
176
|
+
declare class MoebiusSVGHelper {
|
|
177
|
+
xlmns: string;
|
|
178
|
+
/**
|
|
179
|
+
* Gets SVG paths for colored pie slices based on the provided colors.
|
|
180
|
+
* @param {MoebiusColorValueHexType[][]} colors - Array of color groups.
|
|
181
|
+
* @param {number} [size=256] - Size of the SVG.
|
|
182
|
+
* @returns {DocumentFragment} - Document fragment containing the SVG paths.
|
|
183
|
+
* @example
|
|
184
|
+
* ```ts
|
|
185
|
+
* const svgHelper = new MoebiusSVGHelper();
|
|
186
|
+
* const colors = [['#ff0000', '#00ff00'], ['#0000ff']];
|
|
187
|
+
* const svgFragment = svgHelper.getColorPiePaths(colors, 256);
|
|
188
|
+
* document.body.appendChild(svgFragment);
|
|
189
|
+
* ```
|
|
190
|
+
*/
|
|
191
|
+
getColorPiePaths(colors: MoebiusColorValueHexType[][], size?: number): DocumentFragment;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* MoebiusPalettes class representing a set of color palettes and their variations.
|
|
196
|
+
* @class
|
|
197
|
+
*/
|
|
198
|
+
declare class MoebiusPalettes implements MoebiusPaletteInterface {
|
|
199
|
+
baseColor: MoebiusColorInterface;
|
|
200
|
+
secondaryColor: MoebiusColorInterface;
|
|
201
|
+
colors: Record<string, unknown> | MoebiusPaletteColorsInterface;
|
|
202
|
+
defaultOptions: MoebiusPaletteDefaultOptionsType;
|
|
203
|
+
options: MoebiusPaletteOptionsType;
|
|
204
|
+
all: MoebiusColorValueHexType[];
|
|
205
|
+
accents: MoebiusPaletteAccentColorsInterface;
|
|
206
|
+
/**
|
|
207
|
+
* Creates an instance of MoebiusPalettes.
|
|
208
|
+
* @param {MoebiusPaletteOptionsType} options - Options for configuring the palettes.
|
|
209
|
+
*/
|
|
210
|
+
constructor(options: MoebiusPaletteOptionsType);
|
|
211
|
+
/**
|
|
212
|
+
* Generate a complement color palette based on the input color.
|
|
213
|
+
*
|
|
214
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the complement palette.
|
|
215
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
216
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the complement palette.
|
|
217
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
218
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
219
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the complement palette.
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* ```ts
|
|
223
|
+
* const baseColor = '#3498db';
|
|
224
|
+
* const complementPalette = complement(baseColor, { numberOfColors: 5 });
|
|
225
|
+
* console.log(complementPalette); // ['#3498db', '#db3434', '#75db34', '#dbd134', '#db7434']
|
|
226
|
+
* ```
|
|
227
|
+
*/
|
|
228
|
+
complement(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
229
|
+
/**
|
|
230
|
+
* Generate a split color palette based on the input color.
|
|
231
|
+
*
|
|
232
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the split palette.
|
|
233
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
234
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the split palette.
|
|
235
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
236
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
237
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the split palette.
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* ```ts
|
|
241
|
+
* const baseColor = '#3498db';
|
|
242
|
+
* const splitPalette = split(baseColor, { numberOfColors: 5 });
|
|
243
|
+
* console.log(splitPalette); // ['#3498db', '#99db34', '#dbd134', '#db3434', '#8f34db']
|
|
244
|
+
* ```
|
|
245
|
+
*/
|
|
246
|
+
split(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
247
|
+
/**
|
|
248
|
+
* Generates a triadic color palette based on the input color.
|
|
249
|
+
*
|
|
250
|
+
* @param {MoebiusChromaColorInputType} color - The input color in various formats (HEX, RGB, HSL, etc.).
|
|
251
|
+
* @param {Record<string, unknown> | MoebiusPaletteOptionsType} options - Additional options for palette generation.
|
|
252
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the generated palette.
|
|
253
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for the generated palette.
|
|
254
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
255
|
+
* @returns {MoebiusColorValueHexType[]} An array of HEX values representing the triadic color palette.
|
|
256
|
+
*
|
|
257
|
+
* @example
|
|
258
|
+
* ```ts
|
|
259
|
+
* const triadicPalette = triadic('#3498db', { numberOfColors: 5 });
|
|
260
|
+
* console.log(triadicPalette);
|
|
261
|
+
* // Output: ['#3498db', '#db344f', '#4fdb34', '#9834db', '#34db98']
|
|
262
|
+
* ```
|
|
263
|
+
*/
|
|
264
|
+
triadic(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
265
|
+
/**
|
|
266
|
+
* Generate a tetradic color palette based on the input color.
|
|
267
|
+
*
|
|
268
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the tetradic palette.
|
|
269
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
270
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the tetradic palette.
|
|
271
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
272
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
273
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the tetradic palette.
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* ```ts
|
|
277
|
+
* const baseColor = '#3498db';
|
|
278
|
+
* const tetradicPalette = tetradic(baseColor, { numberOfColors: 5 });
|
|
279
|
+
* console.log(tetradicPalette); // ['#3498db', '#db3434', '#34db99', '#dbd134', '#8f34db']
|
|
280
|
+
* ```
|
|
281
|
+
*/
|
|
282
|
+
tetradic(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
283
|
+
/**
|
|
284
|
+
* Generate a pentadic color palette based on the input color.
|
|
285
|
+
*
|
|
286
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the pentadic palette.
|
|
287
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
288
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the pentadic palette.
|
|
289
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
290
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
291
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the pentadic palette.
|
|
292
|
+
*
|
|
293
|
+
* @example
|
|
294
|
+
* ```ts
|
|
295
|
+
* const baseColor = '#3498db';
|
|
296
|
+
* const pentadicPalette = pentadic(baseColor, { numberOfColors: 5 });
|
|
297
|
+
* console.log(pentadicPalette); // ['#3498db', '#dbd134', '#db3434', '#34db99', '#8f34db']
|
|
298
|
+
* ```
|
|
299
|
+
*/
|
|
300
|
+
pentadic(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
301
|
+
/**
|
|
302
|
+
* Generate a hexadic color palette based on the input color.
|
|
303
|
+
*
|
|
304
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the hexadic palette.
|
|
305
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
306
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the hexadic palette.
|
|
307
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
308
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
309
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the hexadic palette.
|
|
310
|
+
*
|
|
311
|
+
* @example
|
|
312
|
+
* ```ts
|
|
313
|
+
* const baseColor = '#3498db';
|
|
314
|
+
* const hexadicPalette = hexadic(baseColor, { numberOfColors: 5 });
|
|
315
|
+
* console.log(hexadicPalette); // ['#3498db', '#5d7f33', '#8473a9', '#ad7a95', '#db3434']
|
|
316
|
+
* ```
|
|
317
|
+
*/
|
|
318
|
+
hexadic(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
319
|
+
/**
|
|
320
|
+
* Generate an analogous color palette based on the input color.
|
|
321
|
+
*
|
|
322
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the analogous palette.
|
|
323
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
324
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the analogous palette.
|
|
325
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
326
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
327
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the analogous palette.
|
|
328
|
+
*
|
|
329
|
+
* @example
|
|
330
|
+
* ```ts
|
|
331
|
+
* const baseColor = '#3498db';
|
|
332
|
+
* const analogousPalette = analogous(baseColor, { numberOfColors: 5 });
|
|
333
|
+
* console.log(analogousPalette); // ['#3498db', '#75db34', '#dbd134', '#db7434', '#db3474']
|
|
334
|
+
* ```
|
|
335
|
+
*/
|
|
336
|
+
analogous(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
337
|
+
/**
|
|
338
|
+
* Interpolate between two colors and generate a color palette.
|
|
339
|
+
*
|
|
340
|
+
* @param {MoebiusChromaColorInputType} primaryColor - The starting color for interpolation.
|
|
341
|
+
* @param {MoebiusChromaColorInputType} secondaryColor - The ending color for interpolation.
|
|
342
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
343
|
+
* @param {number} [options.numberOfColors=8] - The number of colors in the interpolated palette.
|
|
344
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
345
|
+
* @param {boolean} [options.bezier=false] - Whether to use bezier interpolation.
|
|
346
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
347
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the interpolated palette.
|
|
348
|
+
*
|
|
349
|
+
* @example
|
|
350
|
+
* ```ts
|
|
351
|
+
* const startColor = '#3498db';
|
|
352
|
+
* const endColor = '#db3434';
|
|
353
|
+
* const interpolatedPalette = interpolate(startColor, endColor, { numberOfColors: 5 });
|
|
354
|
+
* console.log(interpolatedPalette); // ['#3498db', '#5d6d7e', '#8473a9', '#ad7a95', '#db3434']
|
|
355
|
+
* ```
|
|
356
|
+
*/
|
|
357
|
+
interpolate(primaryColor: MoebiusColorValueHexType, secondaryColor: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
358
|
+
/**
|
|
359
|
+
* Generate a luminance shift palette based on an array of colors, with optional diverging colors.
|
|
360
|
+
*
|
|
361
|
+
* @param {MoebiusChromaColorInputType[]} colors - Array of base colors for generating the luminance shift palette.
|
|
362
|
+
* @param {MoebiusChromaColorInputType[]} [divergingColors=[]] - Array of diverging colors.
|
|
363
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
364
|
+
* @param {number} [options.numberOfColors=8] - The total number of colors in the luminance shift palette.
|
|
365
|
+
* @param {boolean} [options.diverging=false] - Whether to generate a diverging palette.
|
|
366
|
+
* @param {string} [options.colorScaleMode] - The color scale mode for chroma-js.
|
|
367
|
+
* @param {boolean} [options.bezier=false] - Whether to use bezier interpolation.
|
|
368
|
+
* @param {string} [options.divergentColor='#f5f5f5'] - The divergent color for a diverging palette.
|
|
369
|
+
* @param {boolean} [options.correctLightness=true] - Whether to correct lightness in the generated palette.
|
|
370
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the luminance shift palette.
|
|
371
|
+
*
|
|
372
|
+
* @example
|
|
373
|
+
* ```ts
|
|
374
|
+
* const baseColors = ['#3498db', '#99db34'];
|
|
375
|
+
* const divergingColors = ['#db3434'];
|
|
376
|
+
* const luminanceShiftPalette = luminanceShift(baseColors, divergingColors, { numberOfColors: 5 });
|
|
377
|
+
* console.log(luminanceShiftPalette); // ['#3498db', '#99db34', '#dbd134', '#db3434', '#8f34db']
|
|
378
|
+
* ```
|
|
379
|
+
*/
|
|
380
|
+
luminanceShift(colors: MoebiusColorValueHexType[], divergingColors?: MoebiusColorValueHexType[], options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
381
|
+
/**
|
|
382
|
+
* Generates a monochromatic color palette based on the given color.
|
|
383
|
+
* @param {MoebiusChromaColorInputType} color - The base color for the palette.
|
|
384
|
+
* @param {MoebiusPaletteOptionsType} options - Options for generating the palette.
|
|
385
|
+
* @returns {MoebiusColorValueHexType[]} - An array of hex color values in the palette.
|
|
386
|
+
* @example
|
|
387
|
+
* ```typescript
|
|
388
|
+
* const baseColor = '#003f5c';
|
|
389
|
+
* const options = { numberOfColors: 5, bezier: true, randomOffset: false };
|
|
390
|
+
* const monochromaticPalette = monochromatic(baseColor, options);
|
|
391
|
+
* console.log(monochromaticPalette);
|
|
392
|
+
* [
|
|
393
|
+
* '#003f5c', // maniacMansion,
|
|
394
|
+
* '#014268', // darkImperialBlue,
|
|
395
|
+
* '#024575', // macraggeBlue,
|
|
396
|
+
* '#044784', // bridgeport,
|
|
397
|
+
* '#064898', // frightNight,
|
|
398
|
+
* '#0745b6', // absoluteZero,
|
|
399
|
+
* '#002df5', // blueBouquet
|
|
400
|
+
* ];
|
|
401
|
+
* ```
|
|
402
|
+
*/
|
|
403
|
+
monochromatic(color: MoebiusColorValueHexType, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
404
|
+
/**
|
|
405
|
+
* Generate a harmonized color palette based on the input color.
|
|
406
|
+
*
|
|
407
|
+
* @param {MoebiusChromaColorInputType} color - The base color for generating the harmonized palette.
|
|
408
|
+
* @param {number} start - The starting angle for generating harmonized colors (degrees).
|
|
409
|
+
* @param {number} end - The ending angle for generating harmonized colors (degrees).
|
|
410
|
+
* @param {number} interval - The interval between harmonized colors (degrees).
|
|
411
|
+
* @param {MoebiusPaletteOptionsType} [options={}] - Options for generating the palette.
|
|
412
|
+
* @param {boolean} [options.noDuplicates=true] - Whether to remove duplicate colors in the palette.
|
|
413
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values representing the harmonized palette.
|
|
414
|
+
*
|
|
415
|
+
* @example
|
|
416
|
+
* ```ts
|
|
417
|
+
* const baseColor = '#3498db';
|
|
418
|
+
* const harmonizedPalette = harmonize(baseColor, 30, 210, 30, { noDuplicates: true });
|
|
419
|
+
* console.log(harmonizedPalette); // ['#3498db', '#75db34', '#dbd134', '#db7434', '#3498db']
|
|
420
|
+
* ```
|
|
421
|
+
*/
|
|
422
|
+
harmonize(color: MoebiusColorValueHexType, start: number, end: number, interval: number, options?: Record<string, unknown> | MoebiusPaletteOptionsType): MoebiusColorValueHexType[];
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
/**
|
|
426
|
+
* MoebiusColor class representing a color with various formats and conversions.
|
|
427
|
+
* @class
|
|
428
|
+
* @example
|
|
429
|
+
* ```ts
|
|
430
|
+
* const mColor = new MoebiusColor('#ff9900')
|
|
431
|
+
* ```
|
|
432
|
+
*/
|
|
433
|
+
declare class MoebiusColor implements MoebiusColorInterface {
|
|
434
|
+
color: MoebiusColorValueHexType;
|
|
435
|
+
name: string;
|
|
436
|
+
hex: MoebiusColorValueHexType;
|
|
437
|
+
rgb: MoebiusColorValueRgbType;
|
|
438
|
+
hsl: MoebiusHSLObjectType;
|
|
439
|
+
hwb: MoebiusHWBObjectType;
|
|
440
|
+
hsv: MoebiusHSVObjectType;
|
|
441
|
+
lab: MoebiusLABObjectType;
|
|
442
|
+
xyz: MoebiusXYZObjectType;
|
|
443
|
+
lch: MoebiusLCHObjectType;
|
|
444
|
+
oklch: MoebiusLCHObjectType;
|
|
445
|
+
hsi: MoebiusHSIObjectType;
|
|
446
|
+
oklab: MoebiusLABObjectType;
|
|
447
|
+
cmyk: MoebiusCMYKObjectType;
|
|
448
|
+
/**
|
|
449
|
+
* Creates an instance of MoebiusColor.
|
|
450
|
+
* @param {MoebiusColorValueHexType} value - The hex value of the color.
|
|
451
|
+
* @param {string} name - The name of the color
|
|
452
|
+
* @constructor
|
|
453
|
+
* @throws Will throw an error if init has not been run before creating an instance.
|
|
454
|
+
*/
|
|
455
|
+
constructor(color: MoebiusColorValueHexType, name: string);
|
|
456
|
+
/**
|
|
457
|
+
* Converts the color to an object in the specified color space.
|
|
458
|
+
* @param {string} type - The color space type (e.g., 'rgb' or 'hsl').
|
|
459
|
+
* @returns {MoebiusRGBObjectType | MoebiusHSLObjectType} The color object in the specified color space.
|
|
460
|
+
*/
|
|
461
|
+
toObject(type?: string): MoebiusRGBObjectType | MoebiusHSLObjectType;
|
|
462
|
+
/**
|
|
463
|
+
* Converts the color to a floating-point representation in the specified color space.
|
|
464
|
+
* @param {string} type - The color space type (e.g., 'rgb' or 'hsl').
|
|
465
|
+
* @returns {MoebiusRGBObjectType | MoebiusHSLObjectType} The floating-point representation of the color in the specified color space.
|
|
466
|
+
*/
|
|
467
|
+
toFloat(type?: string): MoebiusRGBObjectType | MoebiusHSLObjectType;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/**
|
|
471
|
+
* Class representing a set of accent colors in various palettes.
|
|
472
|
+
*/
|
|
473
|
+
declare class MoebiusAccentColors implements MoebiusPaletteAccentColorsInterface {
|
|
474
|
+
interpolate: MoebiusColorValueHexType[][];
|
|
475
|
+
luminanceShift: MoebiusColorValueHexType[][];
|
|
476
|
+
monochromatic: MoebiusColorValueHexType[][];
|
|
477
|
+
complement: MoebiusColorValueHexType[][];
|
|
478
|
+
split: MoebiusColorValueHexType[][];
|
|
479
|
+
triadic: MoebiusColorValueHexType[][];
|
|
480
|
+
tetradic: MoebiusColorValueHexType[][];
|
|
481
|
+
pentadic: MoebiusColorValueHexType[][];
|
|
482
|
+
hexadic: MoebiusColorValueHexType[][];
|
|
483
|
+
analogous: MoebiusColorValueHexType[][];
|
|
484
|
+
/**
|
|
485
|
+
* Creates an instance of MoebiusAccentColors.
|
|
486
|
+
* @param {MoebiusPaletteColorsInterface} colors - Base colors for accent palettes.
|
|
487
|
+
* @param {MoebiusPaletteOptionsType} options - Options for generating accent palettes.
|
|
488
|
+
* @example
|
|
489
|
+
* ```ts
|
|
490
|
+
* const colors = {
|
|
491
|
+
* monochromatic: ['#ff0000', '#00ff00'],
|
|
492
|
+
* // other base palettes...
|
|
493
|
+
* };
|
|
494
|
+
* const options = { baseColor: { color: '#ff0000', name: 'Red', hex: '#ff0000' }, numberOfColors: 9 };
|
|
495
|
+
* const accentColors = new MoebiusAccentColors(colors, options);
|
|
496
|
+
* ```
|
|
497
|
+
*/
|
|
498
|
+
constructor(colors: MoebiusPaletteColorsInterface, options: MoebiusPaletteOptionsType);
|
|
499
|
+
/**
|
|
500
|
+
* Converts the accent palettes to a flat array.
|
|
501
|
+
* @returns {MoebiusColorValueHexType[]} - Array of hex color values.
|
|
502
|
+
* @example
|
|
503
|
+
* ```ts
|
|
504
|
+
* const accentColors = new MoebiusAccentColors(baseColors, options);
|
|
505
|
+
* const flatArray = accentColors.toArray();
|
|
506
|
+
* console.log(flatArray); // ['#ff0000', '#00ff00', ...]
|
|
507
|
+
* ```
|
|
508
|
+
*/
|
|
509
|
+
toArray(): MoebiusColorValueHexType[];
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
type MoebiusReturnType = Promise<{
|
|
513
|
+
MoebiusColor: typeof MoebiusColor;
|
|
514
|
+
MoebiusPalettes: typeof MoebiusPalettes;
|
|
515
|
+
MoebiusSVGHelper: typeof MoebiusSVGHelper;
|
|
516
|
+
MoebiusAccentColors: typeof MoebiusAccentColors;
|
|
517
|
+
}>;
|
|
518
|
+
/**
|
|
519
|
+
* Asynchronous function to initialize Moebius with required data
|
|
520
|
+
* @function
|
|
521
|
+
* @returns {MoebiusReturnType} An object with Moebius classes
|
|
522
|
+
*
|
|
523
|
+
*/
|
|
524
|
+
declare function Moebius(): MoebiusReturnType;
|
|
525
|
+
|
|
526
|
+
export { Moebius, MoebiusReturnType };
|