zabi-components 7.0.2 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/README.md +46 -3
  2. package/THEMING.md +255 -15
  3. package/dist/atoms/ActionPanel.svelte +12 -7
  4. package/dist/atoms/ActionPanel.svelte.d.ts +2 -0
  5. package/dist/atoms/Badge.svelte +93 -56
  6. package/dist/atoms/Badge.svelte.d.ts +15 -3
  7. package/dist/atoms/Button.svelte +49 -49
  8. package/dist/atoms/Button.svelte.d.ts +3 -0
  9. package/dist/atoms/Card.svelte +31 -28
  10. package/dist/atoms/Card.svelte.d.ts +5 -2
  11. package/dist/atoms/CardContent.svelte +10 -2
  12. package/dist/atoms/CardContent.svelte.d.ts +2 -0
  13. package/dist/atoms/CardFooter.svelte +10 -2
  14. package/dist/atoms/CardFooter.svelte.d.ts +2 -0
  15. package/dist/atoms/CardHeader.svelte +10 -2
  16. package/dist/atoms/CardHeader.svelte.d.ts +2 -0
  17. package/dist/atoms/Checkbox.svelte +4 -0
  18. package/dist/atoms/Checkbox.svelte.d.ts +2 -0
  19. package/dist/atoms/CodeBlock.svelte +15 -7
  20. package/dist/atoms/CodeBlock.svelte.d.ts +9 -3
  21. package/dist/atoms/ColorPicker.svelte +19 -9
  22. package/dist/atoms/ColorPicker.svelte.d.ts +3 -1
  23. package/dist/atoms/Container.svelte +2 -3
  24. package/dist/atoms/Divider.svelte +4 -4
  25. package/dist/atoms/FeatureCard.svelte +4 -3
  26. package/dist/atoms/Heading.svelte +56 -27
  27. package/dist/atoms/Heading.svelte.d.ts +17 -4
  28. package/dist/atoms/IconButton.svelte +30 -37
  29. package/dist/atoms/Input.svelte +26 -34
  30. package/dist/atoms/List.svelte +10 -2
  31. package/dist/atoms/List.svelte.d.ts +2 -0
  32. package/dist/atoms/ListItem.svelte +2 -2
  33. package/dist/atoms/ListItemLeading.svelte +4 -2
  34. package/dist/atoms/ListItemLeading.svelte.d.ts +1 -1
  35. package/dist/atoms/OptimizedImage.svelte +11 -2
  36. package/dist/atoms/OptimizedImage.svelte.d.ts +2 -0
  37. package/dist/atoms/Progress.svelte +4 -1
  38. package/dist/atoms/Progress.svelte.d.ts +2 -0
  39. package/dist/atoms/Radio.svelte +4 -0
  40. package/dist/atoms/Radio.svelte.d.ts +2 -0
  41. package/dist/atoms/Select.svelte +65 -67
  42. package/dist/atoms/Select.svelte.d.ts +4 -0
  43. package/dist/atoms/SelectionControl.svelte +5 -1
  44. package/dist/atoms/SelectionControl.svelte.d.ts +2 -0
  45. package/dist/atoms/Skeleton.svelte +5 -3
  46. package/dist/atoms/Table.svelte +2 -1
  47. package/dist/atoms/Text.svelte +34 -5
  48. package/dist/atoms/Text.svelte.d.ts +7 -1
  49. package/dist/atoms/Textarea.svelte +7 -6
  50. package/dist/atoms/ThemeToggle.svelte +17 -14
  51. package/dist/atoms/ThemeToggle.svelte.d.ts +2 -0
  52. package/dist/atoms/Toast.svelte +10 -8
  53. package/dist/atoms/Toggle.svelte +21 -13
  54. package/dist/atoms/Toggle.svelte.d.ts +7 -0
  55. package/dist/atoms/Tooltip.svelte +80 -22
  56. package/dist/atoms/Tooltip.svelte.d.ts +15 -0
  57. package/dist/components/index.d.ts +3 -1
  58. package/dist/components/index.d.ts.map +1 -1
  59. package/dist/components/organisms/index.d.ts +1 -0
  60. package/dist/components/organisms/index.d.ts.map +1 -1
  61. package/dist/components/util/cn.d.ts +8 -0
  62. package/dist/components/util/cn.d.ts.map +1 -0
  63. package/dist/components/util/ssr-safe.d.ts +4 -4
  64. package/dist/components/util/ssr-safe.d.ts.map +1 -1
  65. package/dist/index.d.ts +3 -1
  66. package/dist/index.js +3 -6
  67. package/dist/molecules/Alert.svelte +43 -64
  68. package/dist/molecules/Alert.svelte.d.ts +7 -1
  69. package/dist/molecules/ComponentDemo.svelte +10 -2
  70. package/dist/molecules/ComponentDemo.svelte.d.ts +2 -0
  71. package/dist/molecules/ContactForm.svelte +12 -2
  72. package/dist/molecules/ContactForm.svelte.d.ts +2 -0
  73. package/dist/molecules/Dropdown.svelte +40 -11
  74. package/dist/molecules/Dropdown.svelte.d.ts +4 -0
  75. package/dist/molecules/EmptyState.svelte +2 -1
  76. package/dist/molecules/Form.svelte +25 -14
  77. package/dist/molecules/Form.svelte.d.ts +13 -5
  78. package/dist/molecules/FormField.svelte +2 -1
  79. package/dist/molecules/Header.svelte +13 -3
  80. package/dist/molecules/Header.svelte.d.ts +2 -0
  81. package/dist/molecules/ImageUpload.svelte +54 -15
  82. package/dist/molecules/ImageUpload.svelte.d.ts +16 -5
  83. package/dist/molecules/Modal.svelte +110 -31
  84. package/dist/molecules/Modal.svelte.d.ts +9 -6
  85. package/dist/molecules/NavigationMenu.svelte +15 -3
  86. package/dist/molecules/NavigationMenu.svelte.d.ts +4 -0
  87. package/dist/molecules/NavigationMenuContent.svelte +36 -38
  88. package/dist/molecules/NavigationMenuContent.svelte.d.ts +2 -0
  89. package/dist/molecules/NavigationMenuItem.svelte +10 -2
  90. package/dist/molecules/NavigationMenuItem.svelte.d.ts +2 -0
  91. package/dist/molecules/NavigationMenuLink.svelte +10 -2
  92. package/dist/molecules/NavigationMenuLink.svelte.d.ts +2 -0
  93. package/dist/molecules/NavigationMenuList.svelte +10 -2
  94. package/dist/molecules/NavigationMenuList.svelte.d.ts +2 -0
  95. package/dist/molecules/NavigationMenuTrigger.svelte +16 -3
  96. package/dist/molecules/NavigationMenuTrigger.svelte.d.ts +2 -0
  97. package/dist/molecules/Page.svelte +8 -2
  98. package/dist/molecules/Page.svelte.d.ts +2 -0
  99. package/dist/molecules/PropsTable.svelte +6 -3
  100. package/dist/molecules/PropsTable.svelte.d.ts +2 -0
  101. package/dist/molecules/RadioGroup.svelte +5 -1
  102. package/dist/molecules/RadioGroup.svelte.d.ts +2 -0
  103. package/dist/molecules/Section.svelte +12 -4
  104. package/dist/molecules/Section.svelte.d.ts +3 -1
  105. package/dist/molecules/SidebarBrandHeader.svelte +13 -4
  106. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +2 -0
  107. package/dist/molecules/SidebarFooter.svelte +12 -4
  108. package/dist/molecules/SidebarFooter.svelte.d.ts +2 -0
  109. package/dist/molecules/SidebarNavSection.svelte +12 -4
  110. package/dist/molecules/SidebarNavSection.svelte.d.ts +2 -0
  111. package/dist/molecules/SlideUp.svelte +85 -21
  112. package/dist/molecules/SlideUp.svelte.d.ts +5 -4
  113. package/dist/molecules/Tabs.svelte +25 -19
  114. package/dist/molecules/Tabs.svelte.d.ts +8 -4
  115. package/dist/molecules/Toaster.svelte +3 -2
  116. package/dist/molecules/ToasterToast.svelte +41 -10
  117. package/dist/molecules/ToasterToast.svelte.d.ts +2 -0
  118. package/dist/organisms/SidebarAccountPanel.svelte +4 -0
  119. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +2 -0
  120. package/dist/organisms/SidebarNavigation.svelte +102 -59
  121. package/dist/organisms/SidebarNavigation.svelte.d.ts +2 -0
  122. package/dist/organisms/SidebarPanel.svelte +19 -11
  123. package/dist/organisms/SidebarPanel.svelte.d.ts +2 -0
  124. package/dist/organisms/SidebarShell.svelte +112 -0
  125. package/dist/organisms/SidebarShell.svelte.d.ts +52 -0
  126. package/dist/organisms/TopNavbar.svelte +88 -17
  127. package/dist/organisms/TopNavbar.svelte.d.ts +2 -0
  128. package/dist/organisms/index.d.ts +1 -0
  129. package/dist/organisms/index.js +1 -0
  130. package/dist/routes/lib/variant-utils.d.ts +26 -0
  131. package/dist/routes/lib/{variant-utils.ts → variant-utils.js} +15 -46
  132. package/dist/types/events.js +1 -0
  133. package/dist/types/index.js +3 -0
  134. package/dist/util/cn.d.ts +7 -0
  135. package/dist/util/cn.js +48 -0
  136. package/dist/util/ssr-safe.d.ts +4 -4
  137. package/dist/zabi-components-colors.css +2 -2
  138. package/dist/zabi-components-theme-dark-only.css +139 -92
  139. package/dist/zabi-components-theme-dark.css +139 -92
  140. package/dist/zabi-components-theme-only.css +268 -122
  141. package/dist/zabi-components-theme.css +268 -122
  142. package/dist/zabi-components.css +831 -883
  143. package/docs/lucide-icons.md +3 -1
  144. package/package.json +19 -24
  145. package/dist/lib/layout-width-tokens.d.ts +0 -17
  146. package/dist/lib/layout-width-tokens.d.ts.map +0 -1
  147. package/dist/lib/showcase/component-docs/Button.d.ts +0 -3
  148. package/dist/lib/showcase/component-docs/Button.d.ts.map +0 -1
  149. package/dist/lib/showcase/component-docs/Input.d.ts +0 -3
  150. package/dist/lib/showcase/component-docs/Input.d.ts.map +0 -1
  151. package/dist/lib/showcase/component-docs/List.d.ts +0 -3
  152. package/dist/lib/showcase/component-docs/List.d.ts.map +0 -1
  153. package/dist/lib/showcase/component-docs/Modal.d.ts +0 -3
  154. package/dist/lib/showcase/component-docs/Modal.d.ts.map +0 -1
  155. package/dist/lib/showcase/component-docs/Radio.d.ts +0 -3
  156. package/dist/lib/showcase/component-docs/Radio.d.ts.map +0 -1
  157. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts +0 -3
  158. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts.map +0 -1
  159. package/dist/lib/showcase/component-docs/Skeleton.d.ts +0 -3
  160. package/dist/lib/showcase/component-docs/Skeleton.d.ts.map +0 -1
  161. package/dist/lib/showcase/component-docs/_shared.d.ts +0 -12
  162. package/dist/lib/showcase/component-docs/_shared.d.ts.map +0 -1
  163. package/dist/lib/showcase/component-docs/index.d.ts +0 -4
  164. package/dist/lib/showcase/component-docs/index.d.ts.map +0 -1
  165. package/dist/lib/showcase/components-catalog.d.ts +0 -3
  166. package/dist/lib/showcase/components-catalog.d.ts.map +0 -1
  167. package/dist/lib/showcase/components-showcase-constants.d.ts +0 -89
  168. package/dist/lib/showcase/components-showcase-constants.d.ts.map +0 -1
  169. package/dist/lib/showcase/docs-sidebar-helpers.d.ts +0 -15
  170. package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +0 -1
  171. package/dist/routes/lib/focus-utils.d.ts +0 -12
  172. package/dist/routes/lib/focus-utils.ts +0 -110
  173. package/dist/routes/lib/ssr-safe.ts +0 -58
  174. package/scripts/fix-lucide-svelte-icon-dts.js +0 -35
@@ -7,46 +7,8 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
- --color-red-50: oklch(97.1% 0.013 17.38);
11
- --color-red-100: oklch(93.6% 0.032 17.717);
12
- --color-red-200: oklch(88.5% 0.062 18.334);
13
- --color-red-300: oklch(80.8% 0.114 19.571);
14
- --color-red-400: oklch(70.4% 0.191 22.216);
15
10
  --color-red-500: oklch(63.7% 0.237 25.331);
16
- --color-red-600: oklch(57.7% 0.245 27.325);
17
- --color-red-700: oklch(50.5% 0.213 27.518);
18
- --color-red-800: oklch(44.4% 0.177 26.899);
19
- --color-red-900: oklch(39.6% 0.141 25.723);
20
- --color-yellow-50: oklch(98.7% 0.026 102.212);
21
- --color-yellow-100: oklch(97.3% 0.071 103.193);
22
- --color-yellow-200: oklch(94.5% 0.129 101.54);
23
- --color-yellow-300: oklch(90.5% 0.182 98.111);
24
- --color-yellow-500: oklch(79.5% 0.184 86.047);
25
- --color-yellow-800: oklch(47.6% 0.114 61.907);
26
- --color-yellow-900: oklch(42.1% 0.095 57.708);
27
- --color-green-50: oklch(98.2% 0.018 155.826);
28
- --color-green-100: oklch(96.2% 0.044 156.743);
29
- --color-green-200: oklch(92.5% 0.084 155.995);
30
11
  --color-green-300: oklch(87.1% 0.15 154.449);
31
- --color-green-400: oklch(79.2% 0.209 151.711);
32
- --color-green-500: oklch(72.3% 0.219 149.579);
33
- --color-green-600: oklch(62.7% 0.194 149.214);
34
- --color-green-700: oklch(52.7% 0.154 150.069);
35
- --color-green-800: oklch(44.8% 0.119 151.328);
36
- --color-green-900: oklch(39.3% 0.095 152.535);
37
- --color-blue-50: oklch(97% 0.014 254.604);
38
- --color-blue-100: oklch(93.2% 0.032 255.585);
39
- --color-blue-200: oklch(88.2% 0.059 254.128);
40
- --color-blue-300: oklch(80.9% 0.105 251.813);
41
- --color-blue-400: oklch(70.7% 0.165 254.624);
42
- --color-blue-500: oklch(62.3% 0.214 259.815);
43
- --color-blue-700: oklch(48.8% 0.243 264.376);
44
- --color-blue-800: oklch(42.4% 0.199 265.638);
45
- --color-purple-400: oklch(71.4% 0.203 305.504);
46
- --color-purple-500: oklch(62.7% 0.265 303.9);
47
- --color-purple-600: oklch(55.8% 0.288 302.321);
48
- --color-purple-700: oklch(49.6% 0.265 301.924);
49
- --color-purple-800: oklch(43.8% 0.218 303.724);
50
12
  --color-gray-50: oklch(98.5% 0.002 247.839);
51
13
  --color-black: #000;
52
14
  --color-white: #fff;
@@ -90,6 +52,7 @@
90
52
  --tracking-tight: -0.025em;
91
53
  --tracking-normal: 0em;
92
54
  --tracking-wide: 0.025em;
55
+ --tracking-wider: 0.05em;
93
56
  --leading-tight: 1.25;
94
57
  --leading-snug: 1.375;
95
58
  --leading-relaxed: 1.625;
@@ -100,10 +63,10 @@
100
63
  --radius-xl: 0.75rem;
101
64
  --radius-2xl: 1rem;
102
65
  --radius-3xl: 1.5rem;
103
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
104
66
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
105
67
  --animate-spin: spin 1s linear infinite;
106
68
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
69
+ --blur-md: 12px;
107
70
  --default-transition-duration: 150ms;
108
71
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
109
72
  --default-font-family: var(--font-sans);
@@ -130,17 +93,17 @@
130
93
  --zabi-base-925: #101013;
131
94
  --zabi-base-950: #09090b;
132
95
  --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
133
- --zabi-brand-50: #f7faff;
134
- --zabi-brand-100: #edf2fb;
135
- --zabi-brand-200: #dfe7fb;
136
- --zabi-brand-300: #ccdbfd;
137
- --zabi-brand-400: #abc4ff;
138
- --zabi-brand-500: #8fa8ff;
139
- --zabi-brand-600: #6e84fa;
140
- --zabi-brand-700: #5366e2;
141
- --zabi-brand-800: #3f4fc0;
142
- --zabi-brand-900: #2f3c99;
143
- --zabi-brand-950: #1f2866;
96
+ --zabi-brand-50: #f4f6ff;
97
+ --zabi-brand-100: #e9eeff;
98
+ --zabi-brand-200: #d3dcff;
99
+ --zabi-brand-300: #b5c6ff;
100
+ --zabi-brand-400: #92a9ff;
101
+ --zabi-brand-500: #6d87f1;
102
+ --zabi-brand-600: #4f68da;
103
+ --zabi-brand-700: #3c52ba;
104
+ --zabi-brand-800: #2b3e95;
105
+ --zabi-brand-900: #1c2c6d;
106
+ --zabi-brand-950: #111d49;
144
107
  --color-brand-50: var(--zabi-brand-50);
145
108
  --color-brand-100: var(--zabi-brand-100);
146
109
  --color-brand-200: var(--zabi-brand-200);
@@ -152,90 +115,93 @@
152
115
  --color-brand-800: var(--zabi-brand-800);
153
116
  --color-brand-900: var(--zabi-brand-900);
154
117
  --color-brand-950: var(--zabi-brand-950);
155
- --zabi-citron-50: #f9faeb;
156
- --zabi-citron-100: #f1f5cf;
157
- --zabi-citron-200: #e4ecaa;
158
- --zabi-citron-300: #d5e184;
159
- --zabi-citron-400: #c7d460;
160
- --zabi-citron-500: #bbbe64;
161
- --zabi-citron-600: #a3a852;
162
- --zabi-citron-700: #848a43;
163
- --zabi-citron-800: #666c35;
164
- --zabi-citron-900: #4d5229;
165
- --zabi-citron-950: #323518;
166
- --color-citron-300: var(--zabi-citron-300);
167
- --color-citron-400: var(--zabi-citron-400);
168
- --color-citron-500: var(--zabi-citron-500);
118
+ --zabi-citron-50: #f6f7ef;
119
+ --zabi-citron-100: #edefdf;
120
+ --zabi-citron-200: #dcdfbf;
121
+ --zabi-citron-300: #c5ca95;
122
+ --zabi-citron-400: #aab063;
123
+ --zabi-citron-500: #8c9027;
124
+ --zabi-citron-600: #707400;
125
+ --zabi-citron-700: #5a5d00;
126
+ --zabi-citron-800: #454700;
127
+ --zabi-citron-900: #313200;
128
+ --zabi-citron-950: #202100;
129
+ --color-citron-100: var(--zabi-citron-100);
130
+ --color-citron-200: var(--zabi-citron-200);
169
131
  --color-citron-600: var(--zabi-citron-600);
170
132
  --color-citron-700: var(--zabi-citron-700);
171
- --zabi-pine-50: #e9f6f2;
172
- --zabi-pine-100: #d2ece4;
173
- --zabi-pine-200: #a7d9c9;
174
- --zabi-pine-300: #78c4ad;
175
- --zabi-pine-400: #49ad91;
176
- --zabi-pine-500: #0c5d43;
177
- --zabi-pine-600: #0a513a;
178
- --zabi-pine-700: #084532;
179
- --zabi-pine-800: #063a2a;
180
- --zabi-pine-900: #04231a;
181
- --zabi-pine-950: #02160f;
133
+ --color-citron-800: var(--zabi-citron-800);
134
+ --color-citron-900: var(--zabi-citron-900);
135
+ --zabi-pine-50: #f0f8f5;
136
+ --zabi-pine-100: #e2f1eb;
137
+ --zabi-pine-200: #c5e4d7;
138
+ --zabi-pine-300: #9fd1bd;
139
+ --zabi-pine-400: #70ba9e;
140
+ --zabi-pine-500: #399c7a;
141
+ --zabi-pine-600: #00805e;
142
+ --zabi-pine-700: #00674a;
143
+ --zabi-pine-800: #004f37;
144
+ --zabi-pine-900: #003826;
145
+ --zabi-pine-950: #002518;
146
+ --color-pine-100: var(--zabi-pine-100);
147
+ --color-pine-200: var(--zabi-pine-200);
182
148
  --color-pine-600: var(--zabi-pine-600);
183
149
  --color-pine-700: var(--zabi-pine-700);
184
150
  --color-pine-800: var(--zabi-pine-800);
185
151
  --color-pine-900: var(--zabi-pine-900);
186
- --zabi-iris-50: #f4f4fa;
187
- --zabi-iris-100: #e9e9f7;
188
- --zabi-iris-200: #d6d6f0;
189
- --zabi-iris-300: #bdbde6;
190
- --zabi-iris-400: #a3a3d8;
191
- --zabi-iris-500: #6969b3;
192
- --zabi-iris-600: #58589e;
193
- --zabi-iris-700: #474788;
194
- --zabi-iris-800: #38386f;
195
- --zabi-iris-900: #2a2a56;
196
- --zabi-iris-950: #1b1b37;
197
- --color-iris-50: var(--zabi-iris-50);
152
+ --zabi-iris-50: #f6f6fd;
153
+ --zabi-iris-100: #ecedfb;
154
+ --zabi-iris-200: #dadbf6;
155
+ --zabi-iris-300: #c1c4ef;
156
+ --zabi-iris-400: #a5a7e2;
157
+ --zabi-iris-500: #8486cd;
158
+ --zabi-iris-600: #6969b4;
159
+ --zabi-iris-700: #535397;
160
+ --zabi-iris-800: #3f3f78;
161
+ --zabi-iris-900: #2c2c58;
162
+ --zabi-iris-950: #1d1d3a;
198
163
  --color-iris-100: var(--zabi-iris-100);
199
164
  --color-iris-200: var(--zabi-iris-200);
200
- --color-iris-300: var(--zabi-iris-300);
201
165
  --color-iris-400: var(--zabi-iris-400);
202
- --color-iris-500: var(--zabi-iris-500);
203
166
  --color-iris-600: var(--zabi-iris-600);
204
167
  --color-iris-700: var(--zabi-iris-700);
205
168
  --color-iris-800: var(--zabi-iris-800);
206
169
  --color-iris-900: var(--zabi-iris-900);
207
- --zabi-warning-50: #fffbeb;
208
- --zabi-warning-100: #fef3c7;
209
- --zabi-warning-200: #fde68a;
210
- --zabi-warning-300: #fcd34d;
211
- --zabi-warning-400: #fbbf24;
212
- --zabi-warning-500: #f59e0b;
213
- --zabi-warning-600: #d97706;
214
- --zabi-warning-700: #b45309;
215
- --zabi-warning-800: #92400e;
216
- --zabi-warning-900: #78350f;
217
- --zabi-warning-950: #451a03;
218
- --color-warning-300: var(--zabi-warning-300);
219
- --color-warning-400: var(--zabi-warning-400);
220
- --color-warning-500: var(--zabi-warning-500);
170
+ --zabi-warning-50: #fbf6ed;
171
+ --zabi-warning-100: #f7ecda;
172
+ --zabi-warning-200: #f1d9b6;
173
+ --zabi-warning-300: #e8bf87;
174
+ --zabi-warning-400: #db9e4c;
175
+ --zabi-warning-500: #c17b00;
176
+ --zabi-warning-600: #9e6000;
177
+ --zabi-warning-700: #824c00;
178
+ --zabi-warning-800: #663800;
179
+ --zabi-warning-900: #4b2600;
180
+ --zabi-warning-950: #341800;
181
+ --color-warning-100: var(--zabi-warning-100);
182
+ --color-warning-200: var(--zabi-warning-200);
221
183
  --color-warning-600: var(--zabi-warning-600);
222
184
  --color-warning-700: var(--zabi-warning-700);
223
- --zabi-error-50: #fef2f2;
224
- --zabi-error-100: #fee2e2;
225
- --zabi-error-200: #fecaca;
226
- --zabi-error-300: #fca5a5;
227
- --zabi-error-400: #f87171;
228
- --zabi-error-500: #ef4444;
229
- --zabi-error-600: #dc2626;
230
- --zabi-error-700: #b91c1c;
231
- --zabi-error-800: #991b1b;
232
- --zabi-error-900: #7f1d1d;
233
- --zabi-error-950: #450a0a;
234
- --color-error-300: var(--zabi-error-300);
235
- --color-error-400: var(--zabi-error-400);
236
- --color-error-500: var(--zabi-error-500);
185
+ --color-warning-800: var(--zabi-warning-800);
186
+ --color-warning-900: var(--zabi-warning-900);
187
+ --zabi-error-50: #fff4f3;
188
+ --zabi-error-100: #ffe9e6;
189
+ --zabi-error-200: #ffd2cd;
190
+ --zabi-error-300: #ffb2ab;
191
+ --zabi-error-400: #ff877d;
192
+ --zabi-error-500: #ed564e;
193
+ --zabi-error-600: #d22828;
194
+ --zabi-error-700: #b20912;
195
+ --zabi-error-800: #8c0006;
196
+ --zabi-error-900: #660002;
197
+ --zabi-error-950: #460202;
198
+ --color-error-50: var(--zabi-error-50);
199
+ --color-error-100: var(--zabi-error-100);
200
+ --color-error-200: var(--zabi-error-200);
237
201
  --color-error-600: var(--zabi-error-600);
238
202
  --color-error-700: var(--zabi-error-700);
203
+ --color-error-800: var(--zabi-error-800);
204
+ --color-error-900: var(--zabi-error-900);
239
205
  --color-base-50: var(--zabi-base-50);
240
206
  --color-base-75: var(--zabi-base-75);
241
207
  --color-base-100: var(--zabi-base-100);
@@ -257,39 +223,51 @@
257
223
  --color-base-900: var(--zabi-base-900);
258
224
  --color-base-925: var(--zabi-base-925);
259
225
  --color-base-950: var(--zabi-base-950);
260
- --color-background: var(--color-base-100);
226
+ --color-surface-base: var(--color-base-100);
227
+ --color-surface-raised: #ffffff;
228
+ --color-surface-elevated: var(--color-base-50);
229
+ --color-surface-overlay: #ffffff;
230
+ --color-surface-overlay-hover: var(--color-base-100);
231
+ --color-border-overlay: transparent;
232
+ --color-background: var(--color-surface-base);
261
233
  --color-background-secondary: var(--color-base-50);
262
234
  --color-background-tertiary: var(--color-base-100);
263
235
  --color-page: var(--color-base-100);
264
- --color-card: #ffffff;
236
+ --color-card: var(--color-surface-raised);
265
237
  --color-card-hover: var(--color-base-100);
266
238
  --color-card-active: var(--color-base-100);
267
- --color-card-elevated: #ffffff;
268
- --color-surface-1: #ffffff;
269
- --color-surface-2: var(--color-base-50);
239
+ --color-card-elevated: var(--color-surface-overlay);
240
+ --color-surface-1: var(--color-surface-raised);
241
+ --color-surface-2: var(--color-surface-elevated);
270
242
  --color-surface-3: var(--color-base-75);
271
243
  --color-surface-4: var(--color-base-100);
244
+ --color-control-track: var(--color-base-400);
245
+ --color-control-track-hover: var(--color-base-450);
246
+ --color-control-track-active: var(--color-base-500);
247
+ --color-surface-hover: rgba(9, 9, 11, 0.06);
248
+ --color-surface-active: rgba(9, 9, 11, 0.11);
272
249
  --color-overlay: rgba(0, 0, 0, 0.5);
273
- --color-input: var(--color-base-250);
250
+ --color-input: var(--color-surface-raised);
274
251
  --color-input-border: var(--color-base-350);
275
- --color-input-hover: var(--color-base-300);
276
- --color-input-focus: var(--color-base-300);
252
+ --color-input-hover: var(--color-base-150);
253
+ --color-input-focus: var(--color-surface-raised);
277
254
  --color-input-disabled: var(--color-base-100);
278
255
  --color-headline: var(--color-base-900);
279
256
  --color-body: var(--color-base-800);
280
257
  --color-description: var(--color-base-600);
281
- --color-caption: var(--color-base-500);
282
- --color-input-placeholder: var(--color-base-400);
258
+ --color-caption: var(--color-base-550);
259
+ --color-input-placeholder: var(--color-base-500);
283
260
  --color-label: var(--color-base-700);
284
- --color-link: var(--color-brand-600);
285
- --color-link-hover: var(--color-brand-700);
261
+ --color-link: var(--color-brand-700);
262
+ --color-link-hover: var(--color-brand-800);
286
263
  --color-nav-menu-item: var(--color-body);
287
264
  --color-nav-menu-item-hover: var(--color-headline);
288
265
  --color-nav-menu-item-active: var(--color-link);
289
- --color-nav-menu-hover: var(--color-base-100);
266
+ --color-nav-menu-hover: var(--color-surface-hover);
290
267
  --color-nav-menu-active: var(--color-action-primary-subtle);
268
+ --color-nav-menu-active-hover: var(--color-action-primary-subtle-hover);
291
269
  --color-nav-menu-focus: var(--color-brand-500);
292
- --color-success-text: var(--color-success);
270
+ --color-success-text: var(--color-pine-700);
293
271
  --color-warning-text: var(--color-warning-700);
294
272
  --color-neutral-text: var(--color-base-700);
295
273
  --color-energetic-text: var(--color-citron-700);
@@ -315,50 +293,65 @@
315
293
  --color-secondary-medium: var(--color-base-800);
316
294
  --color-secondary-strong: var(--color-base-900);
317
295
  --color-success: var(--color-pine-600);
318
- --color-warning: var(--color-warning-500);
319
- --color-error: var(--color-error-500);
320
- --color-energetic: var(--color-citron-500);
321
- --color-neutral: var(--color-base-600);
296
+ --color-success-subtle: var(--color-pine-100);
297
+ --color-success-border: var(--color-pine-200);
298
+ --color-warning: var(--color-warning-600);
299
+ --color-warning-subtle: var(--color-warning-100);
300
+ --color-warning-border: var(--color-warning-200);
301
+ --color-error: var(--color-error-600);
302
+ --color-error-subtle: var(--color-error-100);
303
+ --color-error-border: var(--color-error-200);
304
+ --color-energetic: var(--color-citron-600);
305
+ --color-energetic-subtle: var(--color-citron-100);
306
+ --color-energetic-border: var(--color-citron-200);
307
+ --color-neutral: var(--color-base-550);
308
+ --color-neutral-subtle: var(--color-base-200);
309
+ --color-neutral-border: var(--color-base-200);
322
310
  --color-info: var(--color-iris-600);
323
- --color-info-text: var(--color-info);
324
- --color-action-primary: var(--color-brand-950);
325
- --color-action-primary-hover: var(--color-brand-900);
326
- --color-action-primary-active: var(--color-brand-400);
327
- --color-action-primary-disabled: var(--color-brand-500);
311
+ --color-info-subtle: var(--color-iris-100);
312
+ --color-info-border: var(--color-iris-200);
313
+ --color-info-text: var(--color-iris-700);
314
+ --color-action-primary: var(--color-brand-600);
315
+ --color-action-primary-hover: var(--color-brand-700);
316
+ --color-action-primary-active: var(--color-brand-800);
328
317
  --color-action-primary-subtle: var(--color-brand-100);
329
318
  --color-action-primary-subtle-hover: var(--color-brand-200);
330
- --color-action-primary-text: var(--color-brand-50);
331
- --color-action-secondary: color-mix(in srgb, #3f4fc0 10%, transparent);
332
- @supports (color: color-mix(in lab, red, red)) {
333
- & {
334
- --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
335
- }
336
- }
337
- --color-action-secondary-hover: color-mix(in srgb, #3f4fc0 20%, transparent);
338
- @supports (color: color-mix(in lab, red, red)) {
339
- & {
340
- --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
341
- }
342
- }
343
- --color-action-secondary-active: var(--color-brand-400);
344
- --color-action-secondary-disabled: var(--color-brand-500);
345
- --color-action-secondary-subtle: var(--color-brand-600);
346
- --color-action-secondary-subtle-hover: var(--color-brand-700);
347
- --color-action-danger: #dc2626;
348
- --color-action-danger-hover: #b91c1c;
349
- --color-action-danger-active: #991b1b;
350
- --color-action-danger-disabled: #fca5a5;
351
- --color-action-danger-subtle: #fef2f2;
352
- --color-action-danger-subtle-hover: #fee2e2;
319
+ --color-action-primary-text: #ffffff;
320
+ --color-action-secondary: rgba(9, 9, 11, 0.07);
321
+ --color-action-secondary-hover: rgba(9, 9, 11, 0.12);
322
+ --color-action-secondary-active: rgba(9, 9, 11, 0.17);
323
+ --color-action-secondary-subtle: var(--color-base-100);
324
+ --color-action-secondary-subtle-hover: var(--color-base-200);
325
+ --color-action-disabled: var(--color-base-200);
326
+ --color-action-disabled-text: var(--color-base-500);
327
+ --color-action-disabled-border: var(--color-base-250);
328
+ --color-action-danger: var(--color-error-600);
329
+ --color-action-danger-hover: var(--color-error-700);
330
+ --color-action-danger-active: var(--color-error-800);
331
+ --color-action-danger-subtle: var(--color-error-100);
332
+ --color-action-danger-subtle-hover: var(--color-error-200);
333
+ --color-action-danger-text: var(--color-error-50);
353
334
  --shadow-color: 0 0 0;
354
335
  --shadow-opacity: 0.1;
355
336
  --spacing-xs: 0.25rem;
356
- --spacing-sm: 0.5rem;
357
337
  --spacing-md: 1rem;
358
338
  --spacing-lg: 1.5rem;
359
339
  --spacing-xl: 2rem;
360
- --spacing-2xl: 3rem;
340
+ --max-width-xs: 20rem;
341
+ --max-width-sm: 24rem;
342
+ --max-width-md: 28rem;
343
+ --max-width-lg: 32rem;
344
+ --max-width-xl: 36rem;
345
+ --max-width-2xl: 42rem;
346
+ --radius-control: 0.5rem;
347
+ --radius-container: 0.75rem;
348
+ --radius-overlay: 1rem;
349
+ --radius-pill: 9999px;
350
+ --control-height-sm: 2rem;
351
+ --control-height-md: 2.5rem;
352
+ --control-height-lg: 3rem;
361
353
  --z-dropdown: 1000;
354
+ --z-sticky: 1020;
362
355
  --z-modal-backdrop: 1040;
363
356
  --z-modal: 1050;
364
357
  --z-popover: 1060;
@@ -534,9 +527,6 @@
534
527
  }
535
528
  }
536
529
  @layer utilities {
537
- .\@container {
538
- container-type: inline-size;
539
- }
540
530
  .pointer-events-auto {
541
531
  pointer-events: auto;
542
532
  }
@@ -656,9 +646,6 @@
656
646
  .left-full {
657
647
  left: 100%;
658
648
  }
659
- .isolate {
660
- isolation: isolate;
661
- }
662
649
  .z-10 {
663
650
  z-index: 10;
664
651
  }
@@ -668,36 +655,9 @@
668
655
  .z-30 {
669
656
  z-index: 30;
670
657
  }
671
- .z-50 {
672
- z-index: 50;
673
- }
674
658
  .row-span-3 {
675
659
  grid-row: span 3 / span 3;
676
660
  }
677
- .float-left {
678
- float: left;
679
- }
680
- .float-right {
681
- float: right;
682
- }
683
- .\!container {
684
- width: 100% !important;
685
- @media (width >= 40rem) {
686
- max-width: 40rem !important;
687
- }
688
- @media (width >= 48rem) {
689
- max-width: 48rem !important;
690
- }
691
- @media (width >= 64rem) {
692
- max-width: 64rem !important;
693
- }
694
- @media (width >= 80rem) {
695
- max-width: 80rem !important;
696
- }
697
- @media (width >= 96rem) {
698
- max-width: 96rem !important;
699
- }
700
- }
701
661
  .container {
702
662
  width: 100%;
703
663
  @media (width >= 40rem) {
@@ -734,15 +694,15 @@
734
694
  .mx-auto {
735
695
  margin-inline: auto;
736
696
  }
737
- .my-0\.5 {
738
- margin-block: calc(var(--spacing) * 0.5);
739
- }
740
- .my-0\.25 {
741
- margin-block: calc(var(--spacing) * 0.25);
697
+ .my-1 {
698
+ margin-block: calc(var(--spacing) * 1);
742
699
  }
743
700
  .my-2 {
744
701
  margin-block: calc(var(--spacing) * 2);
745
702
  }
703
+ .my-px {
704
+ margin-block: 1px;
705
+ }
746
706
  .-mt-0\.5 {
747
707
  margin-top: calc(var(--spacing) * -0.5);
748
708
  }
@@ -761,30 +721,27 @@
761
721
  .mt-4 {
762
722
  margin-top: calc(var(--spacing) * 4);
763
723
  }
724
+ .mt-5 {
725
+ margin-top: calc(var(--spacing) * 5);
726
+ }
764
727
  .mt-6 {
765
728
  margin-top: calc(var(--spacing) * 6);
766
729
  }
767
730
  .mt-8 {
768
731
  margin-top: calc(var(--spacing) * 8);
769
732
  }
733
+ .mt-10 {
734
+ margin-top: calc(var(--spacing) * 10);
735
+ }
736
+ .mt-14 {
737
+ margin-top: calc(var(--spacing) * 14);
738
+ }
770
739
  .mt-16 {
771
740
  margin-top: calc(var(--spacing) * 16);
772
741
  }
773
- .mt-auto {
774
- margin-top: auto;
775
- }
776
742
  .-mr-0\.5 {
777
743
  margin-right: calc(var(--spacing) * -0.5);
778
744
  }
779
- .mr-1 {
780
- margin-right: calc(var(--spacing) * 1);
781
- }
782
- .mr-1\.5 {
783
- margin-right: calc(var(--spacing) * 1.5);
784
- }
785
- .mr-2 {
786
- margin-right: calc(var(--spacing) * 2);
787
- }
788
745
  .mr-4 {
789
746
  margin-right: calc(var(--spacing) * 4);
790
747
  }
@@ -815,15 +772,9 @@
815
772
  .mb-16 {
816
773
  margin-bottom: calc(var(--spacing) * 16);
817
774
  }
818
- .mb-20 {
819
- margin-bottom: calc(var(--spacing) * 20);
820
- }
821
775
  .ml-1 {
822
776
  margin-left: calc(var(--spacing) * 1);
823
777
  }
824
- .ml-3 {
825
- margin-left: calc(var(--spacing) * 3);
826
- }
827
778
  .ml-4 {
828
779
  margin-left: calc(var(--spacing) * 4);
829
780
  }
@@ -842,9 +793,6 @@
842
793
  -webkit-box-orient: vertical;
843
794
  -webkit-line-clamp: 2;
844
795
  }
845
- .\!hidden {
846
- display: none !important;
847
- }
848
796
  .block {
849
797
  display: block;
850
798
  }
@@ -869,15 +817,9 @@
869
817
  .inline-flex {
870
818
  display: inline-flex;
871
819
  }
872
- .inline-grid {
873
- display: inline-grid;
874
- }
875
820
  .table {
876
821
  display: table;
877
822
  }
878
- .table-row {
879
- display: table-row;
880
- }
881
823
  .aspect-square {
882
824
  aspect-ratio: 1 / 1;
883
825
  }
@@ -889,6 +831,10 @@
889
831
  width: calc(var(--spacing) * 3);
890
832
  height: calc(var(--spacing) * 3);
891
833
  }
834
+ .size-3\.5 {
835
+ width: calc(var(--spacing) * 3.5);
836
+ height: calc(var(--spacing) * 3.5);
837
+ }
892
838
  .size-4 {
893
839
  width: calc(var(--spacing) * 4);
894
840
  height: calc(var(--spacing) * 4);
@@ -901,6 +847,10 @@
901
847
  width: calc(var(--spacing) * 6);
902
848
  height: calc(var(--spacing) * 6);
903
849
  }
850
+ .size-8 {
851
+ width: calc(var(--spacing) * 8);
852
+ height: calc(var(--spacing) * 8);
853
+ }
904
854
  .size-9 {
905
855
  width: calc(var(--spacing) * 9);
906
856
  height: calc(var(--spacing) * 9);
@@ -909,6 +859,10 @@
909
859
  width: calc(var(--spacing) * 10);
910
860
  height: calc(var(--spacing) * 10);
911
861
  }
862
+ .size-12 {
863
+ width: calc(var(--spacing) * 12);
864
+ height: calc(var(--spacing) * 12);
865
+ }
912
866
  .size-\[length\:var\(--spacing-xl\)\] {
913
867
  width: var(--spacing-xl);
914
868
  height: var(--spacing-xl);
@@ -935,6 +889,9 @@
935
889
  .h-6 {
936
890
  height: calc(var(--spacing) * 6);
937
891
  }
892
+ .h-7 {
893
+ height: calc(var(--spacing) * 7);
894
+ }
938
895
  .h-8 {
939
896
  height: calc(var(--spacing) * 8);
940
897
  }
@@ -983,6 +940,9 @@
983
940
  .min-h-0 {
984
941
  min-height: calc(var(--spacing) * 0);
985
942
  }
943
+ .min-h-8 {
944
+ min-height: calc(var(--spacing) * 8);
945
+ }
986
946
  .min-h-10 {
987
947
  min-height: calc(var(--spacing) * 10);
988
948
  }
@@ -1034,8 +994,11 @@
1034
994
  .w-80 {
1035
995
  width: calc(var(--spacing) * 80);
1036
996
  }
1037
- .w-\[104px\] {
1038
- width: 104px;
997
+ .w-\[3px\] {
998
+ width: 3px;
999
+ }
1000
+ .w-\[72px\] {
1001
+ width: 72px;
1039
1002
  }
1040
1003
  .w-\[200px\] {
1041
1004
  width: 200px;
@@ -1062,7 +1025,7 @@
1062
1025
  width: 1px;
1063
1026
  }
1064
1027
  .max-w-2xl {
1065
- max-width: var(--spacing-2xl);
1028
+ max-width: var(--max-width-2xl);
1066
1029
  }
1067
1030
  .max-w-3xl {
1068
1031
  max-width: var(--container-3xl);
@@ -1099,14 +1062,14 @@
1099
1062
  max-width: 100%;
1100
1063
  }
1101
1064
  .max-w-lg {
1102
- max-width: var(--spacing-lg);
1065
+ max-width: var(--max-width-lg);
1103
1066
  }
1104
1067
  .max-w-max {
1105
1068
  max-width: -moz-max-content;
1106
1069
  max-width: max-content;
1107
1070
  }
1108
1071
  .max-w-md {
1109
- max-width: var(--spacing-md);
1072
+ max-width: var(--max-width-md);
1110
1073
  }
1111
1074
  .max-w-min {
1112
1075
  max-width: -moz-min-content;
@@ -1137,13 +1100,13 @@
1137
1100
  max-width: var(--breakpoint-xl);
1138
1101
  }
1139
1102
  .max-w-sm {
1140
- max-width: var(--spacing-sm);
1103
+ max-width: var(--max-width-sm);
1141
1104
  }
1142
1105
  .max-w-xl {
1143
- max-width: var(--spacing-xl);
1106
+ max-width: var(--max-width-xl);
1144
1107
  }
1145
1108
  .max-w-xs {
1146
- max-width: var(--spacing-xs);
1109
+ max-width: var(--max-width-xs);
1147
1110
  }
1148
1111
  .min-w-0 {
1149
1112
  min-width: calc(var(--spacing) * 0);
@@ -1172,9 +1135,6 @@
1172
1135
  .flex-1 {
1173
1136
  flex: 1;
1174
1137
  }
1175
- .flex-shrink {
1176
- flex-shrink: 1;
1177
- }
1178
1138
  .flex-shrink-0 {
1179
1139
  flex-shrink: 0;
1180
1140
  }
@@ -1184,9 +1144,6 @@
1184
1144
  .shrink-0 {
1185
1145
  flex-shrink: 0;
1186
1146
  }
1187
- .flex-grow {
1188
- flex-grow: 1;
1189
- }
1190
1147
  .grow {
1191
1148
  flex-grow: 1;
1192
1149
  }
@@ -1234,12 +1191,6 @@
1234
1191
  .transform {
1235
1192
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1236
1193
  }
1237
- .transform\! {
1238
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;
1239
- }
1240
- .transform-gpu {
1241
- transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1242
- }
1243
1194
  .animate-\[slideUp_0\.3s_ease-out\] {
1244
1195
  animation: slideUp 0.3s ease-out;
1245
1196
  }
@@ -1315,9 +1266,6 @@
1315
1266
  .justify-start {
1316
1267
  justify-content: flex-start;
1317
1268
  }
1318
- .gap-0\.5 {
1319
- gap: calc(var(--spacing) * 0.5);
1320
- }
1321
1269
  .gap-1 {
1322
1270
  gap: calc(var(--spacing) * 1);
1323
1271
  }
@@ -1342,12 +1290,18 @@
1342
1290
  .gap-6 {
1343
1291
  gap: calc(var(--spacing) * 6);
1344
1292
  }
1345
- .gap-8 {
1346
- gap: calc(var(--spacing) * 8);
1293
+ .gap-10 {
1294
+ gap: calc(var(--spacing) * 10);
1295
+ }
1296
+ .gap-12 {
1297
+ gap: calc(var(--spacing) * 12);
1347
1298
  }
1348
1299
  .gap-14 {
1349
1300
  gap: calc(var(--spacing) * 14);
1350
1301
  }
1302
+ .gap-md {
1303
+ gap: var(--spacing-md);
1304
+ }
1351
1305
  .space-y-0 {
1352
1306
  :where(& > :not(:last-child)) {
1353
1307
  --tw-space-y-reverse: 0;
@@ -1418,6 +1372,22 @@
1418
1372
  margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
1419
1373
  }
1420
1374
  }
1375
+ .gap-x-3 {
1376
+ -moz-column-gap: calc(var(--spacing) * 3);
1377
+ column-gap: calc(var(--spacing) * 3);
1378
+ }
1379
+ .gap-x-6 {
1380
+ -moz-column-gap: calc(var(--spacing) * 6);
1381
+ column-gap: calc(var(--spacing) * 6);
1382
+ }
1383
+ .gap-x-8 {
1384
+ -moz-column-gap: calc(var(--spacing) * 8);
1385
+ column-gap: calc(var(--spacing) * 8);
1386
+ }
1387
+ .gap-x-12 {
1388
+ -moz-column-gap: calc(var(--spacing) * 12);
1389
+ column-gap: calc(var(--spacing) * 12);
1390
+ }
1421
1391
  .space-x-4 {
1422
1392
  :where(& > :not(:last-child)) {
1423
1393
  --tw-space-x-reverse: 0;
@@ -1425,6 +1395,18 @@
1425
1395
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
1426
1396
  }
1427
1397
  }
1398
+ .gap-y-1 {
1399
+ row-gap: calc(var(--spacing) * 1);
1400
+ }
1401
+ .gap-y-2 {
1402
+ row-gap: calc(var(--spacing) * 2);
1403
+ }
1404
+ .gap-y-3 {
1405
+ row-gap: calc(var(--spacing) * 3);
1406
+ }
1407
+ .gap-y-10 {
1408
+ row-gap: calc(var(--spacing) * 10);
1409
+ }
1428
1410
  .divide-y {
1429
1411
  :where(& > :not(:last-child)) {
1430
1412
  --tw-divide-y-reverse: 0;
@@ -1480,8 +1462,14 @@
1480
1462
  .rounded-3xl {
1481
1463
  border-radius: var(--radius-3xl);
1482
1464
  }
1483
- .rounded-\[20px\] {
1484
- border-radius: 20px;
1465
+ .rounded-\[2rem\] {
1466
+ border-radius: 2rem;
1467
+ }
1468
+ .rounded-container {
1469
+ border-radius: var(--radius-container);
1470
+ }
1471
+ .rounded-control {
1472
+ border-radius: var(--radius-control);
1485
1473
  }
1486
1474
  .rounded-full {
1487
1475
  border-radius: calc(infinity * 1px);
@@ -1492,6 +1480,12 @@
1492
1480
  .rounded-md {
1493
1481
  border-radius: var(--radius-md);
1494
1482
  }
1483
+ .rounded-overlay {
1484
+ border-radius: var(--radius-overlay);
1485
+ }
1486
+ .rounded-pill {
1487
+ border-radius: var(--radius-pill);
1488
+ }
1495
1489
  .rounded-sm {
1496
1490
  border-radius: var(--radius-sm);
1497
1491
  }
@@ -1501,9 +1495,67 @@
1501
1495
  .rounded-xs {
1502
1496
  border-radius: var(--radius-xs);
1503
1497
  }
1504
- .rounded-t-3xl {
1505
- border-top-left-radius: var(--radius-3xl);
1506
- border-top-right-radius: var(--radius-3xl);
1498
+ .rounded-s {
1499
+ border-start-start-radius: 0.25rem;
1500
+ border-end-start-radius: 0.25rem;
1501
+ }
1502
+ .rounded-ss {
1503
+ border-start-start-radius: 0.25rem;
1504
+ }
1505
+ .rounded-e {
1506
+ border-start-end-radius: 0.25rem;
1507
+ border-end-end-radius: 0.25rem;
1508
+ }
1509
+ .rounded-se {
1510
+ border-start-end-radius: 0.25rem;
1511
+ }
1512
+ .rounded-ee {
1513
+ border-end-end-radius: 0.25rem;
1514
+ }
1515
+ .rounded-es {
1516
+ border-end-start-radius: 0.25rem;
1517
+ }
1518
+ .rounded-t {
1519
+ border-top-left-radius: 0.25rem;
1520
+ border-top-right-radius: 0.25rem;
1521
+ }
1522
+ .rounded-t-control {
1523
+ border-top-left-radius: var(--radius-control);
1524
+ border-top-right-radius: var(--radius-control);
1525
+ }
1526
+ .rounded-t-overlay {
1527
+ border-top-left-radius: var(--radius-overlay);
1528
+ border-top-right-radius: var(--radius-overlay);
1529
+ }
1530
+ .rounded-l {
1531
+ border-top-left-radius: 0.25rem;
1532
+ border-bottom-left-radius: 0.25rem;
1533
+ }
1534
+ .rounded-tl {
1535
+ border-top-left-radius: 0.25rem;
1536
+ }
1537
+ .rounded-r {
1538
+ border-top-right-radius: 0.25rem;
1539
+ border-bottom-right-radius: 0.25rem;
1540
+ }
1541
+ .rounded-tr {
1542
+ border-top-right-radius: 0.25rem;
1543
+ }
1544
+ .rounded-b {
1545
+ border-bottom-right-radius: 0.25rem;
1546
+ border-bottom-left-radius: 0.25rem;
1547
+ }
1548
+ .rounded-br {
1549
+ border-bottom-right-radius: 0.25rem;
1550
+ }
1551
+ .rounded-bl {
1552
+ border-bottom-left-radius: 0.25rem;
1553
+ }
1554
+ .rounded-bl-control {
1555
+ border-bottom-left-radius: var(--radius-control);
1556
+ }
1557
+ .rounded-bl-pill {
1558
+ border-bottom-left-radius: var(--radius-pill);
1507
1559
  }
1508
1560
  .border {
1509
1561
  border-style: var(--tw-border-style);
@@ -1521,6 +1573,10 @@
1521
1573
  border-top-style: var(--tw-border-style);
1522
1574
  border-top-width: 1px;
1523
1575
  }
1576
+ .border-t-2 {
1577
+ border-top-style: var(--tw-border-style);
1578
+ border-top-width: 2px;
1579
+ }
1524
1580
  .border-r {
1525
1581
  border-right-style: var(--tw-border-style);
1526
1582
  border-right-width: 1px;
@@ -1533,10 +1589,6 @@
1533
1589
  border-bottom-style: var(--tw-border-style);
1534
1590
  border-bottom-width: 2px;
1535
1591
  }
1536
- .border-l-2 {
1537
- border-left-style: var(--tw-border-style);
1538
- border-left-width: 2px;
1539
- }
1540
1592
  .border-dashed {
1541
1593
  --tw-border-style: dashed;
1542
1594
  border-style: dashed;
@@ -1554,27 +1606,21 @@
1554
1606
  .border-base-200 {
1555
1607
  border-color: var(--color-base-200);
1556
1608
  }
1557
- .border-base-300 {
1558
- border-color: var(--color-base-300);
1559
- }
1560
1609
  .border-base-400 {
1561
1610
  border-color: var(--color-base-400);
1562
1611
  }
1563
- .border-base-700 {
1564
- border-color: var(--color-base-700);
1565
- }
1566
1612
  .border-base-950 {
1567
1613
  border-color: var(--color-base-950);
1568
1614
  }
1569
- .border-blue-200 {
1570
- border-color: var(--color-blue-200);
1571
- }
1572
- .border-blue-300 {
1573
- border-color: var(--color-blue-300);
1574
- }
1575
1615
  .border-border {
1576
1616
  border-color: var(--color-border);
1577
1617
  }
1618
+ .border-border-medium {
1619
+ border-color: var(--color-border-medium);
1620
+ }
1621
+ .border-border-overlay {
1622
+ border-color: var(--color-border-overlay);
1623
+ }
1578
1624
  .border-brand-500 {
1579
1625
  border-color: var(--color-brand-500);
1580
1626
  }
@@ -1587,63 +1633,54 @@
1587
1633
  .border-description {
1588
1634
  border-color: var(--color-description);
1589
1635
  }
1590
- .border-energetic {
1591
- border-color: var(--color-energetic);
1636
+ .border-energetic-border {
1637
+ border-color: var(--color-energetic-border);
1592
1638
  }
1593
1639
  .border-error {
1594
1640
  border-color: var(--color-error);
1595
1641
  }
1596
- .border-green-200 {
1597
- border-color: var(--color-green-200);
1642
+ .border-error-border {
1643
+ border-color: var(--color-error-border);
1598
1644
  }
1599
1645
  .border-green-300 {
1600
1646
  border-color: var(--color-green-300);
1601
1647
  }
1648
+ .border-headline {
1649
+ border-color: var(--color-headline);
1650
+ }
1602
1651
  .border-info {
1603
1652
  border-color: var(--color-info);
1604
1653
  }
1605
- .border-input {
1606
- border-color: var(--color-input);
1654
+ .border-info-border {
1655
+ border-color: var(--color-info-border);
1607
1656
  }
1608
1657
  .border-input-border {
1609
1658
  border-color: var(--color-input-border);
1610
1659
  }
1611
- .border-iris-300 {
1612
- border-color: var(--color-iris-300);
1613
- }
1614
- .border-neutral {
1615
- border-color: var(--color-neutral);
1660
+ .border-neutral-border {
1661
+ border-color: var(--color-neutral-border);
1616
1662
  }
1617
1663
  .border-primary {
1618
1664
  border-color: var(--color-primary);
1619
1665
  }
1620
- .border-red-200 {
1621
- border-color: var(--color-red-200);
1622
- }
1623
- .border-red-300 {
1624
- border-color: var(--color-red-300);
1625
- }
1626
- .border-secondary {
1627
- border-color: var(--color-secondary);
1628
- }
1629
1666
  .border-success {
1630
1667
  border-color: var(--color-success);
1631
1668
  }
1669
+ .border-success-border {
1670
+ border-color: var(--color-success-border);
1671
+ }
1632
1672
  .border-transparent {
1633
1673
  border-color: transparent;
1634
1674
  }
1635
1675
  .border-warning {
1636
1676
  border-color: var(--color-warning);
1637
1677
  }
1678
+ .border-warning-border {
1679
+ border-color: var(--color-warning-border);
1680
+ }
1638
1681
  .border-white {
1639
1682
  border-color: var(--color-white);
1640
1683
  }
1641
- .border-yellow-200 {
1642
- border-color: var(--color-yellow-200);
1643
- }
1644
- .border-yellow-300 {
1645
- border-color: var(--color-yellow-300);
1646
- }
1647
1684
  .border-t-transparent {
1648
1685
  border-top-color: transparent;
1649
1686
  }
@@ -1659,9 +1696,6 @@
1659
1696
  .bg-action-primary-subtle {
1660
1697
  background-color: var(--color-action-primary-subtle);
1661
1698
  }
1662
- .bg-action-primary-subtle-hover {
1663
- background-color: var(--color-action-primary-subtle-hover);
1664
- }
1665
1699
  .bg-action-secondary {
1666
1700
  background-color: var(--color-action-secondary);
1667
1701
  }
@@ -1685,15 +1719,6 @@
1685
1719
  .bg-base-200 {
1686
1720
  background-color: var(--color-base-200);
1687
1721
  }
1688
- .bg-base-400 {
1689
- background-color: var(--color-base-400);
1690
- }
1691
- .bg-base-600 {
1692
- background-color: var(--color-base-600);
1693
- }
1694
- .bg-base-800 {
1695
- background-color: var(--color-base-800);
1696
- }
1697
1722
  .bg-base-900 {
1698
1723
  background-color: var(--color-base-900);
1699
1724
  }
@@ -1705,12 +1730,6 @@
1705
1730
  }
1706
1731
  }
1707
1732
  }
1708
- .bg-blue-50 {
1709
- background-color: var(--color-blue-50);
1710
- }
1711
- .bg-blue-100 {
1712
- background-color: var(--color-blue-100);
1713
- }
1714
1733
  .bg-border {
1715
1734
  background-color: var(--color-border);
1716
1735
  }
@@ -1728,105 +1747,119 @@
1728
1747
  .bg-brand-100 {
1729
1748
  background-color: var(--color-brand-100);
1730
1749
  }
1731
- .bg-brand-500 {
1732
- background-color: var(--color-brand-500);
1733
- }
1734
1750
  .bg-brand-600 {
1735
1751
  background-color: var(--color-brand-600);
1736
1752
  }
1737
1753
  .bg-card {
1738
1754
  background-color: var(--color-card);
1739
1755
  }
1756
+ .bg-card-elevated {
1757
+ background-color: var(--color-card-elevated);
1758
+ }
1759
+ .bg-control-track {
1760
+ background-color: var(--color-control-track);
1761
+ }
1740
1762
  .bg-energetic {
1741
1763
  background-color: var(--color-energetic);
1742
1764
  }
1765
+ .bg-energetic-subtle {
1766
+ background-color: var(--color-energetic-subtle);
1767
+ }
1743
1768
  .bg-error {
1744
1769
  background-color: var(--color-error);
1745
1770
  }
1771
+ .bg-error-subtle {
1772
+ background-color: var(--color-error-subtle);
1773
+ }
1746
1774
  .bg-gray-50 {
1747
1775
  background-color: var(--color-gray-50);
1748
1776
  }
1749
- .bg-green-50 {
1750
- background-color: var(--color-green-50);
1751
- }
1752
- .bg-green-100 {
1753
- background-color: var(--color-green-100);
1754
- }
1755
- .bg-green-500 {
1756
- background-color: var(--color-green-500);
1757
- }
1758
- .bg-green-600 {
1759
- background-color: var(--color-green-600);
1760
- }
1761
1777
  .bg-info {
1762
1778
  background-color: var(--color-info);
1763
1779
  }
1780
+ .bg-info-subtle {
1781
+ background-color: var(--color-info-subtle);
1782
+ }
1764
1783
  .bg-input {
1765
1784
  background-color: var(--color-input);
1766
1785
  }
1767
- .bg-iris-100 {
1768
- background-color: var(--color-iris-100);
1769
- }
1770
1786
  .bg-nav-menu-active {
1771
1787
  background-color: var(--color-nav-menu-active);
1772
1788
  }
1789
+ .bg-nav-menu-item-active {
1790
+ background-color: var(--color-nav-menu-item-active);
1791
+ }
1773
1792
  .bg-neutral {
1774
1793
  background-color: var(--color-neutral);
1775
1794
  }
1795
+ .bg-neutral-subtle {
1796
+ background-color: var(--color-neutral-subtle);
1797
+ }
1776
1798
  .bg-overlay {
1777
1799
  background-color: var(--color-overlay);
1778
1800
  }
1779
1801
  .bg-primary {
1780
1802
  background-color: var(--color-primary);
1781
1803
  }
1782
- .bg-purple-600 {
1783
- background-color: var(--color-purple-600);
1784
- }
1785
- .bg-red-50 {
1786
- background-color: var(--color-red-50);
1787
- }
1788
- .bg-red-100 {
1789
- background-color: var(--color-red-100);
1790
- }
1791
1804
  .bg-red-500 {
1792
1805
  background-color: var(--color-red-500);
1793
1806
  }
1794
- .bg-red-600 {
1795
- background-color: var(--color-red-600);
1796
- }
1797
1807
  .bg-secondary {
1798
1808
  background-color: var(--color-secondary);
1799
1809
  }
1800
1810
  .bg-success {
1801
1811
  background-color: var(--color-success);
1802
1812
  }
1813
+ .bg-success-subtle {
1814
+ background-color: var(--color-success-subtle);
1815
+ }
1803
1816
  .bg-surface-1 {
1804
1817
  background-color: var(--color-surface-1);
1805
1818
  }
1806
1819
  .bg-surface-2 {
1807
1820
  background-color: var(--color-surface-2);
1808
1821
  }
1822
+ .bg-surface-base {
1823
+ background-color: var(--color-surface-base);
1824
+ }
1825
+ .bg-surface-elevated {
1826
+ background-color: var(--color-surface-elevated);
1827
+ }
1828
+ .bg-surface-overlay {
1829
+ background-color: var(--color-surface-overlay);
1830
+ }
1831
+ .bg-surface-overlay-hover {
1832
+ background-color: var(--color-surface-overlay-hover);
1833
+ }
1834
+ .bg-surface-overlay\/60 {
1835
+ background-color: color-mix(in srgb, #ffffff 60%, transparent);
1836
+ @supports (color: color-mix(in lab, red, red)) {
1837
+ & {
1838
+ background-color: color-mix(in oklab, var(--color-surface-overlay) 60%, transparent);
1839
+ }
1840
+ }
1841
+ }
1842
+ .bg-surface-raised {
1843
+ background-color: var(--color-surface-raised);
1844
+ }
1809
1845
  .bg-tooltip-bg {
1810
1846
  background-color: var(--color-tooltip-bg);
1811
1847
  }
1812
1848
  .bg-transparent {
1813
1849
  background-color: transparent;
1814
1850
  }
1851
+ .bg-transparent\! {
1852
+ background-color: transparent !important;
1853
+ }
1815
1854
  .bg-warning {
1816
1855
  background-color: var(--color-warning);
1817
1856
  }
1857
+ .bg-warning-subtle {
1858
+ background-color: var(--color-warning-subtle);
1859
+ }
1818
1860
  .bg-white {
1819
1861
  background-color: var(--color-white);
1820
1862
  }
1821
- .bg-yellow-50 {
1822
- background-color: var(--color-yellow-50);
1823
- }
1824
- .bg-yellow-100 {
1825
- background-color: var(--color-yellow-100);
1826
- }
1827
- .bg-yellow-500 {
1828
- background-color: var(--color-yellow-500);
1829
- }
1830
1863
  .bg-linear-to-b {
1831
1864
  --tw-gradient-position: to bottom;
1832
1865
  @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1841,15 +1874,15 @@
1841
1874
  .p-0 {
1842
1875
  padding: calc(var(--spacing) * 0);
1843
1876
  }
1877
+ .p-0\! {
1878
+ padding: calc(var(--spacing) * 0) !important;
1879
+ }
1844
1880
  .p-1 {
1845
1881
  padding: calc(var(--spacing) * 1);
1846
1882
  }
1847
1883
  .p-2 {
1848
1884
  padding: calc(var(--spacing) * 2);
1849
1885
  }
1850
- .p-2\.5 {
1851
- padding: calc(var(--spacing) * 2.5);
1852
- }
1853
1886
  .p-3 {
1854
1887
  padding: calc(var(--spacing) * 3);
1855
1888
  }
@@ -1865,6 +1898,9 @@
1865
1898
  .p-8 {
1866
1899
  padding: calc(var(--spacing) * 8);
1867
1900
  }
1901
+ .p-lg {
1902
+ padding: var(--spacing-lg);
1903
+ }
1868
1904
  .px-0 {
1869
1905
  padding-inline: calc(var(--spacing) * 0);
1870
1906
  }
@@ -1922,27 +1958,24 @@
1922
1958
  .py-8 {
1923
1959
  padding-block: calc(var(--spacing) * 8);
1924
1960
  }
1961
+ .py-10 {
1962
+ padding-block: calc(var(--spacing) * 10);
1963
+ }
1925
1964
  .py-12 {
1926
1965
  padding-block: calc(var(--spacing) * 12);
1927
1966
  }
1928
1967
  .py-16 {
1929
1968
  padding-block: calc(var(--spacing) * 16);
1930
1969
  }
1970
+ .py-20 {
1971
+ padding-block: calc(var(--spacing) * 20);
1972
+ }
1931
1973
  .py-24 {
1932
1974
  padding-block: calc(var(--spacing) * 24);
1933
1975
  }
1934
- .py-32 {
1935
- padding-block: calc(var(--spacing) * 32);
1936
- }
1937
- .py-36 {
1938
- padding-block: calc(var(--spacing) * 36);
1939
- }
1940
1976
  .pt-0 {
1941
1977
  padding-top: calc(var(--spacing) * 0);
1942
1978
  }
1943
- .pt-0\.5 {
1944
- padding-top: calc(var(--spacing) * 0.5);
1945
- }
1946
1979
  .pt-1 {
1947
1980
  padding-top: calc(var(--spacing) * 1);
1948
1981
  }
@@ -1955,12 +1988,21 @@
1955
1988
  .pt-4 {
1956
1989
  padding-top: calc(var(--spacing) * 4);
1957
1990
  }
1991
+ .pt-5 {
1992
+ padding-top: calc(var(--spacing) * 5);
1993
+ }
1958
1994
  .pt-6 {
1959
1995
  padding-top: calc(var(--spacing) * 6);
1960
1996
  }
1997
+ .pt-14 {
1998
+ padding-top: calc(var(--spacing) * 14);
1999
+ }
1961
2000
  .pr-1 {
1962
2001
  padding-right: calc(var(--spacing) * 1);
1963
2002
  }
2003
+ .pr-2 {
2004
+ padding-right: calc(var(--spacing) * 2);
2005
+ }
1964
2006
  .pr-5 {
1965
2007
  padding-right: calc(var(--spacing) * 5);
1966
2008
  }
@@ -1976,9 +2018,6 @@
1976
2018
  .pb-1 {
1977
2019
  padding-bottom: calc(var(--spacing) * 1);
1978
2020
  }
1979
- .pb-1\.5 {
1980
- padding-bottom: calc(var(--spacing) * 1.5);
1981
- }
1982
2021
  .pb-2 {
1983
2022
  padding-bottom: calc(var(--spacing) * 2);
1984
2023
  }
@@ -1991,8 +2030,11 @@
1991
2030
  .pb-6 {
1992
2031
  padding-bottom: calc(var(--spacing) * 6);
1993
2032
  }
1994
- .pb-28 {
1995
- padding-bottom: calc(var(--spacing) * 28);
2033
+ .pb-20 {
2034
+ padding-bottom: calc(var(--spacing) * 20);
2035
+ }
2036
+ .pl-4 {
2037
+ padding-left: calc(var(--spacing) * 4);
1996
2038
  }
1997
2039
  .pl-5 {
1998
2040
  padding-left: calc(var(--spacing) * 5);
@@ -2006,6 +2048,9 @@
2006
2048
  .text-left {
2007
2049
  text-align: left;
2008
2050
  }
2051
+ .align-\[-0\.1em\] {
2052
+ vertical-align: -0.1em;
2053
+ }
2009
2054
  .align-top {
2010
2055
  vertical-align: top;
2011
2056
  }
@@ -2044,8 +2089,14 @@
2044
2089
  font-size: var(--text-xs);
2045
2090
  line-height: var(--tw-leading, var(--text-xs--line-height));
2046
2091
  }
2047
- .text-\[10px\] {
2048
- font-size: 10px;
2092
+ .text-\[0\.9em\] {
2093
+ font-size: 0.9em;
2094
+ }
2095
+ .text-\[0\.9375rem\] {
2096
+ font-size: 0.9375rem;
2097
+ }
2098
+ .text-\[2\.75rem\] {
2099
+ font-size: 2.75rem;
2049
2100
  }
2050
2101
  .leading-4 {
2051
2102
  --tw-leading: calc(var(--spacing) * 4);
@@ -2059,10 +2110,26 @@
2059
2110
  --tw-leading: calc(var(--spacing) * 6);
2060
2111
  line-height: calc(var(--spacing) * 6);
2061
2112
  }
2113
+ .leading-7 {
2114
+ --tw-leading: calc(var(--spacing) * 7);
2115
+ line-height: calc(var(--spacing) * 7);
2116
+ }
2062
2117
  .leading-8 {
2063
2118
  --tw-leading: calc(var(--spacing) * 8);
2064
2119
  line-height: calc(var(--spacing) * 8);
2065
2120
  }
2121
+ .leading-9 {
2122
+ --tw-leading: calc(var(--spacing) * 9);
2123
+ line-height: calc(var(--spacing) * 9);
2124
+ }
2125
+ .leading-10 {
2126
+ --tw-leading: calc(var(--spacing) * 10);
2127
+ line-height: calc(var(--spacing) * 10);
2128
+ }
2129
+ .leading-\[0\.98\] {
2130
+ --tw-leading: 0.98;
2131
+ line-height: 0.98;
2132
+ }
2066
2133
  .leading-none {
2067
2134
  --tw-leading: 1;
2068
2135
  line-height: 1;
@@ -2095,21 +2162,21 @@
2095
2162
  --tw-font-weight: var(--font-weight-semibold);
2096
2163
  font-weight: var(--font-weight-semibold);
2097
2164
  }
2098
- .tracking-\[0\.1px\] {
2099
- --tw-tracking: 0.1px;
2100
- letter-spacing: 0.1px;
2165
+ .tracking-\[-0\.01em\] {
2166
+ --tw-tracking: -0.01em;
2167
+ letter-spacing: -0.01em;
2101
2168
  }
2102
- .tracking-\[0\.5px\] {
2103
- --tw-tracking: 0.5px;
2104
- letter-spacing: 0.5px;
2169
+ .tracking-\[-0\.02em\] {
2170
+ --tw-tracking: -0.02em;
2171
+ letter-spacing: -0.02em;
2105
2172
  }
2106
- .tracking-\[0\.12em\] {
2107
- --tw-tracking: 0.12em;
2108
- letter-spacing: 0.12em;
2173
+ .tracking-\[-0\.005em\] {
2174
+ --tw-tracking: -0.005em;
2175
+ letter-spacing: -0.005em;
2109
2176
  }
2110
- .tracking-\[0\.15px\] {
2111
- --tw-tracking: 0.15px;
2112
- letter-spacing: 0.15px;
2177
+ .tracking-\[-0\.015em\] {
2178
+ --tw-tracking: -0.015em;
2179
+ letter-spacing: -0.015em;
2113
2180
  }
2114
2181
  .tracking-normal {
2115
2182
  --tw-tracking: var(--tracking-normal);
@@ -2123,6 +2190,10 @@
2123
2190
  --tw-tracking: var(--tracking-wide);
2124
2191
  letter-spacing: var(--tracking-wide);
2125
2192
  }
2193
+ .tracking-wider {
2194
+ --tw-tracking: var(--tracking-wider);
2195
+ letter-spacing: var(--tracking-wider);
2196
+ }
2126
2197
  .text-nowrap {
2127
2198
  text-wrap: nowrap;
2128
2199
  }
@@ -2141,12 +2212,18 @@
2141
2212
  .whitespace-normal {
2142
2213
  white-space: normal;
2143
2214
  }
2215
+ .whitespace-nowrap {
2216
+ white-space: nowrap;
2217
+ }
2144
2218
  .whitespace-pre {
2145
2219
  white-space: pre;
2146
2220
  }
2147
2221
  .whitespace-pre-line {
2148
2222
  white-space: pre-line;
2149
2223
  }
2224
+ .text-action-danger-text {
2225
+ color: var(--color-action-danger-text);
2226
+ }
2150
2227
  .text-action-primary {
2151
2228
  color: var(--color-action-primary);
2152
2229
  }
@@ -2156,27 +2233,12 @@
2156
2233
  .text-base-100 {
2157
2234
  color: var(--color-base-100);
2158
2235
  }
2159
- .text-base-300 {
2160
- color: var(--color-base-300);
2161
- }
2162
- .text-base-400 {
2163
- color: var(--color-base-400);
2164
- }
2165
2236
  .text-base-600 {
2166
2237
  color: var(--color-base-600);
2167
2238
  }
2168
- .text-base-700 {
2169
- color: var(--color-base-700);
2170
- }
2171
- .text-base-800 {
2172
- color: var(--color-base-800);
2173
- }
2174
2239
  .text-base-900 {
2175
2240
  color: var(--color-base-900);
2176
2241
  }
2177
- .text-blue-800 {
2178
- color: var(--color-blue-800);
2179
- }
2180
2242
  .text-body {
2181
2243
  color: var(--color-body);
2182
2244
  }
@@ -2201,14 +2263,14 @@
2201
2263
  .text-description {
2202
2264
  color: var(--color-description);
2203
2265
  }
2204
- .text-energetic {
2205
- color: var(--color-energetic);
2266
+ .text-energetic-text {
2267
+ color: var(--color-energetic-text);
2206
2268
  }
2207
2269
  .text-error {
2208
2270
  color: var(--color-error);
2209
2271
  }
2210
- .text-green-800 {
2211
- color: var(--color-green-800);
2272
+ .text-error-text {
2273
+ color: var(--color-error-text);
2212
2274
  }
2213
2275
  .text-headline {
2214
2276
  color: var(--color-headline);
@@ -2216,6 +2278,9 @@
2216
2278
  .text-info {
2217
2279
  color: var(--color-info);
2218
2280
  }
2281
+ .text-info-text {
2282
+ color: var(--color-info-text);
2283
+ }
2219
2284
  .text-inherit {
2220
2285
  color: inherit;
2221
2286
  }
@@ -2231,15 +2296,15 @@
2231
2296
  .text-nav-menu-item {
2232
2297
  color: var(--color-nav-menu-item);
2233
2298
  }
2234
- .text-neutral {
2235
- color: var(--color-neutral);
2299
+ .text-nav-menu-item-active {
2300
+ color: var(--color-nav-menu-item-active);
2301
+ }
2302
+ .text-neutral-text {
2303
+ color: var(--color-neutral-text);
2236
2304
  }
2237
2305
  .text-primary {
2238
2306
  color: var(--color-primary);
2239
2307
  }
2240
- .text-red-800 {
2241
- color: var(--color-red-800);
2242
- }
2243
2308
  .text-secondary {
2244
2309
  color: var(--color-secondary);
2245
2310
  }
@@ -2254,31 +2319,21 @@
2254
2319
  .text-success {
2255
2320
  color: var(--color-success);
2256
2321
  }
2322
+ .text-success-text {
2323
+ color: var(--color-success-text);
2324
+ }
2257
2325
  .text-tooltip-fg {
2258
2326
  color: var(--color-tooltip-fg);
2259
2327
  }
2260
2328
  .text-warning {
2261
2329
  color: var(--color-warning);
2262
2330
  }
2263
- .text-white {
2264
- color: var(--color-white);
2265
- }
2266
- .text-yellow-800 {
2267
- color: var(--color-yellow-800);
2268
- }
2269
- .lowercase {
2270
- text-transform: lowercase;
2331
+ .text-warning-text {
2332
+ color: var(--color-warning-text);
2271
2333
  }
2272
2334
  .uppercase {
2273
2335
  text-transform: uppercase;
2274
2336
  }
2275
- .italic {
2276
- font-style: italic;
2277
- }
2278
- .ordinal {
2279
- --tw-ordinal: ordinal;
2280
- font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2281
- }
2282
2337
  .tabular-nums {
2283
2338
  --tw-numeric-spacing: tabular-nums;
2284
2339
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2286,21 +2341,20 @@
2286
2341
  .no-underline {
2287
2342
  text-decoration-line: none;
2288
2343
  }
2289
- .overline {
2290
- text-decoration-line: overline;
2291
- }
2292
2344
  .underline {
2293
2345
  text-decoration-line: underline;
2294
2346
  }
2347
+ .decoration-1 {
2348
+ text-decoration-thickness: 1px;
2349
+ }
2295
2350
  .underline-offset-2 {
2296
2351
  text-underline-offset: 2px;
2297
2352
  }
2298
2353
  .underline-offset-4 {
2299
2354
  text-underline-offset: 4px;
2300
2355
  }
2301
- .antialiased {
2302
- -webkit-font-smoothing: antialiased;
2303
- -moz-osx-font-smoothing: grayscale;
2356
+ .accent-label {
2357
+ accent-color: var(--color-label);
2304
2358
  }
2305
2359
  .opacity-0 {
2306
2360
  opacity: 0%;
@@ -2395,10 +2449,6 @@
2395
2449
  --tw-blur: blur(8px);
2396
2450
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2397
2451
  }
2398
- .grayscale {
2399
- --tw-grayscale: grayscale(100%);
2400
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2401
- }
2402
2452
  .invert {
2403
2453
  --tw-invert: invert(100%);
2404
2454
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2406,13 +2456,14 @@
2406
2456
  .filter {
2407
2457
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2408
2458
  }
2409
- .filter\! {
2410
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
2411
- }
2412
2459
  .backdrop-blur {
2413
2460
  --tw-backdrop-blur: blur(8px);
2414
2461
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2415
2462
  }
2463
+ .backdrop-blur-md {
2464
+ --tw-backdrop-blur: blur(var(--blur-md));
2465
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2466
+ }
2416
2467
  .transition {
2417
2468
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2418
2469
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2451,10 +2502,6 @@
2451
2502
  --tw-duration: 200ms;
2452
2503
  transition-duration: 200ms;
2453
2504
  }
2454
- .duration-300 {
2455
- --tw-duration: 300ms;
2456
- transition-duration: 300ms;
2457
- }
2458
2505
  .duration-1000 {
2459
2506
  --tw-duration: 1000ms;
2460
2507
  transition-duration: 1000ms;
@@ -2467,24 +2514,20 @@
2467
2514
  --tw-ease: linear;
2468
2515
  transition-timing-function: linear;
2469
2516
  }
2470
- .ease-out {
2471
- --tw-ease: var(--ease-out);
2472
- transition-timing-function: var(--ease-out);
2473
- }
2474
2517
  .outline-none {
2475
2518
  --tw-outline-style: none;
2476
2519
  outline-style: none;
2477
2520
  }
2478
- .select-all {
2479
- -webkit-user-select: all;
2480
- -moz-user-select: all;
2481
- user-select: all;
2482
- }
2483
2521
  .select-none {
2484
2522
  -webkit-user-select: none;
2485
2523
  -moz-user-select: none;
2486
2524
  user-select: none;
2487
2525
  }
2526
+ .group-focus-within\:opacity-100 {
2527
+ &:is(:where(.group):focus-within *) {
2528
+ opacity: 100%;
2529
+ }
2530
+ }
2488
2531
  .group-hover\:translate-x-1 {
2489
2532
  &:is(:where(.group):hover *) {
2490
2533
  @media (hover: hover) {
@@ -2493,16 +2536,6 @@
2493
2536
  }
2494
2537
  }
2495
2538
  }
2496
- .group-hover\:scale-110 {
2497
- &:is(:where(.group):hover *) {
2498
- @media (hover: hover) {
2499
- --tw-scale-x: 110%;
2500
- --tw-scale-y: 110%;
2501
- --tw-scale-z: 110%;
2502
- scale: var(--tw-scale-x) var(--tw-scale-y);
2503
- }
2504
- }
2505
- }
2506
2539
  .group-hover\:border-brand-500 {
2507
2540
  &:is(:where(.group):hover *) {
2508
2541
  @media (hover: hover) {
@@ -2573,6 +2606,14 @@
2573
2606
  color: var(--color-description);
2574
2607
  }
2575
2608
  }
2609
+ .placeholder\:text-input-placeholder {
2610
+ &::-moz-placeholder {
2611
+ color: var(--color-input-placeholder);
2612
+ }
2613
+ &::placeholder {
2614
+ color: var(--color-input-placeholder);
2615
+ }
2616
+ }
2576
2617
  .first\:pt-1 {
2577
2618
  &:first-child {
2578
2619
  padding-top: calc(var(--spacing) * 1);
@@ -2599,31 +2640,17 @@
2599
2640
  opacity: 75%;
2600
2641
  }
2601
2642
  }
2602
- .hover\:scale-\[1\.02\] {
2643
+ .hover\:border-action-primary {
2603
2644
  &:hover {
2604
2645
  @media (hover: hover) {
2605
- scale: 1.02;
2646
+ border-color: var(--color-action-primary);
2606
2647
  }
2607
2648
  }
2608
2649
  }
2609
- .hover\:border-base-200 {
2650
+ .hover\:border-border {
2610
2651
  &:hover {
2611
2652
  @media (hover: hover) {
2612
- border-color: var(--color-base-200);
2613
- }
2614
- }
2615
- }
2616
- .hover\:border-base-300 {
2617
- &:hover {
2618
- @media (hover: hover) {
2619
- border-color: var(--color-base-300);
2620
- }
2621
- }
2622
- }
2623
- .hover\:border-base-400 {
2624
- &:hover {
2625
- @media (hover: hover) {
2626
- border-color: var(--color-base-400);
2653
+ border-color: var(--color-border);
2627
2654
  }
2628
2655
  }
2629
2656
  }
@@ -2634,34 +2661,10 @@
2634
2661
  }
2635
2662
  }
2636
2663
  }
2637
- .hover\:border-brand-500 {
2638
- &:hover {
2639
- @media (hover: hover) {
2640
- border-color: var(--color-brand-500);
2641
- }
2642
- }
2643
- }
2644
- .hover\:border-headline\/30 {
2664
+ .hover\:border-border-strong {
2645
2665
  &:hover {
2646
2666
  @media (hover: hover) {
2647
- border-color: color-mix(in srgb, #18181b 30%, transparent);
2648
- @supports (color: color-mix(in lab, red, red)) {
2649
- & {
2650
- border-color: color-mix(in oklab, var(--color-headline) 30%, transparent);
2651
- }
2652
- }
2653
- }
2654
- }
2655
- }
2656
- .hover\:border-primary\/20 {
2657
- &:hover {
2658
- @media (hover: hover) {
2659
- border-color: color-mix(in srgb, #6e84fa 20%, transparent);
2660
- @supports (color: color-mix(in lab, red, red)) {
2661
- & {
2662
- border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
2663
- }
2664
- }
2667
+ border-color: var(--color-border-strong);
2665
2668
  }
2666
2669
  }
2667
2670
  }
@@ -2686,13 +2689,6 @@
2686
2689
  }
2687
2690
  }
2688
2691
  }
2689
- .hover\:bg-action-secondary {
2690
- &:hover {
2691
- @media (hover: hover) {
2692
- background-color: var(--color-action-secondary);
2693
- }
2694
- }
2695
- }
2696
2692
  .hover\:bg-action-secondary-hover {
2697
2693
  &:hover {
2698
2694
  @media (hover: hover) {
@@ -2700,25 +2696,6 @@
2700
2696
  }
2701
2697
  }
2702
2698
  }
2703
- .hover\:bg-base-50 {
2704
- &:hover {
2705
- @media (hover: hover) {
2706
- background-color: var(--color-base-50);
2707
- }
2708
- }
2709
- }
2710
- .hover\:bg-base-50\/70 {
2711
- &:hover {
2712
- @media (hover: hover) {
2713
- background-color: color-mix(in srgb, #fafafa 70%, transparent);
2714
- @supports (color: color-mix(in lab, red, red)) {
2715
- & {
2716
- background-color: color-mix(in oklab, var(--color-base-50) 70%, transparent);
2717
- }
2718
- }
2719
- }
2720
- }
2721
- }
2722
2699
  .hover\:bg-base-50\/80 {
2723
2700
  &:hover {
2724
2701
  @media (hover: hover) {
@@ -2745,24 +2722,10 @@
2745
2722
  }
2746
2723
  }
2747
2724
  }
2748
- .hover\:bg-base-500 {
2749
- &:hover {
2750
- @media (hover: hover) {
2751
- background-color: var(--color-base-500);
2752
- }
2753
- }
2754
- }
2755
- .hover\:bg-base-700 {
2756
- &:hover {
2757
- @media (hover: hover) {
2758
- background-color: var(--color-base-700);
2759
- }
2760
- }
2761
- }
2762
- .hover\:bg-blue-700 {
2725
+ .hover\:bg-card {
2763
2726
  &:hover {
2764
2727
  @media (hover: hover) {
2765
- background-color: var(--color-blue-700);
2728
+ background-color: var(--color-card);
2766
2729
  }
2767
2730
  }
2768
2731
  }
@@ -2773,10 +2736,10 @@
2773
2736
  }
2774
2737
  }
2775
2738
  }
2776
- .hover\:bg-green-700 {
2739
+ .hover\:bg-control-track-hover {
2777
2740
  &:hover {
2778
2741
  @media (hover: hover) {
2779
- background-color: var(--color-green-700);
2742
+ background-color: var(--color-control-track-hover);
2780
2743
  }
2781
2744
  }
2782
2745
  }
@@ -2801,52 +2764,45 @@
2801
2764
  }
2802
2765
  }
2803
2766
  }
2804
- .hover\:bg-purple-700 {
2767
+ .hover\:bg-surface-hover {
2805
2768
  &:hover {
2806
2769
  @media (hover: hover) {
2807
- background-color: var(--color-purple-700);
2770
+ background-color: var(--color-surface-hover);
2808
2771
  }
2809
2772
  }
2810
2773
  }
2811
- .hover\:bg-red-700 {
2774
+ .hover\:bg-surface-overlay-hover {
2812
2775
  &:hover {
2813
2776
  @media (hover: hover) {
2814
- background-color: var(--color-red-700);
2777
+ background-color: var(--color-surface-overlay-hover);
2815
2778
  }
2816
2779
  }
2817
2780
  }
2818
- .hover\:text-action-primary {
2819
- &:hover {
2820
- @media (hover: hover) {
2821
- color: var(--color-action-primary);
2822
- }
2823
- }
2824
- }
2825
- .hover\:text-base-600 {
2781
+ .hover\:text-body {
2826
2782
  &:hover {
2827
2783
  @media (hover: hover) {
2828
- color: var(--color-base-600);
2784
+ color: var(--color-body);
2829
2785
  }
2830
2786
  }
2831
2787
  }
2832
- .hover\:text-body {
2788
+ .hover\:text-headline {
2833
2789
  &:hover {
2834
2790
  @media (hover: hover) {
2835
- color: var(--color-body);
2791
+ color: var(--color-headline);
2836
2792
  }
2837
2793
  }
2838
2794
  }
2839
- .hover\:text-headline {
2795
+ .hover\:text-link {
2840
2796
  &:hover {
2841
2797
  @media (hover: hover) {
2842
- color: var(--color-headline);
2798
+ color: var(--color-link);
2843
2799
  }
2844
2800
  }
2845
2801
  }
2846
- .hover\:text-inherit {
2802
+ .hover\:text-link-hover {
2847
2803
  &:hover {
2848
2804
  @media (hover: hover) {
2849
- color: inherit;
2805
+ color: var(--color-link-hover);
2850
2806
  }
2851
2807
  }
2852
2808
  }
@@ -2864,17 +2820,17 @@
2864
2820
  }
2865
2821
  }
2866
2822
  }
2867
- .hover\:text-white {
2823
+ .hover\:underline {
2868
2824
  &:hover {
2869
2825
  @media (hover: hover) {
2870
- color: var(--color-white);
2826
+ text-decoration-line: underline;
2871
2827
  }
2872
2828
  }
2873
2829
  }
2874
- .hover\:underline {
2830
+ .hover\:decoration-2 {
2875
2831
  &:hover {
2876
2832
  @media (hover: hover) {
2877
- text-decoration-line: underline;
2833
+ text-decoration-thickness: 2px;
2878
2834
  }
2879
2835
  }
2880
2836
  }
@@ -2893,30 +2849,6 @@
2893
2849
  }
2894
2850
  }
2895
2851
  }
2896
- .hover\:shadow-md {
2897
- &:hover {
2898
- @media (hover: hover) {
2899
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
2900
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2901
- }
2902
- }
2903
- }
2904
- .hover\:shadow-sm {
2905
- &:hover {
2906
- @media (hover: hover) {
2907
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
2908
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2909
- }
2910
- }
2911
- }
2912
- .hover\:shadow-xl {
2913
- &:hover {
2914
- @media (hover: hover) {
2915
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 8px 10px -6px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
2916
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2917
- }
2918
- }
2919
- }
2920
2852
  .hover\:ring-1 {
2921
2853
  &:hover {
2922
2854
  @media (hover: hover) {
@@ -2952,13 +2884,6 @@
2952
2884
  }
2953
2885
  }
2954
2886
  }
2955
- .hover\:ring-brand-500 {
2956
- &:hover {
2957
- @media (hover: hover) {
2958
- --tw-ring-color: var(--color-brand-500);
2959
- }
2960
- }
2961
- }
2962
2887
  .focus\:not-sr-only {
2963
2888
  &:focus {
2964
2889
  position: static;
@@ -2971,31 +2896,11 @@
2971
2896
  white-space: normal;
2972
2897
  }
2973
2898
  }
2974
- .focus\:border-error {
2975
- &:focus {
2976
- border-color: var(--color-error);
2977
- }
2978
- }
2979
- .focus\:border-success {
2980
- &:focus {
2981
- border-color: var(--color-success);
2982
- }
2983
- }
2984
- .focus\:border-warning {
2985
- &:focus {
2986
- border-color: var(--color-warning);
2987
- }
2988
- }
2989
2899
  .focus\:\!bg-transparent {
2990
2900
  &:focus {
2991
2901
  background-color: transparent !important;
2992
2902
  }
2993
2903
  }
2994
- .focus\:bg-input-focus {
2995
- &:focus {
2996
- background-color: var(--color-input-focus);
2997
- }
2998
- }
2999
2904
  .focus\:shadow-md {
3000
2905
  &:focus {
3001
2906
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
@@ -3008,58 +2913,17 @@
3008
2913
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3009
2914
  }
3010
2915
  }
3011
- .focus\:ring-base-500 {
3012
- &:focus {
3013
- --tw-ring-color: var(--color-base-500);
3014
- }
3015
- }
3016
2916
  .focus\:ring-brand-500 {
3017
2917
  &:focus {
3018
2918
  --tw-ring-color: var(--color-brand-500);
3019
2919
  }
3020
2920
  }
3021
- .focus\:ring-error {
3022
- &:focus {
3023
- --tw-ring-color: var(--color-error);
3024
- }
3025
- }
3026
- .focus\:ring-focus-ring {
3027
- &:focus {
3028
- --tw-ring-color: var(--color-focus-ring);
3029
- }
3030
- }
3031
- .focus\:ring-red-500 {
3032
- &:focus {
3033
- --tw-ring-color: var(--color-red-500);
3034
- }
3035
- }
3036
- .focus\:ring-success {
3037
- &:focus {
3038
- --tw-ring-color: var(--color-success);
3039
- }
3040
- }
3041
- .focus\:ring-warning {
3042
- &:focus {
3043
- --tw-ring-color: var(--color-warning);
3044
- }
3045
- }
3046
2921
  .focus\:ring-offset-0 {
3047
2922
  &:focus {
3048
2923
  --tw-ring-offset-width: 0px;
3049
2924
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3050
2925
  }
3051
2926
  }
3052
- .focus\:ring-offset-2 {
3053
- &:focus {
3054
- --tw-ring-offset-width: 2px;
3055
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3056
- }
3057
- }
3058
- .focus\:ring-offset-base-50 {
3059
- &:focus {
3060
- --tw-ring-offset-color: var(--color-base-50);
3061
- }
3062
- }
3063
2927
  .focus\:outline-none {
3064
2928
  &:focus {
3065
2929
  --tw-outline-style: none;
@@ -3091,14 +2955,14 @@
3091
2955
  border-color: var(--color-warning);
3092
2956
  }
3093
2957
  }
3094
- .focus-visible\:bg-base-100 {
2958
+ .focus-visible\:bg-input-focus {
3095
2959
  &:focus-visible {
3096
- background-color: var(--color-base-100);
2960
+ background-color: var(--color-input-focus);
3097
2961
  }
3098
2962
  }
3099
- .focus-visible\:bg-input-focus {
2963
+ .focus-visible\:bg-surface-hover {
3100
2964
  &:focus-visible {
3101
- background-color: var(--color-input-focus);
2965
+ background-color: var(--color-surface-hover);
3102
2966
  }
3103
2967
  }
3104
2968
  .focus-visible\:outline-none {
@@ -3107,14 +2971,6 @@
3107
2971
  outline-style: none;
3108
2972
  }
3109
2973
  }
3110
- .active\:scale-95 {
3111
- &:active {
3112
- --tw-scale-x: 95%;
3113
- --tw-scale-y: 95%;
3114
- --tw-scale-z: 95%;
3115
- scale: var(--tw-scale-x) var(--tw-scale-y);
3116
- }
3117
- }
3118
2974
  .active\:scale-100 {
3119
2975
  &:active {
3120
2976
  --tw-scale-x: 100%;
@@ -3153,34 +3009,9 @@
3153
3009
  background-color: var(--color-action-secondary-active);
3154
3010
  }
3155
3011
  }
3156
- .active\:bg-base-100 {
3157
- &:active {
3158
- background-color: var(--color-base-100);
3159
- }
3160
- }
3161
- .active\:bg-base-200 {
3162
- &:active {
3163
- background-color: var(--color-base-200);
3164
- }
3165
- }
3166
- .active\:bg-base-500 {
3167
- &:active {
3168
- background-color: var(--color-base-500);
3169
- }
3170
- }
3171
- .active\:bg-base-800 {
3172
- &:active {
3173
- background-color: var(--color-base-800);
3174
- }
3175
- }
3176
- .active\:bg-blue-800 {
3177
- &:active {
3178
- background-color: var(--color-blue-800);
3179
- }
3180
- }
3181
- .active\:bg-green-800 {
3012
+ .active\:bg-control-track-active {
3182
3013
  &:active {
3183
- background-color: var(--color-green-800);
3014
+ background-color: var(--color-control-track-active);
3184
3015
  }
3185
3016
  }
3186
3017
  .active\:bg-input-focus {
@@ -3188,34 +3019,14 @@
3188
3019
  background-color: var(--color-input-focus);
3189
3020
  }
3190
3021
  }
3191
- .active\:bg-purple-800 {
3022
+ .active\:bg-nav-menu-active-hover {
3192
3023
  &:active {
3193
- background-color: var(--color-purple-800);
3024
+ background-color: var(--color-nav-menu-active-hover);
3194
3025
  }
3195
3026
  }
3196
- .active\:bg-red-800 {
3027
+ .active\:bg-surface-active {
3197
3028
  &:active {
3198
- background-color: var(--color-red-800);
3199
- }
3200
- }
3201
- .active\:text-action-primary {
3202
- &:active {
3203
- color: var(--color-action-primary);
3204
- }
3205
- }
3206
- .active\:text-brand-700 {
3207
- &:active {
3208
- color: var(--color-brand-700);
3209
- }
3210
- }
3211
- .active\:opacity-90 {
3212
- &:active {
3213
- opacity: 90%;
3214
- }
3215
- }
3216
- .disabled\:pointer-events-none {
3217
- &:disabled {
3218
- pointer-events: none;
3029
+ background-color: var(--color-surface-active);
3219
3030
  }
3220
3031
  }
3221
3032
  .disabled\:cursor-not-allowed {
@@ -3223,14 +3034,14 @@
3223
3034
  cursor: not-allowed;
3224
3035
  }
3225
3036
  }
3226
- .disabled\:border-disabled {
3037
+ .disabled\:border-transparent {
3227
3038
  &:disabled {
3228
- border-color: var(--color-disabled);
3039
+ border-color: transparent;
3229
3040
  }
3230
3041
  }
3231
- .disabled\:bg-base-200 {
3042
+ .disabled\:bg-action-disabled {
3232
3043
  &:disabled {
3233
- background-color: var(--color-base-200);
3044
+ background-color: var(--color-action-disabled);
3234
3045
  }
3235
3046
  }
3236
3047
  .disabled\:bg-input-disabled {
@@ -3238,9 +3049,9 @@
3238
3049
  background-color: var(--color-input-disabled);
3239
3050
  }
3240
3051
  }
3241
- .disabled\:text-disabled {
3052
+ .disabled\:text-action-disabled-text {
3242
3053
  &:disabled {
3243
- color: var(--color-disabled);
3054
+ color: var(--color-action-disabled-text);
3244
3055
  }
3245
3056
  }
3246
3057
  .disabled\:no-underline {
@@ -3253,6 +3064,12 @@
3253
3064
  opacity: 50%;
3254
3065
  }
3255
3066
  }
3067
+ .disabled\:shadow-none {
3068
+ &:disabled {
3069
+ --tw-shadow: 0 0 #0000;
3070
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3071
+ }
3072
+ }
3256
3073
  .disabled\:hover\:border-transparent {
3257
3074
  &:disabled {
3258
3075
  &:hover {
@@ -3262,11 +3079,11 @@
3262
3079
  }
3263
3080
  }
3264
3081
  }
3265
- .disabled\:hover\:bg-base-50 {
3082
+ .disabled\:hover\:bg-action-disabled {
3266
3083
  &:disabled {
3267
3084
  &:hover {
3268
3085
  @media (hover: hover) {
3269
- background-color: var(--color-base-50);
3086
+ background-color: var(--color-action-disabled);
3270
3087
  }
3271
3088
  }
3272
3089
  }
@@ -3328,23 +3145,34 @@
3328
3145
  opacity: 50%;
3329
3146
  }
3330
3147
  }
3331
- .aria-\[current\=page\]\:bg-nav-menu-active {
3332
- &[aria-current="page"] {
3333
- background-color: var(--color-nav-menu-active);
3148
+ .aria-checked\:bg-card {
3149
+ &[aria-checked="true"] {
3150
+ background-color: var(--color-card);
3334
3151
  }
3335
3152
  }
3336
- .aria-\[current\=page\]\:text-nav-menu-item-active {
3337
- &[aria-current="page"] {
3338
- color: var(--color-nav-menu-item-active);
3153
+ .aria-checked\:text-headline {
3154
+ &[aria-checked="true"] {
3155
+ color: var(--color-headline);
3339
3156
  }
3340
3157
  }
3341
- .data-\[active\=true\]\:bg-nav-menu-active {
3342
- &[data-active="true"] {
3343
- background-color: var(--color-nav-menu-active);
3158
+ .aria-checked\:shadow-sm {
3159
+ &[aria-checked="true"] {
3160
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
3161
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3344
3162
  }
3345
3163
  }
3346
- .data-\[active\=true\]\:text-nav-menu-item-active {
3347
- &[data-active="true"] {
3164
+ .aria-pressed\:bg-action-primary-subtle {
3165
+ &[aria-pressed="true"] {
3166
+ background-color: var(--color-action-primary-subtle);
3167
+ }
3168
+ }
3169
+ .aria-pressed\:text-headline {
3170
+ &[aria-pressed="true"] {
3171
+ color: var(--color-headline);
3172
+ }
3173
+ }
3174
+ .aria-\[current\=page\]\:text-nav-menu-item-active {
3175
+ &[aria-current="page"] {
3348
3176
  color: var(--color-nav-menu-item-active);
3349
3177
  }
3350
3178
  }
@@ -3383,24 +3211,24 @@
3383
3211
  grid-template-columns: repeat(3, minmax(0, 1fr));
3384
3212
  }
3385
3213
  }
3386
- .sm\:flex-row {
3214
+ .sm\:grid-cols-\[3rem_1fr\] {
3387
3215
  @media (width >= 40rem) {
3388
- flex-direction: row;
3216
+ grid-template-columns: 3rem 1fr;
3389
3217
  }
3390
3218
  }
3391
- .sm\:gap-5 {
3219
+ .sm\:flex-row {
3392
3220
  @media (width >= 40rem) {
3393
- gap: calc(var(--spacing) * 5);
3221
+ flex-direction: row;
3394
3222
  }
3395
3223
  }
3396
- .sm\:gap-8 {
3224
+ .sm\:flex-wrap {
3397
3225
  @media (width >= 40rem) {
3398
- gap: calc(var(--spacing) * 8);
3226
+ flex-wrap: wrap;
3399
3227
  }
3400
3228
  }
3401
- .sm\:gap-16 {
3229
+ .sm\:p-8 {
3402
3230
  @media (width >= 40rem) {
3403
- gap: calc(var(--spacing) * 16);
3231
+ padding: calc(var(--spacing) * 8);
3404
3232
  }
3405
3233
  }
3406
3234
  .sm\:px-3 {
@@ -3413,6 +3241,16 @@
3413
3241
  padding-inline: calc(var(--spacing) * 6);
3414
3242
  }
3415
3243
  }
3244
+ .sm\:px-10 {
3245
+ @media (width >= 40rem) {
3246
+ padding-inline: calc(var(--spacing) * 10);
3247
+ }
3248
+ }
3249
+ .sm\:px-12 {
3250
+ @media (width >= 40rem) {
3251
+ padding-inline: calc(var(--spacing) * 12);
3252
+ }
3253
+ }
3416
3254
  .sm\:py-12 {
3417
3255
  @media (width >= 40rem) {
3418
3256
  padding-block: calc(var(--spacing) * 12);
@@ -3423,11 +3261,6 @@
3423
3261
  padding-block: calc(var(--spacing) * 16);
3424
3262
  }
3425
3263
  }
3426
- .sm\:py-20 {
3427
- @media (width >= 40rem) {
3428
- padding-block: calc(var(--spacing) * 20);
3429
- }
3430
- }
3431
3264
  .sm\:py-24 {
3432
3265
  @media (width >= 40rem) {
3433
3266
  padding-block: calc(var(--spacing) * 24);
@@ -3438,31 +3271,15 @@
3438
3271
  padding-block: calc(var(--spacing) * 32);
3439
3272
  }
3440
3273
  }
3441
- .sm\:py-40 {
3274
+ .sm\:pt-20 {
3442
3275
  @media (width >= 40rem) {
3443
- padding-block: calc(var(--spacing) * 40);
3276
+ padding-top: calc(var(--spacing) * 20);
3444
3277
  }
3445
3278
  }
3446
- .sm\:py-44 {
3279
+ .sm\:text-5xl {
3447
3280
  @media (width >= 40rem) {
3448
- padding-block: calc(var(--spacing) * 44);
3449
- }
3450
- }
3451
- .sm\:pb-32 {
3452
- @media (width >= 40rem) {
3453
- padding-bottom: calc(var(--spacing) * 32);
3454
- }
3455
- }
3456
- .sm\:text-2xl {
3457
- @media (width >= 40rem) {
3458
- font-size: var(--text-2xl);
3459
- line-height: var(--tw-leading, var(--text-2xl--line-height));
3460
- }
3461
- }
3462
- .sm\:text-4xl {
3463
- @media (width >= 40rem) {
3464
- font-size: var(--text-4xl);
3465
- line-height: var(--tw-leading, var(--text-4xl--line-height));
3281
+ font-size: var(--text-5xl);
3282
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
3466
3283
  }
3467
3284
  }
3468
3285
  .sm\:text-6xl {
@@ -3471,12 +3288,24 @@
3471
3288
  line-height: var(--tw-leading, var(--text-6xl--line-height));
3472
3289
  }
3473
3290
  }
3291
+ .sm\:text-7xl {
3292
+ @media (width >= 40rem) {
3293
+ font-size: var(--text-7xl);
3294
+ line-height: var(--tw-leading, var(--text-7xl--line-height));
3295
+ }
3296
+ }
3474
3297
  .sm\:text-xl {
3475
3298
  @media (width >= 40rem) {
3476
3299
  font-size: var(--text-xl);
3477
3300
  line-height: var(--tw-leading, var(--text-xl--line-height));
3478
3301
  }
3479
3302
  }
3303
+ .sm\:leading-9 {
3304
+ @media (width >= 40rem) {
3305
+ --tw-leading: calc(var(--spacing) * 9);
3306
+ line-height: calc(var(--spacing) * 9);
3307
+ }
3308
+ }
3480
3309
  .md\:static {
3481
3310
  @media (width >= 48rem) {
3482
3311
  position: static;
@@ -3613,14 +3442,9 @@
3613
3442
  justify-content: space-between;
3614
3443
  }
3615
3444
  }
3616
- .md\:gap-10 {
3617
- @media (width >= 48rem) {
3618
- gap: calc(var(--spacing) * 10);
3619
- }
3620
- }
3621
- .md\:rounded-3xl {
3445
+ .md\:rounded-overlay {
3622
3446
  @media (width >= 48rem) {
3623
- border-radius: var(--radius-3xl);
3447
+ border-radius: var(--radius-overlay);
3624
3448
  }
3625
3449
  }
3626
3450
  .md\:border-t-0 {
@@ -3650,6 +3474,41 @@
3650
3474
  text-align: left;
3651
3475
  }
3652
3476
  }
3477
+ .lg\:sticky {
3478
+ @media (width >= 64rem) {
3479
+ position: sticky;
3480
+ }
3481
+ }
3482
+ .lg\:top-28 {
3483
+ @media (width >= 64rem) {
3484
+ top: calc(var(--spacing) * 28);
3485
+ }
3486
+ }
3487
+ .lg\:col-span-4 {
3488
+ @media (width >= 64rem) {
3489
+ grid-column: span 4 / span 4;
3490
+ }
3491
+ }
3492
+ .lg\:col-span-5 {
3493
+ @media (width >= 64rem) {
3494
+ grid-column: span 5 / span 5;
3495
+ }
3496
+ }
3497
+ .lg\:col-span-6 {
3498
+ @media (width >= 64rem) {
3499
+ grid-column: span 6 / span 6;
3500
+ }
3501
+ }
3502
+ .lg\:col-span-7 {
3503
+ @media (width >= 64rem) {
3504
+ grid-column: span 7 / span 7;
3505
+ }
3506
+ }
3507
+ .lg\:col-span-8 {
3508
+ @media (width >= 64rem) {
3509
+ grid-column: span 8 / span 8;
3510
+ }
3511
+ }
3653
3512
  .lg\:w-\[500px\] {
3654
3513
  @media (width >= 64rem) {
3655
3514
  width: 500px;
@@ -3670,24 +3529,84 @@
3670
3529
  grid-template-columns: repeat(4, minmax(0, 1fr));
3671
3530
  }
3672
3531
  }
3532
+ .lg\:grid-cols-12 {
3533
+ @media (width >= 64rem) {
3534
+ grid-template-columns: repeat(12, minmax(0, 1fr));
3535
+ }
3536
+ }
3673
3537
  .lg\:grid-cols-\[\.75fr_1fr\] {
3674
3538
  @media (width >= 64rem) {
3675
3539
  grid-template-columns: .75fr 1fr;
3676
3540
  }
3677
3541
  }
3542
+ .lg\:justify-end {
3543
+ @media (width >= 64rem) {
3544
+ justify-content: flex-end;
3545
+ }
3546
+ }
3547
+ .lg\:gap-10 {
3548
+ @media (width >= 64rem) {
3549
+ gap: calc(var(--spacing) * 10);
3550
+ }
3551
+ }
3678
3552
  .lg\:px-8 {
3679
3553
  @media (width >= 64rem) {
3680
3554
  padding-inline: calc(var(--spacing) * 8);
3681
3555
  }
3682
3556
  }
3683
- .lg\:py-52 {
3557
+ .lg\:py-20 {
3684
3558
  @media (width >= 64rem) {
3685
- padding-block: calc(var(--spacing) * 52);
3559
+ padding-block: calc(var(--spacing) * 20);
3560
+ }
3561
+ }
3562
+ .lg\:py-28 {
3563
+ @media (width >= 64rem) {
3564
+ padding-block: calc(var(--spacing) * 28);
3565
+ }
3566
+ }
3567
+ .lg\:pt-6 {
3568
+ @media (width >= 64rem) {
3569
+ padding-top: calc(var(--spacing) * 6);
3570
+ }
3571
+ }
3572
+ .lg\:pt-24 {
3573
+ @media (width >= 64rem) {
3574
+ padding-top: calc(var(--spacing) * 24);
3575
+ }
3576
+ }
3577
+ .lg\:pb-28 {
3578
+ @media (width >= 64rem) {
3579
+ padding-bottom: calc(var(--spacing) * 28);
3686
3580
  }
3687
3581
  }
3688
- .lg\:pb-40 {
3582
+ .lg\:text-\[4\.25rem\] {
3689
3583
  @media (width >= 64rem) {
3690
- padding-bottom: calc(var(--spacing) * 40);
3584
+ font-size: 4.25rem;
3585
+ }
3586
+ }
3587
+ .xl\:col-span-5 {
3588
+ @media (width >= 80rem) {
3589
+ grid-column: span 5 / span 5;
3590
+ }
3591
+ }
3592
+ .xl\:col-span-6 {
3593
+ @media (width >= 80rem) {
3594
+ grid-column: span 6 / span 6;
3595
+ }
3596
+ }
3597
+ .xl\:col-start-8 {
3598
+ @media (width >= 80rem) {
3599
+ grid-column-start: 8;
3600
+ }
3601
+ }
3602
+ .xl\:px-0 {
3603
+ @media (width >= 80rem) {
3604
+ padding-inline: calc(var(--spacing) * 0);
3605
+ }
3606
+ }
3607
+ .xl\:text-\[4\.75rem\] {
3608
+ @media (width >= 80rem) {
3609
+ font-size: 4.75rem;
3691
3610
  }
3692
3611
  }
3693
3612
  .dark\:bg-brand-950 {
@@ -3732,17 +3651,17 @@ body {
3732
3651
  --zabi-base-900: #18181b;
3733
3652
  --zabi-base-925: #101013;
3734
3653
  --zabi-base-950: #09090b;
3735
- --zabi-brand-50: #f7faff;
3736
- --zabi-brand-100: #edf2fb;
3737
- --zabi-brand-200: #dfe7fb;
3738
- --zabi-brand-300: #ccdbfd;
3739
- --zabi-brand-400: #abc4ff;
3740
- --zabi-brand-500: #8fa8ff;
3741
- --zabi-brand-600: #6e84fa;
3742
- --zabi-brand-700: #5366e2;
3743
- --zabi-brand-800: #3f4fc0;
3744
- --zabi-brand-900: #2f3c99;
3745
- --zabi-brand-950: #1f2866;
3654
+ --zabi-brand-50: #f4f6ff;
3655
+ --zabi-brand-100: #e9eeff;
3656
+ --zabi-brand-200: #d3dcff;
3657
+ --zabi-brand-300: #b5c6ff;
3658
+ --zabi-brand-400: #92a9ff;
3659
+ --zabi-brand-500: #6d87f1;
3660
+ --zabi-brand-600: #4f68da;
3661
+ --zabi-brand-700: #3c52ba;
3662
+ --zabi-brand-800: #2b3e95;
3663
+ --zabi-brand-900: #1c2c6d;
3664
+ --zabi-brand-950: #111d49;
3746
3665
  --color-brand-50: var(--zabi-brand-950);
3747
3666
  --color-brand-100: var(--zabi-brand-900);
3748
3667
  --color-brand-200: var(--zabi-brand-800);
@@ -3754,17 +3673,17 @@ body {
3754
3673
  --color-brand-800: var(--zabi-brand-200);
3755
3674
  --color-brand-900: var(--zabi-brand-100);
3756
3675
  --color-brand-950: var(--zabi-brand-50);
3757
- --zabi-citron-50: #f9faeb;
3758
- --zabi-citron-100: #f1f5cf;
3759
- --zabi-citron-200: #e4ecaa;
3760
- --zabi-citron-300: #d5e184;
3761
- --zabi-citron-400: #c7d460;
3762
- --zabi-citron-500: #bbbe64;
3763
- --zabi-citron-600: #a3a852;
3764
- --zabi-citron-700: #848a43;
3765
- --zabi-citron-800: #666c35;
3766
- --zabi-citron-900: #4d5229;
3767
- --zabi-citron-950: #323518;
3676
+ --zabi-citron-50: #f6f7ef;
3677
+ --zabi-citron-100: #edefdf;
3678
+ --zabi-citron-200: #dcdfbf;
3679
+ --zabi-citron-300: #c5ca95;
3680
+ --zabi-citron-400: #aab063;
3681
+ --zabi-citron-500: #8c9027;
3682
+ --zabi-citron-600: #707400;
3683
+ --zabi-citron-700: #5a5d00;
3684
+ --zabi-citron-800: #454700;
3685
+ --zabi-citron-900: #313200;
3686
+ --zabi-citron-950: #202100;
3768
3687
  --color-citron-50: var(--zabi-citron-950);
3769
3688
  --color-citron-100: var(--zabi-citron-900);
3770
3689
  --color-citron-200: var(--zabi-citron-800);
@@ -3776,17 +3695,17 @@ body {
3776
3695
  --color-citron-800: var(--zabi-citron-200);
3777
3696
  --color-citron-900: var(--zabi-citron-100);
3778
3697
  --color-citron-950: var(--zabi-citron-50);
3779
- --zabi-pine-50: #e9f6f2;
3780
- --zabi-pine-100: #d2ece4;
3781
- --zabi-pine-200: #a7d9c9;
3782
- --zabi-pine-300: #78c4ad;
3783
- --zabi-pine-400: #49ad91;
3784
- --zabi-pine-500: #0c5d43;
3785
- --zabi-pine-600: #0a513a;
3786
- --zabi-pine-700: #084532;
3787
- --zabi-pine-800: #063a2a;
3788
- --zabi-pine-900: #04231a;
3789
- --zabi-pine-950: #02160f;
3698
+ --zabi-pine-50: #f0f8f5;
3699
+ --zabi-pine-100: #e2f1eb;
3700
+ --zabi-pine-200: #c5e4d7;
3701
+ --zabi-pine-300: #9fd1bd;
3702
+ --zabi-pine-400: #70ba9e;
3703
+ --zabi-pine-500: #399c7a;
3704
+ --zabi-pine-600: #00805e;
3705
+ --zabi-pine-700: #00674a;
3706
+ --zabi-pine-800: #004f37;
3707
+ --zabi-pine-900: #003826;
3708
+ --zabi-pine-950: #002518;
3790
3709
  --color-pine-50: var(--zabi-pine-950);
3791
3710
  --color-pine-100: var(--zabi-pine-900);
3792
3711
  --color-pine-200: var(--zabi-pine-800);
@@ -3798,17 +3717,17 @@ body {
3798
3717
  --color-pine-800: var(--zabi-pine-200);
3799
3718
  --color-pine-900: var(--zabi-pine-100);
3800
3719
  --color-pine-950: var(--zabi-pine-50);
3801
- --zabi-iris-50: #f4f4fa;
3802
- --zabi-iris-100: #e9e9f7;
3803
- --zabi-iris-200: #d6d6f0;
3804
- --zabi-iris-300: #bdbde6;
3805
- --zabi-iris-400: #a3a3d8;
3806
- --zabi-iris-500: #6969b3;
3807
- --zabi-iris-600: #58589e;
3808
- --zabi-iris-700: #474788;
3809
- --zabi-iris-800: #38386f;
3810
- --zabi-iris-900: #2a2a56;
3811
- --zabi-iris-950: #1b1b37;
3720
+ --zabi-iris-50: #f6f6fd;
3721
+ --zabi-iris-100: #ecedfb;
3722
+ --zabi-iris-200: #dadbf6;
3723
+ --zabi-iris-300: #c1c4ef;
3724
+ --zabi-iris-400: #a5a7e2;
3725
+ --zabi-iris-500: #8486cd;
3726
+ --zabi-iris-600: #6969b4;
3727
+ --zabi-iris-700: #535397;
3728
+ --zabi-iris-800: #3f3f78;
3729
+ --zabi-iris-900: #2c2c58;
3730
+ --zabi-iris-950: #1d1d3a;
3812
3731
  --color-iris-50: var(--zabi-iris-950);
3813
3732
  --color-iris-100: var(--zabi-iris-900);
3814
3733
  --color-iris-200: var(--zabi-iris-800);
@@ -3820,17 +3739,17 @@ body {
3820
3739
  --color-iris-800: var(--zabi-iris-200);
3821
3740
  --color-iris-900: var(--zabi-iris-100);
3822
3741
  --color-iris-950: var(--zabi-iris-50);
3823
- --zabi-warning-50: #fffbeb;
3824
- --zabi-warning-100: #fef3c7;
3825
- --zabi-warning-200: #fde68a;
3826
- --zabi-warning-300: #fcd34d;
3827
- --zabi-warning-400: #fbbf24;
3828
- --zabi-warning-500: #f59e0b;
3829
- --zabi-warning-600: #d97706;
3830
- --zabi-warning-700: #b45309;
3831
- --zabi-warning-800: #92400e;
3832
- --zabi-warning-900: #78350f;
3833
- --zabi-warning-950: #451a03;
3742
+ --zabi-warning-50: #fbf6ed;
3743
+ --zabi-warning-100: #f7ecda;
3744
+ --zabi-warning-200: #f1d9b6;
3745
+ --zabi-warning-300: #e8bf87;
3746
+ --zabi-warning-400: #db9e4c;
3747
+ --zabi-warning-500: #c17b00;
3748
+ --zabi-warning-600: #9e6000;
3749
+ --zabi-warning-700: #824c00;
3750
+ --zabi-warning-800: #663800;
3751
+ --zabi-warning-900: #4b2600;
3752
+ --zabi-warning-950: #341800;
3834
3753
  --color-warning-50: var(--zabi-warning-950);
3835
3754
  --color-warning-100: var(--zabi-warning-900);
3836
3755
  --color-warning-200: var(--zabi-warning-800);
@@ -3842,17 +3761,17 @@ body {
3842
3761
  --color-warning-800: var(--zabi-warning-200);
3843
3762
  --color-warning-900: var(--zabi-warning-100);
3844
3763
  --color-warning-950: var(--zabi-warning-50);
3845
- --zabi-error-50: #fef2f2;
3846
- --zabi-error-100: #fee2e2;
3847
- --zabi-error-200: #fecaca;
3848
- --zabi-error-300: #fca5a5;
3849
- --zabi-error-400: #f87171;
3850
- --zabi-error-500: #ef4444;
3851
- --zabi-error-600: #dc2626;
3852
- --zabi-error-700: #b91c1c;
3853
- --zabi-error-800: #991b1b;
3854
- --zabi-error-900: #7f1d1d;
3855
- --zabi-error-950: #450a0a;
3764
+ --zabi-error-50: #fff4f3;
3765
+ --zabi-error-100: #ffe9e6;
3766
+ --zabi-error-200: #ffd2cd;
3767
+ --zabi-error-300: #ffb2ab;
3768
+ --zabi-error-400: #ff877d;
3769
+ --zabi-error-500: #ed564e;
3770
+ --zabi-error-600: #d22828;
3771
+ --zabi-error-700: #b20912;
3772
+ --zabi-error-800: #8c0006;
3773
+ --zabi-error-900: #660002;
3774
+ --zabi-error-950: #460202;
3856
3775
  --color-error-50: var(--zabi-error-950);
3857
3776
  --color-error-100: var(--zabi-error-900);
3858
3777
  --color-error-200: var(--zabi-error-800);
@@ -3885,27 +3804,44 @@ body {
3885
3804
  --color-base-900: #f4f4f5;
3886
3805
  --color-base-925: #f7f7f7;
3887
3806
  --color-base-950: #fafafa;
3888
- --color-card: var(--color-base-200);
3889
- --color-card-hover: var(--color-base-300);
3890
- --color-card-active: var(--color-base-400);
3891
- --color-card-elevated: var(--color-base-200);
3892
- --color-surface-1: var(--color-base-250);
3893
- --color-surface-2: var(--color-base-300);
3894
- --color-surface-3: var(--color-base-350);
3807
+ --color-surface-base: #18181b;
3808
+ --color-surface-raised: #262629;
3809
+ --color-surface-elevated: #363638;
3810
+ --color-surface-overlay: #454547;
3811
+ --color-surface-overlay-hover: #52525b;
3812
+ --color-neutral-subtle: var(--color-base-300);
3813
+ --color-border-overlay: var(--color-base-450);
3814
+ --color-background: var(--color-surface-base);
3815
+ --color-card: var(--color-surface-raised);
3816
+ --color-card-hover: var(--color-surface-elevated);
3817
+ --color-card-active: var(--color-surface-overlay);
3818
+ --color-card-elevated: var(--color-surface-elevated);
3819
+ --color-surface-1: var(--color-surface-raised);
3820
+ --color-surface-2: var(--color-surface-elevated);
3821
+ --color-surface-3: var(--color-surface-overlay);
3895
3822
  --color-surface-4: var(--color-base-400);
3823
+ --color-description: var(--color-base-700);
3824
+ --color-caption: var(--color-base-650);
3825
+ --color-surface-hover: rgba(250, 250, 250, 0.08);
3826
+ --color-surface-active: rgba(250, 250, 250, 0.14);
3896
3827
  --color-overlay: rgba(0, 0, 0, 0.7);
3897
- --color-input: var(--color-base-250);
3898
- --color-input-border: var(--color-base-350);
3899
- --color-input-hover: var(--color-base-300);
3900
- --color-input-focus: var(--color-base-300);
3901
- --color-input-disabled: var(--color-base-300);
3902
- --color-action-primary-text: var(--color-brand-50);
3903
- --color-action-danger: #ef4444;
3904
- --color-action-danger-hover: #dc2626;
3905
- --color-action-danger-active: #b91c1c;
3906
- --color-action-danger-disabled: #b91c1c;
3907
- --color-action-danger-subtle: #450a0a;
3908
- --color-action-danger-subtle-hover: #7f1d1d;
3828
+ --color-input: var(--color-base-150);
3829
+ --color-input-border: var(--color-base-300);
3830
+ --color-input-hover: var(--color-base-200);
3831
+ --color-input-focus: var(--color-base-150);
3832
+ --color-input-disabled: var(--color-base-100);
3833
+ --color-input-placeholder: var(--color-base-500);
3834
+ --color-neutral: var(--color-base-600);
3835
+ --color-action-primary-text: var(--zabi-brand-950);
3836
+ --color-action-secondary: rgba(250, 250, 250, 0.09);
3837
+ --color-action-secondary-hover: rgba(250, 250, 250, 0.15);
3838
+ --color-action-secondary-active: rgba(250, 250, 250, 0.21);
3839
+ --color-action-danger: var(--color-error-600);
3840
+ --color-action-danger-hover: var(--color-error-700);
3841
+ --color-action-danger-active: var(--color-error-800);
3842
+ --color-action-danger-subtle: var(--color-error-100);
3843
+ --color-action-danger-subtle-hover: var(--color-error-200);
3844
+ --color-action-danger-text: var(--color-error-50);
3909
3845
  --shadow-opacity: 0.3;
3910
3846
  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
3911
3847
  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
@@ -4197,6 +4133,12 @@ body {
4197
4133
  .bg-nav-menu-active {
4198
4134
  background-color: var(--color-nav-menu-active);
4199
4135
  }
4136
+ .active\:bg-nav-menu-active-hover:active {
4137
+ background-color: var(--color-nav-menu-active-hover);
4138
+ }
4139
+ .bg-nav-menu-item-active {
4140
+ background-color: var(--color-nav-menu-item-active);
4141
+ }
4200
4142
  .text-success {
4201
4143
  color: var(--color-success-text);
4202
4144
  }
@@ -4388,7 +4330,8 @@ body {
4388
4330
  background-color: var(--color-action-primary-active);
4389
4331
  }
4390
4332
  .bg-action-primary:disabled {
4391
- background-color: var(--color-action-primary-disabled);
4333
+ background-color: var(--color-action-disabled);
4334
+ color: var(--color-action-disabled-text);
4392
4335
  }
4393
4336
  .bg-action-primary-subtle {
4394
4337
  background-color: var(--color-action-primary-subtle);
@@ -4409,7 +4352,8 @@ body {
4409
4352
  background-color: var(--color-action-secondary-active);
4410
4353
  }
4411
4354
  .bg-action-secondary:disabled {
4412
- background-color: var(--color-action-secondary-disabled);
4355
+ background-color: var(--color-action-disabled);
4356
+ color: var(--color-action-disabled-text);
4413
4357
  }
4414
4358
  .bg-action-secondary-subtle {
4415
4359
  background-color: var(--color-action-secondary-subtle);
@@ -4427,7 +4371,8 @@ body {
4427
4371
  background-color: var(--color-action-danger-active);
4428
4372
  }
4429
4373
  .bg-action-danger:disabled {
4430
- background-color: var(--color-action-danger-disabled);
4374
+ background-color: var(--color-action-disabled);
4375
+ color: var(--color-action-disabled-text);
4431
4376
  }
4432
4377
  .bg-action-danger-subtle {
4433
4378
  background-color: var(--color-action-danger-subtle);
@@ -4435,6 +4380,9 @@ body {
4435
4380
  .bg-action-danger-subtle:hover {
4436
4381
  background-color: var(--color-action-danger-subtle-hover);
4437
4382
  }
4383
+ .z-sticky {
4384
+ z-index: var(--z-sticky);
4385
+ }
4438
4386
  .z-dropdown {
4439
4387
  z-index: var(--z-dropdown);
4440
4388
  }