@ponchia/ui 0.2.2 → 0.3.1

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 +108 -79
  2. package/behaviors/index.d.ts +53 -0
  3. package/behaviors/index.js +745 -34
  4. package/classes/index.d.ts +216 -3
  5. package/classes/index.js +85 -10
  6. package/classes/vscode.css-custom-data.json +407 -0
  7. package/css/app.css +53 -44
  8. package/css/base.css +14 -23
  9. package/css/content.css +37 -2
  10. package/css/core.css +5 -5
  11. package/css/disclosure.css +17 -5
  12. package/css/dots.css +1 -1
  13. package/css/feedback.css +87 -2
  14. package/css/forms.css +128 -2
  15. package/css/navigation.css +16 -85
  16. package/css/overlay.css +73 -2
  17. package/css/primitives.css +100 -3
  18. package/css/site.css +295 -0
  19. package/css/table.css +59 -0
  20. package/css/tokens.css +79 -24
  21. package/dist/bronto.css +1 -1
  22. package/dist/css/app.css +1 -0
  23. package/dist/css/base.css +1 -0
  24. package/dist/css/content.css +1 -0
  25. package/dist/css/disclosure.css +1 -0
  26. package/dist/css/dots.css +1 -0
  27. package/dist/css/feedback.css +1 -0
  28. package/dist/css/fonts.css +1 -0
  29. package/dist/css/forms.css +1 -0
  30. package/dist/css/motion.css +1 -0
  31. package/dist/css/navigation.css +1 -0
  32. package/dist/css/overlay.css +1 -0
  33. package/dist/css/primitives.css +1 -0
  34. package/dist/css/site.css +1 -0
  35. package/dist/css/table.css +1 -0
  36. package/dist/css/tokens.css +1 -0
  37. package/package.json +60 -30
  38. package/shiki/nothing.json +83 -0
  39. package/tokens/index.d.ts +18 -10
  40. package/tokens/index.js +49 -16
  41. package/tokens/index.json +98 -32
  42. package/tokens/tokens.dtcg.json +241 -22
  43. package/css/cards.css +0 -336
  44. package/css/index.css +0 -5
  45. package/css/layout.css +0 -219
  46. package/css/responsive.css +0 -157
  47. package/css/typography.css +0 -139
  48. package/dist/bronto-core.css +0 -1
package/tokens/tokens.dtcg.json CHANGED
@@ -108,27 +108,27 @@
108
108
  },
109
109
  "text": {
110
110
  "2xs": {
111
- "$type": "color",
111
+ "$type": "dimension",
112
112
  "$value": "0.68rem"
113
113
  },
114
114
  "xs": {
115
- "$type": "color",
115
+ "$type": "dimension",
116
116
  "$value": "0.76rem"
117
117
  },
118
118
  "sm": {
119
- "$type": "color",
119
+ "$type": "dimension",
120
120
  "$value": "0.86rem"
121
121
  },
122
122
  "base": {
123
- "$type": "color",
123
+ "$type": "dimension",
124
124
  "$value": "0.95rem"
125
125
  },
126
126
  "lg": {
127
- "$type": "color",
127
+ "$type": "dimension",
128
128
  "$value": "1.15rem"
129
129
  },
130
130
  "xl": {
131
- "$type": "color",
131
+ "$type": "dimension",
132
132
  "$value": "1.45rem"
133
133
  }
134
134
  },
@@ -194,7 +194,119 @@
194
194
  }
195
195
  }
196
196
  },
197
+ "z": {
198
+ "base": {
199
+ "$type": "number",
200
+ "$value": "0"
201
+ },
202
+ "raised": {
203
+ "$type": "number",
204
+ "$value": "10"
205
+ },
206
+ "sticky": {
207
+ "$type": "number",
208
+ "$value": "20"
209
+ },
210
+ "overlay": {
211
+ "$type": "number",
212
+ "$value": "30"
213
+ },
214
+ "popover": {
215
+ "$type": "number",
216
+ "$value": "50"
217
+ },
218
+ "toast": {
219
+ "$type": "number",
220
+ "$value": "60"
221
+ }
222
+ },
223
+ "accent": {
224
+ "1": {
225
+ "$type": "color",
226
+ "$value": null,
227
+ "$extensions": {
228
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 8%, var(--bg))"
229
+ }
230
+ },
231
+ "2": {
232
+ "$type": "color",
233
+ "$value": null,
234
+ "$extensions": {
235
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 16%, var(--bg))"
236
+ }
237
+ },
238
+ "3": {
239
+ "$type": "color",
240
+ "$value": null,
241
+ "$extensions": {
242
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 32%, var(--bg))"
243
+ }
244
+ },
245
+ "4": {
246
+ "$type": "color",
247
+ "$value": null,
248
+ "$extensions": {
249
+ "com.ponchia.css": "color-mix(in srgb, var(--accent) 60%, var(--bg))"
250
+ }
251
+ },
252
+ "5": {
253
+ "$type": "color",
254
+ "$value": null,
255
+ "$extensions": {
256
+ "com.ponchia.css": "var(--accent)"
257
+ }
258
+ },
259
+ "6": {
260
+ "$type": "color",
261
+ "$value": null,
262
+ "$extensions": {
263
+ "com.ponchia.css": "var(--accent-strong)"
264
+ }
265
+ }
266
+ },
197
267
  "surface": {
268
+ "1": {
269
+ "$type": "color",
270
+ "$value": null,
271
+ "$extensions": {
272
+ "com.ponchia.css": "var(--bg)"
273
+ }
274
+ },
275
+ "2": {
276
+ "$type": "color",
277
+ "$value": null,
278
+ "$extensions": {
279
+ "com.ponchia.css": "var(--bg-elevated)"
280
+ }
281
+ },
282
+ "3": {
283
+ "$type": "color",
284
+ "$value": null,
285
+ "$extensions": {
286
+ "com.ponchia.css": "var(--panel)"
287
+ }
288
+ },
289
+ "4": {
290
+ "$type": "color",
291
+ "$value": null,
292
+ "$extensions": {
293
+ "com.ponchia.css": "var(--panel-soft)"
294
+ }
295
+ },
296
+ "5": {
297
+ "$type": "color",
298
+ "$value": null,
299
+ "$extensions": {
300
+ "com.ponchia.css": "var(--line)"
301
+ }
302
+ },
303
+ "6": {
304
+ "$type": "color",
305
+ "$value": null,
306
+ "$extensions": {
307
+ "com.ponchia.css": "var(--line-strong)"
308
+ }
309
+ },
198
310
  "DEFAULT": {
199
311
  "$type": "color",
200
312
  "$value": null,
@@ -217,6 +329,99 @@
217
329
  }
218
330
  }
219
331
  },
332
+ "bronto": {
333
+ "color-bg": {
334
+ "$type": "color",
335
+ "$value": null,
336
+ "$extensions": {
337
+ "com.ponchia.css": "var(--bg)"
338
+ }
339
+ },
340
+ "color-surface": {
341
+ "$type": "color",
342
+ "$value": null,
343
+ "$extensions": {
344
+ "com.ponchia.css": "var(--panel)"
345
+ }
346
+ },
347
+ "color-surface-raised": {
348
+ "$type": "color",
349
+ "$value": null,
350
+ "$extensions": {
351
+ "com.ponchia.css": "var(--panel-strong)"
352
+ }
353
+ },
354
+ "color-border": {
355
+ "$type": "color",
356
+ "$value": null,
357
+ "$extensions": {
358
+ "com.ponchia.css": "var(--line)"
359
+ }
360
+ },
361
+ "color-border-strong": {
362
+ "$type": "color",
363
+ "$value": null,
364
+ "$extensions": {
365
+ "com.ponchia.css": "var(--line-strong)"
366
+ }
367
+ },
368
+ "color-text": {
369
+ "$type": "color",
370
+ "$value": null,
371
+ "$extensions": {
372
+ "com.ponchia.css": "var(--text)"
373
+ }
374
+ },
375
+ "color-text-muted": {
376
+ "$type": "color",
377
+ "$value": null,
378
+ "$extensions": {
379
+ "com.ponchia.css": "var(--text-dim)"
380
+ }
381
+ },
382
+ "color-action": {
383
+ "$type": "color",
384
+ "$value": null,
385
+ "$extensions": {
386
+ "com.ponchia.css": "var(--accent)"
387
+ }
388
+ },
389
+ "color-on-action": {
390
+ "$type": "color",
391
+ "$value": null,
392
+ "$extensions": {
393
+ "com.ponchia.css": "var(--button-text)"
394
+ }
395
+ },
396
+ "color-focus": {
397
+ "$type": "color",
398
+ "$value": null,
399
+ "$extensions": {
400
+ "com.ponchia.css": "var(--focus-ring)"
401
+ }
402
+ },
403
+ "color-success": {
404
+ "$type": "color",
405
+ "$value": null,
406
+ "$extensions": {
407
+ "com.ponchia.css": "var(--success)"
408
+ }
409
+ },
410
+ "color-warning": {
411
+ "$type": "color",
412
+ "$value": null,
413
+ "$extensions": {
414
+ "com.ponchia.css": "var(--warning)"
415
+ }
416
+ },
417
+ "color-danger": {
418
+ "$type": "color",
419
+ "$value": null,
420
+ "$extensions": {
421
+ "com.ponchia.css": "var(--danger)"
422
+ }
423
+ }
424
+ },
220
425
  "border": {
221
426
  "DEFAULT": {
222
427
  "$type": "color",
@@ -303,6 +508,13 @@
303
508
  "com.ponchia.css": "color-mix(in srgb, var(--accent) 83%, #000)"
304
509
  }
305
510
  },
511
+ "text": {
512
+ "$type": "color",
513
+ "$value": null,
514
+ "$extensions": {
515
+ "com.ponchia.css": "var(--accent-strong)"
516
+ }
517
+ },
306
518
  "soft": {
307
519
  "$type": "color",
308
520
  "$value": null,
@@ -318,7 +530,7 @@
318
530
  },
319
531
  "soft": {
320
532
  "$type": "color",
321
- "$value": "rgba(47, 125, 79, 0.12)"
533
+ "$value": "rgb(47, 125, 79, 0.12)"
322
534
  }
323
535
  },
324
536
  "warning": {
@@ -328,7 +540,7 @@
328
540
  },
329
541
  "soft": {
330
542
  "$type": "color",
331
- "$value": "rgba(128, 100, 20, 0.13)"
543
+ "$value": "rgb(128, 100, 20, 0.13)"
332
544
  }
333
545
  },
334
546
  "orange": {
@@ -338,7 +550,7 @@
338
550
  },
339
551
  "soft": {
340
552
  "$type": "color",
341
- "$value": "rgba(168, 95, 50, 0.13)"
553
+ "$value": "rgb(168, 95, 50, 0.13)"
342
554
  }
343
555
  },
344
556
  "danger": {
@@ -348,13 +560,13 @@
348
560
  },
349
561
  "soft": {
350
562
  "$type": "color",
351
- "$value": "rgba(192, 22, 34, 0.1)"
563
+ "$value": "rgb(192, 22, 34, 0.1)"
352
564
  }
353
565
  },
354
566
  "code": {
355
567
  "bg": {
356
568
  "$type": "color",
357
- "$value": "rgba(10, 10, 10, 0.05)"
569
+ "$value": "rgb(10, 10, 10, 0.05)"
358
570
  }
359
571
  },
360
572
  "button": {
@@ -366,11 +578,11 @@
366
578
  "field": {
367
579
  "dot": {
368
580
  "$type": "color",
369
- "$value": "rgba(10, 10, 10, 0.16)"
581
+ "$value": "rgb(10, 10, 10, 0.16)"
370
582
  },
371
583
  "dot-hot": {
372
584
  "$type": "color",
373
- "$value": "rgba(10, 10, 10, 0.4)"
585
+ "$value": "rgb(10, 10, 10, 0.4)"
374
586
  },
375
587
  "dot-accent": {
376
588
  "$type": "color",
@@ -385,7 +597,7 @@
385
597
  "$type": "color",
386
598
  "$value": null,
387
599
  "$extensions": {
388
- "com.ponchia.css": "color-mix(in srgb, var(--accent) 50%, transparent)"
600
+ "com.ponchia.css": "var(--accent)"
389
601
  }
390
602
  }
391
603
  },
@@ -471,6 +683,13 @@
471
683
  "com.ponchia.css": "color-mix(in srgb, var(--accent) 84%, #fff)"
472
684
  }
473
685
  },
686
+ "text": {
687
+ "$type": "color",
688
+ "$value": null,
689
+ "$extensions": {
690
+ "com.ponchia.css": "var(--accent-strong)"
691
+ }
692
+ },
474
693
  "soft": {
475
694
  "$type": "color",
476
695
  "$value": null,
@@ -486,7 +705,7 @@
486
705
  },
487
706
  "soft": {
488
707
  "$type": "color",
489
- "$value": "rgba(78, 194, 126, 0.14)"
708
+ "$value": "rgb(78, 194, 126, 0.14)"
490
709
  }
491
710
  },
492
711
  "warning": {
@@ -496,7 +715,7 @@
496
715
  },
497
716
  "soft": {
498
717
  "$type": "color",
499
- "$value": "rgba(216, 189, 114, 0.14)"
718
+ "$value": "rgb(216, 189, 114, 0.14)"
500
719
  }
501
720
  },
502
721
  "orange": {
@@ -506,7 +725,7 @@
506
725
  },
507
726
  "soft": {
508
727
  "$type": "color",
509
- "$value": "rgba(208, 140, 91, 0.15)"
728
+ "$value": "rgb(208, 140, 91, 0.15)"
510
729
  }
511
730
  },
512
731
  "danger": {
@@ -516,13 +735,13 @@
516
735
  },
517
736
  "soft": {
518
737
  "$type": "color",
519
- "$value": "rgba(255, 77, 84, 0.15)"
738
+ "$value": "rgb(255, 77, 84, 0.15)"
520
739
  }
521
740
  },
522
741
  "code": {
523
742
  "bg": {
524
743
  "$type": "color",
525
- "$value": "rgba(255, 255, 255, 0.05)"
744
+ "$value": "rgb(255, 255, 255, 0.05)"
526
745
  }
527
746
  },
528
747
  "button": {
@@ -534,11 +753,11 @@
534
753
  "field": {
535
754
  "dot": {
536
755
  "$type": "color",
537
- "$value": "rgba(242, 242, 242, 0.14)"
756
+ "$value": "rgb(242, 242, 242, 0.14)"
538
757
  },
539
758
  "dot-hot": {
540
759
  "$type": "color",
541
- "$value": "rgba(242, 242, 242, 0.36)"
760
+ "$value": "rgb(242, 242, 242, 0.36)"
542
761
  },
543
762
  "dot-accent": {
544
763
  "$type": "color",
@@ -553,7 +772,7 @@
553
772
  "$type": "color",
554
773
  "$value": null,
555
774
  "$extensions": {
556
- "com.ponchia.css": "color-mix(in srgb, var(--accent) 55%, transparent)"
775
+ "com.ponchia.css": "var(--accent)"
557
776
  }
558
777
  }
559
778
  },