@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.cjs
CHANGED
|
@@ -63,7 +63,10 @@ var coreTokens = {
|
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
65
|
"neutralBgHover": {
|
|
66
|
-
"value": "{colors.neutral.200}"
|
|
66
|
+
"value": "{colors.neutral.200}",
|
|
67
|
+
"metadata": {
|
|
68
|
+
"pair": "component.badge.neutralText"
|
|
69
|
+
}
|
|
67
70
|
},
|
|
68
71
|
"neutralText": {
|
|
69
72
|
"value": "{colors.neutral.700}"
|
|
@@ -75,7 +78,10 @@ var coreTokens = {
|
|
|
75
78
|
}
|
|
76
79
|
},
|
|
77
80
|
"infoBgHover": {
|
|
78
|
-
"value": "{colors.info.200}"
|
|
81
|
+
"value": "{colors.info.200}",
|
|
82
|
+
"metadata": {
|
|
83
|
+
"pair": "component.badge.infoText"
|
|
84
|
+
}
|
|
79
85
|
},
|
|
80
86
|
"infoText": {
|
|
81
87
|
"value": "{colors.info.700}"
|
|
@@ -87,10 +93,13 @@ var coreTokens = {
|
|
|
87
93
|
}
|
|
88
94
|
},
|
|
89
95
|
"successBgHover": {
|
|
90
|
-
"value": "{colors.success.200}"
|
|
96
|
+
"value": "{colors.success.200}",
|
|
97
|
+
"metadata": {
|
|
98
|
+
"pair": "component.badge.successText"
|
|
99
|
+
}
|
|
91
100
|
},
|
|
92
101
|
"successText": {
|
|
93
|
-
"value": "{colors.success.
|
|
102
|
+
"value": "{colors.success.800}"
|
|
94
103
|
},
|
|
95
104
|
"warningBg": {
|
|
96
105
|
"value": "{colors.warning.100}",
|
|
@@ -99,10 +108,13 @@ var coreTokens = {
|
|
|
99
108
|
}
|
|
100
109
|
},
|
|
101
110
|
"warningBgHover": {
|
|
102
|
-
"value": "{colors.warning.200}"
|
|
111
|
+
"value": "{colors.warning.200}",
|
|
112
|
+
"metadata": {
|
|
113
|
+
"pair": "component.badge.warningText"
|
|
114
|
+
}
|
|
103
115
|
},
|
|
104
116
|
"warningText": {
|
|
105
|
-
"value": "{colors.warning.
|
|
117
|
+
"value": "{colors.warning.800}"
|
|
106
118
|
},
|
|
107
119
|
"dangerBg": {
|
|
108
120
|
"value": "{colors.error.100}",
|
|
@@ -111,10 +123,13 @@ var coreTokens = {
|
|
|
111
123
|
}
|
|
112
124
|
},
|
|
113
125
|
"dangerBgHover": {
|
|
114
|
-
"value": "{colors.error.200}"
|
|
126
|
+
"value": "{colors.error.200}",
|
|
127
|
+
"metadata": {
|
|
128
|
+
"pair": "component.badge.dangerText"
|
|
129
|
+
}
|
|
115
130
|
},
|
|
116
131
|
"dangerText": {
|
|
117
|
-
"value": "{colors.error.
|
|
132
|
+
"value": "{colors.error.800}"
|
|
118
133
|
}
|
|
119
134
|
},
|
|
120
135
|
"iconBox": {
|
|
@@ -216,10 +231,16 @@ var coreTokens = {
|
|
|
216
231
|
}
|
|
217
232
|
},
|
|
218
233
|
"bgHover": {
|
|
219
|
-
"value": "{colors.info.700}"
|
|
234
|
+
"value": "{colors.info.700}",
|
|
235
|
+
"metadata": {
|
|
236
|
+
"pair": "buttons.primary.text"
|
|
237
|
+
}
|
|
220
238
|
},
|
|
221
239
|
"bgActive": {
|
|
222
|
-
"value": "{colors.info.800}"
|
|
240
|
+
"value": "{colors.info.800}",
|
|
241
|
+
"metadata": {
|
|
242
|
+
"pair": "buttons.primary.text"
|
|
243
|
+
}
|
|
223
244
|
},
|
|
224
245
|
"bgDisabled": {
|
|
225
246
|
"value": "{colors.neutral.200}"
|
|
@@ -229,6 +250,9 @@ var coreTokens = {
|
|
|
229
250
|
},
|
|
230
251
|
"textDisabled": {
|
|
231
252
|
"value": "{colors.neutral.400}"
|
|
253
|
+
},
|
|
254
|
+
"focusRing": {
|
|
255
|
+
"value": "{colors.info.500} / 0.4"
|
|
232
256
|
}
|
|
233
257
|
},
|
|
234
258
|
"secondary": {
|
|
@@ -239,25 +263,34 @@ var coreTokens = {
|
|
|
239
263
|
}
|
|
240
264
|
},
|
|
241
265
|
"bgHover": {
|
|
242
|
-
"value": "{colors.neutral.50}"
|
|
266
|
+
"value": "{colors.neutral.50}",
|
|
267
|
+
"metadata": {
|
|
268
|
+
"pair": "buttons.secondary.text"
|
|
269
|
+
}
|
|
243
270
|
},
|
|
244
271
|
"bgActive": {
|
|
245
|
-
"value": "{colors.neutral.100}"
|
|
272
|
+
"value": "{colors.neutral.100}",
|
|
273
|
+
"metadata": {
|
|
274
|
+
"pair": "buttons.secondary.text"
|
|
275
|
+
}
|
|
246
276
|
},
|
|
247
277
|
"bgDisabled": {
|
|
248
278
|
"value": "{colors.neutral.50}"
|
|
249
279
|
},
|
|
250
280
|
"text": {
|
|
251
|
-
"value": "{colors.info.
|
|
281
|
+
"value": "{colors.info.700}"
|
|
252
282
|
},
|
|
253
283
|
"textDisabled": {
|
|
254
284
|
"value": "{colors.neutral.400}"
|
|
255
285
|
},
|
|
256
286
|
"border": {
|
|
257
|
-
"value": "{colors.info.
|
|
287
|
+
"value": "{colors.info.700}"
|
|
258
288
|
},
|
|
259
289
|
"borderDisabled": {
|
|
260
290
|
"value": "{colors.neutral.200}"
|
|
291
|
+
},
|
|
292
|
+
"focusRing": {
|
|
293
|
+
"value": "{colors.info.500} / 0.4"
|
|
261
294
|
}
|
|
262
295
|
},
|
|
263
296
|
"ghost": {
|
|
@@ -265,19 +298,28 @@ var coreTokens = {
|
|
|
265
298
|
"value": "transparent"
|
|
266
299
|
},
|
|
267
300
|
"bgHover": {
|
|
268
|
-
"value": "{colors.info.50}"
|
|
301
|
+
"value": "{colors.info.50}",
|
|
302
|
+
"metadata": {
|
|
303
|
+
"pair": "buttons.ghost.text"
|
|
304
|
+
}
|
|
269
305
|
},
|
|
270
306
|
"bgActive": {
|
|
271
|
-
"value": "{colors.info.100}"
|
|
307
|
+
"value": "{colors.info.100}",
|
|
308
|
+
"metadata": {
|
|
309
|
+
"pair": "buttons.ghost.text"
|
|
310
|
+
}
|
|
272
311
|
},
|
|
273
312
|
"bgDisabled": {
|
|
274
313
|
"value": "transparent"
|
|
275
314
|
},
|
|
276
315
|
"text": {
|
|
277
|
-
"value": "{colors.info.
|
|
316
|
+
"value": "{colors.info.700}"
|
|
278
317
|
},
|
|
279
318
|
"textDisabled": {
|
|
280
319
|
"value": "{colors.neutral.400}"
|
|
320
|
+
},
|
|
321
|
+
"focusRing": {
|
|
322
|
+
"value": "{colors.info.500} / 0.4"
|
|
281
323
|
}
|
|
282
324
|
},
|
|
283
325
|
"danger": {
|
|
@@ -288,10 +330,16 @@ var coreTokens = {
|
|
|
288
330
|
}
|
|
289
331
|
},
|
|
290
332
|
"bgHover": {
|
|
291
|
-
"value": "{colors.error.700}"
|
|
333
|
+
"value": "{colors.error.700}",
|
|
334
|
+
"metadata": {
|
|
335
|
+
"pair": "buttons.danger.text"
|
|
336
|
+
}
|
|
292
337
|
},
|
|
293
338
|
"bgActive": {
|
|
294
|
-
"value": "{colors.error.800}"
|
|
339
|
+
"value": "{colors.error.800}",
|
|
340
|
+
"metadata": {
|
|
341
|
+
"pair": "buttons.danger.text"
|
|
342
|
+
}
|
|
295
343
|
},
|
|
296
344
|
"bgDisabled": {
|
|
297
345
|
"value": "{colors.error.200}"
|
|
@@ -301,6 +349,9 @@ var coreTokens = {
|
|
|
301
349
|
},
|
|
302
350
|
"textDisabled": {
|
|
303
351
|
"value": "{colors.neutral.400}"
|
|
352
|
+
},
|
|
353
|
+
"focusRing": {
|
|
354
|
+
"value": "{colors.error.500} / 0.4"
|
|
304
355
|
}
|
|
305
356
|
},
|
|
306
357
|
"success": {
|
|
@@ -311,10 +362,16 @@ var coreTokens = {
|
|
|
311
362
|
}
|
|
312
363
|
},
|
|
313
364
|
"bgHover": {
|
|
314
|
-
"value": "{colors.success.800}"
|
|
365
|
+
"value": "{colors.success.800}",
|
|
366
|
+
"metadata": {
|
|
367
|
+
"pair": "buttons.success.text"
|
|
368
|
+
}
|
|
315
369
|
},
|
|
316
370
|
"bgActive": {
|
|
317
|
-
"value": "{colors.success.900}"
|
|
371
|
+
"value": "{colors.success.900}",
|
|
372
|
+
"metadata": {
|
|
373
|
+
"pair": "buttons.success.text"
|
|
374
|
+
}
|
|
318
375
|
},
|
|
319
376
|
"bgDisabled": {
|
|
320
377
|
"value": "{colors.success.200}"
|
|
@@ -324,32 +381,44 @@ var coreTokens = {
|
|
|
324
381
|
},
|
|
325
382
|
"textDisabled": {
|
|
326
383
|
"value": "{colors.neutral.400}"
|
|
384
|
+
},
|
|
385
|
+
"focusRing": {
|
|
386
|
+
"value": "{colors.success.500} / 0.4"
|
|
327
387
|
}
|
|
328
388
|
},
|
|
329
389
|
"cta": {
|
|
330
390
|
"bg": {
|
|
331
|
-
"value": "{colors.
|
|
391
|
+
"value": "{colors.brand.600}",
|
|
332
392
|
"metadata": {
|
|
333
393
|
"pair": "buttons.cta.text"
|
|
334
394
|
}
|
|
335
395
|
},
|
|
336
396
|
"bgHover": {
|
|
337
|
-
"value": "{colors.
|
|
397
|
+
"value": "{colors.brand.700}",
|
|
398
|
+
"metadata": {
|
|
399
|
+
"pair": "buttons.cta.text"
|
|
400
|
+
}
|
|
338
401
|
},
|
|
339
402
|
"bgActive": {
|
|
340
|
-
"value": "{colors.
|
|
403
|
+
"value": "{colors.brand.800}",
|
|
404
|
+
"metadata": {
|
|
405
|
+
"pair": "buttons.cta.text"
|
|
406
|
+
}
|
|
341
407
|
},
|
|
342
408
|
"bgDisabled": {
|
|
343
|
-
"value": "{colors.
|
|
409
|
+
"value": "{colors.brand.200}"
|
|
344
410
|
},
|
|
345
411
|
"text": {
|
|
346
|
-
"value": "{colors.
|
|
412
|
+
"value": "{colors.white}"
|
|
347
413
|
},
|
|
348
414
|
"textDisabled": {
|
|
349
415
|
"value": "{colors.neutral.400}"
|
|
350
416
|
},
|
|
351
417
|
"shadow": {
|
|
352
|
-
"value": "0 4px 14px 0 {colors.
|
|
418
|
+
"value": "0 4px 14px 0 {colors.brand.500} / 0.39"
|
|
419
|
+
},
|
|
420
|
+
"focusRing": {
|
|
421
|
+
"value": "{colors.brand.500} / 0.4"
|
|
353
422
|
}
|
|
354
423
|
},
|
|
355
424
|
"accent": {
|
|
@@ -360,10 +429,16 @@ var coreTokens = {
|
|
|
360
429
|
}
|
|
361
430
|
},
|
|
362
431
|
"bgHover": {
|
|
363
|
-
"value": "{colors.accent.700}"
|
|
432
|
+
"value": "{colors.accent.700}",
|
|
433
|
+
"metadata": {
|
|
434
|
+
"pair": "buttons.accent.text"
|
|
435
|
+
}
|
|
364
436
|
},
|
|
365
437
|
"bgActive": {
|
|
366
|
-
"value": "{colors.accent.800}"
|
|
438
|
+
"value": "{colors.accent.800}",
|
|
439
|
+
"metadata": {
|
|
440
|
+
"pair": "buttons.accent.text"
|
|
441
|
+
}
|
|
367
442
|
},
|
|
368
443
|
"bgDisabled": {
|
|
369
444
|
"value": "{colors.accent.200}"
|
|
@@ -373,6 +448,9 @@ var coreTokens = {
|
|
|
373
448
|
},
|
|
374
449
|
"textDisabled": {
|
|
375
450
|
"value": "{colors.neutral.400}"
|
|
451
|
+
},
|
|
452
|
+
"focusRing": {
|
|
453
|
+
"value": "{colors.accent.500} / 0.4"
|
|
376
454
|
}
|
|
377
455
|
}
|
|
378
456
|
},
|
|
@@ -448,19 +526,31 @@ var coreTokens = {
|
|
|
448
526
|
"default": {
|
|
449
527
|
"surface": {
|
|
450
528
|
"page": {
|
|
451
|
-
"value": "{colors.neutral.50}"
|
|
529
|
+
"value": "{colors.neutral.50}",
|
|
530
|
+
"metadata": {
|
|
531
|
+
"pair": "modes.default.text.onPage.default"
|
|
532
|
+
}
|
|
452
533
|
},
|
|
453
534
|
"card": {
|
|
454
|
-
"value": "{colors.white}"
|
|
535
|
+
"value": "{colors.white}",
|
|
536
|
+
"metadata": {
|
|
537
|
+
"pair": "modes.default.text.onSurface.default"
|
|
538
|
+
}
|
|
455
539
|
},
|
|
456
540
|
"input": {
|
|
457
|
-
"value": "{colors.white}"
|
|
541
|
+
"value": "{colors.white}",
|
|
542
|
+
"metadata": {
|
|
543
|
+
"pair": "modes.default.text.onSurface.default"
|
|
544
|
+
}
|
|
458
545
|
},
|
|
459
546
|
"overlay": {
|
|
460
547
|
"value": "{colors.neutral.900} / 0.6"
|
|
461
548
|
},
|
|
462
549
|
"alternate": {
|
|
463
|
-
"value": "{colors.neutral.100}"
|
|
550
|
+
"value": "{colors.neutral.100}",
|
|
551
|
+
"metadata": {
|
|
552
|
+
"pair": "modes.default.text.onPage.default"
|
|
553
|
+
}
|
|
464
554
|
},
|
|
465
555
|
"hero": {
|
|
466
556
|
"value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
|
|
@@ -469,36 +559,66 @@ var coreTokens = {
|
|
|
469
559
|
"text": {
|
|
470
560
|
"onPage": {
|
|
471
561
|
"default": {
|
|
472
|
-
"value": "{colors.neutral.900}"
|
|
562
|
+
"value": "{colors.neutral.900}",
|
|
563
|
+
"metadata": {
|
|
564
|
+
"pair": "modes.default.surface.page"
|
|
565
|
+
}
|
|
473
566
|
},
|
|
474
567
|
"muted": {
|
|
475
|
-
"value": "{colors.neutral.600}"
|
|
568
|
+
"value": "{colors.neutral.600}",
|
|
569
|
+
"metadata": {
|
|
570
|
+
"pair": "modes.default.surface.page"
|
|
571
|
+
}
|
|
476
572
|
},
|
|
477
573
|
"subtle": {
|
|
478
|
-
"value": "{colors.neutral.500}"
|
|
574
|
+
"value": "{colors.neutral.500}",
|
|
575
|
+
"metadata": {
|
|
576
|
+
"pair": "modes.default.surface.page"
|
|
577
|
+
}
|
|
479
578
|
},
|
|
480
579
|
"meta": {
|
|
481
|
-
"value": "{colors.neutral.500}"
|
|
580
|
+
"value": "{colors.neutral.500}",
|
|
581
|
+
"metadata": {
|
|
582
|
+
"pair": "modes.default.surface.page"
|
|
583
|
+
}
|
|
482
584
|
},
|
|
483
585
|
"brand": {
|
|
484
|
-
"value": "{colors.brand.600}"
|
|
586
|
+
"value": "{colors.brand.600}",
|
|
587
|
+
"metadata": {
|
|
588
|
+
"pair": "modes.default.surface.page"
|
|
589
|
+
}
|
|
485
590
|
}
|
|
486
591
|
},
|
|
487
592
|
"onSurface": {
|
|
488
593
|
"default": {
|
|
489
|
-
"value": "{colors.neutral.900}"
|
|
594
|
+
"value": "{colors.neutral.900}",
|
|
595
|
+
"metadata": {
|
|
596
|
+
"pair": "modes.default.surface.card"
|
|
597
|
+
}
|
|
490
598
|
},
|
|
491
599
|
"muted": {
|
|
492
|
-
"value": "{colors.neutral.600}"
|
|
600
|
+
"value": "{colors.neutral.600}",
|
|
601
|
+
"metadata": {
|
|
602
|
+
"pair": "modes.default.surface.card"
|
|
603
|
+
}
|
|
493
604
|
},
|
|
494
605
|
"subtle": {
|
|
495
|
-
"value": "{colors.neutral.500}"
|
|
606
|
+
"value": "{colors.neutral.500}",
|
|
607
|
+
"metadata": {
|
|
608
|
+
"pair": "modes.default.surface.card"
|
|
609
|
+
}
|
|
496
610
|
},
|
|
497
611
|
"meta": {
|
|
498
|
-
"value": "{colors.neutral.500}"
|
|
612
|
+
"value": "{colors.neutral.500}",
|
|
613
|
+
"metadata": {
|
|
614
|
+
"pair": "modes.default.surface.card"
|
|
615
|
+
}
|
|
499
616
|
},
|
|
500
617
|
"brand": {
|
|
501
|
-
"value": "{colors.brand.600}"
|
|
618
|
+
"value": "{colors.brand.600}",
|
|
619
|
+
"metadata": {
|
|
620
|
+
"pair": "modes.default.surface.card"
|
|
621
|
+
}
|
|
502
622
|
}
|
|
503
623
|
}
|
|
504
624
|
},
|
|
@@ -565,7 +685,7 @@ var coreTokens = {
|
|
|
565
685
|
}
|
|
566
686
|
},
|
|
567
687
|
"warningText": {
|
|
568
|
-
"value": "{colors.warning.
|
|
688
|
+
"value": "{colors.warning.800}",
|
|
569
689
|
"metadata": {}
|
|
570
690
|
},
|
|
571
691
|
"dangerBg": {
|
|
@@ -608,7 +728,9 @@ var coreTokens = {
|
|
|
608
728
|
"testimonial": {
|
|
609
729
|
"bg": {
|
|
610
730
|
"value": "{colors.white}",
|
|
611
|
-
"metadata": {
|
|
731
|
+
"metadata": {
|
|
732
|
+
"pair": "modes.default.component.testimonial.text"
|
|
733
|
+
}
|
|
612
734
|
},
|
|
613
735
|
"border": {
|
|
614
736
|
"value": "{colors.neutral.200}",
|
|
@@ -616,15 +738,21 @@ var coreTokens = {
|
|
|
616
738
|
},
|
|
617
739
|
"text": {
|
|
618
740
|
"value": "{colors.neutral.700}",
|
|
619
|
-
"metadata": {
|
|
741
|
+
"metadata": {
|
|
742
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
743
|
+
}
|
|
620
744
|
},
|
|
621
745
|
"authorName": {
|
|
622
746
|
"value": "{colors.neutral.900}",
|
|
623
|
-
"metadata": {
|
|
747
|
+
"metadata": {
|
|
748
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
749
|
+
}
|
|
624
750
|
},
|
|
625
751
|
"authorTitle": {
|
|
626
752
|
"value": "{colors.neutral.500}",
|
|
627
|
-
"metadata": {
|
|
753
|
+
"metadata": {
|
|
754
|
+
"pair": "modes.default.component.testimonial.bg"
|
|
755
|
+
}
|
|
628
756
|
},
|
|
629
757
|
"quoteMark": {
|
|
630
758
|
"value": "{colors.neutral.300}",
|
|
@@ -634,7 +762,9 @@ var coreTokens = {
|
|
|
634
762
|
"pricingCard": {
|
|
635
763
|
"bg": {
|
|
636
764
|
"value": "{colors.white}",
|
|
637
|
-
"metadata": {
|
|
765
|
+
"metadata": {
|
|
766
|
+
"pair": "modes.default.component.pricingCard.price"
|
|
767
|
+
}
|
|
638
768
|
},
|
|
639
769
|
"border": {
|
|
640
770
|
"value": "{colors.neutral.200}",
|
|
@@ -662,11 +792,15 @@ var coreTokens = {
|
|
|
662
792
|
},
|
|
663
793
|
"price": {
|
|
664
794
|
"value": "{colors.neutral.900}",
|
|
665
|
-
"metadata": {
|
|
795
|
+
"metadata": {
|
|
796
|
+
"pair": "modes.default.component.pricingCard.bg"
|
|
797
|
+
}
|
|
666
798
|
},
|
|
667
799
|
"priceDescription": {
|
|
668
800
|
"value": "{colors.neutral.500}",
|
|
669
|
-
"metadata": {
|
|
801
|
+
"metadata": {
|
|
802
|
+
"pair": "modes.default.component.pricingCard.bg"
|
|
803
|
+
}
|
|
670
804
|
}
|
|
671
805
|
},
|
|
672
806
|
"rating": {
|
|
@@ -688,19 +822,31 @@ var coreTokens = {
|
|
|
688
822
|
"dark": {
|
|
689
823
|
"surface": {
|
|
690
824
|
"page": {
|
|
691
|
-
"value": "{colors.neutral.900}"
|
|
825
|
+
"value": "{colors.neutral.900}",
|
|
826
|
+
"metadata": {
|
|
827
|
+
"pair": "modes.dark.text.onPage.default"
|
|
828
|
+
}
|
|
692
829
|
},
|
|
693
830
|
"card": {
|
|
694
|
-
"value": "{colors.neutral.800}"
|
|
831
|
+
"value": "{colors.neutral.800}",
|
|
832
|
+
"metadata": {
|
|
833
|
+
"pair": "modes.dark.text.onSurface.default"
|
|
834
|
+
}
|
|
695
835
|
},
|
|
696
836
|
"input": {
|
|
697
|
-
"value": "{colors.neutral.700}"
|
|
837
|
+
"value": "{colors.neutral.700}",
|
|
838
|
+
"metadata": {
|
|
839
|
+
"pair": "modes.dark.text.onSurface.default"
|
|
840
|
+
}
|
|
698
841
|
},
|
|
699
842
|
"overlay": {
|
|
700
843
|
"value": "{colors.neutral.800}"
|
|
701
844
|
},
|
|
702
845
|
"alternate": {
|
|
703
|
-
"value": "{colors.neutral.800}"
|
|
846
|
+
"value": "{colors.neutral.800}",
|
|
847
|
+
"metadata": {
|
|
848
|
+
"pair": "modes.dark.text.onPage.default"
|
|
849
|
+
}
|
|
704
850
|
},
|
|
705
851
|
"hero": {
|
|
706
852
|
"value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
|
|
@@ -709,46 +855,82 @@ var coreTokens = {
|
|
|
709
855
|
"text": {
|
|
710
856
|
"onPage": {
|
|
711
857
|
"default": {
|
|
712
|
-
"value": "{colors.neutral.50}"
|
|
858
|
+
"value": "{colors.neutral.50}",
|
|
859
|
+
"metadata": {
|
|
860
|
+
"pair": "modes.dark.surface.page"
|
|
861
|
+
}
|
|
713
862
|
},
|
|
714
863
|
"muted": {
|
|
715
|
-
"value": "{colors.neutral.
|
|
864
|
+
"value": "{colors.neutral.200}",
|
|
865
|
+
"metadata": {
|
|
866
|
+
"pair": "modes.dark.surface.page"
|
|
867
|
+
}
|
|
716
868
|
},
|
|
717
869
|
"subtle": {
|
|
718
|
-
"value": "{colors.neutral.
|
|
870
|
+
"value": "{colors.neutral.300}",
|
|
871
|
+
"metadata": {
|
|
872
|
+
"pair": "modes.dark.surface.page"
|
|
873
|
+
}
|
|
719
874
|
},
|
|
720
875
|
"meta": {
|
|
721
|
-
"value": "{colors.neutral.
|
|
876
|
+
"value": "{colors.neutral.300}",
|
|
877
|
+
"metadata": {
|
|
878
|
+
"pair": "modes.dark.surface.page"
|
|
879
|
+
}
|
|
722
880
|
},
|
|
723
881
|
"brand": {
|
|
724
|
-
"value": "{colors.brand.400}"
|
|
882
|
+
"value": "{colors.brand.400}",
|
|
883
|
+
"metadata": {
|
|
884
|
+
"pair": "modes.dark.surface.page"
|
|
885
|
+
}
|
|
725
886
|
}
|
|
726
887
|
},
|
|
727
888
|
"onSurface": {
|
|
728
889
|
"default": {
|
|
729
|
-
"value": "{colors.neutral.100}"
|
|
890
|
+
"value": "{colors.neutral.100}",
|
|
891
|
+
"metadata": {
|
|
892
|
+
"pair": "modes.dark.surface.card"
|
|
893
|
+
}
|
|
730
894
|
},
|
|
731
895
|
"muted": {
|
|
732
|
-
"value": "{colors.neutral.
|
|
896
|
+
"value": "{colors.neutral.200}",
|
|
897
|
+
"metadata": {
|
|
898
|
+
"pair": "modes.dark.surface.card"
|
|
899
|
+
}
|
|
733
900
|
},
|
|
734
901
|
"subtle": {
|
|
735
|
-
"value": "{colors.neutral.
|
|
902
|
+
"value": "{colors.neutral.300}",
|
|
903
|
+
"metadata": {
|
|
904
|
+
"pair": "modes.dark.surface.card"
|
|
905
|
+
}
|
|
736
906
|
},
|
|
737
907
|
"meta": {
|
|
738
|
-
"value": "{colors.neutral.
|
|
908
|
+
"value": "{colors.neutral.300}",
|
|
909
|
+
"metadata": {
|
|
910
|
+
"pair": "modes.dark.surface.card"
|
|
911
|
+
}
|
|
739
912
|
},
|
|
740
913
|
"brand": {
|
|
741
|
-
"value": "{colors.brand.400}"
|
|
914
|
+
"value": "{colors.brand.400}",
|
|
915
|
+
"metadata": {
|
|
916
|
+
"pair": "modes.dark.surface.card"
|
|
917
|
+
}
|
|
742
918
|
}
|
|
743
919
|
}
|
|
744
920
|
},
|
|
745
921
|
"component": {
|
|
746
922
|
"card": {
|
|
747
923
|
"text": {
|
|
748
|
-
"value": "{colors.neutral.100}"
|
|
924
|
+
"value": "{colors.neutral.100}",
|
|
925
|
+
"metadata": {
|
|
926
|
+
"pair": "modes.dark.surface.card"
|
|
927
|
+
}
|
|
749
928
|
},
|
|
750
929
|
"textMuted": {
|
|
751
|
-
"value": "{colors.neutral.
|
|
930
|
+
"value": "{colors.neutral.200}",
|
|
931
|
+
"metadata": {
|
|
932
|
+
"pair": "modes.dark.surface.card"
|
|
933
|
+
}
|
|
752
934
|
}
|
|
753
935
|
},
|
|
754
936
|
"input": {
|
|
@@ -774,12 +956,24 @@ var coreTokens = {
|
|
|
774
956
|
"pair": "modes.dark.component.badge.neutralText"
|
|
775
957
|
}
|
|
776
958
|
},
|
|
959
|
+
"neutralBgHover": {
|
|
960
|
+
"value": "{colors.neutral.600}",
|
|
961
|
+
"metadata": {
|
|
962
|
+
"pair": "modes.dark.component.badge.neutralText"
|
|
963
|
+
}
|
|
964
|
+
},
|
|
777
965
|
"neutralText": {
|
|
778
966
|
"value": "{colors.neutral.100}",
|
|
779
967
|
"metadata": {}
|
|
780
968
|
},
|
|
781
969
|
"infoBg": {
|
|
782
|
-
"value": "{colors.info.
|
|
970
|
+
"value": "{colors.info.900}",
|
|
971
|
+
"metadata": {
|
|
972
|
+
"pair": "modes.dark.component.badge.infoText"
|
|
973
|
+
}
|
|
974
|
+
},
|
|
975
|
+
"infoBgHover": {
|
|
976
|
+
"value": "{colors.info.700}",
|
|
783
977
|
"metadata": {
|
|
784
978
|
"pair": "modes.dark.component.badge.infoText"
|
|
785
979
|
}
|
|
@@ -794,6 +988,12 @@ var coreTokens = {
|
|
|
794
988
|
"pair": "modes.dark.component.badge.successText"
|
|
795
989
|
}
|
|
796
990
|
},
|
|
991
|
+
"successBgHover": {
|
|
992
|
+
"value": "{colors.success.700}",
|
|
993
|
+
"metadata": {
|
|
994
|
+
"pair": "modes.dark.component.badge.successText"
|
|
995
|
+
}
|
|
996
|
+
},
|
|
797
997
|
"successText": {
|
|
798
998
|
"value": "{colors.success.100}",
|
|
799
999
|
"metadata": {}
|
|
@@ -804,6 +1004,12 @@ var coreTokens = {
|
|
|
804
1004
|
"pair": "modes.dark.component.badge.warningText"
|
|
805
1005
|
}
|
|
806
1006
|
},
|
|
1007
|
+
"warningBgHover": {
|
|
1008
|
+
"value": "{colors.warning.800}",
|
|
1009
|
+
"metadata": {
|
|
1010
|
+
"pair": "modes.dark.component.badge.warningText"
|
|
1011
|
+
}
|
|
1012
|
+
},
|
|
807
1013
|
"warningText": {
|
|
808
1014
|
"value": "{colors.warning.100}",
|
|
809
1015
|
"metadata": {}
|
|
@@ -814,6 +1020,12 @@ var coreTokens = {
|
|
|
814
1020
|
"pair": "modes.dark.component.badge.dangerText"
|
|
815
1021
|
}
|
|
816
1022
|
},
|
|
1023
|
+
"dangerBgHover": {
|
|
1024
|
+
"value": "{colors.error.700}",
|
|
1025
|
+
"metadata": {
|
|
1026
|
+
"pair": "modes.dark.component.badge.dangerText"
|
|
1027
|
+
}
|
|
1028
|
+
},
|
|
817
1029
|
"dangerText": {
|
|
818
1030
|
"value": "{colors.error.100}",
|
|
819
1031
|
"metadata": {}
|
|
@@ -848,23 +1060,31 @@ var coreTokens = {
|
|
|
848
1060
|
"testimonial": {
|
|
849
1061
|
"bg": {
|
|
850
1062
|
"value": "{colors.neutral.800}",
|
|
851
|
-
"metadata": {
|
|
1063
|
+
"metadata": {
|
|
1064
|
+
"pair": "modes.dark.component.testimonial.text"
|
|
1065
|
+
}
|
|
852
1066
|
},
|
|
853
1067
|
"border": {
|
|
854
1068
|
"value": "{colors.neutral.700}",
|
|
855
1069
|
"metadata": {}
|
|
856
1070
|
},
|
|
857
1071
|
"text": {
|
|
858
|
-
"value": "{colors.neutral.
|
|
859
|
-
"metadata": {
|
|
1072
|
+
"value": "{colors.neutral.200}",
|
|
1073
|
+
"metadata": {
|
|
1074
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1075
|
+
}
|
|
860
1076
|
},
|
|
861
1077
|
"authorName": {
|
|
862
1078
|
"value": "{colors.neutral.100}",
|
|
863
|
-
"metadata": {
|
|
1079
|
+
"metadata": {
|
|
1080
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1081
|
+
}
|
|
864
1082
|
},
|
|
865
1083
|
"authorTitle": {
|
|
866
|
-
"value": "{colors.neutral.
|
|
867
|
-
"metadata": {
|
|
1084
|
+
"value": "{colors.neutral.300}",
|
|
1085
|
+
"metadata": {
|
|
1086
|
+
"pair": "modes.dark.component.testimonial.bg"
|
|
1087
|
+
}
|
|
868
1088
|
},
|
|
869
1089
|
"quoteMark": {
|
|
870
1090
|
"value": "{colors.neutral.600}",
|
|
@@ -874,7 +1094,9 @@ var coreTokens = {
|
|
|
874
1094
|
"pricingCard": {
|
|
875
1095
|
"bg": {
|
|
876
1096
|
"value": "{colors.neutral.800}",
|
|
877
|
-
"metadata": {
|
|
1097
|
+
"metadata": {
|
|
1098
|
+
"pair": "modes.dark.component.pricingCard.price"
|
|
1099
|
+
}
|
|
878
1100
|
},
|
|
879
1101
|
"border": {
|
|
880
1102
|
"value": "{colors.neutral.700}",
|
|
@@ -902,11 +1124,15 @@ var coreTokens = {
|
|
|
902
1124
|
},
|
|
903
1125
|
"price": {
|
|
904
1126
|
"value": "{colors.neutral.100}",
|
|
905
|
-
"metadata": {
|
|
1127
|
+
"metadata": {
|
|
1128
|
+
"pair": "modes.dark.component.pricingCard.bg"
|
|
1129
|
+
}
|
|
906
1130
|
},
|
|
907
1131
|
"priceDescription": {
|
|
908
|
-
"value": "{colors.neutral.
|
|
909
|
-
"metadata": {
|
|
1132
|
+
"value": "{colors.neutral.300}",
|
|
1133
|
+
"metadata": {
|
|
1134
|
+
"pair": "modes.dark.component.pricingCard.bg"
|
|
1135
|
+
}
|
|
910
1136
|
}
|
|
911
1137
|
},
|
|
912
1138
|
"rating": {
|
|
@@ -928,40 +1154,40 @@ var coreTokens = {
|
|
|
928
1154
|
},
|
|
929
1155
|
"colors": {
|
|
930
1156
|
"brand": {
|
|
931
|
-
"50": "#
|
|
932
|
-
"100": "#
|
|
933
|
-
"200": "#
|
|
934
|
-
"300": "#
|
|
935
|
-
"400": "#
|
|
936
|
-
"500": "#
|
|
937
|
-
"600": "#
|
|
938
|
-
"700": "#
|
|
939
|
-
"800": "#
|
|
940
|
-
"900": "#
|
|
1157
|
+
"50": "#eef4ff",
|
|
1158
|
+
"100": "#d9e7ff",
|
|
1159
|
+
"200": "#b9d2ff",
|
|
1160
|
+
"300": "#8ab6ff",
|
|
1161
|
+
"400": "#5a92ff",
|
|
1162
|
+
"500": "#336df4",
|
|
1163
|
+
"600": "#1f57db",
|
|
1164
|
+
"700": "#1946b4",
|
|
1165
|
+
"800": "#173b8f",
|
|
1166
|
+
"900": "#16336f"
|
|
941
1167
|
},
|
|
942
1168
|
"neutral": {
|
|
943
|
-
"50": "#
|
|
944
|
-
"100": "#
|
|
945
|
-
"200": "#
|
|
946
|
-
"300": "#
|
|
947
|
-
"400": "#
|
|
948
|
-
"500": "#
|
|
949
|
-
"600": "#
|
|
950
|
-
"700": "#
|
|
951
|
-
"800": "#
|
|
952
|
-
"900": "#
|
|
1169
|
+
"50": "#f7f8fb",
|
|
1170
|
+
"100": "#eef1f6",
|
|
1171
|
+
"200": "#d9dfeb",
|
|
1172
|
+
"300": "#b7c1d4",
|
|
1173
|
+
"400": "#8a96ad",
|
|
1174
|
+
"500": "#657287",
|
|
1175
|
+
"600": "#4b576a",
|
|
1176
|
+
"700": "#374253",
|
|
1177
|
+
"800": "#222b38",
|
|
1178
|
+
"900": "#141b24"
|
|
953
1179
|
},
|
|
954
1180
|
"accent": {
|
|
955
|
-
"50": "#
|
|
956
|
-
"100": "#
|
|
957
|
-
"200": "#
|
|
958
|
-
"300": "#
|
|
959
|
-
"400": "#
|
|
960
|
-
"500": "#
|
|
961
|
-
"600": "#
|
|
962
|
-
"700": "#
|
|
963
|
-
"800": "#
|
|
964
|
-
"900": "#
|
|
1181
|
+
"50": "#f6f2ff",
|
|
1182
|
+
"100": "#eee5ff",
|
|
1183
|
+
"200": "#ddccff",
|
|
1184
|
+
"300": "#c3a7ff",
|
|
1185
|
+
"400": "#a279ff",
|
|
1186
|
+
"500": "#854ff7",
|
|
1187
|
+
"600": "#7135dd",
|
|
1188
|
+
"700": "#5d28b8",
|
|
1189
|
+
"800": "#4d2393",
|
|
1190
|
+
"900": "#401f75"
|
|
965
1191
|
},
|
|
966
1192
|
"success": {
|
|
967
1193
|
"50": "#f0fdf4",
|
|
@@ -976,16 +1202,16 @@ var coreTokens = {
|
|
|
976
1202
|
"900": "#14532d"
|
|
977
1203
|
},
|
|
978
1204
|
"warning": {
|
|
979
|
-
"50": "#
|
|
980
|
-
"100": "#
|
|
981
|
-
"200": "#
|
|
982
|
-
"300": "#
|
|
983
|
-
"400": "#
|
|
984
|
-
"500": "#
|
|
985
|
-
"600": "#
|
|
986
|
-
"700": "#
|
|
987
|
-
"800": "#
|
|
988
|
-
"900": "#
|
|
1205
|
+
"50": "#fffbea",
|
|
1206
|
+
"100": "#fff1c2",
|
|
1207
|
+
"200": "#ffe08a",
|
|
1208
|
+
"300": "#ffd24d",
|
|
1209
|
+
"400": "#ffc21a",
|
|
1210
|
+
"500": "#f5ad00",
|
|
1211
|
+
"600": "#d48806",
|
|
1212
|
+
"700": "#ad6800",
|
|
1213
|
+
"800": "#8f5200",
|
|
1214
|
+
"900": "#734000"
|
|
989
1215
|
},
|
|
990
1216
|
"error": {
|
|
991
1217
|
"50": "#fef2f2",
|
|
@@ -1000,28 +1226,28 @@ var coreTokens = {
|
|
|
1000
1226
|
"900": "#7f1d1d"
|
|
1001
1227
|
},
|
|
1002
1228
|
"info": {
|
|
1003
|
-
"50": "#
|
|
1004
|
-
"100": "#
|
|
1005
|
-
"200": "#
|
|
1006
|
-
"300": "#
|
|
1007
|
-
"400": "#
|
|
1008
|
-
"500": "#
|
|
1009
|
-
"600": "#
|
|
1010
|
-
"700": "#
|
|
1011
|
-
"800": "#
|
|
1012
|
-
"900": "#
|
|
1229
|
+
"50": "#f0f9ff",
|
|
1230
|
+
"100": "#e0f2fe",
|
|
1231
|
+
"200": "#bae6fd",
|
|
1232
|
+
"300": "#7dd3fc",
|
|
1233
|
+
"400": "#38bdf8",
|
|
1234
|
+
"500": "#0ea5e9",
|
|
1235
|
+
"600": "#0369a1",
|
|
1236
|
+
"700": "#075985",
|
|
1237
|
+
"800": "#0c4a6e",
|
|
1238
|
+
"900": "#082f49"
|
|
1013
1239
|
},
|
|
1014
1240
|
"indigo": {
|
|
1015
|
-
"500": "#
|
|
1016
|
-
"600": "#
|
|
1241
|
+
"500": "#5b6ee1",
|
|
1242
|
+
"600": "#4d61db"
|
|
1017
1243
|
},
|
|
1018
1244
|
"violet": {
|
|
1019
|
-
"600": "#
|
|
1245
|
+
"600": "#6f3fd7"
|
|
1020
1246
|
},
|
|
1021
1247
|
"focus": {
|
|
1022
|
-
"primary": "#
|
|
1248
|
+
"primary": "#336df4",
|
|
1023
1249
|
"error": "#ef4444",
|
|
1024
|
-
"info": "#
|
|
1250
|
+
"info": "#0369a1"
|
|
1025
1251
|
},
|
|
1026
1252
|
"white": "#ffffff",
|
|
1027
1253
|
"black": "#000000"
|
|
@@ -1169,6 +1395,12 @@ var coreTokens = {
|
|
|
1169
1395
|
"card": "{colors.neutral.200}",
|
|
1170
1396
|
"input": "{colors.neutral.300}"
|
|
1171
1397
|
},
|
|
1398
|
+
"border": {
|
|
1399
|
+
"width": {
|
|
1400
|
+
"base": "1px",
|
|
1401
|
+
"thick": "2px"
|
|
1402
|
+
}
|
|
1403
|
+
},
|
|
1172
1404
|
"surface": {
|
|
1173
1405
|
"page": {
|
|
1174
1406
|
"value": "{colors.neutral.50}",
|
|
@@ -1228,7 +1460,8 @@ var coreTokens = {
|
|
|
1228
1460
|
"sm": "1rem",
|
|
1229
1461
|
"md": "1.5rem",
|
|
1230
1462
|
"lg": "2rem"
|
|
1231
|
-
}
|
|
1463
|
+
},
|
|
1464
|
+
"maxWidth": "72rem"
|
|
1232
1465
|
}
|
|
1233
1466
|
},
|
|
1234
1467
|
"font": {
|
|
@@ -1430,6 +1663,16 @@ var createCssVariableMap = (tokens2, options = {}) => {
|
|
|
1430
1663
|
assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
|
|
1431
1664
|
});
|
|
1432
1665
|
}
|
|
1666
|
+
const container = layout.container;
|
|
1667
|
+
if (container?.maxWidth) {
|
|
1668
|
+
assign(toVariableName(prefix, "layout", "container", "max-width"), container.maxWidth);
|
|
1669
|
+
}
|
|
1670
|
+
}
|
|
1671
|
+
const border = baseTokens.border;
|
|
1672
|
+
if (border?.width) {
|
|
1673
|
+
Object.entries(border.width).forEach(([key, value]) => {
|
|
1674
|
+
assign(toVariableName(prefix, "border", "width", key), value);
|
|
1675
|
+
});
|
|
1433
1676
|
}
|
|
1434
1677
|
Object.entries(baseTokens.radii).forEach(([key, value]) => {
|
|
1435
1678
|
assign(toVariableName(prefix, "radius", key), value);
|
|
@@ -1808,7 +2051,7 @@ var createTailwindTheme = (source = tokens) => {
|
|
|
1808
2051
|
return {
|
|
1809
2052
|
colors,
|
|
1810
2053
|
spacing: { ...source.space ?? {} },
|
|
1811
|
-
borderRadius: { ...source.radii },
|
|
2054
|
+
borderRadius: { ...source.radii ?? {} },
|
|
1812
2055
|
fontFamily,
|
|
1813
2056
|
fontSize,
|
|
1814
2057
|
boxShadow: { ...source.shadows },
|
|
@@ -1816,7 +2059,14 @@ var createTailwindTheme = (source = tokens) => {
|
|
|
1816
2059
|
zIndex: { ...source.zIndex },
|
|
1817
2060
|
transitionDuration: { ...source.transitions.duration },
|
|
1818
2061
|
transitionTimingFunction: { ...source.transitions.easing },
|
|
1819
|
-
opacity: { ...source.opacity }
|
|
2062
|
+
opacity: { ...source.opacity },
|
|
2063
|
+
maxWidth: {
|
|
2064
|
+
container: source.layout?.container?.maxWidth
|
|
2065
|
+
},
|
|
2066
|
+
borderWidth: {
|
|
2067
|
+
DEFAULT: source.border?.width.base,
|
|
2068
|
+
...source.border?.width ?? {}
|
|
2069
|
+
}
|
|
1820
2070
|
};
|
|
1821
2071
|
};
|
|
1822
2072
|
var tailwindTheme = createTailwindTheme(tokens);
|