@bcc-code/design-tokens 3.0.7 → 3.0.9

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.
@@ -485,6 +485,46 @@
485
485
  padding-left: var(--spacing-0);
486
486
  }
487
487
 
488
+ @utility m-0 {
489
+ margin: var(--spacing-0);
490
+ }
491
+
492
+ @utility mx-0 {
493
+ margin-inline: var(--spacing-0);
494
+ }
495
+
496
+ @utility my-0 {
497
+ margin-block: var(--spacing-0);
498
+ }
499
+
500
+ @utility mt-0 {
501
+ margin-top: var(--spacing-0);
502
+ }
503
+
504
+ @utility mr-0 {
505
+ margin-right: var(--spacing-0);
506
+ }
507
+
508
+ @utility mb-0 {
509
+ margin-bottom: var(--spacing-0);
510
+ }
511
+
512
+ @utility ml-0 {
513
+ margin-left: var(--spacing-0);
514
+ }
515
+
516
+ @utility gap-0 {
517
+ gap: var(--spacing-0);
518
+ }
519
+
520
+ @utility gap-x-0 {
521
+ column-gap: var(--spacing-0);
522
+ }
523
+
524
+ @utility gap-y-0 {
525
+ row-gap: var(--spacing-0);
526
+ }
527
+
488
528
  @utility p-25 {
489
529
  padding: var(--spacing-25);
490
530
  }
@@ -513,6 +553,46 @@
513
553
  padding-left: var(--spacing-25);
514
554
  }
515
555
 
556
+ @utility m-25 {
557
+ margin: var(--spacing-25);
558
+ }
559
+
560
+ @utility mx-25 {
561
+ margin-inline: var(--spacing-25);
562
+ }
563
+
564
+ @utility my-25 {
565
+ margin-block: var(--spacing-25);
566
+ }
567
+
568
+ @utility mt-25 {
569
+ margin-top: var(--spacing-25);
570
+ }
571
+
572
+ @utility mr-25 {
573
+ margin-right: var(--spacing-25);
574
+ }
575
+
576
+ @utility mb-25 {
577
+ margin-bottom: var(--spacing-25);
578
+ }
579
+
580
+ @utility ml-25 {
581
+ margin-left: var(--spacing-25);
582
+ }
583
+
584
+ @utility gap-25 {
585
+ gap: var(--spacing-25);
586
+ }
587
+
588
+ @utility gap-x-25 {
589
+ column-gap: var(--spacing-25);
590
+ }
591
+
592
+ @utility gap-y-25 {
593
+ row-gap: var(--spacing-25);
594
+ }
595
+
516
596
  @utility p-50 {
517
597
  padding: var(--spacing-50);
518
598
  }
@@ -541,6 +621,46 @@
541
621
  padding-left: var(--spacing-50);
542
622
  }
543
623
 
624
+ @utility m-50 {
625
+ margin: var(--spacing-50);
626
+ }
627
+
628
+ @utility mx-50 {
629
+ margin-inline: var(--spacing-50);
630
+ }
631
+
632
+ @utility my-50 {
633
+ margin-block: var(--spacing-50);
634
+ }
635
+
636
+ @utility mt-50 {
637
+ margin-top: var(--spacing-50);
638
+ }
639
+
640
+ @utility mr-50 {
641
+ margin-right: var(--spacing-50);
642
+ }
643
+
644
+ @utility mb-50 {
645
+ margin-bottom: var(--spacing-50);
646
+ }
647
+
648
+ @utility ml-50 {
649
+ margin-left: var(--spacing-50);
650
+ }
651
+
652
+ @utility gap-50 {
653
+ gap: var(--spacing-50);
654
+ }
655
+
656
+ @utility gap-x-50 {
657
+ column-gap: var(--spacing-50);
658
+ }
659
+
660
+ @utility gap-y-50 {
661
+ row-gap: var(--spacing-50);
662
+ }
663
+
544
664
  @utility p-75 {
545
665
  padding: var(--spacing-75);
546
666
  }
@@ -569,6 +689,46 @@
569
689
  padding-left: var(--spacing-75);
570
690
  }
571
691
 
692
+ @utility m-75 {
693
+ margin: var(--spacing-75);
694
+ }
695
+
696
+ @utility mx-75 {
697
+ margin-inline: var(--spacing-75);
698
+ }
699
+
700
+ @utility my-75 {
701
+ margin-block: var(--spacing-75);
702
+ }
703
+
704
+ @utility mt-75 {
705
+ margin-top: var(--spacing-75);
706
+ }
707
+
708
+ @utility mr-75 {
709
+ margin-right: var(--spacing-75);
710
+ }
711
+
712
+ @utility mb-75 {
713
+ margin-bottom: var(--spacing-75);
714
+ }
715
+
716
+ @utility ml-75 {
717
+ margin-left: var(--spacing-75);
718
+ }
719
+
720
+ @utility gap-75 {
721
+ gap: var(--spacing-75);
722
+ }
723
+
724
+ @utility gap-x-75 {
725
+ column-gap: var(--spacing-75);
726
+ }
727
+
728
+ @utility gap-y-75 {
729
+ row-gap: var(--spacing-75);
730
+ }
731
+
572
732
  @utility p-100 {
573
733
  padding: var(--spacing-100);
574
734
  }
@@ -597,6 +757,46 @@
597
757
  padding-left: var(--spacing-100);
598
758
  }
599
759
 
760
+ @utility m-100 {
761
+ margin: var(--spacing-100);
762
+ }
763
+
764
+ @utility mx-100 {
765
+ margin-inline: var(--spacing-100);
766
+ }
767
+
768
+ @utility my-100 {
769
+ margin-block: var(--spacing-100);
770
+ }
771
+
772
+ @utility mt-100 {
773
+ margin-top: var(--spacing-100);
774
+ }
775
+
776
+ @utility mr-100 {
777
+ margin-right: var(--spacing-100);
778
+ }
779
+
780
+ @utility mb-100 {
781
+ margin-bottom: var(--spacing-100);
782
+ }
783
+
784
+ @utility ml-100 {
785
+ margin-left: var(--spacing-100);
786
+ }
787
+
788
+ @utility gap-100 {
789
+ gap: var(--spacing-100);
790
+ }
791
+
792
+ @utility gap-x-100 {
793
+ column-gap: var(--spacing-100);
794
+ }
795
+
796
+ @utility gap-y-100 {
797
+ row-gap: var(--spacing-100);
798
+ }
799
+
600
800
  @utility p-150 {
601
801
  padding: var(--spacing-150);
602
802
  }
@@ -625,6 +825,46 @@
625
825
  padding-left: var(--spacing-150);
626
826
  }
627
827
 
828
+ @utility m-150 {
829
+ margin: var(--spacing-150);
830
+ }
831
+
832
+ @utility mx-150 {
833
+ margin-inline: var(--spacing-150);
834
+ }
835
+
836
+ @utility my-150 {
837
+ margin-block: var(--spacing-150);
838
+ }
839
+
840
+ @utility mt-150 {
841
+ margin-top: var(--spacing-150);
842
+ }
843
+
844
+ @utility mr-150 {
845
+ margin-right: var(--spacing-150);
846
+ }
847
+
848
+ @utility mb-150 {
849
+ margin-bottom: var(--spacing-150);
850
+ }
851
+
852
+ @utility ml-150 {
853
+ margin-left: var(--spacing-150);
854
+ }
855
+
856
+ @utility gap-150 {
857
+ gap: var(--spacing-150);
858
+ }
859
+
860
+ @utility gap-x-150 {
861
+ column-gap: var(--spacing-150);
862
+ }
863
+
864
+ @utility gap-y-150 {
865
+ row-gap: var(--spacing-150);
866
+ }
867
+
628
868
  @utility p-200 {
629
869
  padding: var(--spacing-200);
630
870
  }
@@ -653,20 +893,60 @@
653
893
  padding-left: var(--spacing-200);
654
894
  }
655
895
 
656
- @utility p-250 {
657
- padding: var(--spacing-250);
896
+ @utility m-200 {
897
+ margin: var(--spacing-200);
658
898
  }
659
899
 
660
- @utility px-250 {
661
- padding-inline: var(--spacing-250);
900
+ @utility mx-200 {
901
+ margin-inline: var(--spacing-200);
662
902
  }
663
903
 
664
- @utility py-250 {
665
- padding-block: var(--spacing-250);
904
+ @utility my-200 {
905
+ margin-block: var(--spacing-200);
666
906
  }
667
907
 
668
- @utility pt-250 {
669
- padding-top: var(--spacing-250);
908
+ @utility mt-200 {
909
+ margin-top: var(--spacing-200);
910
+ }
911
+
912
+ @utility mr-200 {
913
+ margin-right: var(--spacing-200);
914
+ }
915
+
916
+ @utility mb-200 {
917
+ margin-bottom: var(--spacing-200);
918
+ }
919
+
920
+ @utility ml-200 {
921
+ margin-left: var(--spacing-200);
922
+ }
923
+
924
+ @utility gap-200 {
925
+ gap: var(--spacing-200);
926
+ }
927
+
928
+ @utility gap-x-200 {
929
+ column-gap: var(--spacing-200);
930
+ }
931
+
932
+ @utility gap-y-200 {
933
+ row-gap: var(--spacing-200);
934
+ }
935
+
936
+ @utility p-250 {
937
+ padding: var(--spacing-250);
938
+ }
939
+
940
+ @utility px-250 {
941
+ padding-inline: var(--spacing-250);
942
+ }
943
+
944
+ @utility py-250 {
945
+ padding-block: var(--spacing-250);
946
+ }
947
+
948
+ @utility pt-250 {
949
+ padding-top: var(--spacing-250);
670
950
  }
671
951
 
672
952
  @utility pr-250 {
@@ -681,6 +961,46 @@
681
961
  padding-left: var(--spacing-250);
682
962
  }
683
963
 
964
+ @utility m-250 {
965
+ margin: var(--spacing-250);
966
+ }
967
+
968
+ @utility mx-250 {
969
+ margin-inline: var(--spacing-250);
970
+ }
971
+
972
+ @utility my-250 {
973
+ margin-block: var(--spacing-250);
974
+ }
975
+
976
+ @utility mt-250 {
977
+ margin-top: var(--spacing-250);
978
+ }
979
+
980
+ @utility mr-250 {
981
+ margin-right: var(--spacing-250);
982
+ }
983
+
984
+ @utility mb-250 {
985
+ margin-bottom: var(--spacing-250);
986
+ }
987
+
988
+ @utility ml-250 {
989
+ margin-left: var(--spacing-250);
990
+ }
991
+
992
+ @utility gap-250 {
993
+ gap: var(--spacing-250);
994
+ }
995
+
996
+ @utility gap-x-250 {
997
+ column-gap: var(--spacing-250);
998
+ }
999
+
1000
+ @utility gap-y-250 {
1001
+ row-gap: var(--spacing-250);
1002
+ }
1003
+
684
1004
  @utility p-300 {
685
1005
  padding: var(--spacing-300);
686
1006
  }
@@ -709,6 +1029,46 @@
709
1029
  padding-left: var(--spacing-300);
710
1030
  }
711
1031
 
1032
+ @utility m-300 {
1033
+ margin: var(--spacing-300);
1034
+ }
1035
+
1036
+ @utility mx-300 {
1037
+ margin-inline: var(--spacing-300);
1038
+ }
1039
+
1040
+ @utility my-300 {
1041
+ margin-block: var(--spacing-300);
1042
+ }
1043
+
1044
+ @utility mt-300 {
1045
+ margin-top: var(--spacing-300);
1046
+ }
1047
+
1048
+ @utility mr-300 {
1049
+ margin-right: var(--spacing-300);
1050
+ }
1051
+
1052
+ @utility mb-300 {
1053
+ margin-bottom: var(--spacing-300);
1054
+ }
1055
+
1056
+ @utility ml-300 {
1057
+ margin-left: var(--spacing-300);
1058
+ }
1059
+
1060
+ @utility gap-300 {
1061
+ gap: var(--spacing-300);
1062
+ }
1063
+
1064
+ @utility gap-x-300 {
1065
+ column-gap: var(--spacing-300);
1066
+ }
1067
+
1068
+ @utility gap-y-300 {
1069
+ row-gap: var(--spacing-300);
1070
+ }
1071
+
712
1072
  @utility p-400 {
713
1073
  padding: var(--spacing-400);
714
1074
  }
@@ -737,6 +1097,46 @@
737
1097
  padding-left: var(--spacing-400);
738
1098
  }
739
1099
 
1100
+ @utility m-400 {
1101
+ margin: var(--spacing-400);
1102
+ }
1103
+
1104
+ @utility mx-400 {
1105
+ margin-inline: var(--spacing-400);
1106
+ }
1107
+
1108
+ @utility my-400 {
1109
+ margin-block: var(--spacing-400);
1110
+ }
1111
+
1112
+ @utility mt-400 {
1113
+ margin-top: var(--spacing-400);
1114
+ }
1115
+
1116
+ @utility mr-400 {
1117
+ margin-right: var(--spacing-400);
1118
+ }
1119
+
1120
+ @utility mb-400 {
1121
+ margin-bottom: var(--spacing-400);
1122
+ }
1123
+
1124
+ @utility ml-400 {
1125
+ margin-left: var(--spacing-400);
1126
+ }
1127
+
1128
+ @utility gap-400 {
1129
+ gap: var(--spacing-400);
1130
+ }
1131
+
1132
+ @utility gap-x-400 {
1133
+ column-gap: var(--spacing-400);
1134
+ }
1135
+
1136
+ @utility gap-y-400 {
1137
+ row-gap: var(--spacing-400);
1138
+ }
1139
+
740
1140
  @utility p-500 {
741
1141
  padding: var(--spacing-500);
742
1142
  }
@@ -765,6 +1165,46 @@
765
1165
  padding-left: var(--spacing-500);
766
1166
  }
767
1167
 
1168
+ @utility m-500 {
1169
+ margin: var(--spacing-500);
1170
+ }
1171
+
1172
+ @utility mx-500 {
1173
+ margin-inline: var(--spacing-500);
1174
+ }
1175
+
1176
+ @utility my-500 {
1177
+ margin-block: var(--spacing-500);
1178
+ }
1179
+
1180
+ @utility mt-500 {
1181
+ margin-top: var(--spacing-500);
1182
+ }
1183
+
1184
+ @utility mr-500 {
1185
+ margin-right: var(--spacing-500);
1186
+ }
1187
+
1188
+ @utility mb-500 {
1189
+ margin-bottom: var(--spacing-500);
1190
+ }
1191
+
1192
+ @utility ml-500 {
1193
+ margin-left: var(--spacing-500);
1194
+ }
1195
+
1196
+ @utility gap-500 {
1197
+ gap: var(--spacing-500);
1198
+ }
1199
+
1200
+ @utility gap-x-500 {
1201
+ column-gap: var(--spacing-500);
1202
+ }
1203
+
1204
+ @utility gap-y-500 {
1205
+ row-gap: var(--spacing-500);
1206
+ }
1207
+
768
1208
  @utility p-600 {
769
1209
  padding: var(--spacing-600);
770
1210
  }
@@ -793,6 +1233,46 @@
793
1233
  padding-left: var(--spacing-600);
794
1234
  }
795
1235
 
1236
+ @utility m-600 {
1237
+ margin: var(--spacing-600);
1238
+ }
1239
+
1240
+ @utility mx-600 {
1241
+ margin-inline: var(--spacing-600);
1242
+ }
1243
+
1244
+ @utility my-600 {
1245
+ margin-block: var(--spacing-600);
1246
+ }
1247
+
1248
+ @utility mt-600 {
1249
+ margin-top: var(--spacing-600);
1250
+ }
1251
+
1252
+ @utility mr-600 {
1253
+ margin-right: var(--spacing-600);
1254
+ }
1255
+
1256
+ @utility mb-600 {
1257
+ margin-bottom: var(--spacing-600);
1258
+ }
1259
+
1260
+ @utility ml-600 {
1261
+ margin-left: var(--spacing-600);
1262
+ }
1263
+
1264
+ @utility gap-600 {
1265
+ gap: var(--spacing-600);
1266
+ }
1267
+
1268
+ @utility gap-x-600 {
1269
+ column-gap: var(--spacing-600);
1270
+ }
1271
+
1272
+ @utility gap-y-600 {
1273
+ row-gap: var(--spacing-600);
1274
+ }
1275
+
796
1276
  @utility p-800 {
797
1277
  padding: var(--spacing-800);
798
1278
  }
@@ -821,396 +1301,72 @@
821
1301
  padding-left: var(--spacing-800);
822
1302
  }
823
1303
 
824
- @utility p-1000 {
825
- padding: var(--spacing-1000);
1304
+ @utility m-800 {
1305
+ margin: var(--spacing-800);
826
1306
  }
827
1307
 
828
- @utility px-1000 {
829
- padding-inline: var(--spacing-1000);
1308
+ @utility mx-800 {
1309
+ margin-inline: var(--spacing-800);
830
1310
  }
831
1311
 
832
- @utility py-1000 {
833
- padding-block: var(--spacing-1000);
1312
+ @utility my-800 {
1313
+ margin-block: var(--spacing-800);
834
1314
  }
835
1315
 
836
- @utility pt-1000 {
837
- padding-top: var(--spacing-1000);
1316
+ @utility mt-800 {
1317
+ margin-top: var(--spacing-800);
838
1318
  }
839
1319
 
840
- @utility pr-1000 {
841
- padding-right: var(--spacing-1000);
842
- }
843
-
844
- @utility pb-1000 {
845
- padding-bottom: var(--spacing-1000);
846
- }
847
-
848
- @utility pl-1000 {
849
- padding-left: var(--spacing-1000);
850
- }
851
-
852
- @utility m-0 {
853
- margin: var(--spacing-0);
854
- }
855
-
856
- @utility mx-0 {
857
- margin-inline: var(--spacing-0);
858
- }
859
-
860
- @utility my-0 {
861
- margin-block: var(--spacing-0);
862
- }
863
-
864
- @utility mt-0 {
865
- margin-top: var(--spacing-0);
866
- }
867
-
868
- @utility mr-0 {
869
- margin-right: var(--spacing-0);
870
- }
871
-
872
- @utility mb-0 {
873
- margin-bottom: var(--spacing-0);
874
- }
875
-
876
- @utility ml-0 {
877
- margin-left: var(--spacing-0);
878
- }
879
-
880
- @utility m-25 {
881
- margin: var(--spacing-25);
882
- }
883
-
884
- @utility mx-25 {
885
- margin-inline: var(--spacing-25);
886
- }
887
-
888
- @utility my-25 {
889
- margin-block: var(--spacing-25);
890
- }
891
-
892
- @utility mt-25 {
893
- margin-top: var(--spacing-25);
894
- }
895
-
896
- @utility mr-25 {
897
- margin-right: var(--spacing-25);
898
- }
899
-
900
- @utility mb-25 {
901
- margin-bottom: var(--spacing-25);
902
- }
903
-
904
- @utility ml-25 {
905
- margin-left: var(--spacing-25);
906
- }
907
-
908
- @utility m-50 {
909
- margin: var(--spacing-50);
910
- }
911
-
912
- @utility mx-50 {
913
- margin-inline: var(--spacing-50);
914
- }
915
-
916
- @utility my-50 {
917
- margin-block: var(--spacing-50);
918
- }
919
-
920
- @utility mt-50 {
921
- margin-top: var(--spacing-50);
922
- }
923
-
924
- @utility mr-50 {
925
- margin-right: var(--spacing-50);
926
- }
927
-
928
- @utility mb-50 {
929
- margin-bottom: var(--spacing-50);
930
- }
931
-
932
- @utility ml-50 {
933
- margin-left: var(--spacing-50);
934
- }
935
-
936
- @utility m-75 {
937
- margin: var(--spacing-75);
938
- }
939
-
940
- @utility mx-75 {
941
- margin-inline: var(--spacing-75);
942
- }
943
-
944
- @utility my-75 {
945
- margin-block: var(--spacing-75);
946
- }
947
-
948
- @utility mt-75 {
949
- margin-top: var(--spacing-75);
950
- }
951
-
952
- @utility mr-75 {
953
- margin-right: var(--spacing-75);
954
- }
955
-
956
- @utility mb-75 {
957
- margin-bottom: var(--spacing-75);
958
- }
959
-
960
- @utility ml-75 {
961
- margin-left: var(--spacing-75);
962
- }
963
-
964
- @utility m-100 {
965
- margin: var(--spacing-100);
966
- }
967
-
968
- @utility mx-100 {
969
- margin-inline: var(--spacing-100);
970
- }
971
-
972
- @utility my-100 {
973
- margin-block: var(--spacing-100);
974
- }
975
-
976
- @utility mt-100 {
977
- margin-top: var(--spacing-100);
978
- }
979
-
980
- @utility mr-100 {
981
- margin-right: var(--spacing-100);
982
- }
983
-
984
- @utility mb-100 {
985
- margin-bottom: var(--spacing-100);
986
- }
987
-
988
- @utility ml-100 {
989
- margin-left: var(--spacing-100);
990
- }
991
-
992
- @utility m-150 {
993
- margin: var(--spacing-150);
994
- }
995
-
996
- @utility mx-150 {
997
- margin-inline: var(--spacing-150);
998
- }
999
-
1000
- @utility my-150 {
1001
- margin-block: var(--spacing-150);
1002
- }
1003
-
1004
- @utility mt-150 {
1005
- margin-top: var(--spacing-150);
1006
- }
1007
-
1008
- @utility mr-150 {
1009
- margin-right: var(--spacing-150);
1010
- }
1011
-
1012
- @utility mb-150 {
1013
- margin-bottom: var(--spacing-150);
1014
- }
1015
-
1016
- @utility ml-150 {
1017
- margin-left: var(--spacing-150);
1018
- }
1019
-
1020
- @utility m-200 {
1021
- margin: var(--spacing-200);
1022
- }
1023
-
1024
- @utility mx-200 {
1025
- margin-inline: var(--spacing-200);
1026
- }
1027
-
1028
- @utility my-200 {
1029
- margin-block: var(--spacing-200);
1030
- }
1031
-
1032
- @utility mt-200 {
1033
- margin-top: var(--spacing-200);
1034
- }
1035
-
1036
- @utility mr-200 {
1037
- margin-right: var(--spacing-200);
1038
- }
1039
-
1040
- @utility mb-200 {
1041
- margin-bottom: var(--spacing-200);
1042
- }
1043
-
1044
- @utility ml-200 {
1045
- margin-left: var(--spacing-200);
1046
- }
1047
-
1048
- @utility m-250 {
1049
- margin: var(--spacing-250);
1050
- }
1051
-
1052
- @utility mx-250 {
1053
- margin-inline: var(--spacing-250);
1054
- }
1055
-
1056
- @utility my-250 {
1057
- margin-block: var(--spacing-250);
1058
- }
1059
-
1060
- @utility mt-250 {
1061
- margin-top: var(--spacing-250);
1062
- }
1063
-
1064
- @utility mr-250 {
1065
- margin-right: var(--spacing-250);
1066
- }
1067
-
1068
- @utility mb-250 {
1069
- margin-bottom: var(--spacing-250);
1070
- }
1071
-
1072
- @utility ml-250 {
1073
- margin-left: var(--spacing-250);
1074
- }
1075
-
1076
- @utility m-300 {
1077
- margin: var(--spacing-300);
1078
- }
1079
-
1080
- @utility mx-300 {
1081
- margin-inline: var(--spacing-300);
1082
- }
1083
-
1084
- @utility my-300 {
1085
- margin-block: var(--spacing-300);
1086
- }
1087
-
1088
- @utility mt-300 {
1089
- margin-top: var(--spacing-300);
1090
- }
1091
-
1092
- @utility mr-300 {
1093
- margin-right: var(--spacing-300);
1094
- }
1095
-
1096
- @utility mb-300 {
1097
- margin-bottom: var(--spacing-300);
1098
- }
1099
-
1100
- @utility ml-300 {
1101
- margin-left: var(--spacing-300);
1102
- }
1103
-
1104
- @utility m-400 {
1105
- margin: var(--spacing-400);
1106
- }
1107
-
1108
- @utility mx-400 {
1109
- margin-inline: var(--spacing-400);
1110
- }
1111
-
1112
- @utility my-400 {
1113
- margin-block: var(--spacing-400);
1114
- }
1115
-
1116
- @utility mt-400 {
1117
- margin-top: var(--spacing-400);
1118
- }
1119
-
1120
- @utility mr-400 {
1121
- margin-right: var(--spacing-400);
1122
- }
1123
-
1124
- @utility mb-400 {
1125
- margin-bottom: var(--spacing-400);
1126
- }
1127
-
1128
- @utility ml-400 {
1129
- margin-left: var(--spacing-400);
1130
- }
1131
-
1132
- @utility m-500 {
1133
- margin: var(--spacing-500);
1134
- }
1135
-
1136
- @utility mx-500 {
1137
- margin-inline: var(--spacing-500);
1138
- }
1139
-
1140
- @utility my-500 {
1141
- margin-block: var(--spacing-500);
1142
- }
1143
-
1144
- @utility mt-500 {
1145
- margin-top: var(--spacing-500);
1146
- }
1147
-
1148
- @utility mr-500 {
1149
- margin-right: var(--spacing-500);
1150
- }
1151
-
1152
- @utility mb-500 {
1153
- margin-bottom: var(--spacing-500);
1154
- }
1155
-
1156
- @utility ml-500 {
1157
- margin-left: var(--spacing-500);
1158
- }
1159
-
1160
- @utility m-600 {
1161
- margin: var(--spacing-600);
1162
- }
1163
-
1164
- @utility mx-600 {
1165
- margin-inline: var(--spacing-600);
1320
+ @utility mr-800 {
1321
+ margin-right: var(--spacing-800);
1166
1322
  }
1167
1323
 
1168
- @utility my-600 {
1169
- margin-block: var(--spacing-600);
1324
+ @utility mb-800 {
1325
+ margin-bottom: var(--spacing-800);
1170
1326
  }
1171
1327
 
1172
- @utility mt-600 {
1173
- margin-top: var(--spacing-600);
1328
+ @utility ml-800 {
1329
+ margin-left: var(--spacing-800);
1174
1330
  }
1175
1331
 
1176
- @utility mr-600 {
1177
- margin-right: var(--spacing-600);
1332
+ @utility gap-800 {
1333
+ gap: var(--spacing-800);
1178
1334
  }
1179
1335
 
1180
- @utility mb-600 {
1181
- margin-bottom: var(--spacing-600);
1336
+ @utility gap-x-800 {
1337
+ column-gap: var(--spacing-800);
1182
1338
  }
1183
1339
 
1184
- @utility ml-600 {
1185
- margin-left: var(--spacing-600);
1340
+ @utility gap-y-800 {
1341
+ row-gap: var(--spacing-800);
1186
1342
  }
1187
1343
 
1188
- @utility m-800 {
1189
- margin: var(--spacing-800);
1344
+ @utility p-1000 {
1345
+ padding: var(--spacing-1000);
1190
1346
  }
1191
1347
 
1192
- @utility mx-800 {
1193
- margin-inline: var(--spacing-800);
1348
+ @utility px-1000 {
1349
+ padding-inline: var(--spacing-1000);
1194
1350
  }
1195
1351
 
1196
- @utility my-800 {
1197
- margin-block: var(--spacing-800);
1352
+ @utility py-1000 {
1353
+ padding-block: var(--spacing-1000);
1198
1354
  }
1199
1355
 
1200
- @utility mt-800 {
1201
- margin-top: var(--spacing-800);
1356
+ @utility pt-1000 {
1357
+ padding-top: var(--spacing-1000);
1202
1358
  }
1203
1359
 
1204
- @utility mr-800 {
1205
- margin-right: var(--spacing-800);
1360
+ @utility pr-1000 {
1361
+ padding-right: var(--spacing-1000);
1206
1362
  }
1207
1363
 
1208
- @utility mb-800 {
1209
- margin-bottom: var(--spacing-800);
1364
+ @utility pb-1000 {
1365
+ padding-bottom: var(--spacing-1000);
1210
1366
  }
1211
1367
 
1212
- @utility ml-800 {
1213
- margin-left: var(--spacing-800);
1368
+ @utility pl-1000 {
1369
+ padding-left: var(--spacing-1000);
1214
1370
  }
1215
1371
 
1216
1372
  @utility m-1000 {
@@ -1241,162 +1397,6 @@
1241
1397
  margin-left: var(--spacing-1000);
1242
1398
  }
1243
1399
 
1244
- @utility gap-0 {
1245
- gap: var(--spacing-0);
1246
- }
1247
-
1248
- @utility gap-x-0 {
1249
- column-gap: var(--spacing-0);
1250
- }
1251
-
1252
- @utility gap-y-0 {
1253
- row-gap: var(--spacing-0);
1254
- }
1255
-
1256
- @utility gap-25 {
1257
- gap: var(--spacing-25);
1258
- }
1259
-
1260
- @utility gap-x-25 {
1261
- column-gap: var(--spacing-25);
1262
- }
1263
-
1264
- @utility gap-y-25 {
1265
- row-gap: var(--spacing-25);
1266
- }
1267
-
1268
- @utility gap-50 {
1269
- gap: var(--spacing-50);
1270
- }
1271
-
1272
- @utility gap-x-50 {
1273
- column-gap: var(--spacing-50);
1274
- }
1275
-
1276
- @utility gap-y-50 {
1277
- row-gap: var(--spacing-50);
1278
- }
1279
-
1280
- @utility gap-75 {
1281
- gap: var(--spacing-75);
1282
- }
1283
-
1284
- @utility gap-x-75 {
1285
- column-gap: var(--spacing-75);
1286
- }
1287
-
1288
- @utility gap-y-75 {
1289
- row-gap: var(--spacing-75);
1290
- }
1291
-
1292
- @utility gap-100 {
1293
- gap: var(--spacing-100);
1294
- }
1295
-
1296
- @utility gap-x-100 {
1297
- column-gap: var(--spacing-100);
1298
- }
1299
-
1300
- @utility gap-y-100 {
1301
- row-gap: var(--spacing-100);
1302
- }
1303
-
1304
- @utility gap-150 {
1305
- gap: var(--spacing-150);
1306
- }
1307
-
1308
- @utility gap-x-150 {
1309
- column-gap: var(--spacing-150);
1310
- }
1311
-
1312
- @utility gap-y-150 {
1313
- row-gap: var(--spacing-150);
1314
- }
1315
-
1316
- @utility gap-200 {
1317
- gap: var(--spacing-200);
1318
- }
1319
-
1320
- @utility gap-x-200 {
1321
- column-gap: var(--spacing-200);
1322
- }
1323
-
1324
- @utility gap-y-200 {
1325
- row-gap: var(--spacing-200);
1326
- }
1327
-
1328
- @utility gap-250 {
1329
- gap: var(--spacing-250);
1330
- }
1331
-
1332
- @utility gap-x-250 {
1333
- column-gap: var(--spacing-250);
1334
- }
1335
-
1336
- @utility gap-y-250 {
1337
- row-gap: var(--spacing-250);
1338
- }
1339
-
1340
- @utility gap-300 {
1341
- gap: var(--spacing-300);
1342
- }
1343
-
1344
- @utility gap-x-300 {
1345
- column-gap: var(--spacing-300);
1346
- }
1347
-
1348
- @utility gap-y-300 {
1349
- row-gap: var(--spacing-300);
1350
- }
1351
-
1352
- @utility gap-400 {
1353
- gap: var(--spacing-400);
1354
- }
1355
-
1356
- @utility gap-x-400 {
1357
- column-gap: var(--spacing-400);
1358
- }
1359
-
1360
- @utility gap-y-400 {
1361
- row-gap: var(--spacing-400);
1362
- }
1363
-
1364
- @utility gap-500 {
1365
- gap: var(--spacing-500);
1366
- }
1367
-
1368
- @utility gap-x-500 {
1369
- column-gap: var(--spacing-500);
1370
- }
1371
-
1372
- @utility gap-y-500 {
1373
- row-gap: var(--spacing-500);
1374
- }
1375
-
1376
- @utility gap-600 {
1377
- gap: var(--spacing-600);
1378
- }
1379
-
1380
- @utility gap-x-600 {
1381
- column-gap: var(--spacing-600);
1382
- }
1383
-
1384
- @utility gap-y-600 {
1385
- row-gap: var(--spacing-600);
1386
- }
1387
-
1388
- @utility gap-800 {
1389
- gap: var(--spacing-800);
1390
- }
1391
-
1392
- @utility gap-x-800 {
1393
- column-gap: var(--spacing-800);
1394
- }
1395
-
1396
- @utility gap-y-800 {
1397
- row-gap: var(--spacing-800);
1398
- }
1399
-
1400
1400
  @utility gap-1000 {
1401
1401
  gap: var(--spacing-1000);
1402
1402
  }