@ponchia/ui 0.3.0 → 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 (32) hide show
  1. package/README.md +43 -61
  2. package/behaviors/index.d.ts +46 -0
  3. package/behaviors/index.js +575 -6
  4. package/classes/index.d.ts +53 -1
  5. package/classes/index.js +58 -4
  6. package/classes/vscode.css-custom-data.json +407 -0
  7. package/css/app.css +8 -48
  8. package/css/base.css +0 -1
  9. package/css/dots.css +25 -1
  10. package/css/feedback.css +87 -2
  11. package/css/forms.css +126 -0
  12. package/css/overlay.css +64 -1
  13. package/css/primitives.css +252 -4
  14. package/css/site.css +16 -2
  15. package/css/table.css +59 -0
  16. package/css/tokens.css +69 -21
  17. package/dist/bronto.css +1 -1
  18. package/dist/css/app.css +1 -1
  19. package/dist/css/base.css +1 -1
  20. package/dist/css/dots.css +1 -1
  21. package/dist/css/feedback.css +1 -1
  22. package/dist/css/forms.css +1 -1
  23. package/dist/css/overlay.css +1 -1
  24. package/dist/css/primitives.css +1 -1
  25. package/dist/css/site.css +1 -1
  26. package/dist/css/table.css +1 -1
  27. package/dist/css/tokens.css +1 -1
  28. package/package.json +13 -7
  29. package/tokens/index.d.ts +2 -2
  30. package/tokens/index.js +45 -14
  31. package/tokens/index.json +90 -28
  32. package/tokens/tokens.dtcg.json +219 -14
package/tokens/tokens.dtcg.json CHANGED
@@ -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",
@@ -325,7 +530,7 @@
325
530
  },
326
531
  "soft": {
327
532
  "$type": "color",
328
- "$value": "rgba(47, 125, 79, 0.12)"
533
+ "$value": "rgb(47, 125, 79, 0.12)"
329
534
  }
330
535
  },
331
536
  "warning": {
@@ -335,7 +540,7 @@
335
540
  },
336
541
  "soft": {
337
542
  "$type": "color",
338
- "$value": "rgba(128, 100, 20, 0.13)"
543
+ "$value": "rgb(128, 100, 20, 0.13)"
339
544
  }
340
545
  },
341
546
  "orange": {
@@ -345,7 +550,7 @@
345
550
  },
346
551
  "soft": {
347
552
  "$type": "color",
348
- "$value": "rgba(168, 95, 50, 0.13)"
553
+ "$value": "rgb(168, 95, 50, 0.13)"
349
554
  }
350
555
  },
351
556
  "danger": {
@@ -355,13 +560,13 @@
355
560
  },
356
561
  "soft": {
357
562
  "$type": "color",
358
- "$value": "rgba(192, 22, 34, 0.1)"
563
+ "$value": "rgb(192, 22, 34, 0.1)"
359
564
  }
360
565
  },
361
566
  "code": {
362
567
  "bg": {
363
568
  "$type": "color",
364
- "$value": "rgba(10, 10, 10, 0.05)"
569
+ "$value": "rgb(10, 10, 10, 0.05)"
365
570
  }
366
571
  },
367
572
  "button": {
@@ -373,11 +578,11 @@
373
578
  "field": {
374
579
  "dot": {
375
580
  "$type": "color",
376
- "$value": "rgba(10, 10, 10, 0.16)"
581
+ "$value": "rgb(10, 10, 10, 0.16)"
377
582
  },
378
583
  "dot-hot": {
379
584
  "$type": "color",
380
- "$value": "rgba(10, 10, 10, 0.4)"
585
+ "$value": "rgb(10, 10, 10, 0.4)"
381
586
  },
382
587
  "dot-accent": {
383
588
  "$type": "color",
@@ -500,7 +705,7 @@
500
705
  },
501
706
  "soft": {
502
707
  "$type": "color",
503
- "$value": "rgba(78, 194, 126, 0.14)"
708
+ "$value": "rgb(78, 194, 126, 0.14)"
504
709
  }
505
710
  },
506
711
  "warning": {
@@ -510,7 +715,7 @@
510
715
  },
511
716
  "soft": {
512
717
  "$type": "color",
513
- "$value": "rgba(216, 189, 114, 0.14)"
718
+ "$value": "rgb(216, 189, 114, 0.14)"
514
719
  }
515
720
  },
516
721
  "orange": {
@@ -520,7 +725,7 @@
520
725
  },
521
726
  "soft": {
522
727
  "$type": "color",
523
- "$value": "rgba(208, 140, 91, 0.15)"
728
+ "$value": "rgb(208, 140, 91, 0.15)"
524
729
  }
525
730
  },
526
731
  "danger": {
@@ -530,13 +735,13 @@
530
735
  },
531
736
  "soft": {
532
737
  "$type": "color",
533
- "$value": "rgba(255, 77, 84, 0.15)"
738
+ "$value": "rgb(255, 77, 84, 0.15)"
534
739
  }
535
740
  },
536
741
  "code": {
537
742
  "bg": {
538
743
  "$type": "color",
539
- "$value": "rgba(255, 255, 255, 0.05)"
744
+ "$value": "rgb(255, 255, 255, 0.05)"
540
745
  }
541
746
  },
542
747
  "button": {
@@ -548,11 +753,11 @@
548
753
  "field": {
549
754
  "dot": {
550
755
  "$type": "color",
551
- "$value": "rgba(242, 242, 242, 0.14)"
756
+ "$value": "rgb(242, 242, 242, 0.14)"
552
757
  },
553
758
  "dot-hot": {
554
759
  "$type": "color",
555
- "$value": "rgba(242, 242, 242, 0.36)"
760
+ "$value": "rgb(242, 242, 242, 0.36)"
556
761
  },
557
762
  "dot-accent": {
558
763
  "$type": "color",