@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/width.ts ADDED
@@ -0,0 +1,134 @@
1
+ import type { FractureRuleType } from "../types/meta"
2
+
3
+ export const WIDTH: Array<FractureRuleType> = [
4
+ { selector: "w-0", declarations: { width: "0" } },
5
+ { selector: "w-viewport", declarations: { width: "100vw" } },
6
+ { selector: "w-px", declarations: { width: "var(--space-px)" } },
7
+ { selector: "w-1", declarations: { width: "var(--space-1)" } },
8
+ { selector: "w-2", declarations: { width: "var(--space-2)" } },
9
+ { selector: "w-3", declarations: { width: "var(--space-3)" } },
10
+ { selector: "w-4", declarations: { width: "var(--space-4)" } },
11
+ { selector: "w-5", declarations: { width: "var(--space-5)" } },
12
+ { selector: "w-6", declarations: { width: "var(--space-6)" } },
13
+ { selector: "w-7", declarations: { width: "var(--space-7)" } },
14
+ { selector: "w-8", declarations: { width: "var(--space-8)" } },
15
+ { selector: "w-9", declarations: { width: "var(--space-9)" } },
16
+ { selector: "w-10", declarations: { width: "var(--space-10)" } },
17
+ { selector: "w-11", declarations: { width: "var(--space-11)" } },
18
+ { selector: "w-12", declarations: { width: "var(--space-12)" } },
19
+ { selector: "w-13", declarations: { width: "var(--space-13)" } },
20
+ { selector: "w-14", declarations: { width: "var(--space-14)" } },
21
+ { selector: "w-15", declarations: { width: "var(--space-15)" } },
22
+ { selector: "w-16", declarations: { width: "var(--space-16)" } },
23
+ { selector: "w-24", declarations: { width: "var(--space-24)" } },
24
+ { selector: "w-32", declarations: { width: "var(--space-32)" } },
25
+ { selector: "w-40", declarations: { width: "var(--space-40)" } },
26
+ { selector: "w-48", declarations: { width: "var(--space-48)" } },
27
+ { selector: "wp-10", declarations: { width: "10%" } },
28
+ { selector: "wp-15", declarations: { width: "15%" } },
29
+ { selector: "wp-20", declarations: { width: "20%" } },
30
+ { selector: "wp-25", declarations: { width: "25%" } },
31
+ { selector: "wp-30", declarations: { width: "30%" } },
32
+ { selector: "wp-33", declarations: { width: "calc(100%/3)" } },
33
+ { selector: "wp-35", declarations: { width: "35%" } },
34
+ { selector: "wp-40", declarations: { width: "40%" } },
35
+ { selector: "wp-45", declarations: { width: "45%" } },
36
+ { selector: "wp-50", declarations: { width: "50%" } },
37
+ { selector: "wp-55", declarations: { width: "55%" } },
38
+ { selector: "wp-60", declarations: { width: "60%" } },
39
+ { selector: "wp-66", declarations: { width: "calc((100%/3)*2)" } },
40
+ { selector: "wp-65", declarations: { width: "65%" } },
41
+ { selector: "wp-70", declarations: { width: "70%" } },
42
+ { selector: "wp-75", declarations: { width: "75%" } },
43
+ { selector: "wp-80", declarations: { width: "80%" } },
44
+ { selector: "wp-85", declarations: { width: "85%" } },
45
+ { selector: "wp-90", declarations: { width: "90%" } },
46
+ { selector: "wp-95", declarations: { width: "95%" } },
47
+ { selector: "wp-100", declarations: { width: "100%" } },
48
+ { selector: "wmax-0", declarations: { maxWidth: "0" } },
49
+ { selector: "wmax-viewport", declarations: { maxWidth: "100vw" } },
50
+ { selector: "wmax-1", declarations: { maxWidth: "var(--space-1)" } },
51
+ { selector: "wmax-2", declarations: { maxWidth: "var(--space-2)" } },
52
+ { selector: "wmax-3", declarations: { maxWidth: "var(--space-3)" } },
53
+ { selector: "wmax-4", declarations: { maxWidth: "var(--space-4)" } },
54
+ { selector: "wmax-5", declarations: { maxWidth: "var(--space-5)" } },
55
+ { selector: "wmax-6", declarations: { maxWidth: "var(--space-6)" } },
56
+ { selector: "wmax-7", declarations: { maxWidth: "var(--space-7)" } },
57
+ { selector: "wmax-8", declarations: { maxWidth: "var(--space-8)" } },
58
+ { selector: "wmax-9", declarations: { maxWidth: "var(--space-9)" } },
59
+ { selector: "wmax-10", declarations: { maxWidth: "var(--space-10)" } },
60
+ { selector: "wmax-11", declarations: { maxWidth: "var(--space-11)" } },
61
+ { selector: "wmax-12", declarations: { maxWidth: "var(--space-12)" } },
62
+ { selector: "wmax-13", declarations: { maxWidth: "var(--space-13)" } },
63
+ { selector: "wmax-14", declarations: { maxWidth: "var(--space-14)" } },
64
+ { selector: "wmax-15", declarations: { maxWidth: "var(--space-15)" } },
65
+ { selector: "wmax-16", declarations: { maxWidth: "var(--space-16)" } },
66
+ { selector: "wmax-24", declarations: { maxWidth: "var(--space-24)" } },
67
+ { selector: "wmax-32", declarations: { maxWidth: "var(--space-32)" } },
68
+ { selector: "wmax-40", declarations: { maxWidth: "var(--space-40)" } },
69
+ { selector: "wmax-48", declarations: { maxWidth: "var(--space-48)" } },
70
+ { selector: "wpmax-10", declarations: { maxWidth: "10%" } },
71
+ { selector: "wpmax-15", declarations: { maxWidth: "15%" } },
72
+ { selector: "wpmax-20", declarations: { maxWidth: "20%" } },
73
+ { selector: "wpmax-25", declarations: { maxWidth: "25%" } },
74
+ { selector: "wpmax-30", declarations: { maxWidth: "30%" } },
75
+ { selector: "wpmax-33", declarations: { maxWidth: "calc(100%/3)" } },
76
+ { selector: "wpmax-35", declarations: { maxWidth: "35%" } },
77
+ { selector: "wpmax-40", declarations: { maxWidth: "40%" } },
78
+ { selector: "wpmax-45", declarations: { maxWidth: "45%" } },
79
+ { selector: "wpmax-50", declarations: { maxWidth: "50%" } },
80
+ { selector: "wpmax-55", declarations: { maxWidth: "55%" } },
81
+ { selector: "wpmax-60", declarations: { maxWidth: "60%" } },
82
+ { selector: "wpmax-66", declarations: { maxWidth: "calc((100%/3)*2)" } },
83
+ { selector: "wpmax-65", declarations: { maxWidth: "65%" } },
84
+ { selector: "wpmax-70", declarations: { maxWidth: "70%" } },
85
+ { selector: "wpmax-75", declarations: { maxWidth: "75%" } },
86
+ { selector: "wpmax-80", declarations: { maxWidth: "80%" } },
87
+ { selector: "wpmax-85", declarations: { maxWidth: "85%" } },
88
+ { selector: "wpmax-90", declarations: { maxWidth: "90%" } },
89
+ { selector: "wpmax-95", declarations: { maxWidth: "95%" } },
90
+ { selector: "wpmax-100", declarations: { maxWidth: "100%" } },
91
+ { selector: "wmin-0", declarations: { minWidth: "0" } },
92
+ { selector: "wmin-viewport", declarations: { minWidth: "100vw" } },
93
+ { selector: "wmin-1", declarations: { minWidth: "var(--space-1)" } },
94
+ { selector: "wmin-2", declarations: { minWidth: "var(--space-2)" } },
95
+ { selector: "wmin-3", declarations: { minWidth: "var(--space-3)" } },
96
+ { selector: "wmin-4", declarations: { minWidth: "var(--space-4)" } },
97
+ { selector: "wmin-5", declarations: { minWidth: "var(--space-5)" } },
98
+ { selector: "wmin-6", declarations: { minWidth: "var(--space-6)" } },
99
+ { selector: "wmin-7", declarations: { minWidth: "var(--space-7)" } },
100
+ { selector: "wmin-8", declarations: { minWidth: "var(--space-8)" } },
101
+ { selector: "wmin-9", declarations: { minWidth: "var(--space-9)" } },
102
+ { selector: "wmin-10", declarations: { minWidth: "var(--space-10)" } },
103
+ { selector: "wmin-11", declarations: { minWidth: "var(--space-11)" } },
104
+ { selector: "wmin-12", declarations: { minWidth: "var(--space-12)" } },
105
+ { selector: "wmin-13", declarations: { minWidth: "var(--space-13)" } },
106
+ { selector: "wmin-14", declarations: { minWidth: "var(--space-14)" } },
107
+ { selector: "wmin-15", declarations: { minWidth: "var(--space-15)" } },
108
+ { selector: "wmin-16", declarations: { minWidth: "var(--space-16)" } },
109
+ { selector: "wmin-24", declarations: { minWidth: "var(--space-24)" } },
110
+ { selector: "wmin-32", declarations: { minWidth: "var(--space-32)" } },
111
+ { selector: "wmin-40", declarations: { minWidth: "var(--space-40)" } },
112
+ { selector: "wmin-48", declarations: { minWidth: "var(--space-48)" } },
113
+ { selector: "wpmin-10", declarations: { minWidth: "10%" } },
114
+ { selector: "wpmin-15", declarations: { minWidth: "15%" } },
115
+ { selector: "wpmin-20", declarations: { minWidth: "20%" } },
116
+ { selector: "wpmin-25", declarations: { minWidth: "25%" } },
117
+ { selector: "wpmin-30", declarations: { minWidth: "30%" } },
118
+ { selector: "wpmin-33", declarations: { minWidth: "calc(100%/3)" } },
119
+ { selector: "wpmin-35", declarations: { minWidth: "35%" } },
120
+ { selector: "wpmin-40", declarations: { minWidth: "40%" } },
121
+ { selector: "wpmin-45", declarations: { minWidth: "45%" } },
122
+ { selector: "wpmin-50", declarations: { minWidth: "50%" } },
123
+ { selector: "wpmin-55", declarations: { minWidth: "55%" } },
124
+ { selector: "wpmin-60", declarations: { minWidth: "60%" } },
125
+ { selector: "wpmin-65", declarations: { minWidth: "65%" } },
126
+ { selector: "wpmin-66", declarations: { minWidth: "calc((100%/3)*2)" } },
127
+ { selector: "wpmin-70", declarations: { minWidth: "70%" } },
128
+ { selector: "wpmin-75", declarations: { minWidth: "75%" } },
129
+ { selector: "wpmin-80", declarations: { minWidth: "80%" } },
130
+ { selector: "wpmin-85", declarations: { minWidth: "85%" } },
131
+ { selector: "wpmin-90", declarations: { minWidth: "90%" } },
132
+ { selector: "wpmin-95", declarations: { minWidth: "95%" } },
133
+ { selector: "wpmin-100", declarations: { minWidth: "100%" } },
134
+ ] as const
package/src/types/meta.ts ADDED
@@ -0,0 +1,27 @@
1
+ import type { Properties } from "csstype"
2
+
3
+ export type { Properties }
4
+
5
+ export interface FractureRuleType {
6
+ declarations?: Properties
7
+ isHidden?: boolean
8
+ selector: string
9
+ selectorNice?: string
10
+ }
11
+
12
+ export interface FractureFiles {
13
+ borderRadius: Array<FractureRuleType>
14
+ cursor: Array<FractureRuleType>
15
+ display: Array<FractureRuleType>
16
+ flex: Array<FractureRuleType>
17
+ grid: Array<FractureRuleType>
18
+ height: Array<FractureRuleType>
19
+ list: Array<FractureRuleType>
20
+ margin: Array<FractureRuleType>
21
+ opacity: Array<FractureRuleType>
22
+ overflow: Array<FractureRuleType>
23
+ padding: Array<FractureRuleType>
24
+ position: Array<FractureRuleType>
25
+ type: Array<FractureRuleType>
26
+ width: Array<FractureRuleType>
27
+ }