@spark-ui/theme-utils 6.2.5 → 6.2.7
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/CHANGELOG.md +8 -0
- package/dist/contrastCheck.d.ts +656 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +29 -8
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [6.2.7](https://github.com/adevinta/spark/compare/v6.2.6...v6.2.7) (2024-10-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @spark-ui/theme-utils
|
|
9
|
+
|
|
10
|
+
## [6.2.6](https://github.com/adevinta/spark/compare/v6.2.5...v6.2.6) (2024-10-08)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @spark-ui/theme-utils
|
|
13
|
+
|
|
6
14
|
## [6.2.5](https://github.com/adevinta/spark/compare/v6.2.4...v6.2.5) (2024-10-08)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @spark-ui/theme-utils
|
|
@@ -0,0 +1,656 @@
|
|
|
1
|
+
import { Theme } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
|
|
4
|
+
*
|
|
5
|
+
* - Normal text expected ratio: 4.5:1
|
|
6
|
+
* - Large text (>= 18pt or 14pt with bold font) expected ratio: 3:1
|
|
7
|
+
*
|
|
8
|
+
* (1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px)
|
|
9
|
+
*
|
|
10
|
+
*
|
|
11
|
+
* How to read contrast:
|
|
12
|
+
*
|
|
13
|
+
* In the ratio "4.5:1", the 4.5 represents the luminance of the lighter color compared to the darker color, which is 1.
|
|
14
|
+
* A ratio of 4.5:1 means the lighter color is 4.5 times brighter than the darker color.
|
|
15
|
+
*
|
|
16
|
+
* 1:1 – No contrast (the two colors are identical).
|
|
17
|
+
* 21:1 (maximum contrast, black vs. white).
|
|
18
|
+
*/
|
|
19
|
+
export declare function checkColorContrast(hex1: string, hex2: string, fontSizePx: number): {
|
|
20
|
+
contrastRatio: string;
|
|
21
|
+
score: string;
|
|
22
|
+
textSize: string;
|
|
23
|
+
colors: [string, string];
|
|
24
|
+
};
|
|
25
|
+
export declare const getThemeContrastReport: (theme: Theme) => {
|
|
26
|
+
main: {
|
|
27
|
+
small: {
|
|
28
|
+
contrastRatio: string;
|
|
29
|
+
score: string;
|
|
30
|
+
textSize: string;
|
|
31
|
+
colors: [string, string];
|
|
32
|
+
};
|
|
33
|
+
large: {
|
|
34
|
+
contrastRatio: string;
|
|
35
|
+
score: string;
|
|
36
|
+
textSize: string;
|
|
37
|
+
colors: [string, string];
|
|
38
|
+
};
|
|
39
|
+
previewStyles: string;
|
|
40
|
+
};
|
|
41
|
+
mainHovered: {
|
|
42
|
+
small: {
|
|
43
|
+
contrastRatio: string;
|
|
44
|
+
score: string;
|
|
45
|
+
textSize: string;
|
|
46
|
+
colors: [string, string];
|
|
47
|
+
};
|
|
48
|
+
large: {
|
|
49
|
+
contrastRatio: string;
|
|
50
|
+
score: string;
|
|
51
|
+
textSize: string;
|
|
52
|
+
colors: [string, string];
|
|
53
|
+
};
|
|
54
|
+
previewStyles: string;
|
|
55
|
+
};
|
|
56
|
+
mainContainer: {
|
|
57
|
+
small: {
|
|
58
|
+
contrastRatio: string;
|
|
59
|
+
score: string;
|
|
60
|
+
textSize: string;
|
|
61
|
+
colors: [string, string];
|
|
62
|
+
};
|
|
63
|
+
large: {
|
|
64
|
+
contrastRatio: string;
|
|
65
|
+
score: string;
|
|
66
|
+
textSize: string;
|
|
67
|
+
colors: [string, string];
|
|
68
|
+
};
|
|
69
|
+
previewStyles: string;
|
|
70
|
+
};
|
|
71
|
+
mainContainerHovered: {
|
|
72
|
+
small: {
|
|
73
|
+
contrastRatio: string;
|
|
74
|
+
score: string;
|
|
75
|
+
textSize: string;
|
|
76
|
+
colors: [string, string];
|
|
77
|
+
};
|
|
78
|
+
large: {
|
|
79
|
+
contrastRatio: string;
|
|
80
|
+
score: string;
|
|
81
|
+
textSize: string;
|
|
82
|
+
colors: [string, string];
|
|
83
|
+
};
|
|
84
|
+
previewStyles: string;
|
|
85
|
+
};
|
|
86
|
+
support: {
|
|
87
|
+
small: {
|
|
88
|
+
contrastRatio: string;
|
|
89
|
+
score: string;
|
|
90
|
+
textSize: string;
|
|
91
|
+
colors: [string, string];
|
|
92
|
+
};
|
|
93
|
+
large: {
|
|
94
|
+
contrastRatio: string;
|
|
95
|
+
score: string;
|
|
96
|
+
textSize: string;
|
|
97
|
+
colors: [string, string];
|
|
98
|
+
};
|
|
99
|
+
previewStyles: string;
|
|
100
|
+
};
|
|
101
|
+
supportHovered: {
|
|
102
|
+
small: {
|
|
103
|
+
contrastRatio: string;
|
|
104
|
+
score: string;
|
|
105
|
+
textSize: string;
|
|
106
|
+
colors: [string, string];
|
|
107
|
+
};
|
|
108
|
+
large: {
|
|
109
|
+
contrastRatio: string;
|
|
110
|
+
score: string;
|
|
111
|
+
textSize: string;
|
|
112
|
+
colors: [string, string];
|
|
113
|
+
};
|
|
114
|
+
previewStyles: string;
|
|
115
|
+
};
|
|
116
|
+
supportContainer: {
|
|
117
|
+
small: {
|
|
118
|
+
contrastRatio: string;
|
|
119
|
+
score: string;
|
|
120
|
+
textSize: string;
|
|
121
|
+
colors: [string, string];
|
|
122
|
+
};
|
|
123
|
+
large: {
|
|
124
|
+
contrastRatio: string;
|
|
125
|
+
score: string;
|
|
126
|
+
textSize: string;
|
|
127
|
+
colors: [string, string];
|
|
128
|
+
};
|
|
129
|
+
previewStyles: string;
|
|
130
|
+
};
|
|
131
|
+
supportContainerHovered: {
|
|
132
|
+
small: {
|
|
133
|
+
contrastRatio: string;
|
|
134
|
+
score: string;
|
|
135
|
+
textSize: string;
|
|
136
|
+
colors: [string, string];
|
|
137
|
+
};
|
|
138
|
+
large: {
|
|
139
|
+
contrastRatio: string;
|
|
140
|
+
score: string;
|
|
141
|
+
textSize: string;
|
|
142
|
+
colors: [string, string];
|
|
143
|
+
};
|
|
144
|
+
previewStyles: string;
|
|
145
|
+
};
|
|
146
|
+
accent: {
|
|
147
|
+
small: {
|
|
148
|
+
contrastRatio: string;
|
|
149
|
+
score: string;
|
|
150
|
+
textSize: string;
|
|
151
|
+
colors: [string, string];
|
|
152
|
+
};
|
|
153
|
+
large: {
|
|
154
|
+
contrastRatio: string;
|
|
155
|
+
score: string;
|
|
156
|
+
textSize: string;
|
|
157
|
+
colors: [string, string];
|
|
158
|
+
};
|
|
159
|
+
previewStyles: string;
|
|
160
|
+
};
|
|
161
|
+
accentHovered: {
|
|
162
|
+
small: {
|
|
163
|
+
contrastRatio: string;
|
|
164
|
+
score: string;
|
|
165
|
+
textSize: string;
|
|
166
|
+
colors: [string, string];
|
|
167
|
+
};
|
|
168
|
+
large: {
|
|
169
|
+
contrastRatio: string;
|
|
170
|
+
score: string;
|
|
171
|
+
textSize: string;
|
|
172
|
+
colors: [string, string];
|
|
173
|
+
};
|
|
174
|
+
previewStyles: string;
|
|
175
|
+
};
|
|
176
|
+
accentContainer: {
|
|
177
|
+
small: {
|
|
178
|
+
contrastRatio: string;
|
|
179
|
+
score: string;
|
|
180
|
+
textSize: string;
|
|
181
|
+
colors: [string, string];
|
|
182
|
+
};
|
|
183
|
+
large: {
|
|
184
|
+
contrastRatio: string;
|
|
185
|
+
score: string;
|
|
186
|
+
textSize: string;
|
|
187
|
+
colors: [string, string];
|
|
188
|
+
};
|
|
189
|
+
previewStyles: string;
|
|
190
|
+
};
|
|
191
|
+
accentContainerHovered: {
|
|
192
|
+
small: {
|
|
193
|
+
contrastRatio: string;
|
|
194
|
+
score: string;
|
|
195
|
+
textSize: string;
|
|
196
|
+
colors: [string, string];
|
|
197
|
+
};
|
|
198
|
+
large: {
|
|
199
|
+
contrastRatio: string;
|
|
200
|
+
score: string;
|
|
201
|
+
textSize: string;
|
|
202
|
+
colors: [string, string];
|
|
203
|
+
};
|
|
204
|
+
previewStyles: string;
|
|
205
|
+
};
|
|
206
|
+
basic: {
|
|
207
|
+
small: {
|
|
208
|
+
contrastRatio: string;
|
|
209
|
+
score: string;
|
|
210
|
+
textSize: string;
|
|
211
|
+
colors: [string, string];
|
|
212
|
+
};
|
|
213
|
+
large: {
|
|
214
|
+
contrastRatio: string;
|
|
215
|
+
score: string;
|
|
216
|
+
textSize: string;
|
|
217
|
+
colors: [string, string];
|
|
218
|
+
};
|
|
219
|
+
previewStyles: string;
|
|
220
|
+
};
|
|
221
|
+
basicHovered: {
|
|
222
|
+
small: {
|
|
223
|
+
contrastRatio: string;
|
|
224
|
+
score: string;
|
|
225
|
+
textSize: string;
|
|
226
|
+
colors: [string, string];
|
|
227
|
+
};
|
|
228
|
+
large: {
|
|
229
|
+
contrastRatio: string;
|
|
230
|
+
score: string;
|
|
231
|
+
textSize: string;
|
|
232
|
+
colors: [string, string];
|
|
233
|
+
};
|
|
234
|
+
previewStyles: string;
|
|
235
|
+
};
|
|
236
|
+
basicContainer: {
|
|
237
|
+
small: {
|
|
238
|
+
contrastRatio: string;
|
|
239
|
+
score: string;
|
|
240
|
+
textSize: string;
|
|
241
|
+
colors: [string, string];
|
|
242
|
+
};
|
|
243
|
+
large: {
|
|
244
|
+
contrastRatio: string;
|
|
245
|
+
score: string;
|
|
246
|
+
textSize: string;
|
|
247
|
+
colors: [string, string];
|
|
248
|
+
};
|
|
249
|
+
previewStyles: string;
|
|
250
|
+
};
|
|
251
|
+
basicContainerHovered: {
|
|
252
|
+
small: {
|
|
253
|
+
contrastRatio: string;
|
|
254
|
+
score: string;
|
|
255
|
+
textSize: string;
|
|
256
|
+
colors: [string, string];
|
|
257
|
+
};
|
|
258
|
+
large: {
|
|
259
|
+
contrastRatio: string;
|
|
260
|
+
score: string;
|
|
261
|
+
textSize: string;
|
|
262
|
+
colors: [string, string];
|
|
263
|
+
};
|
|
264
|
+
previewStyles: string;
|
|
265
|
+
};
|
|
266
|
+
success: {
|
|
267
|
+
small: {
|
|
268
|
+
contrastRatio: string;
|
|
269
|
+
score: string;
|
|
270
|
+
textSize: string;
|
|
271
|
+
colors: [string, string];
|
|
272
|
+
};
|
|
273
|
+
large: {
|
|
274
|
+
contrastRatio: string;
|
|
275
|
+
score: string;
|
|
276
|
+
textSize: string;
|
|
277
|
+
colors: [string, string];
|
|
278
|
+
};
|
|
279
|
+
previewStyles: string;
|
|
280
|
+
};
|
|
281
|
+
successHovered: {
|
|
282
|
+
small: {
|
|
283
|
+
contrastRatio: string;
|
|
284
|
+
score: string;
|
|
285
|
+
textSize: string;
|
|
286
|
+
colors: [string, string];
|
|
287
|
+
};
|
|
288
|
+
large: {
|
|
289
|
+
contrastRatio: string;
|
|
290
|
+
score: string;
|
|
291
|
+
textSize: string;
|
|
292
|
+
colors: [string, string];
|
|
293
|
+
};
|
|
294
|
+
previewStyles: string;
|
|
295
|
+
};
|
|
296
|
+
successContainer: {
|
|
297
|
+
small: {
|
|
298
|
+
contrastRatio: string;
|
|
299
|
+
score: string;
|
|
300
|
+
textSize: string;
|
|
301
|
+
colors: [string, string];
|
|
302
|
+
};
|
|
303
|
+
large: {
|
|
304
|
+
contrastRatio: string;
|
|
305
|
+
score: string;
|
|
306
|
+
textSize: string;
|
|
307
|
+
colors: [string, string];
|
|
308
|
+
};
|
|
309
|
+
previewStyles: string;
|
|
310
|
+
};
|
|
311
|
+
successContainerHovered: {
|
|
312
|
+
small: {
|
|
313
|
+
contrastRatio: string;
|
|
314
|
+
score: string;
|
|
315
|
+
textSize: string;
|
|
316
|
+
colors: [string, string];
|
|
317
|
+
};
|
|
318
|
+
large: {
|
|
319
|
+
contrastRatio: string;
|
|
320
|
+
score: string;
|
|
321
|
+
textSize: string;
|
|
322
|
+
colors: [string, string];
|
|
323
|
+
};
|
|
324
|
+
previewStyles: string;
|
|
325
|
+
};
|
|
326
|
+
error: {
|
|
327
|
+
small: {
|
|
328
|
+
contrastRatio: string;
|
|
329
|
+
score: string;
|
|
330
|
+
textSize: string;
|
|
331
|
+
colors: [string, string];
|
|
332
|
+
};
|
|
333
|
+
large: {
|
|
334
|
+
contrastRatio: string;
|
|
335
|
+
score: string;
|
|
336
|
+
textSize: string;
|
|
337
|
+
colors: [string, string];
|
|
338
|
+
};
|
|
339
|
+
previewStyles: string;
|
|
340
|
+
};
|
|
341
|
+
errorHovered: {
|
|
342
|
+
small: {
|
|
343
|
+
contrastRatio: string;
|
|
344
|
+
score: string;
|
|
345
|
+
textSize: string;
|
|
346
|
+
colors: [string, string];
|
|
347
|
+
};
|
|
348
|
+
large: {
|
|
349
|
+
contrastRatio: string;
|
|
350
|
+
score: string;
|
|
351
|
+
textSize: string;
|
|
352
|
+
colors: [string, string];
|
|
353
|
+
};
|
|
354
|
+
previewStyles: string;
|
|
355
|
+
};
|
|
356
|
+
errorContainer: {
|
|
357
|
+
small: {
|
|
358
|
+
contrastRatio: string;
|
|
359
|
+
score: string;
|
|
360
|
+
textSize: string;
|
|
361
|
+
colors: [string, string];
|
|
362
|
+
};
|
|
363
|
+
large: {
|
|
364
|
+
contrastRatio: string;
|
|
365
|
+
score: string;
|
|
366
|
+
textSize: string;
|
|
367
|
+
colors: [string, string];
|
|
368
|
+
};
|
|
369
|
+
previewStyles: string;
|
|
370
|
+
};
|
|
371
|
+
errorContainerHovered: {
|
|
372
|
+
small: {
|
|
373
|
+
contrastRatio: string;
|
|
374
|
+
score: string;
|
|
375
|
+
textSize: string;
|
|
376
|
+
colors: [string, string];
|
|
377
|
+
};
|
|
378
|
+
large: {
|
|
379
|
+
contrastRatio: string;
|
|
380
|
+
score: string;
|
|
381
|
+
textSize: string;
|
|
382
|
+
colors: [string, string];
|
|
383
|
+
};
|
|
384
|
+
previewStyles: string;
|
|
385
|
+
};
|
|
386
|
+
alert: {
|
|
387
|
+
small: {
|
|
388
|
+
contrastRatio: string;
|
|
389
|
+
score: string;
|
|
390
|
+
textSize: string;
|
|
391
|
+
colors: [string, string];
|
|
392
|
+
};
|
|
393
|
+
large: {
|
|
394
|
+
contrastRatio: string;
|
|
395
|
+
score: string;
|
|
396
|
+
textSize: string;
|
|
397
|
+
colors: [string, string];
|
|
398
|
+
};
|
|
399
|
+
previewStyles: string;
|
|
400
|
+
};
|
|
401
|
+
alertHovered: {
|
|
402
|
+
small: {
|
|
403
|
+
contrastRatio: string;
|
|
404
|
+
score: string;
|
|
405
|
+
textSize: string;
|
|
406
|
+
colors: [string, string];
|
|
407
|
+
};
|
|
408
|
+
large: {
|
|
409
|
+
contrastRatio: string;
|
|
410
|
+
score: string;
|
|
411
|
+
textSize: string;
|
|
412
|
+
colors: [string, string];
|
|
413
|
+
};
|
|
414
|
+
previewStyles: string;
|
|
415
|
+
};
|
|
416
|
+
alertContainer: {
|
|
417
|
+
small: {
|
|
418
|
+
contrastRatio: string;
|
|
419
|
+
score: string;
|
|
420
|
+
textSize: string;
|
|
421
|
+
colors: [string, string];
|
|
422
|
+
};
|
|
423
|
+
large: {
|
|
424
|
+
contrastRatio: string;
|
|
425
|
+
score: string;
|
|
426
|
+
textSize: string;
|
|
427
|
+
colors: [string, string];
|
|
428
|
+
};
|
|
429
|
+
previewStyles: string;
|
|
430
|
+
};
|
|
431
|
+
alertContainerHovered: {
|
|
432
|
+
small: {
|
|
433
|
+
contrastRatio: string;
|
|
434
|
+
score: string;
|
|
435
|
+
textSize: string;
|
|
436
|
+
colors: [string, string];
|
|
437
|
+
};
|
|
438
|
+
large: {
|
|
439
|
+
contrastRatio: string;
|
|
440
|
+
score: string;
|
|
441
|
+
textSize: string;
|
|
442
|
+
colors: [string, string];
|
|
443
|
+
};
|
|
444
|
+
previewStyles: string;
|
|
445
|
+
};
|
|
446
|
+
info: {
|
|
447
|
+
small: {
|
|
448
|
+
contrastRatio: string;
|
|
449
|
+
score: string;
|
|
450
|
+
textSize: string;
|
|
451
|
+
colors: [string, string];
|
|
452
|
+
};
|
|
453
|
+
large: {
|
|
454
|
+
contrastRatio: string;
|
|
455
|
+
score: string;
|
|
456
|
+
textSize: string;
|
|
457
|
+
colors: [string, string];
|
|
458
|
+
};
|
|
459
|
+
previewStyles: string;
|
|
460
|
+
};
|
|
461
|
+
infoHovered: {
|
|
462
|
+
small: {
|
|
463
|
+
contrastRatio: string;
|
|
464
|
+
score: string;
|
|
465
|
+
textSize: string;
|
|
466
|
+
colors: [string, string];
|
|
467
|
+
};
|
|
468
|
+
large: {
|
|
469
|
+
contrastRatio: string;
|
|
470
|
+
score: string;
|
|
471
|
+
textSize: string;
|
|
472
|
+
colors: [string, string];
|
|
473
|
+
};
|
|
474
|
+
previewStyles: string;
|
|
475
|
+
};
|
|
476
|
+
infoContainer: {
|
|
477
|
+
small: {
|
|
478
|
+
contrastRatio: string;
|
|
479
|
+
score: string;
|
|
480
|
+
textSize: string;
|
|
481
|
+
colors: [string, string];
|
|
482
|
+
};
|
|
483
|
+
large: {
|
|
484
|
+
contrastRatio: string;
|
|
485
|
+
score: string;
|
|
486
|
+
textSize: string;
|
|
487
|
+
colors: [string, string];
|
|
488
|
+
};
|
|
489
|
+
previewStyles: string;
|
|
490
|
+
};
|
|
491
|
+
infoContainerHovered: {
|
|
492
|
+
small: {
|
|
493
|
+
contrastRatio: string;
|
|
494
|
+
score: string;
|
|
495
|
+
textSize: string;
|
|
496
|
+
colors: [string, string];
|
|
497
|
+
};
|
|
498
|
+
large: {
|
|
499
|
+
contrastRatio: string;
|
|
500
|
+
score: string;
|
|
501
|
+
textSize: string;
|
|
502
|
+
colors: [string, string];
|
|
503
|
+
};
|
|
504
|
+
previewStyles: string;
|
|
505
|
+
};
|
|
506
|
+
neutral: {
|
|
507
|
+
small: {
|
|
508
|
+
contrastRatio: string;
|
|
509
|
+
score: string;
|
|
510
|
+
textSize: string;
|
|
511
|
+
colors: [string, string];
|
|
512
|
+
};
|
|
513
|
+
large: {
|
|
514
|
+
contrastRatio: string;
|
|
515
|
+
score: string;
|
|
516
|
+
textSize: string;
|
|
517
|
+
colors: [string, string];
|
|
518
|
+
};
|
|
519
|
+
previewStyles: string;
|
|
520
|
+
};
|
|
521
|
+
neutralHovered: {
|
|
522
|
+
small: {
|
|
523
|
+
contrastRatio: string;
|
|
524
|
+
score: string;
|
|
525
|
+
textSize: string;
|
|
526
|
+
colors: [string, string];
|
|
527
|
+
};
|
|
528
|
+
large: {
|
|
529
|
+
contrastRatio: string;
|
|
530
|
+
score: string;
|
|
531
|
+
textSize: string;
|
|
532
|
+
colors: [string, string];
|
|
533
|
+
};
|
|
534
|
+
previewStyles: string;
|
|
535
|
+
};
|
|
536
|
+
neutralContainer: {
|
|
537
|
+
small: {
|
|
538
|
+
contrastRatio: string;
|
|
539
|
+
score: string;
|
|
540
|
+
textSize: string;
|
|
541
|
+
colors: [string, string];
|
|
542
|
+
};
|
|
543
|
+
large: {
|
|
544
|
+
contrastRatio: string;
|
|
545
|
+
score: string;
|
|
546
|
+
textSize: string;
|
|
547
|
+
colors: [string, string];
|
|
548
|
+
};
|
|
549
|
+
previewStyles: string;
|
|
550
|
+
};
|
|
551
|
+
neutralContainerHovered: {
|
|
552
|
+
small: {
|
|
553
|
+
contrastRatio: string;
|
|
554
|
+
score: string;
|
|
555
|
+
textSize: string;
|
|
556
|
+
colors: [string, string];
|
|
557
|
+
};
|
|
558
|
+
large: {
|
|
559
|
+
contrastRatio: string;
|
|
560
|
+
score: string;
|
|
561
|
+
textSize: string;
|
|
562
|
+
colors: [string, string];
|
|
563
|
+
};
|
|
564
|
+
previewStyles: string;
|
|
565
|
+
};
|
|
566
|
+
background: {
|
|
567
|
+
small: {
|
|
568
|
+
contrastRatio: string;
|
|
569
|
+
score: string;
|
|
570
|
+
textSize: string;
|
|
571
|
+
colors: [string, string];
|
|
572
|
+
};
|
|
573
|
+
large: {
|
|
574
|
+
contrastRatio: string;
|
|
575
|
+
score: string;
|
|
576
|
+
textSize: string;
|
|
577
|
+
colors: [string, string];
|
|
578
|
+
};
|
|
579
|
+
previewStyles: string;
|
|
580
|
+
};
|
|
581
|
+
backgroundVariant: {
|
|
582
|
+
small: {
|
|
583
|
+
contrastRatio: string;
|
|
584
|
+
score: string;
|
|
585
|
+
textSize: string;
|
|
586
|
+
colors: [string, string];
|
|
587
|
+
};
|
|
588
|
+
large: {
|
|
589
|
+
contrastRatio: string;
|
|
590
|
+
score: string;
|
|
591
|
+
textSize: string;
|
|
592
|
+
colors: [string, string];
|
|
593
|
+
};
|
|
594
|
+
previewStyles: string;
|
|
595
|
+
};
|
|
596
|
+
surface: {
|
|
597
|
+
small: {
|
|
598
|
+
contrastRatio: string;
|
|
599
|
+
score: string;
|
|
600
|
+
textSize: string;
|
|
601
|
+
colors: [string, string];
|
|
602
|
+
};
|
|
603
|
+
large: {
|
|
604
|
+
contrastRatio: string;
|
|
605
|
+
score: string;
|
|
606
|
+
textSize: string;
|
|
607
|
+
colors: [string, string];
|
|
608
|
+
};
|
|
609
|
+
previewStyles: string;
|
|
610
|
+
};
|
|
611
|
+
surfaceHovered: {
|
|
612
|
+
small: {
|
|
613
|
+
contrastRatio: string;
|
|
614
|
+
score: string;
|
|
615
|
+
textSize: string;
|
|
616
|
+
colors: [string, string];
|
|
617
|
+
};
|
|
618
|
+
large: {
|
|
619
|
+
contrastRatio: string;
|
|
620
|
+
score: string;
|
|
621
|
+
textSize: string;
|
|
622
|
+
colors: [string, string];
|
|
623
|
+
};
|
|
624
|
+
previewStyles: string;
|
|
625
|
+
};
|
|
626
|
+
surfaceInverse: {
|
|
627
|
+
small: {
|
|
628
|
+
contrastRatio: string;
|
|
629
|
+
score: string;
|
|
630
|
+
textSize: string;
|
|
631
|
+
colors: [string, string];
|
|
632
|
+
};
|
|
633
|
+
large: {
|
|
634
|
+
contrastRatio: string;
|
|
635
|
+
score: string;
|
|
636
|
+
textSize: string;
|
|
637
|
+
colors: [string, string];
|
|
638
|
+
};
|
|
639
|
+
previewStyles: string;
|
|
640
|
+
};
|
|
641
|
+
surfaceInverseHovered: {
|
|
642
|
+
small: {
|
|
643
|
+
contrastRatio: string;
|
|
644
|
+
score: string;
|
|
645
|
+
textSize: string;
|
|
646
|
+
colors: [string, string];
|
|
647
|
+
};
|
|
648
|
+
large: {
|
|
649
|
+
contrastRatio: string;
|
|
650
|
+
score: string;
|
|
651
|
+
textSize: string;
|
|
652
|
+
colors: [string, string];
|
|
653
|
+
};
|
|
654
|
+
previewStyles: string;
|
|
655
|
+
};
|
|
656
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { createTheme } from './createTheme';
|
|
2
2
|
export { defaultTheme } from './defaultTheme';
|
|
3
3
|
export { defaultThemeDark } from './defaultThemeDark';
|
|
4
|
+
export { getThemeContrastReport, checkColorContrast } from './contrastCheck';
|
|
4
5
|
export type { Theme, ThemeConfig } from './types';
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("deepmerge"),e={borderRadius:{none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem",full:"9999px"},borderWidth:{none:"0px",sm:"1px",md:"2px"},boxShadow:{sm:"0 1px 2px 0 rgba(108 129 157 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(108 129 157 / 0.50)",md:"0 6px 12px 0 rgba(108 129 157 / 0.50)",lg:"0 8px 16px 0 rgba(108 129 157 / 0.50)",xl:"0 12px 24px 0 rgba(108 129 157 / 0.50)",none:"none"},colors:{basic:"#094171",onBasic:"#FFFFFF",basicHovered:"#0C5291",basicContainer:"#E6F2FD",onBasicContainer:"#152233",basicContainerHovered:"#F4F9FE",accent:"#8526D9",onAccent:"#FFFFFF",accentHovered:"#9F47EB",accentContainer:"#E9D6FA",onAccentContainer:"#362555",accentContainerHovered:"#F5EDFD",accentVariant:"#501782",onAccentVariant:"#FFFFFF",accentVariantHovered:"#6B1FAD",main:"#EC5A13",onMain:"#FFFFFF",mainHovered:"#F07B42",mainContainer:"#FFE9DE",onMainContainer:"#89380F",mainContainerHovered:"#FFF2EB",mainVariant:"#B84A14",onMainVariant:"#FFFFFF",mainVariantHovered:"#EC5A13",support:"#094171",onSupport:"#FFFFFF",supportHovered:"#0C5291",supportContainer:"#E6F2FD",onSupportContainer:"#152233",supportContainerHovered:"#F4F9FE",supportVariant:"#0C5291",onSupportVariant:"#FFFFFF",supportVariantHovered:"#0F69B9",success:"#3E7A40",onSuccess:"#FFFFFF",successHovered:"#4E9850",successContainer:"#DCEADC",onSuccessContainer:"#2F5B30",successContainerHovered:"#EDF5EE",alert:"#FFAA00",onAlert:"#202730",alertHovered:"#FFBB33",alertContainer:"#FFEECC",onAlertContainer:"#996600",alertContainerHovered:"#FFF6E5",error:"#D93426",onError:"#FFFFFF",errorHovered:"#E05D52",errorContainer:"#F7D7D4",onErrorContainer:"#822017",errorContainerHovered:"#FBECEB",info:"#1388EC",onInfo:"#FFFFFF",infoHovered:"#69B2F3",infoContainer:"#C2E0FA",onInfoContainer:"#0C5291",infoContainerHovered:"#E6F2FD",neutral:"#4F6076",onNeutral:"#FFFFFF",neutralHovered:"#6C819D",neutralContainer:"#F0F2F5",onNeutralContainer:"#3A4757",neutralContainerHovered:"#F6F8F9",background:"#FFFFFF",onBackground:"#152233",backgroundVariant:"#F4F9FE",onBackgroundVariant:"#152233",surface:"#FFFFFF",onSurface:"#152233",surfaceHovered:"#F6F8F9",surfaceInverse:"#2B3441",onSurfaceInverse:"#FFFFFF",surfaceInverseHovered:"#3A4757",outline:"#ACB8C7",outlineHigh:"#202730",overlay:"#202730B8",onOverlay:"#FFFFFF"},fontFamily:{sans:'"Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',mono:'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'},fontSize:{display1:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display1Expanded:{fontSize:"3rem",lineHeight:"4rem",fontWeight:"700"},display2:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},display2Expanded:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display3:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},display3Expanded:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},headline1:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},headline1Expanded:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},headline2:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},headline2Expanded:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},subhead:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},subheadExpanded:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},body1:{fontSize:"1rem",lineHeight:"1.5rem"},body2:{fontSize:"0.875rem",lineHeight:"1.25rem"},caption:{fontSize:"0.75rem",lineHeight:"1rem"},small:{fontSize:"0.625rem",lineHeight:"0.875rem"},body1Link:{fontSize:"1rem",lineHeight:"1.5rem"},body2Link:{fontSize:"0.875rem",lineHeight:"1.125rem"},captionLink:{fontSize:"0.75rem",lineHeight:"1rem"},callout:{fontSize:"1rem",lineHeight:"1.5rem"}},fontWeight:{regular:"400",medium:"500",semiBold:"600",bold:"700"},opacity:{0:"0",none:"1",dim1:"0.72",dim2:"0.56",dim3:"0.40",dim4:"0.16",dim5:"0.08"},screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px"},spacing:{auto:"auto",none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem","2xl":"2rem","3xl":"2.5rem"},zIndex:{hide:"-1",base:"0",raised:"1",dropdown:"1000",sticky:"1100",overlay:"1300",modal:"1400",popover:"1500",skipLink:"1600",toast:"1700",tooltip:"1800"}};function n(o,r=e){return a(r,o)}const i=n({boxShadow:{sm:"0 1px 2px 0 rgba(0 0 0 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(0 0 0 / 0.50)",md:"0 6px 12px 0 rgba(0 0 0 / 0.50)",lg:"0 8px 16px 0 rgba(0 0 0 / 0.50)",xl:"0 12px 24px 0 rgba(0 0 0 / 0.50)",none:"none"},colors:{basic:"#C2E0FA",onBasic:"#152233",basicHovered:"#9FCEF7",basicContainer:"#094171",onBasicContainer:"#F4F9FE",basicContainerHovered:"#152233",accent:"#CFA3F5",onAccent:"#1B052E",accentHovered:"#AC7DDD",accentContainer:"#501782",onAccentContainer:"#F5EDFD",accentContainerHovered:"#360F57",accentVariant:"#B775F0",onAccentVariant:"#1B052E",accentVariantHovered:"#B775F0",main:"#F07B42",onMain:"#2F1305",mainHovered:"#EC5A13",mainContainer:"#89380F",onMainContainer:"#FFF2EB",mainContainerHovered:"#5C250A",mainVariant:"#F49D71",onMainVariant:"#2F1305",mainVariantHovered:"#F07B42",support:"#C2E0FA",onSupport:"#152233",supportHovered:"#9FCEF7",supportContainer:"#094171",onSupportContainer:"#F4F9FE",supportContainerHovered:"#152233",supportVariant:"#E6F2FD",onSupportVariant:"#152233",supportVariantHovered:"#C2E0FA",success:"#95C196",onSuccess:"#101E10",successHovered:"#71AD73",successContainer:"#2F5B30",onSuccessContainer:"#EDF5EE",successContainerHovered:"#1F3D20",alert:"#FFCC66",onAlert:"#332200",alertHovered:"#FFBB33",alertContainer:"#664400",onAlertContainer:"#FFF6E5",alertContainerHovered:"#332200",error:"#E8867D",onError:"#2B0B08",errorHovered:"#E05D52",errorContainer:"#822017",onErrorContainer:"#FBECEB",errorContainerHovered:"#57150F",info:"#9FCEF7",onInfo:"#152233",infoHovered:"#69B2F3",infoContainer:"#0C5291",onInfoContainer:"#F4F9FE",infoContainerHovered:"#094171",neutral:"#ACB8C7",onNeutral:"#202730",neutralHovered:"#6C819D",neutralContainer:"#3A4757",onNeutralContainer:"#F6F8F9",neutralContainerHovered:"#2B3441",background:"#202730",onBackground:"#F6F8F9",backgroundVariant:"#13171D",onBackgroundVariant:"#F6F8F9",surface:"#202730",onSurface:"#F6F8F9",surfaceHovered:"#000000",surfaceInverse:"#F6F8F9",onSurfaceInverse:"#2B3441",surfaceInverseHovered:"#F0F2F5",outline:"#4F6076",outlineHigh:"#F0F2F5",overlay:"#2B3441B8",onOverlay:"#F6F8F9"}});exports.createTheme=n,exports.defaultTheme=e,exports.defaultThemeDark=i;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("deepmerge"),F={borderRadius:{none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem",full:"9999px"},borderWidth:{none:"0px",sm:"1px",md:"2px"},boxShadow:{sm:"0 1px 2px 0 rgba(108 129 157 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(108 129 157 / 0.50)",md:"0 6px 12px 0 rgba(108 129 157 / 0.50)",lg:"0 8px 16px 0 rgba(108 129 157 / 0.50)",xl:"0 12px 24px 0 rgba(108 129 157 / 0.50)",none:"none"},colors:{basic:"#094171",onBasic:"#FFFFFF",basicHovered:"#0C5291",basicContainer:"#E6F2FD",onBasicContainer:"#152233",basicContainerHovered:"#F4F9FE",accent:"#8526D9",onAccent:"#FFFFFF",accentHovered:"#9F47EB",accentContainer:"#E9D6FA",onAccentContainer:"#362555",accentContainerHovered:"#F5EDFD",accentVariant:"#501782",onAccentVariant:"#FFFFFF",accentVariantHovered:"#6B1FAD",main:"#EC5A13",onMain:"#FFFFFF",mainHovered:"#F07B42",mainContainer:"#FFE9DE",onMainContainer:"#89380F",mainContainerHovered:"#FFF2EB",mainVariant:"#B84A14",onMainVariant:"#FFFFFF",mainVariantHovered:"#EC5A13",support:"#094171",onSupport:"#FFFFFF",supportHovered:"#0C5291",supportContainer:"#E6F2FD",onSupportContainer:"#152233",supportContainerHovered:"#F4F9FE",supportVariant:"#0C5291",onSupportVariant:"#FFFFFF",supportVariantHovered:"#0F69B9",success:"#3E7A40",onSuccess:"#FFFFFF",successHovered:"#4E9850",successContainer:"#DCEADC",onSuccessContainer:"#2F5B30",successContainerHovered:"#EDF5EE",alert:"#FFAA00",onAlert:"#202730",alertHovered:"#FFBB33",alertContainer:"#FFEECC",onAlertContainer:"#996600",alertContainerHovered:"#FFF6E5",error:"#D93426",onError:"#FFFFFF",errorHovered:"#E05D52",errorContainer:"#F7D7D4",onErrorContainer:"#822017",errorContainerHovered:"#FBECEB",info:"#1388EC",onInfo:"#FFFFFF",infoHovered:"#69B2F3",infoContainer:"#C2E0FA",onInfoContainer:"#0C5291",infoContainerHovered:"#E6F2FD",neutral:"#4F6076",onNeutral:"#FFFFFF",neutralHovered:"#6C819D",neutralContainer:"#F0F2F5",onNeutralContainer:"#3A4757",neutralContainerHovered:"#F6F8F9",background:"#FFFFFF",onBackground:"#152233",backgroundVariant:"#F4F9FE",onBackgroundVariant:"#152233",surface:"#FFFFFF",onSurface:"#152233",surfaceHovered:"#F6F8F9",surfaceInverse:"#2B3441",onSurfaceInverse:"#FFFFFF",surfaceInverseHovered:"#3A4757",outline:"#ACB8C7",outlineHigh:"#202730",overlay:"#202730B8",onOverlay:"#FFFFFF"},fontFamily:{sans:'"Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',mono:'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'},fontSize:{display1:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display1Expanded:{fontSize:"3rem",lineHeight:"4rem",fontWeight:"700"},display2:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},display2Expanded:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display3:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},display3Expanded:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},headline1:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},headline1Expanded:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},headline2:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},headline2Expanded:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},subhead:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},subheadExpanded:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},body1:{fontSize:"1rem",lineHeight:"1.5rem"},body2:{fontSize:"0.875rem",lineHeight:"1.25rem"},caption:{fontSize:"0.75rem",lineHeight:"1rem"},small:{fontSize:"0.625rem",lineHeight:"0.875rem"},body1Link:{fontSize:"1rem",lineHeight:"1.5rem"},body2Link:{fontSize:"0.875rem",lineHeight:"1.125rem"},captionLink:{fontSize:"0.75rem",lineHeight:"1rem"},callout:{fontSize:"1rem",lineHeight:"1.5rem"}},fontWeight:{regular:"400",medium:"500",semiBold:"600",bold:"700"},opacity:{0:"0",none:"1",dim1:"0.72",dim2:"0.56",dim3:"0.40",dim4:"0.16",dim5:"0.08"},screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px"},spacing:{auto:"auto",none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem","2xl":"2rem","3xl":"2.5rem"},zIndex:{hide:"-1",base:"0",raised:"1",dropdown:"1000",sticky:"1100",overlay:"1300",modal:"1400",popover:"1500",skipLink:"1600",toast:"1700",tooltip:"1800"}};function l(r,e=F){return p(e,r)}const v=l({boxShadow:{sm:"0 1px 2px 0 rgba(0 0 0 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(0 0 0 / 0.50)",md:"0 6px 12px 0 rgba(0 0 0 / 0.50)",lg:"0 8px 16px 0 rgba(0 0 0 / 0.50)",xl:"0 12px 24px 0 rgba(0 0 0 / 0.50)",none:"none"},colors:{basic:"#C2E0FA",onBasic:"#152233",basicHovered:"#9FCEF7",basicContainer:"#094171",onBasicContainer:"#F4F9FE",basicContainerHovered:"#152233",accent:"#CFA3F5",onAccent:"#1B052E",accentHovered:"#AC7DDD",accentContainer:"#501782",onAccentContainer:"#F5EDFD",accentContainerHovered:"#360F57",accentVariant:"#B775F0",onAccentVariant:"#1B052E",accentVariantHovered:"#B775F0",main:"#F07B42",onMain:"#2F1305",mainHovered:"#EC5A13",mainContainer:"#89380F",onMainContainer:"#FFF2EB",mainContainerHovered:"#5C250A",mainVariant:"#F49D71",onMainVariant:"#2F1305",mainVariantHovered:"#F07B42",support:"#C2E0FA",onSupport:"#152233",supportHovered:"#9FCEF7",supportContainer:"#094171",onSupportContainer:"#F4F9FE",supportContainerHovered:"#152233",supportVariant:"#E6F2FD",onSupportVariant:"#152233",supportVariantHovered:"#C2E0FA",success:"#95C196",onSuccess:"#101E10",successHovered:"#71AD73",successContainer:"#2F5B30",onSuccessContainer:"#EDF5EE",successContainerHovered:"#1F3D20",alert:"#FFCC66",onAlert:"#332200",alertHovered:"#FFBB33",alertContainer:"#664400",onAlertContainer:"#FFF6E5",alertContainerHovered:"#332200",error:"#E8867D",onError:"#2B0B08",errorHovered:"#E05D52",errorContainer:"#822017",onErrorContainer:"#FBECEB",errorContainerHovered:"#57150F",info:"#9FCEF7",onInfo:"#152233",infoHovered:"#69B2F3",infoContainer:"#0C5291",onInfoContainer:"#F4F9FE",infoContainerHovered:"#094171",neutral:"#ACB8C7",onNeutral:"#202730",neutralHovered:"#6C819D",neutralContainer:"#3A4757",onNeutralContainer:"#F6F8F9",neutralContainerHovered:"#2B3441",background:"#202730",onBackground:"#F6F8F9",backgroundVariant:"#13171D",onBackgroundVariant:"#F6F8F9",surface:"#202730",onSurface:"#F6F8F9",surfaceHovered:"#000000",surfaceInverse:"#F6F8F9",onSurfaceInverse:"#2B3441",surfaceInverseHovered:"#F0F2F5",outline:"#4F6076",outlineHigh:"#F0F2F5",overlay:"#2B3441B8",onOverlay:"#F6F8F9"}});function c(r){const e=[parseInt(r.slice(1,3),16)/255,parseInt(r.slice(3,5),16)/255,parseInt(r.slice(5,7),16)/255].map(o=>o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4));return .2126*e[0]+.7152*e[1]+.0722*e[2]}function C(r,e){const o=e>=24;return r>=7?"AAA":r>=4.5&&!o||r>=3&&o?"AA":"Failed"}function t(r,e,o){const a=function(u,d){const i=c(u),s=c(d);return(Math.max(i,s)+.05)/(Math.min(i,s)+.05)}(r,e);return{contrastRatio:a.toFixed(2),score:C(a,o),textSize:o>=24?"Large":"Small",colors:[r,e]}}const n=(r,e)=>({small:t(r,e,16),large:t(r,e,16)});exports.checkColorContrast=t,exports.createTheme=l,exports.defaultTheme=F,exports.defaultThemeDark=v,exports.getThemeContrastReport=r=>{const{colors:e}=r;return{main:{previewStyles:"bg-main text-on-main",...n(e.main,e.onMain)},mainHovered:{previewStyles:"bg-main-hovered text-on-main",...n(e.mainHovered,e.onMain)},mainContainer:{previewStyles:"bg-main-container text-on-main-container",...n(e.mainContainer,e.onMainContainer)},mainContainerHovered:{previewStyles:"bg-main-container-hovered text-on-main-container",...n(e.mainContainerHovered,e.onMainContainer)},support:{previewStyles:"bg-support text-on-support",...n(e.support,e.onSupport)},supportHovered:{previewStyles:"bg-support-hovered text-on-support",...n(e.supportHovered,e.onSupport)},supportContainer:{previewStyles:"bg-support-container text-on-support-container",...n(e.supportContainer,e.onSupportContainer)},supportContainerHovered:{previewStyles:"bg-support-container-hovered text-on-support-container",...n(e.supportContainerHovered,e.onSupportContainer)},accent:{previewStyles:"bg-accent text-on-accent",...n(e.accent,e.onAccent)},accentHovered:{previewStyles:"bg-accent-hovered text-on-accent",...n(e.accentHovered,e.onAccent)},accentContainer:{previewStyles:"bg-accent-container text-on-accent-container",...n(e.accentContainer,e.onAccentContainer)},accentContainerHovered:{previewStyles:"bg-accent-container-hovered text-on-accent-container",...n(e.accentContainerHovered,e.onAccentContainer)},basic:{previewStyles:"bg-basic text-on-basic",...n(e.basic,e.onBasic)},basicHovered:{previewStyles:"bg-basic-hovered text-on-basic",...n(e.basicHovered,e.onBasic)},basicContainer:{previewStyles:"bg-basic-container text-on-basic-container",...n(e.basicContainer,e.onBasicContainer)},basicContainerHovered:{previewStyles:"bg-basic-container-hovered text-on-basic-container",...n(e.basicContainerHovered,e.onBasicContainer)},success:{previewStyles:"bg-success text-on-success",...n(e.success,e.onSuccess)},successHovered:{previewStyles:"bg-success-hovered text-on-success",...n(e.successHovered,e.onSuccess)},successContainer:{previewStyles:"bg-success-container text-on-success-container",...n(e.successContainer,e.onSuccessContainer)},successContainerHovered:{previewStyles:"bg-success-container-hovered text-on-success-container",...n(e.successContainerHovered,e.onSuccessContainer)},error:{previewStyles:"bg-error text-on-error",...n(e.error,e.onError)},errorHovered:{previewStyles:"bg-error-hovered text-on-error",...n(e.errorHovered,e.onError)},errorContainer:{previewStyles:"bg-error-container text-on-error-container",...n(e.errorContainer,e.onErrorContainer)},errorContainerHovered:{previewStyles:"bg-error-container-hovered text-on-error-container",...n(e.errorContainerHovered,e.onErrorContainer)},alert:{previewStyles:"bg-alert text-on-alert",...n(e.alert,e.onAlert)},alertHovered:{previewStyles:"bg-alert-hovered text-on-alert",...n(e.alertHovered,e.onAlert)},alertContainer:{previewStyles:"bg-alert-container text-on-alert-container",...n(e.alertContainer,e.onAlertContainer)},alertContainerHovered:{previewStyles:"bg-alert-container-hovered text-on-alert-container",...n(e.alertContainerHovered,e.onAlertContainer)},info:{previewStyles:"bg-info text-on-info",...n(e.info,e.onInfo)},infoHovered:{previewStyles:"bg-info-hovered text-on-info",...n(e.infoHovered,e.onInfo)},infoContainer:{previewStyles:"bg-info-container text-on-info-container",...n(e.infoContainer,e.onInfoContainer)},infoContainerHovered:{previewStyles:"bg-info-container-hovered text-on-info-container",...n(e.infoContainerHovered,e.onInfoContainer)},neutral:{previewStyles:"bg-neutral text-on-neutral",...n(e.neutral,e.onNeutral)},neutralHovered:{previewStyles:"bg-neutral-hovered text-on-neutral",...n(e.neutralHovered,e.onNeutral)},neutralContainer:{previewStyles:"bg-neutral-container text-on-neutral-container",...n(e.neutralContainer,e.onNeutralContainer)},neutralContainerHovered:{previewStyles:"bg-neutral-container-hovered text-on-neutral-container",...n(e.neutralContainerHovered,e.onNeutralContainer)},background:{previewStyles:"bg-background text-on-background",...n(e.background,e.onBackground)},backgroundVariant:{previewStyles:"bg-background-variant text-on-background-variant",...n(e.backgroundVariant,e.onBackgroundVariant)},surface:{previewStyles:"bg-surface text-on-surface",...n(e.surface,e.onSurface)},surfaceHovered:{previewStyles:"bg-surface-hovered text-on-surface",...n(e.surfaceHovered,e.onSurface)},surfaceInverse:{previewStyles:"bg-surface-inverse text-on-surface-inverse",...n(e.surfaceInverse,e.onSurfaceInverse)},surfaceInverseHovered:{previewStyles:"bg-surface-inverse-hovered text-on-surface-inverse",...n(e.surfaceInverseHovered,e.onSurfaceInverse)}}};
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
function
|
|
4
|
-
return
|
|
1
|
+
import u from "deepmerge";
|
|
2
|
+
const d = { borderRadius: { none: "0px", sm: "0.25rem", md: "0.5rem", lg: "1rem", xl: "1.5rem", full: "9999px" }, borderWidth: { none: "0px", sm: "1px", md: "2px" }, boxShadow: { sm: "0 1px 2px 0 rgba(108 129 157 / 0.50)", DEFAULT: "0 4px 8px 0 rgba(108 129 157 / 0.50)", md: "0 6px 12px 0 rgba(108 129 157 / 0.50)", lg: "0 8px 16px 0 rgba(108 129 157 / 0.50)", xl: "0 12px 24px 0 rgba(108 129 157 / 0.50)", none: "none" }, colors: { basic: "#094171", onBasic: "#FFFFFF", basicHovered: "#0C5291", basicContainer: "#E6F2FD", onBasicContainer: "#152233", basicContainerHovered: "#F4F9FE", accent: "#8526D9", onAccent: "#FFFFFF", accentHovered: "#9F47EB", accentContainer: "#E9D6FA", onAccentContainer: "#362555", accentContainerHovered: "#F5EDFD", accentVariant: "#501782", onAccentVariant: "#FFFFFF", accentVariantHovered: "#6B1FAD", main: "#EC5A13", onMain: "#FFFFFF", mainHovered: "#F07B42", mainContainer: "#FFE9DE", onMainContainer: "#89380F", mainContainerHovered: "#FFF2EB", mainVariant: "#B84A14", onMainVariant: "#FFFFFF", mainVariantHovered: "#EC5A13", support: "#094171", onSupport: "#FFFFFF", supportHovered: "#0C5291", supportContainer: "#E6F2FD", onSupportContainer: "#152233", supportContainerHovered: "#F4F9FE", supportVariant: "#0C5291", onSupportVariant: "#FFFFFF", supportVariantHovered: "#0F69B9", success: "#3E7A40", onSuccess: "#FFFFFF", successHovered: "#4E9850", successContainer: "#DCEADC", onSuccessContainer: "#2F5B30", successContainerHovered: "#EDF5EE", alert: "#FFAA00", onAlert: "#202730", alertHovered: "#FFBB33", alertContainer: "#FFEECC", onAlertContainer: "#996600", alertContainerHovered: "#FFF6E5", error: "#D93426", onError: "#FFFFFF", errorHovered: "#E05D52", errorContainer: "#F7D7D4", onErrorContainer: "#822017", errorContainerHovered: "#FBECEB", info: "#1388EC", onInfo: "#FFFFFF", infoHovered: "#69B2F3", infoContainer: "#C2E0FA", onInfoContainer: "#0C5291", infoContainerHovered: "#E6F2FD", neutral: "#4F6076", onNeutral: "#FFFFFF", neutralHovered: "#6C819D", neutralContainer: "#F0F2F5", onNeutralContainer: "#3A4757", neutralContainerHovered: "#F6F8F9", background: "#FFFFFF", onBackground: "#152233", backgroundVariant: "#F4F9FE", onBackgroundVariant: "#152233", surface: "#FFFFFF", onSurface: "#152233", surfaceHovered: "#F6F8F9", surfaceInverse: "#2B3441", onSurfaceInverse: "#FFFFFF", surfaceInverseHovered: "#3A4757", outline: "#ACB8C7", outlineHigh: "#202730", overlay: "#202730B8", onOverlay: "#FFFFFF" }, fontFamily: { sans: '"Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' }, fontSize: { display1: { fontSize: "2.5rem", lineHeight: "3.5rem", fontWeight: "700" }, display1Expanded: { fontSize: "3rem", lineHeight: "4rem", fontWeight: "700" }, display2: { fontSize: "2rem", lineHeight: "2.75rem", fontWeight: "700" }, display2Expanded: { fontSize: "2.5rem", lineHeight: "3.5rem", fontWeight: "700" }, display3: { fontSize: "1.5rem", lineHeight: "2rem", fontWeight: "700" }, display3Expanded: { fontSize: "2rem", lineHeight: "2.75rem", fontWeight: "700" }, headline1: { fontSize: "1.25rem", lineHeight: "1.75rem", fontWeight: "700" }, headline1Expanded: { fontSize: "1.5rem", lineHeight: "2rem", fontWeight: "700" }, headline2: { fontSize: "1.125rem", lineHeight: "1.5rem", fontWeight: "700" }, headline2Expanded: { fontSize: "1.25rem", lineHeight: "1.75rem", fontWeight: "700" }, subhead: { fontSize: "1rem", lineHeight: "1.5rem", fontWeight: "700" }, subheadExpanded: { fontSize: "1rem", lineHeight: "1.5rem", fontWeight: "700" }, body1: { fontSize: "1rem", lineHeight: "1.5rem" }, body2: { fontSize: "0.875rem", lineHeight: "1.25rem" }, caption: { fontSize: "0.75rem", lineHeight: "1rem" }, small: { fontSize: "0.625rem", lineHeight: "0.875rem" }, body1Link: { fontSize: "1rem", lineHeight: "1.5rem" }, body2Link: { fontSize: "0.875rem", lineHeight: "1.125rem" }, captionLink: { fontSize: "0.75rem", lineHeight: "1rem" }, callout: { fontSize: "1rem", lineHeight: "1.5rem" } }, fontWeight: { regular: "400", medium: "500", semiBold: "600", bold: "700" }, opacity: { 0: "0", none: "1", dim1: "0.72", dim2: "0.56", dim3: "0.40", dim4: "0.16", dim5: "0.08" }, screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px" }, spacing: { auto: "auto", none: "0px", sm: "0.25rem", md: "0.5rem", lg: "1rem", xl: "1.5rem", "2xl": "2rem", "3xl": "2.5rem" }, zIndex: { hide: "-1", base: "0", raised: "1", dropdown: "1000", sticky: "1100", overlay: "1300", modal: "1400", popover: "1500", skipLink: "1600", toast: "1700", tooltip: "1800" } };
|
|
3
|
+
function p(r, e = d) {
|
|
4
|
+
return u(e, r);
|
|
5
5
|
}
|
|
6
|
-
const
|
|
6
|
+
const m = p({ boxShadow: { sm: "0 1px 2px 0 rgba(0 0 0 / 0.50)", DEFAULT: "0 4px 8px 0 rgba(0 0 0 / 0.50)", md: "0 6px 12px 0 rgba(0 0 0 / 0.50)", lg: "0 8px 16px 0 rgba(0 0 0 / 0.50)", xl: "0 12px 24px 0 rgba(0 0 0 / 0.50)", none: "none" }, colors: { basic: "#C2E0FA", onBasic: "#152233", basicHovered: "#9FCEF7", basicContainer: "#094171", onBasicContainer: "#F4F9FE", basicContainerHovered: "#152233", accent: "#CFA3F5", onAccent: "#1B052E", accentHovered: "#AC7DDD", accentContainer: "#501782", onAccentContainer: "#F5EDFD", accentContainerHovered: "#360F57", accentVariant: "#B775F0", onAccentVariant: "#1B052E", accentVariantHovered: "#B775F0", main: "#F07B42", onMain: "#2F1305", mainHovered: "#EC5A13", mainContainer: "#89380F", onMainContainer: "#FFF2EB", mainContainerHovered: "#5C250A", mainVariant: "#F49D71", onMainVariant: "#2F1305", mainVariantHovered: "#F07B42", support: "#C2E0FA", onSupport: "#152233", supportHovered: "#9FCEF7", supportContainer: "#094171", onSupportContainer: "#F4F9FE", supportContainerHovered: "#152233", supportVariant: "#E6F2FD", onSupportVariant: "#152233", supportVariantHovered: "#C2E0FA", success: "#95C196", onSuccess: "#101E10", successHovered: "#71AD73", successContainer: "#2F5B30", onSuccessContainer: "#EDF5EE", successContainerHovered: "#1F3D20", alert: "#FFCC66", onAlert: "#332200", alertHovered: "#FFBB33", alertContainer: "#664400", onAlertContainer: "#FFF6E5", alertContainerHovered: "#332200", error: "#E8867D", onError: "#2B0B08", errorHovered: "#E05D52", errorContainer: "#822017", onErrorContainer: "#FBECEB", errorContainerHovered: "#57150F", info: "#9FCEF7", onInfo: "#152233", infoHovered: "#69B2F3", infoContainer: "#0C5291", onInfoContainer: "#F4F9FE", infoContainerHovered: "#094171", neutral: "#ACB8C7", onNeutral: "#202730", neutralHovered: "#6C819D", neutralContainer: "#3A4757", onNeutralContainer: "#F6F8F9", neutralContainerHovered: "#2B3441", background: "#202730", onBackground: "#F6F8F9", backgroundVariant: "#13171D", onBackgroundVariant: "#F6F8F9", surface: "#202730", onSurface: "#F6F8F9", surfaceHovered: "#000000", surfaceInverse: "#F6F8F9", onSurfaceInverse: "#2B3441", surfaceInverseHovered: "#F0F2F5", outline: "#4F6076", outlineHigh: "#F0F2F5", overlay: "#2B3441B8", onOverlay: "#F6F8F9" } });
|
|
7
|
+
function s(r) {
|
|
8
|
+
const e = [parseInt(r.slice(1, 3), 16) / 255, parseInt(r.slice(3, 5), 16) / 255, parseInt(r.slice(5, 7), 16) / 255].map((o) => o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4));
|
|
9
|
+
return 0.2126 * e[0] + 0.7152 * e[1] + 0.0722 * e[2];
|
|
10
|
+
}
|
|
11
|
+
function v(r, e) {
|
|
12
|
+
const o = e >= 24;
|
|
13
|
+
return r >= 7 ? "AAA" : r >= 4.5 && !o || r >= 3 && o ? "AA" : "Failed";
|
|
14
|
+
}
|
|
15
|
+
function c(r, e, o) {
|
|
16
|
+
const t = function(F, l) {
|
|
17
|
+
const a = s(F), i = s(l);
|
|
18
|
+
return (Math.max(a, i) + 0.05) / (Math.min(a, i) + 0.05);
|
|
19
|
+
}(r, e);
|
|
20
|
+
return { contrastRatio: t.toFixed(2), score: v(t, o), textSize: o >= 24 ? "Large" : "Small", colors: [r, e] };
|
|
21
|
+
}
|
|
22
|
+
const n = (r, e) => ({ small: c(r, e, 16), large: c(r, e, 16) }), g = (r) => {
|
|
23
|
+
const { colors: e } = r;
|
|
24
|
+
return { main: { previewStyles: "bg-main text-on-main", ...n(e.main, e.onMain) }, mainHovered: { previewStyles: "bg-main-hovered text-on-main", ...n(e.mainHovered, e.onMain) }, mainContainer: { previewStyles: "bg-main-container text-on-main-container", ...n(e.mainContainer, e.onMainContainer) }, mainContainerHovered: { previewStyles: "bg-main-container-hovered text-on-main-container", ...n(e.mainContainerHovered, e.onMainContainer) }, support: { previewStyles: "bg-support text-on-support", ...n(e.support, e.onSupport) }, supportHovered: { previewStyles: "bg-support-hovered text-on-support", ...n(e.supportHovered, e.onSupport) }, supportContainer: { previewStyles: "bg-support-container text-on-support-container", ...n(e.supportContainer, e.onSupportContainer) }, supportContainerHovered: { previewStyles: "bg-support-container-hovered text-on-support-container", ...n(e.supportContainerHovered, e.onSupportContainer) }, accent: { previewStyles: "bg-accent text-on-accent", ...n(e.accent, e.onAccent) }, accentHovered: { previewStyles: "bg-accent-hovered text-on-accent", ...n(e.accentHovered, e.onAccent) }, accentContainer: { previewStyles: "bg-accent-container text-on-accent-container", ...n(e.accentContainer, e.onAccentContainer) }, accentContainerHovered: { previewStyles: "bg-accent-container-hovered text-on-accent-container", ...n(e.accentContainerHovered, e.onAccentContainer) }, basic: { previewStyles: "bg-basic text-on-basic", ...n(e.basic, e.onBasic) }, basicHovered: { previewStyles: "bg-basic-hovered text-on-basic", ...n(e.basicHovered, e.onBasic) }, basicContainer: { previewStyles: "bg-basic-container text-on-basic-container", ...n(e.basicContainer, e.onBasicContainer) }, basicContainerHovered: { previewStyles: "bg-basic-container-hovered text-on-basic-container", ...n(e.basicContainerHovered, e.onBasicContainer) }, success: { previewStyles: "bg-success text-on-success", ...n(e.success, e.onSuccess) }, successHovered: { previewStyles: "bg-success-hovered text-on-success", ...n(e.successHovered, e.onSuccess) }, successContainer: { previewStyles: "bg-success-container text-on-success-container", ...n(e.successContainer, e.onSuccessContainer) }, successContainerHovered: { previewStyles: "bg-success-container-hovered text-on-success-container", ...n(e.successContainerHovered, e.onSuccessContainer) }, error: { previewStyles: "bg-error text-on-error", ...n(e.error, e.onError) }, errorHovered: { previewStyles: "bg-error-hovered text-on-error", ...n(e.errorHovered, e.onError) }, errorContainer: { previewStyles: "bg-error-container text-on-error-container", ...n(e.errorContainer, e.onErrorContainer) }, errorContainerHovered: { previewStyles: "bg-error-container-hovered text-on-error-container", ...n(e.errorContainerHovered, e.onErrorContainer) }, alert: { previewStyles: "bg-alert text-on-alert", ...n(e.alert, e.onAlert) }, alertHovered: { previewStyles: "bg-alert-hovered text-on-alert", ...n(e.alertHovered, e.onAlert) }, alertContainer: { previewStyles: "bg-alert-container text-on-alert-container", ...n(e.alertContainer, e.onAlertContainer) }, alertContainerHovered: { previewStyles: "bg-alert-container-hovered text-on-alert-container", ...n(e.alertContainerHovered, e.onAlertContainer) }, info: { previewStyles: "bg-info text-on-info", ...n(e.info, e.onInfo) }, infoHovered: { previewStyles: "bg-info-hovered text-on-info", ...n(e.infoHovered, e.onInfo) }, infoContainer: { previewStyles: "bg-info-container text-on-info-container", ...n(e.infoContainer, e.onInfoContainer) }, infoContainerHovered: { previewStyles: "bg-info-container-hovered text-on-info-container", ...n(e.infoContainerHovered, e.onInfoContainer) }, neutral: { previewStyles: "bg-neutral text-on-neutral", ...n(e.neutral, e.onNeutral) }, neutralHovered: { previewStyles: "bg-neutral-hovered text-on-neutral", ...n(e.neutralHovered, e.onNeutral) }, neutralContainer: { previewStyles: "bg-neutral-container text-on-neutral-container", ...n(e.neutralContainer, e.onNeutralContainer) }, neutralContainerHovered: { previewStyles: "bg-neutral-container-hovered text-on-neutral-container", ...n(e.neutralContainerHovered, e.onNeutralContainer) }, background: { previewStyles: "bg-background text-on-background", ...n(e.background, e.onBackground) }, backgroundVariant: { previewStyles: "bg-background-variant text-on-background-variant", ...n(e.backgroundVariant, e.onBackgroundVariant) }, surface: { previewStyles: "bg-surface text-on-surface", ...n(e.surface, e.onSurface) }, surfaceHovered: { previewStyles: "bg-surface-hovered text-on-surface", ...n(e.surfaceHovered, e.onSurface) }, surfaceInverse: { previewStyles: "bg-surface-inverse text-on-surface-inverse", ...n(e.surfaceInverse, e.onSurfaceInverse) }, surfaceInverseHovered: { previewStyles: "bg-surface-inverse-hovered text-on-surface-inverse", ...n(e.surfaceInverseHovered, e.onSurfaceInverse) } };
|
|
25
|
+
};
|
|
7
26
|
export {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
27
|
+
c as checkColorContrast,
|
|
28
|
+
p as createTheme,
|
|
29
|
+
d as defaultTheme,
|
|
30
|
+
m as defaultThemeDark,
|
|
31
|
+
g as getThemeContrastReport
|
|
11
32
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/theme-utils",
|
|
3
|
-
"version": "6.2.
|
|
3
|
+
"version": "6.2.7",
|
|
4
4
|
"description": "package for managing Spark theme configuration",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
},
|
|
36
36
|
"homepage": "https://sparkui.vercel.app",
|
|
37
37
|
"license": "MIT",
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "fa06a4de48e2849c0d2c81073942f1e5d6eef171"
|
|
39
39
|
}
|