color-value-tools 1.2.1 → 1.2.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 +18 -0
- package/dist/cjs/a11y.d.ts +40 -0
- package/dist/cjs/a11y.js +253 -0
- package/dist/cjs/cache.d.ts +9 -0
- package/dist/cjs/cache.js +38 -0
- package/dist/cjs/convert/format.d.ts +3 -0
- package/dist/cjs/convert/format.js +42 -0
- package/dist/cjs/convert/index.d.ts +2 -0
- package/dist/cjs/convert/index.js +18 -0
- package/dist/cjs/convert/spaces.d.ts +189 -0
- package/dist/cjs/convert/spaces.js +556 -0
- package/dist/cjs/index.d.ts +6 -397
- package/dist/cjs/index.js +20 -1466
- package/dist/cjs/internal/named-colors.d.ts +1 -0
- package/dist/cjs/internal/named-colors.js +165 -0
- package/dist/cjs/internal/transfer.d.ts +2 -0
- package/dist/cjs/internal/transfer.js +12 -0
- package/dist/cjs/manipulate.d.ts +15 -0
- package/dist/cjs/manipulate.js +223 -0
- package/dist/cjs/palette.d.ts +40 -0
- package/dist/cjs/palette.js +164 -0
- package/dist/cjs/parse.d.ts +102 -0
- package/dist/cjs/parse.js +257 -0
- package/dist/cli/{bin/cli.js → cli.js} +28 -26
- package/dist/esm/a11y.d.ts +40 -0
- package/dist/esm/a11y.js +237 -0
- package/dist/esm/cache.d.ts +9 -0
- package/dist/esm/cache.js +31 -0
- package/dist/esm/convert/format.d.ts +3 -0
- package/dist/esm/convert/format.js +37 -0
- package/dist/esm/convert/index.d.ts +2 -0
- package/dist/esm/convert/index.js +2 -0
- package/dist/esm/convert/spaces.d.ts +189 -0
- package/dist/esm/convert/spaces.js +520 -0
- package/dist/esm/index.d.ts +6 -0
- package/dist/esm/index.js +6 -1368
- package/dist/esm/internal/named-colors.d.ts +1 -0
- package/dist/esm/internal/named-colors.js +162 -0
- package/dist/esm/internal/transfer.d.ts +2 -0
- package/dist/esm/internal/transfer.js +8 -0
- package/dist/esm/manipulate.d.ts +15 -0
- package/dist/esm/manipulate.js +210 -0
- package/dist/esm/package.json +3 -1
- package/dist/esm/palette.d.ts +40 -0
- package/dist/esm/palette.js +145 -0
- package/dist/esm/parse.d.ts +102 -0
- package/dist/esm/parse.js +241 -0
- package/package.json +100 -8
- package/dist/cli/src/index.js +0 -1468
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,397 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export declare function isHslColor(value: string): boolean;
|
|
8
|
-
export declare function getColorType(value: string): ColorType;
|
|
9
|
-
export declare function extractCssVariableName(value: string): string;
|
|
10
|
-
export declare function parseCssVar(value: string): {
|
|
11
|
-
variableName: string;
|
|
12
|
-
fallback?: string;
|
|
13
|
-
} | null;
|
|
14
|
-
export declare function parseOklchString(str: string): {
|
|
15
|
-
L: number;
|
|
16
|
-
C: number;
|
|
17
|
-
H: number;
|
|
18
|
-
alpha: number;
|
|
19
|
-
} | null;
|
|
20
|
-
export declare function parseColorFn(str: string): {
|
|
21
|
-
space: string;
|
|
22
|
-
r: number;
|
|
23
|
-
g: number;
|
|
24
|
-
b: number;
|
|
25
|
-
alpha: number;
|
|
26
|
-
} | null;
|
|
27
|
-
export declare function rgbToDisplayP3(rgb: {
|
|
28
|
-
r: number;
|
|
29
|
-
g: number;
|
|
30
|
-
b: number;
|
|
31
|
-
}): {
|
|
32
|
-
r: number;
|
|
33
|
-
g: number;
|
|
34
|
-
b: number;
|
|
35
|
-
};
|
|
36
|
-
export declare function displayP3ToRgb(p3: {
|
|
37
|
-
r: number;
|
|
38
|
-
g: number;
|
|
39
|
-
b: number;
|
|
40
|
-
}): {
|
|
41
|
-
r: number;
|
|
42
|
-
g: number;
|
|
43
|
-
b: number;
|
|
44
|
-
};
|
|
45
|
-
export declare function toDisplayP3Hex(color: string): string;
|
|
46
|
-
export declare function shortHexToRgba(hex: string): {
|
|
47
|
-
r: number;
|
|
48
|
-
g: number;
|
|
49
|
-
b: number;
|
|
50
|
-
a: number;
|
|
51
|
-
} | null;
|
|
52
|
-
export declare function normalizeHex(hex: string): string;
|
|
53
|
-
export declare function hexToRgb(hex: string): [number, number, number];
|
|
54
|
-
export declare function hexToRgba(hex: string, opacity?: number): string;
|
|
55
|
-
export declare function hexToHsl(hex: string): [number, number, number];
|
|
56
|
-
export declare function hslToHex(h: number, s: number, l: number): string;
|
|
57
|
-
export declare function adjustHexBrightness(hex: string, offsetPercent: number): string;
|
|
58
|
-
export declare function rotateHue(hex: string, degrees: number): string;
|
|
59
|
-
export declare function lighten(color: string, amount: number): string;
|
|
60
|
-
export declare function darken(color: string, amount: number): string;
|
|
61
|
-
export declare function saturate(color: string, amount: number): string;
|
|
62
|
-
export declare function desaturate(color: string, amount: number): string;
|
|
63
|
-
export declare function setAlpha(color: string, alpha: number): string;
|
|
64
|
-
export declare function getAlpha(color: string): number;
|
|
65
|
-
export declare function invertColor(color: string): string;
|
|
66
|
-
export declare function grayscale(color: string): string;
|
|
67
|
-
export declare function rgbToHex({ r, g, b }: {
|
|
68
|
-
r: number;
|
|
69
|
-
g: number;
|
|
70
|
-
b: number;
|
|
71
|
-
}): string;
|
|
72
|
-
export declare function rgbaToHex({ r, g, b, a }: {
|
|
73
|
-
r: number;
|
|
74
|
-
g: number;
|
|
75
|
-
b: number;
|
|
76
|
-
a: number;
|
|
77
|
-
}): string;
|
|
78
|
-
export declare function rgbToRgbaString({ r, g, b }: {
|
|
79
|
-
r: number;
|
|
80
|
-
g: number;
|
|
81
|
-
b: number;
|
|
82
|
-
}, a: number): string;
|
|
83
|
-
export declare function rgbaStringToRgba(str: string): {
|
|
84
|
-
r: number;
|
|
85
|
-
g: number;
|
|
86
|
-
b: number;
|
|
87
|
-
a: number;
|
|
88
|
-
} | null;
|
|
89
|
-
export declare function rgbToHsl({ r, g, b }: {
|
|
90
|
-
r: number;
|
|
91
|
-
g: number;
|
|
92
|
-
b: number;
|
|
93
|
-
}): [number, number, number];
|
|
94
|
-
export declare function hslToRgb(h: number, s: number, l: number): {
|
|
95
|
-
r: number;
|
|
96
|
-
g: number;
|
|
97
|
-
b: number;
|
|
98
|
-
};
|
|
99
|
-
export declare function rgbToHsv({ r, g, b }: {
|
|
100
|
-
r: number;
|
|
101
|
-
g: number;
|
|
102
|
-
b: number;
|
|
103
|
-
}): [number, number, number];
|
|
104
|
-
export declare function hsvToRgb(h: number, s: number, v: number): {
|
|
105
|
-
r: number;
|
|
106
|
-
g: number;
|
|
107
|
-
b: number;
|
|
108
|
-
};
|
|
109
|
-
export declare function hexToHsv(hex: string): [number, number, number];
|
|
110
|
-
export declare function hsvToHex(h: number, s: number, v: number): string;
|
|
111
|
-
export declare function hex8ToRgba(hex: string): {
|
|
112
|
-
r: number;
|
|
113
|
-
g: number;
|
|
114
|
-
b: number;
|
|
115
|
-
a: number;
|
|
116
|
-
} | null;
|
|
117
|
-
export declare function rgbaToHex8({ r, g, b, a }: {
|
|
118
|
-
r: number;
|
|
119
|
-
g: number;
|
|
120
|
-
b: number;
|
|
121
|
-
a: number;
|
|
122
|
-
}): string;
|
|
123
|
-
export declare function normalizeColor(input: string | {
|
|
124
|
-
r: number;
|
|
125
|
-
g: number;
|
|
126
|
-
b: number;
|
|
127
|
-
} | {
|
|
128
|
-
h: number;
|
|
129
|
-
s: number;
|
|
130
|
-
l: number;
|
|
131
|
-
}): {
|
|
132
|
-
type: string;
|
|
133
|
-
hex: string;
|
|
134
|
-
r: any;
|
|
135
|
-
g: any;
|
|
136
|
-
b: any;
|
|
137
|
-
a: number;
|
|
138
|
-
h: number;
|
|
139
|
-
s: number;
|
|
140
|
-
l: number;
|
|
141
|
-
v: number;
|
|
142
|
-
raw?: undefined;
|
|
143
|
-
} | {
|
|
144
|
-
type: string;
|
|
145
|
-
hex: string;
|
|
146
|
-
r: number;
|
|
147
|
-
g: number;
|
|
148
|
-
b: number;
|
|
149
|
-
a: number;
|
|
150
|
-
h: any;
|
|
151
|
-
s: any;
|
|
152
|
-
l: any;
|
|
153
|
-
v: number;
|
|
154
|
-
raw?: undefined;
|
|
155
|
-
} | {
|
|
156
|
-
type: string;
|
|
157
|
-
hex?: undefined;
|
|
158
|
-
r?: undefined;
|
|
159
|
-
g?: undefined;
|
|
160
|
-
b?: undefined;
|
|
161
|
-
a?: undefined;
|
|
162
|
-
h?: undefined;
|
|
163
|
-
s?: undefined;
|
|
164
|
-
l?: undefined;
|
|
165
|
-
v?: undefined;
|
|
166
|
-
raw?: undefined;
|
|
167
|
-
} | {
|
|
168
|
-
type: string;
|
|
169
|
-
raw: string;
|
|
170
|
-
hex?: undefined;
|
|
171
|
-
r?: undefined;
|
|
172
|
-
g?: undefined;
|
|
173
|
-
b?: undefined;
|
|
174
|
-
a?: undefined;
|
|
175
|
-
h?: undefined;
|
|
176
|
-
s?: undefined;
|
|
177
|
-
l?: undefined;
|
|
178
|
-
v?: undefined;
|
|
179
|
-
} | {
|
|
180
|
-
type: string;
|
|
181
|
-
hex: string;
|
|
182
|
-
r: number;
|
|
183
|
-
g: number;
|
|
184
|
-
b: number;
|
|
185
|
-
a: number;
|
|
186
|
-
h?: undefined;
|
|
187
|
-
s?: undefined;
|
|
188
|
-
l?: undefined;
|
|
189
|
-
v?: undefined;
|
|
190
|
-
raw?: undefined;
|
|
191
|
-
};
|
|
192
|
-
export declare function complement(color: string): string;
|
|
193
|
-
export declare function triadic(color: string): [string, string, string];
|
|
194
|
-
export declare function analogous(color: string, angle?: number): [string, string, string];
|
|
195
|
-
export declare function splitComplementary(color: string): [string, string, string];
|
|
196
|
-
export declare function tetradic(color: string): [string, string, string, string];
|
|
197
|
-
export declare function colorShades(color: string, steps?: number): string[];
|
|
198
|
-
export declare function monochromatic(color: string, steps?: number): string[];
|
|
199
|
-
export declare function mixColors(c1: string, c2: string, t: number, opts?: {
|
|
200
|
-
mode?: 'rgb' | 'hsl' | 'lab' | 'lch' | 'oklab' | 'oklch';
|
|
201
|
-
format?: 'hex' | 'rgb' | 'rgba' | 'hsl';
|
|
202
|
-
hueInterpolation?: 'shorter' | 'longer' | 'increasing' | 'decreasing';
|
|
203
|
-
}): string;
|
|
204
|
-
export declare function relativeLuminance(color: string): number;
|
|
205
|
-
export declare function contrastRatio(a: string, b: string): number;
|
|
206
|
-
export declare function isDark(color: string, threshold?: number): boolean;
|
|
207
|
-
export declare function isLight(color: string, threshold?: number): boolean;
|
|
208
|
-
export declare function rgbToCmyk({ r, g, b }: {
|
|
209
|
-
r: number;
|
|
210
|
-
g: number;
|
|
211
|
-
b: number;
|
|
212
|
-
}): {
|
|
213
|
-
c: number;
|
|
214
|
-
m: number;
|
|
215
|
-
y: number;
|
|
216
|
-
k: number;
|
|
217
|
-
};
|
|
218
|
-
export declare function cmykToRgb({ c, m, y, k }: {
|
|
219
|
-
c: number;
|
|
220
|
-
m: number;
|
|
221
|
-
y: number;
|
|
222
|
-
k: number;
|
|
223
|
-
}): {
|
|
224
|
-
r: number;
|
|
225
|
-
g: number;
|
|
226
|
-
b: number;
|
|
227
|
-
};
|
|
228
|
-
export declare function rgbToLab({ r, g, b }: {
|
|
229
|
-
r: number;
|
|
230
|
-
g: number;
|
|
231
|
-
b: number;
|
|
232
|
-
}): {
|
|
233
|
-
L: number;
|
|
234
|
-
a: number;
|
|
235
|
-
b: number;
|
|
236
|
-
};
|
|
237
|
-
export declare function labToRgb({ L, a, b }: {
|
|
238
|
-
L: number;
|
|
239
|
-
a: number;
|
|
240
|
-
b: number;
|
|
241
|
-
}): {
|
|
242
|
-
r: number;
|
|
243
|
-
g: number;
|
|
244
|
-
b: number;
|
|
245
|
-
};
|
|
246
|
-
export declare function rgbToLch({ r, g, b }: {
|
|
247
|
-
r: number;
|
|
248
|
-
g: number;
|
|
249
|
-
b: number;
|
|
250
|
-
}): {
|
|
251
|
-
L: number;
|
|
252
|
-
C: number;
|
|
253
|
-
H: number;
|
|
254
|
-
};
|
|
255
|
-
export declare function lchToRgb({ L, C, H }: {
|
|
256
|
-
L: number;
|
|
257
|
-
C: number;
|
|
258
|
-
H: number;
|
|
259
|
-
}): {
|
|
260
|
-
r: number;
|
|
261
|
-
g: number;
|
|
262
|
-
b: number;
|
|
263
|
-
};
|
|
264
|
-
export type WcagLevel = 'AAA' | 'AA' | 'AA-large' | 'fail';
|
|
265
|
-
export declare function wcagLevel(foreground: string, background: string): WcagLevel;
|
|
266
|
-
export declare function bestTextColor(background: string): '#000000' | '#ffffff';
|
|
267
|
-
export declare function bestContrastColor(background: string, candidates: string[]): string;
|
|
268
|
-
export declare function rgbToHwb({ r, g, b }: {
|
|
269
|
-
r: number;
|
|
270
|
-
g: number;
|
|
271
|
-
b: number;
|
|
272
|
-
}): [number, number, number];
|
|
273
|
-
export declare function hwbToRgb(H: number, W: number, B: number): {
|
|
274
|
-
r: number;
|
|
275
|
-
g: number;
|
|
276
|
-
b: number;
|
|
277
|
-
};
|
|
278
|
-
export declare function toHwbString(H: number, W: number, B: number, alpha?: number): string;
|
|
279
|
-
export declare function parseHwbString(str: string): {
|
|
280
|
-
H: number;
|
|
281
|
-
W: number;
|
|
282
|
-
B: number;
|
|
283
|
-
alpha: number;
|
|
284
|
-
} | null;
|
|
285
|
-
export declare function rgbToOklab({ r, g, b }: {
|
|
286
|
-
r: number;
|
|
287
|
-
g: number;
|
|
288
|
-
b: number;
|
|
289
|
-
}): {
|
|
290
|
-
L: number;
|
|
291
|
-
a: number;
|
|
292
|
-
b: number;
|
|
293
|
-
};
|
|
294
|
-
export declare function oklabToRgb({ L, a, b }: {
|
|
295
|
-
L: number;
|
|
296
|
-
a: number;
|
|
297
|
-
b: number;
|
|
298
|
-
}): {
|
|
299
|
-
r: number;
|
|
300
|
-
g: number;
|
|
301
|
-
b: number;
|
|
302
|
-
};
|
|
303
|
-
export declare function rgbToOklch({ r, g, b }: {
|
|
304
|
-
r: number;
|
|
305
|
-
g: number;
|
|
306
|
-
b: number;
|
|
307
|
-
}): {
|
|
308
|
-
L: number;
|
|
309
|
-
C: number;
|
|
310
|
-
H: number;
|
|
311
|
-
};
|
|
312
|
-
export declare function oklchToRgb({ L, C, H }: {
|
|
313
|
-
L: number;
|
|
314
|
-
C: number;
|
|
315
|
-
H: number;
|
|
316
|
-
}): {
|
|
317
|
-
r: number;
|
|
318
|
-
g: number;
|
|
319
|
-
b: number;
|
|
320
|
-
};
|
|
321
|
-
export declare function toHslString(h: number, s: number, l: number, alpha?: number): string;
|
|
322
|
-
export declare function colorDeltaE(c1: string, c2: string): number;
|
|
323
|
-
export declare function randomColor(options?: {
|
|
324
|
-
hRange?: [number, number];
|
|
325
|
-
sRange?: [number, number];
|
|
326
|
-
lRange?: [number, number];
|
|
327
|
-
}): string;
|
|
328
|
-
export declare function toNearestNamedColor(color: string): string;
|
|
329
|
-
export declare function toOklchString(color: string, alpha?: number): string;
|
|
330
|
-
export declare function toColorP3String(color: string, alpha?: number): string;
|
|
331
|
-
export declare function interpolateColors(color1: string, color2: string, steps: number, options?: {
|
|
332
|
-
space?: 'rgb' | 'hsl' | 'lab' | 'lch' | 'oklab' | 'oklch';
|
|
333
|
-
format?: 'hex' | 'rgb' | 'rgba' | 'hsl';
|
|
334
|
-
hueInterpolation?: 'shorter' | 'longer' | 'increasing' | 'decreasing';
|
|
335
|
-
}): string[];
|
|
336
|
-
export declare function createColorScale(anchors: string[] | Array<{
|
|
337
|
-
color: string;
|
|
338
|
-
position?: number;
|
|
339
|
-
}>, steps: number, options?: {
|
|
340
|
-
space?: 'rgb' | 'hsl' | 'oklab' | 'oklch';
|
|
341
|
-
format?: 'hex' | 'rgb' | 'hsl';
|
|
342
|
-
}): string[];
|
|
343
|
-
export declare function midpointColor(color1: string, color2: string, options?: {
|
|
344
|
-
space?: 'lab' | 'lch' | 'oklab' | 'oklch';
|
|
345
|
-
}): string;
|
|
346
|
-
export declare function tints(color: string, steps?: number): string[];
|
|
347
|
-
export declare function shades(color: string, steps?: number): string[];
|
|
348
|
-
export declare function tones(color: string, steps?: number, gray?: string): string[];
|
|
349
|
-
export type ColorBlindnessType = 'protanopia' | 'deuteranopia' | 'tritanopia';
|
|
350
|
-
export declare function simulateProtanopia(color: string): string;
|
|
351
|
-
export declare function simulateDeuteranopia(color: string): string;
|
|
352
|
-
export declare function simulateTritanopia(color: string): string;
|
|
353
|
-
export declare function simulateColorBlindness(color: string, type: ColorBlindnessType): string;
|
|
354
|
-
export type BackgroundSpec = string | {
|
|
355
|
-
type: 'semi-transparent';
|
|
356
|
-
color: string;
|
|
357
|
-
underlay?: string;
|
|
358
|
-
} | {
|
|
359
|
-
type: 'gradient';
|
|
360
|
-
stops: string[];
|
|
361
|
-
};
|
|
362
|
-
export declare function isReadableOnBackground(textColor: string, background: BackgroundSpec, options?: {
|
|
363
|
-
level?: 'AA' | 'AAA';
|
|
364
|
-
largeText?: boolean;
|
|
365
|
-
}): {
|
|
366
|
-
readable: boolean;
|
|
367
|
-
minContrastRatio: number;
|
|
368
|
-
wcagLevel: WcagLevel;
|
|
369
|
-
};
|
|
370
|
-
export interface PaletteScore {
|
|
371
|
-
palette: string[];
|
|
372
|
-
minContrastRatio: number;
|
|
373
|
-
avgContrastRatio: number;
|
|
374
|
-
}
|
|
375
|
-
export declare function bestContrastPalette(background: string, palettes: string[][], options?: {
|
|
376
|
-
weights?: number[];
|
|
377
|
-
}): PaletteScore & {
|
|
378
|
-
paletteIndex: number;
|
|
379
|
-
};
|
|
380
|
-
export declare function clearColorCache(): void;
|
|
381
|
-
export declare function getCacheStats(): {
|
|
382
|
-
size: number;
|
|
383
|
-
hits: number;
|
|
384
|
-
};
|
|
385
|
-
export declare function enableCache(): void;
|
|
386
|
-
export declare function disableCache(): void;
|
|
387
|
-
export declare function normalizeColorCached(input: string): ReturnType<typeof normalizeColor>;
|
|
388
|
-
export declare function generateGradientColors(start: string, end: string, steps: number, options?: {
|
|
389
|
-
mode?: 'rgb' | 'hsl' | 'oklab' | 'oklch';
|
|
390
|
-
format?: 'hex' | 'rgb' | 'hsl';
|
|
391
|
-
}): Generator<string>;
|
|
392
|
-
export declare function generateTints(color: string, steps: number, options?: {
|
|
393
|
-
format?: 'hex' | 'rgb' | 'hsl';
|
|
394
|
-
}): Generator<string>;
|
|
395
|
-
export declare function generateShades(color: string, steps: number, options?: {
|
|
396
|
-
format?: 'hex' | 'rgb' | 'hsl';
|
|
397
|
-
}): Generator<string>;
|
|
1
|
+
export * from './parse.js';
|
|
2
|
+
export * from './convert/index.js';
|
|
3
|
+
export * from './manipulate.js';
|
|
4
|
+
export * from './palette.js';
|
|
5
|
+
export * from './a11y.js';
|
|
6
|
+
export * from './cache.js';
|