@semanticus/semanticus-css 0.7.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.
Files changed (84) hide show
  1. package/README.md +8 -10
  2. package/dist/semanticus-semantics.css +11 -1
  3. package/dist/semanticus.css +14 -2
  4. package/dist/semanticus.palette.amber.css +1 -1
  5. package/dist/semanticus.palette.blue.css +1 -1
  6. package/dist/semanticus.palette.cyan.css +1 -1
  7. package/dist/semanticus.palette.fuchsia.css +1 -1
  8. package/dist/semanticus.palette.green.css +1 -1
  9. package/dist/semanticus.palette.grey.css +1 -1
  10. package/dist/semanticus.palette.indigo.css +1 -1
  11. package/dist/semanticus.palette.jade.css +1 -1
  12. package/dist/semanticus.palette.lime.css +1 -1
  13. package/dist/semanticus.palette.orange.css +1 -1
  14. package/dist/semanticus.palette.pink.css +1 -1
  15. package/dist/semanticus.palette.pumpkin.css +1 -1
  16. package/dist/semanticus.palette.purple.css +1 -1
  17. package/dist/semanticus.palette.red.css +1 -1
  18. package/dist/semanticus.palette.sand.css +1 -1
  19. package/dist/semanticus.palette.slate.css +1 -1
  20. package/dist/semanticus.palette.violet.css +1 -1
  21. package/dist/semanticus.palette.yellow.css +1 -1
  22. package/dist/semanticus.palette.zinc.css +1 -1
  23. package/dist/semanticus.size.pico.css +1 -0
  24. package/package.json +3 -7
  25. package/src/index.css +11 -4
  26. package/src/palettes/amber.css +3 -3
  27. package/src/palettes/blue.css +3 -3
  28. package/src/palettes/cyan.css +3 -3
  29. package/src/palettes/fuchsia.css +3 -3
  30. package/src/palettes/green.css +3 -3
  31. package/src/palettes/grey.css +3 -3
  32. package/src/palettes/indigo.css +3 -3
  33. package/src/palettes/jade.css +3 -3
  34. package/src/palettes/lime.css +3 -3
  35. package/src/palettes/orange.css +3 -3
  36. package/src/palettes/pink.css +3 -3
  37. package/src/palettes/pumpkin.css +3 -3
  38. package/src/palettes/purple.css +3 -3
  39. package/src/palettes/red.css +3 -3
  40. package/src/palettes/sand.css +3 -3
  41. package/src/palettes/slate.css +3 -3
  42. package/src/palettes/violet.css +3 -3
  43. package/src/palettes/yellow.css +3 -3
  44. package/src/palettes/zinc.css +3 -3
  45. package/src/semantics/_aside.css +2 -2
  46. package/src/semantics/_details.css +1 -1
  47. package/src/semantics/_input.css +2 -2
  48. package/src/semantics/_links.css +1 -1
  49. package/src/semantics/_progress.css +1 -1
  50. package/src/semantics/_typography.css +3 -3
  51. package/src/semantics/index.css +9 -4
  52. package/src/sizes/pico.css +95 -0
  53. package/src/utilities/_variables.css +19 -214
  54. package/src/utilities/borders/_border-radius.css +24 -0
  55. package/src/utilities/borders/_border-width.css +8 -0
  56. package/src/utilities/colors/_background-colors.css +51 -44
  57. package/src/utilities/colors/_border-colors.css +14 -14
  58. package/src/utilities/colors/_text-colors.css +80 -80
  59. package/src/utilities/effects/_shadows.css +10 -10
  60. package/src/utilities/layout/_flexbox.css +16 -1
  61. package/src/utilities/layout/_misc.css +2 -2
  62. package/src/utilities/modules.css +6 -0
  63. package/src/utilities/spacing/_gap.css +63 -0
  64. package/src/utilities/spacing/_margin.css +145 -0
  65. package/src/utilities/spacing/_padding.css +145 -0
  66. package/src/utilities/typography/_font-sizes.css +0 -15
  67. package/src/variables/_all.css +15 -739
  68. package/src/variables/_breakpoints.css +10 -0
  69. package/src/variables/_colors.css +366 -0
  70. package/src/variables/_components.css +318 -0
  71. package/src/variables/_elements.css +199 -0
  72. package/src/variables/_icons.css +43 -0
  73. package/src/variables/{_shared.css → _layout.css} +71 -64
  74. package/src/variants/_contrast.css +1 -1
  75. package/src/variants/_ghost.css +8 -8
  76. package/src/variants/_secondary.css +1 -1
  77. package/src/variants/modules.css +0 -1
  78. package/dist/semanticus-utilities.css +0 -7
  79. package/dist/semanticus-variants.css +0 -1
  80. package/dist/semanticus.size.slim.css +0 -1
  81. package/src/sizes/slim.css +0 -41
  82. package/src/utilities/index.css +0 -14
  83. package/src/variants/_flow.css +0 -15
  84. package/src/variants/index.css +0 -9
package/src/utilities/spacing/_padding.css CHANGED
@@ -2,6 +2,10 @@
2
2
  padding: 0 !important;
3
3
  }
4
4
 
5
+ .p-d {
6
+ padding: var(--spacer-default) !important;
7
+ }
8
+
5
9
  .p-1 {
6
10
  padding: var(--spacer-1) !important;
7
11
  }
@@ -27,6 +31,11 @@
27
31
  padding-left: 0 !important;
28
32
  }
29
33
 
34
+ .px-d {
35
+ padding-right: var(--spacer-default) !important;
36
+ padding-left: var(--spacer-default) !important;
37
+ }
38
+
30
39
  .px-1 {
31
40
  padding-right: var(--spacer-1) !important;
32
41
  padding-left: var(--spacer-1) !important;
@@ -57,6 +66,11 @@
57
66
  padding-bottom: 0 !important;
58
67
  }
59
68
 
69
+ .py-d {
70
+ padding-top: var(--spacer-default) !important;
71
+ padding-bottom: var(--spacer-default) !important;
72
+ }
73
+
60
74
  .py-1 {
61
75
  padding-top: var(--spacer-1) !important;
62
76
  padding-bottom: var(--spacer-1) !important;
@@ -86,6 +100,10 @@
86
100
  padding-top: 0 !important;
87
101
  }
88
102
 
103
+ .pt-d {
104
+ padding-top: var(--spacer-default) !important;
105
+ }
106
+
89
107
  .pt-1 {
90
108
  padding-top: var(--spacer-1) !important;
91
109
  }
@@ -110,6 +128,10 @@
110
128
  padding-right: 0 !important;
111
129
  }
112
130
 
131
+ .pe-d {
132
+ padding-right: var(--spacer-default) !important;
133
+ }
134
+
113
135
  .pe-1 {
114
136
  padding-right: var(--spacer-1) !important;
115
137
  }
@@ -134,6 +156,10 @@
134
156
  padding-bottom: 0 !important;
135
157
  }
136
158
 
159
+ .pb-d {
160
+ padding-bottom: var(--spacer-default) !important;
161
+ }
162
+
137
163
  .pb-1 {
138
164
  padding-bottom: var(--spacer-1) !important;
139
165
  }
@@ -158,6 +184,10 @@
158
184
  padding-left: 0 !important;
159
185
  }
160
186
 
187
+ .ps-d {
188
+ padding-left: var(--spacer-default) !important;
189
+ }
190
+
161
191
  .ps-1 {
162
192
  padding-left: var(--spacer-1) !important;
163
193
  }
@@ -182,6 +212,9 @@
182
212
  .p-sm-0 {
183
213
  padding: 0 !important;
184
214
  }
215
+ .p-sm-d {
216
+ padding: var(--spacer-default) !important;
217
+ }
185
218
  .p-sm-1 {
186
219
  padding: var(--spacer-1) !important;
187
220
  }
@@ -201,6 +234,10 @@
201
234
  padding-right: 0 !important;
202
235
  padding-left: 0 !important;
203
236
  }
237
+ .px-sm-d {
238
+ padding-right: var(--spacer-default) !important;
239
+ padding-left: var(--spacer-default) !important;
240
+ }
204
241
  .px-sm-1 {
205
242
  padding-right: var(--spacer-1) !important;
206
243
  padding-left: var(--spacer-1) !important;
@@ -225,6 +262,10 @@
225
262
  padding-top: 0 !important;
226
263
  padding-bottom: 0 !important;
227
264
  }
265
+ .py-sm-d {
266
+ padding-top: var(--spacer-default) !important;
267
+ padding-bottom: var(--spacer-default) !important;
268
+ }
228
269
  .py-sm-1 {
229
270
  padding-top: var(--spacer-1) !important;
230
271
  padding-bottom: var(--spacer-1) !important;
@@ -248,6 +289,9 @@
248
289
  .pt-sm-0 {
249
290
  padding-top: 0 !important;
250
291
  }
292
+ .pt-sm-d {
293
+ padding-top: var(--spacer-default) !important;
294
+ }
251
295
  .pt-sm-1 {
252
296
  padding-top: var(--spacer-1) !important;
253
297
  }
@@ -266,6 +310,9 @@
266
310
  .pe-sm-0 {
267
311
  padding-right: 0 !important;
268
312
  }
313
+ .pe-sm-d {
314
+ padding-right: var(--spacer-default) !important;
315
+ }
269
316
  .pe-sm-1 {
270
317
  padding-right: var(--spacer-1) !important;
271
318
  }
@@ -284,6 +331,9 @@
284
331
  .pb-sm-0 {
285
332
  padding-bottom: 0 !important;
286
333
  }
334
+ .pb-sm-d {
335
+ padding-bottom: var(--spacer-default) !important;
336
+ }
287
337
  .pb-sm-1 {
288
338
  padding-bottom: var(--spacer-1) !important;
289
339
  }
@@ -302,6 +352,9 @@
302
352
  .ps-sm-0 {
303
353
  padding-left: 0 !important;
304
354
  }
355
+ .ps-sm-d {
356
+ padding-left: var(--spacer-default) !important;
357
+ }
305
358
  .ps-sm-1 {
306
359
  padding-left: var(--spacer-1) !important;
307
360
  }
@@ -323,6 +376,9 @@
323
376
  .p-md-0 {
324
377
  padding: 0 !important;
325
378
  }
379
+ .p-md-d {
380
+ padding: var(--spacer-default) !important;
381
+ }
326
382
  .p-md-1 {
327
383
  padding: var(--spacer-1) !important;
328
384
  }
@@ -342,6 +398,10 @@
342
398
  padding-right: 0 !important;
343
399
  padding-left: 0 !important;
344
400
  }
401
+ .px-md-d {
402
+ padding-right: var(--spacer-default) !important;
403
+ padding-left: var(--spacer-default) !important;
404
+ }
345
405
  .px-md-1 {
346
406
  padding-right: var(--spacer-1) !important;
347
407
  padding-left: var(--spacer-1) !important;
@@ -366,6 +426,10 @@
366
426
  padding-top: 0 !important;
367
427
  padding-bottom: 0 !important;
368
428
  }
429
+ .py-md-d {
430
+ padding-top: var(--spacer-default) !important;
431
+ padding-bottom: var(--spacer-default) !important;
432
+ }
369
433
  .py-md-1 {
370
434
  padding-top: var(--spacer-1) !important;
371
435
  padding-bottom: var(--spacer-1) !important;
@@ -389,6 +453,9 @@
389
453
  .pt-md-0 {
390
454
  padding-top: 0 !important;
391
455
  }
456
+ .pt-md-d {
457
+ padding-top: var(--spacer-default) !important;
458
+ }
392
459
  .pt-md-1 {
393
460
  padding-top: var(--spacer-1) !important;
394
461
  }
@@ -407,6 +474,9 @@
407
474
  .pe-md-0 {
408
475
  padding-right: 0 !important;
409
476
  }
477
+ .pe-md-d {
478
+ padding-right: var(--spacer-default) !important;
479
+ }
410
480
  .pe-md-1 {
411
481
  padding-right: var(--spacer-1) !important;
412
482
  }
@@ -425,6 +495,9 @@
425
495
  .pb-md-0 {
426
496
  padding-bottom: 0 !important;
427
497
  }
498
+ .pb-md-d {
499
+ padding-bottom: var(--spacer-default) !important;
500
+ }
428
501
  .pb-md-1 {
429
502
  padding-bottom: var(--spacer-1) !important;
430
503
  }
@@ -443,6 +516,9 @@
443
516
  .ps-md-0 {
444
517
  padding-left: 0 !important;
445
518
  }
519
+ .ps-md-d {
520
+ padding-left: var(--spacer-default) !important;
521
+ }
446
522
  .ps-md-1 {
447
523
  padding-left: var(--spacer-1) !important;
448
524
  }
@@ -464,6 +540,9 @@
464
540
  .p-lg-0 {
465
541
  padding: 0 !important;
466
542
  }
543
+ .p-lg-d {
544
+ padding: var(--spacer-default) !important;
545
+ }
467
546
  .p-lg-1 {
468
547
  padding: var(--spacer-1) !important;
469
548
  }
@@ -483,6 +562,10 @@
483
562
  padding-right: 0 !important;
484
563
  padding-left: 0 !important;
485
564
  }
565
+ .px-lg-d {
566
+ padding-right: var(--spacer-default) !important;
567
+ padding-left: var(--spacer-default) !important;
568
+ }
486
569
  .px-lg-1 {
487
570
  padding-right: var(--spacer-1) !important;
488
571
  padding-left: var(--spacer-1) !important;
@@ -507,6 +590,10 @@
507
590
  padding-top: 0 !important;
508
591
  padding-bottom: 0 !important;
509
592
  }
593
+ .py-lg-d {
594
+ padding-top: var(--spacer-default) !important;
595
+ padding-bottom: var(--spacer-default) !important;
596
+ }
510
597
  .py-lg-1 {
511
598
  padding-top: var(--spacer-1) !important;
512
599
  padding-bottom: var(--spacer-1) !important;
@@ -530,6 +617,9 @@
530
617
  .pt-lg-0 {
531
618
  padding-top: 0 !important;
532
619
  }
620
+ .pt-lg-d {
621
+ padding-top: var(--spacer-default) !important;
622
+ }
533
623
  .pt-lg-1 {
534
624
  padding-top: var(--spacer-1) !important;
535
625
  }
@@ -548,6 +638,9 @@
548
638
  .pe-lg-0 {
549
639
  padding-right: 0 !important;
550
640
  }
641
+ .pe-lg-d {
642
+ padding-right: var(--spacer-default) !important;
643
+ }
551
644
  .pe-lg-1 {
552
645
  padding-right: var(--spacer-1) !important;
553
646
  }
@@ -566,6 +659,9 @@
566
659
  .pb-lg-0 {
567
660
  padding-bottom: 0 !important;
568
661
  }
662
+ .pb-lg-d {
663
+ padding-bottom: var(--spacer-default) !important;
664
+ }
569
665
  .pb-lg-1 {
570
666
  padding-bottom: var(--spacer-1) !important;
571
667
  }
@@ -584,6 +680,9 @@
584
680
  .ps-lg-0 {
585
681
  padding-left: 0 !important;
586
682
  }
683
+ .ps-lg-d {
684
+ padding-left: var(--spacer-default) !important;
685
+ }
587
686
  .ps-lg-1 {
588
687
  padding-left: var(--spacer-1) !important;
589
688
  }
@@ -605,6 +704,9 @@
605
704
  .p-xl-0 {
606
705
  padding: 0 !important;
607
706
  }
707
+ .p-xl-d {
708
+ padding: var(--spacer-default) !important;
709
+ }
608
710
  .p-xl-1 {
609
711
  padding: var(--spacer-1) !important;
610
712
  }
@@ -624,6 +726,10 @@
624
726
  padding-right: 0 !important;
625
727
  padding-left: 0 !important;
626
728
  }
729
+ .px-xl-d {
730
+ padding-right: var(--spacer-default) !important;
731
+ padding-left: var(--spacer-default) !important;
732
+ }
627
733
  .px-xl-1 {
628
734
  padding-right: var(--spacer-1) !important;
629
735
  padding-left: var(--spacer-1) !important;
@@ -648,6 +754,10 @@
648
754
  padding-top: 0 !important;
649
755
  padding-bottom: 0 !important;
650
756
  }
757
+ .py-xl-d {
758
+ padding-top: var(--spacer-default) !important;
759
+ padding-bottom: var(--spacer-default) !important;
760
+ }
651
761
  .py-xl-1 {
652
762
  padding-top: var(--spacer-1) !important;
653
763
  padding-bottom: var(--spacer-1) !important;
@@ -671,6 +781,9 @@
671
781
  .pt-xl-0 {
672
782
  padding-top: 0 !important;
673
783
  }
784
+ .pt-xl-d {
785
+ padding-top: var(--spacer-default) !important;
786
+ }
674
787
  .pt-xl-1 {
675
788
  padding-top: var(--spacer-1) !important;
676
789
  }
@@ -689,6 +802,9 @@
689
802
  .pe-xl-0 {
690
803
  padding-right: 0 !important;
691
804
  }
805
+ .pe-xl-d {
806
+ padding-right: var(--spacer-default) !important;
807
+ }
692
808
  .pe-xl-1 {
693
809
  padding-right: var(--spacer-1) !important;
694
810
  }
@@ -707,6 +823,9 @@
707
823
  .pb-xl-0 {
708
824
  padding-bottom: 0 !important;
709
825
  }
826
+ .pb-xl-d {
827
+ padding-bottom: var(--spacer-default) !important;
828
+ }
710
829
  .pb-xl-1 {
711
830
  padding-bottom: var(--spacer-1) !important;
712
831
  }
@@ -725,6 +844,9 @@
725
844
  .ps-xl-0 {
726
845
  padding-left: 0 !important;
727
846
  }
847
+ .ps-xl-d {
848
+ padding-left: var(--spacer-default) !important;
849
+ }
728
850
  .ps-xl-1 {
729
851
  padding-left: var(--spacer-1) !important;
730
852
  }
@@ -746,6 +868,9 @@
746
868
  .p-xxl-0 {
747
869
  padding: 0 !important;
748
870
  }
871
+ .p-xxl-d {
872
+ padding: var(--spacer-default) !important;
873
+ }
749
874
  .p-xxl-1 {
750
875
  padding: var(--spacer-1) !important;
751
876
  }
@@ -765,6 +890,10 @@
765
890
  padding-right: 0 !important;
766
891
  padding-left: 0 !important;
767
892
  }
893
+ .px-xxl-d {
894
+ padding-right: var(--spacer-default) !important;
895
+ padding-left: var(--spacer-default) !important;
896
+ }
768
897
  .px-xxl-1 {
769
898
  padding-right: var(--spacer-1) !important;
770
899
  padding-left: var(--spacer-1) !important;
@@ -789,6 +918,10 @@
789
918
  padding-top: 0 !important;
790
919
  padding-bottom: 0 !important;
791
920
  }
921
+ .py-xxl-d {
922
+ padding-top: var(--spacer-default) !important;
923
+ padding-bottom: var(--spacer-default) !important;
924
+ }
792
925
  .py-xxl-1 {
793
926
  padding-top: var(--spacer-1) !important;
794
927
  padding-bottom: var(--spacer-1) !important;
@@ -812,6 +945,9 @@
812
945
  .pt-xxl-0 {
813
946
  padding-top: 0 !important;
814
947
  }
948
+ .pt-xxl-d {
949
+ padding-top: var(--spacer-default) !important;
950
+ }
815
951
  .pt-xxl-1 {
816
952
  padding-top: var(--spacer-1) !important;
817
953
  }
@@ -830,6 +966,9 @@
830
966
  .pe-xxl-0 {
831
967
  padding-right: 0 !important;
832
968
  }
969
+ .pe-xxl-d {
970
+ padding-right: var(--spacer-default) !important;
971
+ }
833
972
  .pe-xxl-1 {
834
973
  padding-right: var(--spacer-1) !important;
835
974
  }
@@ -848,6 +987,9 @@
848
987
  .pb-xxl-0 {
849
988
  padding-bottom: 0 !important;
850
989
  }
990
+ .pb-xxl-d {
991
+ padding-bottom: var(--spacer-default) !important;
992
+ }
851
993
  .pb-xxl-1 {
852
994
  padding-bottom: var(--spacer-1) !important;
853
995
  }
@@ -866,6 +1008,9 @@
866
1008
  .ps-xxl-0 {
867
1009
  padding-left: 0 !important;
868
1010
  }
1011
+ .ps-xxl-d {
1012
+ padding-left: var(--spacer-default) !important;
1013
+ }
869
1014
  .ps-xxl-1 {
870
1015
  padding-left: var(--spacer-1) !important;
871
1016
  }
package/src/utilities/typography/_font-sizes.css CHANGED
@@ -21,18 +21,3 @@
21
21
  .fs-6 {
22
22
  font-size: var(--fs-6) !important;
23
23
  }
24
-
25
- @media (--breakpoint-xl) {
26
- .fs-1 {
27
- font-size: 2.5rem !important;
28
- }
29
- .fs-2 {
30
- font-size: 2rem !important;
31
- }
32
- .fs-3 {
33
- font-size: 1.75rem !important;
34
- }
35
- .fs-4 {
36
- font-size: 1.5rem !important;
37
- }
38
- }