ui-foundations 0.4.1 → 0.6.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 (51) hide show
  1. package/README.md +8 -7
  2. package/dist/core/index.css +1 -0
  3. package/dist/macros/ui.njk +61 -0
  4. package/dist/main.css +528 -89
  5. package/dist/react/accordion.js +36 -0
  6. package/dist/react/avatar.js +34 -0
  7. package/dist/react/button.js +1 -12
  8. package/dist/react/checkbox.js +3 -20
  9. package/dist/react/divider.js +31 -0
  10. package/dist/react/icon.js +1 -12
  11. package/dist/react/index.js +6 -0
  12. package/dist/react/radio.js +3 -20
  13. package/dist/react/switch.js +3 -20
  14. package/dist/react/tabs.js +72 -0
  15. package/dist/react/textarea.js +38 -0
  16. package/dist/react/tooltip.js +25 -0
  17. package/dist/react/warn-dev.js +15 -0
  18. package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +6 -6
  19. package/dist/tokens/css/appearance-modes.tokens.mode-light.css +1 -1
  20. package/dist/tokens/css/components-ui.tokens.css +66 -68
  21. package/dist/tokens/css/core-primitives.tokens.css +72 -1
  22. package/dist/tokens/css/semantics-roles.tokens.css +1 -1
  23. package/dist/tokens/css/themes-brands.tokens.brand-a.css +11 -11
  24. package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
  25. package/dist/tokens/css/themes-brands.tokens.brand-c.css +22 -0
  26. package/dist/tokens/json/components-ui.tokens.json +275 -277
  27. package/dist/tokens/json/core-primitives.tokens.json +302 -0
  28. package/dist/tokens/json/themes-brands.tokens.brand-a.json +10 -10
  29. package/dist/tokens/json/themes-brands.tokens.brand-b.json +10 -10
  30. package/dist/tokens/json/themes-brands.tokens.brand-c.json +81 -0
  31. package/dist/tokens/tokens.yaml +1701 -583
  32. package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +6 -6
  33. package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +1 -1
  34. package/dist/tokens/ts/components-ui.tokens.ts +67 -69
  35. package/dist/tokens/ts/core-primitives.tokens.ts +73 -2
  36. package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
  37. package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +11 -11
  38. package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
  39. package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +32 -0
  40. package/dist/ui/index.css +6 -0
  41. package/dist/ui/patterns/accordion.css +81 -0
  42. package/dist/ui/patterns/avatar.css +57 -0
  43. package/dist/ui/patterns/divider.css +25 -0
  44. package/dist/ui/patterns/tabs.css +71 -0
  45. package/dist/ui/patterns/textarea.css +50 -0
  46. package/dist/ui/patterns/tooltip.css +64 -0
  47. package/docs/agentic/README.md +1 -0
  48. package/docs/agentic/skills/component-accessibility-audit.md +132 -0
  49. package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +1 -1
  50. package/package.json +2 -1
  51. package/dist/tokens/missing-tokens.json +0 -43
package/dist/tokens/json/components-ui.tokens.json CHANGED
@@ -272,60 +272,59 @@
272
272
  "$type": "color",
273
273
  "$value": "{Color.Text.Default}"
274
274
  },
275
- "Border": {
276
- "Color Default": {
277
- "$type": "color",
278
- "$value": "{Color.Border.Default}"
279
- },
280
- "Color Hover": {
281
- "$type": "color",
282
- "$value": "{Color.Border.Brand}"
283
- },
284
- "Color Active": {
285
- "$type": "color",
286
- "$value": "{Color.Border.Brand}"
287
- },
288
- "Color Focus": {
289
- "$type": "color",
290
- "$value": "{Color.Border.Brand}"
291
- },
292
- "Color Invalid": {
293
- "$type": "color",
294
- "$value": "{Color.Border.Danger}"
295
- },
296
- "Color Valid": {
297
- "$type": "color",
298
- "$value": "{Color.Border.Strong}"
299
- }
300
- },
301
- "Container": {
302
- "Background Default": {
303
- "$type": "color",
304
- "$value": "{Color.Fill.Surface}"
305
- },
306
- "Background Hover": {
307
- "$type": "color",
308
- "$value": "{Color.Fill.Surface}"
309
- },
310
- "Background Focus": {
311
- "$type": "color",
312
- "$value": "{Color.Fill.Surface}"
313
- },
314
- "Background Active": {
315
- "$type": "color",
316
- "$value": "{Color.Fill.Surface}"
317
- }
275
+ "Text Color Disabled": {
276
+ "$type": "color",
277
+ "$value": "{Color.Text.Disabled}"
318
278
  },
319
279
  "Text Color Placeholder": {
320
280
  "$type": "color",
321
281
  "$value": "{Color.Text.Subtle}"
282
+ }
283
+ },
284
+ "Border": {
285
+ "Border Color Default": {
286
+ "$type": "color",
287
+ "$value": "{Color.Border.Default}"
322
288
  },
323
- "Height Min": {
324
- "$type": "dimension",
325
- "$value": {
326
- "value": 40,
327
- "unit": "px"
328
- }
289
+ "Border Color Hover": {
290
+ "$type": "color",
291
+ "$value": "{Color.Border.Brand}"
292
+ },
293
+ "Border Color Active": {
294
+ "$type": "color",
295
+ "$value": "{Color.Border.Brand}"
296
+ },
297
+ "Border Color Focus": {
298
+ "$type": "color",
299
+ "$value": "{Color.Border.Brand}"
300
+ },
301
+ "Border Size Default": {
302
+ "$type": "number",
303
+ "$value": "{Size.Border.100}"
304
+ },
305
+ "Border Size Hover": {
306
+ "$type": "number",
307
+ "$value": "{Size.Border.100}"
308
+ },
309
+ "Border Size Active": {
310
+ "$type": "number",
311
+ "$value": "{Size.Border.200}"
312
+ },
313
+ "Border Radius": {
314
+ "$type": "number",
315
+ "$value": "{Brand.Corner.Input}"
316
+ },
317
+ "Border Color Disabled": {
318
+ "$type": "color",
319
+ "$value": "{Color.Border.Disabled}"
320
+ },
321
+ "Border Color Invalid": {
322
+ "$type": "color",
323
+ "$value": "{Color.Border.Danger}"
324
+ },
325
+ "Border Color Valid": {
326
+ "$type": "color",
327
+ "$value": "{Color.Border.Strong}"
329
328
  }
330
329
  },
331
330
  "Font Family": {
@@ -344,21 +343,27 @@
344
343
  "$type": "number",
345
344
  "$value": "{Typography.Body.Line Height}"
346
345
  },
347
- "Border Size Default": {
348
- "$type": "number",
349
- "$value": "{Size.Border.100}"
350
- },
351
- "Border Size Hover": {
352
- "$type": "number",
353
- "$value": "{Size.Border.100}"
354
- },
355
- "Border Size Active": {
356
- "$type": "number",
357
- "$value": "{Size.Border.200}"
358
- },
359
- "Border Radius": {
360
- "$type": "number",
361
- "$value": "{Brand.Corner.Input}"
346
+ "Container": {
347
+ "Background Default": {
348
+ "$type": "color",
349
+ "$value": "{Color.Fill.Surface}"
350
+ },
351
+ "Background Hover": {
352
+ "$type": "color",
353
+ "$value": "{Color.Fill.Surface}"
354
+ },
355
+ "Background Focus": {
356
+ "$type": "color",
357
+ "$value": "{Color.Fill.Surface}"
358
+ },
359
+ "Background Active": {
360
+ "$type": "color",
361
+ "$value": "{Color.Fill.Surface}"
362
+ },
363
+ "Background Disabled": {
364
+ "$type": "color",
365
+ "$value": "{Color.Fill.Disabled}"
366
+ }
362
367
  },
363
368
  "Padding Inline": {
364
369
  "$type": "number",
@@ -376,18 +381,6 @@
376
381
  "$type": "number",
377
382
  "$value": "{Size.Spacing.200}"
378
383
  },
379
- "Text Color Disabled": {
380
- "$type": "color",
381
- "$value": "{Color.Text.Disabled}"
382
- },
383
- "Border Color Disabled": {
384
- "$type": "color",
385
- "$value": "{Color.Border.Disabled}"
386
- },
387
- "Container Background Disabled": {
388
- "$type": "color",
389
- "$value": "{Color.Fill.Disabled}"
390
- },
391
384
  "Overlay Hover": {
392
385
  "$type": "color",
393
386
  "$value": "{Color.Transparent}"
@@ -403,160 +396,11 @@
403
396
  "unit": "px"
404
397
  }
405
398
  },
406
- "Checkbox": {
407
- "Text Color Default": {
408
- "$type": "color",
409
- "$value": "{Color.Text.Default}"
410
- },
411
- "Text Color Hover": {
412
- "$type": "color",
413
- "$value": "{Color.Text.Strong}"
414
- },
415
- "Text Color Active": {
416
- "$type": "color",
417
- "$value": "{Color.Text.Inverse}"
418
- },
419
- "Border": {
420
- "Color Default": {
421
- "$type": "color",
422
- "$value": "{Color.Border.Subtle}"
423
- },
424
- "Color Hover": {
425
- "$type": "color",
426
- "$value": "{Color.Border.Strong}"
427
- },
428
- "Color Active": {
429
- "$type": "color",
430
- "$value": "{Color.Border.Brand}"
431
- },
432
- "Color Focus": {
433
- "$type": "color",
434
- "$value": "{Color.Border.Brand}"
435
- },
436
- "Color Invalid": {
437
- "$type": "color",
438
- "$value": "{Color.Border.Danger}"
439
- },
440
- "Color Valid": {
441
- "$type": "color",
442
- "$value": "{Color.Border.Strong}"
443
- },
444
- "Color Disabled": {
445
- "$type": "color",
446
- "$value": "{Color.Border.Disabled}"
447
- }
448
- },
449
- "Container": {
450
- "Background Default": {
451
- "$type": "color",
452
- "$value": "{Color.Fill.Surface}"
453
- },
454
- "Background Hover": {
455
- "$type": "color",
456
- "$value": "{Color.Fill.Surface}"
457
- },
458
- "Background Focus": {
459
- "$type": "color",
460
- "$value": "{Color.Fill.Surface}"
461
- },
462
- "Background Active": {
463
- "$type": "color",
464
- "$value": "{Color.Fill.Brand}"
465
- },
466
- "Background Disabled": {
467
- "$type": "color",
468
- "$value": "{Color.Fill.Disabled}"
469
- }
470
- },
471
- "Text Color Disabled": {
472
- "$type": "color",
473
- "$value": "{Color.Text.Disabled}"
474
- },
475
- "Border Size Hover": {
476
- "$type": "number",
477
- "$value": "{Size.Border.200}"
478
- },
479
- "Border Size Disabled": {
480
- "$type": "number",
481
- "$value": "{Size.Border.000}"
482
- },
483
- "Border Size Default": {
484
- "$type": "number",
485
- "$value": "{Size.Border.100}"
486
- }
487
- },
488
- "Radio": {
489
- "Text Color Default": {
490
- "$type": "color",
491
- "$value": "{Color.Text.Default}"
492
- },
493
- "Text Color Hover": {
494
- "$type": "color",
495
- "$value": "{Color.Text.Strong}"
496
- },
497
- "Text Color Active": {
498
- "$type": "color",
499
- "$value": "{Color.Text.Inverse}"
500
- },
501
- "Text Color Disabled": {
502
- "$type": "color",
503
- "$value": "{Color.Text.Disabled}"
504
- },
505
- "Border": {
506
- "Color Default": {
507
- "$type": "color",
508
- "$value": "{Color.Border.Subtle}"
509
- },
510
- "Color Hover": {
511
- "$type": "color",
512
- "$value": "{Color.Border.Strong}"
513
- },
514
- "Color Active": {
515
- "$type": "color",
516
- "$value": "{Color.Border.Brand}"
517
- },
518
- "Color Focus": {
519
- "$type": "color",
520
- "$value": "{Color.Border.Brand}"
521
- },
522
- "Color Disabled": {
523
- "$type": "color",
524
- "$value": "{Color.Border.Disabled}"
525
- }
526
- },
527
- "Container": {
528
- "Background Default": {
529
- "$type": "color",
530
- "$value": "{Color.Fill.Surface}"
531
- },
532
- "Background Hover": {
533
- "$type": "color",
534
- "$value": "{Color.Fill.Surface}"
535
- },
536
- "Background Focus": {
537
- "$type": "color",
538
- "$value": "{Color.Fill.Surface}"
539
- },
540
- "Background Active": {
541
- "$type": "color",
542
- "$value": "{Color.Fill.Brand}"
543
- },
544
- "Background Disabled": {
545
- "$type": "color",
546
- "$value": "{Color.Fill.Disabled}"
547
- }
548
- },
549
- "Border Size Default": {
550
- "$type": "number",
551
- "$value": "{Size.Border.100}"
552
- },
553
- "Border Size Hover": {
554
- "$type": "number",
555
- "$value": "{Size.Border.200}"
556
- },
557
- "Border Size Disabled": {
558
- "$type": "number",
559
- "$value": "{Size.Border.000}"
399
+ "Height Min": {
400
+ "$type": "dimension",
401
+ "$value": {
402
+ "value": 40,
403
+ "unit": "px"
560
404
  }
561
405
  }
562
406
  },
@@ -614,102 +458,256 @@
614
458
  "$value": "{Size.Border.100}"
615
459
  }
616
460
  },
461
+ "Checkbox": {
462
+ "Text Color Default": {
463
+ "$type": "color",
464
+ "$value": "{Color.Text.Default}"
465
+ },
466
+ "Text Color Hover": {
467
+ "$type": "color",
468
+ "$value": "{Color.Text.Strong}"
469
+ },
470
+ "Text Color Active": {
471
+ "$type": "color",
472
+ "$value": "{Color.Text.Inverse}"
473
+ },
474
+ "Border": {
475
+ "Color Default": {
476
+ "$type": "color",
477
+ "$value": "{Color.Border.Subtle}"
478
+ },
479
+ "Color Hover": {
480
+ "$type": "color",
481
+ "$value": "{Color.Border.Strong}"
482
+ },
483
+ "Color Active": {
484
+ "$type": "color",
485
+ "$value": "{Color.Border.Brand}"
486
+ },
487
+ "Color Focus": {
488
+ "$type": "color",
489
+ "$value": "{Color.Border.Brand}"
490
+ },
491
+ "Color Invalid": {
492
+ "$type": "color",
493
+ "$value": "{Color.Border.Danger}"
494
+ },
495
+ "Color Valid": {
496
+ "$type": "color",
497
+ "$value": "{Color.Border.Strong}"
498
+ },
499
+ "Color Disabled": {
500
+ "$type": "color",
501
+ "$value": "{Color.Border.Disabled}"
502
+ },
503
+ "Size Hover": {
504
+ "$type": "number",
505
+ "$value": "{Size.Border.200}"
506
+ },
507
+ "Size Disabled": {
508
+ "$type": "number",
509
+ "$value": "{Size.Border.000}"
510
+ },
511
+ "Size Default": {
512
+ "$type": "number",
513
+ "$value": "{Size.Border.100}"
514
+ }
515
+ },
516
+ "Container": {
517
+ "Background Default": {
518
+ "$type": "color",
519
+ "$value": "{Color.Fill.Surface}"
520
+ },
521
+ "Background Hover": {
522
+ "$type": "color",
523
+ "$value": "{Color.Fill.Surface}"
524
+ },
525
+ "Background Focus": {
526
+ "$type": "color",
527
+ "$value": "{Color.Fill.Surface}"
528
+ },
529
+ "Background Active": {
530
+ "$type": "color",
531
+ "$value": "{Color.Fill.Brand}"
532
+ },
533
+ "Background Disabled": {
534
+ "$type": "color",
535
+ "$value": "{Color.Fill.Disabled}"
536
+ }
537
+ },
538
+ "Text Color Disabled": {
539
+ "$type": "color",
540
+ "$value": "{Color.Text.Disabled}"
541
+ }
542
+ },
543
+ "Radio": {
544
+ "Text Color Default": {
545
+ "$type": "color",
546
+ "$value": "{Color.Text.Default}"
547
+ },
548
+ "Text Color Disabled": {
549
+ "$type": "color",
550
+ "$value": "{Color.Text.Disabled}"
551
+ },
552
+ "Border": {
553
+ "Color Default": {
554
+ "$type": "color",
555
+ "$value": "{Color.Border.Subtle}"
556
+ },
557
+ "Color Hover": {
558
+ "$type": "color",
559
+ "$value": "{Color.Border.Strong}"
560
+ },
561
+ "Color Active": {
562
+ "$type": "color",
563
+ "$value": "{Color.Border.Brand}"
564
+ },
565
+ "Color Disabled": {
566
+ "$type": "color",
567
+ "$value": "{Color.Border.Disabled}"
568
+ }
569
+ },
570
+ "Container": {
571
+ "Background Default": {
572
+ "$type": "color",
573
+ "$value": "{Color.Fill.Surface}"
574
+ },
575
+ "Background Disabled": {
576
+ "$type": "color",
577
+ "$value": "{Color.Fill.Disabled}"
578
+ }
579
+ },
580
+ "Border Size Default": {
581
+ "$type": "number",
582
+ "$value": "{Size.Border.100}"
583
+ },
584
+ "Border Size Hover": {
585
+ "$type": "number",
586
+ "$value": "{Size.Border.200}"
587
+ },
588
+ "Border Size Disabled": {
589
+ "$type": "number",
590
+ "$value": "{Size.Border.000}"
591
+ }
592
+ },
617
593
  "Badge": {
618
594
  "Default": {
595
+ "Text Color": {
596
+ "$type": "color",
597
+ "$value": "{Color.Text.Default}"
598
+ },
599
+ "Border Color": {
600
+ "$type": "color",
601
+ "$value": "{Color.Transparent}"
602
+ },
619
603
  "Container": {
620
604
  "Background": {
621
605
  "$type": "color",
622
606
  "$value": "{Color.Fill.Subtle}"
623
607
  }
624
- },
625
- "Text Color": {
626
- "$type": "color",
627
- "$value": "{Color.Text.Default}"
628
608
  }
629
609
  },
630
610
  "Brand": {
611
+ "Text Color": {
612
+ "$type": "color",
613
+ "$value": "{Color.Text.Inverse}"
614
+ },
615
+ "Border Color": {
616
+ "$type": "color",
617
+ "$value": "{Color.Transparent}"
618
+ },
631
619
  "Container": {
632
620
  "Background": {
633
621
  "$type": "color",
634
622
  "$value": "{Color.Fill.Brand}"
635
623
  }
636
- },
637
- "Text Color": {
638
- "$type": "color",
639
- "$value": "{Color.Text.Inverse}"
640
624
  }
641
625
  },
642
626
  "Success": {
643
- "Container": {
644
- "Background": {
645
- "$type": "color",
646
- "$value": "{Color.Fill.Success}"
647
- }
648
- },
649
627
  "Text Color": {
650
628
  "$type": "color",
651
629
  "$value": "{Color.Text.Inverse}"
652
- }
653
- },
654
- "Danger": {
630
+ },
631
+ "Border Color": {
632
+ "$type": "color",
633
+ "$value": "{Color.Transparent}"
634
+ },
655
635
  "Container": {
656
636
  "Background": {
657
637
  "$type": "color",
658
- "$value": "{Color.Fill.Danger}"
638
+ "$value": "{Color.Fill.Success}"
659
639
  }
660
- },
661
- "Text Color": {
662
- "$type": "color",
663
- "$value": "{Color.Text.Inverse}"
664
640
  }
665
641
  },
666
- "Border Radius": {
667
- "$type": "number",
668
- "$value": "{Size.Radius.Full}"
669
- },
670
642
  "Font Family": {
671
643
  "$type": "fontFamily",
672
- "$value": "{Typography.Label.Font Family}"
644
+ "$value": "{Brand.Font.Lead}"
673
645
  },
674
646
  "Font Weight": {
675
647
  "$type": "fontWeight",
676
- "$value": "{Font.Weight.700}"
677
- },
678
- "Font Size Sm": {
679
- "$type": "number",
680
- "$value": "{Font.Size.xs}"
648
+ "$value": "{Typography.Label.Font Weight}"
681
649
  },
682
- "Font Size Md": {
650
+ "Font Size": {
683
651
  "$type": "number",
684
- "$value": "{Font.Size.sm}"
652
+ "$value": "{Typography.Label.Font Size}"
685
653
  },
686
- "Line Height Sm": {
654
+ "Line Height": {
687
655
  "$type": "number",
688
- "$value": "{Line Height.xs}"
656
+ "$value": "{Typography.Label.Line Height}"
689
657
  },
690
- "Line Height Md": {
658
+ "Border Size Default": {
691
659
  "$type": "number",
692
- "$value": "{Line Height.sm}"
660
+ "$value": "{Size.Border.100}"
693
661
  },
694
- "Padding Inline Sm": {
662
+ "Border Radius": {
695
663
  "$type": "number",
696
- "$value": "{Size.Spacing.200}"
664
+ "$value": "{Brand.Corner.Input}"
697
665
  },
698
- "Padding Inline Md": {
666
+ "Padding Inline": {
699
667
  "$type": "number",
700
- "$value": "{Size.Spacing.300}"
668
+ "$value": "{Size.Spacing.400}"
701
669
  },
702
- "Padding Block Sm": {
670
+ "Padding Inline Icon Only": {
703
671
  "$type": "number",
704
- "$value": "{Size.Spacing.000}"
672
+ "$value": "{Size.Spacing.200}"
705
673
  },
706
- "Padding Block Md": {
674
+ "Padding Block": {
707
675
  "$type": "number",
708
- "$value": "{Size.Spacing.100}"
676
+ "$value": "{Size.Spacing.200}"
709
677
  },
710
678
  "Gap": {
711
679
  "$type": "number",
712
- "$value": "{Size.Spacing.100}"
680
+ "$value": "{Size.Spacing.200}"
681
+ },
682
+ "Height Min": {
683
+ "$type": "dimension",
684
+ "$value": {
685
+ "value": 40,
686
+ "unit": "px"
687
+ }
688
+ },
689
+ "Width Min": {
690
+ "$type": "dimension",
691
+ "$value": {
692
+ "value": 40,
693
+ "unit": "px"
694
+ }
695
+ },
696
+ "Danger": {
697
+ "Container": {
698
+ "Background": {
699
+ "$type": "color",
700
+ "$value": "{Color.Fill.Danger}"
701
+ },
702
+ "Border Color": {
703
+ "$type": "color",
704
+ "$value": "{Color.Transparent}"
705
+ }
706
+ },
707
+ "Text Color": {
708
+ "$type": "color",
709
+ "$value": "{Color.Text.Inverse}"
710
+ }
713
711
  }
714
712
  }
715
713
  }