@heliosgraphics/css 1.0.0-alpha.3

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 (35) hide show
  1. package/LICENSE.md +21 -0
  2. package/dist/css.easings.css +1 -0
  3. package/dist/css.min.css +1 -0
  4. package/dist/css.reset.css +1 -0
  5. package/dist/set/borderRadius.css +1 -0
  6. package/dist/set/cursor.css +1 -0
  7. package/dist/set/display.css +1 -0
  8. package/dist/set/flex.css +1 -0
  9. package/dist/set/grid.css +1 -0
  10. package/dist/set/height.css +1 -0
  11. package/dist/set/list.css +1 -0
  12. package/dist/set/margin.css +1 -0
  13. package/dist/set/opacity.css +1 -0
  14. package/dist/set/overflow.css +1 -0
  15. package/dist/set/padding.css +1 -0
  16. package/dist/set/position.css +1 -0
  17. package/dist/set/type.css +1 -0
  18. package/dist/set/width.css +1 -0
  19. package/package.json +30 -0
  20. package/src/rules/border-radius.ts +11 -0
  21. package/src/rules/cursor.ts +17 -0
  22. package/src/rules/display.ts +38 -0
  23. package/src/rules/flex.ts +91 -0
  24. package/src/rules/grid.ts +272 -0
  25. package/src/rules/height.ts +134 -0
  26. package/src/rules/index.ts +32 -0
  27. package/src/rules/list.ts +69 -0
  28. package/src/rules/margin.ts +421 -0
  29. package/src/rules/opacity.ts +15 -0
  30. package/src/rules/overflow.ts +13 -0
  31. package/src/rules/padding.ts +417 -0
  32. package/src/rules/position.ts +402 -0
  33. package/src/rules/type.ts +222 -0
  34. package/src/rules/width.ts +134 -0
  35. package/src/types/meta.ts +27 -0
package/src/rules/margin.ts ADDED
@@ -0,0 +1,421 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const MARGIN: Array<FractureRuleType> = [
4
+ { selector: "m-0", declarations: { margin: "0" } },
5
+ { selector: "m-px", declarations: { margin: "var(--space-px)" } },
6
+ { selector: "m-1", declarations: { margin: "var(--space-1)" } },
7
+ { selector: "m-2", declarations: { margin: "var(--space-2)" } },
8
+ { selector: "m-3", declarations: { margin: "var(--space-3)" } },
9
+ { selector: "m-4", declarations: { margin: "var(--space-4)" } },
10
+ { selector: "m-5", declarations: { margin: "var(--space-5)" } },
11
+ { selector: "m-6", declarations: { margin: "var(--space-6)" } },
12
+ { selector: "m-7", declarations: { margin: "var(--space-7)" } },
13
+ { selector: "m-8", declarations: { margin: "var(--space-8)" } },
14
+ { selector: "m-9", declarations: { margin: "var(--space-9)" } },
15
+ { selector: "m-10", declarations: { margin: "var(--space-10)" } },
16
+ { selector: "m-11", declarations: { margin: "var(--space-11)" } },
17
+ { selector: "m-12", declarations: { margin: "var(--space-12)" } },
18
+ { selector: "m-13", declarations: { margin: "var(--space-13)" } },
19
+ { selector: "m-14", declarations: { margin: "var(--space-14)" } },
20
+ { selector: "m-15", declarations: { margin: "var(--space-15)" } },
21
+ { selector: "m-16", declarations: { margin: "var(--space-16)" } },
22
+ { selector: "m-24", declarations: { margin: "var(--space-24)" } },
23
+ { selector: "m-32", declarations: { margin: "var(--space-32)" } },
24
+ { selector: "m-40", declarations: { margin: "var(--space-40)" } },
25
+ { selector: "m-48", declarations: { margin: "var(--space-48)" } },
26
+
27
+ { selector: "mr-0", declarations: { marginRight: "0" } },
28
+ { selector: "mr-px", declarations: { marginRight: "var(--space-px)" } },
29
+ { selector: "mr-1", declarations: { marginRight: "var(--space-1)" } },
30
+ { selector: "mr-2", declarations: { marginRight: "var(--space-2)" } },
31
+ { selector: "mr-3", declarations: { marginRight: "var(--space-3)" } },
32
+ { selector: "mr-4", declarations: { marginRight: "var(--space-4)" } },
33
+ { selector: "mr-5", declarations: { marginRight: "var(--space-5)" } },
34
+ { selector: "mr-6", declarations: { marginRight: "var(--space-6)" } },
35
+ { selector: "mr-7", declarations: { marginRight: "var(--space-7)" } },
36
+ { selector: "mr-8", declarations: { marginRight: "var(--space-8)" } },
37
+ { selector: "mr-9", declarations: { marginRight: "var(--space-9)" } },
38
+ { selector: "mr-10", declarations: { marginRight: "var(--space-10)" } },
39
+ { selector: "mr-11", declarations: { marginRight: "var(--space-11)" } },
40
+ { selector: "mr-12", declarations: { marginRight: "var(--space-12)" } },
41
+ { selector: "mr-13", declarations: { marginRight: "var(--space-13)" } },
42
+ { selector: "mr-14", declarations: { marginRight: "var(--space-14)" } },
43
+ { selector: "mr-15", declarations: { marginRight: "var(--space-15)" } },
44
+ { selector: "mr-16", declarations: { marginRight: "var(--space-16)" } },
45
+ { selector: "mr-24", declarations: { marginRight: "var(--space-24)" } },
46
+ { selector: "mr-32", declarations: { marginRight: "var(--space-32)" } },
47
+ { selector: "mr-40", declarations: { marginRight: "var(--space-40)" } },
48
+ { selector: "mr-48", declarations: { marginRight: "var(--space-48)" } },
49
+
50
+ { selector: "ml-0", declarations: { marginLeft: "0" } },
51
+ { selector: "ml-px", declarations: { marginLeft: "var(--space-px)" } },
52
+ { selector: "ml-1", declarations: { marginLeft: "var(--space-1)" } },
53
+ { selector: "ml-2", declarations: { marginLeft: "var(--space-2)" } },
54
+ { selector: "ml-3", declarations: { marginLeft: "var(--space-3)" } },
55
+ { selector: "ml-4", declarations: { marginLeft: "var(--space-4)" } },
56
+ { selector: "ml-5", declarations: { marginLeft: "var(--space-5)" } },
57
+ { selector: "ml-6", declarations: { marginLeft: "var(--space-6)" } },
58
+ { selector: "ml-7", declarations: { marginLeft: "var(--space-7)" } },
59
+ { selector: "ml-8", declarations: { marginLeft: "var(--space-8)" } },
60
+ { selector: "ml-9", declarations: { marginLeft: "var(--space-9)" } },
61
+ { selector: "ml-10", declarations: { marginLeft: "var(--space-10)" } },
62
+ { selector: "ml-11", declarations: { marginLeft: "var(--space-11)" } },
63
+ { selector: "ml-12", declarations: { marginLeft: "var(--space-12)" } },
64
+ { selector: "ml-13", declarations: { marginLeft: "var(--space-13)" } },
65
+ { selector: "ml-14", declarations: { marginLeft: "var(--space-14)" } },
66
+ { selector: "ml-15", declarations: { marginLeft: "var(--space-15)" } },
67
+ { selector: "ml-16", declarations: { marginLeft: "var(--space-16)" } },
68
+ { selector: "ml-24", declarations: { marginLeft: "var(--space-24)" } },
69
+ { selector: "ml-32", declarations: { marginLeft: "var(--space-32)" } },
70
+ { selector: "ml-40", declarations: { marginLeft: "var(--space-40)" } },
71
+ { selector: "ml-48", declarations: { marginLeft: "var(--space-48)" } },
72
+
73
+ { selector: "mt-0", declarations: { marginTop: "0" } },
74
+ { selector: "mt-px", declarations: { marginTop: "var(--space-px)" } },
75
+ { selector: "mt-1", declarations: { marginTop: "var(--space-1)" } },
76
+ { selector: "mt-2", declarations: { marginTop: "var(--space-2)" } },
77
+ { selector: "mt-3", declarations: { marginTop: "var(--space-3)" } },
78
+ { selector: "mt-4", declarations: { marginTop: "var(--space-4)" } },
79
+ { selector: "mt-5", declarations: { marginTop: "var(--space-5)" } },
80
+ { selector: "mt-6", declarations: { marginTop: "var(--space-6)" } },
81
+ { selector: "mt-7", declarations: { marginTop: "var(--space-7)" } },
82
+ { selector: "mt-8", declarations: { marginTop: "var(--space-8)" } },
83
+ { selector: "mt-9", declarations: { marginTop: "var(--space-9)" } },
84
+ { selector: "mt-10", declarations: { marginTop: "var(--space-10)" } },
85
+ { selector: "mt-11", declarations: { marginTop: "var(--space-11)" } },
86
+ { selector: "mt-12", declarations: { marginTop: "var(--space-12)" } },
87
+ { selector: "mt-13", declarations: { marginTop: "var(--space-13)" } },
88
+ { selector: "mt-14", declarations: { marginTop: "var(--space-14)" } },
89
+ { selector: "mt-15", declarations: { marginTop: "var(--space-15)" } },
90
+ { selector: "mt-16", declarations: { marginTop: "var(--space-16)" } },
91
+ { selector: "mt-24", declarations: { marginTop: "var(--space-24)" } },
92
+ { selector: "mt-32", declarations: { marginTop: "var(--space-32)" } },
93
+ { selector: "mt-40", declarations: { marginTop: "var(--space-40)" } },
94
+ { selector: "mt-48", declarations: { marginTop: "var(--space-48)" } },
95
+
96
+ { selector: "mb-0", declarations: { marginBottom: "0" } },
97
+ { selector: "mb-px", declarations: { marginBottom: "var(--space-px)" } },
98
+ { selector: "mb-1", declarations: { marginBottom: "var(--space-1)" } },
99
+ { selector: "mb-2", declarations: { marginBottom: "var(--space-2)" } },
100
+ { selector: "mb-3", declarations: { marginBottom: "var(--space-3)" } },
101
+ { selector: "mb-4", declarations: { marginBottom: "var(--space-4)" } },
102
+ { selector: "mb-5", declarations: { marginBottom: "var(--space-5)" } },
103
+ { selector: "mb-6", declarations: { marginBottom: "var(--space-6)" } },
104
+ { selector: "mb-7", declarations: { marginBottom: "var(--space-7)" } },
105
+ { selector: "mb-8", declarations: { marginBottom: "var(--space-8)" } },
106
+ { selector: "mb-9", declarations: { marginBottom: "var(--space-9)" } },
107
+ { selector: "mb-10", declarations: { marginBottom: "var(--space-10)" } },
108
+ { selector: "mb-11", declarations: { marginBottom: "var(--space-11)" } },
109
+ { selector: "mb-12", declarations: { marginBottom: "var(--space-12)" } },
110
+ { selector: "mb-13", declarations: { marginBottom: "var(--space-13)" } },
111
+ { selector: "mb-14", declarations: { marginBottom: "var(--space-14)" } },
112
+ { selector: "mb-15", declarations: { marginBottom: "var(--space-15)" } },
113
+ { selector: "mb-16", declarations: { marginBottom: "var(--space-16)" } },
114
+ { selector: "mb-24", declarations: { marginBottom: "var(--space-24)" } },
115
+ { selector: "mb-32", declarations: { marginBottom: "var(--space-32)" } },
116
+ { selector: "mb-40", declarations: { marginBottom: "var(--space-40)" } },
117
+ { selector: "mb-48", declarations: { marginBottom: "var(--space-48)" } },
118
+
119
+ // intentionally more explicit than block/inline
120
+ { selector: "my-0", declarations: { marginTop: "0", marginBottom: "0" } },
121
+ {
122
+ selector: "my-px",
123
+ declarations: {
124
+ marginTop: "var(--space-px)",
125
+ marginBottom: "var(--space-px)",
126
+ },
127
+ },
128
+ {
129
+ selector: "my-1",
130
+ declarations: {
131
+ marginTop: "var(--space-1)",
132
+ marginBottom: "var(--space-1)",
133
+ },
134
+ },
135
+ {
136
+ selector: "my-2",
137
+ declarations: {
138
+ marginTop: "var(--space-2)",
139
+ marginBottom: "var(--space-2)",
140
+ },
141
+ },
142
+ {
143
+ selector: "my-3",
144
+ declarations: {
145
+ marginTop: "var(--space-3)",
146
+ marginBottom: "var(--space-3)",
147
+ },
148
+ },
149
+ {
150
+ selector: "my-4",
151
+ declarations: {
152
+ marginTop: "var(--space-4)",
153
+ marginBottom: "var(--space-4)",
154
+ },
155
+ },
156
+ {
157
+ selector: "my-5",
158
+ declarations: {
159
+ marginTop: "var(--space-5)",
160
+ marginBottom: "var(--space-5)",
161
+ },
162
+ },
163
+ {
164
+ selector: "my-6",
165
+ declarations: {
166
+ marginTop: "var(--space-6)",
167
+ marginBottom: "var(--space-6)",
168
+ },
169
+ },
170
+ {
171
+ selector: "my-7",
172
+ declarations: {
173
+ marginTop: "var(--space-7)",
174
+ marginBottom: "var(--space-7)",
175
+ },
176
+ },
177
+ {
178
+ selector: "my-8",
179
+ declarations: {
180
+ marginTop: "var(--space-8)",
181
+ marginBottom: "var(--space-8)",
182
+ },
183
+ },
184
+ {
185
+ selector: "my-9",
186
+ declarations: {
187
+ marginTop: "var(--space-9)",
188
+ marginBottom: "var(--space-9)",
189
+ },
190
+ },
191
+ {
192
+ selector: "my-10",
193
+ declarations: {
194
+ marginTop: "var(--space-10)",
195
+ marginBottom: "var(--space-10)",
196
+ },
197
+ },
198
+ {
199
+ selector: "my-11",
200
+ declarations: {
201
+ marginTop: "var(--space-11)",
202
+ marginBottom: "var(--space-11)",
203
+ },
204
+ },
205
+ {
206
+ selector: "my-12",
207
+ declarations: {
208
+ marginTop: "var(--space-12)",
209
+ marginBottom: "var(--space-12)",
210
+ },
211
+ },
212
+ {
213
+ selector: "my-13",
214
+ declarations: {
215
+ marginTop: "var(--space-13)",
216
+ marginBottom: "var(--space-13)",
217
+ },
218
+ },
219
+ {
220
+ selector: "my-14",
221
+ declarations: {
222
+ marginTop: "var(--space-14)",
223
+ marginBottom: "var(--space-14)",
224
+ },
225
+ },
226
+ {
227
+ selector: "my-15",
228
+ declarations: {
229
+ marginTop: "var(--space-15)",
230
+ marginBottom: "var(--space-15)",
231
+ },
232
+ },
233
+ {
234
+ selector: "my-16",
235
+ declarations: {
236
+ marginTop: "var(--space-16)",
237
+ marginBottom: "var(--space-16)",
238
+ },
239
+ },
240
+ {
241
+ selector: "my-24",
242
+ declarations: {
243
+ marginTop: "var(--space-24)",
244
+ marginBottom: "var(--space-24)",
245
+ },
246
+ },
247
+ {
248
+ selector: "my-32",
249
+ declarations: {
250
+ marginTop: "var(--space-32)",
251
+ marginBottom: "var(--space-32)",
252
+ },
253
+ },
254
+ {
255
+ selector: "my-40",
256
+ declarations: {
257
+ marginTop: "var(--space-40)",
258
+ marginBottom: "var(--space-40)",
259
+ },
260
+ },
261
+ {
262
+ selector: "my-48",
263
+ declarations: {
264
+ marginTop: "var(--space-48)",
265
+ marginBottom: "var(--space-48)",
266
+ },
267
+ },
268
+
269
+ {
270
+ selector: "mx-auto",
271
+ declarations: { marginLeft: "auto", marginRight: "auto" },
272
+ },
273
+ { selector: "mx-0", declarations: { marginLeft: "0", marginRight: "0" } },
274
+ {
275
+ selector: "mx-px",
276
+ declarations: {
277
+ marginLeft: "var(--space-px)",
278
+ marginRight: "var(--space-px)",
279
+ },
280
+ },
281
+ {
282
+ selector: "mx-1",
283
+ declarations: {
284
+ marginLeft: "var(--space-1)",
285
+ marginRight: "var(--space-1)",
286
+ },
287
+ },
288
+ {
289
+ selector: "mx-2",
290
+ declarations: {
291
+ marginLeft: "var(--space-2)",
292
+ marginRight: "var(--space-2)",
293
+ },
294
+ },
295
+ {
296
+ selector: "mx-3",
297
+ declarations: {
298
+ marginLeft: "var(--space-3)",
299
+ marginRight: "var(--space-3)",
300
+ },
301
+ },
302
+ {
303
+ selector: "mx-4",
304
+ declarations: {
305
+ marginLeft: "var(--space-4)",
306
+ marginRight: "var(--space-4)",
307
+ },
308
+ },
309
+ {
310
+ selector: "mx-5",
311
+ declarations: {
312
+ marginLeft: "var(--space-5)",
313
+ marginRight: "var(--space-5)",
314
+ },
315
+ },
316
+ {
317
+ selector: "mx-6",
318
+ declarations: {
319
+ marginLeft: "var(--space-6)",
320
+ marginRight: "var(--space-6)",
321
+ },
322
+ },
323
+ {
324
+ selector: "mx-7",
325
+ declarations: {
326
+ marginLeft: "var(--space-7)",
327
+ marginRight: "var(--space-7)",
328
+ },
329
+ },
330
+ {
331
+ selector: "mx-8",
332
+ declarations: {
333
+ marginLeft: "var(--space-8)",
334
+ marginRight: "var(--space-8)",
335
+ },
336
+ },
337
+ {
338
+ selector: "mx-9",
339
+ declarations: {
340
+ marginLeft: "var(--space-9)",
341
+ marginRight: "var(--space-9)",
342
+ },
343
+ },
344
+ {
345
+ selector: "mx-10",
346
+ declarations: {
347
+ marginLeft: "var(--space-10)",
348
+ marginRight: "var(--space-10)",
349
+ },
350
+ },
351
+ {
352
+ selector: "mx-11",
353
+ declarations: {
354
+ marginLeft: "var(--space-11)",
355
+ marginRight: "var(--space-11)",
356
+ },
357
+ },
358
+ {
359
+ selector: "mx-12",
360
+ declarations: {
361
+ marginLeft: "var(--space-12)",
362
+ marginRight: "var(--space-12)",
363
+ },
364
+ },
365
+ {
366
+ selector: "mx-13",
367
+ declarations: {
368
+ marginLeft: "var(--space-13)",
369
+ marginRight: "var(--space-13)",
370
+ },
371
+ },
372
+ {
373
+ selector: "mx-14",
374
+ declarations: {
375
+ marginLeft: "var(--space-14)",
376
+ marginRight: "var(--space-14)",
377
+ },
378
+ },
379
+ {
380
+ selector: "mx-15",
381
+ declarations: {
382
+ marginLeft: "var(--space-15)",
383
+ marginRight: "var(--space-15)",
384
+ },
385
+ },
386
+ {
387
+ selector: "mx-16",
388
+ declarations: {
389
+ marginLeft: "var(--space-16)",
390
+ marginRight: "var(--space-16)",
391
+ },
392
+ },
393
+ {
394
+ selector: "mx-24",
395
+ declarations: {
396
+ marginLeft: "var(--space-24)",
397
+ marginRight: "var(--space-24)",
398
+ },
399
+ },
400
+ {
401
+ selector: "mx-32",
402
+ declarations: {
403
+ marginLeft: "var(--space-32)",
404
+ marginRight: "var(--space-32)",
405
+ },
406
+ },
407
+ {
408
+ selector: "mx-40",
409
+ declarations: {
410
+ marginLeft: "var(--space-40)",
411
+ marginRight: "var(--space-40)",
412
+ },
413
+ },
414
+ {
415
+ selector: "mx-48",
416
+ declarations: {
417
+ marginLeft: "var(--space-48)",
418
+ marginRight: "var(--space-48)",
419
+ },
420
+ },
421
+ ] as const
package/src/rules/opacity.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const OPACITY: Array<FractureRuleType> = [
4
+ { selector: "opacity-100", declarations: { opacity: "1" } },
5
+ { selector: "opacity-90", declarations: { opacity: ".9" } },
6
+ { selector: "opacity-80", declarations: { opacity: ".8" } },
7
+ { selector: "opacity-70", declarations: { opacity: ".7" } },
8
+ { selector: "opacity-60", declarations: { opacity: ".6" } },
9
+ { selector: "opacity-50", declarations: { opacity: ".5" } },
10
+ { selector: "opacity-40", declarations: { opacity: ".4" } },
11
+ { selector: "opacity-30", declarations: { opacity: ".3" } },
12
+ { selector: "opacity-20", declarations: { opacity: ".2" } },
13
+ { selector: "opacity-10", declarations: { opacity: ".1" } },
14
+ { selector: "opacity-0", declarations: { opacity: "0" } },
15
+ ] as const
package/src/rules/overflow.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const OVERFLOW: Array<FractureRuleType> = [
4
+ { selector: "overflow-hidden", declarations: { overflow: "hidden" } },
5
+ { selector: "overflow-scroll", declarations: { overflow: "scroll" } },
6
+ { selector: "overflow-visible", declarations: { overflow: "visible" } },
7
+ { selector: "overflow-y-hidden", declarations: { overflowY: "hidden" } },
8
+ { selector: "overflow-y-scroll", declarations: { overflowY: "scroll" } },
9
+ { selector: "overflow-y-visible", declarations: { overflowY: "visible" } },
10
+ { selector: "overflow-x-hidden", declarations: { overflowX: "hidden" } },
11
+ { selector: "overflow-x-scroll", declarations: { overflowX: "scroll" } },
12
+ { selector: "overflow-x-visible", declarations: { overflowX: "visible" } },
13
+ ] as const