@revikornmann/muka-ui 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 (113) hide show
  1. package/cli/commands/brand.js +7 -0
  2. package/cli/commands/init.js +7 -1
  3. package/cli/templates/CLAUDE.md +18 -4
  4. package/cli/templates/muka-ui-guidelines.md +20 -0
  5. package/dist/cjs/components/DataPieChart/DataPieChart.js +1 -1
  6. package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
  7. package/dist/cjs/components/DataTable/DataTable.css +17 -0
  8. package/dist/cjs/components/DataTable/DataTable.js +15 -2
  9. package/dist/cjs/components/DataTable/DataTable.js.map +1 -1
  10. package/dist/cjs/components/ListItem/ListItem.css +10 -4
  11. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
  12. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +66 -0
  13. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
  14. package/dist/cjs/components/ProgressAccordeon/index.js +11 -0
  15. package/dist/cjs/components/ProgressAccordeon/index.js.map +1 -0
  16. package/dist/cjs/components/{FormProgressBar/FormProgressBar.css → ProgressTracker/ProgressTracker.css} +28 -22
  17. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +20 -20
  18. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  19. package/dist/cjs/components/ProgressTracker/index.js +8 -0
  20. package/dist/cjs/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  21. package/dist/cjs/components/index.js +7 -5
  22. package/dist/cjs/components/index.js.map +1 -1
  23. package/dist/esm/components/DataPieChart/DataPieChart.js +1 -1
  24. package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
  25. package/dist/esm/components/DataTable/DataTable.css +17 -0
  26. package/dist/esm/components/DataTable/DataTable.js +15 -2
  27. package/dist/esm/components/DataTable/DataTable.js.map +1 -1
  28. package/dist/esm/components/ListItem/ListItem.css +10 -4
  29. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
  30. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +62 -0
  31. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
  32. package/dist/esm/components/ProgressAccordeon/index.js +3 -0
  33. package/dist/esm/components/ProgressAccordeon/index.js.map +1 -0
  34. package/dist/{styles/components/FormProgressBar.css → esm/components/ProgressTracker/ProgressTracker.css} +28 -22
  35. package/dist/esm/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +18 -18
  36. package/dist/esm/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  37. package/dist/esm/components/ProgressTracker/index.js +3 -0
  38. package/dist/esm/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  39. package/dist/esm/components/index.js +2 -1
  40. package/dist/esm/components/index.js.map +1 -1
  41. package/dist/styles/components/DataTable.css +17 -0
  42. package/dist/styles/components/ListItem.css +10 -4
  43. package/dist/styles/components/ProgressAccordeon.css +207 -0
  44. package/dist/{esm/components/FormProgressBar/FormProgressBar.css → styles/components/ProgressTracker.css} +28 -22
  45. package/dist/styles/fonts/funnel-display-latin-wght-normal.woff2 +0 -0
  46. package/dist/styles/fonts/funnel-display.LICENSE.txt +93 -0
  47. package/dist/styles/fonts/funnel-sans-latin-wght-normal.woff2 +0 -0
  48. package/dist/styles/fonts/funnel-sans.LICENSE.txt +93 -0
  49. package/dist/styles/fonts/ibm-plex-sans-latin-wght-normal.woff2 +0 -0
  50. package/dist/styles/fonts/ibm-plex-sans.LICENSE.txt +93 -0
  51. package/dist/styles/fonts/lora-latin-wght-normal.woff2 +0 -0
  52. package/dist/styles/fonts/lora.LICENSE.txt +93 -0
  53. package/dist/styles/fonts/quicksand-latin-wght-normal.woff2 +0 -0
  54. package/dist/styles/fonts/quicksand.LICENSE.txt +93 -0
  55. package/dist/styles/fonts/red-hat-display-latin-wght-normal.woff2 +0 -0
  56. package/dist/styles/fonts/red-hat-display.LICENSE.txt +93 -0
  57. package/dist/styles/fonts/red-hat-text-latin-wght-normal.woff2 +0 -0
  58. package/dist/styles/fonts/red-hat-text.LICENSE.txt +93 -0
  59. package/dist/styles/fonts/yesteryear-latin-400-normal.woff2 +0 -0
  60. package/dist/styles/fonts/yesteryear.LICENSE.txt +93 -0
  61. package/dist/styles/fonts-all.css +75 -0
  62. package/dist/styles/fonts-bouwplan.css +30 -0
  63. package/dist/styles/fonts-fscl.css +21 -0
  64. package/dist/styles/fonts-grip.css +21 -0
  65. package/dist/styles/fonts-muka.css +30 -0
  66. package/dist/styles/fonts-wireframe.css +5 -0
  67. package/dist/styles/index.css +947 -568
  68. package/dist/styles/muka-dark.css +947 -568
  69. package/dist/styles/muka-light.css +947 -568
  70. package/dist/styles/tokens-bouwplan-dark.css +174 -66
  71. package/dist/styles/tokens-bouwplan-light.css +174 -66
  72. package/dist/styles/tokens-fscl-dark.css +113 -5
  73. package/dist/styles/tokens-fscl-light.css +113 -5
  74. package/dist/styles/tokens-grip-dark.css +113 -5
  75. package/dist/styles/tokens-grip-light.css +113 -5
  76. package/dist/styles/tokens-muka-dark.css +113 -5
  77. package/dist/styles/tokens-muka-light.css +113 -5
  78. package/dist/styles/tokens-wireframe-dark.css +113 -5
  79. package/dist/styles/tokens-wireframe-light.css +113 -5
  80. package/dist/styles/wireframe-dark.css +915 -568
  81. package/dist/styles/wireframe-light.css +915 -568
  82. package/dist/types/components/DataPieChart/DataPieChart.d.ts +1 -1
  83. package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
  84. package/dist/types/components/DataTable/DataTable.d.ts.map +1 -1
  85. package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts +91 -0
  86. package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -0
  87. package/dist/types/components/ProgressAccordeon/index.d.ts +3 -0
  88. package/dist/types/components/ProgressAccordeon/index.d.ts.map +1 -0
  89. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts → ProgressTracker/ProgressTracker.d.ts} +9 -9
  90. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts.map → ProgressTracker/ProgressTracker.d.ts.map} +1 -1
  91. package/dist/types/components/ProgressTracker/index.d.ts +3 -0
  92. package/dist/types/components/{FormProgressBar → ProgressTracker}/index.d.ts.map +1 -1
  93. package/dist/types/components/index.d.ts +2 -1
  94. package/dist/types/components/index.d.ts.map +1 -1
  95. package/docs/consumers/setup-instructions.md +22 -3
  96. package/package.json +12 -2
  97. package/scripts/build-fonts.js +248 -0
  98. package/tokens/t1-primitives/color.json +400 -0
  99. package/tokens/t2-alias/brand/bouwplan/dark.json +15 -1
  100. package/tokens/t2-alias/brand/bouwplan/fonts.json +5 -5
  101. package/tokens/t2-alias/brand/bouwplan/light.json +15 -1
  102. package/tokens/t2-alias/brand/fscl/dark.json +15 -1
  103. package/tokens/t2-alias/brand/fscl/light.json +15 -1
  104. package/tokens/t2-alias/brand/grip/dark.json +51 -1
  105. package/tokens/t2-alias/brand/grip/light.json +51 -1
  106. package/tokens/t2-alias/brand/muka/dark.json +51 -1
  107. package/tokens/t2-alias/brand/muka/light.json +51 -1
  108. package/tokens/t2-alias/brand/wireframe/dark.json +51 -1
  109. package/tokens/t2-alias/brand/wireframe/light.json +51 -1
  110. package/tokens/t3-semantics/ui.json +13 -13
  111. package/dist/cjs/components/FormProgressBar/index.js +0 -8
  112. package/dist/esm/components/FormProgressBar/index.js +0 -3
  113. package/dist/types/components/FormProgressBar/index.d.ts +0 -3
package/dist/styles/tokens-muka-light.css CHANGED
@@ -540,6 +540,102 @@
540
540
  --color-white-alpha-10: rgba(255, 255, 255, 0.478);
541
541
  --color-white-alpha-11: rgba(255, 255, 255, 0.565);
542
542
  --color-white-alpha-12: rgba(255, 255, 255, 0.910);
543
+ --color-mauveA-1: rgba(85, 0, 85, 0.012);
544
+ --color-mauveA-2: rgba(43, 0, 85, 0.024);
545
+ --color-mauveA-3: rgba(48, 0, 64, 0.063);
546
+ --color-mauveA-4: rgba(32, 0, 54, 0.094);
547
+ --color-mauveA-5: rgba(32, 0, 56, 0.125);
548
+ --color-mauveA-6: rgba(20, 0, 53, 0.153);
549
+ --color-mauveA-7: rgba(16, 0, 51, 0.196);
550
+ --color-mauveA-8: rgba(8, 0, 49, 0.271);
551
+ --color-mauveA-9: rgba(5, 0, 29, 0.451);
552
+ --color-mauveA-10: rgba(5, 0, 25, 0.49);
553
+ --color-mauveA-11: rgba(4, 0, 17, 0.612);
554
+ --color-mauveA-12: rgba(2, 0, 8, 0.878);
555
+ --color-grayA-1: rgba(0, 0, 0, 0.012);
556
+ --color-grayA-2: rgba(0, 0, 0, 0.024);
557
+ --color-grayA-3: rgba(0, 0, 0, 0.059);
558
+ --color-grayA-4: rgba(0, 0, 0, 0.09);
559
+ --color-grayA-5: rgba(0, 0, 0, 0.122);
560
+ --color-grayA-6: rgba(0, 0, 0, 0.149);
561
+ --color-grayA-7: rgba(0, 0, 0, 0.192);
562
+ --color-grayA-8: rgba(0, 0, 0, 0.267);
563
+ --color-grayA-9: rgba(0, 0, 0, 0.447);
564
+ --color-grayA-10: rgba(0, 0, 0, 0.486);
565
+ --color-grayA-11: rgba(0, 0, 0, 0.608);
566
+ --color-grayA-12: rgba(0, 0, 0, 0.875);
567
+ --color-sandA-1: rgba(85, 85, 0, 0.012);
568
+ --color-sandA-2: rgba(37, 37, 0, 0.027);
569
+ --color-sandA-3: rgba(32, 16, 0, 0.063);
570
+ --color-sandA-4: rgba(31, 21, 0, 0.098);
571
+ --color-sandA-5: rgba(31, 24, 0, 0.129);
572
+ --color-sandA-6: rgba(25, 19, 0, 0.161);
573
+ --color-sandA-7: rgba(25, 20, 0, 0.208);
574
+ --color-sandA-8: rgba(25, 21, 1, 0.29);
575
+ --color-sandA-9: rgba(15, 15, 0, 0.475);
576
+ --color-sandA-10: rgba(12, 12, 0, 0.514);
577
+ --color-sandA-11: rgba(8, 8, 0, 0.631);
578
+ --color-sandA-12: rgba(6, 5, 0, 0.89);
579
+ --color-sageA-1: rgba(0, 128, 64, 0.016);
580
+ --color-sageA-2: rgba(0, 64, 32, 0.031);
581
+ --color-sageA-3: rgba(0, 45, 30, 0.067);
582
+ --color-sageA-4: rgba(0, 31, 21, 0.098);
583
+ --color-sageA-5: rgba(0, 24, 8, 0.125);
584
+ --color-sageA-6: rgba(0, 20, 13, 0.157);
585
+ --color-sageA-7: rgba(0, 20, 10, 0.204);
586
+ --color-sageA-8: rgba(0, 15, 8, 0.278);
587
+ --color-sageA-9: rgba(0, 17, 11, 0.475);
588
+ --color-sageA-10: rgba(0, 16, 10, 0.514);
589
+ --color-sageA-11: rgba(0, 10, 7, 0.627);
590
+ --color-sageA-12: rgba(0, 8, 5, 0.898);
591
+ --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
592
+ --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
593
+ --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
594
+ --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
595
+ --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
596
+ --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
597
+ --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
598
+ --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
599
+ --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
600
+ --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
601
+ --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
602
+ --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
603
+ --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
604
+ --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
605
+ --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
606
+ --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
607
+ --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
608
+ --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
609
+ --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
610
+ --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
611
+ --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
612
+ --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
613
+ --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
614
+ --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
615
+ --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
616
+ --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
617
+ --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
618
+ --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
619
+ --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
620
+ --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
621
+ --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
622
+ --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
623
+ --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
624
+ --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
625
+ --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
626
+ --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
627
+ --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
628
+ --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
629
+ --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
630
+ --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
631
+ --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
632
+ --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
633
+ --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
634
+ --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
635
+ --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
636
+ --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
637
+ --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
638
+ --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
543
639
  --color-grayDark-1: #111111;
544
640
  --color-grayDark-2: #191919;
545
641
  --color-grayDark-3: #222222;
@@ -917,8 +1013,8 @@
917
1013
  --color-surface-level1: #eae7ec;
918
1014
  --color-surface-level2: #f2eff3;
919
1015
  --color-surface-level3: #fdfcfd;
920
- --color-surface-hover: #faf9fb;
921
- --color-surface-pressed: #fdfcfd;
1016
+ --color-surface-hover: rgba(43, 0, 85, 0.024);
1017
+ --color-surface-pressed: rgba(48, 0, 64, 0.063);
922
1018
  --color-surface-backdrop: rgba(0, 0, 0, 0.565);
923
1019
  --color-surface-inverse: #211f26;
924
1020
  --color-surface-white: #ffffff;
@@ -981,6 +1077,18 @@
981
1077
  --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
982
1078
  --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
983
1079
  --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
1080
+ --alias-color-neutral-alphaHued-1: rgba(85, 0, 85, 0.012);
1081
+ --alias-color-neutral-alphaHued-2: rgba(43, 0, 85, 0.024);
1082
+ --alias-color-neutral-alphaHued-3: rgba(48, 0, 64, 0.063);
1083
+ --alias-color-neutral-alphaHued-4: rgba(32, 0, 54, 0.094);
1084
+ --alias-color-neutral-alphaHued-5: rgba(32, 0, 56, 0.125);
1085
+ --alias-color-neutral-alphaHued-6: rgba(20, 0, 53, 0.153);
1086
+ --alias-color-neutral-alphaHued-7: rgba(16, 0, 51, 0.196);
1087
+ --alias-color-neutral-alphaHued-8: rgba(8, 0, 49, 0.271);
1088
+ --alias-color-neutral-alphaHued-9: rgba(5, 0, 29, 0.451);
1089
+ --alias-color-neutral-alphaHued-10: rgba(5, 0, 25, 0.49);
1090
+ --alias-color-neutral-alphaHued-11: rgba(4, 0, 17, 0.612);
1091
+ --alias-color-neutral-alphaHued-12: rgba(2, 0, 8, 0.878);
984
1092
  --alias-color-brand-primary-regular: #3a5ccc;
985
1093
  --alias-color-brand-primary-contrast: #1f2d5c;
986
1094
  --alias-color-brand-primary-muted: #edf2fe;
@@ -1548,7 +1656,7 @@
1548
1656
  --menu-item-color-default-background: transparent;
1549
1657
  --menu-item-color-default-foreground: #211f26;
1550
1658
  --menu-item-color-default-icon: #8e8c99;
1551
- --menu-item-color-hover-background: #faf9fb;
1659
+ --menu-item-color-hover-background: rgba(43, 0, 85, 0.024);
1552
1660
  --menu-item-color-hover-foreground: #211f26;
1553
1661
  --menu-item-color-hover-icon: #211f26;
1554
1662
  --menu-item-color-focus-background: #8da4ef;
@@ -1778,8 +1886,8 @@
1778
1886
  --datatable-row-background: #fdfcfd;
1779
1887
  --datatable-row-foreground: #211f26;
1780
1888
  --datatable-row-border: #eae7ec;
1781
- --datatable-row-hover-background: #faf9fb;
1782
- --datatable-row-pressed-background: #fdfcfd;
1889
+ --datatable-row-hover-background: rgba(43, 0, 85, 0.024);
1890
+ --datatable-row-pressed-background: rgba(48, 0, 64, 0.063);
1783
1891
  --datatable-row-selected-background: #edf2fe;
1784
1892
  --datatable-cell-padding-x-sm: 0.5rem;
1785
1893
  --datatable-cell-padding-x-md: 0.75rem;
package/dist/styles/tokens-wireframe-dark.css CHANGED
@@ -540,6 +540,102 @@
540
540
  --color-white-alpha-10: rgba(255, 255, 255, 0.478);
541
541
  --color-white-alpha-11: rgba(255, 255, 255, 0.565);
542
542
  --color-white-alpha-12: rgba(255, 255, 255, 0.910);
543
+ --color-mauveA-1: rgba(85, 0, 85, 0.012);
544
+ --color-mauveA-2: rgba(43, 0, 85, 0.024);
545
+ --color-mauveA-3: rgba(48, 0, 64, 0.063);
546
+ --color-mauveA-4: rgba(32, 0, 54, 0.094);
547
+ --color-mauveA-5: rgba(32, 0, 56, 0.125);
548
+ --color-mauveA-6: rgba(20, 0, 53, 0.153);
549
+ --color-mauveA-7: rgba(16, 0, 51, 0.196);
550
+ --color-mauveA-8: rgba(8, 0, 49, 0.271);
551
+ --color-mauveA-9: rgba(5, 0, 29, 0.451);
552
+ --color-mauveA-10: rgba(5, 0, 25, 0.49);
553
+ --color-mauveA-11: rgba(4, 0, 17, 0.612);
554
+ --color-mauveA-12: rgba(2, 0, 8, 0.878);
555
+ --color-grayA-1: rgba(0, 0, 0, 0.012);
556
+ --color-grayA-2: rgba(0, 0, 0, 0.024);
557
+ --color-grayA-3: rgba(0, 0, 0, 0.059);
558
+ --color-grayA-4: rgba(0, 0, 0, 0.09);
559
+ --color-grayA-5: rgba(0, 0, 0, 0.122);
560
+ --color-grayA-6: rgba(0, 0, 0, 0.149);
561
+ --color-grayA-7: rgba(0, 0, 0, 0.192);
562
+ --color-grayA-8: rgba(0, 0, 0, 0.267);
563
+ --color-grayA-9: rgba(0, 0, 0, 0.447);
564
+ --color-grayA-10: rgba(0, 0, 0, 0.486);
565
+ --color-grayA-11: rgba(0, 0, 0, 0.608);
566
+ --color-grayA-12: rgba(0, 0, 0, 0.875);
567
+ --color-sandA-1: rgba(85, 85, 0, 0.012);
568
+ --color-sandA-2: rgba(37, 37, 0, 0.027);
569
+ --color-sandA-3: rgba(32, 16, 0, 0.063);
570
+ --color-sandA-4: rgba(31, 21, 0, 0.098);
571
+ --color-sandA-5: rgba(31, 24, 0, 0.129);
572
+ --color-sandA-6: rgba(25, 19, 0, 0.161);
573
+ --color-sandA-7: rgba(25, 20, 0, 0.208);
574
+ --color-sandA-8: rgba(25, 21, 1, 0.29);
575
+ --color-sandA-9: rgba(15, 15, 0, 0.475);
576
+ --color-sandA-10: rgba(12, 12, 0, 0.514);
577
+ --color-sandA-11: rgba(8, 8, 0, 0.631);
578
+ --color-sandA-12: rgba(6, 5, 0, 0.89);
579
+ --color-sageA-1: rgba(0, 128, 64, 0.016);
580
+ --color-sageA-2: rgba(0, 64, 32, 0.031);
581
+ --color-sageA-3: rgba(0, 45, 30, 0.067);
582
+ --color-sageA-4: rgba(0, 31, 21, 0.098);
583
+ --color-sageA-5: rgba(0, 24, 8, 0.125);
584
+ --color-sageA-6: rgba(0, 20, 13, 0.157);
585
+ --color-sageA-7: rgba(0, 20, 10, 0.204);
586
+ --color-sageA-8: rgba(0, 15, 8, 0.278);
587
+ --color-sageA-9: rgba(0, 17, 11, 0.475);
588
+ --color-sageA-10: rgba(0, 16, 10, 0.514);
589
+ --color-sageA-11: rgba(0, 10, 7, 0.627);
590
+ --color-sageA-12: rgba(0, 8, 5, 0.898);
591
+ --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
592
+ --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
593
+ --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
594
+ --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
595
+ --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
596
+ --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
597
+ --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
598
+ --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
599
+ --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
600
+ --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
601
+ --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
602
+ --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
603
+ --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
604
+ --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
605
+ --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
606
+ --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
607
+ --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
608
+ --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
609
+ --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
610
+ --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
611
+ --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
612
+ --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
613
+ --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
614
+ --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
615
+ --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
616
+ --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
617
+ --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
618
+ --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
619
+ --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
620
+ --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
621
+ --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
622
+ --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
623
+ --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
624
+ --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
625
+ --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
626
+ --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
627
+ --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
628
+ --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
629
+ --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
630
+ --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
631
+ --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
632
+ --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
633
+ --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
634
+ --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
635
+ --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
636
+ --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
637
+ --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
638
+ --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
543
639
  --color-grayDark-1: #111111;
544
640
  --color-grayDark-2: #191919;
545
641
  --color-grayDark-3: #222222;
@@ -917,8 +1013,8 @@
917
1013
  --color-surface-level1: #313131;
918
1014
  --color-surface-level2: #2a2a2a;
919
1015
  --color-surface-level3: #111111;
920
- --color-surface-hover: #222222;
921
- --color-surface-pressed: #111111;
1016
+ --color-surface-hover: rgba(255, 255, 255, 0.035);
1017
+ --color-surface-pressed: rgba(255, 255, 255, 0.071);
922
1018
  --color-surface-backdrop: rgba(0, 0, 0, 0.565);
923
1019
  --color-surface-inverse: #eeeeee;
924
1020
  --color-surface-white: #ffffff;
@@ -981,6 +1077,18 @@
981
1077
  --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
982
1078
  --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
983
1079
  --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
1080
+ --alias-color-neutral-alphaHued-1: rgba(0, 0, 0, 0.0);
1081
+ --alias-color-neutral-alphaHued-2: rgba(255, 255, 255, 0.035);
1082
+ --alias-color-neutral-alphaHued-3: rgba(255, 255, 255, 0.071);
1083
+ --alias-color-neutral-alphaHued-4: rgba(255, 255, 255, 0.106);
1084
+ --alias-color-neutral-alphaHued-5: rgba(255, 255, 255, 0.133);
1085
+ --alias-color-neutral-alphaHued-6: rgba(255, 255, 255, 0.173);
1086
+ --alias-color-neutral-alphaHued-7: rgba(255, 255, 255, 0.231);
1087
+ --alias-color-neutral-alphaHued-8: rgba(255, 255, 255, 0.333);
1088
+ --alias-color-neutral-alphaHued-9: rgba(255, 255, 255, 0.392);
1089
+ --alias-color-neutral-alphaHued-10: rgba(255, 255, 255, 0.447);
1090
+ --alias-color-neutral-alphaHued-11: rgba(255, 255, 255, 0.686);
1091
+ --alias-color-neutral-alphaHued-12: rgba(255, 255, 255, 0.929);
984
1092
  --alias-color-brand-primary-regular: #b4b4b4;
985
1093
  --alias-color-brand-primary-contrast: #eeeeee;
986
1094
  --alias-color-brand-primary-muted: #222222;
@@ -1548,7 +1656,7 @@
1548
1656
  --menu-item-color-default-background: transparent;
1549
1657
  --menu-item-color-default-foreground: #eeeeee;
1550
1658
  --menu-item-color-default-icon: #7b7b7b;
1551
- --menu-item-color-hover-background: #222222;
1659
+ --menu-item-color-hover-background: rgba(255, 255, 255, 0.035);
1552
1660
  --menu-item-color-hover-foreground: #eeeeee;
1553
1661
  --menu-item-color-hover-icon: #eeeeee;
1554
1662
  --menu-item-color-focus-background: #606060;
@@ -1778,8 +1886,8 @@
1778
1886
  --datatable-row-background: #111111;
1779
1887
  --datatable-row-foreground: #eeeeee;
1780
1888
  --datatable-row-border: #313131;
1781
- --datatable-row-hover-background: #222222;
1782
- --datatable-row-pressed-background: #111111;
1889
+ --datatable-row-hover-background: rgba(255, 255, 255, 0.035);
1890
+ --datatable-row-pressed-background: rgba(255, 255, 255, 0.071);
1783
1891
  --datatable-row-selected-background: #0d2847;
1784
1892
  --datatable-cell-padding-x-sm: 0.5rem;
1785
1893
  --datatable-cell-padding-x-md: 0.75rem;
package/dist/styles/tokens-wireframe-light.css CHANGED
@@ -540,6 +540,102 @@
540
540
  --color-white-alpha-10: rgba(255, 255, 255, 0.478);
541
541
  --color-white-alpha-11: rgba(255, 255, 255, 0.565);
542
542
  --color-white-alpha-12: rgba(255, 255, 255, 0.910);
543
+ --color-mauveA-1: rgba(85, 0, 85, 0.012);
544
+ --color-mauveA-2: rgba(43, 0, 85, 0.024);
545
+ --color-mauveA-3: rgba(48, 0, 64, 0.063);
546
+ --color-mauveA-4: rgba(32, 0, 54, 0.094);
547
+ --color-mauveA-5: rgba(32, 0, 56, 0.125);
548
+ --color-mauveA-6: rgba(20, 0, 53, 0.153);
549
+ --color-mauveA-7: rgba(16, 0, 51, 0.196);
550
+ --color-mauveA-8: rgba(8, 0, 49, 0.271);
551
+ --color-mauveA-9: rgba(5, 0, 29, 0.451);
552
+ --color-mauveA-10: rgba(5, 0, 25, 0.49);
553
+ --color-mauveA-11: rgba(4, 0, 17, 0.612);
554
+ --color-mauveA-12: rgba(2, 0, 8, 0.878);
555
+ --color-grayA-1: rgba(0, 0, 0, 0.012);
556
+ --color-grayA-2: rgba(0, 0, 0, 0.024);
557
+ --color-grayA-3: rgba(0, 0, 0, 0.059);
558
+ --color-grayA-4: rgba(0, 0, 0, 0.09);
559
+ --color-grayA-5: rgba(0, 0, 0, 0.122);
560
+ --color-grayA-6: rgba(0, 0, 0, 0.149);
561
+ --color-grayA-7: rgba(0, 0, 0, 0.192);
562
+ --color-grayA-8: rgba(0, 0, 0, 0.267);
563
+ --color-grayA-9: rgba(0, 0, 0, 0.447);
564
+ --color-grayA-10: rgba(0, 0, 0, 0.486);
565
+ --color-grayA-11: rgba(0, 0, 0, 0.608);
566
+ --color-grayA-12: rgba(0, 0, 0, 0.875);
567
+ --color-sandA-1: rgba(85, 85, 0, 0.012);
568
+ --color-sandA-2: rgba(37, 37, 0, 0.027);
569
+ --color-sandA-3: rgba(32, 16, 0, 0.063);
570
+ --color-sandA-4: rgba(31, 21, 0, 0.098);
571
+ --color-sandA-5: rgba(31, 24, 0, 0.129);
572
+ --color-sandA-6: rgba(25, 19, 0, 0.161);
573
+ --color-sandA-7: rgba(25, 20, 0, 0.208);
574
+ --color-sandA-8: rgba(25, 21, 1, 0.29);
575
+ --color-sandA-9: rgba(15, 15, 0, 0.475);
576
+ --color-sandA-10: rgba(12, 12, 0, 0.514);
577
+ --color-sandA-11: rgba(8, 8, 0, 0.631);
578
+ --color-sandA-12: rgba(6, 5, 0, 0.89);
579
+ --color-sageA-1: rgba(0, 128, 64, 0.016);
580
+ --color-sageA-2: rgba(0, 64, 32, 0.031);
581
+ --color-sageA-3: rgba(0, 45, 30, 0.067);
582
+ --color-sageA-4: rgba(0, 31, 21, 0.098);
583
+ --color-sageA-5: rgba(0, 24, 8, 0.125);
584
+ --color-sageA-6: rgba(0, 20, 13, 0.157);
585
+ --color-sageA-7: rgba(0, 20, 10, 0.204);
586
+ --color-sageA-8: rgba(0, 15, 8, 0.278);
587
+ --color-sageA-9: rgba(0, 17, 11, 0.475);
588
+ --color-sageA-10: rgba(0, 16, 10, 0.514);
589
+ --color-sageA-11: rgba(0, 10, 7, 0.627);
590
+ --color-sageA-12: rgba(0, 8, 5, 0.898);
591
+ --color-mauveDarkA-1: rgba(0, 0, 0, 0.0);
592
+ --color-mauveDarkA-2: rgba(245, 244, 246, 0.035);
593
+ --color-mauveDarkA-3: rgba(235, 234, 248, 0.078);
594
+ --color-mauveDarkA-4: rgba(238, 229, 248, 0.114);
595
+ --color-mauveDarkA-5: rgba(239, 230, 254, 0.145);
596
+ --color-mauveDarkA-6: rgba(241, 230, 253, 0.188);
597
+ --color-mauveDarkA-7: rgba(238, 233, 255, 0.251);
598
+ --color-mauveDarkA-8: rgba(238, 231, 255, 0.365);
599
+ --color-mauveDarkA-9: rgba(234, 230, 253, 0.431);
600
+ --color-mauveDarkA-10: rgba(236, 233, 253, 0.486);
601
+ --color-mauveDarkA-11: rgba(245, 241, 255, 0.718);
602
+ --color-mauveDarkA-12: rgba(253, 253, 255, 0.937);
603
+ --color-grayDarkA-1: rgba(0, 0, 0, 0.0);
604
+ --color-grayDarkA-2: rgba(255, 255, 255, 0.035);
605
+ --color-grayDarkA-3: rgba(255, 255, 255, 0.071);
606
+ --color-grayDarkA-4: rgba(255, 255, 255, 0.106);
607
+ --color-grayDarkA-5: rgba(255, 255, 255, 0.133);
608
+ --color-grayDarkA-6: rgba(255, 255, 255, 0.173);
609
+ --color-grayDarkA-7: rgba(255, 255, 255, 0.231);
610
+ --color-grayDarkA-8: rgba(255, 255, 255, 0.333);
611
+ --color-grayDarkA-9: rgba(255, 255, 255, 0.392);
612
+ --color-grayDarkA-10: rgba(255, 255, 255, 0.447);
613
+ --color-grayDarkA-11: rgba(255, 255, 255, 0.686);
614
+ --color-grayDarkA-12: rgba(255, 255, 255, 0.929);
615
+ --color-sandDarkA-1: rgba(0, 0, 0, 0.0);
616
+ --color-sandDarkA-2: rgba(244, 244, 243, 0.035);
617
+ --color-sandDarkA-3: rgba(246, 246, 245, 0.075);
618
+ --color-sandDarkA-4: rgba(254, 254, 243, 0.106);
619
+ --color-sandDarkA-5: rgba(251, 251, 235, 0.137);
620
+ --color-sandDarkA-6: rgba(255, 250, 237, 0.176);
621
+ --color-sandDarkA-7: rgba(255, 251, 237, 0.235);
622
+ --color-sandDarkA-8: rgba(255, 249, 235, 0.341);
623
+ --color-sandDarkA-9: rgba(255, 250, 233, 0.396);
624
+ --color-sandDarkA-10: rgba(255, 253, 238, 0.451);
625
+ --color-sandDarkA-11: rgba(255, 252, 244, 0.69);
626
+ --color-sandDarkA-12: rgba(255, 255, 253, 0.929);
627
+ --color-sageDarkA-1: rgba(0, 0, 0, 0.0);
628
+ --color-sageDarkA-2: rgba(240, 242, 241, 0.031);
629
+ --color-sageDarkA-3: rgba(243, 245, 244, 0.071);
630
+ --color-sageDarkA-4: rgba(242, 254, 253, 0.102);
631
+ --color-sageDarkA-5: rgba(241, 251, 250, 0.133);
632
+ --color-sageDarkA-6: rgba(237, 251, 244, 0.176);
633
+ --color-sageDarkA-7: rgba(237, 252, 247, 0.235);
634
+ --color-sageDarkA-8: rgba(235, 253, 246, 0.341);
635
+ --color-sageDarkA-9: rgba(223, 253, 242, 0.4);
636
+ --color-sageDarkA-10: rgba(229, 253, 246, 0.455);
637
+ --color-sageDarkA-11: rgba(244, 254, 251, 0.69);
638
+ --color-sageDarkA-12: rgba(253, 255, 254, 0.929);
543
639
  --color-grayDark-1: #111111;
544
640
  --color-grayDark-2: #191919;
545
641
  --color-grayDark-3: #222222;
@@ -917,8 +1013,8 @@
917
1013
  --color-surface-level1: #e0e0e0;
918
1014
  --color-surface-level2: #e8e8e8;
919
1015
  --color-surface-level3: #fcfcfc;
920
- --color-surface-hover: #f0f0f0;
921
- --color-surface-pressed: #fcfcfc;
1016
+ --color-surface-hover: rgba(0, 0, 0, 0.024);
1017
+ --color-surface-pressed: rgba(0, 0, 0, 0.059);
922
1018
  --color-surface-backdrop: rgba(0, 0, 0, 0.565);
923
1019
  --color-surface-inverse: #202020;
924
1020
  --color-surface-white: #ffffff;
@@ -981,6 +1077,18 @@
981
1077
  --alias-color-neutral-alpha-7: rgba(0, 0, 0, 0.565);
982
1078
  --alias-color-neutral-alpha-8: rgba(0, 0, 0, 0.910);
983
1079
  --alias-color-neutral-alpha-9: rgba(0, 0, 0, 0.910);
1080
+ --alias-color-neutral-alphaHued-1: rgba(0, 0, 0, 0.012);
1081
+ --alias-color-neutral-alphaHued-2: rgba(0, 0, 0, 0.024);
1082
+ --alias-color-neutral-alphaHued-3: rgba(0, 0, 0, 0.059);
1083
+ --alias-color-neutral-alphaHued-4: rgba(0, 0, 0, 0.09);
1084
+ --alias-color-neutral-alphaHued-5: rgba(0, 0, 0, 0.122);
1085
+ --alias-color-neutral-alphaHued-6: rgba(0, 0, 0, 0.149);
1086
+ --alias-color-neutral-alphaHued-7: rgba(0, 0, 0, 0.192);
1087
+ --alias-color-neutral-alphaHued-8: rgba(0, 0, 0, 0.267);
1088
+ --alias-color-neutral-alphaHued-9: rgba(0, 0, 0, 0.447);
1089
+ --alias-color-neutral-alphaHued-10: rgba(0, 0, 0, 0.486);
1090
+ --alias-color-neutral-alphaHued-11: rgba(0, 0, 0, 0.608);
1091
+ --alias-color-neutral-alphaHued-12: rgba(0, 0, 0, 0.875);
984
1092
  --alias-color-brand-primary-regular: #646464;
985
1093
  --alias-color-brand-primary-contrast: #202020;
986
1094
  --alias-color-brand-primary-muted: #f0f0f0;
@@ -1548,7 +1656,7 @@
1548
1656
  --menu-item-color-default-background: transparent;
1549
1657
  --menu-item-color-default-foreground: #202020;
1550
1658
  --menu-item-color-default-icon: #838383;
1551
- --menu-item-color-hover-background: #f0f0f0;
1659
+ --menu-item-color-hover-background: rgba(0, 0, 0, 0.024);
1552
1660
  --menu-item-color-hover-foreground: #202020;
1553
1661
  --menu-item-color-hover-icon: #202020;
1554
1662
  --menu-item-color-focus-background: #5eb0ef;
@@ -1778,8 +1886,8 @@
1778
1886
  --datatable-row-background: #fcfcfc;
1779
1887
  --datatable-row-foreground: #202020;
1780
1888
  --datatable-row-border: #e0e0e0;
1781
- --datatable-row-hover-background: #f0f0f0;
1782
- --datatable-row-pressed-background: #fcfcfc;
1889
+ --datatable-row-hover-background: rgba(0, 0, 0, 0.024);
1890
+ --datatable-row-pressed-background: rgba(0, 0, 0, 0.059);
1783
1891
  --datatable-row-selected-background: #edf6ff;
1784
1892
  --datatable-cell-padding-x-sm: 0.5rem;
1785
1893
  --datatable-cell-padding-x-md: 0.75rem;