uchi 0.1.5 → 0.1.6

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 (128) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/uchi/application.js +2655 -24
  3. data/app/assets/javascripts/uchi.js +11 -0
  4. data/app/assets/stylesheets/uchi/application.css +982 -1311
  5. data/app/assets/tailwind/uchi.css +4 -4
  6. data/app/components/uchi/field/belongs_to/edit.html.erb +1 -1
  7. data/app/components/uchi/field/belongs_to/index.html.erb +1 -1
  8. data/app/components/uchi/field/belongs_to/show.html.erb +3 -5
  9. data/app/components/uchi/field/belongs_to.rb +30 -7
  10. data/app/components/uchi/field/boolean/edit.html.erb +1 -1
  11. data/app/components/uchi/field/date/edit.html.erb +1 -1
  12. data/app/components/uchi/field/date_time/edit.html.erb +1 -1
  13. data/app/components/uchi/field/file/edit.html.erb +1 -1
  14. data/app/components/uchi/field/file/index.html.erb +2 -1
  15. data/app/components/uchi/field/file/show.html.erb +3 -2
  16. data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb +5 -3
  17. data/app/components/uchi/field/has_many/show.html.erb +5 -3
  18. data/app/components/uchi/field/id/index.html.erb +1 -1
  19. data/app/components/uchi/field/id/show.html.erb +1 -1
  20. data/app/components/uchi/field/image/edit.html.erb +1 -1
  21. data/app/components/uchi/field/image/index.html.erb +2 -1
  22. data/app/components/uchi/field/image/show.html.erb +2 -1
  23. data/app/components/uchi/field/number/edit.html.erb +1 -1
  24. data/app/components/uchi/field/string/edit.html.erb +1 -1
  25. data/app/components/uchi/field/text/edit.html.erb +1 -1
  26. data/app/components/{flowbite → uchi/flowbite}/breadcrumb.rb +5 -5
  27. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_home.rb +2 -2
  28. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/current.rb +3 -3
  29. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/first.rb +4 -4
  30. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item.rb +4 -4
  31. data/app/components/{flowbite → uchi/flowbite}/breadcrumb_separator.rb +7 -5
  32. data/app/components/uchi/flowbite/button/outline.rb +37 -0
  33. data/app/components/uchi/flowbite/button/pill.rb +40 -0
  34. data/app/components/uchi/flowbite/button.rb +93 -0
  35. data/app/components/uchi/flowbite/card/card.html.erb +7 -0
  36. data/app/components/uchi/flowbite/card/title.rb +37 -0
  37. data/app/components/uchi/flowbite/card.rb +84 -0
  38. data/app/components/{flowbite → uchi/flowbite}/input/checkbox.rb +7 -7
  39. data/app/components/{flowbite → uchi/flowbite}/input/date.rb +1 -1
  40. data/app/components/{flowbite → uchi/flowbite}/input/date_time.rb +1 -1
  41. data/app/components/{flowbite → uchi/flowbite}/input/email.rb +1 -1
  42. data/app/components/{flowbite → uchi/flowbite}/input/field.rb +11 -10
  43. data/app/components/uchi/flowbite/input/file.rb +30 -0
  44. data/app/components/{flowbite → uchi/flowbite}/input/hint.rb +6 -5
  45. data/app/components/{flowbite → uchi/flowbite}/input/label.rb +8 -7
  46. data/app/components/{flowbite → uchi/flowbite}/input/number.rb +1 -1
  47. data/app/components/{flowbite → uchi/flowbite}/input/password.rb +1 -1
  48. data/app/components/{flowbite → uchi/flowbite}/input/phone.rb +1 -1
  49. data/app/components/{flowbite → uchi/flowbite}/input/radio_button.rb +7 -7
  50. data/app/components/{flowbite → uchi/flowbite}/input/select.rb +16 -7
  51. data/app/components/uchi/flowbite/input/textarea.rb +42 -0
  52. data/app/components/{flowbite → uchi/flowbite}/input/url.rb +1 -1
  53. data/app/components/uchi/flowbite/input/validation_error.rb +39 -0
  54. data/app/components/uchi/flowbite/input_field/checkbox.html.erb +9 -0
  55. data/app/components/{flowbite → uchi/flowbite}/input_field/checkbox.rb +10 -6
  56. data/app/components/{flowbite → uchi/flowbite}/input_field/date.rb +2 -2
  57. data/app/components/{flowbite → uchi/flowbite}/input_field/date_time.rb +2 -2
  58. data/app/components/{flowbite → uchi/flowbite}/input_field/email.rb +2 -2
  59. data/app/components/{flowbite → uchi/flowbite}/input_field/file.rb +2 -2
  60. data/app/components/uchi/flowbite/input_field/input_field.html.erb +9 -0
  61. data/app/components/{flowbite → uchi/flowbite}/input_field/number.rb +2 -2
  62. data/app/components/{flowbite → uchi/flowbite}/input_field/password.rb +2 -2
  63. data/app/components/{flowbite → uchi/flowbite}/input_field/phone.rb +2 -2
  64. data/app/components/uchi/flowbite/input_field/radio_button.html.erb +9 -0
  65. data/app/components/{flowbite → uchi/flowbite}/input_field/radio_button.rb +13 -9
  66. data/app/components/{flowbite → uchi/flowbite}/input_field/select.rb +7 -3
  67. data/app/components/{flowbite → uchi/flowbite}/input_field/text.rb +1 -1
  68. data/app/components/{flowbite → uchi/flowbite}/input_field/textarea.rb +2 -2
  69. data/app/components/{flowbite → uchi/flowbite}/input_field/url.rb +2 -2
  70. data/app/components/{flowbite → uchi/flowbite}/input_field.rb +19 -5
  71. data/app/components/uchi/flowbite/link.rb +41 -0
  72. data/app/components/{flowbite → uchi/flowbite}/style.rb +1 -1
  73. data/app/components/{flowbite → uchi/flowbite}/toast/icon.rb +1 -1
  74. data/app/components/uchi/flowbite/toast/toast.html.erb +40 -0
  75. data/app/components/{flowbite → uchi/flowbite}/toast.rb +2 -2
  76. data/app/components/uchi/ui/actions/dropdown/dropdown.html.erb +59 -0
  77. data/app/components/uchi/ui/actions/dropdown.rb +32 -0
  78. data/app/components/uchi/ui/breadcrumb/breadcrumb.html.erb +4 -4
  79. data/app/components/uchi/ui/form/input/collection_checkboxes.html.erb +2 -1
  80. data/app/components/uchi/ui/form/input/collection_checkboxes.rb +12 -17
  81. data/app/components/uchi/ui/frame/frame.html.erb +6 -1
  82. data/app/components/uchi/ui/index/records_table/records_table.html.erb +109 -18
  83. data/app/components/uchi/ui/index/records_table/search_form/search_form.html.erb +21 -5
  84. data/app/components/uchi/ui/navigation/navigation.html.erb +9 -0
  85. data/app/components/uchi/ui/navigation.rb +37 -0
  86. data/app/components/uchi/ui/no_value/no_value.html.erb +1 -0
  87. data/app/components/uchi/ui/no_value.rb +8 -0
  88. data/app/components/uchi/ui/page_header/page_header.html.erb +7 -2
  89. data/app/components/uchi/ui/pagination/current_link.html.erb +1 -1
  90. data/app/components/uchi/ui/pagination/gap.html.erb +7 -1
  91. data/app/components/uchi/ui/pagination/link.html.erb +1 -1
  92. data/app/components/uchi/ui/pagination/next_link.html.erb +18 -3
  93. data/app/components/uchi/ui/pagination/pagination.html.erb +3 -1
  94. data/app/components/uchi/ui/pagination/previous_link.html.erb +18 -3
  95. data/app/components/uchi/ui/pagination.rb +1 -1
  96. data/app/components/uchi/ui/show/attribute_fields/attribute_fields.html.erb +4 -3
  97. data/app/components/uchi/ui/spinner/spinner.html.erb +17 -3
  98. data/app/controllers/uchi/actions/executions_controller.rb +107 -0
  99. data/app/controllers/uchi/repository_controller.rb +21 -1
  100. data/app/views/layouts/uchi/_flash_messages.html.erb +1 -1
  101. data/app/views/layouts/uchi/application.html.erb +10 -16
  102. data/app/views/uchi/navigation/_main.html.erb +9 -0
  103. data/app/views/uchi/repository/edit.html.erb +2 -2
  104. data/app/views/uchi/repository/index.html.erb +12 -3
  105. data/app/views/uchi/repository/new.html.erb +2 -2
  106. data/app/views/uchi/repository/show.html.erb +13 -2
  107. data/lib/generators/uchi/controller/templates/controller.rb.tt +0 -5
  108. data/lib/generators/uchi/scaffold/scaffold_generator.rb +15 -0
  109. data/lib/uchi/action.rb +84 -0
  110. data/lib/uchi/action_response.rb +108 -0
  111. data/lib/uchi/repository/translate.rb +14 -0
  112. data/lib/uchi/repository.rb +25 -0
  113. data/lib/uchi/version.rb +1 -1
  114. data/lib/uchi.rb +2 -0
  115. metadata +63 -50
  116. data/app/components/flowbite/button/outline.rb +0 -22
  117. data/app/components/flowbite/button/pill.rb +0 -40
  118. data/app/components/flowbite/button.rb +0 -92
  119. data/app/components/flowbite/card.rb +0 -45
  120. data/app/components/flowbite/input/file.rb +0 -30
  121. data/app/components/flowbite/input/textarea.rb +0 -42
  122. data/app/components/flowbite/input/validation_error.rb +0 -11
  123. data/app/components/flowbite/input_field/checkbox.html.erb +0 -14
  124. data/app/components/flowbite/input_field/input_field.html.erb +0 -8
  125. data/app/components/flowbite/input_field/radio_button.html.erb +0 -14
  126. data/app/components/flowbite/link.rb +0 -21
  127. data/app/components/flowbite/toast/toast.html.erb +0 -11
  128. /data/app/components/{flowbite → uchi/flowbite}/toast/icon.html.erb +0 -0
@@ -3,128 +3,204 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-50: #FEF2F2;
11
- --color-red-100: #FEE2E2;
12
- --color-red-200: #FECACA;
13
- --color-red-300: #FCA5A5;
14
- --color-red-400: #F87171;
15
- --color-red-500: #EF4444;
16
- --color-red-600: #DC2626;
17
- --color-red-700: #B91C1C;
18
- --color-red-800: #991B1B;
19
- --color-red-900: #7F1D1D;
20
- --color-orange-50: #FFFAF0;
21
- --color-orange-100: #FEEBC8;
22
- --color-orange-200: #FBD38D;
23
- --color-orange-300: #F6AD55;
24
- --color-orange-400: #ED8936;
25
- --color-orange-500: #DD6B20;
26
- --color-orange-600: #C05621;
27
- --color-orange-700: #9C4221;
28
- --color-orange-800: #7B341E;
29
- --color-orange-900: #652B19;
30
- --color-yellow-50: #FFFBEB;
31
- --color-yellow-100: #FEF3C7;
32
- --color-yellow-200: #FDE68A;
33
- --color-yellow-300: #FCD34D;
34
- --color-yellow-400: #FBBF24;
35
- --color-yellow-500: #F59E0B;
36
- --color-yellow-600: #D97706;
37
- --color-yellow-700: #B45309;
38
- --color-yellow-800: #92400E;
39
- --color-yellow-900: #78350F;
6
+ --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
7
+ --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
8
+ --color-red-50: oklch(97.1% 0.013 17.38);
9
+ --color-red-100: oklch(93.6% 0.032 17.717);
10
+ --color-red-200: oklch(88.5% 0.062 18.334);
11
+ --color-red-300: oklch(80.8% 0.114 19.571);
12
+ --color-red-400: oklch(70.4% 0.191 22.216);
13
+ --color-red-500: oklch(63.7% 0.237 25.331);
14
+ --color-red-600: oklch(57.7% 0.245 27.325);
15
+ --color-red-700: oklch(50.5% 0.213 27.518);
16
+ --color-red-800: oklch(44.4% 0.177 26.899);
17
+ --color-red-900: oklch(39.6% 0.141 25.723);
18
+ --color-red-950: oklch(25.8% 0.092 26.042);
19
+ --color-orange-50: oklch(98% 0.016 73.684);
20
+ --color-orange-100: oklch(95.4% 0.038 75.164);
21
+ --color-orange-200: oklch(90.1% 0.076 70.697);
22
+ --color-orange-300: oklch(83.7% 0.128 66.29);
23
+ --color-orange-400: oklch(75% 0.183 55.934);
24
+ --color-orange-500: oklch(70.5% 0.213 47.604);
25
+ --color-orange-600: oklch(64.6% 0.222 41.116);
26
+ --color-orange-700: oklch(55.3% 0.195 38.402);
27
+ --color-orange-800: oklch(47% 0.157 37.304);
28
+ --color-orange-900: oklch(40.8% 0.123 38.172);
29
+ --color-orange-950: oklch(26.6% 0.079 36.259);
30
+ --color-yellow-50: oklch(98.7% 0.026 102.212);
31
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
32
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
33
+ --color-yellow-300: oklch(90.5% 0.182 98.111);
34
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
35
+ --color-yellow-500: oklch(79.5% 0.184 86.047);
36
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
37
+ --color-yellow-700: oklch(55.4% 0.135 66.442);
38
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
39
+ --color-yellow-900: oklch(42.1% 0.095 57.708);
40
40
  --color-lime-200: oklch(93.8% 0.127 124.321);
41
41
  --color-lime-300: oklch(89.7% 0.196 126.665);
42
42
  --color-lime-400: oklch(84.1% 0.238 128.85);
43
43
  --color-lime-500: oklch(76.8% 0.233 130.85);
44
+ --color-lime-600: oklch(64.8% 0.2 131.684);
44
45
  --color-lime-800: oklch(45.3% 0.124 130.933);
45
- --color-green-50: #ECFDF5;
46
- --color-green-100: #D1FAE5;
47
- --color-green-200: #A7F3D0;
48
- --color-green-300: #6EE7B7;
49
- --color-green-400: #34D399;
50
- --color-green-500: #10B981;
51
- --color-green-600: #059669;
52
- --color-green-700: #047857;
53
- --color-green-800: #065F46;
54
- --color-green-900: #064E3B;
46
+ --color-green-50: oklch(98.2% 0.018 155.826);
47
+ --color-green-100: oklch(96.2% 0.044 156.743);
48
+ --color-green-200: oklch(92.5% 0.084 155.995);
49
+ --color-green-300: oklch(87.1% 0.15 154.449);
50
+ --color-green-400: oklch(79.2% 0.209 151.711);
51
+ --color-green-500: oklch(72.3% 0.219 149.579);
52
+ --color-green-600: oklch(62.7% 0.194 149.214);
53
+ --color-green-700: oklch(52.7% 0.154 150.069);
54
+ --color-green-800: oklch(44.8% 0.119 151.328);
55
+ --color-green-900: oklch(39.3% 0.095 152.535);
56
+ --color-green-950: oklch(26.6% 0.065 152.934);
57
+ --color-emerald-50: oklch(97.9% 0.021 166.113);
58
+ --color-emerald-100: oklch(95% 0.052 163.051);
59
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
60
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
55
61
  --color-emerald-600: oklch(59.6% 0.145 163.225);
56
- --color-teal-50: #F0FDFA;
57
- --color-teal-100: #CCFBF1;
58
- --color-teal-200: #99F6E4;
59
- --color-teal-300: #5EEAD4;
60
- --color-teal-400: #2DD4BF;
61
- --color-teal-500: #14B8A6;
62
- --color-teal-600: #0D9488;
63
- --color-teal-700: #0F766E;
64
- --color-teal-800: #115E59;
65
- --color-cyan-200: #A5F3FC;
66
- --color-cyan-300: #67E8F9;
67
- --color-cyan-400: #22D3EE;
68
- --color-cyan-500: #06B6D4;
69
- --color-cyan-600: #0891B2;
70
- --color-cyan-800: #155E75;
62
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
63
+ --color-emerald-800: oklch(43.2% 0.095 166.913);
64
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
65
+ --color-emerald-950: oklch(26.2% 0.051 172.552);
66
+ --color-teal-50: oklch(98.4% 0.014 180.72);
67
+ --color-teal-100: oklch(95.3% 0.051 180.801);
68
+ --color-teal-200: oklch(91% 0.096 180.426);
69
+ --color-teal-300: oklch(85.5% 0.138 181.071);
70
+ --color-teal-400: oklch(77.7% 0.152 181.912);
71
+ --color-teal-500: oklch(70.4% 0.14 182.503);
72
+ --color-teal-600: oklch(60% 0.118 184.704);
73
+ --color-teal-700: oklch(51.1% 0.096 186.391);
74
+ --color-teal-800: oklch(43.7% 0.078 188.216);
75
+ --color-cyan-50: oklch(98.4% 0.019 200.873);
76
+ --color-cyan-100: oklch(95.6% 0.045 203.388);
77
+ --color-cyan-200: oklch(91.7% 0.08 205.041);
78
+ --color-cyan-300: oklch(86.5% 0.127 207.078);
79
+ --color-cyan-400: oklch(78.9% 0.154 211.53);
80
+ --color-cyan-500: oklch(71.5% 0.143 215.221);
81
+ --color-cyan-600: oklch(60.9% 0.126 221.723);
82
+ --color-cyan-700: oklch(52% 0.105 223.128);
83
+ --color-cyan-800: oklch(45% 0.085 224.283);
84
+ --color-cyan-900: oklch(39.8% 0.07 227.392);
85
+ --color-cyan-950: oklch(30.2% 0.056 229.695);
71
86
  --color-sky-400: oklch(74.6% 0.16 232.661);
72
87
  --color-sky-500: oklch(68.5% 0.169 237.323);
73
- --color-blue-50: #EFF6FF;
74
- --color-blue-100: #DBEAFE;
75
- --color-blue-200: #BFDBFE;
76
- --color-blue-300: #93C5FD;
77
- --color-blue-400: #60A5FA;
78
- --color-blue-500: #3B82F6;
79
- --color-blue-600: #2563EB;
80
- --color-blue-700: #1D4ED8;
81
- --color-blue-800: #1E40AF;
82
- --color-blue-900: #1E3A8A;
83
- --color-indigo-50: #EEF2FF;
84
- --color-indigo-100: #E0E7FF;
85
- --color-indigo-200: #C7D2FE;
86
- --color-indigo-300: #A5B4FC;
87
- --color-indigo-400: #818CF8;
88
- --color-indigo-500: #6366F1;
89
- --color-indigo-600: #4F46E5;
90
- --color-indigo-700: #4338CA;
91
- --color-indigo-800: #3730A3;
92
- --color-indigo-900: #312E81;
93
- --color-purple-50: #F5F3FF;
94
- --color-purple-100: #EDE9FE;
95
- --color-purple-200: #DDD6FE;
96
- --color-purple-300: #C4B5FD;
97
- --color-purple-400: #A78BFA;
98
- --color-purple-500: #8B5CF6;
99
- --color-purple-600: #7C3AED;
100
- --color-purple-700: #6D28D9;
101
- --color-purple-800: #5B21B6;
102
- --color-purple-900: #4C1D95;
103
- --color-pink-50: #FDF2F8;
104
- --color-pink-100: #FCE7F3;
105
- --color-pink-200: #FBCFE8;
106
- --color-pink-300: #F9A8D4;
107
- --color-pink-400: #F472B6;
108
- --color-pink-500: #EC4899;
109
- --color-pink-600: #DB2777;
110
- --color-pink-700: #BE185D;
111
- --color-pink-800: #9D174D;
112
- --color-pink-900: #831843;
113
- --color-gray-50: #F9FAFB;
114
- --color-gray-100: #F3F4F6;
115
- --color-gray-200: #E5E7EB;
116
- --color-gray-300: #D1D5DB;
117
- --color-gray-400: #9CA3AF;
118
- --color-gray-500: #6B7280;
119
- --color-gray-600: #4B5563;
120
- --color-gray-700: #374151;
121
- --color-gray-800: #1F2937;
122
- --color-gray-900: #111827;
123
- --color-white: #ffffff;
88
+ --color-sky-600: oklch(58.8% 0.158 241.966);
89
+ --color-blue-50: oklch(97% 0.014 254.604);
90
+ --color-blue-100: oklch(93.2% 0.032 255.585);
91
+ --color-blue-200: oklch(88.2% 0.059 254.128);
92
+ --color-blue-300: oklch(80.9% 0.105 251.813);
93
+ --color-blue-400: oklch(70.7% 0.165 254.624);
94
+ --color-blue-500: oklch(62.3% 0.214 259.815);
95
+ --color-blue-600: oklch(54.6% 0.245 262.881);
96
+ --color-blue-700: oklch(48.8% 0.243 264.376);
97
+ --color-blue-800: oklch(42.4% 0.199 265.638);
98
+ --color-blue-900: oklch(37.9% 0.146 265.522);
99
+ --color-blue-950: oklch(28.2% 0.091 267.935);
100
+ --color-indigo-50: oklch(96.2% 0.018 272.314);
101
+ --color-indigo-100: oklch(93% 0.034 272.788);
102
+ --color-indigo-200: oklch(87% 0.065 274.039);
103
+ --color-indigo-300: oklch(78.5% 0.115 274.713);
104
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
105
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
106
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
107
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
108
+ --color-indigo-800: oklch(39.8% 0.195 277.366);
109
+ --color-indigo-900: oklch(35.9% 0.144 278.697);
110
+ --color-indigo-950: oklch(25.7% 0.09 281.288);
111
+ --color-purple-50: oklch(97.7% 0.014 308.299);
112
+ --color-purple-100: oklch(94.6% 0.033 307.174);
113
+ --color-purple-200: oklch(90.2% 0.063 306.703);
114
+ --color-purple-300: oklch(82.7% 0.119 306.383);
115
+ --color-purple-400: oklch(71.4% 0.203 305.504);
116
+ --color-purple-500: oklch(62.7% 0.265 303.9);
117
+ --color-purple-600: oklch(55.8% 0.288 302.321);
118
+ --color-purple-700: oklch(49.6% 0.265 301.924);
119
+ --color-purple-800: oklch(43.8% 0.218 303.724);
120
+ --color-purple-900: oklch(38.1% 0.176 304.987);
121
+ --color-fuchsia-500: oklch(66.7% 0.295 322.15);
122
+ --color-fuchsia-600: oklch(59.1% 0.293 322.896);
123
+ --color-pink-50: oklch(97.1% 0.014 343.198);
124
+ --color-pink-100: oklch(94.8% 0.028 342.258);
125
+ --color-pink-200: oklch(89.9% 0.061 343.231);
126
+ --color-pink-300: oklch(82.3% 0.12 346.018);
127
+ --color-pink-400: oklch(71.8% 0.202 349.761);
128
+ --color-pink-500: oklch(65.6% 0.241 354.308);
129
+ --color-pink-600: oklch(59.2% 0.249 0.584);
130
+ --color-pink-700: oklch(52.5% 0.223 3.958);
131
+ --color-pink-800: oklch(45.9% 0.187 3.815);
132
+ --color-pink-900: oklch(40.8% 0.153 2.432);
133
+ --color-pink-950: oklch(28.4% 0.109 3.907);
134
+ --color-rose-50: oklch(96.9% 0.015 12.422);
135
+ --color-rose-100: oklch(94.1% 0.03 12.58);
136
+ --color-rose-200: oklch(89.2% 0.058 10.001);
137
+ --color-rose-300: oklch(81% 0.117 11.638);
138
+ --color-rose-500: oklch(64.5% 0.246 16.439);
139
+ --color-rose-700: oklch(51.4% 0.222 16.935);
140
+ --color-rose-800: oklch(45.5% 0.188 13.697);
141
+ --color-rose-900: oklch(41% 0.159 10.272);
142
+ --color-rose-950: oklch(27.1% 0.105 12.094);
143
+ --color-slate-50: oklch(98.4% 0.003 247.858);
144
+ --color-slate-100: oklch(96.8% 0.007 247.896);
145
+ --color-slate-200: oklch(92.9% 0.013 255.508);
146
+ --color-slate-300: oklch(86.9% 0.022 252.894);
147
+ --color-slate-400: oklch(70.4% 0.04 256.788);
148
+ --color-slate-500: oklch(55.4% 0.046 257.417);
149
+ --color-slate-600: oklch(44.6% 0.043 257.281);
150
+ --color-slate-700: oklch(37.2% 0.044 257.287);
151
+ --color-slate-800: oklch(27.9% 0.041 260.031);
152
+ --color-slate-900: oklch(20.8% 0.042 265.755);
153
+ --color-slate-950: oklch(12.9% 0.042 264.695);
154
+ --color-gray-50: oklch(98.5% 0.002 247.839);
155
+ --color-gray-100: oklch(96.7% 0.003 264.542);
156
+ --color-gray-200: oklch(92.8% 0.006 264.531);
157
+ --color-gray-300: oklch(87.2% 0.01 258.338);
158
+ --color-gray-400: oklch(70.7% 0.022 261.325);
159
+ --color-gray-500: oklch(55.1% 0.027 264.364);
160
+ --color-gray-600: oklch(44.6% 0.03 256.802);
161
+ --color-gray-700: oklch(37.3% 0.034 259.733);
162
+ --color-gray-800: oklch(27.8% 0.033 256.848);
163
+ --color-gray-900: oklch(21% 0.034 264.665);
164
+ --color-gray-950: oklch(13% 0.028 261.692);
165
+ --color-zinc-50: oklch(98.5% 0 0);
166
+ --color-zinc-100: oklch(96.7% 0.001 286.375);
167
+ --color-zinc-200: oklch(92% 0.004 286.32);
168
+ --color-zinc-300: oklch(87.1% 0.006 286.286);
169
+ --color-zinc-400: oklch(70.5% 0.015 286.067);
170
+ --color-zinc-500: oklch(55.2% 0.016 285.938);
171
+ --color-zinc-600: oklch(44.2% 0.017 285.786);
172
+ --color-zinc-700: oklch(37% 0.013 285.805);
173
+ --color-zinc-800: oklch(27.4% 0.006 286.033);
174
+ --color-zinc-900: oklch(21% 0.006 285.885);
175
+ --color-zinc-950: oklch(14.1% 0.005 285.823);
176
+ --color-neutral-50: oklch(98.5% 0 0);
177
+ --color-neutral-100: oklch(97% 0 0);
178
+ --color-neutral-200: oklch(92.2% 0 0);
179
+ --color-neutral-300: oklch(87% 0 0);
180
+ --color-neutral-400: oklch(70.8% 0 0);
181
+ --color-neutral-500: oklch(55.6% 0 0);
182
+ --color-neutral-600: oklch(43.9% 0 0);
183
+ --color-neutral-700: oklch(37.1% 0 0);
184
+ --color-neutral-800: oklch(26.9% 0 0);
185
+ --color-neutral-900: oklch(20.5% 0 0);
186
+ --color-neutral-950: oklch(14.5% 0 0);
187
+ --color-stone-50: oklch(98.5% 0.001 106.423);
188
+ --color-stone-100: oklch(97% 0.001 106.424);
189
+ --color-stone-200: oklch(92.3% 0.003 48.717);
190
+ --color-stone-300: oklch(86.9% 0.005 56.366);
191
+ --color-stone-400: oklch(70.9% 0.01 56.259);
192
+ --color-stone-500: oklch(55.3% 0.013 58.071);
193
+ --color-stone-600: oklch(44.4% 0.011 73.639);
194
+ --color-stone-700: oklch(37.4% 0.01 67.558);
195
+ --color-stone-800: oklch(26.8% 0.007 34.298);
196
+ --color-stone-900: oklch(21.6% 0.006 56.043);
197
+ --color-stone-950: oklch(14.7% 0.004 49.25);
198
+ --color-white: #fff;
124
199
  --spacing: 0.25rem;
125
200
  --breakpoint-md: 48rem;
126
201
  --breakpoint-lg: 64rem;
127
202
  --breakpoint-xl: 80rem;
203
+ --breakpoint-2xl: 96rem;
128
204
  --container-2xs: 18rem;
129
205
  --container-xs: 20rem;
130
206
  --container-sm: 24rem;
@@ -169,8 +245,8 @@
169
245
  --font-weight-bold: 700;
170
246
  --font-weight-extrabold: 800;
171
247
  --font-weight-black: 900;
172
- --tracking-tighter: -0.05em;
173
- --tracking-tight: -0.025em;
248
+ --tracking-tighter: -0.8px;
249
+ --tracking-tight: -0.4px;
174
250
  --tracking-normal: 0em;
175
251
  --tracking-wide: 0.025em;
176
252
  --tracking-wider: 0.05em;
@@ -179,10 +255,10 @@
179
255
  --leading-normal: 1.5;
180
256
  --leading-relaxed: 1.625;
181
257
  --leading-loose: 2;
182
- --radius-xs: 0.125rem;
183
- --radius-sm: 0.25rem;
258
+ --radius-xs: 4px;
259
+ --radius-sm: 6px;
184
260
  --radius-md: 0.375rem;
185
- --radius-lg: 0.5rem;
261
+ --radius-lg: 16px;
186
262
  --radius-xl: 0.75rem;
187
263
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
188
264
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -194,6 +270,50 @@
194
270
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
195
271
  --default-font-family: var(--font-sans);
196
272
  --default-mono-font-family: var(--font-mono);
273
+ --radius: 8px;
274
+ --spacing-8xl: 90rem;
275
+ --leading-9: 36px;
276
+ --leading-6: 24px;
277
+ --leading-5: 20px;
278
+ --radius-base: 12px;
279
+ --color-body: var(--color-gray-600);
280
+ --color-body-subtle: var(--color-gray-500);
281
+ --color-heading: var(--color-gray-900);
282
+ --color-fg-brand: var(--color-blue-700);
283
+ --color-fg-danger: var(--color-rose-700);
284
+ --color-fg-danger-strong: var(--color-rose-900);
285
+ --color-fg-disabled: var(--color-gray-400);
286
+ --color-neutral-primary-soft: var(--color-white);
287
+ --color-neutral-primary: var(--color-white);
288
+ --color-neutral-primary-medium: var(--color-white);
289
+ --color-neutral-secondary-soft: var(--color-gray-50);
290
+ --color-neutral-secondary: var(--color-gray-50);
291
+ --color-neutral-secondary-medium: var(--color-gray-50);
292
+ --color-neutral-tertiary-soft: var(--color-gray-100);
293
+ --color-neutral-tertiary: var(--color-gray-100);
294
+ --color-neutral-tertiary-medium: var(--color-gray-100);
295
+ --color-neutral-quaternary: var(--color-gray-200);
296
+ --color-brand-soft: var(--color-blue-100);
297
+ --color-brand: var(--color-blue-700);
298
+ --color-brand-medium: var(--color-blue-200);
299
+ --color-brand-strong: var(--color-blue-800);
300
+ --color-success: var(--color-emerald-700);
301
+ --color-success-medium: var(--color-emerald-100);
302
+ --color-success-strong: var(--color-emerald-800);
303
+ --color-danger-soft: var(--color-rose-50);
304
+ --color-danger: var(--color-rose-700);
305
+ --color-danger-medium: var(--color-rose-100);
306
+ --color-danger-strong: var(--color-rose-800);
307
+ --color-warning: var(--color-orange-500);
308
+ --color-warning-medium: var(--color-orange-100);
309
+ --color-warning-strong: var(--color-orange-700);
310
+ --color-dark: var(--color-gray-800);
311
+ --color-dark-strong: var(--color-gray-900);
312
+ --color-light: var(--color-gray-100);
313
+ --color-default: var(--color-gray-200);
314
+ --color-default-medium: var(--color-gray-200);
315
+ --color-danger-subtle: var(--color-rose-200);
316
+ --color-dark-backdrop: var(--color-gray-950);
197
317
  }
198
318
  }
199
319
  @layer base {
@@ -354,6 +474,17 @@
354
474
  .visible {
355
475
  visibility: visible;
356
476
  }
477
+ .sr-only {
478
+ position: absolute;
479
+ width: 1px;
480
+ height: 1px;
481
+ padding: 0;
482
+ margin: -1px;
483
+ overflow: hidden;
484
+ clip-path: inset(50%);
485
+ white-space: nowrap;
486
+ border-width: 0;
487
+ }
357
488
  .datatable-wrapper {
358
489
  width: 100%;
359
490
  & .datatable-top {
@@ -369,91 +500,64 @@
369
500
  }
370
501
  }
371
502
  & .datatable-search .datatable-input {
372
- color: var(--color-gray-900);
503
+ color: var(--color-heading);
373
504
  font-size: 0.875rem;
374
- border: 1px solid var(--color-gray-300);
375
- border-radius: 0.5rem;
376
- background-color: var(--color-gray-50);
505
+ border: 1px solid var(--color-default);
506
+ border-radius: var(--radius-base);
507
+ background-color: var(--color-neutral-secondary-soft);
377
508
  min-width: 16rem;
378
509
  }
379
510
  & .datatable-input {
380
- color: var(--color-gray-900);
511
+ color: var(--color-heading);
381
512
  font-size: 0.875rem;
382
- border: 1px solid var(--color-gray-300);
383
- border-radius: 0.5rem;
384
- background-color: var(--color-gray-50);
513
+ border: 1px solid var(--color-default);
514
+ border-radius: var(--radius-base);
515
+ background-color: var(--color-neutral-secondary-soft);
385
516
  min-width: 16rem;
386
517
  }
387
- .dark & .datatable-search .datatable-input {
388
- color: white;
389
- background-color: var(--color-gray-800);
390
- border: 1px solid var(--color-gray-700);
391
- }
392
- .dark & .datatable-input {
393
- color: white;
394
- background-color: var(--color-gray-800);
395
- border: 1px solid var(--color-gray-700);
396
- }
397
518
  & thead th .datatable-input {
398
- background-color: white;
519
+ background-color: var(--color-neutral-primary);
399
520
  font-weight: 400;
400
- color: var(--color-gray-900);
521
+ color: var(--color-heading);
401
522
  padding-top: .35rem;
402
523
  padding-bottom: .35rem;
403
524
  min-width: 0;
404
525
  }
405
- .dark & thead th .datatable-input {
406
- background-color: var(--color-gray-700);
407
- border-color: var(--color-gray-600);
408
- color: white;
409
- }
410
526
  & .datatable-top .datatable-dropdown {
411
- color: var(--color-gray-500);
527
+ color: var(--color-body);
412
528
  font-size: 0.875rem;
413
529
  }
414
- .dark & .datatable-top .datatable-dropdown {
415
- color: var(--color-gray-400);
416
- }
417
530
  & .datatable-top .datatable-dropdown .datatable-selector {
418
- background-color: var(--color-gray-50);
419
- color: var(--color-gray-900);
531
+ background-color: var(--color-neutral-secondary-soft);
532
+ color: var(--color-heading);
420
533
  font-size: 0.875rem;
421
- border: 1px solid var(--color-gray-300);
422
- border-radius: 0.5rem;
534
+ border: 1px solid var(--color-default);
535
+ border-radius: var(--radius-base);
423
536
  margin-right: 0.25rem;
424
537
  min-width: 4rem;
425
538
  }
426
- .dark & .datatable-top .datatable-dropdown .datatable-selector {
427
- background-color: var(--color-gray-800);
428
- border: 1px solid var(--color-gray-700);
429
- color: white;
430
- }
431
539
  & .datatable-container thead tr.search-filtering-row th {
432
540
  padding-top: 0;
433
541
  }
434
542
  & .datatable-search .datatable-input:focus {
435
- border-color: var(--color-blue-600);
543
+ border-color: var(--color-brand);
436
544
  }
437
545
  & .datatable-container {
438
546
  overflow-x: auto;
547
+ border: 1px solid var(--color-default);
548
+ border-radius: var(--radius-base);
439
549
  }
440
550
  & .datatable-table {
441
551
  width: 100%;
442
552
  font-size: 0.875rem;
443
- color: var(--color-gray-500);
553
+ color: var(--color-body);
444
554
  text-align: left;
445
555
  }
446
- .dark & .datatable-table {
447
- color: var(--color-gray-400);
448
- }
449
556
  & .datatable-table thead {
450
557
  font-size: 0.75rem;
451
- color: var(--color-gray-500);
452
- background-color: var(--color-gray-50);
453
- }
454
- .dark & .datatable-table thead {
455
- color: var(--color-gray-400);
456
- background-color: var(--color-gray-800);
558
+ color: var(--color-body);
559
+ background-color: var(--color-neutral-secondary-medium);
560
+ border-bottom: 1px solid var(--color-default);
457
561
  }
458
562
  & .datatable-table thead th {
459
563
  white-space: nowrap;
@@ -486,34 +590,22 @@
486
590
  text-transform: uppercase;
487
591
  }
488
592
  & .datatable-table thead th .datatable-sorter:hover {
489
- color: var(--color-gray-900);
593
+ color: var(--color-heading);
490
594
  }
491
595
  & .datatable-table thead th.datatable-ascending .datatable-sorter {
492
- color: var(--color-gray-900);
596
+ color: var(--color-heading);
493
597
  }
494
598
  & .datatable-table thead th.datatable-descending .datatable-sorter {
495
- color: var(--color-gray-900);
496
- }
497
- .dark & .datatable-table thead th .datatable-sorter:hover {
498
- color: white;
499
- }
500
- .dark & .datatable-table thead th.datatable-ascending .datatable-sorter {
501
- color: white;
502
- }
503
- .dark & .datatable-table thead th.datatable-descending .datatable-sorter {
504
- color: white;
599
+ color: var(--color-heading);
505
600
  }
506
601
  & .datatable-table tbody tr.selected {
507
- background-color: var(--color-gray-100);
508
- }
509
- .dark & .datatable-table tbody tr.selected {
510
- background-color: var(--color-gray-700);
602
+ background-color: var(--color-neutral-secondary);
511
603
  }
512
604
  & .datatable-table tbody tr {
513
- border-bottom: 1px solid var(--color-gray-200);
605
+ border-bottom: 1px solid var(--color-default);
514
606
  }
515
- .dark & .datatable-table tbody tr {
516
- border-bottom: 1px solid var(--color-gray-700);
607
+ & .datatable-table tbody tr:last-child {
608
+ border-bottom: 0;
517
609
  }
518
610
  & .datatable-table .datatable-empty {
519
611
  text-align: center;
@@ -531,12 +623,9 @@
531
623
  }
532
624
  }
533
625
  & .datatable-bottom .datatable-info {
534
- color: var(--color-gray-500);
626
+ color: var(--color-body);
535
627
  font-size: 0.875rem;
536
628
  }
537
- .dark & .datatable-bottom .datatable-info {
538
- color: var(--color-gray-400);
539
- }
540
629
  & .datatable-bottom .datatable-pagination .datatable-pagination-list {
541
630
  display: flex;
542
631
  align-items: center;
@@ -546,19 +635,20 @@
546
635
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
547
636
  display: flex;
548
637
  align-items: center;
549
- color: var(--color-gray-500);
638
+ color: var(--color-body);
639
+ background-color: var(--color-neutral-secondary-medium);
550
640
  font-weight: 500;
551
641
  padding-left: 0.75rem;
552
642
  padding-right: 0.75rem;
553
643
  height: 2rem;
554
644
  font-size: 0.875rem;
555
- border-top: 1px solid var(--color-gray-300);
556
- border-bottom: 1px solid var(--color-gray-300);
557
- border-right: 1px solid var(--color-gray-300);
645
+ border-top: 1px solid var(--color-default);
646
+ border-bottom: 1px solid var(--color-default);
647
+ border-right: 1px solid var(--color-default);
558
648
  }
559
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
560
- color: var(--color-gray-400);
561
- border-color: var(--color-gray-700);
649
+ & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
650
+ color: var(--color-heading);
651
+ background-color: var(--color-neutral-tertiary-medium);
562
652
  }
563
653
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type {
564
654
  position: relative;
@@ -566,74 +656,23 @@
566
656
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type {
567
657
  position: relative;
568
658
  }
569
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
570
- color: transparent;
571
- }
572
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
573
- color: transparent;
574
- }
575
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
576
- color: transparent;
577
- }
578
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
579
- color: transparent;
580
- }
581
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
582
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
583
- position: absolute;
584
- top: 50%;
585
- left: 50%;
586
- width: 1.3rem;
587
- height: 1.3rem;
588
- transform: translate(-50%, -50%);
589
- }
590
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
591
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
592
- }
593
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
594
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
595
- }
596
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
597
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
598
- }
599
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
600
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
601
- position: absolute;
602
- top: 50%;
603
- right: 50%;
604
- width: 1.3rem;
605
- height: 1.3rem;
606
- transform: translate(50%, -50%);
607
- }
608
- & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
609
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
610
- }
611
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
612
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
613
- }
614
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
615
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
659
+ & .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
660
+ color: var(--color-fg-brand);
661
+ background-color: var(--color-neutral-tertiary-medium);
616
662
  }
617
663
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
618
- border-top-left-radius: 0.5rem;
619
- border-bottom-left-radius: 0.5rem;
620
- border-left: 1px solid var(--color-gray-300);
621
- }
622
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
623
- border-left: 1px solid var(--color-gray-700);
664
+ border-top-left-radius: var(--radius-base);
665
+ border-bottom-left-radius: var(--radius-base);
666
+ border-left: 1px solid var(--color-default);
624
667
  }
625
668
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
626
- border-top-right-radius: 0.5rem;
627
- border-bottom-right-radius: 0.5rem;
669
+ border-top-right-radius: var(--radius-base);
670
+ border-bottom-right-radius: var(--radius-base);
628
671
  border-left: 0;
629
672
  }
630
673
  & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
631
- background-color: var(--color-gray-50);
632
- color: var(--color-gray-700);
633
- }
634
- .dark & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
635
- background-color: var(--color-gray-700);
636
- color: white;
674
+ background-color: var(--color-neutral-secondary-medium);
675
+ color: var(--color-body);
637
676
  }
638
677
  }
639
678
  .datatable-bottom {
@@ -650,12 +689,9 @@
650
689
  }
651
690
  }
652
691
  .datatable-wrapper & .datatable-info {
653
- color: var(--color-gray-500);
692
+ color: var(--color-body);
654
693
  font-size: 0.875rem;
655
694
  }
656
- .dark .datatable-wrapper & .datatable-info {
657
- color: var(--color-gray-400);
658
- }
659
695
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list {
660
696
  display: flex;
661
697
  align-items: center;
@@ -665,19 +701,20 @@
665
701
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link {
666
702
  display: flex;
667
703
  align-items: center;
668
- color: var(--color-gray-500);
704
+ color: var(--color-body);
705
+ background-color: var(--color-neutral-secondary-medium);
669
706
  font-weight: 500;
670
707
  padding-left: 0.75rem;
671
708
  padding-right: 0.75rem;
672
709
  height: 2rem;
673
710
  font-size: 0.875rem;
674
- border-top: 1px solid var(--color-gray-300);
675
- border-bottom: 1px solid var(--color-gray-300);
676
- border-right: 1px solid var(--color-gray-300);
711
+ border-top: 1px solid var(--color-default);
712
+ border-bottom: 1px solid var(--color-default);
713
+ border-right: 1px solid var(--color-default);
677
714
  }
678
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link {
679
- color: var(--color-gray-400);
680
- border-color: var(--color-gray-700);
715
+ .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
716
+ color: var(--color-heading);
717
+ background-color: var(--color-neutral-tertiary-medium);
681
718
  }
682
719
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type {
683
720
  position: relative;
@@ -685,74 +722,23 @@
685
722
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type {
686
723
  position: relative;
687
724
  }
688
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
689
- color: transparent;
690
- }
691
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
692
- color: transparent;
693
- }
694
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
695
- color: transparent;
696
- }
697
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
698
- color: transparent;
699
- }
700
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
701
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
702
- position: absolute;
703
- top: 50%;
704
- left: 50%;
705
- width: 1.3rem;
706
- height: 1.3rem;
707
- transform: translate(-50%, -50%);
708
- }
709
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
710
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
711
- }
712
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
713
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
714
- }
715
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
716
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
717
- }
718
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
719
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
720
- position: absolute;
721
- top: 50%;
722
- right: 50%;
723
- width: 1.3rem;
724
- height: 1.3rem;
725
- transform: translate(50%, -50%);
726
- }
727
- .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
728
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
729
- }
730
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
731
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
732
- }
733
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
734
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
725
+ .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
726
+ color: var(--color-fg-brand);
727
+ background-color: var(--color-neutral-tertiary-medium);
735
728
  }
736
729
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
737
- border-top-left-radius: 0.5rem;
738
- border-bottom-left-radius: 0.5rem;
739
- border-left: 1px solid var(--color-gray-300);
740
- }
741
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
742
- border-left: 1px solid var(--color-gray-700);
730
+ border-top-left-radius: var(--radius-base);
731
+ border-bottom-left-radius: var(--radius-base);
732
+ border-left: 1px solid var(--color-default);
743
733
  }
744
734
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
745
- border-top-right-radius: 0.5rem;
746
- border-bottom-right-radius: 0.5rem;
735
+ border-top-right-radius: var(--radius-base);
736
+ border-bottom-right-radius: var(--radius-base);
747
737
  border-left: 0;
748
738
  }
749
739
  .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover {
750
- background-color: var(--color-gray-50);
751
- color: var(--color-gray-700);
752
- }
753
- .dark .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover {
754
- background-color: var(--color-gray-700);
755
- color: white;
740
+ background-color: var(--color-neutral-secondary-medium);
741
+ color: var(--color-body);
756
742
  }
757
743
  }
758
744
  .datatable-pagination {
@@ -765,19 +751,20 @@
765
751
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link {
766
752
  display: flex;
767
753
  align-items: center;
768
- color: var(--color-gray-500);
754
+ color: var(--color-body);
755
+ background-color: var(--color-neutral-secondary-medium);
769
756
  font-weight: 500;
770
757
  padding-left: 0.75rem;
771
758
  padding-right: 0.75rem;
772
759
  height: 2rem;
773
760
  font-size: 0.875rem;
774
- border-top: 1px solid var(--color-gray-300);
775
- border-bottom: 1px solid var(--color-gray-300);
776
- border-right: 1px solid var(--color-gray-300);
761
+ border-top: 1px solid var(--color-default);
762
+ border-bottom: 1px solid var(--color-default);
763
+ border-right: 1px solid var(--color-default);
777
764
  }
778
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link {
779
- color: var(--color-gray-400);
780
- border-color: var(--color-gray-700);
765
+ .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:hover .datatable-pagination-list-item-link {
766
+ color: var(--color-heading);
767
+ background-color: var(--color-neutral-tertiary-medium);
781
768
  }
782
769
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type {
783
770
  position: relative;
@@ -785,174 +772,24 @@
785
772
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type {
786
773
  position: relative;
787
774
  }
788
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
789
- color: transparent;
790
- }
791
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
792
- color: transparent;
793
- }
794
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
795
- color: transparent;
796
- }
797
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
798
- color: transparent;
799
- }
800
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
801
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
802
- position: absolute;
803
- top: 50%;
804
- left: 50%;
805
- width: 1.3rem;
806
- height: 1.3rem;
807
- transform: translate(-50%, -50%);
808
- }
809
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
810
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
811
- }
812
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
813
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
814
- }
815
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
816
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
817
- }
818
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
819
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
820
- position: absolute;
821
- top: 50%;
822
- right: 50%;
823
- width: 1.3rem;
824
- height: 1.3rem;
825
- transform: translate(50%, -50%);
826
- }
827
- .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
828
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
829
- }
830
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
831
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
832
- }
833
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
834
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
775
+ .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link {
776
+ color: var(--color-fg-brand);
777
+ background-color: var(--color-neutral-tertiary-medium);
835
778
  }
836
779
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
837
- border-top-left-radius: 0.5rem;
838
- border-bottom-left-radius: 0.5rem;
839
- border-left: 1px solid var(--color-gray-300);
840
- }
841
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
842
- border-left: 1px solid var(--color-gray-700);
780
+ border-top-left-radius: var(--radius-base);
781
+ border-bottom-left-radius: var(--radius-base);
782
+ border-left: 1px solid var(--color-default);
843
783
  }
844
784
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
845
- border-top-right-radius: 0.5rem;
846
- border-bottom-right-radius: 0.5rem;
785
+ border-top-right-radius: var(--radius-base);
786
+ border-bottom-right-radius: var(--radius-base);
847
787
  border-left: 0;
848
788
  }
849
789
  .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover {
850
- background-color: var(--color-gray-50);
851
- color: var(--color-gray-700);
852
- }
853
- .dark .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover {
854
- background-color: var(--color-gray-700);
855
- color: white;
856
- }
857
- }
858
- .datatable-pagination-list-item-link {
859
- .datatable-wrapper .datatable-bottom .datatable-pagination & {
860
- display: flex;
861
- align-items: center;
862
- color: var(--color-gray-500);
863
- font-weight: 500;
864
- padding-left: 0.75rem;
865
- padding-right: 0.75rem;
866
- height: 2rem;
867
- font-size: 0.875rem;
868
- border-top: 1px solid var(--color-gray-300);
869
- border-bottom: 1px solid var(--color-gray-300);
870
- border-right: 1px solid var(--color-gray-300);
871
- }
872
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination & {
873
- color: var(--color-gray-400);
874
- border-color: var(--color-gray-700);
875
- }
876
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
877
- color: transparent;
878
- }
879
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
880
- color: transparent;
881
- }
882
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
883
- color: transparent;
884
- }
885
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
886
- color: transparent;
887
- }
888
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &::after {
889
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
890
- position: absolute;
891
- top: 50%;
892
- left: 50%;
893
- width: 1.3rem;
894
- height: 1.3rem;
895
- transform: translate(-50%, -50%);
896
- }
897
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &:hover::after {
898
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
899
- }
900
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &::after {
901
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
902
- }
903
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type &:hover::after {
904
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
905
- }
906
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &::after {
907
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
908
- position: absolute;
909
- top: 50%;
910
- right: 50%;
911
- width: 1.3rem;
912
- height: 1.3rem;
913
- transform: translate(50%, -50%);
914
- }
915
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &:hover::after {
916
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
790
+ background-color: var(--color-neutral-secondary-medium);
791
+ color: var(--color-body);
917
792
  }
918
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &::after {
919
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
920
- }
921
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type &:hover::after {
922
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
923
- }
924
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
925
- border-top-left-radius: 0.5rem;
926
- border-bottom-left-radius: 0.5rem;
927
- border-left: 1px solid var(--color-gray-300);
928
- }
929
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
930
- border-left: 1px solid var(--color-gray-700);
931
- }
932
- .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
933
- border-top-right-radius: 0.5rem;
934
- border-bottom-right-radius: 0.5rem;
935
- border-left: 0;
936
- }
937
- .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
938
- background-color: var(--color-gray-50);
939
- color: var(--color-gray-700);
940
- }
941
- .dark .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
942
- background-color: var(--color-gray-700);
943
- color: white;
944
- }
945
- }
946
- .sr-only {
947
- position: absolute;
948
- width: 1px;
949
- height: 1px;
950
- padding: 0;
951
- margin: -1px;
952
- overflow: hidden;
953
- clip-path: inset(50%);
954
- white-space: nowrap;
955
- border-width: 0;
956
793
  }
957
794
  .absolute {
958
795
  position: absolute;
@@ -1026,21 +863,12 @@
1026
863
  max-width: 96rem;
1027
864
  }
1028
865
  }
1029
- .-mx-1\.5 {
1030
- margin-inline: calc(var(--spacing) * -1.5);
1031
- }
1032
866
  .mx-0 {
1033
867
  margin-inline: calc(var(--spacing) * 0);
1034
868
  }
1035
- .mx-1 {
1036
- margin-inline: calc(var(--spacing) * 1);
1037
- }
1038
869
  .mx-4 {
1039
870
  margin-inline: calc(var(--spacing) * 4);
1040
871
  }
1041
- .-my-1\.5 {
1042
- margin-block: calc(var(--spacing) * -1.5);
1043
- }
1044
872
  .my-4 {
1045
873
  margin-block: calc(var(--spacing) * 4);
1046
874
  }
@@ -1050,12 +878,12 @@
1050
878
  .my-10 {
1051
879
  margin-block: calc(var(--spacing) * 10);
1052
880
  }
1053
- .ms-0 {
1054
- margin-inline-start: calc(var(--spacing) * 0);
1055
- }
1056
881
  .ms-1 {
1057
882
  margin-inline-start: calc(var(--spacing) * 1);
1058
883
  }
884
+ .ms-1\.5 {
885
+ margin-inline-start: calc(var(--spacing) * 1.5);
886
+ }
1059
887
  .ms-2 {
1060
888
  margin-inline-start: calc(var(--spacing) * 2);
1061
889
  }
@@ -1065,6 +893,9 @@
1065
893
  .ms-auto {
1066
894
  margin-inline-start: auto;
1067
895
  }
896
+ .-me-0\.5 {
897
+ margin-inline-end: calc(var(--spacing) * -0.5);
898
+ }
1068
899
  .me-2 {
1069
900
  margin-inline-end: calc(var(--spacing) * 2);
1070
901
  }
@@ -1077,18 +908,21 @@
1077
908
  .mt-2 {
1078
909
  margin-top: calc(var(--spacing) * 2);
1079
910
  }
911
+ .mt-2\.5 {
912
+ margin-top: calc(var(--spacing) * 2.5);
913
+ }
1080
914
  .apexcharts-canvas {
1081
915
  & .apexcharts-tooltip {
1082
- background-color: white !important;
1083
- color: var(--color-gray-700) !important;
916
+ background-color: primary !important;
917
+ color: var(--color-body) !important;
1084
918
  border: 0 !important;
1085
- border-radius: 0.25rem !important;
919
+ border-radius: var(--radius-base) !important;
1086
920
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1087
921
  }
1088
922
  .dark & .apexcharts-tooltip {
1089
- background-color: var(--color-gray-700) !important;
1090
- color: var(--color-gray-400) !important;
1091
- border-color: transparent !important;
923
+ background-color: var(--color-neutral-secondary-medium) !important;
924
+ color: var(--color-body) !important;
925
+ border-color: var(--color-default) !important;
1092
926
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1093
927
  }
1094
928
  & .apexcharts-tooltip .apexcharts-tooltip-title {
@@ -1097,41 +931,41 @@
1097
931
  padding-right: 0.75rem !important;
1098
932
  padding-left: 0.75rem !important;
1099
933
  margin-bottom: 0.75rem !important;
1100
- background-color: var(--color-gray-100) !important;
1101
- border-bottom-color: var(--color-gray-200) !important;
934
+ background-color: var(--color-neutral-tertiary-medium) !important;
935
+ border-color: var(--color-light) !important;
1102
936
  font-size: 0.875rem !important;
1103
- font-weight: 400 !important;
1104
- color: var(--color-gray-500) !important;
937
+ font-weight: 600 !important;
938
+ color: var(--color-heading) !important;
1105
939
  }
1106
940
  .dark & .apexcharts-tooltip .apexcharts-tooltip-title {
1107
- background-color: var(--color-gray-600) !important;
1108
- border-color: var(--color-gray-500) !important;
1109
- color: var(--color-gray-500) !important;
941
+ background-color: var(--color-neutral-tertiary-medium) !important;
942
+ border-color: var(--color-light) !important;
943
+ color: var(--color-heading) !important;
1110
944
  }
1111
945
  & .apexcharts-xaxistooltip {
1112
- color: var(--color-gray-500) !important;
946
+ color: var(--color-body) !important;
1113
947
  padding-top: 0.5rem !important;
1114
948
  padding-bottom: 0.5rem !important;
1115
949
  padding-right: 0.75rem !important;
1116
950
  padding-left: 0.75rem !important;
1117
951
  border-color: transparent !important;
1118
952
  background-color: white !important;
1119
- border-radius: 0.25rem !important;
953
+ border-radius: 8px !important;
1120
954
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1121
955
  }
1122
956
  .dark & .apexcharts-xaxistooltip {
1123
- color: var(--color-gray-400) !important;
1124
- background-color: var(--color-gray-700) !important;
957
+ color: var(--color-body) !important;
958
+ background-color: var(--color-neutral-secondary-medium) !important;
1125
959
  }
1126
960
  & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1127
- color: var(--color-gray-500) !important;
961
+ color: var(--color-body) !important;
1128
962
  font-size: 0.875rem !important;
1129
963
  }
1130
964
  .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1131
- color: var(--color-gray-400) !important;
965
+ color: var(--color-body) !important;
1132
966
  }
1133
967
  & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
1134
- color: var(--color-gray-900);
968
+ color: var(--color-heading);
1135
969
  font-size: 0.875rem !important;
1136
970
  }
1137
971
  .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
@@ -1142,10 +976,10 @@
1142
976
  font-size: 0.875rem !important;
1143
977
  }
1144
978
  & .apexcharts-xaxistooltip:after {
1145
- border-bottom-color: white !important;
979
+ border-bottom-color: var(--color-neutral-primary-medium) !important;
1146
980
  }
1147
981
  & .apexcharts-xaxistooltip:before {
1148
- border-bottom-color: white !important;
982
+ border-bottom-color: var(--color-neutral-primary-medium) !important;
1149
983
  }
1150
984
  & .apexcharts-xaxistooltip:after {
1151
985
  border-width: 8px !important;
@@ -1155,12 +989,6 @@
1155
989
  border-width: 10px !important;
1156
990
  margin-left: -10px !important;
1157
991
  }
1158
- .dark & .apexcharts-xaxistooltip:after {
1159
- border-bottom-color: var(--color-gray-700) !important;
1160
- }
1161
- .dark & .apexcharts-xaxistooltip:before {
1162
- border-bottom-color: var(--color-gray-700) !important;
1163
- }
1164
992
  & .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group {
1165
993
  padding: 0 !important;
1166
994
  }
@@ -1168,12 +996,12 @@
1168
996
  padding-left: 0.75rem !important;
1169
997
  padding-right: 0.75rem !important;
1170
998
  padding-bottom: 0.75rem !important;
1171
- background-color: white !important;
1172
- color: var(--color-gray-500) !important;
999
+ background-color: var(--color-neutral-primary-medium) !important;
1000
+ color: var(--color-body) !important;
1173
1001
  }
1174
1002
  .dark & .apexcharts-tooltip-series-group.apexcharts-active {
1175
- background-color: var(--color-gray-700) !important;
1176
- color: var(--color-gray-400) !important;
1003
+ background-color: var(--color-neutral-secondary-medium) !important;
1004
+ color: var(--color-body) !important;
1177
1005
  }
1178
1006
  & .apexcharts-tooltip-series-group.apexcharts-active:first-of-type {
1179
1007
  padding-top: 0.75rem !important;
@@ -1185,19 +1013,19 @@
1185
1013
  font-size: 0.75rem !important;
1186
1014
  font-weight: 500 !important;
1187
1015
  padding-left: 1.25rem !important;
1188
- color: var(--color-gray-500) !important;
1016
+ color: var(--color-body) !important;
1189
1017
  }
1190
1018
  :is([dir=rtl]) & .apexcharts-legend-text {
1191
1019
  padding-right: 0.5rem !important;
1192
1020
  }
1193
1021
  & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1194
- color: var(--color-gray-900) !important;
1022
+ color: var(--color-heading) !important;
1195
1023
  }
1196
1024
  .dark & .apexcharts-legend-text {
1197
- color: var(--color-gray-400) !important;
1025
+ color: var(--color-body) !important;
1198
1026
  }
1199
1027
  .dark & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1200
- color: white !important;
1028
+ color: heading !important;
1201
1029
  }
1202
1030
  & .apexcharts-legend-series {
1203
1031
  margin-left: 0.5rem !important;
@@ -1210,12 +1038,12 @@
1210
1038
  fill: white !important;
1211
1039
  }
1212
1040
  & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1213
- fill: var(--color-gray-500) !important;
1041
+ fill: var(--color-body) !important;
1214
1042
  font-size: 1rem,[object Object] !important;
1215
1043
  font-weight: 400 !important;
1216
1044
  }
1217
1045
  .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1218
- fill: var(--color-gray-400) !important;
1046
+ fill: var(--color-body) !important;
1219
1047
  }
1220
1048
  & .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label {
1221
1049
  font-size: 0.75rem,[object Object] !important;
@@ -1235,16 +1063,16 @@
1235
1063
  }
1236
1064
  .apexcharts-tooltip {
1237
1065
  .apexcharts-canvas & {
1238
- background-color: white !important;
1239
- color: var(--color-gray-700) !important;
1066
+ background-color: primary !important;
1067
+ color: var(--color-body) !important;
1240
1068
  border: 0 !important;
1241
- border-radius: 0.25rem !important;
1069
+ border-radius: var(--radius-base) !important;
1242
1070
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1243
1071
  }
1244
1072
  .dark .apexcharts-canvas & {
1245
- background-color: var(--color-gray-700) !important;
1246
- color: var(--color-gray-400) !important;
1247
- border-color: transparent !important;
1073
+ background-color: var(--color-neutral-secondary-medium) !important;
1074
+ color: var(--color-body) !important;
1075
+ border-color: var(--color-default) !important;
1248
1076
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1249
1077
  }
1250
1078
  .apexcharts-canvas & .apexcharts-tooltip-title {
@@ -1253,26 +1081,26 @@
1253
1081
  padding-right: 0.75rem !important;
1254
1082
  padding-left: 0.75rem !important;
1255
1083
  margin-bottom: 0.75rem !important;
1256
- background-color: var(--color-gray-100) !important;
1257
- border-bottom-color: var(--color-gray-200) !important;
1084
+ background-color: var(--color-neutral-tertiary-medium) !important;
1085
+ border-color: var(--color-light) !important;
1258
1086
  font-size: 0.875rem !important;
1259
- font-weight: 400 !important;
1260
- color: var(--color-gray-500) !important;
1087
+ font-weight: 600 !important;
1088
+ color: var(--color-heading) !important;
1261
1089
  }
1262
1090
  .dark .apexcharts-canvas & .apexcharts-tooltip-title {
1263
- background-color: var(--color-gray-600) !important;
1264
- border-color: var(--color-gray-500) !important;
1265
- color: var(--color-gray-500) !important;
1091
+ background-color: var(--color-neutral-tertiary-medium) !important;
1092
+ border-color: var(--color-light) !important;
1093
+ color: var(--color-heading) !important;
1266
1094
  }
1267
1095
  .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1268
- color: var(--color-gray-500) !important;
1096
+ color: var(--color-body) !important;
1269
1097
  font-size: 0.875rem !important;
1270
1098
  }
1271
1099
  .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-label {
1272
- color: var(--color-gray-400) !important;
1100
+ color: var(--color-body) !important;
1273
1101
  }
1274
1102
  .apexcharts-canvas & .apexcharts-tooltip-text-y-value {
1275
- color: var(--color-gray-900);
1103
+ color: var(--color-heading);
1276
1104
  font-size: 0.875rem !important;
1277
1105
  }
1278
1106
  :is([dir=rtl]) & .apexcharts-tooltip-marker {
@@ -1297,26 +1125,18 @@
1297
1125
  }
1298
1126
  }
1299
1127
  .datatable-wrapper & .datatable-dropdown {
1300
- color: var(--color-gray-500);
1128
+ color: var(--color-body);
1301
1129
  font-size: 0.875rem;
1302
1130
  }
1303
- .dark .datatable-wrapper & .datatable-dropdown {
1304
- color: var(--color-gray-400);
1305
- }
1306
1131
  .datatable-wrapper & .datatable-dropdown .datatable-selector {
1307
- background-color: var(--color-gray-50);
1308
- color: var(--color-gray-900);
1132
+ background-color: var(--color-neutral-secondary-soft);
1133
+ color: var(--color-heading);
1309
1134
  font-size: 0.875rem;
1310
- border: 1px solid var(--color-gray-300);
1311
- border-radius: 0.5rem;
1135
+ border: 1px solid var(--color-default);
1136
+ border-radius: var(--radius-base);
1312
1137
  margin-right: 0.25rem;
1313
1138
  min-width: 4rem;
1314
1139
  }
1315
- .dark .datatable-wrapper & .datatable-dropdown .datatable-selector {
1316
- background-color: var(--color-gray-800);
1317
- border: 1px solid var(--color-gray-700);
1318
- color: white;
1319
- }
1320
1140
  }
1321
1141
  .apexcharts-tooltip-marker {
1322
1142
  :is([dir=rtl]) .apexcharts-tooltip & {
@@ -1326,42 +1146,29 @@
1326
1146
  }
1327
1147
  .datatable-dropdown {
1328
1148
  .datatable-wrapper .datatable-top & {
1329
- color: var(--color-gray-500);
1149
+ color: var(--color-body);
1330
1150
  font-size: 0.875rem;
1331
1151
  }
1332
- .dark .datatable-wrapper .datatable-top & {
1333
- color: var(--color-gray-400);
1334
- }
1335
1152
  .datatable-wrapper .datatable-top & .datatable-selector {
1336
- background-color: var(--color-gray-50);
1337
- color: var(--color-gray-900);
1153
+ background-color: var(--color-neutral-secondary-soft);
1154
+ color: var(--color-heading);
1338
1155
  font-size: 0.875rem;
1339
- border: 1px solid var(--color-gray-300);
1340
- border-radius: 0.5rem;
1156
+ border: 1px solid var(--color-default);
1157
+ border-radius: var(--radius-base);
1341
1158
  margin-right: 0.25rem;
1342
1159
  min-width: 4rem;
1343
1160
  }
1344
- .dark .datatable-wrapper .datatable-top & .datatable-selector {
1345
- background-color: var(--color-gray-800);
1346
- border: 1px solid var(--color-gray-700);
1347
- color: white;
1348
- }
1349
1161
  }
1350
1162
  .datatable-selector {
1351
1163
  .datatable-wrapper .datatable-top .datatable-dropdown & {
1352
- background-color: var(--color-gray-50);
1353
- color: var(--color-gray-900);
1164
+ background-color: var(--color-neutral-secondary-soft);
1165
+ color: var(--color-heading);
1354
1166
  font-size: 0.875rem;
1355
- border: 1px solid var(--color-gray-300);
1356
- border-radius: 0.5rem;
1167
+ border: 1px solid var(--color-default);
1168
+ border-radius: var(--radius-base);
1357
1169
  margin-right: 0.25rem;
1358
1170
  min-width: 4rem;
1359
1171
  }
1360
- .dark .datatable-wrapper .datatable-top .datatable-dropdown & {
1361
- background-color: var(--color-gray-800);
1362
- border: 1px solid var(--color-gray-700);
1363
- color: white;
1364
- }
1365
1172
  }
1366
1173
  .apexcharts-tooltip-title {
1367
1174
  .apexcharts-canvas .apexcharts-tooltip & {
@@ -1370,16 +1177,16 @@
1370
1177
  padding-right: 0.75rem !important;
1371
1178
  padding-left: 0.75rem !important;
1372
1179
  margin-bottom: 0.75rem !important;
1373
- background-color: var(--color-gray-100) !important;
1374
- border-bottom-color: var(--color-gray-200) !important;
1180
+ background-color: var(--color-neutral-tertiary-medium) !important;
1181
+ border-color: var(--color-light) !important;
1375
1182
  font-size: 0.875rem !important;
1376
- font-weight: 400 !important;
1377
- color: var(--color-gray-500) !important;
1183
+ font-weight: 600 !important;
1184
+ color: var(--color-heading) !important;
1378
1185
  }
1379
1186
  .dark .apexcharts-canvas .apexcharts-tooltip & {
1380
- background-color: var(--color-gray-600) !important;
1381
- border-color: var(--color-gray-500) !important;
1382
- color: var(--color-gray-500) !important;
1187
+ background-color: var(--color-neutral-tertiary-medium) !important;
1188
+ border-color: var(--color-light) !important;
1189
+ color: var(--color-heading) !important;
1383
1190
  }
1384
1191
  }
1385
1192
  .mb-1 {
@@ -1388,6 +1195,9 @@
1388
1195
  .mb-2 {
1389
1196
  margin-bottom: calc(var(--spacing) * 2);
1390
1197
  }
1198
+ .mb-2\.5 {
1199
+ margin-bottom: calc(var(--spacing) * 2.5);
1200
+ }
1391
1201
  .mb-3 {
1392
1202
  margin-bottom: calc(var(--spacing) * 3);
1393
1203
  }
@@ -1396,25 +1206,25 @@
1396
1206
  }
1397
1207
  .apexcharts-xaxistooltip {
1398
1208
  .apexcharts-canvas & {
1399
- color: var(--color-gray-500) !important;
1209
+ color: var(--color-body) !important;
1400
1210
  padding-top: 0.5rem !important;
1401
1211
  padding-bottom: 0.5rem !important;
1402
1212
  padding-right: 0.75rem !important;
1403
1213
  padding-left: 0.75rem !important;
1404
1214
  border-color: transparent !important;
1405
1215
  background-color: white !important;
1406
- border-radius: 0.25rem !important;
1216
+ border-radius: 8px !important;
1407
1217
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1408
1218
  }
1409
1219
  .dark .apexcharts-canvas & {
1410
- color: var(--color-gray-400) !important;
1411
- background-color: var(--color-gray-700) !important;
1220
+ color: var(--color-body) !important;
1221
+ background-color: var(--color-neutral-secondary-medium) !important;
1412
1222
  }
1413
1223
  .apexcharts-canvas &:after {
1414
- border-bottom-color: white !important;
1224
+ border-bottom-color: var(--color-neutral-primary-medium) !important;
1415
1225
  }
1416
1226
  .apexcharts-canvas &:before {
1417
- border-bottom-color: white !important;
1227
+ border-bottom-color: var(--color-neutral-primary-medium) !important;
1418
1228
  }
1419
1229
  .apexcharts-canvas &:after {
1420
1230
  border-width: 8px !important;
@@ -1424,16 +1234,51 @@
1424
1234
  border-width: 10px !important;
1425
1235
  margin-left: -10px !important;
1426
1236
  }
1427
- .dark .apexcharts-canvas &:after {
1428
- border-bottom-color: var(--color-gray-700) !important;
1429
- }
1430
- .dark .apexcharts-canvas &:before {
1431
- border-bottom-color: var(--color-gray-700) !important;
1432
- }
1433
1237
  }
1434
1238
  .ml-auto {
1435
1239
  margin-left: auto;
1436
1240
  }
1241
+ .box-border {
1242
+ box-sizing: border-box;
1243
+ }
1244
+ .datatable-pagination-list-item-link {
1245
+ .datatable-wrapper .datatable-bottom .datatable-pagination & {
1246
+ display: flex;
1247
+ align-items: center;
1248
+ color: var(--color-body);
1249
+ background-color: var(--color-neutral-secondary-medium);
1250
+ font-weight: 500;
1251
+ padding-left: 0.75rem;
1252
+ padding-right: 0.75rem;
1253
+ height: 2rem;
1254
+ font-size: 0.875rem;
1255
+ border-top: 1px solid var(--color-default);
1256
+ border-bottom: 1px solid var(--color-default);
1257
+ border-right: 1px solid var(--color-default);
1258
+ }
1259
+ .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover & {
1260
+ color: var(--color-heading);
1261
+ background-color: var(--color-neutral-tertiary-medium);
1262
+ }
1263
+ .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active & {
1264
+ color: var(--color-fg-brand);
1265
+ background-color: var(--color-neutral-tertiary-medium);
1266
+ }
1267
+ .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & {
1268
+ border-top-left-radius: var(--radius-base);
1269
+ border-bottom-left-radius: var(--radius-base);
1270
+ border-left: 1px solid var(--color-default);
1271
+ }
1272
+ .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & {
1273
+ border-top-right-radius: var(--radius-base);
1274
+ border-bottom-right-radius: var(--radius-base);
1275
+ border-left: 0;
1276
+ }
1277
+ .datatable-wrapper .datatable-bottom .datatable-pagination &:hover {
1278
+ background-color: var(--color-neutral-secondary-medium);
1279
+ color: var(--color-body);
1280
+ }
1281
+ }
1437
1282
  .datatable-pagination-list {
1438
1283
  .datatable-wrapper .datatable-bottom .datatable-pagination & {
1439
1284
  display: flex;
@@ -1472,6 +1317,9 @@
1472
1317
  .h-3 {
1473
1318
  height: calc(var(--spacing) * 3);
1474
1319
  }
1320
+ .h-3\.5 {
1321
+ height: calc(var(--spacing) * 3.5);
1322
+ }
1475
1323
  .h-4 {
1476
1324
  height: calc(var(--spacing) * 4);
1477
1325
  }
@@ -1484,6 +1332,12 @@
1484
1332
  .h-8 {
1485
1333
  height: calc(var(--spacing) * 8);
1486
1334
  }
1335
+ .h-9 {
1336
+ height: calc(var(--spacing) * 9);
1337
+ }
1338
+ .h-10 {
1339
+ height: calc(var(--spacing) * 10);
1340
+ }
1487
1341
  .h-12 {
1488
1342
  height: calc(var(--spacing) * 12);
1489
1343
  }
@@ -1503,20 +1357,14 @@
1503
1357
  .datatable-wrapper & {
1504
1358
  width: 100%;
1505
1359
  font-size: 0.875rem;
1506
- color: var(--color-gray-500);
1360
+ color: var(--color-body);
1507
1361
  text-align: left;
1508
1362
  }
1509
- .dark .datatable-wrapper & {
1510
- color: var(--color-gray-400);
1511
- }
1512
1363
  .datatable-wrapper & thead {
1513
1364
  font-size: 0.75rem;
1514
- color: var(--color-gray-500);
1515
- background-color: var(--color-gray-50);
1516
- }
1517
- .dark .datatable-wrapper & thead {
1518
- color: var(--color-gray-400);
1519
- background-color: var(--color-gray-800);
1365
+ color: var(--color-body);
1366
+ background-color: var(--color-neutral-secondary-medium);
1367
+ border-bottom: 1px solid var(--color-default);
1520
1368
  }
1521
1369
  .datatable-wrapper & thead th {
1522
1370
  white-space: nowrap;
@@ -1549,34 +1397,22 @@
1549
1397
  text-transform: uppercase;
1550
1398
  }
1551
1399
  .datatable-wrapper & thead th .datatable-sorter:hover {
1552
- color: var(--color-gray-900);
1400
+ color: var(--color-heading);
1553
1401
  }
1554
1402
  .datatable-wrapper & thead th.datatable-ascending .datatable-sorter {
1555
- color: var(--color-gray-900);
1403
+ color: var(--color-heading);
1556
1404
  }
1557
1405
  .datatable-wrapper & thead th.datatable-descending .datatable-sorter {
1558
- color: var(--color-gray-900);
1559
- }
1560
- .dark .datatable-wrapper & thead th .datatable-sorter:hover {
1561
- color: white;
1562
- }
1563
- .dark .datatable-wrapper & thead th.datatable-ascending .datatable-sorter {
1564
- color: white;
1565
- }
1566
- .dark .datatable-wrapper & thead th.datatable-descending .datatable-sorter {
1567
- color: white;
1406
+ color: var(--color-heading);
1568
1407
  }
1569
1408
  .datatable-wrapper & tbody tr.selected {
1570
- background-color: var(--color-gray-100);
1571
- }
1572
- .dark .datatable-wrapper & tbody tr.selected {
1573
- background-color: var(--color-gray-700);
1409
+ background-color: var(--color-neutral-secondary);
1574
1410
  }
1575
1411
  .datatable-wrapper & tbody tr {
1576
- border-bottom: 1px solid var(--color-gray-200);
1412
+ border-bottom: 1px solid var(--color-default);
1577
1413
  }
1578
- .dark .datatable-wrapper & tbody tr {
1579
- border-bottom: 1px solid var(--color-gray-700);
1414
+ .datatable-wrapper & tbody tr:last-child {
1415
+ border-bottom: 0;
1580
1416
  }
1581
1417
  .datatable-wrapper & .datatable-empty {
1582
1418
  text-align: center;
@@ -1588,6 +1424,9 @@
1588
1424
  .w-3 {
1589
1425
  width: calc(var(--spacing) * 3);
1590
1426
  }
1427
+ .w-3\.5 {
1428
+ width: calc(var(--spacing) * 3.5);
1429
+ }
1591
1430
  .w-4 {
1592
1431
  width: calc(var(--spacing) * 4);
1593
1432
  }
@@ -1600,9 +1439,18 @@
1600
1439
  .w-8 {
1601
1440
  width: calc(var(--spacing) * 8);
1602
1441
  }
1442
+ .w-9 {
1443
+ width: calc(var(--spacing) * 9);
1444
+ }
1445
+ .w-10 {
1446
+ width: calc(var(--spacing) * 10);
1447
+ }
1603
1448
  .w-12 {
1604
1449
  width: calc(var(--spacing) * 12);
1605
1450
  }
1451
+ .w-44 {
1452
+ width: calc(var(--spacing) * 44);
1453
+ }
1606
1454
  .w-64 {
1607
1455
  width: calc(var(--spacing) * 64);
1608
1456
  }
@@ -1623,64 +1471,44 @@
1623
1471
  }
1624
1472
  .datatable-input {
1625
1473
  .datatable-wrapper .datatable-search & {
1626
- color: var(--color-gray-900);
1474
+ color: var(--color-heading);
1627
1475
  font-size: 0.875rem;
1628
- border: 1px solid var(--color-gray-300);
1629
- border-radius: 0.5rem;
1630
- background-color: var(--color-gray-50);
1476
+ border: 1px solid var(--color-default);
1477
+ border-radius: var(--radius-base);
1478
+ background-color: var(--color-neutral-secondary-soft);
1631
1479
  min-width: 16rem;
1632
1480
  }
1633
1481
  .datatable-wrapper & {
1634
- color: var(--color-gray-900);
1482
+ color: var(--color-heading);
1635
1483
  font-size: 0.875rem;
1636
- border: 1px solid var(--color-gray-300);
1637
- border-radius: 0.5rem;
1638
- background-color: var(--color-gray-50);
1484
+ border: 1px solid var(--color-default);
1485
+ border-radius: var(--radius-base);
1486
+ background-color: var(--color-neutral-secondary-soft);
1639
1487
  min-width: 16rem;
1640
1488
  }
1641
- .dark .datatable-wrapper .datatable-search & {
1642
- color: white;
1643
- background-color: var(--color-gray-800);
1644
- border: 1px solid var(--color-gray-700);
1645
- }
1646
- .dark .datatable-wrapper & {
1647
- color: white;
1648
- background-color: var(--color-gray-800);
1649
- border: 1px solid var(--color-gray-700);
1650
- }
1651
1489
  .datatable-wrapper thead th & {
1652
- background-color: white;
1490
+ background-color: var(--color-neutral-primary);
1653
1491
  font-weight: 400;
1654
- color: var(--color-gray-900);
1492
+ color: var(--color-heading);
1655
1493
  padding-top: .35rem;
1656
1494
  padding-bottom: .35rem;
1657
1495
  min-width: 0;
1658
1496
  }
1659
- .dark .datatable-wrapper thead th & {
1660
- background-color: var(--color-gray-700);
1661
- border-color: var(--color-gray-600);
1662
- color: white;
1663
- }
1664
1497
  .datatable-wrapper .datatable-search &:focus {
1665
- border-color: var(--color-blue-600);
1498
+ border-color: var(--color-brand);
1666
1499
  }
1667
1500
  }
1668
1501
  .datatable-search {
1669
1502
  .datatable-wrapper & .datatable-input {
1670
- color: var(--color-gray-900);
1503
+ color: var(--color-heading);
1671
1504
  font-size: 0.875rem;
1672
- border: 1px solid var(--color-gray-300);
1673
- border-radius: 0.5rem;
1674
- background-color: var(--color-gray-50);
1505
+ border: 1px solid var(--color-default);
1506
+ border-radius: var(--radius-base);
1507
+ background-color: var(--color-neutral-secondary-soft);
1675
1508
  min-width: 16rem;
1676
1509
  }
1677
- .dark .datatable-wrapper & .datatable-input {
1678
- color: white;
1679
- background-color: var(--color-gray-800);
1680
- border: 1px solid var(--color-gray-700);
1681
- }
1682
1510
  .datatable-wrapper & .datatable-input:focus {
1683
- border-color: var(--color-blue-600);
1511
+ border-color: var(--color-brand);
1684
1512
  }
1685
1513
  }
1686
1514
  .flex-1 {
@@ -1695,6 +1523,9 @@
1695
1523
  .grow {
1696
1524
  flex-grow: 1;
1697
1525
  }
1526
+ .origin-top-right {
1527
+ transform-origin: top right;
1528
+ }
1698
1529
  .-translate-x-full {
1699
1530
  --tw-translate-x: -100%;
1700
1531
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1841,9 +1672,9 @@
1841
1672
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1842
1673
  }
1843
1674
  }
1844
- .divide-gray-200 {
1675
+ .divide-default {
1845
1676
  :where(& > :not(:last-child)) {
1846
- border-color: var(--color-gray-200);
1677
+ border-color: var(--color-default);
1847
1678
  }
1848
1679
  }
1849
1680
  .overflow-hidden {
@@ -1855,6 +1686,8 @@
1855
1686
  }
1856
1687
  .datatable-wrapper & {
1857
1688
  overflow-x: auto;
1689
+ border: 1px solid var(--color-default);
1690
+ border-radius: var(--radius-base);
1858
1691
  }
1859
1692
  }
1860
1693
  .overflow-x-auto {
@@ -1867,7 +1700,10 @@
1867
1700
  overflow-y: auto;
1868
1701
  }
1869
1702
  .rounded {
1870
- border-radius: 0.25rem;
1703
+ border-radius: var(--radius);
1704
+ }
1705
+ .rounded-base {
1706
+ border-radius: var(--radius-base);
1871
1707
  }
1872
1708
  .rounded-full {
1873
1709
  border-radius: calc(infinity * 1px);
@@ -1878,29 +1714,24 @@
1878
1714
  .rounded-sm {
1879
1715
  border-radius: var(--radius-sm);
1880
1716
  }
1881
- .rounded-s-lg {
1882
- border-start-start-radius: var(--radius-lg);
1883
- border-end-start-radius: var(--radius-lg);
1884
- }
1885
- .rounded-e-lg {
1886
- border-start-end-radius: var(--radius-lg);
1887
- border-end-end-radius: var(--radius-lg);
1717
+ .rounded-xs {
1718
+ border-radius: var(--radius-xs);
1888
1719
  }
1889
- .rounded-t {
1890
- border-top-left-radius: 0.25rem;
1891
- border-top-right-radius: 0.25rem;
1720
+ .rounded-s-base {
1721
+ border-start-start-radius: var(--radius-base);
1722
+ border-end-start-radius: var(--radius-base);
1892
1723
  }
1893
- .rounded-l-lg {
1894
- border-top-left-radius: var(--radius-lg);
1895
- border-bottom-left-radius: var(--radius-lg);
1724
+ .rounded-e-base {
1725
+ border-start-end-radius: var(--radius-base);
1726
+ border-end-end-radius: var(--radius-base);
1896
1727
  }
1897
- .rounded-r-lg {
1898
- border-top-right-radius: var(--radius-lg);
1899
- border-bottom-right-radius: var(--radius-lg);
1728
+ .rounded-t {
1729
+ border-top-left-radius: var(--radius);
1730
+ border-top-right-radius: var(--radius);
1900
1731
  }
1901
1732
  .rounded-b {
1902
- border-bottom-right-radius: 0.25rem;
1903
- border-bottom-left-radius: 0.25rem;
1733
+ border-bottom-right-radius: var(--radius);
1734
+ border-bottom-left-radius: var(--radius);
1904
1735
  }
1905
1736
  .border {
1906
1737
  border-style: var(--tw-border-style);
@@ -1910,10 +1741,6 @@
1910
1741
  border-style: var(--tw-border-style);
1911
1742
  border-width: 0px;
1912
1743
  }
1913
- .border-e-0 {
1914
- border-inline-end-style: var(--tw-border-style);
1915
- border-inline-end-width: 0px;
1916
- }
1917
1744
  .border-t {
1918
1745
  border-top-style: var(--tw-border-style);
1919
1746
  border-top-width: 1px;
@@ -1924,217 +1751,148 @@
1924
1751
  }
1925
1752
  .dark {
1926
1753
  & .apexcharts-canvas .apexcharts-tooltip {
1927
- background-color: var(--color-gray-700) !important;
1928
- color: var(--color-gray-400) !important;
1929
- border-color: transparent !important;
1754
+ background-color: var(--color-neutral-secondary-medium) !important;
1755
+ color: var(--color-body) !important;
1756
+ border-color: var(--color-default) !important;
1930
1757
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
1931
1758
  }
1932
1759
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
1933
- background-color: var(--color-gray-600) !important;
1934
- border-color: var(--color-gray-500) !important;
1935
- color: var(--color-gray-500) !important;
1760
+ background-color: var(--color-neutral-tertiary-medium) !important;
1761
+ border-color: var(--color-light) !important;
1762
+ color: var(--color-heading) !important;
1936
1763
  }
1937
1764
  & .apexcharts-canvas .apexcharts-xaxistooltip {
1938
- color: var(--color-gray-400) !important;
1939
- background-color: var(--color-gray-700) !important;
1765
+ color: var(--color-body) !important;
1766
+ background-color: var(--color-neutral-secondary-medium) !important;
1940
1767
  }
1941
1768
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
1942
- color: var(--color-gray-400) !important;
1769
+ color: var(--color-body) !important;
1943
1770
  }
1944
1771
  & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
1945
1772
  color: white !important;
1946
1773
  }
1947
- & .apexcharts-canvas .apexcharts-xaxistooltip:after {
1948
- border-bottom-color: var(--color-gray-700) !important;
1949
- }
1950
- & .apexcharts-canvas .apexcharts-xaxistooltip:before {
1951
- border-bottom-color: var(--color-gray-700) !important;
1952
- }
1953
1774
  & .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
1954
- background-color: var(--color-gray-700) !important;
1955
- color: var(--color-gray-400) !important;
1775
+ background-color: var(--color-neutral-secondary-medium) !important;
1776
+ color: var(--color-body) !important;
1956
1777
  }
1957
1778
  & .apexcharts-canvas .apexcharts-legend-text {
1958
- color: var(--color-gray-400) !important;
1779
+ color: var(--color-body) !important;
1959
1780
  }
1960
1781
  & .apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
1961
- color: white !important;
1782
+ color: heading !important;
1962
1783
  }
1963
1784
  & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
1964
1785
  fill: white !important;
1965
1786
  }
1966
1787
  & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
1967
- fill: var(--color-gray-400) !important;
1788
+ fill: var(--color-body) !important;
1968
1789
  }
1969
1790
  & .apexcharts-gridline {
1970
- stroke: var(--color-gray-700) !important;
1791
+ stroke: var(--color-default) !important;
1971
1792
  }
1972
1793
  & .apexcharts-xcrosshairs {
1973
- stroke: var(--color-gray-700) !important;
1794
+ stroke: var(--color-default) !important;
1974
1795
  }
1975
1796
  & .apexcharts-ycrosshairs {
1976
- stroke: var(--color-gray-700) !important;
1797
+ stroke: var(--color-default) !important;
1977
1798
  }
1978
1799
  }
1979
- .dark {
1980
- & .datatable-wrapper .datatable-search .datatable-input {
1981
- color: white;
1982
- background-color: var(--color-gray-800);
1983
- border: 1px solid var(--color-gray-700);
1984
- }
1985
- & .datatable-wrapper .datatable-input {
1986
- color: white;
1987
- background-color: var(--color-gray-800);
1988
- border: 1px solid var(--color-gray-700);
1800
+ .border-brand {
1801
+ border-color: var(--color-brand);
1802
+ }
1803
+ .border-danger {
1804
+ border-color: var(--color-danger);
1805
+ }
1806
+ .border-danger-subtle {
1807
+ border-color: var(--color-danger-subtle);
1808
+ }
1809
+ .border-dark {
1810
+ border-color: var(--color-dark);
1811
+ }
1812
+ .border-default {
1813
+ border-color: var(--color-default);
1814
+ }
1815
+ .border-default-medium {
1816
+ border-color: var(--color-default-medium);
1817
+ }
1818
+ .border-fg-danger {
1819
+ border-color: var(--color-fg-danger);
1820
+ }
1821
+ .border-gray-200 {
1822
+ border-color: var(--color-gray-200);
1823
+ }
1824
+ .border-light {
1825
+ border-color: var(--color-light);
1826
+ }
1827
+ .border-success {
1828
+ border-color: var(--color-success);
1829
+ }
1830
+ .border-transparent {
1831
+ border-color: transparent;
1832
+ }
1833
+ .border-warning {
1834
+ border-color: var(--color-warning);
1835
+ }
1836
+ .apexcharts-active {
1837
+ .apexcharts-canvas .apexcharts-tooltip-series-group& .apexcharts-tooltip-y-group {
1838
+ padding: 0 !important;
1989
1839
  }
1990
- & .datatable-wrapper thead th .datatable-input {
1991
- background-color: var(--color-gray-700);
1992
- border-color: var(--color-gray-600);
1993
- color: white;
1840
+ .apexcharts-canvas .apexcharts-tooltip-series-group& {
1841
+ padding-left: 0.75rem !important;
1842
+ padding-right: 0.75rem !important;
1843
+ padding-bottom: 0.75rem !important;
1844
+ background-color: var(--color-neutral-primary-medium) !important;
1845
+ color: var(--color-body) !important;
1994
1846
  }
1995
- & .datatable-wrapper .datatable-top .datatable-dropdown {
1996
- color: var(--color-gray-400);
1997
- }
1998
- & .datatable-wrapper .datatable-top .datatable-dropdown .datatable-selector {
1999
- background-color: var(--color-gray-800);
2000
- border: 1px solid var(--color-gray-700);
2001
- color: white;
2002
- }
2003
- & .datatable-wrapper .datatable-table {
2004
- color: var(--color-gray-400);
2005
- }
2006
- & .datatable-wrapper .datatable-table thead {
2007
- color: var(--color-gray-400);
2008
- background-color: var(--color-gray-800);
2009
- }
2010
- & .datatable-wrapper .datatable-table thead th .datatable-sorter:hover {
2011
- color: white;
2012
- }
2013
- & .datatable-wrapper .datatable-table thead th.datatable-ascending .datatable-sorter {
2014
- color: white;
2015
- }
2016
- & .datatable-wrapper .datatable-table thead th.datatable-descending .datatable-sorter {
2017
- color: white;
2018
- }
2019
- & .datatable-wrapper .datatable-table tbody tr.selected {
2020
- background-color: var(--color-gray-700);
2021
- }
2022
- & .datatable-wrapper .datatable-table tbody tr {
2023
- border-bottom: 1px solid var(--color-gray-700);
2024
- }
2025
- & .datatable-wrapper .datatable-bottom .datatable-info {
2026
- color: var(--color-gray-400);
2027
- }
2028
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link {
2029
- color: var(--color-gray-400);
2030
- border-color: var(--color-gray-700);
2031
- }
2032
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
2033
- color: transparent;
2034
- }
2035
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link {
2036
- color: transparent;
2037
- }
2038
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link::after {
2039
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
2040
- }
2041
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link:hover::after {
2042
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 8-4 4 4 4'/%3e %3c/svg%3e");
2043
- }
2044
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link::after {
2045
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
2046
- }
2047
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link:hover::after {
2048
- content: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 16 4-4-4-4'/%3e %3c/svg%3e");
2049
- }
2050
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link {
2051
- border-left: 1px solid var(--color-gray-700);
2052
- }
2053
- & .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover {
2054
- background-color: var(--color-gray-700);
2055
- color: white;
2056
- }
2057
- }
2058
- .border-blue-300 {
2059
- border-color: var(--color-blue-300);
2060
- }
2061
- .border-blue-600 {
2062
- border-color: var(--color-blue-600);
2063
- }
2064
- .border-blue-700 {
2065
- border-color: var(--color-blue-700);
2066
- }
2067
- .border-gray-100 {
2068
- border-color: var(--color-gray-100);
2069
- }
2070
- .border-gray-200 {
2071
- border-color: var(--color-gray-200);
2072
- }
2073
- .border-gray-300 {
2074
- border-color: var(--color-gray-300);
2075
- }
2076
- .border-green-700 {
2077
- border-color: var(--color-green-700);
2078
- }
2079
- .border-red-500 {
2080
- border-color: var(--color-red-500);
2081
- }
2082
- .apexcharts-active {
2083
- .apexcharts-canvas .apexcharts-tooltip-series-group& .apexcharts-tooltip-y-group {
2084
- padding: 0 !important;
2085
- }
2086
- .apexcharts-canvas .apexcharts-tooltip-series-group& {
2087
- padding-left: 0.75rem !important;
2088
- padding-right: 0.75rem !important;
2089
- padding-bottom: 0.75rem !important;
2090
- background-color: white !important;
2091
- color: var(--color-gray-500) !important;
2092
- }
2093
- .dark .apexcharts-canvas .apexcharts-tooltip-series-group& {
2094
- background-color: var(--color-gray-700) !important;
2095
- color: var(--color-gray-400) !important;
1847
+ .dark .apexcharts-canvas .apexcharts-tooltip-series-group& {
1848
+ background-color: var(--color-neutral-secondary-medium) !important;
1849
+ color: var(--color-body) !important;
2096
1850
  }
2097
1851
  .apexcharts-canvas .apexcharts-tooltip-series-group&:first-of-type {
2098
1852
  padding-top: 0.75rem !important;
2099
1853
  }
2100
1854
  }
2101
- .selected {
2102
- .datatable-wrapper .datatable-table tbody tr& {
2103
- background-color: var(--color-gray-100);
2104
- }
2105
- .dark .datatable-wrapper .datatable-table tbody tr& {
2106
- background-color: var(--color-gray-700);
1855
+ .datatable-active {
1856
+ .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item& .datatable-pagination-list-item-link {
1857
+ color: var(--color-fg-brand);
1858
+ background-color: var(--color-neutral-tertiary-medium);
2107
1859
  }
2108
1860
  }
2109
1861
  .selectedCell {
2110
- background-color: var(--color-gray-50);
1862
+ background-color: var(--color-neutral-secondary-medium);
2111
1863
  .dark & {
2112
- background-color: var(--color-gray-700);
1864
+ background-color: var(--color-neutral-secondary-medium);
2113
1865
  }
2114
1866
  }
2115
- .bg-blue-50 {
2116
- background-color: var(--color-blue-50);
2117
- }
2118
1867
  .bg-blue-100 {
2119
1868
  background-color: var(--color-blue-100);
2120
1869
  }
2121
1870
  .bg-blue-700 {
2122
1871
  background-color: var(--color-blue-700);
2123
1872
  }
2124
- .bg-gray-50 {
2125
- background-color: var(--color-gray-50);
1873
+ .bg-brand {
1874
+ background-color: var(--color-brand);
2126
1875
  }
2127
- .bg-gray-100 {
2128
- background-color: var(--color-gray-100);
1876
+ .bg-danger {
1877
+ background-color: var(--color-danger);
2129
1878
  }
2130
- .bg-gray-200 {
2131
- background-color: var(--color-gray-200);
1879
+ .bg-danger-soft {
1880
+ background-color: var(--color-danger-soft);
2132
1881
  }
2133
- .bg-gray-800 {
2134
- background-color: var(--color-gray-800);
1882
+ .bg-dark {
1883
+ background-color: var(--color-dark);
1884
+ }
1885
+ .bg-dark-backdrop\/70 {
1886
+ background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent);
1887
+ @supports (color: color-mix(in lab, red, red)) {
1888
+ background-color: color-mix(in oklab, var(--color-dark-backdrop) 70%, transparent);
1889
+ }
1890
+ }
1891
+ .bg-gray-100 {
1892
+ background-color: var(--color-gray-100);
2135
1893
  }
2136
1894
  .bg-gray-900\/50 {
2137
- background-color: color-mix(in srgb, #111827 50%, transparent);
1895
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
2138
1896
  @supports (color: color-mix(in lab, red, red)) {
2139
1897
  background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
2140
1898
  }
@@ -2142,47 +1900,61 @@
2142
1900
  .bg-green-100 {
2143
1901
  background-color: var(--color-green-100);
2144
1902
  }
2145
- .bg-green-700 {
2146
- background-color: var(--color-green-700);
1903
+ .bg-neutral-primary {
1904
+ background-color: var(--color-neutral-primary);
2147
1905
  }
2148
- .bg-orange-100 {
2149
- background-color: var(--color-orange-100);
1906
+ .bg-neutral-primary-medium {
1907
+ background-color: var(--color-neutral-primary-medium);
2150
1908
  }
2151
- .bg-purple-700 {
2152
- background-color: var(--color-purple-700);
1909
+ .bg-neutral-primary-soft {
1910
+ background-color: var(--color-neutral-primary-soft);
2153
1911
  }
2154
- .bg-red-50 {
2155
- background-color: var(--color-red-50);
1912
+ .bg-neutral-secondary-medium {
1913
+ background-color: var(--color-neutral-secondary-medium);
1914
+ }
1915
+ .bg-neutral-secondary-soft {
1916
+ background-color: var(--color-neutral-secondary-soft);
1917
+ }
1918
+ .bg-neutral-tertiary-medium {
1919
+ background-color: var(--color-neutral-tertiary-medium);
1920
+ }
1921
+ .bg-orange-100 {
1922
+ background-color: var(--color-orange-100);
2156
1923
  }
2157
1924
  .bg-red-100 {
2158
1925
  background-color: var(--color-red-100);
2159
1926
  }
2160
- .bg-red-700 {
2161
- background-color: var(--color-red-700);
1927
+ .bg-success {
1928
+ background-color: var(--color-success);
2162
1929
  }
2163
1930
  .bg-transparent {
2164
1931
  background-color: transparent;
2165
1932
  }
1933
+ .bg-warning {
1934
+ background-color: var(--color-warning);
1935
+ }
2166
1936
  .bg-white {
2167
1937
  background-color: var(--color-white);
2168
1938
  }
2169
1939
  .bg-white\/50 {
2170
- background-color: color-mix(in srgb, #ffffff 50%, transparent);
1940
+ background-color: color-mix(in srgb, #fff 50%, transparent);
2171
1941
  @supports (color: color-mix(in lab, red, red)) {
2172
1942
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
2173
1943
  }
2174
1944
  }
2175
- .bg-yellow-400 {
2176
- background-color: var(--color-yellow-400);
2177
- }
2178
1945
  .dark {
2179
1946
  & .selectedCell {
2180
- background-color: var(--color-gray-700);
1947
+ background-color: var(--color-neutral-secondary-medium);
1948
+ }
1949
+ }
1950
+ .selected {
1951
+ .datatable-wrapper .datatable-table tbody tr& {
1952
+ background-color: var(--color-neutral-secondary);
2181
1953
  }
2182
1954
  }
2183
1955
  .apexcharts-datalabels-group {
2184
1956
  & .apexcharts-text.apexcharts-datalabel-value {
2185
- fill: var(--color-gray-900) !important;
1957
+ fill: var(--color-heading) !important;
2186
1958
  font-size: 1.875rem,[object Object] !important;
2187
1959
  font-weight: 700 !important;
2188
1960
  }
@@ -2190,27 +1962,27 @@
2190
1962
  fill: white !important;
2191
1963
  }
2192
1964
  .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
2193
- fill: var(--color-gray-500) !important;
1965
+ fill: var(--color-body) !important;
2194
1966
  font-size: 1rem,[object Object] !important;
2195
1967
  font-weight: 400 !important;
2196
1968
  }
2197
1969
  .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label {
2198
- fill: var(--color-gray-400) !important;
1970
+ fill: var(--color-body) !important;
2199
1971
  }
2200
1972
  }
2201
1973
  .apexcharts-datalabel-label {
2202
1974
  .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
2203
- fill: var(--color-gray-500) !important;
1975
+ fill: var(--color-body) !important;
2204
1976
  font-size: 1rem,[object Object] !important;
2205
1977
  font-weight: 400 !important;
2206
1978
  }
2207
1979
  .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& {
2208
- fill: var(--color-gray-400) !important;
1980
+ fill: var(--color-body) !important;
2209
1981
  }
2210
1982
  }
2211
1983
  .apexcharts-datalabel-value {
2212
1984
  .apexcharts-datalabels-group .apexcharts-text& {
2213
- fill: var(--color-gray-900) !important;
1985
+ fill: var(--color-heading) !important;
2214
1986
  font-size: 1.875rem,[object Object] !important;
2215
1987
  font-weight: 700 !important;
2216
1988
  }
@@ -2218,13 +1990,13 @@
2218
1990
  fill: white !important;
2219
1991
  }
2220
1992
  }
2221
- .fill-blue-600 {
2222
- fill: var(--color-blue-600);
1993
+ .fill-brand {
1994
+ fill: var(--color-brand);
2223
1995
  }
2224
1996
  .apexcharts-ycrosshairs {
2225
- stroke: var(--color-gray-200) !important;
1997
+ stroke: var(--color-default) !important;
2226
1998
  .dark & {
2227
- stroke: var(--color-gray-700) !important;
1999
+ stroke: var(--color-default) !important;
2228
2000
  }
2229
2001
  }
2230
2002
  .object-cover {
@@ -2264,9 +2036,15 @@
2264
2036
  .px-2 {
2265
2037
  padding-inline: calc(var(--spacing) * 2);
2266
2038
  }
2039
+ .px-2\.5 {
2040
+ padding-inline: calc(var(--spacing) * 2.5);
2041
+ }
2267
2042
  .px-3 {
2268
2043
  padding-inline: calc(var(--spacing) * 3);
2269
2044
  }
2045
+ .px-3\.5 {
2046
+ padding-inline: calc(var(--spacing) * 3.5);
2047
+ }
2270
2048
  .px-4 {
2271
2049
  padding-inline: calc(var(--spacing) * 4);
2272
2050
  }
@@ -2276,6 +2054,9 @@
2276
2054
  .px-6 {
2277
2055
  padding-inline: calc(var(--spacing) * 6);
2278
2056
  }
2057
+ .py-1\.5 {
2058
+ padding-block: calc(var(--spacing) * 1.5);
2059
+ }
2279
2060
  .py-2 {
2280
2061
  padding-block: calc(var(--spacing) * 2);
2281
2062
  }
@@ -2307,19 +2088,19 @@
2307
2088
  font-size: 0.75rem !important;
2308
2089
  font-weight: 500 !important;
2309
2090
  padding-left: 1.25rem !important;
2310
- color: var(--color-gray-500) !important;
2091
+ color: var(--color-body) !important;
2311
2092
  }
2312
2093
  :is([dir=rtl]) .apexcharts-canvas & {
2313
2094
  padding-right: 0.5rem !important;
2314
2095
  }
2315
2096
  .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2316
- color: var(--color-gray-900) !important;
2097
+ color: var(--color-heading) !important;
2317
2098
  }
2318
2099
  .dark .apexcharts-canvas & {
2319
- color: var(--color-gray-400) !important;
2100
+ color: var(--color-body) !important;
2320
2101
  }
2321
2102
  .dark .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover {
2322
- color: white !important;
2103
+ color: heading !important;
2323
2104
  }
2324
2105
  }
2325
2106
  .datatable-empty {
@@ -2388,16 +2169,16 @@
2388
2169
  }
2389
2170
  .apexcharts-tooltip-text-y-label {
2390
2171
  .apexcharts-canvas .apexcharts-tooltip & {
2391
- color: var(--color-gray-500) !important;
2172
+ color: var(--color-body) !important;
2392
2173
  font-size: 0.875rem !important;
2393
2174
  }
2394
2175
  .dark .apexcharts-canvas .apexcharts-tooltip & {
2395
- color: var(--color-gray-400) !important;
2176
+ color: var(--color-body) !important;
2396
2177
  }
2397
2178
  }
2398
2179
  .apexcharts-tooltip-text-y-value {
2399
2180
  .apexcharts-canvas .apexcharts-tooltip & {
2400
- color: var(--color-gray-900);
2181
+ color: var(--color-heading);
2401
2182
  font-size: 0.875rem !important;
2402
2183
  }
2403
2184
  .dark .apexcharts-canvas .apexcharts-tooltip & {
@@ -2406,33 +2187,26 @@
2406
2187
  }
2407
2188
  .datatable-info {
2408
2189
  .datatable-wrapper .datatable-bottom & {
2409
- color: var(--color-gray-500);
2190
+ color: var(--color-body);
2410
2191
  font-size: 0.875rem;
2411
2192
  }
2412
- .dark .datatable-wrapper .datatable-bottom & {
2413
- color: var(--color-gray-400);
2414
- }
2193
+ }
2194
+ .leading-5 {
2195
+ --tw-leading: var(--leading-5);
2196
+ line-height: var(--leading-5);
2415
2197
  }
2416
2198
  .leading-6 {
2417
- --tw-leading: calc(var(--spacing) * 6);
2418
- line-height: calc(var(--spacing) * 6);
2199
+ --tw-leading: var(--leading-6);
2200
+ line-height: var(--leading-6);
2419
2201
  }
2420
2202
  .leading-9 {
2421
- --tw-leading: calc(var(--spacing) * 9);
2422
- line-height: calc(var(--spacing) * 9);
2203
+ --tw-leading: var(--leading-9);
2204
+ line-height: var(--leading-9);
2423
2205
  }
2424
2206
  .leading-relaxed {
2425
2207
  --tw-leading: var(--leading-relaxed);
2426
2208
  line-height: var(--leading-relaxed);
2427
2209
  }
2428
- .leading-tight {
2429
- --tw-leading: var(--leading-tight);
2430
- line-height: var(--leading-tight);
2431
- }
2432
- .font-bold {
2433
- --tw-font-weight: var(--font-weight-bold);
2434
- font-weight: var(--font-weight-bold);
2435
- }
2436
2210
  .font-light {
2437
2211
  --tw-font-weight: var(--font-weight-light);
2438
2212
  font-weight: var(--font-weight-light);
@@ -2461,51 +2235,54 @@
2461
2235
  text-transform: uppercase;
2462
2236
  }
2463
2237
  .datatable-wrapper .datatable-table thead th &:hover {
2464
- color: var(--color-gray-900);
2238
+ color: var(--color-heading);
2465
2239
  }
2466
2240
  .datatable-wrapper .datatable-table thead th.datatable-ascending & {
2467
- color: var(--color-gray-900);
2241
+ color: var(--color-heading);
2468
2242
  }
2469
2243
  .datatable-wrapper .datatable-table thead th.datatable-descending & {
2470
- color: var(--color-gray-900);
2471
- }
2472
- .dark .datatable-wrapper .datatable-table thead th &:hover {
2473
- color: white;
2474
- }
2475
- .dark .datatable-wrapper .datatable-table thead th.datatable-ascending & {
2476
- color: white;
2477
- }
2478
- .dark .datatable-wrapper .datatable-table thead th.datatable-descending & {
2479
- color: white;
2244
+ color: var(--color-heading);
2480
2245
  }
2481
2246
  }
2482
2247
  .datatable-ascending {
2483
2248
  .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2484
- color: var(--color-gray-900);
2485
- }
2486
- .dark .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2487
- color: white;
2249
+ color: var(--color-heading);
2488
2250
  }
2489
2251
  }
2490
2252
  .datatable-descending {
2491
2253
  .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2492
- color: var(--color-gray-900);
2493
- }
2494
- .dark .datatable-wrapper .datatable-table thead th& .datatable-sorter {
2495
- color: white;
2254
+ color: var(--color-heading);
2496
2255
  }
2497
2256
  }
2498
2257
  .text-blue-500 {
2499
2258
  color: var(--color-blue-500);
2500
2259
  }
2501
- .text-blue-600 {
2502
- color: var(--color-blue-600);
2260
+ .text-body {
2261
+ color: var(--color-body);
2262
+ }
2263
+ .text-body-subtle {
2264
+ color: var(--color-body-subtle);
2265
+ }
2266
+ .text-brand {
2267
+ color: var(--color-brand);
2268
+ }
2269
+ .text-danger {
2270
+ color: var(--color-danger);
2271
+ }
2272
+ .text-dark {
2273
+ color: var(--color-dark);
2274
+ }
2275
+ .text-fg-brand {
2276
+ color: var(--color-fg-brand);
2277
+ }
2278
+ .text-fg-danger {
2279
+ color: var(--color-fg-danger);
2503
2280
  }
2504
- .text-blue-700 {
2505
- color: var(--color-blue-700);
2281
+ .text-fg-danger-strong {
2282
+ color: var(--color-fg-danger-strong);
2506
2283
  }
2507
- .text-gray-200 {
2508
- color: var(--color-gray-200);
2284
+ .text-fg-disabled {
2285
+ color: var(--color-fg-disabled);
2509
2286
  }
2510
2287
  .text-gray-400 {
2511
2288
  color: var(--color-gray-400);
@@ -2513,20 +2290,17 @@
2513
2290
  .text-gray-500 {
2514
2291
  color: var(--color-gray-500);
2515
2292
  }
2516
- .text-gray-700 {
2517
- color: var(--color-gray-700);
2518
- }
2519
- .text-gray-800 {
2520
- color: var(--color-gray-800);
2521
- }
2522
2293
  .text-gray-900 {
2523
2294
  color: var(--color-gray-900);
2524
2295
  }
2525
2296
  .text-green-500 {
2526
2297
  color: var(--color-green-500);
2527
2298
  }
2528
- .text-green-700 {
2529
- color: var(--color-green-700);
2299
+ .text-heading {
2300
+ color: var(--color-heading);
2301
+ }
2302
+ .text-neutral-tertiary {
2303
+ color: var(--color-neutral-tertiary);
2530
2304
  }
2531
2305
  .text-orange-500 {
2532
2306
  color: var(--color-orange-500);
@@ -2537,11 +2311,11 @@
2537
2311
  .text-red-600 {
2538
2312
  color: var(--color-red-600);
2539
2313
  }
2540
- .text-red-700 {
2541
- color: var(--color-red-700);
2314
+ .text-success {
2315
+ color: var(--color-success);
2542
2316
  }
2543
- .text-red-900 {
2544
- color: var(--color-red-900);
2317
+ .text-warning {
2318
+ color: var(--color-warning);
2545
2319
  }
2546
2320
  .text-white {
2547
2321
  color: var(--color-white);
@@ -2553,11 +2327,6 @@
2553
2327
  -webkit-font-smoothing: antialiased;
2554
2328
  -moz-osx-font-smoothing: grayscale;
2555
2329
  }
2556
- .placeholder-red-700 {
2557
- &::placeholder {
2558
- color: var(--color-red-700);
2559
- }
2560
- }
2561
2330
  .opacity-0 {
2562
2331
  opacity: 0%;
2563
2332
  }
@@ -2580,6 +2349,10 @@
2580
2349
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2581
2350
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2582
2351
  }
2352
+ .shadow-xs {
2353
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2354
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2355
+ }
2583
2356
  .outline {
2584
2357
  outline-style: var(--tw-outline-style);
2585
2358
  outline-width: 1px;
@@ -2610,108 +2383,127 @@
2610
2383
  --tw-ease: var(--ease-out);
2611
2384
  transition-timing-function: var(--ease-out);
2612
2385
  }
2613
- .hover\:border-gray-300 {
2386
+ .select-none {
2387
+ -webkit-user-select: none;
2388
+ user-select: none;
2389
+ }
2390
+ .placeholder\:text-body {
2391
+ &::placeholder {
2392
+ color: var(--color-body);
2393
+ }
2394
+ }
2395
+ .placeholder\:text-fg-danger-strong {
2396
+ &::placeholder {
2397
+ color: var(--color-fg-danger-strong);
2398
+ }
2399
+ }
2400
+ .placeholder\:text-fg-disabled {
2401
+ &::placeholder {
2402
+ color: var(--color-fg-disabled);
2403
+ }
2404
+ }
2405
+ .hover\:border-default {
2614
2406
  &:hover {
2615
2407
  @media (hover: hover) {
2616
- border-color: var(--color-gray-300);
2408
+ border-color: var(--color-default);
2617
2409
  }
2618
2410
  }
2619
2411
  }
2620
- .hover\:bg-blue-100 {
2412
+ .hover\:bg-blue-800 {
2621
2413
  &:hover {
2622
2414
  @media (hover: hover) {
2623
- background-color: var(--color-blue-100);
2415
+ background-color: var(--color-blue-800);
2624
2416
  }
2625
2417
  }
2626
2418
  }
2627
- .hover\:bg-blue-800 {
2419
+ .hover\:bg-brand-strong {
2628
2420
  &:hover {
2629
2421
  @media (hover: hover) {
2630
- background-color: var(--color-blue-800);
2422
+ background-color: var(--color-brand-strong);
2631
2423
  }
2632
2424
  }
2633
2425
  }
2634
- .hover\:bg-gray-100 {
2426
+ .hover\:bg-danger-strong {
2635
2427
  &:hover {
2636
2428
  @media (hover: hover) {
2637
- background-color: var(--color-gray-100);
2429
+ background-color: var(--color-danger-strong);
2638
2430
  }
2639
2431
  }
2640
2432
  }
2641
- .hover\:bg-gray-200 {
2433
+ .hover\:bg-dark-strong {
2642
2434
  &:hover {
2643
2435
  @media (hover: hover) {
2644
- background-color: var(--color-gray-200);
2436
+ background-color: var(--color-dark-strong);
2645
2437
  }
2646
2438
  }
2647
2439
  }
2648
- .hover\:bg-gray-900 {
2440
+ .hover\:bg-gray-100 {
2649
2441
  &:hover {
2650
2442
  @media (hover: hover) {
2651
- background-color: var(--color-gray-900);
2443
+ background-color: var(--color-gray-100);
2652
2444
  }
2653
2445
  }
2654
2446
  }
2655
- .hover\:bg-green-800 {
2447
+ .hover\:bg-gray-200 {
2656
2448
  &:hover {
2657
2449
  @media (hover: hover) {
2658
- background-color: var(--color-green-800);
2450
+ background-color: var(--color-gray-200);
2659
2451
  }
2660
2452
  }
2661
2453
  }
2662
- .hover\:bg-purple-800 {
2454
+ .hover\:bg-neutral-secondary-medium {
2663
2455
  &:hover {
2664
2456
  @media (hover: hover) {
2665
- background-color: var(--color-purple-800);
2457
+ background-color: var(--color-neutral-secondary-medium);
2666
2458
  }
2667
2459
  }
2668
2460
  }
2669
- .hover\:bg-red-800 {
2461
+ .hover\:bg-neutral-tertiary {
2670
2462
  &:hover {
2671
2463
  @media (hover: hover) {
2672
- background-color: var(--color-red-800);
2464
+ background-color: var(--color-neutral-tertiary);
2673
2465
  }
2674
2466
  }
2675
2467
  }
2676
- .hover\:bg-white {
2468
+ .hover\:bg-neutral-tertiary-medium {
2677
2469
  &:hover {
2678
2470
  @media (hover: hover) {
2679
- background-color: var(--color-white);
2471
+ background-color: var(--color-neutral-tertiary-medium);
2680
2472
  }
2681
2473
  }
2682
2474
  }
2683
- .hover\:bg-yellow-500 {
2475
+ .hover\:bg-success-strong {
2684
2476
  &:hover {
2685
2477
  @media (hover: hover) {
2686
- background-color: var(--color-yellow-500);
2478
+ background-color: var(--color-success-strong);
2687
2479
  }
2688
2480
  }
2689
2481
  }
2690
- .hover\:text-blue-600 {
2482
+ .hover\:bg-warning-strong {
2691
2483
  &:hover {
2692
2484
  @media (hover: hover) {
2693
- color: var(--color-blue-600);
2485
+ background-color: var(--color-warning-strong);
2694
2486
  }
2695
2487
  }
2696
2488
  }
2697
- .hover\:text-blue-700 {
2489
+ .hover\:bg-white {
2698
2490
  &:hover {
2699
2491
  @media (hover: hover) {
2700
- color: var(--color-blue-700);
2492
+ background-color: var(--color-white);
2701
2493
  }
2702
2494
  }
2703
2495
  }
2704
- .hover\:text-gray-600 {
2496
+ .hover\:text-blue-600 {
2705
2497
  &:hover {
2706
2498
  @media (hover: hover) {
2707
- color: var(--color-gray-600);
2499
+ color: var(--color-blue-600);
2708
2500
  }
2709
2501
  }
2710
2502
  }
2711
- .hover\:text-gray-700 {
2503
+ .hover\:text-fg-brand {
2712
2504
  &:hover {
2713
2505
  @media (hover: hover) {
2714
- color: var(--color-gray-700);
2506
+ color: var(--color-fg-brand);
2715
2507
  }
2716
2508
  }
2717
2509
  }
@@ -2722,6 +2514,13 @@
2722
2514
  }
2723
2515
  }
2724
2516
  }
2517
+ .hover\:text-heading {
2518
+ &:hover {
2519
+ @media (hover: hover) {
2520
+ color: var(--color-heading);
2521
+ }
2522
+ }
2523
+ }
2725
2524
  .hover\:text-white {
2726
2525
  &:hover {
2727
2526
  @media (hover: hover) {
@@ -2741,14 +2540,14 @@
2741
2540
  z-index: 10;
2742
2541
  }
2743
2542
  }
2744
- .focus\:border-blue-500 {
2543
+ .focus\:border-brand {
2745
2544
  &:focus {
2746
- border-color: var(--color-blue-500);
2545
+ border-color: var(--color-brand);
2747
2546
  }
2748
2547
  }
2749
- .focus\:border-red-500 {
2548
+ .focus\:border-danger {
2750
2549
  &:focus {
2751
- border-color: var(--color-red-500);
2550
+ border-color: var(--color-danger);
2752
2551
  }
2753
2552
  }
2754
2553
  .focus\:ring-2 {
@@ -2768,55 +2567,54 @@
2768
2567
  --tw-ring-color: var(--color-blue-300);
2769
2568
  }
2770
2569
  }
2771
- .focus\:ring-blue-500 {
2570
+ .focus\:ring-brand {
2772
2571
  &:focus {
2773
- --tw-ring-color: var(--color-blue-500);
2572
+ --tw-ring-color: var(--color-brand);
2774
2573
  }
2775
2574
  }
2776
- .focus\:ring-gray-100 {
2575
+ .focus\:ring-brand-medium {
2777
2576
  &:focus {
2778
- --tw-ring-color: var(--color-gray-100);
2577
+ --tw-ring-color: var(--color-brand-medium);
2779
2578
  }
2780
2579
  }
2781
- .focus\:ring-gray-200 {
2580
+ .focus\:ring-brand-soft {
2782
2581
  &:focus {
2783
- --tw-ring-color: var(--color-gray-200);
2582
+ --tw-ring-color: var(--color-brand-soft);
2784
2583
  }
2785
2584
  }
2786
- .focus\:ring-gray-300 {
2585
+ .focus\:ring-danger {
2787
2586
  &:focus {
2788
- --tw-ring-color: var(--color-gray-300);
2587
+ --tw-ring-color: var(--color-danger);
2789
2588
  }
2790
2589
  }
2791
- .focus\:ring-green-300 {
2590
+ .focus\:ring-danger-medium {
2792
2591
  &:focus {
2793
- --tw-ring-color: var(--color-green-300);
2592
+ --tw-ring-color: var(--color-danger-medium);
2794
2593
  }
2795
2594
  }
2796
- .focus\:ring-purple-300 {
2595
+ .focus\:ring-fg-danger {
2797
2596
  &:focus {
2798
- --tw-ring-color: var(--color-purple-300);
2597
+ --tw-ring-color: var(--color-fg-danger);
2799
2598
  }
2800
2599
  }
2801
- .focus\:ring-red-300 {
2600
+ .focus\:ring-neutral-tertiary {
2802
2601
  &:focus {
2803
- --tw-ring-color: var(--color-red-300);
2602
+ --tw-ring-color: var(--color-neutral-tertiary);
2804
2603
  }
2805
2604
  }
2806
- .focus\:ring-red-500 {
2605
+ .focus\:ring-neutral-tertiary-soft {
2807
2606
  &:focus {
2808
- --tw-ring-color: var(--color-red-500);
2607
+ --tw-ring-color: var(--color-neutral-tertiary-soft);
2809
2608
  }
2810
2609
  }
2811
- .focus\:ring-yellow-300 {
2610
+ .focus\:ring-success-medium {
2812
2611
  &:focus {
2813
- --tw-ring-color: var(--color-yellow-300);
2612
+ --tw-ring-color: var(--color-success-medium);
2814
2613
  }
2815
2614
  }
2816
- .focus\:ring-offset-2 {
2615
+ .focus\:ring-warning-medium {
2817
2616
  &:focus {
2818
- --tw-ring-offset-width: 2px;
2819
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2617
+ --tw-ring-color: var(--color-warning-medium);
2820
2618
  }
2821
2619
  }
2822
2620
  .focus\:outline-none {
@@ -2869,11 +2667,6 @@
2869
2667
  }
2870
2668
  }
2871
2669
  }
2872
- .md\:rounded-lg {
2873
- @media (width >= 48rem) {
2874
- border-radius: var(--radius-lg);
2875
- }
2876
- }
2877
2670
  .md\:px-0 {
2878
2671
  @media (width >= 48rem) {
2879
2672
  padding-inline: calc(var(--spacing) * 0);
@@ -2911,21 +2704,6 @@
2911
2704
  text-align: right;
2912
2705
  }
2913
2706
  }
2914
- .dark\:divide-white\/5 {
2915
- @media (prefers-color-scheme: dark) {
2916
- :where(& > :not(:last-child)) {
2917
- border-color: color-mix(in srgb, #ffffff 5%, transparent);
2918
- @supports (color: color-mix(in lab, red, red)) {
2919
- border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2920
- }
2921
- }
2922
- }
2923
- }
2924
- .dark\:border-blue-500 {
2925
- @media (prefers-color-scheme: dark) {
2926
- border-color: var(--color-blue-500);
2927
- }
2928
- }
2929
2707
  .dark\:border-gray-500 {
2930
2708
  @media (prefers-color-scheme: dark) {
2931
2709
  border-color: var(--color-gray-500);
@@ -2936,26 +2714,6 @@
2936
2714
  border-color: var(--color-gray-600);
2937
2715
  }
2938
2716
  }
2939
- .dark\:border-gray-700 {
2940
- @media (prefers-color-scheme: dark) {
2941
- border-color: var(--color-gray-700);
2942
- }
2943
- }
2944
- .dark\:border-green-500 {
2945
- @media (prefers-color-scheme: dark) {
2946
- border-color: var(--color-green-500);
2947
- }
2948
- }
2949
- .dark\:border-red-500 {
2950
- @media (prefers-color-scheme: dark) {
2951
- border-color: var(--color-red-500);
2952
- }
2953
- }
2954
- .dark\:border-transparent {
2955
- @media (prefers-color-scheme: dark) {
2956
- border-color: transparent;
2957
- }
2958
- }
2959
2717
  .dark\:bg-blue-600 {
2960
2718
  @media (prefers-color-scheme: dark) {
2961
2719
  background-color: var(--color-blue-600);
@@ -2983,30 +2741,20 @@
2983
2741
  }
2984
2742
  .dark\:bg-gray-800\/50 {
2985
2743
  @media (prefers-color-scheme: dark) {
2986
- background-color: color-mix(in srgb, #1F2937 50%, transparent);
2744
+ background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
2987
2745
  @supports (color: color-mix(in lab, red, red)) {
2988
2746
  background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
2989
2747
  }
2990
2748
  }
2991
2749
  }
2992
- .dark\:bg-gray-900 {
2993
- @media (prefers-color-scheme: dark) {
2994
- background-color: var(--color-gray-900);
2995
- }
2996
- }
2997
2750
  .dark\:bg-gray-900\/80 {
2998
2751
  @media (prefers-color-scheme: dark) {
2999
- background-color: color-mix(in srgb, #111827 80%, transparent);
2752
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
3000
2753
  @supports (color: color-mix(in lab, red, red)) {
3001
2754
  background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
3002
2755
  }
3003
2756
  }
3004
2757
  }
3005
- .dark\:bg-green-600 {
3006
- @media (prefers-color-scheme: dark) {
3007
- background-color: var(--color-green-600);
3008
- }
3009
- }
3010
2758
  .dark\:bg-green-800 {
3011
2759
  @media (prefers-color-scheme: dark) {
3012
2760
  background-color: var(--color-green-800);
@@ -3017,16 +2765,6 @@
3017
2765
  background-color: var(--color-orange-700);
3018
2766
  }
3019
2767
  }
3020
- .dark\:bg-purple-600 {
3021
- @media (prefers-color-scheme: dark) {
3022
- background-color: var(--color-purple-600);
3023
- }
3024
- }
3025
- .dark\:bg-red-600 {
3026
- @media (prefers-color-scheme: dark) {
3027
- background-color: var(--color-red-600);
3028
- }
3029
- }
3030
2768
  .dark\:bg-red-800 {
3031
2769
  @media (prefers-color-scheme: dark) {
3032
2770
  background-color: var(--color-red-800);
@@ -3037,11 +2775,6 @@
3037
2775
  color: var(--color-blue-200);
3038
2776
  }
3039
2777
  }
3040
- .dark\:text-blue-500 {
3041
- @media (prefers-color-scheme: dark) {
3042
- color: var(--color-blue-500);
3043
- }
3044
- }
3045
2778
  .dark\:text-gray-300 {
3046
2779
  @media (prefers-color-scheme: dark) {
3047
2780
  color: var(--color-gray-300);
@@ -3052,26 +2785,11 @@
3052
2785
  color: var(--color-gray-400);
3053
2786
  }
3054
2787
  }
3055
- .dark\:text-gray-500 {
3056
- @media (prefers-color-scheme: dark) {
3057
- color: var(--color-gray-500);
3058
- }
3059
- }
3060
- .dark\:text-gray-600 {
3061
- @media (prefers-color-scheme: dark) {
3062
- color: var(--color-gray-600);
3063
- }
3064
- }
3065
2788
  .dark\:text-green-200 {
3066
2789
  @media (prefers-color-scheme: dark) {
3067
2790
  color: var(--color-green-200);
3068
2791
  }
3069
2792
  }
3070
- .dark\:text-green-500 {
3071
- @media (prefers-color-scheme: dark) {
3072
- color: var(--color-green-500);
3073
- }
3074
- }
3075
2793
  .dark\:text-orange-200 {
3076
2794
  @media (prefers-color-scheme: dark) {
3077
2795
  color: var(--color-orange-200);
@@ -3082,11 +2800,6 @@
3082
2800
  color: var(--color-red-200);
3083
2801
  }
3084
2802
  }
3085
- .dark\:text-red-400 {
3086
- @media (prefers-color-scheme: dark) {
3087
- color: var(--color-red-400);
3088
- }
3089
- }
3090
2803
  .dark\:text-red-500 {
3091
2804
  @media (prefers-color-scheme: dark) {
3092
2805
  color: var(--color-red-500);
@@ -3097,43 +2810,6 @@
3097
2810
  color: var(--color-white);
3098
2811
  }
3099
2812
  }
3100
- .dark\:placeholder-gray-400 {
3101
- @media (prefers-color-scheme: dark) {
3102
- &::placeholder {
3103
- color: var(--color-gray-400);
3104
- }
3105
- }
3106
- }
3107
- .dark\:placeholder-red-500 {
3108
- @media (prefers-color-scheme: dark) {
3109
- &::placeholder {
3110
- color: var(--color-red-500);
3111
- }
3112
- }
3113
- }
3114
- .dark\:ring-offset-gray-800 {
3115
- @media (prefers-color-scheme: dark) {
3116
- --tw-ring-offset-color: var(--color-gray-800);
3117
- }
3118
- }
3119
- .dark\:hover\:border-gray-600 {
3120
- @media (prefers-color-scheme: dark) {
3121
- &:hover {
3122
- @media (hover: hover) {
3123
- border-color: var(--color-gray-600);
3124
- }
3125
- }
3126
- }
3127
- }
3128
- .dark\:hover\:bg-blue-500 {
3129
- @media (prefers-color-scheme: dark) {
3130
- &:hover {
3131
- @media (hover: hover) {
3132
- background-color: var(--color-blue-500);
3133
- }
3134
- }
3135
- }
3136
- }
3137
2813
  .dark\:hover\:bg-blue-700 {
3138
2814
  @media (prefers-color-scheme: dark) {
3139
2815
  &:hover {
@@ -3152,15 +2828,6 @@
3152
2828
  }
3153
2829
  }
3154
2830
  }
3155
- .dark\:hover\:bg-gray-700 {
3156
- @media (prefers-color-scheme: dark) {
3157
- &:hover {
3158
- @media (hover: hover) {
3159
- background-color: var(--color-gray-700);
3160
- }
3161
- }
3162
- }
3163
- }
3164
2831
  .dark\:hover\:bg-gray-800 {
3165
2832
  @media (prefers-color-scheme: dark) {
3166
2833
  &:hover {
@@ -3170,60 +2837,6 @@
3170
2837
  }
3171
2838
  }
3172
2839
  }
3173
- .dark\:hover\:bg-green-600 {
3174
- @media (prefers-color-scheme: dark) {
3175
- &:hover {
3176
- @media (hover: hover) {
3177
- background-color: var(--color-green-600);
3178
- }
3179
- }
3180
- }
3181
- }
3182
- .dark\:hover\:bg-green-700 {
3183
- @media (prefers-color-scheme: dark) {
3184
- &:hover {
3185
- @media (hover: hover) {
3186
- background-color: var(--color-green-700);
3187
- }
3188
- }
3189
- }
3190
- }
3191
- .dark\:hover\:bg-purple-700 {
3192
- @media (prefers-color-scheme: dark) {
3193
- &:hover {
3194
- @media (hover: hover) {
3195
- background-color: var(--color-purple-700);
3196
- }
3197
- }
3198
- }
3199
- }
3200
- .dark\:hover\:bg-red-700 {
3201
- @media (prefers-color-scheme: dark) {
3202
- &:hover {
3203
- @media (hover: hover) {
3204
- background-color: var(--color-red-700);
3205
- }
3206
- }
3207
- }
3208
- }
3209
- .dark\:hover\:text-blue-500 {
3210
- @media (prefers-color-scheme: dark) {
3211
- &:hover {
3212
- @media (hover: hover) {
3213
- color: var(--color-blue-500);
3214
- }
3215
- }
3216
- }
3217
- }
3218
- .dark\:hover\:text-gray-300 {
3219
- @media (prefers-color-scheme: dark) {
3220
- &:hover {
3221
- @media (hover: hover) {
3222
- color: var(--color-gray-300);
3223
- }
3224
- }
3225
- }
3226
- }
3227
2840
  .dark\:hover\:text-white {
3228
2841
  @media (prefers-color-scheme: dark) {
3229
2842
  &:hover {
@@ -3242,27 +2855,6 @@
3242
2855
  }
3243
2856
  }
3244
2857
  }
3245
- .dark\:focus\:border-blue-500 {
3246
- @media (prefers-color-scheme: dark) {
3247
- &:focus {
3248
- border-color: var(--color-blue-500);
3249
- }
3250
- }
3251
- }
3252
- .dark\:focus\:ring-blue-500 {
3253
- @media (prefers-color-scheme: dark) {
3254
- &:focus {
3255
- --tw-ring-color: var(--color-blue-500);
3256
- }
3257
- }
3258
- }
3259
- .dark\:focus\:ring-blue-600 {
3260
- @media (prefers-color-scheme: dark) {
3261
- &:focus {
3262
- --tw-ring-color: var(--color-blue-600);
3263
- }
3264
- }
3265
- }
3266
2858
  .dark\:focus\:ring-blue-800 {
3267
2859
  @media (prefers-color-scheme: dark) {
3268
2860
  &:focus {
@@ -3277,48 +2869,90 @@
3277
2869
  }
3278
2870
  }
3279
2871
  }
3280
- .dark\:focus\:ring-gray-700 {
3281
- @media (prefers-color-scheme: dark) {
3282
- &:focus {
3283
- --tw-ring-color: var(--color-gray-700);
3284
- }
3285
- }
3286
- }
3287
- .dark\:focus\:ring-green-800 {
3288
- @media (prefers-color-scheme: dark) {
3289
- &:focus {
3290
- --tw-ring-color: var(--color-green-800);
3291
- }
3292
- }
3293
- }
3294
- .dark\:focus\:ring-purple-900 {
3295
- @media (prefers-color-scheme: dark) {
3296
- &:focus {
3297
- --tw-ring-color: var(--color-purple-900);
3298
- }
3299
- }
3300
- }
3301
- .dark\:focus\:ring-red-600 {
3302
- @media (prefers-color-scheme: dark) {
3303
- &:focus {
3304
- --tw-ring-color: var(--color-red-600);
3305
- }
3306
- }
3307
- }
3308
- .dark\:focus\:ring-red-900 {
3309
- @media (prefers-color-scheme: dark) {
3310
- &:focus {
3311
- --tw-ring-color: var(--color-red-900);
3312
- }
3313
- }
3314
- }
3315
- .dark\:focus\:ring-yellow-900 {
3316
- @media (prefers-color-scheme: dark) {
3317
- &:focus {
3318
- --tw-ring-color: var(--color-yellow-900);
3319
- }
3320
- }
3321
- }
2872
+ }
2873
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
2874
+ .dark {
2875
+ --color-body: var(--color-gray-400);
2876
+ --color-body-subtle: var(--color-gray-400);
2877
+ --color-heading: var(--color-white);
2878
+ --color-fg-brand-subtle: var(--color-blue-200);
2879
+ --color-fg-brand: var(--color-blue-500);
2880
+ --color-fg-brand-strong: var(--color-blue-400);
2881
+ --color-fg-success: var(--color-emerald-600);
2882
+ --color-fg-success-strong: var(--color-emerald-300);
2883
+ --color-fg-danger: var(--color-rose-500);
2884
+ --color-fg-danger-strong: var(--color-rose-300);
2885
+ --color-fg-warning-subtle: var(--color-orange-500);
2886
+ --color-fg-warning: var(--color-orange-300);
2887
+ --color-fg-yellow: var(--color-yellow-400);
2888
+ --color-fg-disabled: var(--color-gray-600);
2889
+ --color-fg-purple: var(--color-purple-500);
2890
+ --color-fg-cyan: var(--color-cyan-500);
2891
+ --color-fg-indigo: var(--color-indigo-500);
2892
+ --color-fg-pink: var(--color-pink-500);
2893
+ --color-fg-lime: var(--color-lime-500);
2894
+ --color-neutral-primary-soft: var(--color-gray-900);
2895
+ --color-neutral-primary: var(--color-gray-950);
2896
+ --color-neutral-primary-medium: var(--color-gray-800);
2897
+ --color-neutral-primary-strong: var(--color-gray-700);
2898
+ --color-neutral-secondary-soft: var(--color-gray-900);
2899
+ --color-neutral-secondary: var(--color-gray-950);
2900
+ --color-neutral-secondary-medium: var(--color-gray-800);
2901
+ --color-neutral-secondary-strong: var(--color-gray-700);
2902
+ --color-neutral-secondary-strongest: var(--color-gray-600);
2903
+ --color-neutral-tertiary-soft: var(--color-gray-900);
2904
+ --color-neutral-tertiary: var(--color-gray-800);
2905
+ --color-neutral-tertiary-medium: var(--color-gray-700);
2906
+ --color-neutral-quaternary: var(--color-gray-700);
2907
+ --color-neutral-quaternary-medium: var(--color-gray-600);
2908
+ --color-gray: var(--color-gray-600);
2909
+ --color-brand-softer: var(--color-blue-950);
2910
+ --color-brand-soft: var(--color-blue-900);
2911
+ --color-brand: var(--color-blue-600);
2912
+ --color-brand-medium: var(--color-blue-900);
2913
+ --color-brand-strong: var(--color-blue-700);
2914
+ --color-success-soft: var(--color-emerald-950);
2915
+ --color-success: var(--color-emerald-600);
2916
+ --color-success-medium: var(--color-emerald-900);
2917
+ --color-success-strong: var(--color-emerald-700);
2918
+ --color-danger-soft: var(--color-rose-950);
2919
+ --color-danger: var(--color-rose-700);
2920
+ --color-danger-medium: var(--color-rose-900);
2921
+ --color-danger-strong: var(--color-rose-800);
2922
+ --color-warning-soft: var(--color-orange-950);
2923
+ --color-warning: var(--color-orange-600);
2924
+ --color-warning-medium: var(--color-orange-900);
2925
+ --color-warning-strong: var(--color-orange-700);
2926
+ --color-dark-soft: var(--color-gray-700);
2927
+ --color-dark: var(--color-gray-800);
2928
+ --color-dark-strong: var(--color-gray-700);
2929
+ --color-disabled: var(--color-gray-800);
2930
+ --color-purple: var(--color-purple-500);
2931
+ --color-sky: var(--color-sky-500);
2932
+ --color-teal: var(--color-teal-500);
2933
+ --color-pink: var(--color-pink-500);
2934
+ --color-cyan: var(--color-cyan-500);
2935
+ --color-fuchsia: var(--color-fuchsia-500);
2936
+ --color-indigo: var(--color-indigo-500);
2937
+ --color-orange: var(--color-orange-400);
2938
+ --color-buffer: var(--color-gray-950);
2939
+ --color-buffer-medium: var(--color-gray-900);
2940
+ --color-buffer-strong: var(--color-gray-800);
2941
+ --color-muted: var(--color-gray-900);
2942
+ --color-light-subtle: var(--color-gray-900);
2943
+ --color-light: var(--color-gray-800);
2944
+ --color-light-medium: var(--color-gray-700);
2945
+ --color-default-subtle: var(--color-gray-900);
2946
+ --color-default: var(--color-gray-800);
2947
+ --color-default-medium: var(--color-gray-700);
2948
+ --color-default-strong: var(--color-gray-600);
2949
+ --color-success-subtle: var(--color-emerald-900);
2950
+ --color-danger-subtle: var(--color-rose-900);
2951
+ --color-warning-subtle: var(--color-orange-900);
2952
+ --color-brand-subtle: var(--color-blue-900);
2953
+ --color-brand-light: var(--color-blue-600);
2954
+ --color-dark-subtle: var(--color-gray-700);
2955
+ --color-dark-backdrop: var(--color-gray-950);
3322
2956
  }
3323
2957
  @layer base {
3324
2958
  .tooltip-arrow,.tooltip-arrow:before {
@@ -3337,7 +2971,7 @@
3337
2971
  }
3338
2972
  [data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
3339
2973
  border-style: solid;
3340
- border-color: var(--color-gray-200);
2974
+ border-color: var(--color-neutral-tertiary);
3341
2975
  }
3342
2976
  [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
3343
2977
  border-bottom-width: 1px;
@@ -3356,16 +2990,16 @@
3356
2990
  border-right-width: 1px;
3357
2991
  }
3358
2992
  .tooltip[data-popper-placement^='top'] > .tooltip-arrow {
3359
- bottom: -4px;
2993
+ bottom: -3px;
3360
2994
  }
3361
2995
  .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
3362
- top: -4px;
2996
+ top: -3px;
3363
2997
  }
3364
2998
  .tooltip[data-popper-placement^='left'] > .tooltip-arrow {
3365
- right: -4px;
2999
+ right: -3px;
3366
3000
  }
3367
3001
  .tooltip[data-popper-placement^='right'] > .tooltip-arrow {
3368
- left: -4px;
3002
+ left: -3px;
3369
3003
  }
3370
3004
  .tooltip.invisible > .tooltip-arrow:before {
3371
3005
  visibility: hidden;
@@ -3395,19 +3029,19 @@
3395
3029
  }
3396
3030
  [role="tooltip"] > [data-popper-arrow]:before {
3397
3031
  border-style: solid;
3398
- border-color: var(--color-gray-200);
3032
+ border-color: var(--color-neutral-tertiary);
3399
3033
  }
3400
3034
  .dark [role="tooltip"] > [data-popper-arrow]:before {
3401
3035
  border-style: solid;
3402
- border-color: var(--color-gray-600);
3036
+ border-color: var(--color-dark);
3403
3037
  }
3404
3038
  [role="tooltip"] > [data-popper-arrow]:after {
3405
3039
  border-style: solid;
3406
- border-color: var(--color-gray-200);
3040
+ border-color: var(--color-neutral-tertiary);
3407
3041
  }
3408
3042
  .dark [role="tooltip"] > [data-popper-arrow]:after {
3409
3043
  border-style: solid;
3410
- border-color: var(--color-gray-600);
3044
+ border-color: var(--color-dark);
3411
3045
  }
3412
3046
  [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
3413
3047
  border-bottom-width: 1px;
@@ -3442,16 +3076,16 @@
3442
3076
  border-right-width: 1px;
3443
3077
  }
3444
3078
  [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
3445
- bottom: -5px;
3079
+ bottom: -4px;
3446
3080
  }
3447
3081
  [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
3448
- top: -5px;
3082
+ top: -4px;
3449
3083
  }
3450
3084
  [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
3451
- right: -5px;
3085
+ right: -4px;
3452
3086
  }
3453
3087
  [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
3454
- left: -5px;
3088
+ left: -4px;
3455
3089
  }
3456
3090
  [role="tooltip"].invisible > [data-popper-arrow]:before {
3457
3091
  visibility: hidden;
@@ -3464,7 +3098,7 @@
3464
3098
  [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
3465
3099
  appearance: none;
3466
3100
  background-color: #fff;
3467
- border-color: var(--color-gray-500);
3101
+ border-color: var(--color-body);
3468
3102
  border-width: 1px;
3469
3103
  border-radius: 0px;
3470
3104
  padding-top: 0.5rem;
@@ -3480,15 +3114,15 @@
3480
3114
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3481
3115
  --tw-ring-offset-width: 0px;
3482
3116
  --tw-ring-offset-color: #fff;
3483
- --tw-ring-color: var(--color-blue-600);
3117
+ --tw-ring-color: var(--color-brand);
3484
3118
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3485
3119
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3486
3120
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3487
- border-color: var(--color-blue-600);
3121
+ border-color: var(--color-brand);
3488
3122
  }
3489
3123
  }
3490
3124
  input::placeholder,textarea::placeholder {
3491
- color: var(--color-gray-500);
3125
+ color: var(--color-body);
3492
3126
  opacity: 1;
3493
3127
  }
3494
3128
  ::-webkit-datetime-edit-fields-wrapper {
@@ -3498,7 +3132,7 @@
3498
3132
  background: none;
3499
3133
  }
3500
3134
  select:not([size]) {
3501
- background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
3135
+ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
3502
3136
  background-position: right 0.75rem center;
3503
3137
  background-repeat: no-repeat;
3504
3138
  background-size: 0.75em 0.75em;
@@ -3519,6 +3153,7 @@
3519
3153
  print-color-adjust: unset;
3520
3154
  }
3521
3155
  [type='checkbox'],[type='radio'] {
3156
+ position: relative;
3522
3157
  appearance: none;
3523
3158
  padding: 0;
3524
3159
  print-color-adjust: exact;
@@ -3529,9 +3164,9 @@
3529
3164
  flex-shrink: 0;
3530
3165
  height: 1rem;
3531
3166
  width: 1rem;
3532
- color: var(--color-blue-600);
3167
+ color: var(--color-brand);
3533
3168
  background-color: #fff;
3534
- border-color: --color-gray-500;
3169
+ border-color: var(--color-default);
3535
3170
  border-width: 1px;
3536
3171
  --tw-shadow: 0 0 #0000;
3537
3172
  }
@@ -3542,36 +3177,72 @@
3542
3177
  border-radius: 100%;
3543
3178
  }
3544
3179
  [type='checkbox']:focus,[type='radio']:focus {
3545
- outline: 2px solid transparent;
3546
- outline-offset: 2px;
3180
+ outline: 1px solid transparent;
3547
3181
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3548
- --tw-ring-offset-width: 2px;
3549
3182
  --tw-ring-offset-color: #fff;
3550
- --tw-ring-color: var(--color-blue-600);
3183
+ --tw-ring-color: var(--color-brand);
3551
3184
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3552
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3185
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3553
3186
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3554
3187
  }
3188
+ [type='checkbox']:checked,.dark [type='checkbox']:checked {
3189
+ border-color: currentColor !important;
3190
+ }
3555
3191
  [type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked {
3556
- border-color: transparent !important;
3557
3192
  background-color: currentColor !important;
3558
- background-size: 0.55em 0.55em;
3193
+ background-size: 0.85em 0.85em !important;
3559
3194
  background-position: center;
3560
3195
  background-repeat: no-repeat;
3561
3196
  }
3562
3197
  [type='checkbox']:checked {
3563
- background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
3198
+ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 11.917 9.724 16.5 19 7.5'/%3e %3c/svg%3e");
3564
3199
  background-repeat: no-repeat;
3565
- background-size: 0.55em 0.55em;
3200
+ background-size: 0.75em 0.75em;
3566
3201
  print-color-adjust: exact;
3567
3202
  }
3568
- [type='radio']:checked {
3569
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
3570
- background-size: 1em 1em;
3203
+ [type='radio']:checked:before, [type='radio']:disabled:checked:before {
3204
+ content: '';
3205
+ position: absolute;
3206
+ top: 50%;
3207
+ left: 50%;
3208
+ transform: translate(-50%, -50%);
3209
+ border-radius: 100%;
3210
+ background-color: var(--color-brand);
3211
+ width: .9em !important;
3212
+ height: .9em !important;
3571
3213
  }
3572
- .dark [type='radio']:checked {
3573
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
3574
- background-size: 1em 1em;
3214
+ [type='radio']:checked:after, [type='radio']:disabled:checked:after {
3215
+ content: '';
3216
+ position: absolute;
3217
+ top: 50%;
3218
+ left: 50%;
3219
+ transform: translate(-50%, -50%);
3220
+ border-radius: 100%;
3221
+ background-color: var(--color-white);
3222
+ width: .35em !important;
3223
+ height: .35em !important;
3224
+ }
3225
+ .dark [type='radio']:checked:before, .dark [type='radio']:disabled:checked:before {
3226
+ content: '';
3227
+ position: absolute;
3228
+ top: 50%;
3229
+ left: 50%;
3230
+ transform: translate(-50%, -50%);
3231
+ border-radius: 100%;
3232
+ background-color: var(--color-brand);
3233
+ width: .9em !important;
3234
+ height: .9em !important;
3235
+ }
3236
+ .dark [type='radio']:checked:after, .dark [type='radio']:disabled:checked:after {
3237
+ content: '';
3238
+ position: absolute;
3239
+ top: 50%;
3240
+ left: 50%;
3241
+ transform: translate(-50%, -50%);
3242
+ border-radius: 100%;
3243
+ background-color: var(--color-white);
3244
+ width: .35em !important;
3245
+ height: .35em !important;
3575
3246
  }
3576
3247
  [type='checkbox']:indeterminate {
3577
3248
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
@@ -3579,7 +3250,7 @@
3579
3250
  border-color: transparent !important;
3580
3251
  background-position: center;
3581
3252
  background-repeat: no-repeat;
3582
- background-size: 0.55em 0.55em;
3253
+ background-size: 1.55em 1.55em;
3583
3254
  print-color-adjust: exact;
3584
3255
  }
3585
3256
  [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
@@ -3599,8 +3270,8 @@
3599
3270
  outline: 1px auto inherit;
3600
3271
  }
3601
3272
  input[type=file]::file-selector-button {
3602
- color: white;
3603
- background: var(--color-gray-800);
3273
+ color: var(--color-body);
3274
+ background: var(--color-neutral-quaternary);
3604
3275
  border: 0;
3605
3276
  font-weight: 500;
3606
3277
  font-size: 0.875rem;
@@ -3612,7 +3283,7 @@
3612
3283
  margin-inline-start: -1rem;
3613
3284
  margin-inline-end: 1rem;
3614
3285
  &:hover {
3615
- background: var(--color-gray-700);
3286
+ background: var(--color-neutral-quaternary);
3616
3287
  }
3617
3288
  }
3618
3289
  :is([dir=rtl]) input[type=file]::file-selector-button {
@@ -3620,16 +3291,16 @@
3620
3291
  padding-left: 1rem;
3621
3292
  }
3622
3293
  .dark input[type=file]::file-selector-button {
3623
- color: white;
3624
- background: var(--color-gray-600);
3294
+ color: var(--color-body);
3295
+ background: var(--color-neutral-quaternary);
3625
3296
  &:hover {
3626
- background: var(--color-gray-500);
3297
+ background: var(--color-neutral-quaternary);
3627
3298
  }
3628
3299
  }
3629
3300
  input[type="range"]::-webkit-slider-thumb {
3630
3301
  height: 1.25rem;
3631
3302
  width: 1.25rem;
3632
- background: var(--color-blue-600);
3303
+ background: var(--color-brand);
3633
3304
  border-radius: 9999px;
3634
3305
  border: 0;
3635
3306
  appearance: none;
@@ -3638,10 +3309,10 @@
3638
3309
  cursor: pointer;
3639
3310
  }
3640
3311
  input[type="range"]:disabled::-webkit-slider-thumb {
3641
- background: var(--color-gray-400);
3312
+ background: var(--color-body);
3642
3313
  }
3643
3314
  .dark input[type="range"]:disabled::-webkit-slider-thumb {
3644
- background: var(--color-gray-500);
3315
+ background: var(--color-body);
3645
3316
  }
3646
3317
  input[type="range"]:focus::-webkit-slider-thumb {
3647
3318
  outline: 2px solid transparent;
@@ -3655,7 +3326,7 @@
3655
3326
  input[type="range"]::-moz-range-thumb {
3656
3327
  height: 1.25rem;
3657
3328
  width: 1.25rem;
3658
- background: var(--color-blue-600);
3329
+ background: var(--color-brand);
3659
3330
  border-radius: 9999px;
3660
3331
  border: 0;
3661
3332
  appearance: none;
@@ -3664,16 +3335,16 @@
3664
3335
  cursor: pointer;
3665
3336
  }
3666
3337
  input[type="range"]:disabled::-moz-range-thumb {
3667
- background: var(--color-gray-400);
3338
+ background: var(--color-body);
3668
3339
  }
3669
3340
  .dark input[type="range"]:disabled::-moz-range-thumb {
3670
- background: var(--color-gray-500);
3341
+ background: var(--color-body);
3671
3342
  }
3672
3343
  input[type="range"]::-moz-range-progress {
3673
- background: var(--color-blue-500);
3344
+ background: var(--color-brand);
3674
3345
  }
3675
3346
  input[type="range"]::-ms-fill-lower {
3676
- background: var(--color-blue-500);
3347
+ background: var(--color-brand);
3677
3348
  }
3678
3349
  input[type="range"].range-sm::-webkit-slider-thumb {
3679
3350
  height: 1rem;
@@ -3697,7 +3368,7 @@
3697
3368
  top: 0.125rem;
3698
3369
  left: 0.125rem;
3699
3370
  background: white;
3700
- border-color: var(--color-gray-300);
3371
+ border-color: var(--color-default);
3701
3372
  border-width: 1px;
3702
3373
  border-radius: 9999px;
3703
3374
  height: 1.25rem;
@@ -3711,8 +3382,8 @@
3711
3382
  border-color: white;
3712
3383
  }
3713
3384
  input:checked + .toggle-bg {
3714
- background: var(--color-blue-600);
3715
- border-color: var(--color-blue-600);
3385
+ background: var(--color-brand);
3386
+ border-color: var(--color-brand);
3716
3387
  }
3717
3388
  }
3718
3389
  @property --tw-translate-x {