@ponchia/ui 0.2.1 → 0.2.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 (30) hide show
  1. package/README.md +58 -31
  2. package/behaviors/index.d.ts +29 -0
  3. package/behaviors/index.js +172 -0
  4. package/classes/index.d.ts +37 -0
  5. package/classes/index.js +85 -0
  6. package/css/app.css +22 -22
  7. package/css/base.css +130 -10
  8. package/css/cards.css +21 -21
  9. package/css/content.css +289 -0
  10. package/css/core.css +4 -0
  11. package/css/disclosure.css +311 -0
  12. package/css/dots.css +125 -8
  13. package/css/feedback.css +243 -0
  14. package/css/fonts.css +11 -0
  15. package/css/forms.css +39 -12
  16. package/css/layout.css +5 -5
  17. package/css/motion.css +29 -5
  18. package/css/navigation.css +13 -8
  19. package/css/overlay.css +198 -0
  20. package/css/primitives.css +33 -16
  21. package/css/responsive.css +14 -14
  22. package/css/table.css +9 -9
  23. package/css/tokens.css +77 -20
  24. package/css/typography.css +9 -9
  25. package/dist/bronto-core.css +1 -0
  26. package/dist/bronto.css +1 -0
  27. package/package.json +21 -4
  28. package/tokens/index.js +14 -14
  29. package/tokens/index.json +28 -28
  30. package/tokens/tokens.dtcg.json +575 -0
package/tokens/tokens.dtcg.json ADDED
@@ -0,0 +1,575 @@
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": "color",
112
+ "$value": "0.68rem"
113
+ },
114
+ "xs": {
115
+ "$type": "color",
116
+ "$value": "0.76rem"
117
+ },
118
+ "sm": {
119
+ "$type": "color",
120
+ "$value": "0.86rem"
121
+ },
122
+ "base": {
123
+ "$type": "color",
124
+ "$value": "0.95rem"
125
+ },
126
+ "lg": {
127
+ "$type": "color",
128
+ "$value": "1.15rem"
129
+ },
130
+ "xl": {
131
+ "$type": "color",
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
+ "soft": {
307
+ "$type": "color",
308
+ "$value": null,
309
+ "$extensions": {
310
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 10%, transparent)"
311
+ }
312
+ }
313
+ },
314
+ "success": {
315
+ "DEFAULT": {
316
+ "$type": "color",
317
+ "$value": "#2f7d4f"
318
+ },
319
+ "soft": {
320
+ "$type": "color",
321
+ "$value": "rgba(47, 125, 79, 0.12)"
322
+ }
323
+ },
324
+ "warning": {
325
+ "DEFAULT": {
326
+ "$type": "color",
327
+ "$value": "#806414"
328
+ },
329
+ "soft": {
330
+ "$type": "color",
331
+ "$value": "rgba(128, 100, 20, 0.13)"
332
+ }
333
+ },
334
+ "orange": {
335
+ "DEFAULT": {
336
+ "$type": "color",
337
+ "$value": "#a85f32"
338
+ },
339
+ "soft": {
340
+ "$type": "color",
341
+ "$value": "rgba(168, 95, 50, 0.13)"
342
+ }
343
+ },
344
+ "danger": {
345
+ "DEFAULT": {
346
+ "$type": "color",
347
+ "$value": "#c01622"
348
+ },
349
+ "soft": {
350
+ "$type": "color",
351
+ "$value": "rgba(192, 22, 34, 0.1)"
352
+ }
353
+ },
354
+ "code": {
355
+ "bg": {
356
+ "$type": "color",
357
+ "$value": "rgba(10, 10, 10, 0.05)"
358
+ }
359
+ },
360
+ "button": {
361
+ "text": {
362
+ "$type": "color",
363
+ "$value": "#ffffff"
364
+ }
365
+ },
366
+ "field": {
367
+ "dot": {
368
+ "$type": "color",
369
+ "$value": "rgba(10, 10, 10, 0.16)"
370
+ },
371
+ "dot-hot": {
372
+ "$type": "color",
373
+ "$value": "rgba(10, 10, 10, 0.4)"
374
+ },
375
+ "dot-accent": {
376
+ "$type": "color",
377
+ "$value": null,
378
+ "$extensions": {
379
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 78%, transparent)"
380
+ }
381
+ }
382
+ },
383
+ "focus": {
384
+ "ring": {
385
+ "$type": "color",
386
+ "$value": null,
387
+ "$extensions": {
388
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 50%, transparent)"
389
+ }
390
+ }
391
+ },
392
+ "shadow": {
393
+ "DEFAULT": {
394
+ "$type": "shadow",
395
+ "$value": "none"
396
+ },
397
+ "raised": {
398
+ "$type": "shadow",
399
+ "$value": null,
400
+ "$extensions": {
401
+ "com.ponchia.css": "0 0 0 1px var(--line-strong)"
402
+ }
403
+ }
404
+ }
405
+ },
406
+ "dark": {
407
+ "bg": {
408
+ "DEFAULT": {
409
+ "$type": "color",
410
+ "$value": "#000000"
411
+ },
412
+ "elevated": {
413
+ "$type": "color",
414
+ "$value": "#0a0a0a"
415
+ },
416
+ "accent": {
417
+ "$type": "color",
418
+ "$value": null,
419
+ "$extensions": {
420
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 8%, transparent)"
421
+ }
422
+ }
423
+ },
424
+ "panel": {
425
+ "DEFAULT": {
426
+ "$type": "color",
427
+ "$value": "#0c0c0c"
428
+ },
429
+ "strong": {
430
+ "$type": "color",
431
+ "$value": "#141414"
432
+ },
433
+ "soft": {
434
+ "$type": "color",
435
+ "$value": "#1a1a1a"
436
+ }
437
+ },
438
+ "line": {
439
+ "DEFAULT": {
440
+ "$type": "color",
441
+ "$value": "#2a2a2a"
442
+ },
443
+ "strong": {
444
+ "$type": "color",
445
+ "$value": "#444444"
446
+ }
447
+ },
448
+ "text": {
449
+ "DEFAULT": {
450
+ "$type": "color",
451
+ "$value": "#f2f2f2"
452
+ },
453
+ "soft": {
454
+ "$type": "color",
455
+ "$value": "#c4c4c4"
456
+ },
457
+ "dim": {
458
+ "$type": "color",
459
+ "$value": "#858585"
460
+ }
461
+ },
462
+ "accent": {
463
+ "DEFAULT": {
464
+ "$type": "color",
465
+ "$value": "#ff3b41"
466
+ },
467
+ "strong": {
468
+ "$type": "color",
469
+ "$value": null,
470
+ "$extensions": {
471
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 84%, #fff)"
472
+ }
473
+ },
474
+ "soft": {
475
+ "$type": "color",
476
+ "$value": null,
477
+ "$extensions": {
478
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 14%, transparent)"
479
+ }
480
+ }
481
+ },
482
+ "success": {
483
+ "DEFAULT": {
484
+ "$type": "color",
485
+ "$value": "#4ec27e"
486
+ },
487
+ "soft": {
488
+ "$type": "color",
489
+ "$value": "rgba(78, 194, 126, 0.14)"
490
+ }
491
+ },
492
+ "warning": {
493
+ "DEFAULT": {
494
+ "$type": "color",
495
+ "$value": "#d8bd72"
496
+ },
497
+ "soft": {
498
+ "$type": "color",
499
+ "$value": "rgba(216, 189, 114, 0.14)"
500
+ }
501
+ },
502
+ "orange": {
503
+ "DEFAULT": {
504
+ "$type": "color",
505
+ "$value": "#d08c5b"
506
+ },
507
+ "soft": {
508
+ "$type": "color",
509
+ "$value": "rgba(208, 140, 91, 0.15)"
510
+ }
511
+ },
512
+ "danger": {
513
+ "DEFAULT": {
514
+ "$type": "color",
515
+ "$value": "#ff4d54"
516
+ },
517
+ "soft": {
518
+ "$type": "color",
519
+ "$value": "rgba(255, 77, 84, 0.15)"
520
+ }
521
+ },
522
+ "code": {
523
+ "bg": {
524
+ "$type": "color",
525
+ "$value": "rgba(255, 255, 255, 0.05)"
526
+ }
527
+ },
528
+ "button": {
529
+ "text": {
530
+ "$type": "color",
531
+ "$value": "#000000"
532
+ }
533
+ },
534
+ "field": {
535
+ "dot": {
536
+ "$type": "color",
537
+ "$value": "rgba(242, 242, 242, 0.14)"
538
+ },
539
+ "dot-hot": {
540
+ "$type": "color",
541
+ "$value": "rgba(242, 242, 242, 0.36)"
542
+ },
543
+ "dot-accent": {
544
+ "$type": "color",
545
+ "$value": null,
546
+ "$extensions": {
547
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 82%, transparent)"
548
+ }
549
+ }
550
+ },
551
+ "focus": {
552
+ "ring": {
553
+ "$type": "color",
554
+ "$value": null,
555
+ "$extensions": {
556
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 55%, transparent)"
557
+ }
558
+ }
559
+ },
560
+ "shadow": {
561
+ "DEFAULT": {
562
+ "$type": "shadow",
563
+ "$value": "none"
564
+ },
565
+ "raised": {
566
+ "$type": "shadow",
567
+ "$value": null,
568
+ "$extensions": {
569
+ "com.ponchia.css": "0 0 0 1px var(--line-strong)"
570
+ }
571
+ }
572
+ }
573
+ }
574
+ }
575
+ }