fulldev-ui 0.3.0-beta.2 → 0.3.2

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 (88) hide show
  1. package/.astro/settings.json +1 -1
  2. package/package.json +10 -5
  3. package/src/components/_Block.astro +0 -5
  4. package/src/components/_Component.astro +10 -8
  5. package/src/components/_archive/Body.astro +2 -2
  6. package/src/components/_archive/Nav.astro +12 -0
  7. package/src/components/_todo/Form.astro +1 -1
  8. package/src/components/_todo/Prose.astro +7 -7
  9. package/src/components/base/Badge.astro +20 -16
  10. package/src/components/base/Button.astro +21 -34
  11. package/src/components/base/Icon.astro +3 -2
  12. package/src/components/base/Image.astro +116 -42
  13. package/src/components/base/Logo.astro +1 -1
  14. package/src/components/base/Rating.astro +27 -25
  15. package/src/components/base/checkbox/Checkbox.astro +52 -0
  16. package/src/components/base/checkbox/CheckboxElement.astro +31 -0
  17. package/src/components/base/input/Input.astro +79 -0
  18. package/src/components/base/input/InputElement.astro +60 -0
  19. package/src/components/base/radio/Radio.astro +66 -0
  20. package/src/components/base/radio/RadioElement.astro +34 -0
  21. package/src/components/base/select/Select.astro +90 -0
  22. package/src/components/base/select/SelectElement.astro +56 -0
  23. package/src/components/base/select/SelectOption.astro +32 -0
  24. package/src/components/base/switch/Switch.astro +55 -0
  25. package/src/components/base/{Switch.astro → switch/SwitchElement.astro} +15 -13
  26. package/src/components/base/table/Table.astro +55 -0
  27. package/src/components/base/table/TableBody.astro +39 -0
  28. package/src/components/base/table/TableCell.astro +30 -0
  29. package/src/components/base/table/TableFooter.astro +48 -0
  30. package/src/components/base/table/TableHead.astro +31 -0
  31. package/src/components/base/table/TableHeader.astro +44 -0
  32. package/src/components/base/table/TableRow.astro +46 -0
  33. package/src/components/base/textarea/Textarea.astro +79 -0
  34. package/src/components/base/textarea/TextareaElement.astro +61 -0
  35. package/src/components/segment/Card.astro +28 -4
  36. package/src/components/segment/Footer.astro +88 -0
  37. package/src/components/segment/Header.astro +43 -13
  38. package/src/components/segment/Section.astro +60 -25
  39. package/src/components/segment/_regels.md +32 -0
  40. package/src/components/structure/Bento.astro +38 -0
  41. package/src/components/{segment → structure}/Box.astro +2 -12
  42. package/src/components/structure/Carousel.astro +55 -0
  43. package/src/components/structure/Column.astro +46 -0
  44. package/src/components/structure/Grid.astro +33 -0
  45. package/src/components/structure/Masonry.astro +42 -0
  46. package/src/components/structure/Row.astro +44 -0
  47. package/src/components/structure/Split.astro +54 -0
  48. package/src/components/structure/Spread.astro +45 -0
  49. package/src/components/structure/Wrap.astro +44 -0
  50. package/src/components/typography/Heading.astro +37 -28
  51. package/src/components/typography/Label.astro +4 -8
  52. package/src/components/typography/Link.astro +40 -12
  53. package/src/components/typography/List.astro +12 -13
  54. package/src/components/typography/ListItem.astro +11 -10
  55. package/src/components/typography/Paragraph.astro +4 -9
  56. package/src/components/typography/Tagline.astro +11 -10
  57. package/src/components/typography/Text.astro +5 -9
  58. package/src/css/color.scss +289 -0
  59. package/src/css/size.scss +293 -0
  60. package/src/css/space.scss +94 -0
  61. package/src/css/styles.css +1 -2
  62. package/src/index.ts +29 -11
  63. package/src/integration/tailwind.ts +34 -0
  64. package/src/integration/unocss.ts +38 -0
  65. package/src/schemas/collection.ts +2 -0
  66. package/src/components/_archive/Row.astro +0 -26
  67. package/src/components/_todo/Footer.astro +0 -66
  68. package/src/components/_todo/todo.md +0 -10
  69. package/src/components/base/Checkbox.astro +0 -41
  70. package/src/components/base/Input.astro +0 -59
  71. package/src/components/base/Radio.astro +0 -39
  72. package/src/components/base/Select.astro +0 -69
  73. package/src/components/base/SelectOption.astro +0 -27
  74. package/src/components/base/Textarea.astro +0 -34
  75. package/src/components/base/todo.md +0 -7
  76. package/src/components/segment/Deck.astro +0 -40
  77. package/src/components/segment/Group.astro +0 -29
  78. package/src/components/typography/todo.md +0 -3
  79. package/src/css/color.css +0 -88
  80. package/src/css/props/align.scss +0 -20
  81. package/src/css/props/frame.scss +0 -153
  82. package/src/css/props/mask +0 -1
  83. package/src/css/props/position.scss +0 -33
  84. package/src/css/props/ratio +0 -1
  85. package/src/css/props/structure.scss +0 -228
  86. package/src/css/props/variant.scss +0 -130
  87. package/src/css/radix.css +0 -281
  88. package/src/css/size.css +0 -334
package/src/css/size.css DELETED
@@ -1,334 +0,0 @@
1
- :root {
2
- --space-sm-1: 3px;
3
- --space-sm-2: 6px;
4
- --space-sm-3: 12px;
5
- --space-sm-4: 24px;
6
- --space-sm-5: 48px;
7
- --space-sm-6: 72px;
8
- --space-md-1: 4px;
9
- --space-md-2: 8px;
10
- --space-md-3: 16px;
11
- --space-md-4: 32px;
12
- --space-md-5: 64px;
13
- --space-md-6: 96px;
14
- --space-lg-1: 5px;
15
- --space-lg-2: 10px;
16
- --space-lg-3: 20px;
17
- --space-lg-4: 40px;
18
- --space-lg-5: 80px;
19
- --space-lg-6: 120px;
20
-
21
- --element-sm-1: 6px;
22
- --element-sm-2: 9px;
23
- --element-sm-3: 12px;
24
- --element-md-1: 8px;
25
- --element-md-2: 12px;
26
- --element-md-3: 16px;
27
- --element-lg-1: 10px;
28
- --element-lg-2: 16px;
29
- --element-lg-3: 20px;
30
-
31
- --text-label-sm: 12px;
32
- --text-label-md: 14px;
33
- --text-label-lg: 16px;
34
-
35
- --text-body-xs: 12px;
36
- --text-body-sm: 14px;
37
- --text-body-md: 16px;
38
- --text-body-lg: 18px;
39
- --text-body-xl: 20px;
40
-
41
- --text-heading-xs: 16px;
42
- --text-heading-sm: 18px;
43
- --text-heading-md: 20px;
44
- --text-heading-lg: 24px;
45
- --text-heading-xl: 30px;
46
- --text-heading-2xl: 36px;
47
- --text-heading-3xl: 48px;
48
- --text-heading-4xl: 48px;
49
- --text-heading-5xl: 60px;
50
-
51
- @media (min-width: 768px) {
52
- --text-heading-xs: 16px;
53
- --text-heading-sm: 20px;
54
- --text-heading-md: 24px;
55
- --text-heading-lg: 30px;
56
- --text-heading-xl: 36px;
57
- --text-heading-2xl: 48px;
58
- --text-heading-3xl: 60px;
59
- --text-heading-4xl: 72px;
60
- --text-heading-5xl: 96px;
61
- }
62
- }
63
-
64
- .compact {
65
- --space-sm-1: 3px;
66
- --space-sm-2: 6px;
67
- --space-sm-3: 9px;
68
- --space-sm-4: 12px;
69
- --space-sm-5: 15px;
70
- --space-sm-6: 18px;
71
- --space-md-1: 4px;
72
- --space-md-2: 8px;
73
- --space-md-3: 12px;
74
- --space-md-4: 16px;
75
- --space-md-5: 20px;
76
- --space-md-6: 24px;
77
- --space-lg-1: 5px;
78
- --space-lg-2: 10px;
79
- --space-lg-3: 15px;
80
- --space-lg-4: 20px;
81
- --space-lg-5: 25px;
82
- --space-lg-6: 30px;
83
-
84
- --element-sm-1: 6px;
85
- --element-sm-2: 8px;
86
- --element-sm-3: 10px;
87
- --element-md-1: 8px;
88
- --element-md-2: 10px;
89
- --element-md-3: 12px;
90
- --element-lg-1: 10px;
91
- --element-lg-2: 12px;
92
- --element-lg-3: 14px;
93
-
94
- --text-heading-xs: 16px;
95
- --text-heading-sm: 18px;
96
- --text-heading-md: 20px;
97
- --text-heading-lg: 24px;
98
- --text-heading-xl: 30px;
99
- --text-heading-2xl: 30px;
100
- --text-heading-3xl: 30px;
101
- --text-heading-4xl: 30px;
102
- --text-heading-5xl: 30px;
103
- }
104
-
105
- /* --------------------------- */
106
- /* Generate sizes */
107
- /* --------------------------- */
108
-
109
- .size-xs,
110
- .size-xs
111
- .compact:not(.size-xs [class*='size-'] .compact):not(
112
- .size-xs [class*='size-'].compact
113
- ) {
114
- --space-1: var(--space-sm-1);
115
- --space-2: var(--space-sm-2);
116
- --space-3: var(--space-sm-3);
117
- --space-4: var(--space-sm-4);
118
- --space-5: var(--space-sm-5);
119
- --space-6: var(--space-sm-6);
120
-
121
- --element-1: var(--element-sm-1);
122
- --element-2: var(--element-sm-2);
123
- --element-3: var(--element-sm-3);
124
-
125
- --radius-1: calc(var(--border-radius, 1) * var(--element-sm-1));
126
- --radius-2: calc(var(--border-radius, 1) * var(--element-sm-2));
127
- --radius-3: calc(var(--border-radius, 1) * var(--element-sm-3));
128
-
129
- --text-label: var(--text-label-sm);
130
- --text-body: var(--text-body-xs);
131
- --text-heading: var(--text-heading-xs);
132
- }
133
-
134
- .size-sm,
135
- .size-sm
136
- .compact:not(.size-sm [class*='size-'] .compact):not(
137
- .size-sm [class*='size-'].compact
138
- ) {
139
- --space-1: var(--space-sm-1);
140
- --space-2: var(--space-sm-2);
141
- --space-3: var(--space-sm-3);
142
- --space-4: var(--space-sm-4);
143
- --space-5: var(--space-sm-5);
144
- --space-6: var(--space-sm-6);
145
-
146
- --element-1: var(--element-sm-1);
147
- --element-2: var(--element-sm-2);
148
- --element-3: var(--element-sm-3);
149
-
150
- --radius-1: calc(var(--border-radius, 1) * var(--element-sm-1));
151
- --radius-2: calc(var(--border-radius, 1) * var(--element-sm-2));
152
- --radius-3: calc(var(--border-radius, 1) * var(--element-sm-3));
153
-
154
- --text-label: var(--text-label-sm);
155
- --text-body: var(--text-body-sm);
156
- --text-heading: var(--text-heading-sm);
157
- }
158
-
159
- :where(:root),
160
- :where(.compact),
161
- .size-md,
162
- .size-md
163
- .compact:not(.size-md [class*='size-'] .compact):not(
164
- .size-md [class*='size-'].compact
165
- ) {
166
- --space-1: var(--space-md-1);
167
- --space-2: var(--space-md-2);
168
- --space-3: var(--space-md-3);
169
- --space-4: var(--space-md-4);
170
- --space-5: var(--space-md-5);
171
- --space-6: var(--space-md-6);
172
-
173
- --element-1: var(--element-md-1);
174
- --element-2: var(--element-md-2);
175
- --element-3: var(--element-md-3);
176
-
177
- --radius-1: calc(var(--border-radius, 1) * var(--element-md-1));
178
- --radius-2: calc(var(--border-radius, 1) * var(--element-md-2));
179
- --radius-3: calc(var(--border-radius, 1) * var(--element-md-3));
180
-
181
- --text-label: var(--text-label-md);
182
- --text-body: var(--text-body-md);
183
- --text-heading: var(--text-heading-md);
184
- }
185
-
186
- .size-lg,
187
- .size-lg
188
- .compact:not(.size-lg [class*='size-'] .compact):not(
189
- .size-lg [class*='size-'].compact
190
- ) {
191
- --space-1: var(--space-lg-1);
192
- --space-2: var(--space-lg-2);
193
- --space-3: var(--space-lg-3);
194
- --space-4: var(--space-lg-4);
195
- --space-5: var(--space-lg-5);
196
- --space-6: var(--space-lg-6);
197
-
198
- --element-1: var(--element-lg-1);
199
- --element-2: var(--element-lg-2);
200
- --element-3: var(--element-lg-3);
201
-
202
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
203
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
204
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
205
-
206
- --text-label: var(--text-label-lg);
207
- --text-body: var(--text-body-lg);
208
- --text-heading: var(--text-heading-lg);
209
- }
210
-
211
- .size-xl,
212
- .size-xl
213
- .compact:not(.size-xl [class*='size-'] .compact):not(
214
- .size-xl [class*='size-'].compact
215
- ) {
216
- --space-1: var(--space-lg-1);
217
- --space-2: var(--space-lg-2);
218
- --space-3: var(--space-lg-3);
219
- --space-4: var(--space-lg-4);
220
- --space-5: var(--space-lg-5);
221
- --space-6: var(--space-lg-6);
222
-
223
- --element-1: var(--element-lg-1);
224
- --element-2: var(--element-lg-2);
225
- --element-3: var(--element-lg-3);
226
-
227
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
228
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
229
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
230
-
231
- --text-label: var(--text-label-lg);
232
- --text-body: var(--text-body-xl);
233
- --text-heading: var(--text-heading-xl);
234
- }
235
-
236
- .size-2xl,
237
- .size-2xl
238
- .compact:not(.size-2xl [class*='size-'] .compact):not(
239
- .size-2xl [class*='size-'].compact
240
- ) {
241
- --space-1: var(--space-lg-1);
242
- --space-2: var(--space-lg-2);
243
- --space-3: var(--space-lg-3);
244
- --space-4: var(--space-lg-4);
245
- --space-5: var(--space-lg-5);
246
- --space-6: var(--space-lg-6);
247
-
248
- --element-1: var(--element-lg-1);
249
- --element-2: var(--element-lg-2);
250
- --element-3: var(--element-lg-3);
251
-
252
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
253
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
254
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
255
-
256
- --text-label: var(--text-label-lg);
257
- --text-body: var(--text-body-xl);
258
- --text-heading: var(--text-heading-2xl);
259
- }
260
-
261
- .size-3xl,
262
- .size-3xl
263
- .compact:not(.size-3xl [class*='size-'] .compact):not(
264
- .size-3xl [class*='size-'].compact
265
- ) {
266
- --space-1: var(--space-lg-1);
267
- --space-2: var(--space-lg-2);
268
- --space-3: var(--space-lg-3);
269
- --space-4: var(--space-lg-4);
270
- --space-5: var(--space-lg-5);
271
- --space-6: var(--space-lg-6);
272
-
273
- --element-1: var(--element-lg-1);
274
- --element-2: var(--element-lg-2);
275
- --element-3: var(--element-lg-3);
276
-
277
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
278
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
279
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
280
-
281
- --text-label: var(--text-label-lg);
282
- --text-body: var(--text-body-xl);
283
- --text-heading: var(--text-heading-3xl);
284
- }
285
-
286
- .size-4xl,
287
- .size-4xl
288
- .compact:not(.size-4xl [class*='size-'] .compact):not(
289
- .size-4xl [class*='size-'].compact
290
- ) {
291
- --space-1: var(--space-lg-1);
292
- --space-2: var(--space-lg-2);
293
- --space-3: var(--space-lg-3);
294
- --space-4: var(--space-lg-4);
295
- --space-5: var(--space-lg-5);
296
- --space-6: var(--space-lg-6);
297
-
298
- --element-1: var(--element-lg-1);
299
- --element-2: var(--element-lg-2);
300
- --element-3: var(--element-lg-3);
301
-
302
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
303
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
304
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
305
-
306
- --text-label: var(--text-label-lg);
307
- --text-body: var(--text-body-xl);
308
- --text-heading: var(--text-heading-4xl);
309
- }
310
-
311
- .size-5xl,
312
- .size-5xl
313
- .compact:not(.size-5xl [class*='size-'] .compact):not(
314
- .size-5xl [class*='size-'].compact
315
- ) {
316
- --space-1: var(--space-lg-1);
317
- --space-2: var(--space-lg-2);
318
- --space-3: var(--space-lg-3);
319
- --space-4: var(--space-lg-4);
320
- --space-5: var(--space-lg-5);
321
- --space-6: var(--space-lg-6);
322
-
323
- --element-1: var(--element-lg-1);
324
- --element-2: var(--element-lg-2);
325
- --element-3: var(--element-lg-3);
326
-
327
- --radius-1: calc(var(--border-radius, 1) * var(--element-lg-1));
328
- --radius-2: calc(var(--border-radius, 1) * var(--element-lg-2));
329
- --radius-3: calc(var(--border-radius, 1) * var(--element-lg-3));
330
-
331
- --text-label: var(--text-label-lg);
332
- --text-body: var(--text-body-xl);
333
- --text-heading: var(--text-heading-5xl);
334
- }