@ponchia/ui 0.2.1 → 0.3.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.
Files changed (48) hide show
  1. package/README.md +128 -54
  2. package/behaviors/index.d.ts +36 -0
  3. package/behaviors/index.js +321 -7
  4. package/classes/index.d.ts +228 -3
  5. package/classes/index.js +139 -4
  6. package/css/app.css +64 -64
  7. package/css/base.css +136 -24
  8. package/css/content.css +324 -0
  9. package/css/core.css +9 -5
  10. package/css/disclosure.css +323 -0
  11. package/css/dots.css +125 -8
  12. package/css/feedback.css +243 -0
  13. package/css/fonts.css +11 -0
  14. package/css/forms.css +41 -14
  15. package/css/motion.css +29 -5
  16. package/css/navigation.css +22 -86
  17. package/css/overlay.css +206 -0
  18. package/css/primitives.css +37 -18
  19. package/css/site.css +295 -0
  20. package/css/table.css +9 -9
  21. package/css/tokens.css +84 -20
  22. package/dist/bronto.css +1 -0
  23. package/dist/css/app.css +1 -0
  24. package/dist/css/base.css +1 -0
  25. package/dist/css/content.css +1 -0
  26. package/dist/css/disclosure.css +1 -0
  27. package/dist/css/dots.css +1 -0
  28. package/dist/css/feedback.css +1 -0
  29. package/dist/css/fonts.css +1 -0
  30. package/dist/css/forms.css +1 -0
  31. package/dist/css/motion.css +1 -0
  32. package/dist/css/navigation.css +1 -0
  33. package/dist/css/overlay.css +1 -0
  34. package/dist/css/primitives.css +1 -0
  35. package/dist/css/site.css +1 -0
  36. package/dist/css/table.css +1 -0
  37. package/dist/css/tokens.css +1 -0
  38. package/package.json +62 -21
  39. package/shiki/nothing.json +83 -0
  40. package/tokens/index.d.ts +18 -10
  41. package/tokens/index.js +16 -14
  42. package/tokens/index.json +32 -28
  43. package/tokens/tokens.dtcg.json +589 -0
  44. package/css/cards.css +0 -336
  45. package/css/index.css +0 -5
  46. package/css/layout.css +0 -219
  47. package/css/responsive.css +0 -157
  48. package/css/typography.css +0 -139
@@ -0,0 +1,589 @@
1
+ {
2
+ "$description": "@ponchia/ui design tokens (W3C DTCG). Generated from tokens/index.js — do not edit by hand. CSS-runtime-derived tokens carry $value:null + $extensions.com.ponchia.css.",
3
+ "scale": {
4
+ "radius": {
5
+ "xl": {
6
+ "$type": "dimension",
7
+ "$value": "4px"
8
+ },
9
+ "lg": {
10
+ "$type": "dimension",
11
+ "$value": "3px"
12
+ },
13
+ "md": {
14
+ "$type": "dimension",
15
+ "$value": "2px"
16
+ },
17
+ "sm": {
18
+ "$type": "dimension",
19
+ "$value": "1px"
20
+ },
21
+ "pill": {
22
+ "$type": "dimension",
23
+ "$value": "999px"
24
+ }
25
+ },
26
+ "space": {
27
+ "2xs": {
28
+ "$type": "dimension",
29
+ "$value": "0.25rem"
30
+ },
31
+ "xs": {
32
+ "$type": "dimension",
33
+ "$value": "0.5rem"
34
+ },
35
+ "sm": {
36
+ "$type": "dimension",
37
+ "$value": "0.75rem"
38
+ },
39
+ "md": {
40
+ "$type": "dimension",
41
+ "$value": "1rem"
42
+ },
43
+ "lg": {
44
+ "$type": "dimension",
45
+ "$value": "1.35rem"
46
+ },
47
+ "xl": {
48
+ "$type": "dimension",
49
+ "$value": "1.75rem"
50
+ },
51
+ "2xl": {
52
+ "$type": "dimension",
53
+ "$value": "2.5rem"
54
+ }
55
+ },
56
+ "mono": {
57
+ "DEFAULT": {
58
+ "$type": "fontFamily",
59
+ "$value": [
60
+ "JetBrains Mono",
61
+ "Fira Code",
62
+ "Cascadia Code",
63
+ "SF Mono",
64
+ "ui-monospace",
65
+ "monospace"
66
+ ]
67
+ }
68
+ },
69
+ "sans": {
70
+ "DEFAULT": {
71
+ "$type": "fontFamily",
72
+ "$value": [
73
+ "Inter",
74
+ "SF Pro Text",
75
+ "-apple-system",
76
+ "BlinkMacSystemFont",
77
+ "Segoe UI",
78
+ "system-ui",
79
+ "sans-serif"
80
+ ]
81
+ }
82
+ },
83
+ "display": {
84
+ "DEFAULT": {
85
+ "$type": "fontFamily",
86
+ "$value": null,
87
+ "$extensions": {
88
+ "com.ponchia.css": "'Doto', var(--mono)"
89
+ }
90
+ }
91
+ },
92
+ "dot": {
93
+ "font": {
94
+ "$type": "fontFamily",
95
+ "$value": null,
96
+ "$extensions": {
97
+ "com.ponchia.css": "'Doto', var(--mono)"
98
+ }
99
+ },
100
+ "size": {
101
+ "$type": "dimension",
102
+ "$value": "2px"
103
+ },
104
+ "gap": {
105
+ "$type": "dimension",
106
+ "$value": "14px"
107
+ }
108
+ },
109
+ "text": {
110
+ "2xs": {
111
+ "$type": "dimension",
112
+ "$value": "0.68rem"
113
+ },
114
+ "xs": {
115
+ "$type": "dimension",
116
+ "$value": "0.76rem"
117
+ },
118
+ "sm": {
119
+ "$type": "dimension",
120
+ "$value": "0.86rem"
121
+ },
122
+ "base": {
123
+ "$type": "dimension",
124
+ "$value": "0.95rem"
125
+ },
126
+ "lg": {
127
+ "$type": "dimension",
128
+ "$value": "1.15rem"
129
+ },
130
+ "xl": {
131
+ "$type": "dimension",
132
+ "$value": "1.45rem"
133
+ }
134
+ },
135
+ "tracking": {
136
+ "wide": {
137
+ "$type": "dimension",
138
+ "$value": "0.14em"
139
+ },
140
+ "wider": {
141
+ "$type": "dimension",
142
+ "$value": "0.22em"
143
+ }
144
+ },
145
+ "ease": {
146
+ "standard": {
147
+ "$type": "cubicBezier",
148
+ "$value": [
149
+ 0.2,
150
+ 0.8,
151
+ 0.2,
152
+ 1
153
+ ]
154
+ },
155
+ "spring": {
156
+ "$type": "cubicBezier",
157
+ "$value": [
158
+ 0.16,
159
+ 1,
160
+ 0.3,
161
+ 1
162
+ ]
163
+ },
164
+ "out": {
165
+ "$type": "cubicBezier",
166
+ "$value": [
167
+ 0.33,
168
+ 1,
169
+ 0.68,
170
+ 1
171
+ ]
172
+ }
173
+ },
174
+ "duration": {
175
+ "fast": {
176
+ "$type": "duration",
177
+ "$value": {
178
+ "value": 130,
179
+ "unit": "ms"
180
+ }
181
+ },
182
+ "base": {
183
+ "$type": "duration",
184
+ "$value": {
185
+ "value": 200,
186
+ "unit": "ms"
187
+ }
188
+ },
189
+ "slow": {
190
+ "$type": "duration",
191
+ "$value": {
192
+ "value": 360,
193
+ "unit": "ms"
194
+ }
195
+ }
196
+ },
197
+ "surface": {
198
+ "DEFAULT": {
199
+ "$type": "color",
200
+ "$value": null,
201
+ "$extensions": {
202
+ "com.ponchia.css": "var(--panel)"
203
+ }
204
+ },
205
+ "raised": {
206
+ "$type": "color",
207
+ "$value": null,
208
+ "$extensions": {
209
+ "com.ponchia.css": "var(--panel-strong)"
210
+ }
211
+ },
212
+ "muted": {
213
+ "$type": "color",
214
+ "$value": null,
215
+ "$extensions": {
216
+ "com.ponchia.css": "var(--panel-soft)"
217
+ }
218
+ }
219
+ },
220
+ "border": {
221
+ "DEFAULT": {
222
+ "$type": "color",
223
+ "$value": null,
224
+ "$extensions": {
225
+ "com.ponchia.css": "var(--line)"
226
+ }
227
+ },
228
+ "strong": {
229
+ "$type": "color",
230
+ "$value": null,
231
+ "$extensions": {
232
+ "com.ponchia.css": "var(--line-strong)"
233
+ }
234
+ }
235
+ }
236
+ },
237
+ "color": {
238
+ "light": {
239
+ "bg": {
240
+ "DEFAULT": {
241
+ "$type": "color",
242
+ "$value": "#f4f4f2"
243
+ },
244
+ "elevated": {
245
+ "$type": "color",
246
+ "$value": "#fbfbfa"
247
+ },
248
+ "accent": {
249
+ "$type": "color",
250
+ "$value": null,
251
+ "$extensions": {
252
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 6%, transparent)"
253
+ }
254
+ }
255
+ },
256
+ "panel": {
257
+ "DEFAULT": {
258
+ "$type": "color",
259
+ "$value": "#ffffff"
260
+ },
261
+ "strong": {
262
+ "$type": "color",
263
+ "$value": "#ffffff"
264
+ },
265
+ "soft": {
266
+ "$type": "color",
267
+ "$value": "#ececea"
268
+ }
269
+ },
270
+ "line": {
271
+ "DEFAULT": {
272
+ "$type": "color",
273
+ "$value": "#d8d8d4"
274
+ },
275
+ "strong": {
276
+ "$type": "color",
277
+ "$value": "#a8a8a2"
278
+ }
279
+ },
280
+ "text": {
281
+ "DEFAULT": {
282
+ "$type": "color",
283
+ "$value": "#0a0a0a"
284
+ },
285
+ "soft": {
286
+ "$type": "color",
287
+ "$value": "#353533"
288
+ },
289
+ "dim": {
290
+ "$type": "color",
291
+ "$value": "#686863"
292
+ }
293
+ },
294
+ "accent": {
295
+ "DEFAULT": {
296
+ "$type": "color",
297
+ "$value": "#d71921"
298
+ },
299
+ "strong": {
300
+ "$type": "color",
301
+ "$value": null,
302
+ "$extensions": {
303
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 83%, #000)"
304
+ }
305
+ },
306
+ "text": {
307
+ "$type": "color",
308
+ "$value": null,
309
+ "$extensions": {
310
+ "com.ponchia.css": "var(--accent-strong)"
311
+ }
312
+ },
313
+ "soft": {
314
+ "$type": "color",
315
+ "$value": null,
316
+ "$extensions": {
317
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 10%, transparent)"
318
+ }
319
+ }
320
+ },
321
+ "success": {
322
+ "DEFAULT": {
323
+ "$type": "color",
324
+ "$value": "#2f7d4f"
325
+ },
326
+ "soft": {
327
+ "$type": "color",
328
+ "$value": "rgba(47, 125, 79, 0.12)"
329
+ }
330
+ },
331
+ "warning": {
332
+ "DEFAULT": {
333
+ "$type": "color",
334
+ "$value": "#806414"
335
+ },
336
+ "soft": {
337
+ "$type": "color",
338
+ "$value": "rgba(128, 100, 20, 0.13)"
339
+ }
340
+ },
341
+ "orange": {
342
+ "DEFAULT": {
343
+ "$type": "color",
344
+ "$value": "#a85f32"
345
+ },
346
+ "soft": {
347
+ "$type": "color",
348
+ "$value": "rgba(168, 95, 50, 0.13)"
349
+ }
350
+ },
351
+ "danger": {
352
+ "DEFAULT": {
353
+ "$type": "color",
354
+ "$value": "#c01622"
355
+ },
356
+ "soft": {
357
+ "$type": "color",
358
+ "$value": "rgba(192, 22, 34, 0.1)"
359
+ }
360
+ },
361
+ "code": {
362
+ "bg": {
363
+ "$type": "color",
364
+ "$value": "rgba(10, 10, 10, 0.05)"
365
+ }
366
+ },
367
+ "button": {
368
+ "text": {
369
+ "$type": "color",
370
+ "$value": "#ffffff"
371
+ }
372
+ },
373
+ "field": {
374
+ "dot": {
375
+ "$type": "color",
376
+ "$value": "rgba(10, 10, 10, 0.16)"
377
+ },
378
+ "dot-hot": {
379
+ "$type": "color",
380
+ "$value": "rgba(10, 10, 10, 0.4)"
381
+ },
382
+ "dot-accent": {
383
+ "$type": "color",
384
+ "$value": null,
385
+ "$extensions": {
386
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 78%, transparent)"
387
+ }
388
+ }
389
+ },
390
+ "focus": {
391
+ "ring": {
392
+ "$type": "color",
393
+ "$value": null,
394
+ "$extensions": {
395
+ "com.ponchia.css": "var(--accent)"
396
+ }
397
+ }
398
+ },
399
+ "shadow": {
400
+ "DEFAULT": {
401
+ "$type": "shadow",
402
+ "$value": "none"
403
+ },
404
+ "raised": {
405
+ "$type": "shadow",
406
+ "$value": null,
407
+ "$extensions": {
408
+ "com.ponchia.css": "0 0 0 1px var(--line-strong)"
409
+ }
410
+ }
411
+ }
412
+ },
413
+ "dark": {
414
+ "bg": {
415
+ "DEFAULT": {
416
+ "$type": "color",
417
+ "$value": "#000000"
418
+ },
419
+ "elevated": {
420
+ "$type": "color",
421
+ "$value": "#0a0a0a"
422
+ },
423
+ "accent": {
424
+ "$type": "color",
425
+ "$value": null,
426
+ "$extensions": {
427
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 8%, transparent)"
428
+ }
429
+ }
430
+ },
431
+ "panel": {
432
+ "DEFAULT": {
433
+ "$type": "color",
434
+ "$value": "#0c0c0c"
435
+ },
436
+ "strong": {
437
+ "$type": "color",
438
+ "$value": "#141414"
439
+ },
440
+ "soft": {
441
+ "$type": "color",
442
+ "$value": "#1a1a1a"
443
+ }
444
+ },
445
+ "line": {
446
+ "DEFAULT": {
447
+ "$type": "color",
448
+ "$value": "#2a2a2a"
449
+ },
450
+ "strong": {
451
+ "$type": "color",
452
+ "$value": "#444444"
453
+ }
454
+ },
455
+ "text": {
456
+ "DEFAULT": {
457
+ "$type": "color",
458
+ "$value": "#f2f2f2"
459
+ },
460
+ "soft": {
461
+ "$type": "color",
462
+ "$value": "#c4c4c4"
463
+ },
464
+ "dim": {
465
+ "$type": "color",
466
+ "$value": "#858585"
467
+ }
468
+ },
469
+ "accent": {
470
+ "DEFAULT": {
471
+ "$type": "color",
472
+ "$value": "#ff3b41"
473
+ },
474
+ "strong": {
475
+ "$type": "color",
476
+ "$value": null,
477
+ "$extensions": {
478
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 84%, #fff)"
479
+ }
480
+ },
481
+ "text": {
482
+ "$type": "color",
483
+ "$value": null,
484
+ "$extensions": {
485
+ "com.ponchia.css": "var(--accent-strong)"
486
+ }
487
+ },
488
+ "soft": {
489
+ "$type": "color",
490
+ "$value": null,
491
+ "$extensions": {
492
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 14%, transparent)"
493
+ }
494
+ }
495
+ },
496
+ "success": {
497
+ "DEFAULT": {
498
+ "$type": "color",
499
+ "$value": "#4ec27e"
500
+ },
501
+ "soft": {
502
+ "$type": "color",
503
+ "$value": "rgba(78, 194, 126, 0.14)"
504
+ }
505
+ },
506
+ "warning": {
507
+ "DEFAULT": {
508
+ "$type": "color",
509
+ "$value": "#d8bd72"
510
+ },
511
+ "soft": {
512
+ "$type": "color",
513
+ "$value": "rgba(216, 189, 114, 0.14)"
514
+ }
515
+ },
516
+ "orange": {
517
+ "DEFAULT": {
518
+ "$type": "color",
519
+ "$value": "#d08c5b"
520
+ },
521
+ "soft": {
522
+ "$type": "color",
523
+ "$value": "rgba(208, 140, 91, 0.15)"
524
+ }
525
+ },
526
+ "danger": {
527
+ "DEFAULT": {
528
+ "$type": "color",
529
+ "$value": "#ff4d54"
530
+ },
531
+ "soft": {
532
+ "$type": "color",
533
+ "$value": "rgba(255, 77, 84, 0.15)"
534
+ }
535
+ },
536
+ "code": {
537
+ "bg": {
538
+ "$type": "color",
539
+ "$value": "rgba(255, 255, 255, 0.05)"
540
+ }
541
+ },
542
+ "button": {
543
+ "text": {
544
+ "$type": "color",
545
+ "$value": "#000000"
546
+ }
547
+ },
548
+ "field": {
549
+ "dot": {
550
+ "$type": "color",
551
+ "$value": "rgba(242, 242, 242, 0.14)"
552
+ },
553
+ "dot-hot": {
554
+ "$type": "color",
555
+ "$value": "rgba(242, 242, 242, 0.36)"
556
+ },
557
+ "dot-accent": {
558
+ "$type": "color",
559
+ "$value": null,
560
+ "$extensions": {
561
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 82%, transparent)"
562
+ }
563
+ }
564
+ },
565
+ "focus": {
566
+ "ring": {
567
+ "$type": "color",
568
+ "$value": null,
569
+ "$extensions": {
570
+ "com.ponchia.css": "var(--accent)"
571
+ }
572
+ }
573
+ },
574
+ "shadow": {
575
+ "DEFAULT": {
576
+ "$type": "shadow",
577
+ "$value": "none"
578
+ },
579
+ "raised": {
580
+ "$type": "shadow",
581
+ "$value": null,
582
+ "$extensions": {
583
+ "com.ponchia.css": "0 0 0 1px var(--line-strong)"
584
+ }
585
+ }
586
+ }
587
+ }
588
+ }
589
+ }