@semanticus/semanticus-css 0.7.0 → 0.9.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 (138) hide show
  1. package/README.md +8 -10
  2. package/dist/semanticus-semantics.css +11 -1
  3. package/dist/semanticus.css +13 -1
  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 +13 -14
  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/_misc.css +3 -0
  46. package/src/semantics/attributes/_popover.css +13 -0
  47. package/src/semantics/attributes/_role-group-search.css +140 -0
  48. package/src/semantics/elements/_abbr.css +5 -0
  49. package/src/semantics/elements/_address.css +7 -0
  50. package/src/semantics/elements/_article.css +6 -0
  51. package/src/semantics/{_aside.css → elements/_aside.css} +3 -3
  52. package/src/semantics/elements/_blockquote.css +18 -0
  53. package/src/semantics/{_button.css → elements/_button.css} +2 -2
  54. package/src/semantics/{_code.css → elements/_code.css} +10 -7
  55. package/src/semantics/elements/_del.css +3 -0
  56. package/src/semantics/{_details.css → elements/_details.css} +10 -10
  57. package/src/semantics/elements/_dialog.css +117 -0
  58. package/src/semantics/elements/_footer.css +13 -0
  59. package/src/semantics/elements/_header.css +13 -0
  60. package/src/semantics/elements/_headings.css +34 -0
  61. package/src/semantics/elements/_hgroup.css +14 -0
  62. package/src/semantics/{_hr.css → elements/_hr.css} +1 -1
  63. package/src/semantics/{_input.css → elements/_input.css} +3 -4
  64. package/src/semantics/elements/_ins.css +4 -0
  65. package/src/semantics/{_links.css → elements/_links.css} +11 -4
  66. package/src/semantics/elements/_lists.css +22 -0
  67. package/src/semantics/elements/_main.css +7 -0
  68. package/src/semantics/elements/_mark.css +6 -0
  69. package/src/semantics/{_nav.css → elements/_nav.css} +4 -4
  70. package/src/semantics/elements/_p.css +11 -0
  71. package/src/semantics/{_progress.css → elements/_progress.css} +1 -1
  72. package/src/semantics/elements/_section.css +7 -0
  73. package/src/semantics/elements/_strong.css +4 -0
  74. package/src/semantics/elements/_sub.css +7 -0
  75. package/src/semantics/elements/_sup.css +7 -0
  76. package/src/semantics/{_table.css → elements/_table.css} +7 -2
  77. package/src/semantics/index.css +9 -4
  78. package/src/semantics/modules.css +47 -32
  79. package/src/sizes/pico.css +100 -0
  80. package/src/utilities/_variables.css +19 -214
  81. package/src/utilities/borders/_border-radius.css +24 -0
  82. package/src/utilities/borders/_border-width.css +8 -0
  83. package/src/utilities/colors/_background-colors.css +51 -44
  84. package/src/utilities/colors/_border-colors.css +14 -14
  85. package/src/utilities/colors/_text-colors.css +80 -80
  86. package/src/utilities/effects/_shadows.css +10 -10
  87. package/src/utilities/layout/_flexbox.css +16 -1
  88. package/src/utilities/layout/_misc.css +2 -2
  89. package/src/utilities/modules.css +6 -0
  90. package/src/utilities/spacing/_gap.css +63 -0
  91. package/src/utilities/spacing/_margin.css +145 -0
  92. package/src/utilities/spacing/_padding.css +145 -0
  93. package/src/utilities/typography/_font-sizes.css +0 -15
  94. package/src/variables/_all.css +15 -739
  95. package/src/variables/_breakpoints.css +10 -0
  96. package/src/variables/_colors.css +355 -0
  97. package/src/variables/_components.css +330 -0
  98. package/src/variables/_elements.css +194 -0
  99. package/src/variables/_icons.css +55 -0
  100. package/src/variables/_layout.css +123 -0
  101. package/src/variants/_contrast.css +28 -14
  102. package/src/variants/_ghost.css +36 -29
  103. package/src/variants/_pane-panel-card.css +54 -0
  104. package/src/variants/_secondary.css +25 -12
  105. package/src/variants/_sidebar.css +49 -9
  106. package/src/variants/modules.css +4 -6
  107. package/dist/semanticus-utilities.css +0 -7
  108. package/dist/semanticus-variants.css +0 -1
  109. package/dist/semanticus.size.slim.css +0 -1
  110. package/src/semantics/_article.css +0 -12
  111. package/src/semantics/_dialog.css +0 -157
  112. package/src/semantics/_footer.css +0 -12
  113. package/src/semantics/_header.css +0 -12
  114. package/src/semantics/_main.css +0 -10
  115. package/src/semantics/_role-group-search.css +0 -129
  116. package/src/semantics/_section.css +0 -9
  117. package/src/semantics/_typography.css +0 -146
  118. package/src/sizes/slim.css +0 -41
  119. package/src/utilities/index.css +0 -14
  120. package/src/variables/_shared.css +0 -121
  121. package/src/variants/_card.css +0 -45
  122. package/src/variants/_flow.css +0 -15
  123. package/src/variants/_panel.css +0 -18
  124. package/src/variants/index.css +0 -9
  125. /package/src/semantics/{_aria-busy.css → attributes/_aria-busy.css} +0 -0
  126. /package/src/semantics/{_hidden.css → attributes/_hidden.css} +0 -0
  127. /package/src/semantics/{_role-toolbar.css → attributes/_role-toolbar.css} +0 -0
  128. /package/src/semantics/{_role-tooltip.css → attributes/_role-tooltip.css} +0 -0
  129. /package/src/semantics/{_body.css → elements/_body.css} +0 -0
  130. /package/src/semantics/{_document.css → elements/_document.css} +0 -0
  131. /package/src/semantics/{_embedded.css → elements/_embedded.css} +0 -0
  132. /package/src/semantics/{_figure.css → elements/_figure.css} +0 -0
  133. /package/src/semantics/{_type-checkbox-radio.css → elements/_type-checkbox-radio.css} +0 -0
  134. /package/src/semantics/{_type-color.css → elements/_type-color.css} +0 -0
  135. /package/src/semantics/{_type-date.css → elements/_type-date.css} +0 -0
  136. /package/src/semantics/{_type-file.css → elements/_type-file.css} +0 -0
  137. /package/src/semantics/{_type-range.css → elements/_type-range.css} +0 -0
  138. /package/src/semantics/{_type-search.css → elements/_type-search.css} +0 -0
package/src/utilities/spacing/_margin.css CHANGED
@@ -2,6 +2,10 @@
2
2
  margin: 0 !important;
3
3
  }
4
4
 
5
+ .m-d {
6
+ margin: var(--spacer-default) !important;
7
+ }
8
+
5
9
  .m-1 {
6
10
  margin: var(--spacer-1) !important;
7
11
  }
@@ -31,6 +35,11 @@
31
35
  margin-left: 0 !important;
32
36
  }
33
37
 
38
+ .mx-d {
39
+ margin-right: var(--spacer-default) !important;
40
+ margin-left: var(--spacer-default) !important;
41
+ }
42
+
34
43
  .mx-1 {
35
44
  margin-right: var(--spacer-1) !important;
36
45
  margin-left: var(--spacer-1) !important;
@@ -66,6 +75,11 @@
66
75
  margin-bottom: 0 !important;
67
76
  }
68
77
 
78
+ .my-d {
79
+ margin-top: var(--spacer-default) !important;
80
+ margin-bottom: var(--spacer-default) !important;
81
+ }
82
+
69
83
  .my-1 {
70
84
  margin-top: var(--spacer-1) !important;
71
85
  margin-bottom: var(--spacer-1) !important;
@@ -100,6 +114,10 @@
100
114
  margin-top: 0 !important;
101
115
  }
102
116
 
117
+ .mt-d {
118
+ margin-top: var(--spacer-default) !important;
119
+ }
120
+
103
121
  .mt-1 {
104
122
  margin-top: var(--spacer-1) !important;
105
123
  }
@@ -128,6 +146,10 @@
128
146
  margin-right: 0 !important;
129
147
  }
130
148
 
149
+ .me-d {
150
+ margin-right: var(--spacer-default) !important;
151
+ }
152
+
131
153
  .me-1 {
132
154
  margin-right: var(--spacer-1) !important;
133
155
  }
@@ -156,6 +178,10 @@
156
178
  margin-bottom: 0 !important;
157
179
  }
158
180
 
181
+ .mb-d {
182
+ margin-bottom: var(--spacer-default) !important;
183
+ }
184
+
159
185
  .mb-1 {
160
186
  margin-bottom: var(--spacer-1) !important;
161
187
  }
@@ -184,6 +210,10 @@
184
210
  margin-left: 0 !important;
185
211
  }
186
212
 
213
+ .ms-d {
214
+ margin-left: var(--spacer-default) !important;
215
+ }
216
+
187
217
  .ms-1 {
188
218
  margin-left: var(--spacer-1) !important;
189
219
  }
@@ -212,6 +242,9 @@
212
242
  .m-sm-0 {
213
243
  margin: 0 !important;
214
244
  }
245
+ .m-sm-d {
246
+ margin: var(--spacer-default) !important;
247
+ }
215
248
  .m-sm-1 {
216
249
  margin: var(--spacer-1) !important;
217
250
  }
@@ -234,6 +267,10 @@
234
267
  margin-right: 0 !important;
235
268
  margin-left: 0 !important;
236
269
  }
270
+ .mx-sm-d {
271
+ margin-right: var(--spacer-default) !important;
272
+ margin-left: var(--spacer-default) !important;
273
+ }
237
274
  .mx-sm-1 {
238
275
  margin-right: var(--spacer-1) !important;
239
276
  margin-left: var(--spacer-1) !important;
@@ -262,6 +299,10 @@
262
299
  margin-top: 0 !important;
263
300
  margin-bottom: 0 !important;
264
301
  }
302
+ .my-sm-d {
303
+ margin-top: var(--spacer-default) !important;
304
+ margin-bottom: var(--spacer-default) !important;
305
+ }
265
306
  .my-sm-1 {
266
307
  margin-top: var(--spacer-1) !important;
267
308
  margin-bottom: var(--spacer-1) !important;
@@ -289,6 +330,9 @@
289
330
  .mt-sm-0 {
290
331
  margin-top: 0 !important;
291
332
  }
333
+ .mt-sm-d {
334
+ margin-top: var(--spacer-default) !important;
335
+ }
292
336
  .mt-sm-1 {
293
337
  margin-top: var(--spacer-1) !important;
294
338
  }
@@ -310,6 +354,9 @@
310
354
  .me-sm-0 {
311
355
  margin-right: 0 !important;
312
356
  }
357
+ .me-sm-d {
358
+ margin-right: var(--spacer-default) !important;
359
+ }
313
360
  .me-sm-1 {
314
361
  margin-right: var(--spacer-1) !important;
315
362
  }
@@ -331,6 +378,9 @@
331
378
  .mb-sm-0 {
332
379
  margin-bottom: 0 !important;
333
380
  }
381
+ .mb-sm-d {
382
+ margin-bottom: var(--spacer-default) !important;
383
+ }
334
384
  .mb-sm-1 {
335
385
  margin-bottom: var(--spacer-1) !important;
336
386
  }
@@ -352,6 +402,9 @@
352
402
  .ms-sm-0 {
353
403
  margin-left: 0 !important;
354
404
  }
405
+ .ms-sm-d {
406
+ margin-left: var(--spacer-default) !important;
407
+ }
355
408
  .ms-sm-1 {
356
409
  margin-left: var(--spacer-1) !important;
357
410
  }
@@ -376,6 +429,9 @@
376
429
  .m-md-0 {
377
430
  margin: 0 !important;
378
431
  }
432
+ .m-md-d {
433
+ margin: var(--spacer-default) !important;
434
+ }
379
435
  .m-md-1 {
380
436
  margin: var(--spacer-1) !important;
381
437
  }
@@ -398,6 +454,10 @@
398
454
  margin-right: 0 !important;
399
455
  margin-left: 0 !important;
400
456
  }
457
+ .mx-md-d {
458
+ margin-right: var(--spacer-default) !important;
459
+ margin-left: var(--spacer-default) !important;
460
+ }
401
461
  .mx-md-1 {
402
462
  margin-right: var(--spacer-1) !important;
403
463
  margin-left: var(--spacer-1) !important;
@@ -426,6 +486,10 @@
426
486
  margin-top: 0 !important;
427
487
  margin-bottom: 0 !important;
428
488
  }
489
+ .my-md-d {
490
+ margin-top: var(--spacer-default) !important;
491
+ margin-bottom: var(--spacer-default) !important;
492
+ }
429
493
  .my-md-1 {
430
494
  margin-top: var(--spacer-1) !important;
431
495
  margin-bottom: var(--spacer-1) !important;
@@ -453,6 +517,9 @@
453
517
  .mt-md-0 {
454
518
  margin-top: 0 !important;
455
519
  }
520
+ .mt-md-d {
521
+ margin-top: var(--spacer-default) !important;
522
+ }
456
523
  .mt-md-1 {
457
524
  margin-top: var(--spacer-1) !important;
458
525
  }
@@ -474,6 +541,9 @@
474
541
  .me-md-0 {
475
542
  margin-right: 0 !important;
476
543
  }
544
+ .me-md-d {
545
+ margin-right: var(--spacer-default) !important;
546
+ }
477
547
  .me-md-1 {
478
548
  margin-right: var(--spacer-1) !important;
479
549
  }
@@ -495,6 +565,9 @@
495
565
  .mb-md-0 {
496
566
  margin-bottom: 0 !important;
497
567
  }
568
+ .mb-md-d {
569
+ margin-bottom: var(--spacer-default) !important;
570
+ }
498
571
  .mb-md-1 {
499
572
  margin-bottom: var(--spacer-1) !important;
500
573
  }
@@ -516,6 +589,9 @@
516
589
  .ms-md-0 {
517
590
  margin-left: 0 !important;
518
591
  }
592
+ .ms-md-d {
593
+ margin-left: var(--spacer-default) !important;
594
+ }
519
595
  .ms-md-1 {
520
596
  margin-left: var(--spacer-1) !important;
521
597
  }
@@ -540,6 +616,9 @@
540
616
  .m-lg-0 {
541
617
  margin: 0 !important;
542
618
  }
619
+ .m-lg-d {
620
+ margin: var(--spacer-default) !important;
621
+ }
543
622
  .m-lg-1 {
544
623
  margin: var(--spacer-1) !important;
545
624
  }
@@ -562,6 +641,10 @@
562
641
  margin-right: 0 !important;
563
642
  margin-left: 0 !important;
564
643
  }
644
+ .mx-lg-d {
645
+ margin-right: var(--spacer-default) !important;
646
+ margin-left: var(--spacer-default) !important;
647
+ }
565
648
  .mx-lg-1 {
566
649
  margin-right: var(--spacer-1) !important;
567
650
  margin-left: var(--spacer-1) !important;
@@ -590,6 +673,10 @@
590
673
  margin-top: 0 !important;
591
674
  margin-bottom: 0 !important;
592
675
  }
676
+ .my-lg-d {
677
+ margin-top: var(--spacer-default) !important;
678
+ margin-bottom: var(--spacer-default) !important;
679
+ }
593
680
  .my-lg-1 {
594
681
  margin-top: var(--spacer-1) !important;
595
682
  margin-bottom: var(--spacer-1) !important;
@@ -617,6 +704,9 @@
617
704
  .mt-lg-0 {
618
705
  margin-top: 0 !important;
619
706
  }
707
+ .mt-lg-d {
708
+ margin-top: var(--spacer-default) !important;
709
+ }
620
710
  .mt-lg-1 {
621
711
  margin-top: var(--spacer-1) !important;
622
712
  }
@@ -638,6 +728,9 @@
638
728
  .me-lg-0 {
639
729
  margin-right: 0 !important;
640
730
  }
731
+ .me-lg-d {
732
+ margin-right: var(--spacer-default) !important;
733
+ }
641
734
  .me-lg-1 {
642
735
  margin-right: var(--spacer-1) !important;
643
736
  }
@@ -659,6 +752,9 @@
659
752
  .mb-lg-0 {
660
753
  margin-bottom: 0 !important;
661
754
  }
755
+ .mb-lg-d {
756
+ margin-bottom: var(--spacer-default) !important;
757
+ }
662
758
  .mb-lg-1 {
663
759
  margin-bottom: var(--spacer-1) !important;
664
760
  }
@@ -680,6 +776,9 @@
680
776
  .ms-lg-0 {
681
777
  margin-left: 0 !important;
682
778
  }
779
+ .ms-lg-d {
780
+ margin-left: var(--spacer-default) !important;
781
+ }
683
782
  .ms-lg-1 {
684
783
  margin-left: var(--spacer-1) !important;
685
784
  }
@@ -704,6 +803,9 @@
704
803
  .m-xl-0 {
705
804
  margin: 0 !important;
706
805
  }
806
+ .m-xl-d {
807
+ margin: var(--spacer-default) !important;
808
+ }
707
809
  .m-xl-1 {
708
810
  margin: var(--spacer-1) !important;
709
811
  }
@@ -726,6 +828,10 @@
726
828
  margin-right: 0 !important;
727
829
  margin-left: 0 !important;
728
830
  }
831
+ .mx-xl-d {
832
+ margin-right: var(--spacer-default) !important;
833
+ margin-left: var(--spacer-default) !important;
834
+ }
729
835
  .mx-xl-1 {
730
836
  margin-right: var(--spacer-1) !important;
731
837
  margin-left: var(--spacer-1) !important;
@@ -754,6 +860,10 @@
754
860
  margin-top: 0 !important;
755
861
  margin-bottom: 0 !important;
756
862
  }
863
+ .my-xl-d {
864
+ margin-top: var(--spacer-default) !important;
865
+ margin-bottom: var(--spacer-default) !important;
866
+ }
757
867
  .my-xl-1 {
758
868
  margin-top: var(--spacer-1) !important;
759
869
  margin-bottom: var(--spacer-1) !important;
@@ -781,6 +891,9 @@
781
891
  .mt-xl-0 {
782
892
  margin-top: 0 !important;
783
893
  }
894
+ .mt-xl-d {
895
+ margin-top: var(--spacer-default) !important;
896
+ }
784
897
  .mt-xl-1 {
785
898
  margin-top: var(--spacer-1) !important;
786
899
  }
@@ -802,6 +915,9 @@
802
915
  .me-xl-0 {
803
916
  margin-right: 0 !important;
804
917
  }
918
+ .me-xl-d {
919
+ margin-right: var(--spacer-default) !important;
920
+ }
805
921
  .me-xl-1 {
806
922
  margin-right: var(--spacer-1) !important;
807
923
  }
@@ -823,6 +939,9 @@
823
939
  .mb-xl-0 {
824
940
  margin-bottom: 0 !important;
825
941
  }
942
+ .mb-xl-d {
943
+ margin-bottom: var(--spacer-default) !important;
944
+ }
826
945
  .mb-xl-1 {
827
946
  margin-bottom: var(--spacer-1) !important;
828
947
  }
@@ -844,6 +963,9 @@
844
963
  .ms-xl-0 {
845
964
  margin-left: 0 !important;
846
965
  }
966
+ .ms-xl-d {
967
+ margin-left: var(--spacer-default) !important;
968
+ }
847
969
  .ms-xl-1 {
848
970
  margin-left: var(--spacer-1) !important;
849
971
  }
@@ -868,6 +990,9 @@
868
990
  .m-xxl-0 {
869
991
  margin: 0 !important;
870
992
  }
993
+ .m-xxl-d {
994
+ margin: var(--spacer-default) !important;
995
+ }
871
996
  .m-xxl-1 {
872
997
  margin: var(--spacer-1) !important;
873
998
  }
@@ -890,6 +1015,10 @@
890
1015
  margin-right: 0 !important;
891
1016
  margin-left: 0 !important;
892
1017
  }
1018
+ .mx-xxl-d {
1019
+ margin-right: var(--spacer-default) !important;
1020
+ margin-left: var(--spacer-default) !important;
1021
+ }
893
1022
  .mx-xxl-1 {
894
1023
  margin-right: var(--spacer-1) !important;
895
1024
  margin-left: var(--spacer-1) !important;
@@ -918,6 +1047,10 @@
918
1047
  margin-top: 0 !important;
919
1048
  margin-bottom: 0 !important;
920
1049
  }
1050
+ .my-xxl-d {
1051
+ margin-top: var(--spacer-default) !important;
1052
+ margin-bottom: var(--spacer-default) !important;
1053
+ }
921
1054
  .my-xxl-1 {
922
1055
  margin-top: var(--spacer-1) !important;
923
1056
  margin-bottom: var(--spacer-1) !important;
@@ -945,6 +1078,9 @@
945
1078
  .mt-xxl-0 {
946
1079
  margin-top: 0 !important;
947
1080
  }
1081
+ .mt-xxl-d {
1082
+ margin-top: var(--spacer-default) !important;
1083
+ }
948
1084
  .mt-xxl-1 {
949
1085
  margin-top: var(--spacer-1) !important;
950
1086
  }
@@ -966,6 +1102,9 @@
966
1102
  .me-xxl-0 {
967
1103
  margin-right: 0 !important;
968
1104
  }
1105
+ .me-xxl-d {
1106
+ margin-right: var(--spacer-default) !important;
1107
+ }
969
1108
  .me-xxl-1 {
970
1109
  margin-right: var(--spacer-1) !important;
971
1110
  }
@@ -987,6 +1126,9 @@
987
1126
  .mb-xxl-0 {
988
1127
  margin-bottom: 0 !important;
989
1128
  }
1129
+ .mb-xxl-d {
1130
+ margin-bottom: var(--spacer-default) !important;
1131
+ }
990
1132
  .mb-xxl-1 {
991
1133
  margin-bottom: var(--spacer-1) !important;
992
1134
  }
@@ -1008,6 +1150,9 @@
1008
1150
  .ms-xxl-0 {
1009
1151
  margin-left: 0 !important;
1010
1152
  }
1153
+ .ms-xxl-d {
1154
+ margin-left: var(--spacer-default) !important;
1155
+ }
1011
1156
  .ms-xxl-1 {
1012
1157
  margin-left: var(--spacer-1) !important;
1013
1158
  }