@phcdevworks/spectre-tokens 2.0.0 → 2.1.1
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 +12 -13
- package/README.md +133 -1440
- package/dist/index.cjs +386 -136
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +179 -169
- package/dist/index.d.cts +250 -14
- package/dist/index.d.ts +250 -14
- package/dist/index.js +386 -136
- package/dist/index.js.map +1 -1
- package/package.json +15 -11
- package/tokens/components.json +444 -105
- package/tokens/modes.json +558 -108
- package/tokens/palette.json +55 -55
- package/tokens/primitives.json +6 -0
- package/tokens/semantic-roles.json +2 -1
package/dist/index.js
CHANGED
|
@@ -33,7 +33,10 @@ var coreTokens = {
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"neutralBgHover": {
|
|
36
|
-
"value": "{colors.neutral.200}"
|
|
36
|
+
"value": "{colors.neutral.200}",
|
|
37
|
+
"metadata": {
|
|
38
|
+
"pair": "component.badge.neutralText"
|
|
39
|
+
}
|
|
37
40
|
},
|
|
38
41
|
"neutralText": {
|
|
39
42
|
"value": "{colors.neutral.700}"
|
|
@@ -45,7 +48,10 @@ var coreTokens = {
|
|
|
45
48
|
}
|
|
46
49
|
},
|
|
47
50
|
"infoBgHover": {
|
|
48
|
-
"value": "{colors.info.200}"
|
|
51
|
+
"value": "{colors.info.200}",
|
|
52
|
+
"metadata": {
|
|
53
|
+
"pair": "component.badge.infoText"
|
|
54
|
+
}
|
|
49
55
|
},
|
|
50
56
|
"infoText": {
|
|
51
57
|
"value": "{colors.info.700}"
|
|
@@ -57,10 +63,13 @@ var coreTokens = {
|
|
|
57
63
|
}
|
|
58
64
|
},
|
|
59
65
|
"successBgHover": {
|
|
60
|
-
"value": "{colors.success.200}"
|
|
66
|
+
"value": "{colors.success.200}",
|
|
67
|
+
"metadata": {
|
|
68
|
+
"pair": "component.badge.successText"
|
|
69
|
+
}
|
|
61
70
|
},
|
|
62
71
|
"successText": {
|
|
63
|
-
"value": "{colors.success.
|
|
72
|
+
"value": "{colors.success.800}"
|
|
64
73
|
},
|
|
65
74
|
"warningBg": {
|
|
66
75
|
"value": "{colors.warning.100}",
|
|
@@ -69,10 +78,13 @@ var coreTokens = {
|
|
|
69
78
|
}
|
|
70
79
|
},
|
|
71
80
|
"warningBgHover": {
|
|
72
|
-
"value": "{colors.warning.200}"
|
|
81
|
+
"value": "{colors.warning.200}",
|
|
82
|
+
"metadata": {
|
|
83
|
+
"pair": "component.badge.warningText"
|
|
84
|
+
}
|
|
73
85
|
},
|
|
74
86
|
"warningText": {
|
|
75
|
-
"value": "{colors.warning.
|
|
87
|
+
"value": "{colors.warning.800}"
|
|
76
88
|
},
|
|
77
89
|
"dangerBg": {
|
|
78
90
|
"value": "{colors.error.100}",
|
|
@@ -81,10 +93,13 @@ var coreTokens = {
|
|
|
81
93
|
}
|
|
82
94
|
},
|
|
83
95
|
"dangerBgHover": {
|
|
84
|
-
"value": "{colors.error.200}"
|
|
96
|
+
"value": "{colors.error.200}",
|
|
97
|
+
"metadata": {
|
|
98
|
+
"pair": "component.badge.dangerText"
|
|
99
|
+
}
|
|
85
100
|
},
|
|
86
101
|
"dangerText": {
|
|
87
|
-
"value": "{colors.error.
|
|
102
|
+
"value": "{colors.error.800}"
|
|
88
103
|
}
|
|
89
104
|
},
|
|
90
105
|
"iconBox": {
|
|
@@ -186,10 +201,16 @@ var coreTokens = {
|
|
|
186
201
|
}
|
|
187
202
|
},
|
|
188
203
|
"bgHover": {
|
|
189
|
-
"value": "{colors.info.700}"
|
|
204
|
+
"value": "{colors.info.700}",
|
|
205
|
+
"metadata": {
|
|
206
|
+
"pair": "buttons.primary.text"
|
|
207
|
+
}
|
|
190
208
|
},
|
|
191
209
|
"bgActive": {
|
|
192
|
-
"value": "{colors.info.800}"
|
|
210
|
+
"value": "{colors.info.800}",
|
|
211
|
+
"metadata": {
|
|
212
|
+
"pair": "buttons.primary.text"
|
|
213
|
+
}
|
|
193
214
|
},
|
|
194
215
|
"bgDisabled": {
|
|
195
216
|
"value": "{colors.neutral.200}"
|
|
@@ -199,6 +220,9 @@ var coreTokens = {
|
|
|
199
220
|
},
|
|
200
221
|
"textDisabled": {
|
|
201
222
|
"value": "{colors.neutral.400}"
|
|
223
|
+
},
|
|
224
|
+
"focusRing": {
|
|
225
|
+
"value": "{colors.info.500} / 0.4"
|
|
202
226
|
}
|
|
203
227
|
},
|
|
204
228
|
"secondary": {
|
|
@@ -209,25 +233,34 @@ var coreTokens = {
|
|
|
209
233
|
}
|
|
210
234
|
},
|
|
211
235
|
"bgHover": {
|
|
212
|
-
"value": "{colors.neutral.50}"
|
|
236
|
+
"value": "{colors.neutral.50}",
|
|
237
|
+
"metadata": {
|
|
238
|
+
"pair": "buttons.secondary.text"
|
|
239
|
+
}
|
|
213
240
|
},
|
|
214
241
|
"bgActive": {
|
|
215
|
-
"value": "{colors.neutral.100}"
|
|
242
|
+
"value": "{colors.neutral.100}",
|
|
243
|
+
"metadata": {
|
|
244
|
+
"pair": "buttons.secondary.text"
|
|
245
|
+
}
|
|
216
246
|
},
|
|
217
247
|
"bgDisabled": {
|
|
218
248
|
"value": "{colors.neutral.50}"
|
|
219
249
|
},
|
|
220
250
|
"text": {
|
|
221
|
-
"value": "{colors.info.
|
|
251
|
+
"value": "{colors.info.700}"
|
|
222
252
|
},
|
|
223
253
|
"textDisabled": {
|
|
224
254
|
"value": "{colors.neutral.400}"
|
|
225
255
|
},
|
|
226
256
|
"border": {
|
|
227
|
-
"value": "{colors.info.
|
|
257
|
+
"value": "{colors.info.700}"
|
|
228
258
|
},
|
|
229
259
|
"borderDisabled": {
|
|
230
260
|
"value": "{colors.neutral.200}"
|
|
261
|
+
},
|
|
262
|
+
"focusRing": {
|
|
263
|
+
"value": "{colors.info.500} / 0.4"
|
|
231
264
|
}
|
|
232
265
|
},
|
|
233
266
|
"ghost": {
|
|
@@ -235,19 +268,28 @@ var coreTokens = {
|
|
|
235
268
|
"value": "transparent"
|
|
236
269
|
},
|
|
237
270
|
"bgHover": {
|
|
238
|
-
"value": "{colors.info.50}"
|
|
271
|
+
"value": "{colors.info.50}",
|
|
272
|
+
"metadata": {
|
|
273
|
+
"pair": "buttons.ghost.text"
|
|
274
|
+
}
|
|
239
275
|
},
|
|
240
276
|
"bgActive": {
|
|
241
|
-
"value": "{colors.info.100}"
|
|
277
|
+
"value": "{colors.info.100}",
|
|
278
|
+
"metadata": {
|
|
279
|
+
"pair": "buttons.ghost.text"
|
|
280
|
+
}
|
|
242
281
|
},
|
|
243
282
|
"bgDisabled": {
|
|
244
283
|
"value": "transparent"
|
|
245
284
|
},
|
|
246
285
|
"text": {
|
|
247
|
-
"value": "{colors.info.
|
|
286
|
+
"value": "{colors.info.700}"
|
|
248
287
|
},
|
|
249
288
|
"textDisabled": {
|
|
250
289
|
"value": "{colors.neutral.400}"
|
|
290
|
+
},
|
|
291
|
+
"focusRing": {
|
|
292
|
+
"value": "{colors.info.500} / 0.4"
|
|
251
293
|
}
|
|
252
294
|
},
|
|
253
295
|
"danger": {
|
|
@@ -258,10 +300,16 @@ var coreTokens = {
|
|
|
258
300
|
}
|
|
259
301
|
},
|
|
260
302
|
"bgHover": {
|
|
261
|
-
"value": "{colors.error.700}"
|
|
303
|
+
"value": "{colors.error.700}",
|
|
304
|
+
"metadata": {
|
|
305
|
+
"pair": "buttons.danger.text"
|
|
306
|
+
}
|
|
262
307
|
},
|
|
263
308
|
"bgActive": {
|
|
264
|
-
"value": "{colors.error.800}"
|
|
309
|
+
"value": "{colors.error.800}",
|
|
310
|
+
"metadata": {
|
|
311
|
+
"pair": "buttons.danger.text"
|
|
312
|
+
}
|
|
265
313
|
},
|
|
266
314
|
"bgDisabled": {
|
|
267
315
|
"value": "{colors.error.200}"
|
|
@@ -271,6 +319,9 @@ var coreTokens = {
|
|
|
271
319
|
},
|
|
272
320
|
"textDisabled": {
|
|
273
321
|
"value": "{colors.neutral.400}"
|
|
322
|
+
},
|
|
323
|
+
"focusRing": {
|
|
324
|
+
"value": "{colors.error.500} / 0.4"
|
|
274
325
|
}
|
|
275
326
|
},
|
|
276
327
|
"success": {
|
|
@@ -281,10 +332,16 @@ var coreTokens = {
|
|
|
281
332
|
}
|
|
282
333
|
},
|
|
283
334
|
"bgHover": {
|
|
284
|
-
"value": "{colors.success.800}"
|
|
335
|
+
"value": "{colors.success.800}",
|
|
336
|
+
"metadata": {
|
|
337
|
+
"pair": "buttons.success.text"
|
|
338
|
+
}
|
|
285
339
|
},
|
|
286
340
|
"bgActive": {
|
|
287
|
-
"value": "{colors.success.900}"
|
|
341
|
+
"value": "{colors.success.900}",
|
|
342
|
+
"metadata": {
|
|
343
|
+
"pair": "buttons.success.text"
|
|
344
|
+
}
|
|
288
345
|
},
|
|
289
346
|
"bgDisabled": {
|
|
290
347
|
"value": "{colors.success.200}"
|
|
@@ -294,32 +351,44 @@ var coreTokens = {
|
|
|
294
351
|
},
|
|
295
352
|
"textDisabled": {
|
|
296
353
|
"value": "{colors.neutral.400}"
|
|
354
|
+
},
|
|
355
|
+
"focusRing": {
|
|
356
|
+
"value": "{colors.success.500} / 0.4"
|
|
297
357
|
}
|
|
298
358
|
},
|
|
299
359
|
"cta": {
|
|
300
360
|
"bg": {
|
|
301
|
-
"value": "{colors.
|
|
361
|
+
"value": "{colors.brand.600}",
|
|
302
362
|
"metadata": {
|
|
303
363
|
"pair": "buttons.cta.text"
|
|
304
364
|
}
|
|
305
365
|
},
|
|
306
366
|
"bgHover": {
|
|
307
|
-
"value": "{colors.
|
|
367
|
+
"value": "{colors.brand.700}",
|
|
368
|
+
"metadata": {
|
|
369
|
+
"pair": "buttons.cta.text"
|
|
370
|
+
}
|
|
308
371
|
},
|
|
309
372
|
"bgActive": {
|
|
310
|
-
"value": "{colors.
|
|
373
|
+
"value": "{colors.brand.800}",
|
|
374
|
+
"metadata": {
|
|
375
|
+
"pair": "buttons.cta.text"
|
|
376
|
+
}
|
|
311
377
|
},
|
|
312
378
|
"bgDisabled": {
|
|
313
|
-
"value": "{colors.
|
|
379
|
+
"value": "{colors.brand.200}"
|
|
314
380
|
},
|
|
315
381
|
"text": {
|
|
316
|
-
"value": "{colors.
|
|
382
|
+
"value": "{colors.white}"
|
|
317
383
|
},
|
|
318
384
|
"textDisabled": {
|
|
319
385
|
"value": "{colors.neutral.400}"
|
|
320
386
|
},
|
|
321
387
|
"shadow": {
|
|
322
|
-
"value": "0 4px 14px 0 {colors.
|
|
388
|
+
"value": "0 4px 14px 0 {colors.brand.500} / 0.39"
|
|
389
|
+
},
|
|
390
|
+
"focusRing": {
|
|
391
|
+
"value": "{colors.brand.500} / 0.4"
|
|
323
392
|
}
|
|
324
393
|
},
|
|
325
394
|
"accent": {
|
|
@@ -330,10 +399,16 @@ var coreTokens = {
|
|
|
330
399
|
}
|
|
331
400
|
},
|
|
332
401
|
"bgHover": {
|
|
333
|
-
"value": "{colors.accent.700}"
|
|
402
|
+
"value": "{colors.accent.700}",
|
|
403
|
+
"metadata": {
|
|
404
|
+
"pair": "buttons.accent.text"
|
|
405
|
+
}
|
|
334
406
|
},
|
|
335
407
|
"bgActive": {
|
|
336
|
-
"value": "{colors.accent.800}"
|
|
408
|
+
"value": "{colors.accent.800}",
|
|
409
|
+
"metadata": {
|
|
410
|
+
"pair": "buttons.accent.text"
|
|
411
|
+
}
|
|
337
412
|
},
|
|
338
413
|
"bgDisabled": {
|
|
339
414
|
"value": "{colors.accent.200}"
|
|
@@ -343,6 +418,9 @@ var coreTokens = {
|
|
|
343
418
|
},
|
|
344
419
|
"textDisabled": {
|
|
345
420
|
"value": "{colors.neutral.400}"
|
|
421
|
+
},
|
|
422
|
+
"focusRing": {
|
|
423
|
+
"value": "{colors.accent.500} / 0.4"
|
|
346
424
|
}
|
|
347
425
|
}
|
|
348
426
|
},
|
|
@@ -418,19 +496,31 @@ var coreTokens = {
|
|
|
418
496
|
"default": {
|
|
419
497
|
"surface": {
|
|
420
498
|
"page": {
|
|
421
|
-
"value": "{colors.neutral.50}"
|
|
499
|
+
"value": "{colors.neutral.50}",
|
|
500
|
+
"metadata": {
|
|
501
|
+
"pair": "modes.default.text.onPage.default"
|
|
502
|
+
}
|
|
422
503
|
},
|
|
423
504
|
"card": {
|
|
424
|
-
"value": "{colors.white}"
|
|
505
|
+
"value": "{colors.white}",
|
|
506
|
+
"metadata": {
|
|
507
|
+
"pair": "modes.default.text.onSurface.default"
|
|
508
|
+
}
|
|
425
509
|
},
|
|
426
510
|
"input": {
|
|
427
|
-
"value": "{colors.white}"
|
|
511
|
+
"value": "{colors.white}",
|
|
512
|
+
"metadata": {
|
|
513
|
+
"pair": "modes.default.text.onSurface.default"
|
|
514
|
+
}
|
|
428
515
|
},
|
|
429
516
|
"overlay": {
|
|
430
517
|
"value": "{colors.neutral.900} / 0.6"
|
|
431
518
|
},
|
|
432
519
|
"alternate": {
|
|
433
|
-
"value": "{colors.neutral.100}"
|
|
520
|
+
"value": "{colors.neutral.100}",
|
|
521
|
+
"metadata": {
|
|
522
|
+
"pair": "modes.default.text.onPage.default"
|
|
523
|
+
}
|
|
434
524
|
},
|
|
435
525
|
"hero": {
|
|
436
526
|
"value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
|
|
@@ -439,36 +529,66 @@ var coreTokens = {
|
|
|
439
529
|
"text": {
|
|
440
530
|
"onPage": {
|
|
441
531
|
"default": {
|
|
442
|
-
"value": "{colors.neutral.900}"
|
|
532
|
+
"value": "{colors.neutral.900}",
|
|
533
|
+
"metadata": {
|
|
534
|
+
"pair": "modes.default.surface.page"
|
|
535
|
+
}
|
|
443
536
|
},
|
|
444
537
|
"muted": {
|
|
445
|
-
"value": "{colors.neutral.600}"
|
|
538
|
+
"value": "{colors.neutral.600}",
|
|
539
|
+
"metadata": {
|
|
540
|
+
"pair": "modes.default.surface.page"
|
|
541
|
+
}
|
|
446
542
|
},
|
|
447
543
|
"subtle": {
|
|
448
|
-
"value": "{colors.neutral.500}"
|
|
544
|
+
"value": "{colors.neutral.500}",
|
|
545
|
+
"metadata": {
|
|
546
|
+
"pair": "modes.default.surface.page"
|
|
547
|
+
}
|
|
449
548
|
},
|
|
450
549
|
"meta": {
|
|
451
|
-
"value": "{colors.neutral.500}"
|
|
550
|
+
"value": "{colors.neutral.500}",
|
|
551
|
+
"metadata": {
|
|
552
|
+
"pair": "modes.default.surface.page"
|
|
553
|
+
}
|
|
452
554
|
},
|
|
453
555
|
"brand": {
|
|
454
|
-
"value": "{colors.brand.600}"
|
|
556
|
+
"value": "{colors.brand.600}",
|
|
557
|
+
"metadata": {
|
|
558
|
+
"pair": "modes.default.surface.page"
|
|
559
|
+
}
|
|
455
560
|
}
|
|
456
561
|
},
|
|
457
562
|
"onSurface": {
|
|
458
563
|
"default": {
|
|
459
|
-
"value": "{colors.neutral.900}"
|
|
564
|
+
"value": "{colors.neutral.900}",
|
|
565
|
+
"metadata": {
|
|
566
|
+
"pair": "modes.default.surface.card"
|
|
567
|
+
}
|
|
460
568
|
},
|
|
461
569
|
"muted": {
|
|
462
|
-
"value": "{colors.neutral.600}"
|
|
570
|
+
"value": "{colors.neutral.600}",
|
|
571
|
+
"metadata": {
|
|
572
|
+
"pair": "modes.default.surface.card"
|
|
573
|
+
}
|
|
463
574
|
},
|
|
464
575
|
"subtle": {
|
|
465
|
-
"value": "{colors.neutral.500}"
|
|
576
|
+
"value": "{colors.neutral.500}",
|
|
577
|
+
"metadata": {
|
|
578
|
+
"pair": "modes.default.surface.card"
|
|
579
|
+
}
|
|
466
580
|
},
|
|
467
581
|
"meta": {
|
|
468
|
-
"value": "{colors.neutral.500}"
|
|
582
|
+
"value": "{colors.neutral.500}",
|
|
583
|
+
"metadata": {
|
|
584
|
+
"pair": "modes.default.surface.card"
|
|
585
|
+
}
|
|
469
586
|
},
|
|
470
587
|
"brand": {
|
|
471
|
-
"value": "{colors.brand.600}"
|
|
588
|
+
"value": "{colors.brand.600}",
|
|
589
|
+
"metadata": {
|
|
590
|
+
"pair": "modes.default.surface.card"
|
|
591
|
+
}
|
|
472
592
|
}
|
|
473
593
|
}
|
|
474
594
|
},
|
|
@@ -535,7 +655,7 @@ var coreTokens = {
|
|
|
535
655
|
}
|
|
536
656
|
},
|
|
537
657
|
"warningText": {
|
|
538
|
-
"value": "{colors.warning.
|
|
658
|
+
"value": "{colors.warning.800}",
|
|
539
659
|
"metadata": {}
|
|
540
660
|
},
|
|
541
661
|
"dangerBg": {
|
|
@@ -578,7 +698,9 @@ var coreTokens = {
|
|
|
578
698
|
"testimonial": {
|
|
579
699
|
"bg": {
|
|
580
700
|
"value": "{colors.white}",
|
|
581
|
-
"metadata": {
|
|
701
|
+
"metadata": {
|
|
702
|
+
"pair": "modes.default.component.testimonial.text"
|
|
703
|
+
}
|
|
582
704
|
},
|
|
583
705
|
"border": {
|
|
584
706
|
"value": "{colors.neutral.200}",
|
|
@@ -586,15 +708,21 @@ var coreTokens = {
|
|
|
586
708
|
},
|
|
587
709
|
"text": {
|
|
588
710
|
"value": "{colors.neutral.700}",
|
|
589
|
-
"metadata": {
|
|
711
|
+
"metadata": {
|
|
712
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
713
|
+
}
|
|
590
714
|
},
|
|
591
715
|
"authorName": {
|
|
592
716
|
"value": "{colors.neutral.900}",
|
|
593
|
-
"metadata": {
|
|
717
|
+
"metadata": {
|
|
718
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
719
|
+
}
|
|
594
720
|
},
|
|
595
721
|
"authorTitle": {
|
|
596
722
|
"value": "{colors.neutral.500}",
|
|
597
|
-
"metadata": {
|
|
723
|
+
"metadata": {
|
|
724
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
725
|
+
}
|
|
598
726
|
},
|
|
599
727
|
"quoteMark": {
|
|
600
728
|
"value": "{colors.neutral.300}",
|
|
@@ -604,7 +732,9 @@ var coreTokens = {
|
|
|
604
732
|
"pricingCard": {
|
|
605
733
|
"bg": {
|
|
606
734
|
"value": "{colors.white}",
|
|
607
|
-
"metadata": {
|
|
735
|
+
"metadata": {
|
|
736
|
+
"pair": "modes.default.component.pricingCard.price"
|
|
737
|
+
}
|
|
608
738
|
},
|
|
609
739
|
"border": {
|
|
610
740
|
"value": "{colors.neutral.200}",
|
|
@@ -632,11 +762,15 @@ var coreTokens = {
|
|
|
632
762
|
},
|
|
633
763
|
"price": {
|
|
634
764
|
"value": "{colors.neutral.900}",
|
|
635
|
-
"metadata": {
|
|
765
|
+
"metadata": {
|
|
766
|
+
"pair": "modes.default.component.pricingCard.bg"
|
|
767
|
+
}
|
|
636
768
|
},
|
|
637
769
|
"priceDescription": {
|
|
638
770
|
"value": "{colors.neutral.500}",
|
|
639
|
-
"metadata": {
|
|
771
|
+
"metadata": {
|
|
772
|
+
"pair": "modes.default.component.pricingCard.bg"
|
|
773
|
+
}
|
|
640
774
|
}
|
|
641
775
|
},
|
|
642
776
|
"rating": {
|
|
@@ -658,19 +792,31 @@ var coreTokens = {
|
|
|
658
792
|
"dark": {
|
|
659
793
|
"surface": {
|
|
660
794
|
"page": {
|
|
661
|
-
"value": "{colors.neutral.900}"
|
|
795
|
+
"value": "{colors.neutral.900}",
|
|
796
|
+
"metadata": {
|
|
797
|
+
"pair": "modes.dark.text.onPage.default"
|
|
798
|
+
}
|
|
662
799
|
},
|
|
663
800
|
"card": {
|
|
664
|
-
"value": "{colors.neutral.800}"
|
|
801
|
+
"value": "{colors.neutral.800}",
|
|
802
|
+
"metadata": {
|
|
803
|
+
"pair": "modes.dark.text.onSurface.default"
|
|
804
|
+
}
|
|
665
805
|
},
|
|
666
806
|
"input": {
|
|
667
|
-
"value": "{colors.neutral.700}"
|
|
807
|
+
"value": "{colors.neutral.700}",
|
|
808
|
+
"metadata": {
|
|
809
|
+
"pair": "modes.dark.text.onSurface.default"
|
|
810
|
+
}
|
|
668
811
|
},
|
|
669
812
|
"overlay": {
|
|
670
813
|
"value": "{colors.neutral.800}"
|
|
671
814
|
},
|
|
672
815
|
"alternate": {
|
|
673
|
-
"value": "{colors.neutral.800}"
|
|
816
|
+
"value": "{colors.neutral.800}",
|
|
817
|
+
"metadata": {
|
|
818
|
+
"pair": "modes.dark.text.onPage.default"
|
|
819
|
+
}
|
|
674
820
|
},
|
|
675
821
|
"hero": {
|
|
676
822
|
"value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
|
|
@@ -679,46 +825,82 @@ var coreTokens = {
|
|
|
679
825
|
"text": {
|
|
680
826
|
"onPage": {
|
|
681
827
|
"default": {
|
|
682
|
-
"value": "{colors.neutral.50}"
|
|
828
|
+
"value": "{colors.neutral.50}",
|
|
829
|
+
"metadata": {
|
|
830
|
+
"pair": "modes.dark.surface.page"
|
|
831
|
+
}
|
|
683
832
|
},
|
|
684
833
|
"muted": {
|
|
685
|
-
"value": "{colors.neutral.
|
|
834
|
+
"value": "{colors.neutral.200}",
|
|
835
|
+
"metadata": {
|
|
836
|
+
"pair": "modes.dark.surface.page"
|
|
837
|
+
}
|
|
686
838
|
},
|
|
687
839
|
"subtle": {
|
|
688
|
-
"value": "{colors.neutral.
|
|
840
|
+
"value": "{colors.neutral.300}",
|
|
841
|
+
"metadata": {
|
|
842
|
+
"pair": "modes.dark.surface.page"
|
|
843
|
+
}
|
|
689
844
|
},
|
|
690
845
|
"meta": {
|
|
691
|
-
"value": "{colors.neutral.
|
|
846
|
+
"value": "{colors.neutral.300}",
|
|
847
|
+
"metadata": {
|
|
848
|
+
"pair": "modes.dark.surface.page"
|
|
849
|
+
}
|
|
692
850
|
},
|
|
693
851
|
"brand": {
|
|
694
|
-
"value": "{colors.brand.400}"
|
|
852
|
+
"value": "{colors.brand.400}",
|
|
853
|
+
"metadata": {
|
|
854
|
+
"pair": "modes.dark.surface.page"
|
|
855
|
+
}
|
|
695
856
|
}
|
|
696
857
|
},
|
|
697
858
|
"onSurface": {
|
|
698
859
|
"default": {
|
|
699
|
-
"value": "{colors.neutral.100}"
|
|
860
|
+
"value": "{colors.neutral.100}",
|
|
861
|
+
"metadata": {
|
|
862
|
+
"pair": "modes.dark.surface.card"
|
|
863
|
+
}
|
|
700
864
|
},
|
|
701
865
|
"muted": {
|
|
702
|
-
"value": "{colors.neutral.
|
|
866
|
+
"value": "{colors.neutral.200}",
|
|
867
|
+
"metadata": {
|
|
868
|
+
"pair": "modes.dark.surface.card"
|
|
869
|
+
}
|
|
703
870
|
},
|
|
704
871
|
"subtle": {
|
|
705
|
-
"value": "{colors.neutral.
|
|
872
|
+
"value": "{colors.neutral.300}",
|
|
873
|
+
"metadata": {
|
|
874
|
+
"pair": "modes.dark.surface.card"
|
|
875
|
+
}
|
|
706
876
|
},
|
|
707
877
|
"meta": {
|
|
708
|
-
"value": "{colors.neutral.
|
|
878
|
+
"value": "{colors.neutral.300}",
|
|
879
|
+
"metadata": {
|
|
880
|
+
"pair": "modes.dark.surface.card"
|
|
881
|
+
}
|
|
709
882
|
},
|
|
710
883
|
"brand": {
|
|
711
|
-
"value": "{colors.brand.400}"
|
|
884
|
+
"value": "{colors.brand.400}",
|
|
885
|
+
"metadata": {
|
|
886
|
+
"pair": "modes.dark.surface.card"
|
|
887
|
+
}
|
|
712
888
|
}
|
|
713
889
|
}
|
|
714
890
|
},
|
|
715
891
|
"component": {
|
|
716
892
|
"card": {
|
|
717
893
|
"text": {
|
|
718
|
-
"value": "{colors.neutral.100}"
|
|
894
|
+
"value": "{colors.neutral.100}",
|
|
895
|
+
"metadata": {
|
|
896
|
+
"pair": "modes.dark.surface.card"
|
|
897
|
+
}
|
|
719
898
|
},
|
|
720
899
|
"textMuted": {
|
|
721
|
-
"value": "{colors.neutral.
|
|
900
|
+
"value": "{colors.neutral.200}",
|
|
901
|
+
"metadata": {
|
|
902
|
+
"pair": "modes.dark.surface.card"
|
|
903
|
+
}
|
|
722
904
|
}
|
|
723
905
|
},
|
|
724
906
|
"input": {
|
|
@@ -744,12 +926,24 @@ var coreTokens = {
|
|
|
744
926
|
"pair": "modes.dark.component.badge.neutralText"
|
|
745
927
|
}
|
|
746
928
|
},
|
|
929
|
+
"neutralBgHover": {
|
|
930
|
+
"value": "{colors.neutral.600}",
|
|
931
|
+
"metadata": {
|
|
932
|
+
"pair": "modes.dark.component.badge.neutralText"
|
|
933
|
+
}
|
|
934
|
+
},
|
|
747
935
|
"neutralText": {
|
|
748
936
|
"value": "{colors.neutral.100}",
|
|
749
937
|
"metadata": {}
|
|
750
938
|
},
|
|
751
939
|
"infoBg": {
|
|
752
|
-
"value": "{colors.info.
|
|
940
|
+
"value": "{colors.info.900}",
|
|
941
|
+
"metadata": {
|
|
942
|
+
"pair": "modes.dark.component.badge.infoText"
|
|
943
|
+
}
|
|
944
|
+
},
|
|
945
|
+
"infoBgHover": {
|
|
946
|
+
"value": "{colors.info.700}",
|
|
753
947
|
"metadata": {
|
|
754
948
|
"pair": "modes.dark.component.badge.infoText"
|
|
755
949
|
}
|
|
@@ -764,6 +958,12 @@ var coreTokens = {
|
|
|
764
958
|
"pair": "modes.dark.component.badge.successText"
|
|
765
959
|
}
|
|
766
960
|
},
|
|
961
|
+
"successBgHover": {
|
|
962
|
+
"value": "{colors.success.700}",
|
|
963
|
+
"metadata": {
|
|
964
|
+
"pair": "modes.dark.component.badge.successText"
|
|
965
|
+
}
|
|
966
|
+
},
|
|
767
967
|
"successText": {
|
|
768
968
|
"value": "{colors.success.100}",
|
|
769
969
|
"metadata": {}
|
|
@@ -774,6 +974,12 @@ var coreTokens = {
|
|
|
774
974
|
"pair": "modes.dark.component.badge.warningText"
|
|
775
975
|
}
|
|
776
976
|
},
|
|
977
|
+
"warningBgHover": {
|
|
978
|
+
"value": "{colors.warning.800}",
|
|
979
|
+
"metadata": {
|
|
980
|
+
"pair": "modes.dark.component.badge.warningText"
|
|
981
|
+
}
|
|
982
|
+
},
|
|
777
983
|
"warningText": {
|
|
778
984
|
"value": "{colors.warning.100}",
|
|
779
985
|
"metadata": {}
|
|
@@ -784,6 +990,12 @@ var coreTokens = {
|
|
|
784
990
|
"pair": "modes.dark.component.badge.dangerText"
|
|
785
991
|
}
|
|
786
992
|
},
|
|
993
|
+
"dangerBgHover": {
|
|
994
|
+
"value": "{colors.error.700}",
|
|
995
|
+
"metadata": {
|
|
996
|
+
"pair": "modes.dark.component.badge.dangerText"
|
|
997
|
+
}
|
|
998
|
+
},
|
|
787
999
|
"dangerText": {
|
|
788
1000
|
"value": "{colors.error.100}",
|
|
789
1001
|
"metadata": {}
|
|
@@ -818,23 +1030,31 @@ var coreTokens = {
|
|
|
818
1030
|
"testimonial": {
|
|
819
1031
|
"bg": {
|
|
820
1032
|
"value": "{colors.neutral.800}",
|
|
821
|
-
"metadata": {
|
|
1033
|
+
"metadata": {
|
|
1034
|
+
"pair": "modes.dark.component.testimonial.text"
|
|
1035
|
+
}
|
|
822
1036
|
},
|
|
823
1037
|
"border": {
|
|
824
1038
|
"value": "{colors.neutral.700}",
|
|
825
1039
|
"metadata": {}
|
|
826
1040
|
},
|
|
827
1041
|
"text": {
|
|
828
|
-
"value": "{colors.neutral.
|
|
829
|
-
"metadata": {
|
|
1042
|
+
"value": "{colors.neutral.200}",
|
|
1043
|
+
"metadata": {
|
|
1044
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1045
|
+
}
|
|
830
1046
|
},
|
|
831
1047
|
"authorName": {
|
|
832
1048
|
"value": "{colors.neutral.100}",
|
|
833
|
-
"metadata": {
|
|
1049
|
+
"metadata": {
|
|
1050
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1051
|
+
}
|
|
834
1052
|
},
|
|
835
1053
|
"authorTitle": {
|
|
836
|
-
"value": "{colors.neutral.
|
|
837
|
-
"metadata": {
|
|
1054
|
+
"value": "{colors.neutral.300}",
|
|
1055
|
+
"metadata": {
|
|
1056
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1057
|
+
}
|
|
838
1058
|
},
|
|
839
1059
|
"quoteMark": {
|
|
840
1060
|
"value": "{colors.neutral.600}",
|
|
@@ -844,7 +1064,9 @@ var coreTokens = {
|
|
|
844
1064
|
"pricingCard": {
|
|
845
1065
|
"bg": {
|
|
846
1066
|
"value": "{colors.neutral.800}",
|
|
847
|
-
"metadata": {
|
|
1067
|
+
"metadata": {
|
|
1068
|
+
"pair": "modes.dark.component.pricingCard.price"
|
|
1069
|
+
}
|
|
848
1070
|
},
|
|
849
1071
|
"border": {
|
|
850
1072
|
"value": "{colors.neutral.700}",
|
|
@@ -872,11 +1094,15 @@ var coreTokens = {
|
|
|
872
1094
|
},
|
|
873
1095
|
"price": {
|
|
874
1096
|
"value": "{colors.neutral.100}",
|
|
875
|
-
"metadata": {
|
|
1097
|
+
"metadata": {
|
|
1098
|
+
"pair": "modes.dark.component.pricingCard.bg"
|
|
1099
|
+
}
|
|
876
1100
|
},
|
|
877
1101
|
"priceDescription": {
|
|
878
|
-
"value": "{colors.neutral.
|
|
879
|
-
"metadata": {
|
|
1102
|
+
"value": "{colors.neutral.300}",
|
|
1103
|
+
"metadata": {
|
|
1104
|
+
"pair": "modes.dark.component.pricingCard.bg"
|
|
1105
|
+
}
|
|
880
1106
|
}
|
|
881
1107
|
},
|
|
882
1108
|
"rating": {
|
|
@@ -898,40 +1124,40 @@ var coreTokens = {
|
|
|
898
1124
|
},
|
|
899
1125
|
"colors": {
|
|
900
1126
|
"brand": {
|
|
901
|
-
"50": "#
|
|
902
|
-
"100": "#
|
|
903
|
-
"200": "#
|
|
904
|
-
"300": "#
|
|
905
|
-
"400": "#
|
|
906
|
-
"500": "#
|
|
907
|
-
"600": "#
|
|
908
|
-
"700": "#
|
|
909
|
-
"800": "#
|
|
910
|
-
"900": "#
|
|
1127
|
+
"50": "#eef4ff",
|
|
1128
|
+
"100": "#d9e7ff",
|
|
1129
|
+
"200": "#b9d2ff",
|
|
1130
|
+
"300": "#8ab6ff",
|
|
1131
|
+
"400": "#5a92ff",
|
|
1132
|
+
"500": "#336df4",
|
|
1133
|
+
"600": "#1f57db",
|
|
1134
|
+
"700": "#1946b4",
|
|
1135
|
+
"800": "#173b8f",
|
|
1136
|
+
"900": "#16336f"
|
|
911
1137
|
},
|
|
912
1138
|
"neutral": {
|
|
913
|
-
"50": "#
|
|
914
|
-
"100": "#
|
|
915
|
-
"200": "#
|
|
916
|
-
"300": "#
|
|
917
|
-
"400": "#
|
|
918
|
-
"500": "#
|
|
919
|
-
"600": "#
|
|
920
|
-
"700": "#
|
|
921
|
-
"800": "#
|
|
922
|
-
"900": "#
|
|
1139
|
+
"50": "#f7f8fb",
|
|
1140
|
+
"100": "#eef1f6",
|
|
1141
|
+
"200": "#d9dfeb",
|
|
1142
|
+
"300": "#b7c1d4",
|
|
1143
|
+
"400": "#8a96ad",
|
|
1144
|
+
"500": "#657287",
|
|
1145
|
+
"600": "#4b576a",
|
|
1146
|
+
"700": "#374253",
|
|
1147
|
+
"800": "#222b38",
|
|
1148
|
+
"900": "#141b24"
|
|
923
1149
|
},
|
|
924
1150
|
"accent": {
|
|
925
|
-
"50": "#
|
|
926
|
-
"100": "#
|
|
927
|
-
"200": "#
|
|
928
|
-
"300": "#
|
|
929
|
-
"400": "#
|
|
930
|
-
"500": "#
|
|
931
|
-
"600": "#
|
|
932
|
-
"700": "#
|
|
933
|
-
"800": "#
|
|
934
|
-
"900": "#
|
|
1151
|
+
"50": "#f6f2ff",
|
|
1152
|
+
"100": "#eee5ff",
|
|
1153
|
+
"200": "#ddccff",
|
|
1154
|
+
"300": "#c3a7ff",
|
|
1155
|
+
"400": "#a279ff",
|
|
1156
|
+
"500": "#854ff7",
|
|
1157
|
+
"600": "#7135dd",
|
|
1158
|
+
"700": "#5d28b8",
|
|
1159
|
+
"800": "#4d2393",
|
|
1160
|
+
"900": "#401f75"
|
|
935
1161
|
},
|
|
936
1162
|
"success": {
|
|
937
1163
|
"50": "#f0fdf4",
|
|
@@ -946,16 +1172,16 @@ var coreTokens = {
|
|
|
946
1172
|
"900": "#14532d"
|
|
947
1173
|
},
|
|
948
1174
|
"warning": {
|
|
949
|
-
"50": "#
|
|
950
|
-
"100": "#
|
|
951
|
-
"200": "#
|
|
952
|
-
"300": "#
|
|
953
|
-
"400": "#
|
|
954
|
-
"500": "#
|
|
955
|
-
"600": "#
|
|
956
|
-
"700": "#
|
|
957
|
-
"800": "#
|
|
958
|
-
"900": "#
|
|
1175
|
+
"50": "#fffbea",
|
|
1176
|
+
"100": "#fff1c2",
|
|
1177
|
+
"200": "#ffe08a",
|
|
1178
|
+
"300": "#ffd24d",
|
|
1179
|
+
"400": "#ffc21a",
|
|
1180
|
+
"500": "#f5ad00",
|
|
1181
|
+
"600": "#d48806",
|
|
1182
|
+
"700": "#ad6800",
|
|
1183
|
+
"800": "#8f5200",
|
|
1184
|
+
"900": "#734000"
|
|
959
1185
|
},
|
|
960
1186
|
"error": {
|
|
961
1187
|
"50": "#fef2f2",
|
|
@@ -970,28 +1196,28 @@ var coreTokens = {
|
|
|
970
1196
|
"900": "#7f1d1d"
|
|
971
1197
|
},
|
|
972
1198
|
"info": {
|
|
973
|
-
"50": "#
|
|
974
|
-
"100": "#
|
|
975
|
-
"200": "#
|
|
976
|
-
"300": "#
|
|
977
|
-
"400": "#
|
|
978
|
-
"500": "#
|
|
979
|
-
"600": "#
|
|
980
|
-
"700": "#
|
|
981
|
-
"800": "#
|
|
982
|
-
"900": "#
|
|
1199
|
+
"50": "#f0f9ff",
|
|
1200
|
+
"100": "#e0f2fe",
|
|
1201
|
+
"200": "#bae6fd",
|
|
1202
|
+
"300": "#7dd3fc",
|
|
1203
|
+
"400": "#38bdf8",
|
|
1204
|
+
"500": "#0ea5e9",
|
|
1205
|
+
"600": "#0369a1",
|
|
1206
|
+
"700": "#075985",
|
|
1207
|
+
"800": "#0c4a6e",
|
|
1208
|
+
"900": "#082f49"
|
|
983
1209
|
},
|
|
984
1210
|
"indigo": {
|
|
985
|
-
"500": "#
|
|
986
|
-
"600": "#
|
|
1211
|
+
"500": "#5b6ee1",
|
|
1212
|
+
"600": "#4d61db"
|
|
987
1213
|
},
|
|
988
1214
|
"violet": {
|
|
989
|
-
"600": "#
|
|
1215
|
+
"600": "#6f3fd7"
|
|
990
1216
|
},
|
|
991
1217
|
"focus": {
|
|
992
|
-
"primary": "#
|
|
1218
|
+
"primary": "#336df4",
|
|
993
1219
|
"error": "#ef4444",
|
|
994
|
-
"info": "#
|
|
1220
|
+
"info": "#0369a1"
|
|
995
1221
|
},
|
|
996
1222
|
"white": "#ffffff",
|
|
997
1223
|
"black": "#000000"
|
|
@@ -1139,6 +1365,12 @@ var coreTokens = {
|
|
|
1139
1365
|
"card": "{colors.neutral.200}",
|
|
1140
1366
|
"input": "{colors.neutral.300}"
|
|
1141
1367
|
},
|
|
1368
|
+
"border": {
|
|
1369
|
+
"width": {
|
|
1370
|
+
"base": "1px",
|
|
1371
|
+
"thick": "2px"
|
|
1372
|
+
}
|
|
1373
|
+
},
|
|
1142
1374
|
"surface": {
|
|
1143
1375
|
"page": {
|
|
1144
1376
|
"value": "{colors.neutral.50}",
|
|
@@ -1198,7 +1430,8 @@ var coreTokens = {
|
|
|
1198
1430
|
"sm": "1rem",
|
|
1199
1431
|
"md": "1.5rem",
|
|
1200
1432
|
"lg": "2rem"
|
|
1201
|
-
}
|
|
1433
|
+
},
|
|
1434
|
+
"maxWidth": "72rem"
|
|
1202
1435
|
}
|
|
1203
1436
|
},
|
|
1204
1437
|
"font": {
|
|
@@ -1400,6 +1633,16 @@ var createCssVariableMap = (tokens2, options = {}) => {
|
|
|
1400
1633
|
assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
|
|
1401
1634
|
});
|
|
1402
1635
|
}
|
|
1636
|
+
const container = layout.container;
|
|
1637
|
+
if (container?.maxWidth) {
|
|
1638
|
+
assign(toVariableName(prefix, "layout", "container", "max-width"), container.maxWidth);
|
|
1639
|
+
}
|
|
1640
|
+
}
|
|
1641
|
+
const border = baseTokens.border;
|
|
1642
|
+
if (border?.width) {
|
|
1643
|
+
Object.entries(border.width).forEach(([key, value]) => {
|
|
1644
|
+
assign(toVariableName(prefix, "border", "width", key), value);
|
|
1645
|
+
});
|
|
1403
1646
|
}
|
|
1404
1647
|
Object.entries(baseTokens.radii).forEach(([key, value]) => {
|
|
1405
1648
|
assign(toVariableName(prefix, "radius", key), value);
|
|
@@ -1778,7 +2021,7 @@ var createTailwindTheme = (source = tokens) => {
|
|
|
1778
2021
|
return {
|
|
1779
2022
|
colors,
|
|
1780
2023
|
spacing: { ...source.space ?? {} },
|
|
1781
|
-
borderRadius: { ...source.radii },
|
|
2024
|
+
borderRadius: { ...source.radii ?? {} },
|
|
1782
2025
|
fontFamily,
|
|
1783
2026
|
fontSize,
|
|
1784
2027
|
boxShadow: { ...source.shadows },
|
|
@@ -1786,7 +2029,14 @@ var createTailwindTheme = (source = tokens) => {
|
|
|
1786
2029
|
zIndex: { ...source.zIndex },
|
|
1787
2030
|
transitionDuration: { ...source.transitions.duration },
|
|
1788
2031
|
transitionTimingFunction: { ...source.transitions.easing },
|
|
1789
|
-
opacity: { ...source.opacity }
|
|
2032
|
+
opacity: { ...source.opacity },
|
|
2033
|
+
maxWidth: {
|
|
2034
|
+
container: source.layout?.container?.maxWidth
|
|
2035
|
+
},
|
|
2036
|
+
borderWidth: {
|
|
2037
|
+
DEFAULT: source.border?.width.base,
|
|
2038
|
+
...source.border?.width ?? {}
|
|
2039
|
+
}
|
|
1790
2040
|
};
|
|
1791
2041
|
};
|
|
1792
2042
|
var tailwindTheme = createTailwindTheme(tokens);
|