@kajabi-ui/styles 0.3.0 → 0.3.2-0

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.
@@ -1,870 +0,0 @@
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
- "app": {
78
- "@": {
79
- "value": "{color.grey.100}",
80
- "type": "color"
81
- }
82
- }
83
- },
84
- "border": {
85
- "@": {
86
- "value": "{color.grey.300}",
87
- "type": "color"
88
- },
89
- "hover": {
90
- "value": "{color.grey.400}",
91
- "type": "color"
92
- },
93
- "disabled": {
94
- "value": "{color.grey.200}",
95
- "type": "color"
96
- },
97
- "active": {
98
- "value": "{color.grey.400}",
99
- "type": "color"
100
- },
101
- "danger": {
102
- "@": {
103
- "value": "{color.red.600}",
104
- "type": "color"
105
- },
106
- "hover": {
107
- "value": "{color.red.700}",
108
- "type": "color"
109
- }
110
- }
111
- },
112
- "danger": {
113
- "@": {
114
- "value": "{color.red.600}",
115
- "type": "color"
116
- },
117
- "disabled": {
118
- "value": "{color.red.100}",
119
- "type": "color"
120
- },
121
- "hover": {
122
- "value": "{color.red.700}",
123
- "type": "color"
124
- }
125
- },
126
- "focus-ring": {
127
- "@": {
128
- "value": "{color.purple.300}",
129
- "type": "color"
130
- },
131
- "danger": {
132
- "value": "{color.red.300}",
133
- "type": "color"
134
- }
135
- },
136
- "info": {
137
- "@": {
138
- "value": "{color.blue.500}",
139
- "type": "color"
140
- },
141
- "disabled": {
142
- "value": "{color.blue.100}",
143
- "type": "color"
144
- },
145
- "hover": {
146
- "value": "{color.blue.600}",
147
- "type": "color"
148
- }
149
- },
150
- "neutral": {
151
- "@": {
152
- "value": "{color.grey.500}",
153
- "type": "color"
154
- },
155
- "disabled": {
156
- "value": "{color.grey.100}",
157
- "type": "color"
158
- },
159
- "hover": {
160
- "value": "{color.grey.600}",
161
- "type": "color"
162
- }
163
- },
164
- "primary": {
165
- "@": {
166
- "value": "{color.grey.900}",
167
- "type": "color"
168
- },
169
- "disabled": {
170
- "value": "{color.grey.150}",
171
- "type": "color"
172
- },
173
- "hover": {
174
- "value": "{color.grey.950}",
175
- "type": "color"
176
- }
177
- },
178
- "secondary": {
179
- "@": {
180
- "value": "{color.white}",
181
- "type": "color"
182
- },
183
- "disabled": {
184
- "value": "{color.white}",
185
- "type": "color"
186
- },
187
- "hover": {
188
- "value": "{color.grey.050}",
189
- "type": "color"
190
- }
191
- },
192
- "success": {
193
- "@": {
194
- "value": "{color.green.500}",
195
- "type": "color"
196
- },
197
- "disabled": {
198
- "value": "{color.green.100}",
199
- "type": "color"
200
- },
201
- "hover": {
202
- "value": "{color.green.600}",
203
- "type": "color"
204
- }
205
- },
206
- "text": {
207
- "@": {
208
- "value": "{color.grey.900}",
209
- "type": "color"
210
- },
211
- "hover": {
212
- "value": "{color.grey.950}",
213
- "type": "color"
214
- },
215
- "disabled": {
216
- "value": "{color.grey.500}",
217
- "type": "color"
218
- },
219
- "readonly": {
220
- "value": "{color.grey.700}",
221
- "type": "color"
222
- },
223
- "active": {
224
- "value": "{color.grey.950}",
225
- "type": "color"
226
- },
227
- "accent": {
228
- "@": {
229
- "value": "{color.purple.900}",
230
- "type": "color"
231
- },
232
- "disabled": {
233
- "value": "{color.purple.300}",
234
- "type": "color"
235
- },
236
- "hover": {
237
- "value": "{color.purple.950}",
238
- "type": "color"
239
- }
240
- },
241
- "danger": {
242
- "@": {
243
- "value": "{color.red.900}",
244
- "type": "color"
245
- },
246
- "disabled": {
247
- "value": "{color.red.300}",
248
- "type": "color"
249
- },
250
- "hover": {
251
- "value": "{color.red.950}",
252
- "type": "color"
253
- }
254
- },
255
- "info": {
256
- "@": {
257
- "value": "{color.blue.900}",
258
- "type": "color"
259
- },
260
- "disabled": {
261
- "value": "{color.blue.300}",
262
- "type": "color"
263
- },
264
- "hover": {
265
- "value": "{color.blue.950}",
266
- "type": "color"
267
- }
268
- },
269
- "label": {
270
- "@": {
271
- "value": "{color.grey.950}",
272
- "type": "color"
273
- },
274
- "disabled": {
275
- "value": "{color.grey.500}",
276
- "type": "color"
277
- },
278
- "readonly": {
279
- "value": "{color.grey.700}",
280
- "type": "color"
281
- }
282
- },
283
- "message": {
284
- "@": {
285
- "value": "{color.grey.800}",
286
- "type": "color"
287
- },
288
- "danger": {
289
- "value": "{color.red.600}",
290
- "type": "color"
291
- },
292
- "disabled": {
293
- "value": "{color.grey.600}",
294
- "type": "color"
295
- }
296
- },
297
- "neutral": {
298
- "@": {
299
- "value": "{color.grey.900}",
300
- "type": "color"
301
- },
302
- "disabled": {
303
- "value": "{color.grey.600}",
304
- "type": "color"
305
- },
306
- "hover": {
307
- "value": "{color.grey.950}",
308
- "type": "color"
309
- }
310
- },
311
- "placeholder": {
312
- "@": {
313
- "value": "{color.grey.600}",
314
- "type": "color"
315
- },
316
- "disabled": {
317
- "value": "{color.grey.400}",
318
- "type": "color"
319
- }
320
- },
321
- "primary": {
322
- "@": {
323
- "value": "{color.white}",
324
- "type": "color"
325
- },
326
- "disabled": {
327
- "value": "{color.grey.400}",
328
- "type": "color"
329
- }
330
- },
331
- "secondary": {
332
- "@": {
333
- "value": "{color.grey.800}",
334
- "type": "color"
335
- },
336
- "disabled": {
337
- "value": "{color.grey.400}",
338
- "type": "color"
339
- },
340
- "hover": {
341
- "value": "{color.grey.900}",
342
- "type": "color"
343
- }
344
- },
345
- "success": {
346
- "@": {
347
- "value": "{color.green.900}",
348
- "type": "color"
349
- },
350
- "disabled": {
351
- "value": "{color.green.300}",
352
- "type": "color"
353
- },
354
- "hover": {
355
- "value": "{color.green.950}",
356
- "type": "color"
357
- }
358
- },
359
- "warning": {
360
- "@": {
361
- "value": "{color.yellow.900}",
362
- "type": "color"
363
- },
364
- "disabled": {
365
- "value": "{color.yellow.300}",
366
- "type": "color"
367
- },
368
- "hover": {
369
- "value": "{color.yellow.950}",
370
- "type": "color"
371
- }
372
- }
373
- },
374
- "warning": {
375
- "@": {
376
- "value": "{color.yellow.500}",
377
- "type": "color"
378
- },
379
- "disabled": {
380
- "value": "{color.yellow.100}",
381
- "type": "color"
382
- },
383
- "hover": {
384
- "value": "{color.yellow.600}",
385
- "type": "color"
386
- }
387
- },
388
- "brand": {
389
- "@": {
390
- "value": "{color.black}",
391
- "type": "color"
392
- }
393
- }
394
- },
395
- "font-size": {
396
- "@": {
397
- "value": "{font-size.100}",
398
- "type": "fontSizes"
399
- },
400
- "body": {
401
- "2xs": {
402
- "value": "{font-size.057}",
403
- "type": "fontSizes"
404
- },
405
- "xs": {
406
- "value": "{font-size.071}",
407
- "type": "fontSizes"
408
- },
409
- "sm": {
410
- "value": "{font-size.085}",
411
- "type": "fontSizes"
412
- },
413
- "md": {
414
- "value": "{font-size.100}",
415
- "type": "fontSizes"
416
- },
417
- "lg": {
418
- "value": "{font-size.116}",
419
- "type": "fontSizes"
420
- },
421
- "xl": {
422
- "value": "{font-size.128}",
423
- "type": "fontSizes"
424
- },
425
- "2xl": {
426
- "value": "{font-size.142}",
427
- "type": "fontSizes"
428
- }
429
- },
430
- "heading": {
431
- "1": {
432
- "value": "{font-size.200}",
433
- "type": "fontSizes"
434
- },
435
- "2": {
436
- "value": "{font-size.185}",
437
- "type": "fontSizes"
438
- },
439
- "3": {
440
- "value": "{font-size.157}",
441
- "type": "fontSizes"
442
- },
443
- "4": {
444
- "value": "{font-size.142}",
445
- "type": "fontSizes"
446
- },
447
- "5": {
448
- "value": "{font-size.128}",
449
- "type": "fontSizes"
450
- },
451
- "6": {
452
- "value": "{font-size.116}",
453
- "type": "fontSizes"
454
- },
455
- "caption": {
456
- "value": "{font-size.085}",
457
- "type": "fontSizes"
458
- }
459
- }
460
- },
461
- "font-weight": {
462
- "thin": {
463
- "value": "{font-weight.100}",
464
- "type": "fontWeights"
465
- },
466
- "extra-light": {
467
- "value": "{font-weight.200}",
468
- "type": "fontWeights"
469
- },
470
- "light": {
471
- "value": "{font-weight.300}",
472
- "type": "fontWeights"
473
- },
474
- "regular": {
475
- "value": "{font-weight.400}",
476
- "type": "fontWeights"
477
- },
478
- "medium": {
479
- "value": "{font-weight.500}",
480
- "type": "fontWeights"
481
- },
482
- "semi-bold": {
483
- "value": "{font-weight.600}",
484
- "type": "fontWeights"
485
- },
486
- "bold": {
487
- "value": "{font-weight.700}",
488
- "type": "fontWeights"
489
- },
490
- "extra-bold": {
491
- "value": "{font-weight.800}",
492
- "type": "fontWeights"
493
- },
494
- "heavy": {
495
- "value": "{font-weight.900}",
496
- "type": "fontWeights"
497
- },
498
- "text-message": {
499
- "value": "{font-weight.400}",
500
- "type": "fontWeights"
501
- }
502
- },
503
- "letter-spacing": {
504
- "@": {
505
- "value": "{letter-spacing.114} * -1",
506
- "type": "letterSpacing"
507
- },
508
- "heading": {
509
- "1": {
510
- "value": "{letter-spacing.185}",
511
- "type": "letterSpacing"
512
- },
513
- "2": {
514
- "value": "{letter-spacing.171}",
515
- "type": "letterSpacing"
516
- },
517
- "3": {
518
- "value": "{letter-spacing.157}",
519
- "type": "letterSpacing"
520
- },
521
- "4": {
522
- "value": "{letter-spacing.142}",
523
- "type": "letterSpacing"
524
- },
525
- "5": {
526
- "value": "{letter-spacing.128}",
527
- "type": "letterSpacing"
528
- },
529
- "6": {
530
- "value": "{letter-spacing.114}",
531
- "type": "letterSpacing"
532
- }
533
- }
534
- },
535
- "line-height": {
536
- "text-message": {
537
- "value": "{line-height.125}",
538
- "type": "lineHeights"
539
- },
540
- "heading": {
541
- "value": "{line-height.125}",
542
- "type": "lineHeights"
543
- },
544
- "body": {
545
- "value": "1.425",
546
- "type": "lineHeights"
547
- }
548
- },
549
- "typography": {
550
- "heading": {
551
- "1": {
552
- "value": {
553
- "fontFamily": "{font-family.greet}",
554
- "fontWeight": "{font-weight.semi-bold}",
555
- "fontSize": "{font-size.heading.1}",
556
- "lineHeight": "{line-height.heading} * 100%",
557
- "letterSpacing": "{letter-spacing.185}"
558
- },
559
- "type": "typography"
560
- },
561
- "2": {
562
- "value": {
563
- "fontFamily": "{font-family.greet}",
564
- "fontWeight": "{font-weight.semi-bold}",
565
- "fontSize": "{font-size.heading.2}",
566
- "lineHeight": "{line-height.heading} * 100%",
567
- "letterSpacing": "{letter-spacing.171}"
568
- },
569
- "type": "typography"
570
- },
571
- "3": {
572
- "value": {
573
- "fontFamily": "{font-family.greet}",
574
- "fontWeight": "{font-weight.semi-bold}",
575
- "lineHeight": "{line-height.heading} * 100%",
576
- "letterSpacing": "{letter-spacing.157}",
577
- "fontSize": "{font-size.heading.3}"
578
- },
579
- "type": "typography"
580
- },
581
- "4": {
582
- "value": {
583
- "fontFamily": "{font-family.greet}",
584
- "fontWeight": "{font-weight.semi-bold}",
585
- "fontSize": "{font-size.heading.4}",
586
- "lineHeight": "{line-height.heading} * 100%",
587
- "letterSpacing": "{letter-spacing.142}"
588
- },
589
- "type": "typography"
590
- },
591
- "5": {
592
- "value": {
593
- "fontFamily": "{font-family.greet}",
594
- "fontWeight": "{font-weight.medium}",
595
- "fontSize": "{font-size.heading.5}",
596
- "lineHeight": "{line-height.heading} * 100%",
597
- "letterSpacing": "{letter-spacing.128}"
598
- },
599
- "type": "typography"
600
- },
601
- "6": {
602
- "value": {
603
- "fontFamily": "{font-family.greet}",
604
- "fontWeight": "{font-weight.medium}",
605
- "fontSize": "{font-size.heading.6}",
606
- "lineHeight": "{line-height.heading} * 100%",
607
- "letterSpacing": "{letter-spacing.114}"
608
- },
609
- "type": "typography"
610
- },
611
- "caption": {
612
- "value": {
613
- "fontFamily": "{font-family.greet}",
614
- "fontWeight": "{font-weight.semi-bold}",
615
- "fontSize": "{font-size.heading.caption}",
616
- "lineHeight": "{line-height.heading} * 100%",
617
- "letterSpacing": "0.8px"
618
- },
619
- "type": "typography"
620
- }
621
- },
622
- "body": {
623
- "@": {
624
- "value": {
625
- "fontFamily": "{font-family.inter}",
626
- "fontWeight": "{font-weight.regular}",
627
- "fontSize": "{font-size.body.md}",
628
- "lineHeight": "{line-height.body} * 100%",
629
- "letterSpacing": "{letter-spacing.@}"
630
- },
631
- "type": "typography"
632
- },
633
- "medium": {
634
- "value": {
635
- "fontFamily": "{font-family.inter}",
636
- "fontWeight": "{font-weight.medium}",
637
- "fontSize": "{font-size.body.md}",
638
- "lineHeight": "{line-height.body} * 100%",
639
- "letterSpacing": "{letter-spacing.@}"
640
- },
641
- "type": "typography"
642
- },
643
- "mono": {
644
- "value": {
645
- "fontFamily": "monospace",
646
- "fontWeight": "{font-weight.medium}",
647
- "fontSize": "{font-size.body.md}",
648
- "lineHeight": "{line-height.body} * 100%"
649
- },
650
- "type": "typography"
651
- },
652
- "semi-bold": {
653
- "value": {
654
- "fontFamily": "{font-family.inter}",
655
- "fontWeight": "{font-weight.semi-bold}",
656
- "fontSize": "{font-size.body.md}",
657
- "lineHeight": "{line-height.body} * 100%",
658
- "letterSpacing": "{letter-spacing.@}"
659
- },
660
- "type": "typography"
661
- },
662
- "bold": {
663
- "value": {
664
- "fontFamily": "{font-family.inter}",
665
- "fontWeight": "{font-weight.bold}",
666
- "fontSize": "{font-size.body.md}",
667
- "lineHeight": "{line-height.body} * 100%",
668
- "letterSpacing": "{letter-spacing.@}"
669
- },
670
- "type": "typography"
671
- },
672
- "brand-label": {
673
- "value": {
674
- "fontFamily": "{font-family.greet}",
675
- "fontWeight": "{font-weight.medium}",
676
- "fontSize": "{font-size.body.md}",
677
- "lineHeight": "{line-height.body} * 100%"
678
- },
679
- "type": "typography",
680
- "description": "brand-label"
681
- },
682
- "brand-text": {
683
- "value": {
684
- "fontFamily": "{font-family.faire-sprig}",
685
- "fontWeight": "{font-weight.medium}",
686
- "fontSize": "{font-size.body.md}",
687
- "lineHeight": "{line-height.body} * 100%"
688
- },
689
- "type": "typography",
690
- "description": "brand-text"
691
- }
692
- },
693
- "body-sm": {
694
- "@": {
695
- "value": {
696
- "fontFamily": "{font-family.inter}",
697
- "fontWeight": "{font-weight.regular}",
698
- "fontSize": "{font-size.body.sm}",
699
- "lineHeight": "{line-height.body} * 100%"
700
- },
701
- "type": "typography"
702
- },
703
- "medium": {
704
- "value": {
705
- "fontFamily": "{font-family.inter}",
706
- "fontWeight": "{font-weight.medium}",
707
- "fontSize": "{font-size.body.sm}",
708
- "lineHeight": "{line-height.body} * 100%"
709
- },
710
- "type": "typography"
711
- },
712
- "mono": {
713
- "value": {
714
- "fontFamily": "monospace",
715
- "fontWeight": "{font-weight.medium}",
716
- "fontSize": "{font-size.body.sm}",
717
- "lineHeight": "{line-height.body} * 100%"
718
- },
719
- "type": "typography"
720
- },
721
- "bold": {
722
- "value": {
723
- "fontFamily": "{font-family.inter}",
724
- "fontWeight": "{font-weight.bold}",
725
- "fontSize": "{font-size.body.sm}",
726
- "lineHeight": "{line-height.body} * 100%"
727
- },
728
- "type": "typography"
729
- },
730
- "brand-label": {
731
- "value": {
732
- "fontFamily": "{font-family.greet}",
733
- "fontWeight": "{font-weight.medium}",
734
- "fontSize": "{font-size.body.sm}",
735
- "lineHeight": "{line-height.body} * 100%"
736
- },
737
- "type": "typography",
738
- "description": "brand-label"
739
- },
740
- "brand-text": {
741
- "value": {
742
- "fontFamily": "{font-family.faire-sprig}",
743
- "fontWeight": "{font-weight.medium}",
744
- "fontSize": "{font-size.body.sm}",
745
- "lineHeight": "{line-height.body} * 100%"
746
- },
747
- "type": "typography",
748
- "description": "brand-text"
749
- }
750
- }
751
- },
752
- "dimension": {
753
- "none": {
754
- "value": "{dimension.0}",
755
- "type": "dimension"
756
- },
757
- "2xs": {
758
- "value": "{dimension.050}",
759
- "type": "dimension"
760
- },
761
- "xs": {
762
- "value": "{dimension.100}",
763
- "type": "dimension"
764
- },
765
- "sm": {
766
- "value": "{dimension.200}",
767
- "type": "dimension"
768
- },
769
- "md": {
770
- "value": "{dimension.300}",
771
- "type": "dimension"
772
- },
773
- "lg": {
774
- "value": "{dimension.400}",
775
- "type": "dimension"
776
- },
777
- "xl": {
778
- "value": "{dimension.500}",
779
- "type": "dimension"
780
- },
781
- "2xl": {
782
- "value": "{dimension.600}",
783
- "type": "dimension"
784
- }
785
- },
786
- "font-family": {
787
- "heading": {
788
- "value": "{font-family.greet}",
789
- "type": "fontFamilies"
790
- },
791
- "body": {
792
- "value": "{font-family.inter}",
793
- "type": "fontFamilies"
794
- }
795
- },
796
- "outline": {
797
- "focus": {
798
- "@": {
799
- "value": {
800
- "width": "{border-width.thick}",
801
- "style": "solid",
802
- "color": "{color.focus-ring.@}"
803
- },
804
- "type": "border",
805
- "description": "Default focus ring"
806
- },
807
- "danger": {
808
- "value": {
809
- "color": "{color.focus-ring.danger}",
810
- "style": "solid",
811
- "width": "{border-width.thick}"
812
- },
813
- "type": "border",
814
- "description": "Focus ring for danger/invalid states"
815
- }
816
- }
817
- },
818
- "z-index": {
819
- "@": {
820
- "value": "{z-index.0}",
821
- "type": "other",
822
- "description": "Default stacking order"
823
- },
824
- "hide": {
825
- "value": "{z-index.n1}",
826
- "type": "other",
827
- "description": "Hidden behind other elements"
828
- },
829
- "raised": {
830
- "value": "{z-index.1}",
831
- "type": "other",
832
- "description": "Slightly raised above normal content"
833
- },
834
- "alert": {
835
- "value": "{z-index.2}",
836
- "type": "other",
837
- "description": "Alert messages and notifications"
838
- },
839
- "underlay": {
840
- "value": "{z-index.3}",
841
- "type": "other",
842
- "description": "Background overlays and backdrops"
843
- },
844
- "navigation": {
845
- "value": "{z-index.4}",
846
- "type": "other",
847
- "description": "Navigation elements like headers and sidebars"
848
- },
849
- "overlay": {
850
- "value": "{z-index.5}",
851
- "type": "other",
852
- "description": "Overlays like dropdowns and popovers"
853
- },
854
- "modal": {
855
- "value": "{z-index.6}",
856
- "type": "other",
857
- "description": "Modal dialogs and similar blocking UI"
858
- },
859
- "priority": {
860
- "value": "{z-index.8}",
861
- "type": "other",
862
- "description": "High priority elements that must appear above modals"
863
- },
864
- "nuclear": {
865
- "value": "{z-index.9}",
866
- "type": "other",
867
- "description": "Highest priority elements, use sparingly"
868
- }
869
- }
870
- }