@semanticus/semanticus-css 0.3.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 (122) hide show
  1. package/LICENSE +21 -0
  2. package/NOTICE +53 -0
  3. package/README.md +151 -0
  4. package/dist/semanticus-semantics.css +2 -0
  5. package/dist/semanticus-utilities.css +7 -0
  6. package/dist/semanticus-variants.css +1 -0
  7. package/dist/semanticus.css +7 -0
  8. package/dist/semanticus.palette.amber.css +1 -0
  9. package/dist/semanticus.palette.blue.css +1 -0
  10. package/dist/semanticus.palette.cyan.css +1 -0
  11. package/dist/semanticus.palette.fuchsia.css +1 -0
  12. package/dist/semanticus.palette.green.css +1 -0
  13. package/dist/semanticus.palette.grey.css +1 -0
  14. package/dist/semanticus.palette.indigo.css +1 -0
  15. package/dist/semanticus.palette.jade.css +1 -0
  16. package/dist/semanticus.palette.lime.css +1 -0
  17. package/dist/semanticus.palette.orange.css +1 -0
  18. package/dist/semanticus.palette.pink.css +1 -0
  19. package/dist/semanticus.palette.pumpkin.css +1 -0
  20. package/dist/semanticus.palette.purple.css +1 -0
  21. package/dist/semanticus.palette.red.css +1 -0
  22. package/dist/semanticus.palette.sand.css +1 -0
  23. package/dist/semanticus.palette.slate.css +1 -0
  24. package/dist/semanticus.palette.violet.css +1 -0
  25. package/dist/semanticus.palette.yellow.css +1 -0
  26. package/dist/semanticus.palette.zinc.css +1 -0
  27. package/dist/semanticus.size.slim.css +1 -0
  28. package/package.json +102 -0
  29. package/src/_normalize.css +214 -0
  30. package/src/_variables.css +863 -0
  31. package/src/index.css +20 -0
  32. package/src/palettes/amber.css +56 -0
  33. package/src/palettes/blue.css +56 -0
  34. package/src/palettes/cyan.css +56 -0
  35. package/src/palettes/fuchsia.css +56 -0
  36. package/src/palettes/green.css +56 -0
  37. package/src/palettes/grey.css +56 -0
  38. package/src/palettes/indigo.css +56 -0
  39. package/src/palettes/jade.css +56 -0
  40. package/src/palettes/lime.css +56 -0
  41. package/src/palettes/orange.css +56 -0
  42. package/src/palettes/pink.css +56 -0
  43. package/src/palettes/pumpkin.css +56 -0
  44. package/src/palettes/purple.css +56 -0
  45. package/src/palettes/red.css +56 -0
  46. package/src/palettes/sand.css +56 -0
  47. package/src/palettes/slate.css +56 -0
  48. package/src/palettes/violet.css +56 -0
  49. package/src/palettes/yellow.css +56 -0
  50. package/src/palettes/zinc.css +56 -0
  51. package/src/semantics/_aria-busy.css +34 -0
  52. package/src/semantics/_article.css +6 -0
  53. package/src/semantics/_body.css +10 -0
  54. package/src/semantics/_button.css +106 -0
  55. package/src/semantics/_code.css +50 -0
  56. package/src/semantics/_details.css +292 -0
  57. package/src/semantics/_dialog.css +163 -0
  58. package/src/semantics/_document.css +18 -0
  59. package/src/semantics/_embedded.css +41 -0
  60. package/src/semantics/_figure.css +13 -0
  61. package/src/semantics/_hidden.css +7 -0
  62. package/src/semantics/_hr.css +10 -0
  63. package/src/semantics/_input.css +306 -0
  64. package/src/semantics/_links.css +33 -0
  65. package/src/semantics/_main.css +3 -0
  66. package/src/semantics/_nav.css +116 -0
  67. package/src/semantics/_progress.css +62 -0
  68. package/src/semantics/_role-group-search.css +129 -0
  69. package/src/semantics/_role-toolbar.css +17 -0
  70. package/src/semantics/_role-tooltip.css +138 -0
  71. package/src/semantics/_section.css +6 -0
  72. package/src/semantics/_table.css +28 -0
  73. package/src/semantics/_type-checkbox-radio.css +142 -0
  74. package/src/semantics/_type-color.css +22 -0
  75. package/src/semantics/_type-date.css +40 -0
  76. package/src/semantics/_type-file.css +26 -0
  77. package/src/semantics/_type-range.css +90 -0
  78. package/src/semantics/_type-search.css +34 -0
  79. package/src/semantics/_typography.css +137 -0
  80. package/src/semantics/index.css +14 -0
  81. package/src/semantics/modules.css +35 -0
  82. package/src/sizes/slim.css +12 -0
  83. package/src/utilities/_variables.css +244 -0
  84. package/src/utilities/borders/_border-radius.css +216 -0
  85. package/src/utilities/borders/_border-style.css +39 -0
  86. package/src/utilities/borders/_border-width.css +39 -0
  87. package/src/utilities/colors/_background-colors.css +209 -0
  88. package/src/utilities/colors/_border-colors.css +69 -0
  89. package/src/utilities/colors/_text-colors.css +371 -0
  90. package/src/utilities/display/_display.css +259 -0
  91. package/src/utilities/display/_overflow.css +47 -0
  92. package/src/utilities/display/_visibility.css +27 -0
  93. package/src/utilities/effects/_opacity.css +19 -0
  94. package/src/utilities/effects/_shadows.css +48 -0
  95. package/src/utilities/effects/_transforms.css +11 -0
  96. package/src/utilities/index.css +14 -0
  97. package/src/utilities/layout/_flexbox.css +846 -0
  98. package/src/utilities/layout/_grid.css +51 -0
  99. package/src/utilities/layout/_misc.css +77 -0
  100. package/src/utilities/media/_object-fit.css +139 -0
  101. package/src/utilities/modules.css +56 -0
  102. package/src/utilities/positioning/_floats.css +72 -0
  103. package/src/utilities/positioning/_inset.css +47 -0
  104. package/src/utilities/positioning/_position.css +108 -0
  105. package/src/utilities/positioning/_z-index.css +19 -0
  106. package/src/utilities/sizing/_height.css +31 -0
  107. package/src/utilities/sizing/_width.css +31 -0
  108. package/src/utilities/spacing/_gap.css +393 -0
  109. package/src/utilities/spacing/_margin.css +1030 -0
  110. package/src/utilities/spacing/_padding.css +885 -0
  111. package/src/utilities/typography/_font-family.css +7 -0
  112. package/src/utilities/typography/_font-sizes.css +38 -0
  113. package/src/utilities/typography/_font-weight.css +51 -0
  114. package/src/utilities/typography/_text-alignment.css +141 -0
  115. package/src/variants/_card.css +41 -0
  116. package/src/variants/_container.css +36 -0
  117. package/src/variants/_contrast.css +50 -0
  118. package/src/variants/_ghost.css +58 -0
  119. package/src/variants/_secondary.css +38 -0
  120. package/src/variants/_striped.css +10 -0
  121. package/src/variants/index.css +6 -0
  122. package/src/variants/modules.css +12 -0
package/src/utilities/spacing/_gap.css ADDED
@@ -0,0 +1,393 @@
1
+ .gap-0 {
2
+ gap: 0 !important;
3
+ }
4
+
5
+ .gap-1 {
6
+ gap: var(--spacer-1) !important;
7
+ }
8
+
9
+ .gap-2 {
10
+ gap: var(--spacer-2) !important;
11
+ }
12
+
13
+ .gap-3 {
14
+ gap: var(--spacer-3) !important;
15
+ }
16
+
17
+ .gap-4 {
18
+ gap: var(--spacer-4) !important;
19
+ }
20
+
21
+ .gap-5 {
22
+ gap: var(--spacer-5) !important;
23
+ }
24
+
25
+ .row-gap-0 {
26
+ row-gap: 0 !important;
27
+ }
28
+
29
+ .row-gap-1 {
30
+ row-gap: var(--spacer-1) !important;
31
+ }
32
+
33
+ .row-gap-2 {
34
+ row-gap: var(--spacer-2) !important;
35
+ }
36
+
37
+ .row-gap-3 {
38
+ row-gap: var(--spacer-3) !important;
39
+ }
40
+
41
+ .row-gap-4 {
42
+ row-gap: var(--spacer-4) !important;
43
+ }
44
+
45
+ .row-gap-5 {
46
+ row-gap: var(--spacer-5) !important;
47
+ }
48
+
49
+ .column-gap-0 {
50
+ -moz-column-gap: 0 !important;
51
+ column-gap: 0 !important;
52
+ }
53
+
54
+ .column-gap-1 {
55
+ -moz-column-gap: var(--spacer-1) !important;
56
+ column-gap: var(--spacer-1) !important;
57
+ }
58
+
59
+ .column-gap-2 {
60
+ -moz-column-gap: var(--spacer-2) !important;
61
+ column-gap: var(--spacer-2) !important;
62
+ }
63
+
64
+ .column-gap-3 {
65
+ -moz-column-gap: var(--spacer-3) !important;
66
+ column-gap: var(--spacer-3) !important;
67
+ }
68
+
69
+ .column-gap-4 {
70
+ -moz-column-gap: var(--spacer-4) !important;
71
+ column-gap: var(--spacer-4) !important;
72
+ }
73
+
74
+ .column-gap-5 {
75
+ -moz-column-gap: var(--spacer-5) !important;
76
+ column-gap: var(--spacer-5) !important;
77
+ }
78
+
79
+ @media (min-width: 576px) {
80
+ .gap-sm-0 {
81
+ gap: 0 !important;
82
+ }
83
+ .gap-sm-1 {
84
+ gap: var(--spacer-1) !important;
85
+ }
86
+ .gap-sm-2 {
87
+ gap: var(--spacer-2) !important;
88
+ }
89
+ .gap-sm-3 {
90
+ gap: var(--spacer-3) !important;
91
+ }
92
+ .gap-sm-4 {
93
+ gap: var(--spacer-4) !important;
94
+ }
95
+ .gap-sm-5 {
96
+ gap: var(--spacer-5) !important;
97
+ }
98
+ .row-gap-sm-0 {
99
+ row-gap: 0 !important;
100
+ }
101
+ .row-gap-sm-1 {
102
+ row-gap: var(--spacer-1) !important;
103
+ }
104
+ .row-gap-sm-2 {
105
+ row-gap: var(--spacer-2) !important;
106
+ }
107
+ .row-gap-sm-3 {
108
+ row-gap: var(--spacer-3) !important;
109
+ }
110
+ .row-gap-sm-4 {
111
+ row-gap: var(--spacer-4) !important;
112
+ }
113
+ .row-gap-sm-5 {
114
+ row-gap: var(--spacer-5) !important;
115
+ }
116
+ .column-gap-sm-0 {
117
+ -moz-column-gap: 0 !important;
118
+ column-gap: 0 !important;
119
+ }
120
+ .column-gap-sm-1 {
121
+ -moz-column-gap: var(--spacer-1) !important;
122
+ column-gap: var(--spacer-1) !important;
123
+ }
124
+ .column-gap-sm-2 {
125
+ -moz-column-gap: var(--spacer-2) !important;
126
+ column-gap: var(--spacer-2) !important;
127
+ }
128
+ .column-gap-sm-3 {
129
+ -moz-column-gap: var(--spacer-3) !important;
130
+ column-gap: var(--spacer-3) !important;
131
+ }
132
+ .column-gap-sm-4 {
133
+ -moz-column-gap: var(--spacer-4) !important;
134
+ column-gap: var(--spacer-4) !important;
135
+ }
136
+ .column-gap-sm-5 {
137
+ -moz-column-gap: var(--spacer-5) !important;
138
+ column-gap: var(--spacer-5) !important;
139
+ }
140
+ }
141
+
142
+ @media (min-width: 768px) {
143
+ .gap-md-0 {
144
+ gap: 0 !important;
145
+ }
146
+ .gap-md-1 {
147
+ gap: var(--spacer-1) !important;
148
+ }
149
+ .gap-md-2 {
150
+ gap: var(--spacer-2) !important;
151
+ }
152
+ .gap-md-3 {
153
+ gap: var(--spacer-3) !important;
154
+ }
155
+ .gap-md-4 {
156
+ gap: var(--spacer-4) !important;
157
+ }
158
+ .gap-md-5 {
159
+ gap: var(--spacer-5) !important;
160
+ }
161
+ .row-gap-md-0 {
162
+ row-gap: 0 !important;
163
+ }
164
+ .row-gap-md-1 {
165
+ row-gap: var(--spacer-1) !important;
166
+ }
167
+ .row-gap-md-2 {
168
+ row-gap: var(--spacer-2) !important;
169
+ }
170
+ .row-gap-md-3 {
171
+ row-gap: var(--spacer-3) !important;
172
+ }
173
+ .row-gap-md-4 {
174
+ row-gap: var(--spacer-4) !important;
175
+ }
176
+ .row-gap-md-5 {
177
+ row-gap: var(--spacer-5) !important;
178
+ }
179
+ .column-gap-md-0 {
180
+ -moz-column-gap: 0 !important;
181
+ column-gap: 0 !important;
182
+ }
183
+ .column-gap-md-1 {
184
+ -moz-column-gap: var(--spacer-1) !important;
185
+ column-gap: var(--spacer-1) !important;
186
+ }
187
+ .column-gap-md-2 {
188
+ -moz-column-gap: var(--spacer-2) !important;
189
+ column-gap: var(--spacer-2) !important;
190
+ }
191
+ .column-gap-md-3 {
192
+ -moz-column-gap: var(--spacer-3) !important;
193
+ column-gap: var(--spacer-3) !important;
194
+ }
195
+ .column-gap-md-4 {
196
+ -moz-column-gap: var(--spacer-4) !important;
197
+ column-gap: var(--spacer-4) !important;
198
+ }
199
+ .column-gap-md-5 {
200
+ -moz-column-gap: var(--spacer-5) !important;
201
+ column-gap: var(--spacer-5) !important;
202
+ }
203
+ }
204
+
205
+ @media (min-width: 992px) {
206
+ .gap-lg-0 {
207
+ gap: 0 !important;
208
+ }
209
+ .gap-lg-1 {
210
+ gap: var(--spacer-1) !important;
211
+ }
212
+ .gap-lg-2 {
213
+ gap: var(--spacer-2) !important;
214
+ }
215
+ .gap-lg-3 {
216
+ gap: var(--spacer-3) !important;
217
+ }
218
+ .gap-lg-4 {
219
+ gap: var(--spacer-4) !important;
220
+ }
221
+ .gap-lg-5 {
222
+ gap: var(--spacer-5) !important;
223
+ }
224
+ .row-gap-lg-0 {
225
+ row-gap: 0 !important;
226
+ }
227
+ .row-gap-lg-1 {
228
+ row-gap: var(--spacer-1) !important;
229
+ }
230
+ .row-gap-lg-2 {
231
+ row-gap: var(--spacer-2) !important;
232
+ }
233
+ .row-gap-lg-3 {
234
+ row-gap: var(--spacer-3) !important;
235
+ }
236
+ .row-gap-lg-4 {
237
+ row-gap: var(--spacer-4) !important;
238
+ }
239
+ .row-gap-lg-5 {
240
+ row-gap: var(--spacer-5) !important;
241
+ }
242
+ .column-gap-lg-0 {
243
+ -moz-column-gap: 0 !important;
244
+ column-gap: 0 !important;
245
+ }
246
+ .column-gap-lg-1 {
247
+ -moz-column-gap: var(--spacer-1) !important;
248
+ column-gap: var(--spacer-1) !important;
249
+ }
250
+ .column-gap-lg-2 {
251
+ -moz-column-gap: var(--spacer-2) !important;
252
+ column-gap: var(--spacer-2) !important;
253
+ }
254
+ .column-gap-lg-3 {
255
+ -moz-column-gap: var(--spacer-3) !important;
256
+ column-gap: var(--spacer-3) !important;
257
+ }
258
+ .column-gap-lg-4 {
259
+ -moz-column-gap: var(--spacer-4) !important;
260
+ column-gap: var(--spacer-4) !important;
261
+ }
262
+ .column-gap-lg-5 {
263
+ -moz-column-gap: var(--spacer-5) !important;
264
+ column-gap: var(--spacer-5) !important;
265
+ }
266
+ }
267
+
268
+ @media (min-width: 1200px) {
269
+ .gap-xl-0 {
270
+ gap: 0 !important;
271
+ }
272
+ .gap-xl-1 {
273
+ gap: var(--spacer-1) !important;
274
+ }
275
+ .gap-xl-2 {
276
+ gap: var(--spacer-2) !important;
277
+ }
278
+ .gap-xl-3 {
279
+ gap: var(--spacer-3) !important;
280
+ }
281
+ .gap-xl-4 {
282
+ gap: var(--spacer-4) !important;
283
+ }
284
+ .gap-xl-5 {
285
+ gap: var(--spacer-5) !important;
286
+ }
287
+ .row-gap-xl-0 {
288
+ row-gap: 0 !important;
289
+ }
290
+ .row-gap-xl-1 {
291
+ row-gap: var(--spacer-1) !important;
292
+ }
293
+ .row-gap-xl-2 {
294
+ row-gap: var(--spacer-2) !important;
295
+ }
296
+ .row-gap-xl-3 {
297
+ row-gap: var(--spacer-3) !important;
298
+ }
299
+ .row-gap-xl-4 {
300
+ row-gap: var(--spacer-4) !important;
301
+ }
302
+ .row-gap-xl-5 {
303
+ row-gap: var(--spacer-5) !important;
304
+ }
305
+ .column-gap-xl-0 {
306
+ -moz-column-gap: 0 !important;
307
+ column-gap: 0 !important;
308
+ }
309
+ .column-gap-xl-1 {
310
+ -moz-column-gap: var(--spacer-1) !important;
311
+ column-gap: var(--spacer-1) !important;
312
+ }
313
+ .column-gap-xl-2 {
314
+ -moz-column-gap: var(--spacer-2) !important;
315
+ column-gap: var(--spacer-2) !important;
316
+ }
317
+ .column-gap-xl-3 {
318
+ -moz-column-gap: var(--spacer-3) !important;
319
+ column-gap: var(--spacer-3) !important;
320
+ }
321
+ .column-gap-xl-4 {
322
+ -moz-column-gap: var(--spacer-4) !important;
323
+ column-gap: var(--spacer-4) !important;
324
+ }
325
+ .column-gap-xl-5 {
326
+ -moz-column-gap: var(--spacer-5) !important;
327
+ column-gap: var(--spacer-5) !important;
328
+ }
329
+ }
330
+
331
+ @media (min-width: 1400px) {
332
+ .gap-xxl-0 {
333
+ gap: 0 !important;
334
+ }
335
+ .gap-xxl-1 {
336
+ gap: var(--spacer-1) !important;
337
+ }
338
+ .gap-xxl-2 {
339
+ gap: var(--spacer-2) !important;
340
+ }
341
+ .gap-xxl-3 {
342
+ gap: var(--spacer-3) !important;
343
+ }
344
+ .gap-xxl-4 {
345
+ gap: var(--spacer-4) !important;
346
+ }
347
+ .gap-xxl-5 {
348
+ gap: var(--spacer-5) !important;
349
+ }
350
+ .row-gap-xxl-0 {
351
+ row-gap: 0 !important;
352
+ }
353
+ .row-gap-xxl-1 {
354
+ row-gap: var(--spacer-1) !important;
355
+ }
356
+ .row-gap-xxl-2 {
357
+ row-gap: var(--spacer-2) !important;
358
+ }
359
+ .row-gap-xxl-3 {
360
+ row-gap: var(--spacer-3) !important;
361
+ }
362
+ .row-gap-xxl-4 {
363
+ row-gap: var(--spacer-4) !important;
364
+ }
365
+ .row-gap-xxl-5 {
366
+ row-gap: var(--spacer-5) !important;
367
+ }
368
+ .column-gap-xxl-0 {
369
+ -moz-column-gap: 0 !important;
370
+ column-gap: 0 !important;
371
+ }
372
+ .column-gap-xxl-1 {
373
+ -moz-column-gap: var(--spacer-1) !important;
374
+ column-gap: var(--spacer-1) !important;
375
+ }
376
+ .column-gap-xxl-2 {
377
+ -moz-column-gap: var(--spacer-2) !important;
378
+ column-gap: var(--spacer-2) !important;
379
+ }
380
+ .column-gap-xxl-3 {
381
+ -moz-column-gap: var(--spacer-3) !important;
382
+ column-gap: var(--spacer-3) !important;
383
+ }
384
+ .column-gap-xxl-4 {
385
+ -moz-column-gap: var(--spacer-4) !important;
386
+ column-gap: var(--spacer-4) !important;
387
+ }
388
+ .column-gap-xxl-5 {
389
+ -moz-column-gap: var(--spacer-5) !important;
390
+ column-gap: var(--spacer-5) !important;
391
+ }
392
+ }
393
+