@bgord/design 0.5.0 → 0.8.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.
- package/README.md +14 -9
- package/dist/backgrounds-generator.d.ts +10 -0
- package/dist/design.cjs.development.js +129 -3
- package/dist/design.cjs.development.js.map +1 -1
- package/dist/design.cjs.production.min.js +1 -1
- package/dist/design.cjs.production.min.js.map +1 -1
- package/dist/design.esm.js +129 -3
- package/dist/design.esm.js.map +1 -1
- package/dist/font-colors-generator.d.ts +10 -0
- package/dist/generator.d.ts +3 -1
- package/dist/line-height-generator.d.ts +10 -0
- package/dist/main.css +144 -52
- package/dist/main.min.css +1 -1
- package/dist/tokens.d.ts +4 -0
- package/package.json +1 -1
- package/src/backgrounds-generator.ts +32 -0
- package/src/displays-generator.ts +5 -1
- package/src/font-colors-generator.ts +32 -0
- package/src/generate-css.ts +17 -3
- package/src/generator.ts +4 -0
- package/src/line-height-generator.ts +32 -0
- package/src/tokens.ts +36 -0
package/dist/main.css
CHANGED
|
@@ -426,6 +426,8 @@
|
|
|
426
426
|
display: -webkit-box;
|
|
427
427
|
display: -ms-flexbox;
|
|
428
428
|
display: flex;
|
|
429
|
+
-ms-flex-wrap: wrap;
|
|
430
|
+
flex-wrap: wrap;
|
|
429
431
|
}
|
|
430
432
|
*[data-display='block'] {
|
|
431
433
|
display: block;
|
|
@@ -489,28 +491,6 @@
|
|
|
489
491
|
}
|
|
490
492
|
/* ===================== */
|
|
491
493
|
|
|
492
|
-
/* Positions */
|
|
493
|
-
|
|
494
|
-
*[data-position='static'] {
|
|
495
|
-
position: static;
|
|
496
|
-
}
|
|
497
|
-
*[data-position='relative'] {
|
|
498
|
-
position: relative;
|
|
499
|
-
}
|
|
500
|
-
*[data-position='absolute'] {
|
|
501
|
-
position: absolute;
|
|
502
|
-
}
|
|
503
|
-
*[data-position='fixed'] {
|
|
504
|
-
position: fixed;
|
|
505
|
-
}
|
|
506
|
-
*[data-position='sticky'] {
|
|
507
|
-
position: sticky;
|
|
508
|
-
}
|
|
509
|
-
*[data-position='unset'] {
|
|
510
|
-
position: unset;
|
|
511
|
-
}
|
|
512
|
-
/* ===================== */
|
|
513
|
-
|
|
514
494
|
/* Flex wraps */
|
|
515
495
|
|
|
516
496
|
*[data-wrap='nowrap'] {
|
|
@@ -531,19 +511,31 @@
|
|
|
531
511
|
}
|
|
532
512
|
/* ===================== */
|
|
533
513
|
|
|
534
|
-
/*
|
|
514
|
+
/* Flex directions */
|
|
535
515
|
|
|
536
|
-
*[data-
|
|
537
|
-
|
|
516
|
+
*[data-direction='row'] {
|
|
517
|
+
-webkit-box-orient: horizontal;
|
|
518
|
+
-webkit-box-direction: normal;
|
|
519
|
+
-ms-flex-direction: row;
|
|
520
|
+
flex-direction: row;
|
|
538
521
|
}
|
|
539
|
-
*[data-
|
|
540
|
-
|
|
522
|
+
*[data-direction='row-reverse'] {
|
|
523
|
+
-webkit-box-orient: horizontal;
|
|
524
|
+
-webkit-box-direction: reverse;
|
|
525
|
+
-ms-flex-direction: row-reverse;
|
|
526
|
+
flex-direction: row-reverse;
|
|
541
527
|
}
|
|
542
|
-
*[data-
|
|
543
|
-
|
|
528
|
+
*[data-direction='column'] {
|
|
529
|
+
-webkit-box-orient: vertical;
|
|
530
|
+
-webkit-box-direction: normal;
|
|
531
|
+
-ms-flex-direction: column;
|
|
532
|
+
flex-direction: column;
|
|
544
533
|
}
|
|
545
|
-
*[data-
|
|
546
|
-
|
|
534
|
+
*[data-direction='column-reverse'] {
|
|
535
|
+
-webkit-box-orient: vertical;
|
|
536
|
+
-webkit-box-direction: reverse;
|
|
537
|
+
-ms-flex-direction: column-reverse;
|
|
538
|
+
flex-direction: column-reverse;
|
|
547
539
|
}
|
|
548
540
|
/* ===================== */
|
|
549
541
|
|
|
@@ -560,6 +552,44 @@
|
|
|
560
552
|
}
|
|
561
553
|
/* ===================== */
|
|
562
554
|
|
|
555
|
+
/* Positions */
|
|
556
|
+
|
|
557
|
+
*[data-position='static'] {
|
|
558
|
+
position: static;
|
|
559
|
+
}
|
|
560
|
+
*[data-position='relative'] {
|
|
561
|
+
position: relative;
|
|
562
|
+
}
|
|
563
|
+
*[data-position='absolute'] {
|
|
564
|
+
position: absolute;
|
|
565
|
+
}
|
|
566
|
+
*[data-position='fixed'] {
|
|
567
|
+
position: fixed;
|
|
568
|
+
}
|
|
569
|
+
*[data-position='sticky'] {
|
|
570
|
+
position: sticky;
|
|
571
|
+
}
|
|
572
|
+
*[data-position='unset'] {
|
|
573
|
+
position: unset;
|
|
574
|
+
}
|
|
575
|
+
/* ===================== */
|
|
576
|
+
|
|
577
|
+
/* Displays */
|
|
578
|
+
|
|
579
|
+
*[data-z='0'] {
|
|
580
|
+
z-index: 0;
|
|
581
|
+
}
|
|
582
|
+
*[data-z='1'] {
|
|
583
|
+
z-index: 1;
|
|
584
|
+
}
|
|
585
|
+
*[data-z='2'] {
|
|
586
|
+
z-index: 2;
|
|
587
|
+
}
|
|
588
|
+
*[data-z='3'] {
|
|
589
|
+
z-index: 3;
|
|
590
|
+
}
|
|
591
|
+
/* ===================== */
|
|
592
|
+
|
|
563
593
|
/* Font sizes */
|
|
564
594
|
|
|
565
595
|
*[data-fs='12'] {
|
|
@@ -604,31 +634,93 @@
|
|
|
604
634
|
}
|
|
605
635
|
/* ===================== */
|
|
606
636
|
|
|
607
|
-
/*
|
|
637
|
+
/* Font colors */
|
|
608
638
|
|
|
609
|
-
*[data-
|
|
610
|
-
|
|
611
|
-
-webkit-box-direction: normal;
|
|
612
|
-
-ms-flex-direction: row;
|
|
613
|
-
flex-direction: row;
|
|
639
|
+
*[data-color='white'] {
|
|
640
|
+
color: #F9FAFB;
|
|
614
641
|
}
|
|
615
|
-
*[data-
|
|
616
|
-
|
|
617
|
-
-webkit-box-direction: reverse;
|
|
618
|
-
-ms-flex-direction: row-reverse;
|
|
619
|
-
flex-direction: row-reverse;
|
|
642
|
+
*[data-color='gray-100'] {
|
|
643
|
+
color: #F3F4F6;
|
|
620
644
|
}
|
|
621
|
-
*[data-
|
|
622
|
-
|
|
623
|
-
-webkit-box-direction: normal;
|
|
624
|
-
-ms-flex-direction: column;
|
|
625
|
-
flex-direction: column;
|
|
645
|
+
*[data-color='gray-200'] {
|
|
646
|
+
color: #E5E7EB;
|
|
626
647
|
}
|
|
627
|
-
*[data-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
648
|
+
*[data-color='gray-300'] {
|
|
649
|
+
color: #D1D5DB;
|
|
650
|
+
}
|
|
651
|
+
*[data-color='gray-400'] {
|
|
652
|
+
color: #9CA3AF;
|
|
653
|
+
}
|
|
654
|
+
*[data-color='gray-500'] {
|
|
655
|
+
color: #6B7280;
|
|
656
|
+
}
|
|
657
|
+
*[data-color='gray-600'] {
|
|
658
|
+
color: #4B5563;
|
|
659
|
+
}
|
|
660
|
+
*[data-color='gray-700'] {
|
|
661
|
+
color: #374151;
|
|
662
|
+
}
|
|
663
|
+
*[data-color='gray-800'] {
|
|
664
|
+
color: #1F2937;
|
|
665
|
+
}
|
|
666
|
+
*[data-color='black'] {
|
|
667
|
+
color: #111827;
|
|
668
|
+
}
|
|
669
|
+
/* ===================== */
|
|
670
|
+
|
|
671
|
+
/* Line heights */
|
|
672
|
+
|
|
673
|
+
*[data-lh='12'] {
|
|
674
|
+
line-height: 12;
|
|
675
|
+
}
|
|
676
|
+
*[data-lh='16'] {
|
|
677
|
+
line-height: 16;
|
|
678
|
+
}
|
|
679
|
+
*[data-lh='20'] {
|
|
680
|
+
line-height: 20;
|
|
681
|
+
}
|
|
682
|
+
*[data-lh='24'] {
|
|
683
|
+
line-height: 24;
|
|
684
|
+
}
|
|
685
|
+
*[data-lh='32'] {
|
|
686
|
+
line-height: 32;
|
|
687
|
+
}
|
|
688
|
+
*[data-lh='unset'] {
|
|
689
|
+
line-height: unset;
|
|
690
|
+
}
|
|
691
|
+
/* ===================== */
|
|
692
|
+
|
|
693
|
+
/* Backgrounds */
|
|
694
|
+
|
|
695
|
+
*[data-bg='white'] {
|
|
696
|
+
background-color: #F9FAFB;
|
|
697
|
+
}
|
|
698
|
+
*[data-bg='gray-100'] {
|
|
699
|
+
background-color: #F3F4F6;
|
|
700
|
+
}
|
|
701
|
+
*[data-bg='gray-200'] {
|
|
702
|
+
background-color: #E5E7EB;
|
|
703
|
+
}
|
|
704
|
+
*[data-bg='gray-300'] {
|
|
705
|
+
background-color: #D1D5DB;
|
|
706
|
+
}
|
|
707
|
+
*[data-bg='gray-400'] {
|
|
708
|
+
background-color: #9CA3AF;
|
|
709
|
+
}
|
|
710
|
+
*[data-bg='gray-500'] {
|
|
711
|
+
background-color: #6B7280;
|
|
712
|
+
}
|
|
713
|
+
*[data-bg='gray-600'] {
|
|
714
|
+
background-color: #4B5563;
|
|
715
|
+
}
|
|
716
|
+
*[data-bg='gray-700'] {
|
|
717
|
+
background-color: #374151;
|
|
718
|
+
}
|
|
719
|
+
*[data-bg='gray-800'] {
|
|
720
|
+
background-color: #1F2937;
|
|
721
|
+
}
|
|
722
|
+
*[data-bg='black'] {
|
|
723
|
+
background-color: #111827;
|
|
632
724
|
}
|
|
633
725
|
/* ===================== */
|
|
634
726
|
|
package/dist/main.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}[data-display=flex]{display:-webkit-box;display:-ms-flexbox;display:flex}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-main=start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}[data-main=end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}[data-main=between]{-webkit-box-pack:between;-ms-flex-pack:between;justify-content:between}[data-main=center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-main=baseline]{-webkit-box-pack:baseline;-ms-flex-pack:baseline;justify-content:baseline}[data-cross=start]{-webkit-box-align:start;-ms-flex-align:start;align-items:start}[data-cross=end]{-webkit-box-align:end;-ms-flex-align:end;align-items:end}[data-cross=between]{-webkit-box-align:between;-ms-flex-align:between;align-items:between}[data-cross=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-cross=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[data-
|
|
1
|
+
[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}[data-display=flex]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-main=start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}[data-main=end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}[data-main=between]{-webkit-box-pack:between;-ms-flex-pack:between;justify-content:between}[data-main=center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-main=baseline]{-webkit-box-pack:baseline;-ms-flex-pack:baseline;justify-content:baseline}[data-cross=start]{-webkit-box-align:start;-ms-flex-align:start;align-items:start}[data-cross=end]{-webkit-box-align:end;-ms-flex-align:end;align-items:end}[data-cross=between]{-webkit-box-align:between;-ms-flex-align:between;align-items:between}[data-cross=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-cross=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[data-wrap=nowrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[data-wrap=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[data-wrap=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[data-wrap=unset]{-ms-flex-wrap:unset;flex-wrap:unset}[data-direction=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-direction=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[data-direction=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-direction=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-width='100%']{width:100%}[data-width=auto]{width:auto}[data-width=unset]{width:unset}[data-position=static]{position:static}[data-position=relative]{position:relative}[data-position=absolute]{position:absolute}[data-position=fixed]{position:fixed}[data-position=sticky]{position:sticky}[data-position=unset]{position:unset}[data-z='0']{z-index:0}[data-z='1']{z-index:1}[data-z='2']{z-index:2}[data-z='3']{z-index:3}[data-fs='12']{font-size:12px}[data-fs='14']{font-size:14px}[data-fs='16']{font-size:16px}[data-fs='20']{font-size:20px}[data-fs='24']{font-size:24px}[data-fs='32']{font-size:32px}[data-fw='300']{font-weight:300}[data-fw='400']{font-weight:400}[data-fw='500']{font-weight:500}[data-fw='700']{font-weight:700}[data-fw='900']{font-weight:900}[data-fw=unset]{font-weight:unset}[data-color=white]{color:#f9fafb}[data-color=gray-100]{color:#f3f4f6}[data-color=gray-200]{color:#e5e7eb}[data-color=gray-300]{color:#d1d5db}[data-color=gray-400]{color:#9ca3af}[data-color=gray-500]{color:#6b7280}[data-color=gray-600]{color:#4b5563}[data-color=gray-700]{color:#374151}[data-color=gray-800]{color:#1f2937}[data-color=black]{color:#111827}[data-lh='12']{line-height:12}[data-lh='16']{line-height:16}[data-lh='20']{line-height:20}[data-lh='24']{line-height:24}[data-lh='32']{line-height:32}[data-lh=unset]{line-height:unset}[data-bg=white]{background-color:#f9fafb}[data-bg=gray-100]{background-color:#f3f4f6}[data-bg=gray-200]{background-color:#e5e7eb}[data-bg=gray-300]{background-color:#d1d5db}[data-bg=gray-400]{background-color:#9ca3af}[data-bg=gray-500]{background-color:#6b7280}[data-bg=gray-600]{background-color:#4b5563}[data-bg=gray-700]{background-color:#374151}[data-bg=gray-800]{background-color:#1f2937}[data-bg=black]{background-color:#111827}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -16,6 +16,10 @@ declare type FontSizeType = '12' | '14' | '16' | '20' | '24' | '32';
|
|
|
16
16
|
export declare const FontSizes: Record<FontSizeType, string>;
|
|
17
17
|
declare type FontWeightType = '300' | '400' | '500' | '700' | '900' | 'unset';
|
|
18
18
|
export declare const FontWeights: Record<FontWeightType, string>;
|
|
19
|
+
declare type LineHeightType = '12' | '16' | '20' | '24' | '32' | 'unset';
|
|
20
|
+
export declare const LineHeights: Record<LineHeightType, string>;
|
|
19
21
|
declare type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
20
22
|
export declare const FlexDirections: Record<FlexDirectionType, string>;
|
|
23
|
+
declare type ColorsType = 'white' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'black';
|
|
24
|
+
export declare const Colors: Record<ColorsType, string>;
|
|
21
25
|
export {};
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { GeneratorInterface, GeneratorConfigType } from './generator';
|
|
2
|
+
|
|
3
|
+
export class BackgroundsGenerator implements GeneratorInterface {
|
|
4
|
+
spacing: GeneratorConfigType['spacing'];
|
|
5
|
+
displays: GeneratorConfigType['displays'];
|
|
6
|
+
colors: GeneratorConfigType['colors'];
|
|
7
|
+
|
|
8
|
+
constructor(config: GeneratorConfigType) {
|
|
9
|
+
this.spacing = config.spacing;
|
|
10
|
+
this.displays = config.displays;
|
|
11
|
+
this.colors = config.colors;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
generateHeader(): string {
|
|
15
|
+
return '/* Backgrounds */\n\n';
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
generateCss(): string {
|
|
19
|
+
let output = '';
|
|
20
|
+
|
|
21
|
+
// Regular display: data-bg="*"
|
|
22
|
+
for (const [key, value] of Object.entries(this.colors)) {
|
|
23
|
+
output += `*[data-bg='${key}'] {\n background-color: ${value};\n}\n`;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return output;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
generateFooter(): string {
|
|
30
|
+
return '/* ===================== */\n\n';
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -18,7 +18,11 @@ export class DisplaysGenerator implements GeneratorInterface {
|
|
|
18
18
|
|
|
19
19
|
// Regular display: data-display="*"
|
|
20
20
|
for (const [key, value] of Object.entries(this.displays)) {
|
|
21
|
-
|
|
21
|
+
if (value === 'flex') {
|
|
22
|
+
output += `*[data-display='${key}'] {\n display: ${value};\nflex-wrap: wrap;\n}\n`;
|
|
23
|
+
} else {
|
|
24
|
+
output += `*[data-display='${key}'] {\n display: ${value};\n}\n`;
|
|
25
|
+
}
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
return output;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { GeneratorInterface, GeneratorConfigType } from './generator';
|
|
2
|
+
|
|
3
|
+
export class FontColorsGenerator implements GeneratorInterface {
|
|
4
|
+
spacing: GeneratorConfigType['spacing'];
|
|
5
|
+
displays: GeneratorConfigType['displays'];
|
|
6
|
+
colors: GeneratorConfigType['colors'];
|
|
7
|
+
|
|
8
|
+
constructor(config: GeneratorConfigType) {
|
|
9
|
+
this.spacing = config.spacing;
|
|
10
|
+
this.displays = config.displays;
|
|
11
|
+
this.colors = config.colors;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
generateHeader(): string {
|
|
15
|
+
return '/* Font colors */\n\n';
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
generateCss(): string {
|
|
19
|
+
let output = '';
|
|
20
|
+
|
|
21
|
+
// Regular display: data-color="*"
|
|
22
|
+
for (const [key, value] of Object.entries(this.colors)) {
|
|
23
|
+
output += `*[data-color='${key}'] {\n color: ${value};\n}\n`;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return output;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
generateFooter(): string {
|
|
30
|
+
return '/* ===================== */\n\n';
|
|
31
|
+
}
|
|
32
|
+
}
|
package/src/generate-css.ts
CHANGED
|
@@ -11,7 +11,10 @@ import { ZIndexGenerator } from './z-index-generator';
|
|
|
11
11
|
import { WidthsGenerator } from './widhts-generator';
|
|
12
12
|
import { FontSizeGenerator } from './font-size-generator';
|
|
13
13
|
import { FontWeightGenerator } from './font-weight-generator';
|
|
14
|
+
import { LineHeightsGenerator } from './line-height-generator';
|
|
14
15
|
import { FlexDirectionsGenerator } from './flex-directions-generator';
|
|
16
|
+
import { BackgroundsGenerator } from './backgrounds-generator';
|
|
17
|
+
import { FontColorsGenerator } from './font-colors-generator';
|
|
15
18
|
|
|
16
19
|
import {
|
|
17
20
|
Spacing,
|
|
@@ -24,6 +27,8 @@ import {
|
|
|
24
27
|
FontSizes,
|
|
25
28
|
FontWeights,
|
|
26
29
|
FlexDirections,
|
|
30
|
+
LineHeights,
|
|
31
|
+
Colors,
|
|
27
32
|
} from './tokens';
|
|
28
33
|
|
|
29
34
|
class GeneratorProcessor {
|
|
@@ -53,20 +58,29 @@ export async function main() {
|
|
|
53
58
|
widths: Widths,
|
|
54
59
|
fontSizes: FontSizes,
|
|
55
60
|
fontWeights: FontWeights,
|
|
61
|
+
lineHeights: LineHeights,
|
|
56
62
|
flexDirections: FlexDirections,
|
|
63
|
+
colors: Colors,
|
|
57
64
|
};
|
|
58
65
|
|
|
59
66
|
await new GeneratorProcessor().process([
|
|
60
67
|
new Margins(config),
|
|
61
68
|
new Paddings(config),
|
|
69
|
+
|
|
62
70
|
new DisplaysGenerator(config),
|
|
63
71
|
new AxisPlacementsGenerator(config),
|
|
64
|
-
new PositionsGenerator(config),
|
|
65
72
|
new FlexWrapGenerator(config),
|
|
66
|
-
new
|
|
73
|
+
new FlexDirectionsGenerator(config),
|
|
74
|
+
|
|
67
75
|
new WidthsGenerator(config),
|
|
76
|
+
new PositionsGenerator(config),
|
|
77
|
+
new ZIndexGenerator(config),
|
|
78
|
+
|
|
68
79
|
new FontSizeGenerator(config),
|
|
69
80
|
new FontWeightGenerator(config),
|
|
70
|
-
new
|
|
81
|
+
new FontColorsGenerator(config),
|
|
82
|
+
new LineHeightsGenerator(config),
|
|
83
|
+
|
|
84
|
+
new BackgroundsGenerator(config),
|
|
71
85
|
]);
|
|
72
86
|
}
|
package/src/generator.ts
CHANGED
|
@@ -9,6 +9,8 @@ import {
|
|
|
9
9
|
FontSizes,
|
|
10
10
|
FlexDirections,
|
|
11
11
|
FontWeights,
|
|
12
|
+
LineHeights,
|
|
13
|
+
Colors,
|
|
12
14
|
} from './tokens';
|
|
13
15
|
|
|
14
16
|
export interface GeneratorInterface {
|
|
@@ -30,5 +32,7 @@ export type GeneratorConfigType = {
|
|
|
30
32
|
widths: typeof Widths;
|
|
31
33
|
fontSizes: typeof FontSizes;
|
|
32
34
|
fontWeights: typeof FontWeights;
|
|
35
|
+
lineHeights: typeof LineHeights;
|
|
33
36
|
flexDirections: typeof FlexDirections;
|
|
37
|
+
colors: typeof Colors;
|
|
34
38
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { GeneratorInterface, GeneratorConfigType } from './generator';
|
|
2
|
+
|
|
3
|
+
export class LineHeightsGenerator implements GeneratorInterface {
|
|
4
|
+
spacing: GeneratorConfigType['spacing'];
|
|
5
|
+
displays: GeneratorConfigType['displays'];
|
|
6
|
+
lineHeights: GeneratorConfigType['lineHeights'];
|
|
7
|
+
|
|
8
|
+
constructor(config: GeneratorConfigType) {
|
|
9
|
+
this.spacing = config.spacing;
|
|
10
|
+
this.displays = config.displays;
|
|
11
|
+
this.lineHeights = config.lineHeights;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
generateHeader(): string {
|
|
15
|
+
return '/* Line heights */\n\n';
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
generateCss(): string {
|
|
19
|
+
let output = '';
|
|
20
|
+
|
|
21
|
+
// Regular display: data-lh="*"
|
|
22
|
+
for (const [key, value] of Object.entries(this.lineHeights)) {
|
|
23
|
+
output += `*[data-lh='${key}'] {\n line-height: ${value};\n}\n`;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return output;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
generateFooter(): string {
|
|
30
|
+
return '/* ===================== */\n\n';
|
|
31
|
+
}
|
|
32
|
+
}
|
package/src/tokens.ts
CHANGED
|
@@ -104,6 +104,17 @@ export const FontWeights: Record<FontWeightType, string> = {
|
|
|
104
104
|
unset: 'unset',
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
+
type LineHeightType = '12' | '16' | '20' | '24' | '32' | 'unset';
|
|
108
|
+
|
|
109
|
+
export const LineHeights: Record<LineHeightType, string> = {
|
|
110
|
+
'12': '12',
|
|
111
|
+
'16': '16',
|
|
112
|
+
'20': '20',
|
|
113
|
+
'24': '24',
|
|
114
|
+
'32': '32',
|
|
115
|
+
unset: 'unset',
|
|
116
|
+
};
|
|
117
|
+
|
|
107
118
|
type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
108
119
|
|
|
109
120
|
export const FlexDirections: Record<FlexDirectionType, string> = {
|
|
@@ -112,3 +123,28 @@ export const FlexDirections: Record<FlexDirectionType, string> = {
|
|
|
112
123
|
column: 'column',
|
|
113
124
|
'column-reverse': 'column-reverse',
|
|
114
125
|
};
|
|
126
|
+
|
|
127
|
+
type ColorsType =
|
|
128
|
+
| 'white'
|
|
129
|
+
| 'gray-100'
|
|
130
|
+
| 'gray-200'
|
|
131
|
+
| 'gray-300'
|
|
132
|
+
| 'gray-400'
|
|
133
|
+
| 'gray-500'
|
|
134
|
+
| 'gray-600'
|
|
135
|
+
| 'gray-700'
|
|
136
|
+
| 'gray-800'
|
|
137
|
+
| 'black';
|
|
138
|
+
|
|
139
|
+
export const Colors: Record<ColorsType, string> = {
|
|
140
|
+
white: '#F9FAFB',
|
|
141
|
+
'gray-100': '#F3F4F6',
|
|
142
|
+
'gray-200': '#E5E7EB',
|
|
143
|
+
'gray-300': '#D1D5DB',
|
|
144
|
+
'gray-400': '#9CA3AF',
|
|
145
|
+
'gray-500': '#6B7280',
|
|
146
|
+
'gray-600': '#4B5563',
|
|
147
|
+
'gray-700': '#374151',
|
|
148
|
+
'gray-800': '#1F2937',
|
|
149
|
+
black: '#111827',
|
|
150
|
+
};
|