@oardi/css-utils 0.126.0 → 0.127.0
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.
- package/css-utils-manifest.json +689 -0
- package/css-utils-reference.md +489 -0
- package/package.json +4 -1
- package/readme.md +2 -0
|
@@ -0,0 +1,689 @@
|
|
|
1
|
+
{
|
|
2
|
+
"package": "@oardi/css-utils",
|
|
3
|
+
"version": "0.127.0",
|
|
4
|
+
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
|
+
"utilities": {
|
|
6
|
+
"Display": {
|
|
7
|
+
"families": [
|
|
8
|
+
{
|
|
9
|
+
"patterns": ["d-{breakpoint}-{value}", "d-{value}"],
|
|
10
|
+
"values": ["block", "flex", "inline", "none"]
|
|
11
|
+
}
|
|
12
|
+
],
|
|
13
|
+
"patterns": ["d-{breakpoint}-inline-block", "d-{breakpoint}-inline-flex"],
|
|
14
|
+
"classes": ["d-inline-block", "d-inline-flex"]
|
|
15
|
+
},
|
|
16
|
+
"Typography": {
|
|
17
|
+
"families": [],
|
|
18
|
+
"patterns": [],
|
|
19
|
+
"classes": ["h1", "h2", "h3", "h4", "h5", "h6"]
|
|
20
|
+
},
|
|
21
|
+
"Text / colors": {
|
|
22
|
+
"families": [
|
|
23
|
+
{ "patterns": ["letter-space-{value}"], "values": ["0", "1", "2", "3", "4", "5"] },
|
|
24
|
+
{
|
|
25
|
+
"patterns": ["lh-{value}"],
|
|
26
|
+
"values": ["lg", "md", "sm", "xl", "xs", "xxl", "xxxl"]
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"patterns": ["line-height-{value}"],
|
|
30
|
+
"values": ["loose", "none", "normal", "relaxed", "snug", "tight"]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"patterns": ["text-gray-{value}"],
|
|
34
|
+
"values": [
|
|
35
|
+
"100",
|
|
36
|
+
"150",
|
|
37
|
+
"200",
|
|
38
|
+
"250",
|
|
39
|
+
"300",
|
|
40
|
+
"350",
|
|
41
|
+
"400",
|
|
42
|
+
"450",
|
|
43
|
+
"50",
|
|
44
|
+
"500",
|
|
45
|
+
"550",
|
|
46
|
+
"600",
|
|
47
|
+
"650",
|
|
48
|
+
"700",
|
|
49
|
+
"750",
|
|
50
|
+
"800",
|
|
51
|
+
"850",
|
|
52
|
+
"900",
|
|
53
|
+
"950"
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"patterns": ["text-underline-{value}"],
|
|
58
|
+
"values": ["accent", "error", "primary", "secondary", "success", "warning"]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"patterns": ["text-{value}"],
|
|
62
|
+
"values": [
|
|
63
|
+
"accent",
|
|
64
|
+
"black",
|
|
65
|
+
"body",
|
|
66
|
+
"capitalize",
|
|
67
|
+
"center",
|
|
68
|
+
"end",
|
|
69
|
+
"error",
|
|
70
|
+
"inherit",
|
|
71
|
+
"inverse",
|
|
72
|
+
"lg",
|
|
73
|
+
"md",
|
|
74
|
+
"muted",
|
|
75
|
+
"primary",
|
|
76
|
+
"secondary",
|
|
77
|
+
"sm",
|
|
78
|
+
"start",
|
|
79
|
+
"subtle",
|
|
80
|
+
"success",
|
|
81
|
+
"uppercase",
|
|
82
|
+
"warning",
|
|
83
|
+
"white",
|
|
84
|
+
"xl",
|
|
85
|
+
"xs",
|
|
86
|
+
"xxl",
|
|
87
|
+
"xxxl"
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"patterns": [],
|
|
92
|
+
"classes": ["line-height-extra-loose"]
|
|
93
|
+
},
|
|
94
|
+
"Spacing": {
|
|
95
|
+
"families": [
|
|
96
|
+
{
|
|
97
|
+
"patterns": [
|
|
98
|
+
"m-{breakpoint}-{value}",
|
|
99
|
+
"m-{value}",
|
|
100
|
+
"mb-{breakpoint}-{value}",
|
|
101
|
+
"mb-{value}",
|
|
102
|
+
"me-{breakpoint}-{value}",
|
|
103
|
+
"me-{value}",
|
|
104
|
+
"ms-{breakpoint}-{value}",
|
|
105
|
+
"ms-{value}",
|
|
106
|
+
"mt-{breakpoint}-{value}",
|
|
107
|
+
"mt-{value}",
|
|
108
|
+
"mx-{breakpoint}-{value}",
|
|
109
|
+
"mx-{value}",
|
|
110
|
+
"my-{breakpoint}-{value}",
|
|
111
|
+
"my-{value}"
|
|
112
|
+
],
|
|
113
|
+
"values": [
|
|
114
|
+
"0",
|
|
115
|
+
"0.5",
|
|
116
|
+
"1",
|
|
117
|
+
"1.5",
|
|
118
|
+
"2",
|
|
119
|
+
"2.5",
|
|
120
|
+
"3",
|
|
121
|
+
"3.5",
|
|
122
|
+
"4",
|
|
123
|
+
"4.5",
|
|
124
|
+
"5",
|
|
125
|
+
"auto"
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"patterns": [
|
|
130
|
+
"p-{breakpoint}-{value}",
|
|
131
|
+
"p-{value}",
|
|
132
|
+
"pb-{breakpoint}-{value}",
|
|
133
|
+
"pb-{value}",
|
|
134
|
+
"pe-{breakpoint}-{value}",
|
|
135
|
+
"pe-{value}",
|
|
136
|
+
"ps-{breakpoint}-{value}",
|
|
137
|
+
"ps-{value}",
|
|
138
|
+
"pt-{breakpoint}-{value}",
|
|
139
|
+
"pt-{value}",
|
|
140
|
+
"px-{breakpoint}-{value}",
|
|
141
|
+
"px-{value}",
|
|
142
|
+
"py-{breakpoint}-{value}",
|
|
143
|
+
"py-{value}",
|
|
144
|
+
"space-x-{breakpoint}-{value}",
|
|
145
|
+
"space-x-{value}",
|
|
146
|
+
"space-y-{breakpoint}-{value}",
|
|
147
|
+
"space-y-{value}"
|
|
148
|
+
],
|
|
149
|
+
"values": ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5"]
|
|
150
|
+
}
|
|
151
|
+
],
|
|
152
|
+
"patterns": [],
|
|
153
|
+
"classes": []
|
|
154
|
+
},
|
|
155
|
+
"Flex": {
|
|
156
|
+
"families": [
|
|
157
|
+
{
|
|
158
|
+
"patterns": ["align-content-{breakpoint}-{value}", "align-content-{value}"],
|
|
159
|
+
"values": ["around", "between", "center", "end", "evenly", "start", "stretch"]
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"patterns": ["align-items-{breakpoint}-{value}", "align-items-{value}"],
|
|
163
|
+
"values": ["baseline", "center", "end", "start", "stretch"]
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"patterns": ["align-self-{breakpoint}-{value}", "align-self-{value}"],
|
|
167
|
+
"values": ["auto", "baseline", "center", "end", "start", "stretch"]
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"patterns": ["flex-{breakpoint}-{value}"],
|
|
171
|
+
"values": ["column", "fill", "nowrap", "row", "wrap"]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"patterns": ["flex-{value}"],
|
|
175
|
+
"values": ["1", "column", "fill", "nowrap", "row", "wrap"]
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"patterns": ["justify-content-{breakpoint}-{value}", "justify-content-{value}"],
|
|
179
|
+
"values": ["around", "between", "center", "end", "evenly", "start"]
|
|
180
|
+
}
|
|
181
|
+
],
|
|
182
|
+
"patterns": [
|
|
183
|
+
"flex-{breakpoint}-column-reverse",
|
|
184
|
+
"flex-{breakpoint}-grow-0",
|
|
185
|
+
"flex-{breakpoint}-grow-1",
|
|
186
|
+
"flex-{breakpoint}-row-reverse",
|
|
187
|
+
"flex-{breakpoint}-shrink-0",
|
|
188
|
+
"flex-{breakpoint}-shrink-1"
|
|
189
|
+
],
|
|
190
|
+
"classes": [
|
|
191
|
+
"flex-column-reverse",
|
|
192
|
+
"flex-grow-0",
|
|
193
|
+
"flex-grow-1",
|
|
194
|
+
"flex-row-reverse",
|
|
195
|
+
"flex-shrink-0",
|
|
196
|
+
"flex-shrink-1"
|
|
197
|
+
]
|
|
198
|
+
},
|
|
199
|
+
"Grid": {
|
|
200
|
+
"families": [
|
|
201
|
+
{
|
|
202
|
+
"patterns": ["col-{breakpoint}-{value}", "col-{value}"],
|
|
203
|
+
"values": ["1", "10", "11", "12", "2", "3", "4", "5", "6", "7", "8", "9"]
|
|
204
|
+
}
|
|
205
|
+
],
|
|
206
|
+
"patterns": [],
|
|
207
|
+
"classes": ["col", "grid"]
|
|
208
|
+
},
|
|
209
|
+
"Gap": {
|
|
210
|
+
"families": [
|
|
211
|
+
{
|
|
212
|
+
"patterns": [
|
|
213
|
+
"column-gap-{breakpoint}-{value}",
|
|
214
|
+
"column-gap-{value}",
|
|
215
|
+
"gap-{breakpoint}-{value}",
|
|
216
|
+
"gap-{value}",
|
|
217
|
+
"row-gap-{breakpoint}-{value}",
|
|
218
|
+
"row-gap-{value}"
|
|
219
|
+
],
|
|
220
|
+
"values": ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5"]
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
"patterns": [],
|
|
224
|
+
"classes": []
|
|
225
|
+
},
|
|
226
|
+
"Order": {
|
|
227
|
+
"families": [
|
|
228
|
+
{
|
|
229
|
+
"patterns": ["order-{breakpoint}-{value}", "order-{value}"],
|
|
230
|
+
"values": ["0", "1", "2", "3", "4", "5", "first", "last"]
|
|
231
|
+
}
|
|
232
|
+
],
|
|
233
|
+
"patterns": [],
|
|
234
|
+
"classes": []
|
|
235
|
+
},
|
|
236
|
+
"Borders": {
|
|
237
|
+
"families": [
|
|
238
|
+
{
|
|
239
|
+
"patterns": ["border-{value}"],
|
|
240
|
+
"values": [
|
|
241
|
+
"0",
|
|
242
|
+
"1",
|
|
243
|
+
"2",
|
|
244
|
+
"3",
|
|
245
|
+
"4",
|
|
246
|
+
"5",
|
|
247
|
+
"accent",
|
|
248
|
+
"b",
|
|
249
|
+
"e",
|
|
250
|
+
"error",
|
|
251
|
+
"primary",
|
|
252
|
+
"s",
|
|
253
|
+
"secondary",
|
|
254
|
+
"success",
|
|
255
|
+
"t",
|
|
256
|
+
"transparent",
|
|
257
|
+
"warning"
|
|
258
|
+
]
|
|
259
|
+
}
|
|
260
|
+
],
|
|
261
|
+
"patterns": [],
|
|
262
|
+
"classes": ["border", "border-b-0", "border-e-0", "border-s-0", "border-t-0"]
|
|
263
|
+
},
|
|
264
|
+
"Position": {
|
|
265
|
+
"families": [
|
|
266
|
+
{
|
|
267
|
+
"patterns": [
|
|
268
|
+
"bottom-{breakpoint}-{value}",
|
|
269
|
+
"bottom-{value}",
|
|
270
|
+
"inset-block-end-{breakpoint}-{value}",
|
|
271
|
+
"inset-block-end-{value}",
|
|
272
|
+
"inset-block-start-{breakpoint}-{value}",
|
|
273
|
+
"inset-block-start-{value}",
|
|
274
|
+
"inset-block-{breakpoint}-{value}",
|
|
275
|
+
"inset-block-{value}",
|
|
276
|
+
"inset-inline-end-{breakpoint}-{value}",
|
|
277
|
+
"inset-inline-end-{value}",
|
|
278
|
+
"inset-inline-start-{breakpoint}-{value}",
|
|
279
|
+
"inset-inline-start-{value}",
|
|
280
|
+
"inset-inline-{breakpoint}-{value}",
|
|
281
|
+
"inset-inline-{value}",
|
|
282
|
+
"inset-{breakpoint}-{value}",
|
|
283
|
+
"inset-{value}",
|
|
284
|
+
"left-{breakpoint}-{value}",
|
|
285
|
+
"left-{value}",
|
|
286
|
+
"right-{breakpoint}-{value}",
|
|
287
|
+
"right-{value}",
|
|
288
|
+
"top-{breakpoint}-{value}",
|
|
289
|
+
"top-{value}"
|
|
290
|
+
],
|
|
291
|
+
"values": ["0", "100", "25", "50", "75", "auto"]
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"patterns": ["position-{value}"],
|
|
295
|
+
"values": [
|
|
296
|
+
"absolute",
|
|
297
|
+
"fixed",
|
|
298
|
+
"inherit",
|
|
299
|
+
"initial",
|
|
300
|
+
"relative",
|
|
301
|
+
"static",
|
|
302
|
+
"sticky",
|
|
303
|
+
"unset"
|
|
304
|
+
]
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"patterns": ["z-index-{value}"],
|
|
308
|
+
"values": [
|
|
309
|
+
"0",
|
|
310
|
+
"1",
|
|
311
|
+
"2",
|
|
312
|
+
"3",
|
|
313
|
+
"drawer",
|
|
314
|
+
"header",
|
|
315
|
+
"n1",
|
|
316
|
+
"overlay",
|
|
317
|
+
"toast",
|
|
318
|
+
"tooltip"
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
],
|
|
322
|
+
"patterns": [],
|
|
323
|
+
"classes": ["fixed-top"]
|
|
324
|
+
},
|
|
325
|
+
"Sizing": {
|
|
326
|
+
"families": [
|
|
327
|
+
{
|
|
328
|
+
"patterns": [
|
|
329
|
+
"block-size-{breakpoint}-{value}",
|
|
330
|
+
"block-size-{value}",
|
|
331
|
+
"h-{breakpoint}-{value}",
|
|
332
|
+
"h-{value}",
|
|
333
|
+
"inline-size-{breakpoint}-{value}",
|
|
334
|
+
"inline-size-{value}",
|
|
335
|
+
"w-{breakpoint}-{value}",
|
|
336
|
+
"w-{value}"
|
|
337
|
+
],
|
|
338
|
+
"values": ["100", "25", "30", "40", "50", "60", "75", "auto"]
|
|
339
|
+
}
|
|
340
|
+
],
|
|
341
|
+
"patterns": [],
|
|
342
|
+
"classes": ["container", "img-responsive", "min-w-0"]
|
|
343
|
+
},
|
|
344
|
+
"Backgrounds": {
|
|
345
|
+
"families": [
|
|
346
|
+
{
|
|
347
|
+
"patterns": ["bg-gray-{value}"],
|
|
348
|
+
"values": [
|
|
349
|
+
"100",
|
|
350
|
+
"150",
|
|
351
|
+
"200",
|
|
352
|
+
"250",
|
|
353
|
+
"300",
|
|
354
|
+
"350",
|
|
355
|
+
"400",
|
|
356
|
+
"450",
|
|
357
|
+
"50",
|
|
358
|
+
"500",
|
|
359
|
+
"550",
|
|
360
|
+
"600",
|
|
361
|
+
"650",
|
|
362
|
+
"700",
|
|
363
|
+
"750",
|
|
364
|
+
"800",
|
|
365
|
+
"850",
|
|
366
|
+
"900",
|
|
367
|
+
"950"
|
|
368
|
+
]
|
|
369
|
+
},
|
|
370
|
+
{ "patterns": ["bg-opacity-{value}"], "values": ["10", "25", "50", "75"] },
|
|
371
|
+
{
|
|
372
|
+
"patterns": ["bg-{value}"],
|
|
373
|
+
"values": [
|
|
374
|
+
"accent",
|
|
375
|
+
"active",
|
|
376
|
+
"black",
|
|
377
|
+
"body",
|
|
378
|
+
"error",
|
|
379
|
+
"highlight",
|
|
380
|
+
"inverse",
|
|
381
|
+
"primary",
|
|
382
|
+
"secondary",
|
|
383
|
+
"success",
|
|
384
|
+
"surface",
|
|
385
|
+
"transparent",
|
|
386
|
+
"warning",
|
|
387
|
+
"white"
|
|
388
|
+
]
|
|
389
|
+
}
|
|
390
|
+
],
|
|
391
|
+
"patterns": [],
|
|
392
|
+
"classes": ["bg-surface-hover"]
|
|
393
|
+
},
|
|
394
|
+
"Border radius": {
|
|
395
|
+
"families": [
|
|
396
|
+
{
|
|
397
|
+
"patterns": ["rounded-{value}"],
|
|
398
|
+
"values": [
|
|
399
|
+
"0",
|
|
400
|
+
"bottom",
|
|
401
|
+
"circle",
|
|
402
|
+
"end",
|
|
403
|
+
"lg",
|
|
404
|
+
"md",
|
|
405
|
+
"pill",
|
|
406
|
+
"sm",
|
|
407
|
+
"start",
|
|
408
|
+
"top"
|
|
409
|
+
]
|
|
410
|
+
}
|
|
411
|
+
],
|
|
412
|
+
"patterns": [],
|
|
413
|
+
"classes": ["rounded"]
|
|
414
|
+
},
|
|
415
|
+
"Shadows": {
|
|
416
|
+
"families": [{ "patterns": ["shadow-{value}"], "values": ["0", "lg", "md", "sm"] }],
|
|
417
|
+
"patterns": [],
|
|
418
|
+
"classes": [
|
|
419
|
+
"hover-shadow",
|
|
420
|
+
"hover-shadow-lg",
|
|
421
|
+
"hover-shadow-md",
|
|
422
|
+
"hover-shadow-sm",
|
|
423
|
+
"shadow"
|
|
424
|
+
]
|
|
425
|
+
},
|
|
426
|
+
"Overflow": {
|
|
427
|
+
"families": [],
|
|
428
|
+
"patterns": [],
|
|
429
|
+
"classes": [
|
|
430
|
+
"no-scroll",
|
|
431
|
+
"overflow-wrap-anywhere",
|
|
432
|
+
"overflow-wrap-break-word",
|
|
433
|
+
"overflow-wrap-normal",
|
|
434
|
+
"overflow-y-scroll"
|
|
435
|
+
]
|
|
436
|
+
},
|
|
437
|
+
"Visibility": { "families": [], "patterns": [], "classes": ["hidden"] },
|
|
438
|
+
"States / interaction": {
|
|
439
|
+
"families": [],
|
|
440
|
+
"patterns": [],
|
|
441
|
+
"classes": ["focus-ring", "focus-ring-0"]
|
|
442
|
+
},
|
|
443
|
+
"Components and component states": {
|
|
444
|
+
"families": [
|
|
445
|
+
{
|
|
446
|
+
"patterns": ["alert-{value}", "toast-{value}"],
|
|
447
|
+
"values": ["action", "actions", "close", "content", "icon", "message", "title"]
|
|
448
|
+
},
|
|
449
|
+
{ "patterns": ["avatar-{value}"], "values": ["lg", "md", "sm", "square", "xl"] },
|
|
450
|
+
{
|
|
451
|
+
"patterns": ["btn-{value}"],
|
|
452
|
+
"values": [
|
|
453
|
+
"accent",
|
|
454
|
+
"error",
|
|
455
|
+
"lg",
|
|
456
|
+
"outline",
|
|
457
|
+
"primary",
|
|
458
|
+
"secondary",
|
|
459
|
+
"sm",
|
|
460
|
+
"solid",
|
|
461
|
+
"success",
|
|
462
|
+
"text",
|
|
463
|
+
"warning",
|
|
464
|
+
"xs"
|
|
465
|
+
]
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"patterns": ["card-{value}"],
|
|
469
|
+
"values": ["action", "body", "header", "subtitle", "title"]
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"patterns": ["chip-{value}"],
|
|
473
|
+
"values": [
|
|
474
|
+
"accent",
|
|
475
|
+
"action",
|
|
476
|
+
"error",
|
|
477
|
+
"interactive",
|
|
478
|
+
"label",
|
|
479
|
+
"outline",
|
|
480
|
+
"primary",
|
|
481
|
+
"secondary",
|
|
482
|
+
"solid",
|
|
483
|
+
"success",
|
|
484
|
+
"text",
|
|
485
|
+
"warning"
|
|
486
|
+
]
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"patterns": ["empty-state-{value}"],
|
|
490
|
+
"values": ["actions", "compact", "description", "icon", "page", "title"]
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"patterns": ["expansion-panel-{value}"],
|
|
494
|
+
"values": ["container", "content", "header", "inner"]
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"patterns": ["file-upload-{value}"],
|
|
498
|
+
"values": ["dropzone", "feedback", "hint", "input", "list", "prompt", "summary"]
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"patterns": ["form-{value}"],
|
|
502
|
+
"values": ["check", "control", "label", "select", "switch"]
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"patterns": ["icon-btn-{value}"],
|
|
506
|
+
"values": [
|
|
507
|
+
"accent",
|
|
508
|
+
"error",
|
|
509
|
+
"lg",
|
|
510
|
+
"md",
|
|
511
|
+
"outline",
|
|
512
|
+
"primary",
|
|
513
|
+
"secondary",
|
|
514
|
+
"sm",
|
|
515
|
+
"solid",
|
|
516
|
+
"success",
|
|
517
|
+
"text",
|
|
518
|
+
"warning",
|
|
519
|
+
"xs"
|
|
520
|
+
]
|
|
521
|
+
},
|
|
522
|
+
{ "patterns": ["icon-{value}"], "values": ["btn", "lg", "md", "sm", "xl"] },
|
|
523
|
+
{
|
|
524
|
+
"patterns": ["is-{value}"],
|
|
525
|
+
"values": [
|
|
526
|
+
"active",
|
|
527
|
+
"closing",
|
|
528
|
+
"completed",
|
|
529
|
+
"dragover",
|
|
530
|
+
"error",
|
|
531
|
+
"invalid",
|
|
532
|
+
"open",
|
|
533
|
+
"required",
|
|
534
|
+
"warning"
|
|
535
|
+
]
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"patterns": ["menu-item-{value}"],
|
|
539
|
+
"values": [
|
|
540
|
+
"content",
|
|
541
|
+
"description",
|
|
542
|
+
"destructive",
|
|
543
|
+
"icon",
|
|
544
|
+
"indicator",
|
|
545
|
+
"label",
|
|
546
|
+
"shortcut"
|
|
547
|
+
]
|
|
548
|
+
},
|
|
549
|
+
{
|
|
550
|
+
"patterns": ["menu-{value}"],
|
|
551
|
+
"values": ["disclosure", "group", "item", "popup", "separator", "trigger"]
|
|
552
|
+
},
|
|
553
|
+
{
|
|
554
|
+
"patterns": ["modal-{value}"],
|
|
555
|
+
"values": [
|
|
556
|
+
"body",
|
|
557
|
+
"close",
|
|
558
|
+
"content",
|
|
559
|
+
"footer",
|
|
560
|
+
"header",
|
|
561
|
+
"lg",
|
|
562
|
+
"sm",
|
|
563
|
+
"title",
|
|
564
|
+
"xl"
|
|
565
|
+
]
|
|
566
|
+
},
|
|
567
|
+
{
|
|
568
|
+
"patterns": ["popover-{value}"],
|
|
569
|
+
"values": ["arrow", "content", "panel", "title", "trigger"]
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"patterns": ["progress-{value}", "spinner-{value}"],
|
|
573
|
+
"values": [
|
|
574
|
+
"block",
|
|
575
|
+
"error",
|
|
576
|
+
"inline",
|
|
577
|
+
"lg",
|
|
578
|
+
"md",
|
|
579
|
+
"primary",
|
|
580
|
+
"secondary",
|
|
581
|
+
"sm",
|
|
582
|
+
"success",
|
|
583
|
+
"warning"
|
|
584
|
+
]
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
"patterns": ["range-slider-{value}"],
|
|
588
|
+
"values": ["header", "input", "marks", "output"]
|
|
589
|
+
},
|
|
590
|
+
{
|
|
591
|
+
"patterns": ["skeleton-{value}"],
|
|
592
|
+
"values": [
|
|
593
|
+
"avatar",
|
|
594
|
+
"headline",
|
|
595
|
+
"image",
|
|
596
|
+
"lg",
|
|
597
|
+
"lines",
|
|
598
|
+
"md",
|
|
599
|
+
"pill",
|
|
600
|
+
"sm",
|
|
601
|
+
"square",
|
|
602
|
+
"text"
|
|
603
|
+
]
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"patterns": ["stepper-{value}"],
|
|
607
|
+
"values": ["content", "horizontal", "item", "label", "marker", "status"]
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"patterns": ["table-{value}"],
|
|
611
|
+
"values": ["bordered", "borderless", "hover", "responsive", "sm", "striped"]
|
|
612
|
+
}
|
|
613
|
+
],
|
|
614
|
+
"patterns": [],
|
|
615
|
+
"classes": [
|
|
616
|
+
"alert",
|
|
617
|
+
"avatar",
|
|
618
|
+
"badge",
|
|
619
|
+
"badge-outline",
|
|
620
|
+
"bottom",
|
|
621
|
+
"breadcrumb",
|
|
622
|
+
"breadcrumb-item",
|
|
623
|
+
"btn",
|
|
624
|
+
"card",
|
|
625
|
+
"chip",
|
|
626
|
+
"disabled",
|
|
627
|
+
"drawer",
|
|
628
|
+
"drawer-body",
|
|
629
|
+
"drawer-header",
|
|
630
|
+
"drawer-title",
|
|
631
|
+
"empty-state",
|
|
632
|
+
"expansion-panel",
|
|
633
|
+
"file-upload",
|
|
634
|
+
"file-upload-feedback-error",
|
|
635
|
+
"file-upload-file-name",
|
|
636
|
+
"form-check-input",
|
|
637
|
+
"form-switch-input",
|
|
638
|
+
"icon",
|
|
639
|
+
"input-group",
|
|
640
|
+
"input-group-lg",
|
|
641
|
+
"input-group-sm",
|
|
642
|
+
"input-group-text",
|
|
643
|
+
"invalid-feedback",
|
|
644
|
+
"is-focus-visible",
|
|
645
|
+
"left",
|
|
646
|
+
"list",
|
|
647
|
+
"list-flush",
|
|
648
|
+
"list-item",
|
|
649
|
+
"list-item-action",
|
|
650
|
+
"list-item-text",
|
|
651
|
+
"menu",
|
|
652
|
+
"menu-align-end",
|
|
653
|
+
"menu-group-label",
|
|
654
|
+
"modal",
|
|
655
|
+
"navbar",
|
|
656
|
+
"navbar-logo",
|
|
657
|
+
"overlay",
|
|
658
|
+
"pagination",
|
|
659
|
+
"pagination-ellipsis",
|
|
660
|
+
"pagination-item",
|
|
661
|
+
"popover",
|
|
662
|
+
"progress",
|
|
663
|
+
"range-slider",
|
|
664
|
+
"required",
|
|
665
|
+
"right",
|
|
666
|
+
"skeleton",
|
|
667
|
+
"skeleton-aspect-square",
|
|
668
|
+
"skeleton-aspect-video",
|
|
669
|
+
"spinner",
|
|
670
|
+
"stepper",
|
|
671
|
+
"stepper-align-start",
|
|
672
|
+
"tab",
|
|
673
|
+
"tab-content",
|
|
674
|
+
"table",
|
|
675
|
+
"tabs",
|
|
676
|
+
"timeline",
|
|
677
|
+
"timeline-dot",
|
|
678
|
+
"timeline-item",
|
|
679
|
+
"timeline-numbered",
|
|
680
|
+
"toast",
|
|
681
|
+
"tooltip",
|
|
682
|
+
"tooltip-arrow",
|
|
683
|
+
"tooltip-content",
|
|
684
|
+
"top",
|
|
685
|
+
"was-validated"
|
|
686
|
+
]
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
}
|
|
@@ -0,0 +1,489 @@
|
|
|
1
|
+
# @oardi/css-utils Utility Reference
|
|
2
|
+
|
|
3
|
+
> Generated automatically. Do not edit manually.
|
|
4
|
+
|
|
5
|
+
- Package: `@oardi/css-utils`
|
|
6
|
+
- Version: `0.127.0`
|
|
7
|
+
- Source: public SCSS entry point and utility configuration
|
|
8
|
+
|
|
9
|
+
## Usage guidance
|
|
10
|
+
|
|
11
|
+
Use `@oardi/css-utils` as the primary styling system. Check this reference before adding CSS; compose existing utilities where reasonable. Avoid helper classes that duplicate them. Use component CSS when no suitable utility exists or the styling is component-specific.
|
|
12
|
+
|
|
13
|
+
## Responsive utilities
|
|
14
|
+
|
|
15
|
+
`{breakpoint}` means one of `sm` (576px), `md` (768px), `lg` (992px), `xl` (1200px), `xxl` (1400px). Variants apply from that breakpoint upward. `{value}` means one of the values listed beside its pattern. Decimal spacing classes use a literal dot, for example `m-0.5`.
|
|
16
|
+
|
|
17
|
+
## Display
|
|
18
|
+
|
|
19
|
+
Values: `block` | `flex` | `inline` | `none`
|
|
20
|
+
|
|
21
|
+
- `d-{breakpoint}-{value}`
|
|
22
|
+
- `d-{value}`
|
|
23
|
+
|
|
24
|
+
Responsive patterns:
|
|
25
|
+
|
|
26
|
+
- `d-{breakpoint}-inline-block`
|
|
27
|
+
- `d-{breakpoint}-inline-flex`
|
|
28
|
+
|
|
29
|
+
Classes:
|
|
30
|
+
|
|
31
|
+
- `d-inline-block`
|
|
32
|
+
- `d-inline-flex`
|
|
33
|
+
|
|
34
|
+
## Typography
|
|
35
|
+
|
|
36
|
+
Classes:
|
|
37
|
+
|
|
38
|
+
- `h1`
|
|
39
|
+
- `h2`
|
|
40
|
+
- `h3`
|
|
41
|
+
- `h4`
|
|
42
|
+
- `h5`
|
|
43
|
+
- `h6`
|
|
44
|
+
|
|
45
|
+
## Text / colors
|
|
46
|
+
|
|
47
|
+
Values: `0` | `1` | `2` | `3` | `4` | `5`
|
|
48
|
+
|
|
49
|
+
- `letter-space-{value}`
|
|
50
|
+
|
|
51
|
+
Values: `lg` | `md` | `sm` | `xl` | `xs` | `xxl` | `xxxl`
|
|
52
|
+
|
|
53
|
+
- `lh-{value}`
|
|
54
|
+
|
|
55
|
+
Values: `loose` | `none` | `normal` | `relaxed` | `snug` | `tight`
|
|
56
|
+
|
|
57
|
+
- `line-height-{value}`
|
|
58
|
+
|
|
59
|
+
Values: `100` | `150` | `200` | `250` | `300` | `350` | `400` | `450` | `50` | `500` | `550` | `600` | `650` | `700` | `750` | `800` | `850` | `900` | `950`
|
|
60
|
+
|
|
61
|
+
- `text-gray-{value}`
|
|
62
|
+
|
|
63
|
+
Values: `accent` | `error` | `primary` | `secondary` | `success` | `warning`
|
|
64
|
+
|
|
65
|
+
- `text-underline-{value}`
|
|
66
|
+
|
|
67
|
+
Values: `accent` | `black` | `body` | `capitalize` | `center` | `end` | `error` | `inherit` | `inverse` | `lg` | `md` | `muted` | `primary` | `secondary` | `sm` | `start` | `subtle` | `success` | `uppercase` | `warning` | `white` | `xl` | `xs` | `xxl` | `xxxl`
|
|
68
|
+
|
|
69
|
+
- `text-{value}`
|
|
70
|
+
|
|
71
|
+
Classes:
|
|
72
|
+
|
|
73
|
+
- `line-height-extra-loose`
|
|
74
|
+
|
|
75
|
+
## Spacing
|
|
76
|
+
|
|
77
|
+
Values: `0` | `0.5` | `1` | `1.5` | `2` | `2.5` | `3` | `3.5` | `4` | `4.5` | `5` | `auto`
|
|
78
|
+
|
|
79
|
+
- `m-{breakpoint}-{value}`
|
|
80
|
+
- `m-{value}`
|
|
81
|
+
- `mb-{breakpoint}-{value}`
|
|
82
|
+
- `mb-{value}`
|
|
83
|
+
- `me-{breakpoint}-{value}`
|
|
84
|
+
- `me-{value}`
|
|
85
|
+
- `ms-{breakpoint}-{value}`
|
|
86
|
+
- `ms-{value}`
|
|
87
|
+
- `mt-{breakpoint}-{value}`
|
|
88
|
+
- `mt-{value}`
|
|
89
|
+
- `mx-{breakpoint}-{value}`
|
|
90
|
+
- `mx-{value}`
|
|
91
|
+
- `my-{breakpoint}-{value}`
|
|
92
|
+
- `my-{value}`
|
|
93
|
+
|
|
94
|
+
Values: `0` | `0.5` | `1` | `1.5` | `2` | `2.5` | `3` | `3.5` | `4` | `4.5` | `5`
|
|
95
|
+
|
|
96
|
+
- `p-{breakpoint}-{value}`
|
|
97
|
+
- `p-{value}`
|
|
98
|
+
- `pb-{breakpoint}-{value}`
|
|
99
|
+
- `pb-{value}`
|
|
100
|
+
- `pe-{breakpoint}-{value}`
|
|
101
|
+
- `pe-{value}`
|
|
102
|
+
- `ps-{breakpoint}-{value}`
|
|
103
|
+
- `ps-{value}`
|
|
104
|
+
- `pt-{breakpoint}-{value}`
|
|
105
|
+
- `pt-{value}`
|
|
106
|
+
- `px-{breakpoint}-{value}`
|
|
107
|
+
- `px-{value}`
|
|
108
|
+
- `py-{breakpoint}-{value}`
|
|
109
|
+
- `py-{value}`
|
|
110
|
+
- `space-x-{breakpoint}-{value}`
|
|
111
|
+
- `space-x-{value}`
|
|
112
|
+
- `space-y-{breakpoint}-{value}`
|
|
113
|
+
- `space-y-{value}`
|
|
114
|
+
|
|
115
|
+
## Flex
|
|
116
|
+
|
|
117
|
+
Values: `around` | `between` | `center` | `end` | `evenly` | `start` | `stretch`
|
|
118
|
+
|
|
119
|
+
- `align-content-{breakpoint}-{value}`
|
|
120
|
+
- `align-content-{value}`
|
|
121
|
+
|
|
122
|
+
Values: `baseline` | `center` | `end` | `start` | `stretch`
|
|
123
|
+
|
|
124
|
+
- `align-items-{breakpoint}-{value}`
|
|
125
|
+
- `align-items-{value}`
|
|
126
|
+
|
|
127
|
+
Values: `auto` | `baseline` | `center` | `end` | `start` | `stretch`
|
|
128
|
+
|
|
129
|
+
- `align-self-{breakpoint}-{value}`
|
|
130
|
+
- `align-self-{value}`
|
|
131
|
+
|
|
132
|
+
Values: `column` | `fill` | `nowrap` | `row` | `wrap`
|
|
133
|
+
|
|
134
|
+
- `flex-{breakpoint}-{value}`
|
|
135
|
+
|
|
136
|
+
Values: `1` | `column` | `fill` | `nowrap` | `row` | `wrap`
|
|
137
|
+
|
|
138
|
+
- `flex-{value}`
|
|
139
|
+
|
|
140
|
+
Values: `around` | `between` | `center` | `end` | `evenly` | `start`
|
|
141
|
+
|
|
142
|
+
- `justify-content-{breakpoint}-{value}`
|
|
143
|
+
- `justify-content-{value}`
|
|
144
|
+
|
|
145
|
+
Responsive patterns:
|
|
146
|
+
|
|
147
|
+
- `flex-{breakpoint}-column-reverse`
|
|
148
|
+
- `flex-{breakpoint}-grow-0`
|
|
149
|
+
- `flex-{breakpoint}-grow-1`
|
|
150
|
+
- `flex-{breakpoint}-row-reverse`
|
|
151
|
+
- `flex-{breakpoint}-shrink-0`
|
|
152
|
+
- `flex-{breakpoint}-shrink-1`
|
|
153
|
+
|
|
154
|
+
Classes:
|
|
155
|
+
|
|
156
|
+
- `flex-column-reverse`
|
|
157
|
+
- `flex-grow-0`
|
|
158
|
+
- `flex-grow-1`
|
|
159
|
+
- `flex-row-reverse`
|
|
160
|
+
- `flex-shrink-0`
|
|
161
|
+
- `flex-shrink-1`
|
|
162
|
+
|
|
163
|
+
## Grid
|
|
164
|
+
|
|
165
|
+
Values: `1` | `10` | `11` | `12` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
|
|
166
|
+
|
|
167
|
+
- `col-{breakpoint}-{value}`
|
|
168
|
+
- `col-{value}`
|
|
169
|
+
|
|
170
|
+
Classes:
|
|
171
|
+
|
|
172
|
+
- `col`
|
|
173
|
+
- `grid`
|
|
174
|
+
|
|
175
|
+
## Gap
|
|
176
|
+
|
|
177
|
+
Values: `0` | `0.5` | `1` | `1.5` | `2` | `2.5` | `3` | `3.5` | `4` | `4.5` | `5`
|
|
178
|
+
|
|
179
|
+
- `column-gap-{breakpoint}-{value}`
|
|
180
|
+
- `column-gap-{value}`
|
|
181
|
+
- `gap-{breakpoint}-{value}`
|
|
182
|
+
- `gap-{value}`
|
|
183
|
+
- `row-gap-{breakpoint}-{value}`
|
|
184
|
+
- `row-gap-{value}`
|
|
185
|
+
|
|
186
|
+
## Order
|
|
187
|
+
|
|
188
|
+
Values: `0` | `1` | `2` | `3` | `4` | `5` | `first` | `last`
|
|
189
|
+
|
|
190
|
+
- `order-{breakpoint}-{value}`
|
|
191
|
+
- `order-{value}`
|
|
192
|
+
|
|
193
|
+
## Borders
|
|
194
|
+
|
|
195
|
+
Values: `0` | `1` | `2` | `3` | `4` | `5` | `accent` | `b` | `e` | `error` | `primary` | `s` | `secondary` | `success` | `t` | `transparent` | `warning`
|
|
196
|
+
|
|
197
|
+
- `border-{value}`
|
|
198
|
+
|
|
199
|
+
Classes:
|
|
200
|
+
|
|
201
|
+
- `border`
|
|
202
|
+
- `border-b-0`
|
|
203
|
+
- `border-e-0`
|
|
204
|
+
- `border-s-0`
|
|
205
|
+
- `border-t-0`
|
|
206
|
+
|
|
207
|
+
## Position
|
|
208
|
+
|
|
209
|
+
Values: `0` | `100` | `25` | `50` | `75` | `auto`
|
|
210
|
+
|
|
211
|
+
- `bottom-{breakpoint}-{value}`
|
|
212
|
+
- `bottom-{value}`
|
|
213
|
+
- `inset-block-end-{breakpoint}-{value}`
|
|
214
|
+
- `inset-block-end-{value}`
|
|
215
|
+
- `inset-block-start-{breakpoint}-{value}`
|
|
216
|
+
- `inset-block-start-{value}`
|
|
217
|
+
- `inset-block-{breakpoint}-{value}`
|
|
218
|
+
- `inset-block-{value}`
|
|
219
|
+
- `inset-inline-end-{breakpoint}-{value}`
|
|
220
|
+
- `inset-inline-end-{value}`
|
|
221
|
+
- `inset-inline-start-{breakpoint}-{value}`
|
|
222
|
+
- `inset-inline-start-{value}`
|
|
223
|
+
- `inset-inline-{breakpoint}-{value}`
|
|
224
|
+
- `inset-inline-{value}`
|
|
225
|
+
- `inset-{breakpoint}-{value}`
|
|
226
|
+
- `inset-{value}`
|
|
227
|
+
- `left-{breakpoint}-{value}`
|
|
228
|
+
- `left-{value}`
|
|
229
|
+
- `right-{breakpoint}-{value}`
|
|
230
|
+
- `right-{value}`
|
|
231
|
+
- `top-{breakpoint}-{value}`
|
|
232
|
+
- `top-{value}`
|
|
233
|
+
|
|
234
|
+
Values: `absolute` | `fixed` | `inherit` | `initial` | `relative` | `static` | `sticky` | `unset`
|
|
235
|
+
|
|
236
|
+
- `position-{value}`
|
|
237
|
+
|
|
238
|
+
Values: `0` | `1` | `2` | `3` | `drawer` | `header` | `n1` | `overlay` | `toast` | `tooltip`
|
|
239
|
+
|
|
240
|
+
- `z-index-{value}`
|
|
241
|
+
|
|
242
|
+
Classes:
|
|
243
|
+
|
|
244
|
+
- `fixed-top`
|
|
245
|
+
|
|
246
|
+
## Sizing
|
|
247
|
+
|
|
248
|
+
Values: `100` | `25` | `30` | `40` | `50` | `60` | `75` | `auto`
|
|
249
|
+
|
|
250
|
+
- `block-size-{breakpoint}-{value}`
|
|
251
|
+
- `block-size-{value}`
|
|
252
|
+
- `h-{breakpoint}-{value}`
|
|
253
|
+
- `h-{value}`
|
|
254
|
+
- `inline-size-{breakpoint}-{value}`
|
|
255
|
+
- `inline-size-{value}`
|
|
256
|
+
- `w-{breakpoint}-{value}`
|
|
257
|
+
- `w-{value}`
|
|
258
|
+
|
|
259
|
+
Classes:
|
|
260
|
+
|
|
261
|
+
- `container`
|
|
262
|
+
- `img-responsive`
|
|
263
|
+
- `min-w-0`
|
|
264
|
+
|
|
265
|
+
## Backgrounds
|
|
266
|
+
|
|
267
|
+
Values: `100` | `150` | `200` | `250` | `300` | `350` | `400` | `450` | `50` | `500` | `550` | `600` | `650` | `700` | `750` | `800` | `850` | `900` | `950`
|
|
268
|
+
|
|
269
|
+
- `bg-gray-{value}`
|
|
270
|
+
|
|
271
|
+
Values: `10` | `25` | `50` | `75`
|
|
272
|
+
|
|
273
|
+
- `bg-opacity-{value}`
|
|
274
|
+
|
|
275
|
+
Values: `accent` | `active` | `black` | `body` | `error` | `highlight` | `inverse` | `primary` | `secondary` | `success` | `surface` | `transparent` | `warning` | `white`
|
|
276
|
+
|
|
277
|
+
- `bg-{value}`
|
|
278
|
+
|
|
279
|
+
Classes:
|
|
280
|
+
|
|
281
|
+
- `bg-surface-hover`
|
|
282
|
+
|
|
283
|
+
## Border radius
|
|
284
|
+
|
|
285
|
+
Values: `0` | `bottom` | `circle` | `end` | `lg` | `md` | `pill` | `sm` | `start` | `top`
|
|
286
|
+
|
|
287
|
+
- `rounded-{value}`
|
|
288
|
+
|
|
289
|
+
Classes:
|
|
290
|
+
|
|
291
|
+
- `rounded`
|
|
292
|
+
|
|
293
|
+
## Shadows
|
|
294
|
+
|
|
295
|
+
Values: `0` | `lg` | `md` | `sm`
|
|
296
|
+
|
|
297
|
+
- `shadow-{value}`
|
|
298
|
+
|
|
299
|
+
Classes:
|
|
300
|
+
|
|
301
|
+
- `hover-shadow`
|
|
302
|
+
- `hover-shadow-lg`
|
|
303
|
+
- `hover-shadow-md`
|
|
304
|
+
- `hover-shadow-sm`
|
|
305
|
+
- `shadow`
|
|
306
|
+
|
|
307
|
+
## Overflow
|
|
308
|
+
|
|
309
|
+
Classes:
|
|
310
|
+
|
|
311
|
+
- `no-scroll`
|
|
312
|
+
- `overflow-wrap-anywhere`
|
|
313
|
+
- `overflow-wrap-break-word`
|
|
314
|
+
- `overflow-wrap-normal`
|
|
315
|
+
- `overflow-y-scroll`
|
|
316
|
+
|
|
317
|
+
## Visibility
|
|
318
|
+
|
|
319
|
+
Classes:
|
|
320
|
+
|
|
321
|
+
- `hidden`
|
|
322
|
+
|
|
323
|
+
## States / interaction
|
|
324
|
+
|
|
325
|
+
Classes:
|
|
326
|
+
|
|
327
|
+
- `focus-ring`
|
|
328
|
+
- `focus-ring-0`
|
|
329
|
+
|
|
330
|
+
## Components and component states
|
|
331
|
+
|
|
332
|
+
Values: `action` | `actions` | `close` | `content` | `icon` | `message` | `title`
|
|
333
|
+
|
|
334
|
+
- `alert-{value}`
|
|
335
|
+
- `toast-{value}`
|
|
336
|
+
|
|
337
|
+
Values: `lg` | `md` | `sm` | `square` | `xl`
|
|
338
|
+
|
|
339
|
+
- `avatar-{value}`
|
|
340
|
+
|
|
341
|
+
Values: `accent` | `error` | `lg` | `outline` | `primary` | `secondary` | `sm` | `solid` | `success` | `text` | `warning` | `xs`
|
|
342
|
+
|
|
343
|
+
- `btn-{value}`
|
|
344
|
+
|
|
345
|
+
Values: `action` | `body` | `header` | `subtitle` | `title`
|
|
346
|
+
|
|
347
|
+
- `card-{value}`
|
|
348
|
+
|
|
349
|
+
Values: `accent` | `action` | `error` | `interactive` | `label` | `outline` | `primary` | `secondary` | `solid` | `success` | `text` | `warning`
|
|
350
|
+
|
|
351
|
+
- `chip-{value}`
|
|
352
|
+
|
|
353
|
+
Values: `actions` | `compact` | `description` | `icon` | `page` | `title`
|
|
354
|
+
|
|
355
|
+
- `empty-state-{value}`
|
|
356
|
+
|
|
357
|
+
Values: `container` | `content` | `header` | `inner`
|
|
358
|
+
|
|
359
|
+
- `expansion-panel-{value}`
|
|
360
|
+
|
|
361
|
+
Values: `dropzone` | `feedback` | `hint` | `input` | `list` | `prompt` | `summary`
|
|
362
|
+
|
|
363
|
+
- `file-upload-{value}`
|
|
364
|
+
|
|
365
|
+
Values: `check` | `control` | `label` | `select` | `switch`
|
|
366
|
+
|
|
367
|
+
- `form-{value}`
|
|
368
|
+
|
|
369
|
+
Values: `accent` | `error` | `lg` | `md` | `outline` | `primary` | `secondary` | `sm` | `solid` | `success` | `text` | `warning` | `xs`
|
|
370
|
+
|
|
371
|
+
- `icon-btn-{value}`
|
|
372
|
+
|
|
373
|
+
Values: `btn` | `lg` | `md` | `sm` | `xl`
|
|
374
|
+
|
|
375
|
+
- `icon-{value}`
|
|
376
|
+
|
|
377
|
+
Values: `active` | `closing` | `completed` | `dragover` | `error` | `invalid` | `open` | `required` | `warning`
|
|
378
|
+
|
|
379
|
+
- `is-{value}`
|
|
380
|
+
|
|
381
|
+
Values: `content` | `description` | `destructive` | `icon` | `indicator` | `label` | `shortcut`
|
|
382
|
+
|
|
383
|
+
- `menu-item-{value}`
|
|
384
|
+
|
|
385
|
+
Values: `disclosure` | `group` | `item` | `popup` | `separator` | `trigger`
|
|
386
|
+
|
|
387
|
+
- `menu-{value}`
|
|
388
|
+
|
|
389
|
+
Values: `body` | `close` | `content` | `footer` | `header` | `lg` | `sm` | `title` | `xl`
|
|
390
|
+
|
|
391
|
+
- `modal-{value}`
|
|
392
|
+
|
|
393
|
+
Values: `arrow` | `content` | `panel` | `title` | `trigger`
|
|
394
|
+
|
|
395
|
+
- `popover-{value}`
|
|
396
|
+
|
|
397
|
+
Values: `block` | `error` | `inline` | `lg` | `md` | `primary` | `secondary` | `sm` | `success` | `warning`
|
|
398
|
+
|
|
399
|
+
- `progress-{value}`
|
|
400
|
+
- `spinner-{value}`
|
|
401
|
+
|
|
402
|
+
Values: `header` | `input` | `marks` | `output`
|
|
403
|
+
|
|
404
|
+
- `range-slider-{value}`
|
|
405
|
+
|
|
406
|
+
Values: `avatar` | `headline` | `image` | `lg` | `lines` | `md` | `pill` | `sm` | `square` | `text`
|
|
407
|
+
|
|
408
|
+
- `skeleton-{value}`
|
|
409
|
+
|
|
410
|
+
Values: `content` | `horizontal` | `item` | `label` | `marker` | `status`
|
|
411
|
+
|
|
412
|
+
- `stepper-{value}`
|
|
413
|
+
|
|
414
|
+
Values: `bordered` | `borderless` | `hover` | `responsive` | `sm` | `striped`
|
|
415
|
+
|
|
416
|
+
- `table-{value}`
|
|
417
|
+
|
|
418
|
+
Classes:
|
|
419
|
+
|
|
420
|
+
- `alert`
|
|
421
|
+
- `avatar`
|
|
422
|
+
- `badge`
|
|
423
|
+
- `badge-outline`
|
|
424
|
+
- `bottom`
|
|
425
|
+
- `breadcrumb`
|
|
426
|
+
- `breadcrumb-item`
|
|
427
|
+
- `btn`
|
|
428
|
+
- `card`
|
|
429
|
+
- `chip`
|
|
430
|
+
- `disabled`
|
|
431
|
+
- `drawer`
|
|
432
|
+
- `drawer-body`
|
|
433
|
+
- `drawer-header`
|
|
434
|
+
- `drawer-title`
|
|
435
|
+
- `empty-state`
|
|
436
|
+
- `expansion-panel`
|
|
437
|
+
- `file-upload`
|
|
438
|
+
- `file-upload-feedback-error`
|
|
439
|
+
- `file-upload-file-name`
|
|
440
|
+
- `form-check-input`
|
|
441
|
+
- `form-switch-input`
|
|
442
|
+
- `icon`
|
|
443
|
+
- `input-group`
|
|
444
|
+
- `input-group-lg`
|
|
445
|
+
- `input-group-sm`
|
|
446
|
+
- `input-group-text`
|
|
447
|
+
- `invalid-feedback`
|
|
448
|
+
- `is-focus-visible`
|
|
449
|
+
- `left`
|
|
450
|
+
- `list`
|
|
451
|
+
- `list-flush`
|
|
452
|
+
- `list-item`
|
|
453
|
+
- `list-item-action`
|
|
454
|
+
- `list-item-text`
|
|
455
|
+
- `menu`
|
|
456
|
+
- `menu-align-end`
|
|
457
|
+
- `menu-group-label`
|
|
458
|
+
- `modal`
|
|
459
|
+
- `navbar`
|
|
460
|
+
- `navbar-logo`
|
|
461
|
+
- `overlay`
|
|
462
|
+
- `pagination`
|
|
463
|
+
- `pagination-ellipsis`
|
|
464
|
+
- `pagination-item`
|
|
465
|
+
- `popover`
|
|
466
|
+
- `progress`
|
|
467
|
+
- `range-slider`
|
|
468
|
+
- `required`
|
|
469
|
+
- `right`
|
|
470
|
+
- `skeleton`
|
|
471
|
+
- `skeleton-aspect-square`
|
|
472
|
+
- `skeleton-aspect-video`
|
|
473
|
+
- `spinner`
|
|
474
|
+
- `stepper`
|
|
475
|
+
- `stepper-align-start`
|
|
476
|
+
- `tab`
|
|
477
|
+
- `tab-content`
|
|
478
|
+
- `table`
|
|
479
|
+
- `tabs`
|
|
480
|
+
- `timeline`
|
|
481
|
+
- `timeline-dot`
|
|
482
|
+
- `timeline-item`
|
|
483
|
+
- `timeline-numbered`
|
|
484
|
+
- `toast`
|
|
485
|
+
- `tooltip`
|
|
486
|
+
- `tooltip-arrow`
|
|
487
|
+
- `tooltip-content`
|
|
488
|
+
- `top`
|
|
489
|
+
- `was-validated`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.127.0",
|
|
4
4
|
"author": "Ardian Shala",
|
|
5
5
|
"homepage": "https://css-utils.oardi.com",
|
|
6
6
|
"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
|
|
@@ -32,10 +32,13 @@
|
|
|
32
32
|
},
|
|
33
33
|
"files": [
|
|
34
34
|
"scss",
|
|
35
|
+
"css-utils-reference.md",
|
|
36
|
+
"css-utils-manifest.json",
|
|
35
37
|
"LICENSE.md"
|
|
36
38
|
],
|
|
37
39
|
"license": "MIT",
|
|
38
40
|
"scripts": {
|
|
41
|
+
"prepack": "npm --prefix .. run generate:utility-reference",
|
|
39
42
|
"prepublishOnly": "npm --prefix .. run validate"
|
|
40
43
|
},
|
|
41
44
|
"publishConfig": {
|
package/readme.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
CSS Utils is a lightweight SCSS toolkit with utility classes, responsive helpers and reusable component styles. CSS variables and cascade layers make the system easy to customize without repetitive application CSS.
|
|
4
4
|
|
|
5
|
+
The package includes `css-utils-reference.md` and `css-utils-manifest.json` so developers and AI coding tools can discover its utility API.
|
|
6
|
+
|
|
5
7
|
## What it includes
|
|
6
8
|
|
|
7
9
|
- Utilities for colors, typography, spacing, sizing, positioning, display, flex and grid
|