@auaust/jaune 0.0.0 → 0.0.2

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/README.md ADDED
@@ -0,0 +1,30 @@
1
+ ###### AUAUST LIBRARIES — JavaScript — jaune
2
+
3
+ > This repository is made public to open the codebase to contributors.
4
+ > When contributing to this repo, you agree to assign your copyrights to AUAUST.
5
+
6
+ # jaune
7
+
8
+ A toolkit for working with colors in JavaScript.
9
+
10
+ ## Installation
11
+
12
+ ```sh
13
+ pnpm add @auaust/jaune
14
+ ```
15
+
16
+ or if you prefer Yarn:
17
+
18
+ ```sh
19
+ yarn add @auaust/jaune
20
+ ```
21
+
22
+ ## Environment Support
23
+
24
+ `jaune` is compatible with all modern browsers. Since it doesn't use any advanced APIs, it is likely to work on older browsers as well, but it hasn't been tested. If it doesn't work on your browser but you think it should, please feel free to contribute!
25
+
26
+ It also works in Node.js environments, and is fully implemented in TypeScript.
27
+
28
+ ## Sponsor
29
+
30
+ This library is a project by us, [AUAUST](https://auaust.ch/). We sponsor ourselves!
@@ -0,0 +1,472 @@
1
+ import { Writable } from 'type-fest';
2
+
3
+ type ColorTypeMap = {
4
+ channels: ColorChannels;
5
+ color: Color;
6
+ hex: Hex;
7
+ named: NamedColor;
8
+ rgb: Rgb;
9
+ };
10
+ /**
11
+ * The known color types.
12
+ *
13
+ * `channels` - An object of each color channel.
14
+ * `color` - A `Color` instance.
15
+ * `hex` - A HEX color string.
16
+ * `named` - A CSS color name.
17
+ * `rgb` - A tuple representing RGB color channels.
18
+ */
19
+ type ColorType = keyof ColorTypeMap;
20
+ /** Represents a color in any of the various supported formats. */
21
+ type ColorValue = ColorTypeMap[ColorType];
22
+ /** A HEX color string. It must start with a hash (#) character followed by 3, 4, 6, or 8 hexadecimal digits. */
23
+ type Hex = `#${string}` | (string & {});
24
+ /**
25
+ * A tuple representing RGB color channels.
26
+ *
27
+ * The first three elements are integers between 0 and 255 representing the red, green, and blue channels, respectively.
28
+ * The fourth element is a number between 0 and 1 representing the alpha channel.
29
+ */
30
+ type Rgb = readonly [r: number, g: number, b: number, a?: number] | readonly number[];
31
+ /**
32
+ * A CSS color name.
33
+ *
34
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
35
+ */
36
+ type NamedColor = keyof typeof namedColorsMap;
37
+ type MaybeNamedColor = NamedColor | (string & {});
38
+ /**
39
+ * An object of each color channel.
40
+ *
41
+ * `r`, `g`, and `b` are integers between 0 and 255 representing the red, green, and blue channels, respectively.
42
+ * `a` is a number between 0 and 1 representing the alpha channel.
43
+ * It may contain metadata about the color and its handling by the color parser.
44
+ */
45
+ type ColorChannels = {
46
+ /**
47
+ * The red channel.
48
+ */
49
+ readonly r: number;
50
+ /**
51
+ * The green channel.
52
+ */
53
+ readonly g: number;
54
+ /**
55
+ * The blue channel.
56
+ */
57
+ readonly b: number;
58
+ /**
59
+ * The alpha channel.
60
+ */
61
+ readonly a?: number;
62
+ /**
63
+ * Whether any of the channels have been transformed by the color parser.
64
+ */
65
+ readonly isTransformed?: boolean;
66
+ /**
67
+ * Whether the color is the fallback color, which is used when the input is invalid.
68
+ */
69
+ readonly isFallback?: boolean;
70
+ };
71
+
72
+ declare function isRgbChannel(value: unknown): value is number;
73
+ declare function toRgbChannel(value: number | undefined | null): number;
74
+ declare function isAlphaChannel(value: unknown): value is number;
75
+ declare function toAlphaChannel(value: number | undefined | null): number;
76
+ declare function isColorChannels(value: unknown): value is ColorChannels;
77
+ /**
78
+ * Formats the input into a readonly object of color channels.
79
+ *
80
+ * It clamps the values to the valid range and sets the alpha channel to 1 if not provided.
81
+ * If the passed `isTransformed` isn't already `true`, it will set it to `true` if any of the values were clamped.
82
+ * If some channels are missing, it will return the fallback color.
83
+ */
84
+ declare function toColorChannels(value: ColorChannels): Required<ColorChannels>;
85
+ declare function toColorChannels(r: number, g: number, b: number, a?: number | null, isTransformed?: boolean, isFallback?: boolean): Required<ColorChannels>;
86
+ declare const fallbackColor: Required<ColorChannels>;
87
+
88
+ /** Returns true if the value is any format of supported color. */
89
+ declare function isColor(value: unknown): value is ColorValue;
90
+ /** Returns the color type of the value, or undefined if it's not a color. */
91
+ declare function type(value: unknown): ColorType | undefined;
92
+ /** Tries to parse the value as a color. If it fails, returns the fallback color. */
93
+ declare function parseColor(value: unknown): ColorChannels;
94
+
95
+ /**
96
+ * Whether the input is a valid HEX color. With or without the alpha channel, and with single or double digits.
97
+ *
98
+ * It may or may not start with a hash character, which will be ignored.
99
+ */
100
+ declare function isHex(value: unknown): value is Hex;
101
+ /**
102
+ * Parses a hex string into an object of color channels.
103
+ *
104
+ * The input must already be a valid HEX color, otherwise the result will be unexpected.
105
+ */
106
+ declare function parseHex(value: Hex): ColorChannels;
107
+ /**
108
+ * Returns the corresponding hex string of a color channels object.
109
+ *
110
+ * If the alpha channel is 1, it will be omitted.
111
+ */
112
+ declare function toHex(channels: ColorChannels): Hex;
113
+
114
+ /**
115
+ * A map of named colors and their HEX values.
116
+ *
117
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
118
+ */
119
+ declare const namedColorsMap: Readonly<{
120
+ aliceblue: "#f0f8ffff";
121
+ antiquewhite: "#faebd7ff";
122
+ aqua: "#00ffffff";
123
+ aquamarine: "#7fffd4ff";
124
+ azure: "#f0ffffff";
125
+ beige: "#f5f5dcff";
126
+ bisque: "#ffe4c4ff";
127
+ black: "#000000ff";
128
+ blanchedalmond: "#ffebcdff";
129
+ blue: "#0000ffff";
130
+ blueviolet: "#8a2be2ff";
131
+ brown: "#a52a2aff";
132
+ burlywood: "#deb887ff";
133
+ cadetblue: "#5f9ea0ff";
134
+ chartreuse: "#7fff00ff";
135
+ chocolate: "#d2691eff";
136
+ coral: "#ff7f50ff";
137
+ cornflowerblue: "#6495edff";
138
+ cornsilk: "#fff8dcff";
139
+ crimson: "#dc143cff";
140
+ cyan: "#00ffffff";
141
+ darkblue: "#00008bff";
142
+ darkcyan: "#008b8bff";
143
+ darkgoldenrod: "#b8860bff";
144
+ darkgray: "#a9a9a9ff";
145
+ darkgreen: "#006400ff";
146
+ darkgrey: "#a9a9a9ff";
147
+ darkkhaki: "#bdb76bff";
148
+ darkmagenta: "#8b008bff";
149
+ darkolivegreen: "#556b2fff";
150
+ darkorange: "#ff8c00ff";
151
+ darkorchid: "#9932ccff";
152
+ darkred: "#8b0000ff";
153
+ darksalmon: "#e9967aff";
154
+ darkseagreen: "#8fbc8fff";
155
+ darkslateblue: "#483d8bff";
156
+ darkslategray: "#2f4f4fff";
157
+ darkslategrey: "#2f4f4fff";
158
+ darkturquoise: "#00ced1ff";
159
+ darkviolet: "#9400d3ff";
160
+ deeppink: "#ff1493ff";
161
+ deepskyblue: "#00bfffff";
162
+ dimgray: "#696969ff";
163
+ dimgrey: "#696969ff";
164
+ dodgerblue: "#1e90ffff";
165
+ firebrick: "#b22222ff";
166
+ floralwhite: "#fffaf0ff";
167
+ forestgreen: "#228b22ff";
168
+ fuchsia: "#ff00ffff";
169
+ gainsboro: "#dcdcdcff";
170
+ ghostwhite: "#f8f8ffff";
171
+ gold: "#ffd700ff";
172
+ goldenrod: "#daa520ff";
173
+ gray: "#808080ff";
174
+ green: "#008000ff";
175
+ greenyellow: "#adff2fff";
176
+ grey: "#808080ff";
177
+ honeydew: "#f0fff0ff";
178
+ hotpink: "#ff69b4ff";
179
+ indianred: "#cd5c5cff";
180
+ indigo: "#4b0082ff";
181
+ ivory: "#fffff0ff";
182
+ khaki: "#f0e68cff";
183
+ lavender: "#e6e6faff";
184
+ lavenderblush: "#fff0f5ff";
185
+ lawngreen: "#7cfc00ff";
186
+ lemonchiffon: "#fffacdff";
187
+ lightblue: "#add8e6ff";
188
+ lightcoral: "#f08080ff";
189
+ lightcyan: "#e0ffffff";
190
+ lightgoldenrodyellow: "#fafad2ff";
191
+ lightgray: "#d3d3d3ff";
192
+ lightgreen: "#90ee90ff";
193
+ lightgrey: "#d3d3d3ff";
194
+ lightpink: "#ffb6c1ff";
195
+ lightsalmon: "#ffa07aff";
196
+ lightseagreen: "#20b2aaff";
197
+ lightskyblue: "#87cefaff";
198
+ lightslategray: "#778899ff";
199
+ lightslategrey: "#778899ff";
200
+ lightsteelblue: "#b0c4deff";
201
+ lightyellow: "#ffffe0ff";
202
+ lime: "#00ff00ff";
203
+ limegreen: "#32cd32ff";
204
+ linen: "#faf0e6ff";
205
+ magenta: "#ff00ffff";
206
+ maroon: "#800000ff";
207
+ mediumaquamarine: "#66cdaaff";
208
+ mediumblue: "#0000cdff";
209
+ mediumorchid: "#ba55d3ff";
210
+ mediumpurple: "#9370dbff";
211
+ mediumseagreen: "#3cb371ff";
212
+ mediumslateblue: "#7b68eeff";
213
+ mediumspringgreen: "#00fa9aff";
214
+ mediumturquoise: "#48d1ccff";
215
+ mediumvioletred: "#c71585ff";
216
+ midnightblue: "#191970ff";
217
+ mintcream: "#f5fffaff";
218
+ mistyrose: "#ffe4e1ff";
219
+ moccasin: "#ffe4b5ff";
220
+ navajowhite: "#ffdeadff";
221
+ navy: "#000080ff";
222
+ oldlace: "#fdf5e6ff";
223
+ olive: "#808000ff";
224
+ olivedrab: "#6b8e23ff";
225
+ orange: "#ffa500ff";
226
+ orangered: "#ff4500ff";
227
+ orchid: "#da70d6ff";
228
+ palegoldenrod: "#eee8aaff";
229
+ palegreen: "#98fb98ff";
230
+ paleturquoise: "#afeeeeff";
231
+ palevioletred: "#db7093ff";
232
+ papayawhip: "#ffefd5ff";
233
+ peachpuff: "#ffdab9ff";
234
+ peru: "#cd853fff";
235
+ pink: "#ffc0cbff";
236
+ plum: "#dda0ddff";
237
+ powderblue: "#b0e0e6ff";
238
+ purple: "#800080ff";
239
+ rebeccapurple: "#663399ff";
240
+ red: "#ff0000ff";
241
+ rosybrown: "#bc8f8fff";
242
+ royalblue: "#4169e1ff";
243
+ saddlebrown: "#8b4513ff";
244
+ salmon: "#fa8072ff";
245
+ sandybrown: "#f4a460ff";
246
+ seagreen: "#2e8b57ff";
247
+ seashell: "#fff5eeff";
248
+ sienna: "#a0522dff";
249
+ silver: "#c0c0c0ff";
250
+ skyblue: "#87ceebff";
251
+ slateblue: "#6a5acdff";
252
+ slategray: "#708090ff";
253
+ slategrey: "#708090ff";
254
+ snow: "#fffafaff";
255
+ springgreen: "#00ff7fff";
256
+ steelblue: "#4682b4ff";
257
+ tan: "#d2b48cff";
258
+ teal: "#008080ff";
259
+ thistle: "#d8bfd8ff";
260
+ tomato: "#ff6347ff";
261
+ transparent: "#00000000";
262
+ turquoise: "#40e0d0ff";
263
+ violet: "#ee82eeff";
264
+ wheat: "#f5deb3ff";
265
+ white: "#ffffffff";
266
+ whitesmoke: "#f5f5f5ff";
267
+ yellow: "#ffff00ff";
268
+ yellowgreen: "#9acd32ff";
269
+ }>;
270
+ /**
271
+ * Whether the input is a valid named color.
272
+ *
273
+ * The check is case-sensitive.
274
+ */
275
+ declare function isNamedColor(value: unknown): value is NamedColor;
276
+ /**
277
+ * Returns the color channels from a named color. Must be a valid named color, already lowercased.
278
+ *
279
+ * @internal
280
+ */
281
+ declare function namedColorChannels(name: NamedColor): ColorChannels;
282
+ /**
283
+ * Returns the color channels from a named color.
284
+ */
285
+ declare function parseNamedColor(name: MaybeNamedColor): ColorChannels;
286
+ /**
287
+ * Returns the corresponding HEX value of a named color.
288
+ */
289
+ declare function namedColorToHex(name: NamedColor): string;
290
+ declare function namedColorToHex(name: MaybeNamedColor): string | undefined;
291
+ /** Returns the closest named color to the passed color channels. */
292
+ declare function closestNamedColor(channels: ColorChannels): NamedColor;
293
+ /**
294
+ * Returns all the aliases of a named color.
295
+ */
296
+ declare function namedColorAliases(name: NamedColor): readonly NamedColor[];
297
+ /**
298
+ * Returns a boolean indicating whether two named colors are aliases.
299
+ */
300
+ declare function isAliasToNamedColor(name: NamedColor, alias: NamedColor): boolean;
301
+
302
+ type ChannelRange = number | [min: number, max: number];
303
+ /**
304
+ * Generates a random color.
305
+ *
306
+ * Specific values or ranges can be provided for each channel.
307
+ * If a range is provided, the value will be randomly selected from within that range.
308
+ * If a single value is provided, that value will be used for the channel.
309
+ * If no value is provided, the channel will be randomly selected from 0 to 255 for RGB channels and be set to 1 for the alpha channel.
310
+ */
311
+ declare function random({ r, g, b, a, }?: {
312
+ r?: ChannelRange;
313
+ g?: ChannelRange;
314
+ b?: ChannelRange;
315
+ a?: ChannelRange;
316
+ }): ColorChannels;
317
+
318
+ /**
319
+ * Whether the input is a valid RGB color.
320
+ */
321
+ declare function isRgb(value: unknown): value is Rgb;
322
+ /**
323
+ * Whether the input could be a valid RGB color.
324
+ * As in, it checks if the input is an array of numbers without validating the values range.
325
+ */
326
+ declare function couldBeRgb(value: unknown): value is Rgb;
327
+ /**
328
+ * Parses a RGB tuple into an object of color channels.
329
+ *
330
+ * The input must already be a valid RGB tuple, otherwise the result will be unexpected.
331
+ */
332
+ declare function parseRgb(value: Rgb): ColorChannels;
333
+ /**
334
+ * Returns the corresponding RGB tuple of a color channels object.
335
+ */
336
+ declare function toRgb(channels: ColorChannels): Rgb;
337
+
338
+ /**
339
+ * Used to privately store the cached channels of a color.
340
+ */
341
+ declare const channels: unique symbol;
342
+ /**
343
+ * Used to privately store the cached data of a color.
344
+ */
345
+ declare const cache: unique symbol;
346
+
347
+ declare class Color {
348
+ protected [channels]: Required<Writable<ColorChannels>>;
349
+ protected [cache]: Map<string | Function, any>;
350
+ constructor(value: ColorChannels);
351
+ static from(value: ColorValue): Color;
352
+ static from(red: number, green: number, blue: number, alpha?: number): Color;
353
+ static fromChannels(channels: ColorChannels): Color;
354
+ static fromRgb(rgb: Rgb): Color;
355
+ static fromHex(hex: string): Color;
356
+ static fromName(name: MaybeNamedColor): Color;
357
+ static random(presets?: Parameters<typeof random>[0]): Color;
358
+ /**
359
+ * Returns the color type of the passed value, or `undefined` if it's not a color.
360
+ *
361
+ * It is slightly stricter than the logic used to parse colors.
362
+ * It would return false for an array of channels which values are not within the expected range, where `parseColor` would return a color with the invalid values clamped.
363
+ */
364
+ static type: typeof type;
365
+ /** Returns a boolean indicating whether the passed value is a color. */
366
+ static isColor: typeof isColor;
367
+ /** @alias Color#isColor */
368
+ static is: typeof isColor;
369
+ /** Returns a boolean indicating whether the passed value is a HEX color string. */
370
+ static isHex: typeof isHex;
371
+ /** Returns a boolean indicating whether the passed value is a named color. */
372
+ static isNamedColor: typeof isNamedColor;
373
+ /** Returns a boolean indicating whether the passed value is a color channel object. */
374
+ static isColorChannels: typeof isColorChannels;
375
+ /** Returns a boolean indicating whether the passed value is a RGB color tuple. */
376
+ static isRgb: typeof isRgb;
377
+ /** Returns all the aliases of a named color, including the name itself. */
378
+ static namedColorAliases: typeof namedColorAliases;
379
+ /** Returns a boolean whether two named colors are aliases, meaning they have the same HEX value. */
380
+ static isAliasToNamedColor: typeof isAliasToNamedColor;
381
+ /**
382
+ * Returns a new `Color` instance with the same channels as the current one.
383
+ * If you want the clone to have different channels, use the `with` method.
384
+ */
385
+ clone(): Color;
386
+ /** Returns a new `Color` instance with the passed channels overriding the current ones. */
387
+ with(value: Partial<Pick<ColorChannels, "r" | "g" | "b" | "a">>): Color;
388
+ /** Returns a new `Color` instance with the specified red channel. */
389
+ withRed(value: number): Color;
390
+ /** Returns a new `Color` instance with the specified green channel. */
391
+ withGreen(value: number): Color;
392
+ /** Returns a new `Color` instance with the specified blue channel. */
393
+ withBlue(value: number): Color;
394
+ /** Returns a new `Color` instance with the specified alpha channel. */
395
+ withAlpha(value: number): Color;
396
+ private updated;
397
+ set(channel: "r" | "g" | "b" | "a", value: number): this;
398
+ /** The red channel of the color. */
399
+ get red(): number;
400
+ /** @see Color#red */
401
+ get r(): number;
402
+ set red(value: number);
403
+ setRed(value: number): this;
404
+ /** The green channel of the color. */
405
+ get green(): number;
406
+ /** @see Color#green */
407
+ get g(): number;
408
+ set green(value: number);
409
+ setGreen(value: number): this;
410
+ /** The blue channel of the color. */
411
+ get blue(): number;
412
+ /** @see Color#blue */
413
+ get b(): number;
414
+ set blue(value: number);
415
+ setBlue(value: number): this;
416
+ /** The alpha channel of the color. */
417
+ get alpha(): number;
418
+ /** @see Color#alpha */
419
+ get a(): number;
420
+ set alpha(value: number);
421
+ setAlpha(value: number): this;
422
+ /**
423
+ * Whether the color is the fallback color, which is used when the input is invalid.
424
+ * As soon as a color channel is updated, this will always be `false`.
425
+ */
426
+ get isFallback(): boolean;
427
+ /**
428
+ * Whether any of the channels have been transformed by the color parser.
429
+ * As soon as a color channel is updated, this will always be `false`.
430
+ */
431
+ get isTransformed(): boolean;
432
+ /** Helper to cache data until the channels are updated. */
433
+ private memoize;
434
+ /** Checks if the color is fully opaque. */
435
+ get isOpaque(): boolean;
436
+ /** Checks if the color is fully transparent. */
437
+ get isTransparent(): boolean;
438
+ /** Checks if the color is at least partially transparent. */
439
+ get isTranslucent(): boolean;
440
+ /**
441
+ * Returns the closest named color. If aliases exist, which one is returned is not guaranteed.
442
+ * In some cases, calling `namedColorAliases()` on the result might help achieve the desired result.
443
+ */
444
+ get closestNamedColor(): NamedColor;
445
+ /** The relative brightness of the color. */
446
+ get brightness(): number;
447
+ /** Whether the color is considered bright. */
448
+ get isBright(): boolean;
449
+ /** Whether the color is considered dark. */
450
+ get isDark(): boolean;
451
+ /** Whether the color is brighter than the passed threshold or color. */
452
+ isBrighterThan(threshold: Color | number): boolean;
453
+ /** Whether the color is darker than the passed threshold or color. */
454
+ isDarkerThan(threshold: Color | number): boolean;
455
+ /** Returns the relative luminance of the color. */
456
+ get luminance(): number;
457
+ /** Returns the contrast ratio between this color and another. */
458
+ contrast(color: ColorValue): number;
459
+ /** Returns the distance between this color and another. If `alpha` is `true`, the alpha channel is included in the calculation. */
460
+ distance(color: ColorValue, alpha?: boolean): number;
461
+ /** Returns a new color with the grayscale equivalent of the current color, preserving the alpha channel. */
462
+ toGrayscale(): Color;
463
+ toHex(): string;
464
+ toRgb(): Rgb;
465
+ toChannels(): ColorChannels;
466
+ toString(): string;
467
+ valueOf(): string;
468
+ [Symbol.toPrimitive](): string;
469
+ toJSON(): string;
470
+ }
471
+
472
+ export { toRgb as A, Color as B, type ColorChannels as C, type ColorType as D, type ColorValue as E, type Hex as H, type MaybeNamedColor as M, type NamedColor as N, type Rgb as R, isColorChannels as a, isRgbChannel as b, toColorChannels as c, toRgbChannel as d, isColor as e, fallbackColor as f, type as g, isHex as h, isAlphaChannel as i, parseHex as j, toHex as k, closestNamedColor as l, isAliasToNamedColor as m, isNamedColor as n, namedColorAliases as o, parseColor as p, namedColorChannels as q, namedColorsMap as r, namedColorToHex as s, toAlphaChannel as t, parseNamedColor as u, random as v, type ChannelRange as w, couldBeRgb as x, isRgb as y, parseRgb as z };