@rovula/ui 0.1.20 → 0.1.22

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 (99) hide show
  1. package/dist/cjs/bundle.css +316 -43
  2. package/dist/cjs/bundle.js +675 -675
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Badge/Badge.d.ts +40 -0
  5. package/dist/cjs/types/components/Badge/Badge.stories.d.ts +295 -0
  6. package/dist/cjs/types/components/Badge/Badge.styles.d.ts +7 -0
  7. package/dist/cjs/types/components/Badge/index.d.ts +2 -0
  8. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +4 -8
  9. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +1 -6
  10. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts +5 -1
  11. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts +45 -30
  12. package/dist/cjs/types/components/Form/Form.d.ts +2 -1
  13. package/dist/cjs/types/components/Form/Form.stories.d.ts +4 -0
  14. package/dist/cjs/types/components/ScrollArea/ScrollArea.d.ts +38 -0
  15. package/dist/cjs/types/components/ScrollArea/ScrollArea.stories.d.ts +301 -0
  16. package/dist/cjs/types/index.d.ts +4 -1
  17. package/dist/cjs/types/patterns/menu/Menu.d.ts +70 -0
  18. package/dist/cjs/types/{components/Menu → patterns/menu}/Menu.stories.d.ts +17 -10
  19. package/dist/cjs/types/utils/mergeRefs.d.ts +20 -0
  20. package/dist/components/Avatar/Avatar.styles.js +2 -2
  21. package/dist/components/Badge/Badge.js +36 -0
  22. package/dist/components/Badge/Badge.stories.js +51 -0
  23. package/dist/components/Badge/Badge.styles.js +62 -0
  24. package/dist/components/Badge/index.js +2 -0
  25. package/dist/components/Dropdown/Dropdown.js +54 -163
  26. package/dist/components/Dropdown/Dropdown.stories.js +29 -0
  27. package/dist/components/DropdownMenu/DropdownMenu.js +24 -13
  28. package/dist/components/DropdownMenu/DropdownMenu.stories.js +120 -88
  29. package/dist/components/Form/Form.js +11 -4
  30. package/dist/components/Form/Form.stories.js +27 -0
  31. package/dist/components/ScrollArea/ScrollArea.js +50 -0
  32. package/dist/components/ScrollArea/ScrollArea.stories.js +56 -0
  33. package/dist/components/TextInput/TextInput.js +6 -3
  34. package/dist/esm/bundle.css +316 -43
  35. package/dist/esm/bundle.js +1545 -1545
  36. package/dist/esm/bundle.js.map +1 -1
  37. package/dist/esm/types/components/Badge/Badge.d.ts +40 -0
  38. package/dist/esm/types/components/Badge/Badge.stories.d.ts +295 -0
  39. package/dist/esm/types/components/Badge/Badge.styles.d.ts +7 -0
  40. package/dist/esm/types/components/Badge/index.d.ts +2 -0
  41. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +4 -8
  42. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +1 -6
  43. package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts +5 -1
  44. package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts +45 -30
  45. package/dist/esm/types/components/Form/Form.d.ts +2 -1
  46. package/dist/esm/types/components/Form/Form.stories.d.ts +4 -0
  47. package/dist/esm/types/components/ScrollArea/ScrollArea.d.ts +38 -0
  48. package/dist/esm/types/components/ScrollArea/ScrollArea.stories.d.ts +301 -0
  49. package/dist/esm/types/index.d.ts +4 -1
  50. package/dist/esm/types/patterns/menu/Menu.d.ts +70 -0
  51. package/dist/esm/types/{components/Menu → patterns/menu}/Menu.stories.d.ts +17 -10
  52. package/dist/esm/types/utils/mergeRefs.d.ts +20 -0
  53. package/dist/index.d.ts +156 -74
  54. package/dist/index.js +3 -1
  55. package/dist/patterns/menu/Menu.js +95 -0
  56. package/dist/patterns/menu/Menu.stories.js +611 -0
  57. package/dist/src/theme/global.css +485 -57
  58. package/dist/utils/mergeRefs.js +42 -0
  59. package/package.json +1 -1
  60. package/src/components/Avatar/Avatar.styles.ts +2 -2
  61. package/src/components/Badge/Badge.stories.tsx +128 -0
  62. package/src/components/Badge/Badge.styles.ts +70 -0
  63. package/src/components/Badge/Badge.tsx +103 -0
  64. package/src/components/Badge/index.ts +3 -0
  65. package/src/components/Dropdown/Dropdown.stories.tsx +170 -1
  66. package/src/components/Dropdown/Dropdown.tsx +186 -276
  67. package/src/components/DropdownMenu/DropdownMenu.stories.tsx +1375 -253
  68. package/src/components/DropdownMenu/DropdownMenu.tsx +118 -55
  69. package/src/components/Form/Form.stories.tsx +70 -0
  70. package/src/components/Form/Form.tsx +23 -0
  71. package/src/components/ScrollArea/ScrollArea.stories.tsx +229 -0
  72. package/src/components/ScrollArea/ScrollArea.tsx +72 -0
  73. package/src/components/TextInput/TextInput.tsx +6 -3
  74. package/src/index.ts +4 -1
  75. package/src/patterns/menu/Menu.stories.tsx +1100 -0
  76. package/src/patterns/menu/Menu.tsx +282 -0
  77. package/src/theme/global.css +84 -11
  78. package/src/theme/themes/xspector/baseline.css +1 -1
  79. package/src/theme/themes/xspector/components/scrollbar.css +12 -0
  80. package/src/theme/tokens/baseline.css +3 -1
  81. package/src/theme/tokens/components/badge.css +54 -0
  82. package/src/theme/tokens/components/dropdown-menu.css +16 -5
  83. package/src/theme/tokens/components/scrollbar.css +18 -0
  84. package/src/utils/mergeRefs.ts +46 -0
  85. package/dist/cjs/types/components/Menu/Menu.d.ts +0 -65
  86. package/dist/cjs/types/components/Menu/helpers.d.ts +0 -19
  87. package/dist/cjs/types/components/Menu/index.d.ts +0 -4
  88. package/dist/components/Menu/Menu.js +0 -64
  89. package/dist/components/Menu/Menu.stories.js +0 -406
  90. package/dist/components/Menu/helpers.js +0 -28
  91. package/dist/components/Menu/index.js +0 -3
  92. package/dist/esm/types/components/Menu/Menu.d.ts +0 -65
  93. package/dist/esm/types/components/Menu/helpers.d.ts +0 -19
  94. package/dist/esm/types/components/Menu/index.d.ts +0 -4
  95. package/src/components/Menu/Menu.stories.tsx +0 -586
  96. package/src/components/Menu/Menu.tsx +0 -235
  97. package/src/components/Menu/helpers.ts +0 -45
  98. package/src/components/Menu/index.ts +0 -7
  99. package/src/theme/themes/xspector/components/dropdown-menu.css +0 -28
@@ -516,6 +516,35 @@ video {
516
516
 
517
517
  * {
518
518
  /* @apply border-border; */
519
+ scrollbar-width: thin;
520
+ scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
521
+ }
522
+
523
+ *::-webkit-scrollbar {
524
+ width: var(--scrollbar-s-thickness);
525
+ height: var(--scrollbar-s-thickness);
526
+ background: transparent;
527
+ }
528
+
529
+ *::-webkit-scrollbar-thumb {
530
+ border-radius: 12px;
531
+ background: var(--scrollbar-thumb-default-color);
532
+ }
533
+
534
+ *::-webkit-scrollbar-thumb:hover {
535
+ background: var(--scrollbar-thumb-hover-color);
536
+ }
537
+
538
+ *::-webkit-scrollbar-track:vertical {
539
+ border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
540
+ }
541
+
542
+ *::-webkit-scrollbar-track:horizontal {
543
+ border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
544
+ }
545
+
546
+ *::-webkit-scrollbar-corner {
547
+ background: transparent;
519
548
  }
520
549
 
521
550
  body {
@@ -602,9 +631,6 @@ input[type=number] {
602
631
  .bottom-\[40px\]{
603
632
  bottom: 40px;
604
633
  }
605
- .bottom-full{
606
- bottom: 100%;
607
- }
608
634
  .left-0{
609
635
  left: 0px;
610
636
  }
@@ -677,9 +703,6 @@ input[type=number] {
677
703
  .z-10{
678
704
  z-index: 10;
679
705
  }
680
- .z-40{
681
- z-index: 40;
682
- }
683
706
  .z-50{
684
707
  z-index: 50;
685
708
  }
@@ -689,16 +712,15 @@ input[type=number] {
689
712
  .z-\[100\]{
690
713
  z-index: 100;
691
714
  }
715
+ .z-\[51\]{
716
+ z-index: 51;
717
+ }
692
718
  .col-span-3{
693
719
  grid-column: span 3 / span 3;
694
720
  }
695
721
  .m-0{
696
722
  margin: 0px;
697
723
  }
698
- .-mx-2{
699
- margin-left: -0.5rem;
700
- margin-right: -0.5rem;
701
- }
702
724
  .mx-2{
703
725
  margin-left: 0.5rem;
704
726
  margin-right: 0.5rem;
@@ -731,6 +753,12 @@ input[type=number] {
731
753
  .mb-2{
732
754
  margin-bottom: 0.5rem;
733
755
  }
756
+ .mb-3{
757
+ margin-bottom: 0.75rem;
758
+ }
759
+ .mb-4{
760
+ margin-bottom: 1rem;
761
+ }
734
762
  .ml-1{
735
763
  margin-left: 0.25rem;
736
764
  }
@@ -746,6 +774,9 @@ input[type=number] {
746
774
  .ml-auto{
747
775
  margin-left: auto;
748
776
  }
777
+ .mr-1{
778
+ margin-right: 0.25rem;
779
+ }
749
780
  .mr-2{
750
781
  margin-right: 0.5rem;
751
782
  }
@@ -782,6 +813,9 @@ input[type=number] {
782
813
  .inline-block{
783
814
  display: inline-block;
784
815
  }
816
+ .inline{
817
+ display: inline;
818
+ }
785
819
  .flex{
786
820
  display: flex;
787
821
  }
@@ -948,6 +982,18 @@ input[type=number] {
948
982
  .max-h-60{
949
983
  max-height: 15rem;
950
984
  }
985
+ .max-h-\[\.\.\.\]{
986
+ max-height: ...;
987
+ }
988
+ .max-h-\[160px\]{
989
+ max-height: 160px;
990
+ }
991
+ .max-h-\[216px\]{
992
+ max-height: 216px;
993
+ }
994
+ .max-h-\[270px\]{
995
+ max-height: 270px;
996
+ }
951
997
  .max-h-\[80vh\]{
952
998
  max-height: 80vh;
953
999
  }
@@ -975,9 +1021,6 @@ input[type=number] {
975
1021
  .w-10{
976
1022
  width: 2.5rem;
977
1023
  }
978
- .w-2{
979
- width: 0.5rem;
980
- }
981
1024
  .w-20{
982
1025
  width: 5rem;
983
1026
  }
@@ -993,6 +1036,9 @@ input[type=number] {
993
1036
  .w-5{
994
1037
  width: 1.25rem;
995
1038
  }
1039
+ .w-52{
1040
+ width: 13rem;
1041
+ }
996
1042
  .w-6{
997
1043
  width: 1.5rem;
998
1044
  }
@@ -1014,6 +1060,12 @@ input[type=number] {
1014
1060
  .w-\[200px\]{
1015
1061
  width: 200px;
1016
1062
  }
1063
+ .w-\[220px\]{
1064
+ width: 220px;
1065
+ }
1066
+ .w-\[230px\]{
1067
+ width: 230px;
1068
+ }
1017
1069
  .w-\[24px\]{
1018
1070
  width: 24px;
1019
1071
  }
@@ -1153,6 +1205,9 @@ input[type=number] {
1153
1205
  .cursor-default{
1154
1206
  cursor: default;
1155
1207
  }
1208
+ .cursor-grab{
1209
+ cursor: grab;
1210
+ }
1156
1211
  .cursor-not-allowed{
1157
1212
  cursor: not-allowed;
1158
1213
  }
@@ -1257,6 +1312,9 @@ input[type=number] {
1257
1312
  .gap-0{
1258
1313
  gap: 0px;
1259
1314
  }
1315
+ .gap-0\.5{
1316
+ gap: 0.125rem;
1317
+ }
1260
1318
  .gap-1{
1261
1319
  gap: 0.25rem;
1262
1320
  }
@@ -1307,6 +1365,11 @@ input[type=number] {
1307
1365
  margin-right: calc(1rem * var(--tw-space-x-reverse));
1308
1366
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1309
1367
  }
1368
+ .space-y-1 > :not([hidden]) ~ :not([hidden]){
1369
+ --tw-space-y-reverse: 0;
1370
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1371
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1372
+ }
1310
1373
  .space-y-2 > :not([hidden]) ~ :not([hidden]){
1311
1374
  --tw-space-y-reverse: 0;
1312
1375
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1346,6 +1409,12 @@ input[type=number] {
1346
1409
  .overflow-y-auto{
1347
1410
  overflow-y: auto;
1348
1411
  }
1412
+ .overflow-x-hidden{
1413
+ overflow-x: hidden;
1414
+ }
1415
+ .overflow-y-hidden{
1416
+ overflow-y: hidden;
1417
+ }
1349
1418
  .overflow-y-scroll{
1350
1419
  overflow-y: scroll;
1351
1420
  }
@@ -1372,6 +1441,9 @@ input[type=number] {
1372
1441
  .rounded-\[1px\]{
1373
1442
  border-radius: 1px;
1374
1443
  }
1444
+ .rounded-\[2px\]{
1445
+ border-radius: 2px;
1446
+ }
1375
1447
  .rounded-\[8px\]{
1376
1448
  border-radius: 8px;
1377
1449
  }
@@ -1527,6 +1599,33 @@ input[type=number] {
1527
1599
  --tw-border-opacity: 1 !important;
1528
1600
  border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
1529
1601
  }
1602
+ .border-\[var\(--badge-default-border\)\]{
1603
+ border-color: var(--badge-default-border);
1604
+ }
1605
+ .border-\[var\(--badge-error-border\)\]{
1606
+ border-color: var(--badge-error-border);
1607
+ }
1608
+ .border-\[var\(--badge-info-border\)\]{
1609
+ border-color: var(--badge-info-border);
1610
+ }
1611
+ .border-\[var\(--badge-success-border\)\]{
1612
+ border-color: var(--badge-success-border);
1613
+ }
1614
+ .border-\[var\(--badge-warning-border\)\]{
1615
+ border-color: var(--badge-warning-border);
1616
+ }
1617
+ .border-\[var\(--dropdown-menu-checkbox-border\)\]{
1618
+ border-color: var(--dropdown-menu-checkbox-border);
1619
+ }
1620
+ .border-\[var\(--dropdown-menu-checkbox-checked-bg\)\]{
1621
+ border-color: var(--dropdown-menu-checkbox-checked-bg);
1622
+ }
1623
+ .border-\[var\(--dropdown-menu-checkbox-disabled-border\)\]{
1624
+ border-color: var(--dropdown-menu-checkbox-disabled-border);
1625
+ }
1626
+ .border-\[var\(--dropdown-menu-seperator-bg\)\]{
1627
+ border-color: var(--dropdown-menu-seperator-bg);
1628
+ }
1530
1629
  .border-action-button-icon-active{
1531
1630
  --tw-border-opacity: 1;
1532
1631
  border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -1760,6 +1859,9 @@ input[type=number] {
1760
1859
  --tw-border-opacity: 1;
1761
1860
  border-top-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
1762
1861
  }
1862
+ .\!bg-\[var\(--dropdown-menu-hover-bg\)\]{
1863
+ background-color: var(--dropdown-menu-hover-bg) !important;
1864
+ }
1763
1865
  .\!bg-action-button-icon-active-hover{
1764
1866
  --tw-bg-opacity: 1 !important;
1765
1867
  background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
@@ -1790,9 +1892,48 @@ input[type=number] {
1790
1892
  .bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
1791
1893
  background-color: rgb(var(--navbar-bg-color));
1792
1894
  }
1895
+ .bg-\[var\(--badge-default-bg\)\]{
1896
+ background-color: var(--badge-default-bg);
1897
+ }
1898
+ .bg-\[var\(--badge-error-bg\)\]{
1899
+ background-color: var(--badge-error-bg);
1900
+ }
1901
+ .bg-\[var\(--badge-info-bg\)\]{
1902
+ background-color: var(--badge-info-bg);
1903
+ }
1904
+ .bg-\[var\(--badge-severity-high-bg\)\]{
1905
+ background-color: var(--badge-severity-high-bg);
1906
+ }
1907
+ .bg-\[var\(--badge-severity-highest-bg\)\]{
1908
+ background-color: var(--badge-severity-highest-bg);
1909
+ }
1910
+ .bg-\[var\(--badge-severity-low-bg\)\]{
1911
+ background-color: var(--badge-severity-low-bg);
1912
+ }
1913
+ .bg-\[var\(--badge-severity-lowest-bg\)\]{
1914
+ background-color: var(--badge-severity-lowest-bg);
1915
+ }
1916
+ .bg-\[var\(--badge-severity-medium-bg\)\]{
1917
+ background-color: var(--badge-severity-medium-bg);
1918
+ }
1919
+ .bg-\[var\(--badge-success-bg\)\]{
1920
+ background-color: var(--badge-success-bg);
1921
+ }
1922
+ .bg-\[var\(--badge-warning-bg\)\]{
1923
+ background-color: var(--badge-warning-bg);
1924
+ }
1925
+ .bg-\[var\(--dropdown-menu-checkbox-checked-bg\)\]{
1926
+ background-color: var(--dropdown-menu-checkbox-checked-bg);
1927
+ }
1928
+ .bg-\[var\(--dropdown-menu-checkbox-disabled-checked-bg\)\]{
1929
+ background-color: var(--dropdown-menu-checkbox-disabled-checked-bg);
1930
+ }
1793
1931
  .bg-\[var\(--dropdown-menu-default-bg\)\]{
1794
1932
  background-color: var(--dropdown-menu-default-bg);
1795
1933
  }
1934
+ .bg-\[var\(--dropdown-menu-hover-bg\)\]{
1935
+ background-color: var(--dropdown-menu-hover-bg);
1936
+ }
1796
1937
  .bg-\[var\(--dropdown-menu-selected-bg\)\]{
1797
1938
  background-color: var(--dropdown-menu-selected-bg);
1798
1939
  }
@@ -1918,6 +2059,9 @@ input[type=number] {
1918
2059
  --tw-bg-opacity: 1;
1919
2060
  background-color: color-mix(in srgb, var(--transparent-black-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
1920
2061
  }
2062
+ .bg-blue-400\/10{
2063
+ background-color: rgb(96 165 250 / 0.1);
2064
+ }
1921
2065
  .bg-button-error-flat-default{
1922
2066
  --tw-bg-opacity: 1;
1923
2067
  background-color: color-mix(in srgb, var(--button-error-flat-default-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -2138,6 +2282,9 @@ input[type=number] {
2138
2282
  --tw-bg-opacity: 1;
2139
2283
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
2140
2284
  }
2285
+ .bg-green-400\/10{
2286
+ background-color: rgb(74 222 128 / 0.1);
2287
+ }
2141
2288
  .bg-green-500{
2142
2289
  --tw-bg-opacity: 1;
2143
2290
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
@@ -2557,6 +2704,9 @@ input[type=number] {
2557
2704
  --tw-bg-opacity: 1;
2558
2705
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
2559
2706
  }
2707
+ .bg-red-400\/10{
2708
+ background-color: rgb(248 113 113 / 0.1);
2709
+ }
2560
2710
  .bg-secondary{
2561
2711
  --tw-bg-opacity: 1;
2562
2712
  background-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -3036,6 +3186,9 @@ input[type=number] {
3036
3186
  --tw-bg-opacity: 1;
3037
3187
  background-color: color-mix(in srgb, var(--transparent-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
3038
3188
  }
3189
+ .bg-yellow-400\/10{
3190
+ background-color: rgb(250 204 21 / 0.1);
3191
+ }
3039
3192
  .bg-gradient-to-r{
3040
3193
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
3041
3194
  }
@@ -3214,12 +3367,18 @@ input[type=number] {
3214
3367
  .stroke-primary-default{
3215
3368
  stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
3216
3369
  }
3370
+ .\!p-0{
3371
+ padding: 0px !important;
3372
+ }
3217
3373
  .p-0{
3218
3374
  padding: 0px;
3219
3375
  }
3220
3376
  .p-1{
3221
3377
  padding: 0.25rem;
3222
3378
  }
3379
+ .p-10{
3380
+ padding: 2.5rem;
3381
+ }
3223
3382
  .p-2{
3224
3383
  padding: 0.5rem;
3225
3384
  }
@@ -3245,10 +3404,6 @@ input[type=number] {
3245
3404
  padding-left: 0.25rem;
3246
3405
  padding-right: 0.25rem;
3247
3406
  }
3248
- .px-2{
3249
- padding-left: 0.5rem;
3250
- padding-right: 0.5rem;
3251
- }
3252
3407
  .px-3{
3253
3408
  padding-left: 0.75rem;
3254
3409
  padding-right: 0.75rem;
@@ -3297,6 +3452,10 @@ input[type=number] {
3297
3452
  padding-left: 8px;
3298
3453
  padding-right: 8px;
3299
3454
  }
3455
+ .py-0\.5{
3456
+ padding-top: 0.125rem;
3457
+ padding-bottom: 0.125rem;
3458
+ }
3300
3459
  .py-1{
3301
3460
  padding-top: 0.25rem;
3302
3461
  padding-bottom: 0.25rem;
@@ -3380,6 +3539,9 @@ input[type=number] {
3380
3539
  .\!ps-\[72px\]{
3381
3540
  padding-inline-start: 72px !important;
3382
3541
  }
3542
+ .pb-2{
3543
+ padding-bottom: 0.5rem;
3544
+ }
3383
3545
  .pe-\[30px\]{
3384
3546
  padding-inline-end: 30px;
3385
3547
  }
@@ -3389,17 +3551,17 @@ input[type=number] {
3389
3551
  .pe-\[68px\]{
3390
3552
  padding-inline-end: 68px;
3391
3553
  }
3554
+ .pl-4{
3555
+ padding-left: 1rem;
3556
+ }
3392
3557
  .pl-8{
3393
3558
  padding-left: 2rem;
3394
3559
  }
3395
- .pl-9{
3396
- padding-left: 2.25rem;
3397
- }
3398
3560
  .pr-4{
3399
3561
  padding-right: 1rem;
3400
3562
  }
3401
- .pr-xxl{
3402
- padding-right: var(--spacing-spacing-xxl);
3563
+ .pr-8{
3564
+ padding-right: 2rem;
3403
3565
  }
3404
3566
  .pt-2{
3405
3567
  padding-top: 0.5rem;
@@ -3611,6 +3773,10 @@ input[type=number] {
3611
3773
  .capitalize{
3612
3774
  text-transform: capitalize;
3613
3775
  }
3776
+ .tabular-nums{
3777
+ --tw-numeric-spacing: tabular-nums;
3778
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
3779
+ }
3614
3780
  .leading-\[3rem\]{
3615
3781
  line-height: 3rem;
3616
3782
  }
@@ -3657,9 +3823,39 @@ input[type=number] {
3657
3823
  .text-\[rgb\(var\(--navbar-text-color\)\)\]{
3658
3824
  color: rgb(var(--navbar-text-color));
3659
3825
  }
3826
+ .text-\[var\(--badge-default-text\)\]{
3827
+ color: var(--badge-default-text);
3828
+ }
3829
+ .text-\[var\(--badge-error-text\)\]{
3830
+ color: var(--badge-error-text);
3831
+ }
3832
+ .text-\[var\(--badge-info-text\)\]{
3833
+ color: var(--badge-info-text);
3834
+ }
3835
+ .text-\[var\(--badge-severity-text\)\]{
3836
+ color: var(--badge-severity-text);
3837
+ }
3838
+ .text-\[var\(--badge-success-text\)\]{
3839
+ color: var(--badge-success-text);
3840
+ }
3841
+ .text-\[var\(--badge-warning-text\)\]{
3842
+ color: var(--badge-warning-text);
3843
+ }
3844
+ .text-\[var\(--dropdown-menu-checkbox-checked-bg\)\]{
3845
+ color: var(--dropdown-menu-checkbox-checked-bg);
3846
+ }
3847
+ .text-\[var\(--dropdown-menu-checkbox-checked-icon\)\]{
3848
+ color: var(--dropdown-menu-checkbox-checked-icon);
3849
+ }
3660
3850
  .text-\[var\(--dropdown-menu-default-text\)\]{
3661
3851
  color: var(--dropdown-menu-default-text);
3662
3852
  }
3853
+ .text-\[var\(--dropdown-menu-hover-text\)\]{
3854
+ color: var(--dropdown-menu-hover-text);
3855
+ }
3856
+ .text-\[var\(--dropdown-menu-radio-selected-disabled-text\)\]{
3857
+ color: var(--dropdown-menu-radio-selected-disabled-text);
3858
+ }
3663
3859
  .text-\[var\(--dropdown-menu-selected-text\)\]{
3664
3860
  color: var(--dropdown-menu-selected-text);
3665
3861
  }
@@ -3712,6 +3908,10 @@ input[type=number] {
3712
3908
  --tw-text-opacity: 1;
3713
3909
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
3714
3910
  }
3911
+ .text-blue-400{
3912
+ --tw-text-opacity: 1;
3913
+ color: rgb(96 165 250 / var(--tw-text-opacity, 1));
3914
+ }
3715
3915
  .text-blue-500{
3716
3916
  --tw-text-opacity: 1;
3717
3917
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -3835,6 +4035,10 @@ input[type=number] {
3835
4035
  --tw-text-opacity: 1;
3836
4036
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
3837
4037
  }
4038
+ .text-green-400{
4039
+ --tw-text-opacity: 1;
4040
+ color: rgb(74 222 128 / var(--tw-text-opacity, 1));
4041
+ }
3838
4042
  .text-green-500{
3839
4043
  --tw-text-opacity: 1;
3840
4044
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -3874,6 +4078,10 @@ input[type=number] {
3874
4078
  --tw-text-opacity: 1;
3875
4079
  color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
3876
4080
  }
4081
+ .text-red-400{
4082
+ --tw-text-opacity: 1;
4083
+ color: rgb(248 113 113 / var(--tw-text-opacity, 1));
4084
+ }
3877
4085
  .text-red-500{
3878
4086
  --tw-text-opacity: 1;
3879
4087
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -3890,6 +4098,10 @@ input[type=number] {
3890
4098
  --tw-text-opacity: 1;
3891
4099
  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
3892
4100
  }
4101
+ .text-state-error-default{
4102
+ --tw-text-opacity: 1;
4103
+ color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
4104
+ }
3893
4105
  .text-state-primary-text-solid{
3894
4106
  --tw-text-opacity: 1;
3895
4107
  color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -3898,6 +4110,10 @@ input[type=number] {
3898
4110
  --tw-text-opacity: 1;
3899
4111
  color: color-mix(in srgb, var(--state-secondary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
3900
4112
  }
4113
+ .text-state-success-default{
4114
+ --tw-text-opacity: 1;
4115
+ color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
4116
+ }
3901
4117
  .text-success{
3902
4118
  --tw-text-opacity: 1;
3903
4119
  color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -3930,6 +4146,10 @@ input[type=number] {
3930
4146
  --tw-text-opacity: 1;
3931
4147
  color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
3932
4148
  }
4149
+ .text-text-white{
4150
+ --tw-text-opacity: 1;
4151
+ color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
4152
+ }
3933
4153
  .text-warning{
3934
4154
  --tw-text-opacity: 1;
3935
4155
  color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -3938,6 +4158,10 @@ input[type=number] {
3938
4158
  --tw-text-opacity: 1;
3939
4159
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3940
4160
  }
4161
+ .text-yellow-400{
4162
+ --tw-text-opacity: 1;
4163
+ color: rgb(250 204 21 / var(--tw-text-opacity, 1));
4164
+ }
3941
4165
  .underline{
3942
4166
  text-decoration-line: underline;
3943
4167
  }
@@ -3950,9 +4174,6 @@ input[type=number] {
3950
4174
  .opacity-0{
3951
4175
  opacity: 0;
3952
4176
  }
3953
- .opacity-50{
3954
- opacity: 0.5;
3955
- }
3956
4177
  .opacity-60{
3957
4178
  opacity: 0.6;
3958
4179
  }
@@ -3995,6 +4216,11 @@ input[type=number] {
3995
4216
  .outline{
3996
4217
  outline-style: solid;
3997
4218
  }
4219
+ .\!ring-0{
4220
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
4221
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
4222
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
4223
+ }
3998
4224
  .ring-0{
3999
4225
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
4000
4226
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4282,23 +4508,58 @@ input[type=number] {
4282
4508
  line-height: var(--button-button-ms-line-height, 22px);
4283
4509
  font-weight: var(--button-button-ms-weight, 700);
4284
4510
  }
4511
+ /* ------------------------------------------------------------------ */
4512
+ /* Scrollbar utility — applies the design-system scrollbar style */
4513
+ /* Default size: S (6px thumb, matches Figma Size=S) */
4514
+ /* Usage: add `ui-scrollbar` + optional size modifier to any */
4515
+ /* overflow-auto / overflow-y-auto / overflow-x-auto container. */
4516
+ /* ------------------------------------------------------------------ */
4517
+ /* --- Track --- */
4285
4518
  .ui-scrollbar::-webkit-scrollbar {
4286
- height: 6px;
4287
- width: 6px;
4288
- background: rgba(0, 0, 0, 0.08);
4519
+ width: var(--scrollbar-s-thickness);
4520
+ height: var(--scrollbar-s-thickness);
4521
+ background: transparent;
4289
4522
  }
4523
+ /* --- Thumb --- */
4290
4524
  .ui-scrollbar::-webkit-scrollbar-thumb {
4291
- border-radius: 6px;
4292
- background: rgba(121, 141, 150, 0.48);
4293
- width: 6px;
4525
+ border-radius: 12px;
4526
+ background: var(--scrollbar-thumb-default-color);
4294
4527
  }
4295
4528
  .ui-scrollbar::-webkit-scrollbar-thumb:hover {
4296
- background: rgba(251, 252, 253, 0.48);
4529
+ background: var(--scrollbar-thumb-hover-color);
4297
4530
  cursor: pointer;
4298
4531
  }
4532
+ /* --- Track border (vertical) --- */
4533
+ .ui-scrollbar::-webkit-scrollbar-track:vertical {
4534
+ border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
4535
+ }
4536
+ /* --- Track border (horizontal) --- */
4537
+ .ui-scrollbar::-webkit-scrollbar-track:horizontal {
4538
+ border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
4539
+ }
4299
4540
  .ui-scrollbar::-webkit-scrollbar-corner {
4300
- display: none;
4301
- /* background: transparent; */
4541
+ background: transparent;
4542
+ }
4543
+ /* --- Size variants --- */
4544
+ /* Size M — 12px */
4545
+ .ui-scrollbar-m::-webkit-scrollbar {
4546
+ width: var(--scrollbar-m-thickness);
4547
+ height: var(--scrollbar-m-thickness);
4548
+ }
4549
+ /* Size S — 6px (default, same as base .ui-scrollbar) */
4550
+ .ui-scrollbar-s::-webkit-scrollbar {
4551
+ width: var(--scrollbar-s-thickness);
4552
+ height: var(--scrollbar-s-thickness);
4553
+ }
4554
+ /* Size XS — 2px */
4555
+ .ui-scrollbar-xs::-webkit-scrollbar {
4556
+ width: var(--scrollbar-xs-thickness);
4557
+ height: var(--scrollbar-xs-thickness);
4558
+ }
4559
+ /* XS size has no track border */
4560
+ .ui-scrollbar-xs::-webkit-scrollbar-track:vertical,
4561
+ .ui-scrollbar-xs::-webkit-scrollbar-track:horizontal {
4562
+ border: none;
4302
4563
  }
4303
4564
  .\[filter\:var\(--switch-thumb-filter\)\]{
4304
4565
  filter: var(--switch-thumb-filter);
@@ -4319,6 +4580,14 @@ input[type=number] {
4319
4580
  --tw-text-opacity: 1;
4320
4581
  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
4321
4582
  }
4583
+ .placeholder\:text-text-g-contrast-medium::-moz-placeholder{
4584
+ --tw-text-opacity: 1;
4585
+ color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
4586
+ }
4587
+ .placeholder\:text-text-g-contrast-medium::placeholder{
4588
+ --tw-text-opacity: 1;
4589
+ color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
4590
+ }
4322
4591
  .placeholder\:text-transparent::-moz-placeholder{
4323
4592
  color: transparent;
4324
4593
  }
@@ -4851,9 +5120,16 @@ input[type=number] {
4851
5120
  --tw-text-opacity: 1;
4852
5121
  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
4853
5122
  }
5123
+ .hover\:text-text-g-contrast-high:hover{
5124
+ --tw-text-opacity: 1;
5125
+ color: color-mix(in srgb, var(--text-g-contrast-high) calc(100% * var(--tw-text-opacity, 1)), transparent);
5126
+ }
4854
5127
  .hover\:opacity-100:hover{
4855
5128
  opacity: 1;
4856
5129
  }
5130
+ .hover\:opacity-80:hover{
5131
+ opacity: 0.8;
5132
+ }
4857
5133
  .hover\:ring-\[var\(--action-button-outline-active-hover-border\)\]:hover{
4858
5134
  --tw-ring-color: var(--action-button-outline-active-hover-border);
4859
5135
  }
@@ -4899,10 +5175,6 @@ input[type=number] {
4899
5175
  .focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus{
4900
5176
  background-color: var(--dropdown-menu-hover-bg) !important;
4901
5177
  }
4902
- .focus\:bg-primary:focus{
4903
- --tw-bg-opacity: 1;
4904
- background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
4905
- }
4906
5178
  .focus\:pe-10:focus{
4907
5179
  padding-inline-end: 2.5rem;
4908
5180
  }
@@ -6218,6 +6490,9 @@ input[type=number] {
6218
6490
  .data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled]{
6219
6491
  color: var(--dropdown-menu-disabled-text) !important;
6220
6492
  }
6493
+ .data-\[disabled\]\:\!text-\[var\(--dropdown-menu-radio-disabled-text\)\][data-disabled]{
6494
+ color: var(--dropdown-menu-radio-disabled-text) !important;
6495
+ }
6221
6496
  .data-\[disabled\]\:\!text-state-disable-outline[data-disabled]{
6222
6497
  --tw-text-opacity: 1 !important;
6223
6498
  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
@@ -6306,6 +6581,9 @@ input[type=number] {
6306
6581
  --tw-text-opacity: 1;
6307
6582
  color: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
6308
6583
  }
6584
+ .data-\[state\=\'checked\'\]\:data-\[disabled\]\:\!text-\[var\(--dropdown-menu-radio-selected-disabled-text\)\][data-disabled][data-state='checked']{
6585
+ color: var(--dropdown-menu-radio-selected-disabled-text) !important;
6586
+ }
6309
6587
  .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
6310
6588
  color: var(--dropdown-menu-selected-text);
6311
6589
  }
@@ -6334,11 +6612,6 @@ input[type=number] {
6334
6612
  .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
6335
6613
  transition-property: none;
6336
6614
  }
6337
- .data-\[state\=\'checked\'\]\:typography-subtitle5[data-state='checked']{
6338
- font-size: var(--subtitle5-size, 14px);
6339
- line-height: var(--subtitle5-line-height, 22px);
6340
- font-weight: var(--subtitle5-weight, 500);
6341
- }
6342
6615
  .data-\[disabled\]\:before\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]::before{
6343
6616
  content: var(--tw-content);
6344
6617
  background-color: var(--switch-disabled-color) !important;