@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/position.ts ADDED
@@ -0,0 +1,402 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const POSITION: Array<FractureRuleType> = [
4
+ {
5
+ selector: "absolute",
6
+ declarations: { position: "absolute" },
7
+ },
8
+ {
9
+ selector: "fixed",
10
+ declarations: { position: "fixed" },
11
+ },
12
+ {
13
+ selector: "relative",
14
+ declarations: { position: "relative" },
15
+ },
16
+ {
17
+ selector: "static",
18
+ declarations: { position: "static" },
19
+ },
20
+ {
21
+ selector: "sticky",
22
+ declarations: { position: "sticky" },
23
+ },
24
+
25
+ {
26
+ selector: "z-0",
27
+ declarations: { zIndex: "var(--z-index-0)" },
28
+ },
29
+ {
30
+ selector: "z-10",
31
+ declarations: { zIndex: "var(--z-index-1)" },
32
+ },
33
+ {
34
+ selector: "z-20",
35
+ declarations: { zIndex: "var(--z-index-2)" },
36
+ },
37
+ {
38
+ selector: "z-30",
39
+ declarations: { zIndex: "var(--z-index-3)" },
40
+ },
41
+ {
42
+ selector: "z-40",
43
+ declarations: { zIndex: "var(--z-index-4)" },
44
+ },
45
+ {
46
+ selector: "z-50",
47
+ declarations: { zIndex: "var(--z-index-5)" },
48
+ },
49
+ {
50
+ selector: "z-60",
51
+ declarations: { zIndex: "var(--z-index-6)" },
52
+ },
53
+ {
54
+ selector: "z-70",
55
+ declarations: { zIndex: "var(--z-index-7)" },
56
+ },
57
+ {
58
+ selector: "z-80",
59
+ declarations: { zIndex: "var(--z-index-8)" },
60
+ },
61
+ {
62
+ selector: "z-90",
63
+ declarations: { zIndex: "var(--z-index-9)" },
64
+ },
65
+ {
66
+ selector: "z-100",
67
+ declarations: { zIndex: "var(--z-index-10)" },
68
+ },
69
+
70
+ {
71
+ selector: "bottom-0",
72
+ declarations: { bottom: 0 },
73
+ },
74
+ {
75
+ selector: "bottom-1",
76
+ declarations: { bottom: "var(--space-1)" },
77
+ },
78
+ { selector: "bottom-2", declarations: { bottom: "var(--space-2)" } },
79
+ { selector: "bottom-3", declarations: { bottom: "var(--space-3)" } },
80
+ {
81
+ selector: "bottom-4",
82
+ declarations: { bottom: "var(--space-4)" },
83
+ },
84
+ {
85
+ selector: "bottom-5",
86
+ declarations: { bottom: "var(--space-5)" },
87
+ },
88
+ {
89
+ selector: "bottom-6",
90
+ declarations: { bottom: "var(--space-6)" },
91
+ },
92
+ {
93
+ selector: "bottom-7",
94
+ declarations: { bottom: "var(--space-7)" },
95
+ },
96
+ {
97
+ selector: "bottom-8",
98
+ declarations: { bottom: "var(--space-8)" },
99
+ },
100
+ {
101
+ selector: "bottom-9",
102
+ declarations: { bottom: "var(--space-9)" },
103
+ },
104
+ {
105
+ selector: "bottom-10",
106
+ declarations: { bottom: "var(--space-10)" },
107
+ },
108
+ {
109
+ selector: "bottom-11",
110
+ declarations: { bottom: "var(--space-11)" },
111
+ },
112
+ {
113
+ selector: "bottom-12",
114
+ declarations: { bottom: "var(--space-12)" },
115
+ },
116
+ {
117
+ selector: "bottom-13",
118
+ declarations: { bottom: "var(--space-13)" },
119
+ },
120
+ {
121
+ selector: "bottom-14",
122
+ declarations: { bottom: "var(--space-14)" },
123
+ },
124
+ {
125
+ selector: "bottom-15",
126
+ declarations: { bottom: "var(--space-15)" },
127
+ },
128
+ {
129
+ selector: "bottom-16",
130
+ declarations: { bottom: "var(--space-16)" },
131
+ },
132
+ {
133
+ selector: "bottom-24",
134
+ declarations: { bottom: "var(--space-24)" },
135
+ },
136
+ {
137
+ selector: "bottom-32",
138
+ declarations: { bottom: "var(--space-32)" },
139
+ },
140
+ {
141
+ selector: "bottom-40",
142
+ declarations: { bottom: "var(--space-40)" },
143
+ },
144
+ {
145
+ selector: "bottom-48",
146
+ declarations: { bottom: "var(--space-48)" },
147
+ },
148
+ {
149
+ selector: "left-0",
150
+ declarations: { left: 0 },
151
+ },
152
+ {
153
+ selector: "left-1",
154
+ declarations: { left: "var(--space-1)" },
155
+ },
156
+ {
157
+ selector: "left-2",
158
+ declarations: { left: "var(--space-2)" },
159
+ },
160
+ {
161
+ selector: "left-3",
162
+ declarations: { left: "var(--space-3)" },
163
+ },
164
+ {
165
+ selector: "left-4",
166
+ declarations: { left: "var(--space-4)" },
167
+ },
168
+ {
169
+ selector: "left-5",
170
+ declarations: { left: "var(--space-5)" },
171
+ },
172
+ {
173
+ selector: "left-6",
174
+ declarations: { left: "var(--space-6)" },
175
+ },
176
+ {
177
+ selector: "left-7",
178
+ declarations: { left: "var(--space-7)" },
179
+ },
180
+ {
181
+ selector: "left-8",
182
+ declarations: { left: "var(--space-8)" },
183
+ },
184
+ {
185
+ selector: "left-9",
186
+ declarations: { left: "var(--space-9)" },
187
+ },
188
+ {
189
+ selector: "left-10",
190
+ declarations: { left: "var(--space-10)" },
191
+ },
192
+ {
193
+ selector: "left-11",
194
+ declarations: { left: "var(--space-11)" },
195
+ },
196
+ {
197
+ selector: "left-12",
198
+ declarations: { left: "var(--space-12)" },
199
+ },
200
+ {
201
+ selector: "left-13",
202
+ declarations: { left: "var(--space-13)" },
203
+ },
204
+ {
205
+ selector: "left-14",
206
+ declarations: { left: "var(--space-14)" },
207
+ },
208
+ {
209
+ selector: "left-15",
210
+ declarations: { left: "var(--space-15)" },
211
+ },
212
+ {
213
+ selector: "left-16",
214
+ declarations: { left: "var(--space-16)" },
215
+ },
216
+ {
217
+ selector: "left-24",
218
+ declarations: { left: "var(--space-24)" },
219
+ },
220
+ {
221
+ selector: "left-32",
222
+ declarations: { left: "var(--space-32)" },
223
+ },
224
+ {
225
+ selector: "left-40",
226
+ declarations: { left: "var(--space-40)" },
227
+ },
228
+ {
229
+ selector: "left-48",
230
+ declarations: { left: "var(--space-48)" },
231
+ },
232
+
233
+ {
234
+ selector: "right-0",
235
+ declarations: { right: 0 },
236
+ },
237
+ {
238
+ selector: "right-1",
239
+ declarations: { right: "var(--space-1)" },
240
+ },
241
+ {
242
+ selector: "right-2",
243
+ declarations: { right: "var(--space-2)" },
244
+ },
245
+ {
246
+ selector: "right-3",
247
+ declarations: { right: "var(--space-3)" },
248
+ },
249
+ {
250
+ selector: "right-4",
251
+ declarations: { right: "var(--space-4)" },
252
+ },
253
+ {
254
+ selector: "right-5",
255
+ declarations: { right: "var(--space-5)" },
256
+ },
257
+ {
258
+ selector: "right-6",
259
+ declarations: { right: "var(--space-6)" },
260
+ },
261
+ {
262
+ selector: "right-7",
263
+ declarations: { right: "var(--space-7)" },
264
+ },
265
+ {
266
+ selector: "right-8",
267
+ declarations: { right: "var(--space-8)" },
268
+ },
269
+ {
270
+ selector: "right-9",
271
+ declarations: { right: "var(--space-9)" },
272
+ },
273
+ {
274
+ selector: "right-10",
275
+ declarations: { right: "var(--space-10)" },
276
+ },
277
+ {
278
+ selector: "right-11",
279
+ declarations: { right: "var(--space-11)" },
280
+ },
281
+ {
282
+ selector: "right-12",
283
+ declarations: { right: "var(--space-12)" },
284
+ },
285
+ {
286
+ selector: "right-13",
287
+ declarations: { right: "var(--space-13)" },
288
+ },
289
+ {
290
+ selector: "right-14",
291
+ declarations: { right: "var(--space-14)" },
292
+ },
293
+ {
294
+ selector: "right-15",
295
+ declarations: { right: "var(--space-15)" },
296
+ },
297
+ {
298
+ selector: "right-16",
299
+ declarations: { right: "var(--space-16)" },
300
+ },
301
+ {
302
+ selector: "right-24",
303
+ declarations: { right: "var(--space-24)" },
304
+ },
305
+ {
306
+ selector: "right-32",
307
+ declarations: { right: "var(--space-32)" },
308
+ },
309
+ {
310
+ selector: "right-40",
311
+ declarations: { right: "var(--space-40)" },
312
+ },
313
+ {
314
+ selector: "right-48",
315
+ declarations: { right: "var(--space-48)" },
316
+ },
317
+
318
+ {
319
+ selector: "top-0",
320
+ declarations: { top: 0 },
321
+ },
322
+ {
323
+ selector: "top-1",
324
+ declarations: { top: "var(--space-1)" },
325
+ },
326
+ {
327
+ selector: "top-2",
328
+ declarations: { top: "var(--space-2)" },
329
+ },
330
+ {
331
+ selector: "top-3",
332
+ declarations: { top: "var(--space-3)" },
333
+ },
334
+ {
335
+ selector: "top-4",
336
+ declarations: { top: "var(--space-4)" },
337
+ },
338
+ {
339
+ selector: "top-5",
340
+ declarations: { top: "var(--space-5)" },
341
+ },
342
+ {
343
+ selector: "top-6",
344
+ declarations: { top: "var(--space-6)" },
345
+ },
346
+ {
347
+ selector: "top-7",
348
+ declarations: { top: "var(--space-7)" },
349
+ },
350
+ {
351
+ selector: "top-8",
352
+ declarations: { top: "var(--space-8)" },
353
+ },
354
+ {
355
+ selector: "top-9",
356
+ declarations: { top: "var(--space-9)" },
357
+ },
358
+ {
359
+ selector: "top-10",
360
+ declarations: { top: "var(--space-10)" },
361
+ },
362
+ {
363
+ selector: "top-11",
364
+ declarations: { top: "var(--space-11)" },
365
+ },
366
+ {
367
+ selector: "top-12",
368
+ declarations: { top: "var(--space-12)" },
369
+ },
370
+ {
371
+ selector: "top-13",
372
+ declarations: { top: "var(--space-13)" },
373
+ },
374
+ {
375
+ selector: "top-14",
376
+ declarations: { top: "var(--space-14)" },
377
+ },
378
+ {
379
+ selector: "top-15",
380
+ declarations: { top: "var(--space-15)" },
381
+ },
382
+ {
383
+ selector: "top-16",
384
+ declarations: { top: "var(--space-16)" },
385
+ },
386
+ {
387
+ selector: "top-24",
388
+ declarations: { top: "var(--space-24)" },
389
+ },
390
+ {
391
+ selector: "top-32",
392
+ declarations: { top: "var(--space-32)" },
393
+ },
394
+ {
395
+ selector: "top-40",
396
+ declarations: { top: "var(--space-40)" },
397
+ },
398
+ {
399
+ selector: "top-48",
400
+ declarations: { top: "var(--space-48)" },
401
+ },
402
+ ] as const
package/src/rules/type.ts ADDED
@@ -0,0 +1,222 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const TYPE: Array<FractureRuleType> = [
4
+ {
5
+ selector: "h0",
6
+ declarations: {
7
+ fontSize: "var(--font-size-h0)",
8
+ lineHeight: "var(--line-height-h0)",
9
+ },
10
+ },
11
+ {
12
+ selector: "h1",
13
+ declarations: {
14
+ fontSize: "var(--font-size-h1)",
15
+ lineHeight: "var(--line-height-h1)",
16
+ },
17
+ },
18
+ {
19
+ selector: "h2",
20
+ declarations: {
21
+ fontSize: "var(--font-size-h2)",
22
+ lineHeight: "var(--line-height-h2)",
23
+ },
24
+ },
25
+ {
26
+ selector: "h3",
27
+ declarations: {
28
+ fontSize: "var(--font-size-h3)",
29
+ lineHeight: "var(--line-height-h3)",
30
+ },
31
+ },
32
+ {
33
+ selector: "h4",
34
+ declarations: {
35
+ fontSize: "var(--font-size-h4)",
36
+ lineHeight: "var(--line-height-h4)",
37
+ },
38
+ },
39
+ {
40
+ selector: "h5",
41
+ declarations: {
42
+ fontSize: "var(--font-size-h5)",
43
+ lineHeight: "var(--line-height-h5)",
44
+ },
45
+ },
46
+ {
47
+ selector: "h6",
48
+ declarations: {
49
+ fontSize: "var(--font-size-h6)",
50
+ lineHeight: "var(--line-height-h6)",
51
+ },
52
+ },
53
+ {
54
+ selector: "p",
55
+ declarations: {
56
+ fontSize: "var(--font-size-p)",
57
+ lineHeight: "var(--line-height-p)",
58
+ },
59
+ },
60
+ {
61
+ selector: "small",
62
+ declarations: {
63
+ fontSize: "var(--font-size-small)",
64
+ lineHeight: "var(--line-height-small)",
65
+ },
66
+ },
67
+ {
68
+ selector: "tiny",
69
+ declarations: {
70
+ fontSize: "var(--font-size-tiny)",
71
+ lineHeight: "var(--line-height-tiny)",
72
+ },
73
+ },
74
+ {
75
+ selector: "micro",
76
+ declarations: {
77
+ fontSize: "var(--font-size-micro)",
78
+ lineHeight: "var(--line-height-micro)",
79
+ },
80
+ },
81
+
82
+ {
83
+ selector: "sans",
84
+ declarations: { fontFamily: "var(--font-family-sans)" },
85
+ },
86
+ {
87
+ selector: "serif",
88
+ declarations: { fontFamily: "var(--font-family-serif)" },
89
+ },
90
+ {
91
+ selector: "mono",
92
+ declarations: { fontFamily: "var(--font-family-mono)" },
93
+ },
94
+
95
+ {
96
+ selector: "fw-thin",
97
+ declarations: { fontWeight: "var(--font-weight-thin)" },
98
+ },
99
+ {
100
+ selector: "fw-extra-light",
101
+ declarations: { fontWeight: "var(--font-weight-extra-light)" },
102
+ },
103
+ {
104
+ selector: "fw-light",
105
+ declarations: { fontWeight: "var(--font-weight-light)" },
106
+ },
107
+ {
108
+ selector: "fw-normal",
109
+ declarations: { fontWeight: "var(--font-weight-normal)" },
110
+ },
111
+ {
112
+ selector: "fw-medium",
113
+ declarations: { fontWeight: "var(--font-weight-medium)" },
114
+ },
115
+ {
116
+ selector: "fw-semi-bold",
117
+ declarations: { fontWeight: "var(--font-weight-semi-bold)" },
118
+ },
119
+ {
120
+ selector: "fw-bold",
121
+ declarations: { fontWeight: "var(--font-weight-bold)" },
122
+ },
123
+ {
124
+ selector: "fw-extra-bold",
125
+ declarations: { fontWeight: "var(--font-weight-extra-bold)" },
126
+ },
127
+ {
128
+ selector: "fw-black",
129
+ declarations: { fontWeight: "var(--font-weight-black)" },
130
+ },
131
+
132
+ {
133
+ selector: "italic",
134
+ declarations: { fontStyle: "italic" },
135
+ },
136
+ {
137
+ selector: "normal",
138
+ declarations: { fontStyle: "normal" },
139
+ },
140
+ {
141
+ selector: "oblique",
142
+ declarations: { fontStyle: "oblique" },
143
+ },
144
+
145
+ {
146
+ selector: "center",
147
+ declarations: { textAlign: "center" },
148
+ },
149
+ {
150
+ selector: "justify",
151
+ declarations: { textAlign: "justify" },
152
+ },
153
+ {
154
+ selector: "left",
155
+ declarations: { textAlign: "left" },
156
+ },
157
+ {
158
+ selector: "right",
159
+ declarations: { textAlign: "right" },
160
+ },
161
+
162
+ {
163
+ selector: "delete",
164
+ declarations: { textDecorationLine: "line-through" },
165
+ },
166
+ {
167
+ selector: "overline",
168
+ declarations: { textDecorationLine: "overline" },
169
+ },
170
+ {
171
+ selector: "underline",
172
+ declarations: { textDecorationLine: "underline" },
173
+ },
174
+ {
175
+ selector: "capitalize",
176
+ declarations: { textTransform: "capitalize" },
177
+ },
178
+ {
179
+ selector: "lowercase",
180
+ declarations: { textTransform: "lowercase" },
181
+ },
182
+ {
183
+ selector: "uppercase",
184
+ declarations: { textTransform: "uppercase" },
185
+ },
186
+
187
+ {
188
+ selector: "pre",
189
+ declarations: { whiteSpace: "pre" },
190
+ },
191
+ {
192
+ selector: "pre-line",
193
+ declarations: { whiteSpace: "pre-line" },
194
+ },
195
+ {
196
+ selector: "pre-wrap",
197
+ declarations: { whiteSpace: "pre-wrap" },
198
+ },
199
+ {
200
+ selector: "nowrap",
201
+ declarations: { whiteSpace: "nowrap" },
202
+ },
203
+
204
+ {
205
+ selector: "break-word",
206
+ declarations: { wordWrap: "break-word" },
207
+ },
208
+ {
209
+ selector: "non-selectable",
210
+ declarations: { userSelect: "none" },
211
+ },
212
+
213
+ {
214
+ selector: "ellipsis",
215
+ declarations: {
216
+ overflow: "hidden",
217
+ maxWidth: "100%",
218
+ textOverflow: "ellipsis",
219
+ whiteSpace: "nowrap",
220
+ },
221
+ },
222
+ ] as const