@kajabi-ui/styles 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,812 @@
1
+ {
2
+ "border": {
3
+ "@": {
4
+ "value": {
5
+ "color": "{color.grey.300}",
6
+ "width": "{border-width.thin}",
7
+ "style": "solid"
8
+ },
9
+ "type": "border"
10
+ },
11
+ "hover": {
12
+ "value": {
13
+ "color": "{color.grey.400}",
14
+ "width": "{border-width.thin}",
15
+ "style": "solid"
16
+ },
17
+ "type": "border"
18
+ },
19
+ "none": {
20
+ "value": {
21
+ "color": "{color.grey.300}",
22
+ "width": "{border-width.none}",
23
+ "style": "solid"
24
+ },
25
+ "type": "border"
26
+ }
27
+ },
28
+ "border-radius": {
29
+ "full": {
30
+ "value": "9999px",
31
+ "type": "borderRadius",
32
+ "description": "this is to be used for rounded corners without specified dimensions"
33
+ }
34
+ },
35
+ "border-width": {
36
+ "@": {
37
+ "value": "{border-width.thin}",
38
+ "type": "borderWidth"
39
+ }
40
+ },
41
+ "box-shadow": {
42
+ "@": {
43
+ "value": "{box-shadow.100}",
44
+ "type": "boxShadow"
45
+ }
46
+ },
47
+ "color": {
48
+ "accent": {
49
+ "@": {
50
+ "value": "{color.purple.500}",
51
+ "type": "color"
52
+ },
53
+ "disabled": {
54
+ "value": "{color.purple.100}",
55
+ "type": "color"
56
+ },
57
+ "hover": {
58
+ "value": "{color.purple.600}",
59
+ "type": "color"
60
+ }
61
+ },
62
+ "background": {
63
+ "container": {
64
+ "@": {
65
+ "value": "{color.white}",
66
+ "type": "color"
67
+ },
68
+ "disabled": {
69
+ "value": "{color.grey.150}",
70
+ "type": "color"
71
+ },
72
+ "hover": {
73
+ "value": "{color.grey.050}",
74
+ "type": "color"
75
+ }
76
+ }
77
+ },
78
+ "border": {
79
+ "@": {
80
+ "value": "{color.grey.300}",
81
+ "type": "color"
82
+ },
83
+ "hover": {
84
+ "value": "{color.grey.400}",
85
+ "type": "color"
86
+ },
87
+ "disabled": {
88
+ "value": "{color.grey.200}",
89
+ "type": "color"
90
+ },
91
+ "active": {
92
+ "value": "{color.grey.400}",
93
+ "type": "color"
94
+ },
95
+ "danger": {
96
+ "@": {
97
+ "value": "{color.red.600}",
98
+ "type": "color"
99
+ },
100
+ "hover": {
101
+ "value": "{color.red.700}",
102
+ "type": "color"
103
+ }
104
+ }
105
+ },
106
+ "danger": {
107
+ "@": {
108
+ "value": "{color.red.600}",
109
+ "type": "color"
110
+ },
111
+ "disabled": {
112
+ "value": "{color.red.100}",
113
+ "type": "color"
114
+ },
115
+ "hover": {
116
+ "value": "{color.red.700}",
117
+ "type": "color"
118
+ }
119
+ },
120
+ "focus-ring": {
121
+ "@": {
122
+ "value": "{color.purple.300}",
123
+ "type": "color"
124
+ },
125
+ "danger": {
126
+ "value": "{color.red.300}",
127
+ "type": "color"
128
+ }
129
+ },
130
+ "info": {
131
+ "@": {
132
+ "value": "{color.blue.500}",
133
+ "type": "color"
134
+ },
135
+ "disabled": {
136
+ "value": "{color.blue.100}",
137
+ "type": "color"
138
+ },
139
+ "hover": {
140
+ "value": "{color.blue.600}",
141
+ "type": "color"
142
+ }
143
+ },
144
+ "neutral": {
145
+ "@": {
146
+ "value": "{color.grey.500}",
147
+ "type": "color"
148
+ },
149
+ "disabled": {
150
+ "value": "{color.grey.100}",
151
+ "type": "color"
152
+ },
153
+ "hover": {
154
+ "value": "{color.grey.600}",
155
+ "type": "color"
156
+ }
157
+ },
158
+ "primary": {
159
+ "@": {
160
+ "value": "{color.grey.900}",
161
+ "type": "color"
162
+ },
163
+ "disabled": {
164
+ "value": "{color.grey.150}",
165
+ "type": "color"
166
+ },
167
+ "hover": {
168
+ "value": "{color.grey.950}",
169
+ "type": "color"
170
+ }
171
+ },
172
+ "secondary": {
173
+ "@": {
174
+ "value": "{color.white}",
175
+ "type": "color"
176
+ },
177
+ "disabled": {
178
+ "value": "{color.white}",
179
+ "type": "color"
180
+ },
181
+ "hover": {
182
+ "value": "{color.grey.050}",
183
+ "type": "color"
184
+ }
185
+ },
186
+ "success": {
187
+ "@": {
188
+ "value": "{color.green.500}",
189
+ "type": "color"
190
+ },
191
+ "disabled": {
192
+ "value": "{color.green.100}",
193
+ "type": "color"
194
+ },
195
+ "hover": {
196
+ "value": "{color.green.600}",
197
+ "type": "color"
198
+ }
199
+ },
200
+ "text": {
201
+ "@": {
202
+ "value": "{color.grey.900}",
203
+ "type": "color"
204
+ },
205
+ "hover": {
206
+ "value": "{color.grey.950}",
207
+ "type": "color"
208
+ },
209
+ "disabled": {
210
+ "value": "{color.grey.500}",
211
+ "type": "color"
212
+ },
213
+ "readonly": {
214
+ "value": "{color.grey.700}",
215
+ "type": "color"
216
+ },
217
+ "active": {
218
+ "value": "{color.grey.950}",
219
+ "type": "color"
220
+ },
221
+ "accent": {
222
+ "@": {
223
+ "value": "{color.purple.900}",
224
+ "type": "color"
225
+ },
226
+ "disabled": {
227
+ "value": "{color.purple.300}",
228
+ "type": "color"
229
+ },
230
+ "hover": {
231
+ "value": "{color.purple.950}",
232
+ "type": "color"
233
+ }
234
+ },
235
+ "danger": {
236
+ "@": {
237
+ "value": "{color.red.900}",
238
+ "type": "color"
239
+ },
240
+ "disabled": {
241
+ "value": "{color.red.300}",
242
+ "type": "color"
243
+ },
244
+ "hover": {
245
+ "value": "{color.red.950}",
246
+ "type": "color"
247
+ }
248
+ },
249
+ "info": {
250
+ "@": {
251
+ "value": "{color.blue.900}",
252
+ "type": "color"
253
+ },
254
+ "disabled": {
255
+ "value": "{color.blue.300}",
256
+ "type": "color"
257
+ },
258
+ "hover": {
259
+ "value": "{color.blue.950}",
260
+ "type": "color"
261
+ }
262
+ },
263
+ "label": {
264
+ "@": {
265
+ "value": "{color.grey.950}",
266
+ "type": "color"
267
+ },
268
+ "disabled": {
269
+ "value": "{color.grey.500}",
270
+ "type": "color"
271
+ },
272
+ "readonly": {
273
+ "value": "{color.grey.700}",
274
+ "type": "color"
275
+ }
276
+ },
277
+ "message": {
278
+ "@": {
279
+ "value": "{color.grey.800}",
280
+ "type": "color"
281
+ },
282
+ "danger": {
283
+ "value": "{color.red.600}",
284
+ "type": "color"
285
+ },
286
+ "disabled": {
287
+ "value": "{color.grey.600}",
288
+ "type": "color"
289
+ }
290
+ },
291
+ "neutral": {
292
+ "@": {
293
+ "value": "{color.grey.900}",
294
+ "type": "color"
295
+ },
296
+ "disabled": {
297
+ "value": "{color.grey.600}",
298
+ "type": "color"
299
+ },
300
+ "hover": {
301
+ "value": "{color.grey.950}",
302
+ "type": "color"
303
+ }
304
+ },
305
+ "placeholder": {
306
+ "@": {
307
+ "value": "{color.grey.600}",
308
+ "type": "color"
309
+ },
310
+ "disabled": {
311
+ "value": "{color.grey.400}",
312
+ "type": "color"
313
+ }
314
+ },
315
+ "primary": {
316
+ "@": {
317
+ "value": "{color.white}",
318
+ "type": "color"
319
+ },
320
+ "disabled": {
321
+ "value": "{color.grey.400}",
322
+ "type": "color"
323
+ }
324
+ },
325
+ "secondary": {
326
+ "@": {
327
+ "value": "{color.grey.800}",
328
+ "type": "color"
329
+ },
330
+ "disabled": {
331
+ "value": "{color.grey.400}",
332
+ "type": "color"
333
+ },
334
+ "hover": {
335
+ "value": "{color.grey.900}",
336
+ "type": "color"
337
+ }
338
+ },
339
+ "success": {
340
+ "@": {
341
+ "value": "{color.green.900}",
342
+ "type": "color"
343
+ },
344
+ "disabled": {
345
+ "value": "{color.green.300}",
346
+ "type": "color"
347
+ },
348
+ "hover": {
349
+ "value": "{color.green.950}",
350
+ "type": "color"
351
+ }
352
+ },
353
+ "warning": {
354
+ "@": {
355
+ "value": "{color.yellow.900}",
356
+ "type": "color"
357
+ },
358
+ "disabled": {
359
+ "value": "{color.yellow.300}",
360
+ "type": "color"
361
+ },
362
+ "hover": {
363
+ "value": "{color.yellow.950}",
364
+ "type": "color"
365
+ }
366
+ }
367
+ },
368
+ "warning": {
369
+ "@": {
370
+ "value": "{color.yellow.500}",
371
+ "type": "color"
372
+ },
373
+ "disabled": {
374
+ "value": "{color.yellow.100}",
375
+ "type": "color"
376
+ },
377
+ "hover": {
378
+ "value": "{color.yellow.600}",
379
+ "type": "color"
380
+ }
381
+ },
382
+ "brand": {
383
+ "@": {
384
+ "value": "{color.black}",
385
+ "type": "color"
386
+ }
387
+ }
388
+ },
389
+ "font-size": {
390
+ "@": {
391
+ "value": "{font-size.100}",
392
+ "type": "fontSizes"
393
+ },
394
+ "body": {
395
+ "2xs": {
396
+ "value": "{font-size.057}",
397
+ "type": "fontSizes"
398
+ },
399
+ "xs": {
400
+ "value": "{font-size.071}",
401
+ "type": "fontSizes"
402
+ },
403
+ "sm": {
404
+ "value": "{font-size.085}",
405
+ "type": "fontSizes"
406
+ },
407
+ "md": {
408
+ "value": "{font-size.100}",
409
+ "type": "fontSizes"
410
+ },
411
+ "lg": {
412
+ "value": "{font-size.116}",
413
+ "type": "fontSizes"
414
+ },
415
+ "xl": {
416
+ "value": "{font-size.128}",
417
+ "type": "fontSizes"
418
+ },
419
+ "2xl": {
420
+ "value": "{font-size.142}",
421
+ "type": "fontSizes"
422
+ }
423
+ },
424
+ "heading": {
425
+ "1": {
426
+ "value": "{font-size.200}",
427
+ "type": "fontSizes"
428
+ },
429
+ "2": {
430
+ "value": "{font-size.185}",
431
+ "type": "fontSizes"
432
+ },
433
+ "3": {
434
+ "value": "{font-size.157}",
435
+ "type": "fontSizes"
436
+ },
437
+ "4": {
438
+ "value": "{font-size.142}",
439
+ "type": "fontSizes"
440
+ },
441
+ "5": {
442
+ "value": "{font-size.128}",
443
+ "type": "fontSizes"
444
+ },
445
+ "6": {
446
+ "value": "{font-size.116}",
447
+ "type": "fontSizes"
448
+ },
449
+ "caption": {
450
+ "value": "{font-size.085}",
451
+ "type": "fontSizes"
452
+ }
453
+ }
454
+ },
455
+ "font-weight": {
456
+ "thin": {
457
+ "value": "{font-weight.100}",
458
+ "type": "fontWeights"
459
+ },
460
+ "extra-light": {
461
+ "value": "{font-weight.200}",
462
+ "type": "fontWeights"
463
+ },
464
+ "light": {
465
+ "value": "{font-weight.300}",
466
+ "type": "fontWeights"
467
+ },
468
+ "regular": {
469
+ "value": "{font-weight.400}",
470
+ "type": "fontWeights"
471
+ },
472
+ "medium": {
473
+ "value": "{font-weight.500}",
474
+ "type": "fontWeights"
475
+ },
476
+ "semi-bold": {
477
+ "value": "{font-weight.600}",
478
+ "type": "fontWeights"
479
+ },
480
+ "bold": {
481
+ "value": "{font-weight.700}",
482
+ "type": "fontWeights"
483
+ },
484
+ "extra-bold": {
485
+ "value": "{font-weight.800}",
486
+ "type": "fontWeights"
487
+ },
488
+ "heavy": {
489
+ "value": "{font-weight.900}",
490
+ "type": "fontWeights"
491
+ },
492
+ "text-message": {
493
+ "value": "{font-weight.400}",
494
+ "type": "fontWeights"
495
+ }
496
+ },
497
+ "letter-spacing": {
498
+ "@": {
499
+ "value": "{letter-spacing.114} * -1",
500
+ "type": "letterSpacing"
501
+ },
502
+ "heading": {
503
+ "1": {
504
+ "value": "{letter-spacing.185}",
505
+ "type": "letterSpacing"
506
+ },
507
+ "2": {
508
+ "value": "{letter-spacing.171}",
509
+ "type": "letterSpacing"
510
+ },
511
+ "3": {
512
+ "value": "{letter-spacing.157}",
513
+ "type": "letterSpacing"
514
+ },
515
+ "4": {
516
+ "value": "{letter-spacing.142}",
517
+ "type": "letterSpacing"
518
+ },
519
+ "5": {
520
+ "value": "{letter-spacing.128}",
521
+ "type": "letterSpacing"
522
+ },
523
+ "6": {
524
+ "value": "{letter-spacing.114}",
525
+ "type": "letterSpacing"
526
+ }
527
+ }
528
+ },
529
+ "line-height": {
530
+ "text-message": {
531
+ "value": "{line-height.125}",
532
+ "type": "lineHeights"
533
+ },
534
+ "heading": {
535
+ "value": "{line-height.125}",
536
+ "type": "lineHeights"
537
+ },
538
+ "body": {
539
+ "value": "{line-height.100} * 1.425",
540
+ "type": "lineHeights"
541
+ }
542
+ },
543
+ "typography": {
544
+ "heading": {
545
+ "1": {
546
+ "value": {
547
+ "fontFamily": "{font-family.greet}",
548
+ "fontWeight": "{font-weight.semi-bold}",
549
+ "fontSize": "{font-size.heading.1}",
550
+ "lineHeight": "{line-height.heading} * 100%",
551
+ "letterSpacing": "{letter-spacing.185}"
552
+ },
553
+ "type": "typography"
554
+ },
555
+ "2": {
556
+ "value": {
557
+ "fontFamily": "{font-family.greet}",
558
+ "fontWeight": "{font-weight.semi-bold}",
559
+ "fontSize": "{font-size.heading.2}",
560
+ "lineHeight": "{line-height.heading} * 100%",
561
+ "letterSpacing": "{letter-spacing.171}"
562
+ },
563
+ "type": "typography"
564
+ },
565
+ "3": {
566
+ "value": {
567
+ "fontFamily": "{font-family.greet}",
568
+ "fontWeight": "{font-weight.semi-bold}",
569
+ "lineHeight": "{line-height.heading} * 100%",
570
+ "letterSpacing": "{letter-spacing.157}",
571
+ "fontSize": "{font-size.heading.3}"
572
+ },
573
+ "type": "typography"
574
+ },
575
+ "4": {
576
+ "value": {
577
+ "fontFamily": "{font-family.greet}",
578
+ "fontWeight": "{font-weight.semi-bold}",
579
+ "fontSize": "{font-size.heading.4}",
580
+ "lineHeight": "{line-height.heading} * 100%",
581
+ "letterSpacing": "{letter-spacing.142}"
582
+ },
583
+ "type": "typography"
584
+ },
585
+ "5": {
586
+ "value": {
587
+ "fontFamily": "{font-family.greet}",
588
+ "fontWeight": "{font-weight.medium}",
589
+ "fontSize": "{font-size.heading.5}",
590
+ "lineHeight": "{line-height.heading} * 100%",
591
+ "letterSpacing": "{letter-spacing.128}"
592
+ },
593
+ "type": "typography"
594
+ },
595
+ "6": {
596
+ "value": {
597
+ "fontFamily": "{font-family.greet}",
598
+ "fontWeight": "{font-weight.medium}",
599
+ "fontSize": "{font-size.heading.6}",
600
+ "lineHeight": "{line-height.heading} * 100%",
601
+ "letterSpacing": "{letter-spacing.114}"
602
+ },
603
+ "type": "typography"
604
+ },
605
+ "caption": {
606
+ "value": {
607
+ "fontFamily": "{font-family.greet}",
608
+ "fontWeight": "{font-weight.semi-bold}",
609
+ "fontSize": "{font-size.heading.caption}",
610
+ "lineHeight": "{line-height.heading} * 100%",
611
+ "letterSpacing": "0.8px"
612
+ },
613
+ "type": "typography"
614
+ }
615
+ },
616
+ "body": {
617
+ "@": {
618
+ "value": {
619
+ "fontFamily": "{font-family.inter}",
620
+ "fontWeight": "{font-weight.regular}",
621
+ "fontSize": "{font-size.body.md}",
622
+ "lineHeight": "{line-height.body} * 100%",
623
+ "letterSpacing": "{letter-spacing.@}"
624
+ },
625
+ "type": "typography"
626
+ },
627
+ "medium": {
628
+ "value": {
629
+ "fontFamily": "{font-family.inter}",
630
+ "fontWeight": "{font-weight.medium}",
631
+ "fontSize": "{font-size.body.md}",
632
+ "lineHeight": "{line-height.body} * 100%",
633
+ "letterSpacing": "{letter-spacing.@}"
634
+ },
635
+ "type": "typography"
636
+ },
637
+ "mono": {
638
+ "value": {
639
+ "fontFamily": "monospace",
640
+ "fontWeight": "{font-weight.medium}",
641
+ "fontSize": "{font-size.body.md}",
642
+ "lineHeight": "{line-height.body} * 100%"
643
+ },
644
+ "type": "typography"
645
+ },
646
+ "semi-bold": {
647
+ "value": {
648
+ "fontFamily": "{font-family.inter}",
649
+ "fontWeight": "{font-weight.semi-bold}",
650
+ "fontSize": "{font-size.body.md}",
651
+ "lineHeight": "{line-height.body} * 100%",
652
+ "letterSpacing": "{letter-spacing.@}"
653
+ },
654
+ "type": "typography"
655
+ },
656
+ "bold": {
657
+ "value": {
658
+ "fontFamily": "{font-family.inter}",
659
+ "fontWeight": "{font-weight.bold}",
660
+ "fontSize": "{font-size.body.md}",
661
+ "lineHeight": "{line-height.body} * 100%",
662
+ "letterSpacing": "{letter-spacing.@}"
663
+ },
664
+ "type": "typography"
665
+ },
666
+ "brand-label": {
667
+ "value": {
668
+ "fontFamily": "{font-family.greet}",
669
+ "fontWeight": "{font-weight.medium}",
670
+ "fontSize": "{font-size.body.md}",
671
+ "lineHeight": "{line-height.body} * 100%"
672
+ },
673
+ "type": "typography",
674
+ "description": "brand-label"
675
+ },
676
+ "brand-text": {
677
+ "value": {
678
+ "fontFamily": "{font-family.faire-sprig}",
679
+ "fontWeight": "{font-weight.medium}",
680
+ "fontSize": "{font-size.body.md}",
681
+ "lineHeight": "{line-height.body} * 100%"
682
+ },
683
+ "type": "typography",
684
+ "description": "brand-text"
685
+ }
686
+ },
687
+ "body-sm": {
688
+ "@": {
689
+ "value": {
690
+ "fontFamily": "{font-family.inter}",
691
+ "fontWeight": "{font-weight.regular}",
692
+ "fontSize": "{font-size.body.sm}",
693
+ "lineHeight": "{line-height.body} * 100%"
694
+ },
695
+ "type": "typography"
696
+ },
697
+ "medium": {
698
+ "value": {
699
+ "fontFamily": "{font-family.inter}",
700
+ "fontWeight": "{font-weight.medium}",
701
+ "fontSize": "{font-size.body.sm}",
702
+ "lineHeight": "{line-height.body} * 100%"
703
+ },
704
+ "type": "typography"
705
+ },
706
+ "mono": {
707
+ "value": {
708
+ "fontFamily": "monospace",
709
+ "fontWeight": "{font-weight.medium}",
710
+ "fontSize": "{font-size.body.sm}",
711
+ "lineHeight": "{line-height.body} * 100%"
712
+ },
713
+ "type": "typography"
714
+ },
715
+ "bold": {
716
+ "value": {
717
+ "fontFamily": "{font-family.inter}",
718
+ "fontWeight": "{font-weight.bold}",
719
+ "fontSize": "{font-size.body.sm}",
720
+ "lineHeight": "{line-height.body} * 100%"
721
+ },
722
+ "type": "typography"
723
+ },
724
+ "brand-label": {
725
+ "value": {
726
+ "fontFamily": "{font-family.greet}",
727
+ "fontWeight": "{font-weight.medium}",
728
+ "fontSize": "{font-size.body.sm}",
729
+ "lineHeight": "{line-height.body} * 100%"
730
+ },
731
+ "type": "typography",
732
+ "description": "brand-label"
733
+ },
734
+ "brand-text": {
735
+ "value": {
736
+ "fontFamily": "{font-family.faire-sprig}",
737
+ "fontWeight": "{font-weight.medium}",
738
+ "fontSize": "{font-size.body.sm}",
739
+ "lineHeight": "{line-height.body} * 100%"
740
+ },
741
+ "type": "typography",
742
+ "description": "brand-text"
743
+ }
744
+ }
745
+ },
746
+ "dimension": {
747
+ "none": {
748
+ "value": "{dimension.0}",
749
+ "type": "dimension"
750
+ },
751
+ "2xs": {
752
+ "value": "{dimension.050}",
753
+ "type": "dimension"
754
+ },
755
+ "xs": {
756
+ "value": "{dimension.100}",
757
+ "type": "dimension"
758
+ },
759
+ "sm": {
760
+ "value": "{dimension.200}",
761
+ "type": "dimension"
762
+ },
763
+ "md": {
764
+ "value": "{dimension.300}",
765
+ "type": "dimension"
766
+ },
767
+ "lg": {
768
+ "value": "{dimension.400}",
769
+ "type": "dimension"
770
+ },
771
+ "xl": {
772
+ "value": "{dimension.500}",
773
+ "type": "dimension"
774
+ },
775
+ "2xl": {
776
+ "value": "{dimension.600}",
777
+ "type": "dimension"
778
+ }
779
+ },
780
+ "font-family": {
781
+ "heading": {
782
+ "value": "{font-family.greet}",
783
+ "type": "fontFamilies"
784
+ },
785
+ "body": {
786
+ "value": "{font-family.inter}",
787
+ "type": "fontFamilies"
788
+ }
789
+ },
790
+ "outline": {
791
+ "focus": {
792
+ "@": {
793
+ "value": {
794
+ "width": "{border-width.thick}",
795
+ "style": "solid",
796
+ "color": "{color.focus-ring.@}"
797
+ },
798
+ "type": "border",
799
+ "description": "Default focus ring"
800
+ },
801
+ "danger": {
802
+ "value": {
803
+ "color": "{color.focus-ring.danger}",
804
+ "style": "solid",
805
+ "width": "{border-width.thick}"
806
+ },
807
+ "type": "border",
808
+ "description": "Focus ring for danger/invalid states"
809
+ }
810
+ }
811
+ }
812
+ }