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