zabi-components 7.0.1 → 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 +89 -57
  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 +3 -437
  138. package/dist/zabi-components-theme-dark-only.css +223 -103
  139. package/dist/zabi-components-theme-dark.css +223 -103
  140. package/dist/zabi-components-theme-only.css +347 -107
  141. package/dist/zabi-components-theme.css +347 -107
  142. package/dist/zabi-components.css +953 -843
  143. package/docs/lucide-icons.md +3 -1
  144. package/package.json +20 -25
  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,41 +93,115 @@
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
- --color-brand-50: #f7faff;
134
- --color-brand-100: #edf2fb;
135
- --color-brand-200: #dfe7fb;
136
- --color-brand-300: #ccdbfd;
137
- --color-brand-400: #abc4ff;
138
- --color-brand-500: #8fa8ff;
139
- --color-brand-600: #6e84fa;
140
- --color-brand-700: #5366e2;
141
- --color-brand-800: #3f4fc0;
142
- --color-brand-900: #2f3c99;
143
- --color-brand-950: #1f2866;
144
- --color-citron-200: #e4ecaa;
145
- --color-citron-300: #d5e184;
146
- --color-citron-400: #c7d460;
147
- --color-citron-500: #bbbe64;
148
- --color-citron-600: #a3a852;
149
- --color-citron-700: #848a43;
150
- --color-pine-200: #a7d9c9;
151
- --color-pine-300: #78c4ad;
152
- --color-pine-400: #49ad91;
153
- --color-pine-500: #0C5D43;
154
- --color-pine-600: #0a513a;
155
- --color-pine-700: #084532;
156
- --color-pine-800: #063a2a;
157
- --color-pine-900: #04231a;
158
- --color-iris-50: #f4f4fa;
159
- --color-iris-100: #e9e9f7;
160
- --color-iris-200: #d6d6f0;
161
- --color-iris-300: #bdbde6;
162
- --color-iris-400: #a3a3d8;
163
- --color-iris-500: #6969B3;
164
- --color-iris-600: #58589e;
165
- --color-iris-700: #474788;
166
- --color-iris-800: #38386f;
167
- --color-iris-900: #2a2a56;
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;
107
+ --color-brand-50: var(--zabi-brand-50);
108
+ --color-brand-100: var(--zabi-brand-100);
109
+ --color-brand-200: var(--zabi-brand-200);
110
+ --color-brand-300: var(--zabi-brand-300);
111
+ --color-brand-400: var(--zabi-brand-400);
112
+ --color-brand-500: var(--zabi-brand-500);
113
+ --color-brand-600: var(--zabi-brand-600);
114
+ --color-brand-700: var(--zabi-brand-700);
115
+ --color-brand-800: var(--zabi-brand-800);
116
+ --color-brand-900: var(--zabi-brand-900);
117
+ --color-brand-950: var(--zabi-brand-950);
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);
131
+ --color-citron-600: var(--zabi-citron-600);
132
+ --color-citron-700: var(--zabi-citron-700);
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);
148
+ --color-pine-600: var(--zabi-pine-600);
149
+ --color-pine-700: var(--zabi-pine-700);
150
+ --color-pine-800: var(--zabi-pine-800);
151
+ --color-pine-900: var(--zabi-pine-900);
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;
163
+ --color-iris-100: var(--zabi-iris-100);
164
+ --color-iris-200: var(--zabi-iris-200);
165
+ --color-iris-400: var(--zabi-iris-400);
166
+ --color-iris-600: var(--zabi-iris-600);
167
+ --color-iris-700: var(--zabi-iris-700);
168
+ --color-iris-800: var(--zabi-iris-800);
169
+ --color-iris-900: var(--zabi-iris-900);
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);
183
+ --color-warning-600: var(--zabi-warning-600);
184
+ --color-warning-700: var(--zabi-warning-700);
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);
201
+ --color-error-600: var(--zabi-error-600);
202
+ --color-error-700: var(--zabi-error-700);
203
+ --color-error-800: var(--zabi-error-800);
204
+ --color-error-900: var(--zabi-error-900);
168
205
  --color-base-50: var(--zabi-base-50);
169
206
  --color-base-75: var(--zabi-base-75);
170
207
  --color-base-100: var(--zabi-base-100);
@@ -186,44 +223,56 @@
186
223
  --color-base-900: var(--zabi-base-900);
187
224
  --color-base-925: var(--zabi-base-925);
188
225
  --color-base-950: var(--zabi-base-950);
189
- --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);
190
233
  --color-background-secondary: var(--color-base-50);
191
234
  --color-background-tertiary: var(--color-base-100);
192
235
  --color-page: var(--color-base-100);
193
- --color-card: #ffffff;
236
+ --color-card: var(--color-surface-raised);
194
237
  --color-card-hover: var(--color-base-100);
195
238
  --color-card-active: var(--color-base-100);
196
- --color-card-elevated: #ffffff;
197
- --color-surface-1: #ffffff;
198
- --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);
199
242
  --color-surface-3: var(--color-base-75);
200
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);
201
249
  --color-overlay: rgba(0, 0, 0, 0.5);
202
- --color-input: var(--color-base-250);
250
+ --color-input: var(--color-surface-raised);
203
251
  --color-input-border: var(--color-base-350);
204
- --color-input-hover: var(--color-base-300);
205
- --color-input-focus: var(--color-base-300);
252
+ --color-input-hover: var(--color-base-150);
253
+ --color-input-focus: var(--color-surface-raised);
206
254
  --color-input-disabled: var(--color-base-100);
207
255
  --color-headline: var(--color-base-900);
208
256
  --color-body: var(--color-base-800);
209
257
  --color-description: var(--color-base-600);
210
- --color-caption: var(--color-base-500);
211
- --color-input-placeholder: var(--color-base-400);
258
+ --color-caption: var(--color-base-550);
259
+ --color-input-placeholder: var(--color-base-500);
212
260
  --color-label: var(--color-base-700);
213
- --color-link: var(--color-brand-600);
214
- --color-link-hover: var(--color-brand-700);
261
+ --color-link: var(--color-brand-700);
262
+ --color-link-hover: var(--color-brand-800);
215
263
  --color-nav-menu-item: var(--color-body);
216
264
  --color-nav-menu-item-hover: var(--color-headline);
217
265
  --color-nav-menu-item-active: var(--color-link);
218
- --color-nav-menu-hover: var(--color-base-100);
266
+ --color-nav-menu-hover: var(--color-surface-hover);
219
267
  --color-nav-menu-active: var(--color-action-primary-subtle);
268
+ --color-nav-menu-active-hover: var(--color-action-primary-subtle-hover);
220
269
  --color-nav-menu-focus: var(--color-brand-500);
221
- --color-success-text: var(--color-success);
222
- --color-warning-text: #b45309;
270
+ --color-success-text: var(--color-pine-700);
271
+ --color-warning-text: var(--color-warning-700);
223
272
  --color-neutral-text: var(--color-base-700);
224
273
  --color-energetic-text: var(--color-citron-700);
225
- --color-error-text: #b91c1c;
226
- --color-inverse: #ffffff;
274
+ --color-error-text: var(--color-error-700);
275
+ --color-inverse: var(--color-base-100);
227
276
  --color-disabled: var(--color-base-400);
228
277
  --color-border: var(--color-base-300);
229
278
  --color-border-weak: var(--color-base-300);
@@ -244,55 +293,72 @@
244
293
  --color-secondary-medium: var(--color-base-800);
245
294
  --color-secondary-strong: var(--color-base-900);
246
295
  --color-success: var(--color-pine-600);
247
- --color-warning: #f59e0b;
248
- --color-error: #ef4444;
249
- --color-energetic: var(--color-citron-500);
250
- --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);
251
310
  --color-info: var(--color-iris-600);
252
- --color-info-text: var(--color-info);
253
- --color-action-primary: var(--color-brand-950);
254
- --color-action-primary-hover: var(--color-brand-900);
255
- --color-action-primary-active: var(--color-brand-400);
256
- --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);
257
317
  --color-action-primary-subtle: var(--color-brand-100);
258
318
  --color-action-primary-subtle-hover: var(--color-brand-200);
259
- --color-action-primary-text: var(--color-brand-50);
260
- --color-action-secondary: color-mix(in srgb, #3f4fc0 10%, transparent);
261
- @supports (color: color-mix(in lab, red, red)) {
262
- & {
263
- --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
264
- }
265
- }
266
- --color-action-secondary-hover: color-mix(in srgb, #3f4fc0 20%, transparent);
267
- @supports (color: color-mix(in lab, red, red)) {
268
- & {
269
- --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
270
- }
271
- }
272
- --color-action-secondary-active: var(--color-brand-400);
273
- --color-action-secondary-disabled: var(--color-brand-500);
274
- --color-action-secondary-subtle: var(--color-brand-600);
275
- --color-action-secondary-subtle-hover: var(--color-brand-700);
276
- --color-action-danger: #dc2626;
277
- --color-action-danger-hover: #b91c1c;
278
- --color-action-danger-active: #991b1b;
279
- --color-action-danger-disabled: #fca5a5;
280
- --color-action-danger-subtle: #fef2f2;
281
- --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);
282
334
  --shadow-color: 0 0 0;
283
335
  --shadow-opacity: 0.1;
284
336
  --spacing-xs: 0.25rem;
285
- --spacing-sm: 0.5rem;
286
337
  --spacing-md: 1rem;
287
338
  --spacing-lg: 1.5rem;
288
339
  --spacing-xl: 2rem;
289
- --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;
290
353
  --z-dropdown: 1000;
354
+ --z-sticky: 1020;
291
355
  --z-modal-backdrop: 1040;
292
356
  --z-modal: 1050;
293
357
  --z-popover: 1060;
294
358
  --z-tooltip: 1070;
295
359
  --z-toast: 1080;
360
+ --color-tooltip-bg: var(--color-base-800);
361
+ --color-tooltip-fg: var(--color-base-50);
296
362
  }
297
363
  }
298
364
  @layer base {
@@ -461,9 +527,6 @@
461
527
  }
462
528
  }
463
529
  @layer utilities {
464
- .\@container {
465
- container-type: inline-size;
466
- }
467
530
  .pointer-events-auto {
468
531
  pointer-events: auto;
469
532
  }
@@ -583,9 +646,6 @@
583
646
  .left-full {
584
647
  left: 100%;
585
648
  }
586
- .isolate {
587
- isolation: isolate;
588
- }
589
649
  .z-10 {
590
650
  z-index: 10;
591
651
  }
@@ -595,36 +655,9 @@
595
655
  .z-30 {
596
656
  z-index: 30;
597
657
  }
598
- .z-50 {
599
- z-index: 50;
600
- }
601
658
  .row-span-3 {
602
659
  grid-row: span 3 / span 3;
603
660
  }
604
- .float-left {
605
- float: left;
606
- }
607
- .float-right {
608
- float: right;
609
- }
610
- .\!container {
611
- width: 100% !important;
612
- @media (width >= 40rem) {
613
- max-width: 40rem !important;
614
- }
615
- @media (width >= 48rem) {
616
- max-width: 48rem !important;
617
- }
618
- @media (width >= 64rem) {
619
- max-width: 64rem !important;
620
- }
621
- @media (width >= 80rem) {
622
- max-width: 80rem !important;
623
- }
624
- @media (width >= 96rem) {
625
- max-width: 96rem !important;
626
- }
627
- }
628
661
  .container {
629
662
  width: 100%;
630
663
  @media (width >= 40rem) {
@@ -661,15 +694,15 @@
661
694
  .mx-auto {
662
695
  margin-inline: auto;
663
696
  }
664
- .my-0\.5 {
665
- margin-block: calc(var(--spacing) * 0.5);
666
- }
667
- .my-0\.25 {
668
- margin-block: calc(var(--spacing) * 0.25);
697
+ .my-1 {
698
+ margin-block: calc(var(--spacing) * 1);
669
699
  }
670
700
  .my-2 {
671
701
  margin-block: calc(var(--spacing) * 2);
672
702
  }
703
+ .my-px {
704
+ margin-block: 1px;
705
+ }
673
706
  .-mt-0\.5 {
674
707
  margin-top: calc(var(--spacing) * -0.5);
675
708
  }
@@ -688,30 +721,27 @@
688
721
  .mt-4 {
689
722
  margin-top: calc(var(--spacing) * 4);
690
723
  }
724
+ .mt-5 {
725
+ margin-top: calc(var(--spacing) * 5);
726
+ }
691
727
  .mt-6 {
692
728
  margin-top: calc(var(--spacing) * 6);
693
729
  }
694
730
  .mt-8 {
695
731
  margin-top: calc(var(--spacing) * 8);
696
732
  }
733
+ .mt-10 {
734
+ margin-top: calc(var(--spacing) * 10);
735
+ }
736
+ .mt-14 {
737
+ margin-top: calc(var(--spacing) * 14);
738
+ }
697
739
  .mt-16 {
698
740
  margin-top: calc(var(--spacing) * 16);
699
741
  }
700
- .mt-auto {
701
- margin-top: auto;
702
- }
703
742
  .-mr-0\.5 {
704
743
  margin-right: calc(var(--spacing) * -0.5);
705
744
  }
706
- .mr-1 {
707
- margin-right: calc(var(--spacing) * 1);
708
- }
709
- .mr-1\.5 {
710
- margin-right: calc(var(--spacing) * 1.5);
711
- }
712
- .mr-2 {
713
- margin-right: calc(var(--spacing) * 2);
714
- }
715
745
  .mr-4 {
716
746
  margin-right: calc(var(--spacing) * 4);
717
747
  }
@@ -742,15 +772,9 @@
742
772
  .mb-16 {
743
773
  margin-bottom: calc(var(--spacing) * 16);
744
774
  }
745
- .mb-20 {
746
- margin-bottom: calc(var(--spacing) * 20);
747
- }
748
775
  .ml-1 {
749
776
  margin-left: calc(var(--spacing) * 1);
750
777
  }
751
- .ml-3 {
752
- margin-left: calc(var(--spacing) * 3);
753
- }
754
778
  .ml-4 {
755
779
  margin-left: calc(var(--spacing) * 4);
756
780
  }
@@ -769,9 +793,6 @@
769
793
  -webkit-box-orient: vertical;
770
794
  -webkit-line-clamp: 2;
771
795
  }
772
- .\!hidden {
773
- display: none !important;
774
- }
775
796
  .block {
776
797
  display: block;
777
798
  }
@@ -796,15 +817,9 @@
796
817
  .inline-flex {
797
818
  display: inline-flex;
798
819
  }
799
- .inline-grid {
800
- display: inline-grid;
801
- }
802
820
  .table {
803
821
  display: table;
804
822
  }
805
- .table-row {
806
- display: table-row;
807
- }
808
823
  .aspect-square {
809
824
  aspect-ratio: 1 / 1;
810
825
  }
@@ -816,6 +831,10 @@
816
831
  width: calc(var(--spacing) * 3);
817
832
  height: calc(var(--spacing) * 3);
818
833
  }
834
+ .size-3\.5 {
835
+ width: calc(var(--spacing) * 3.5);
836
+ height: calc(var(--spacing) * 3.5);
837
+ }
819
838
  .size-4 {
820
839
  width: calc(var(--spacing) * 4);
821
840
  height: calc(var(--spacing) * 4);
@@ -828,6 +847,10 @@
828
847
  width: calc(var(--spacing) * 6);
829
848
  height: calc(var(--spacing) * 6);
830
849
  }
850
+ .size-8 {
851
+ width: calc(var(--spacing) * 8);
852
+ height: calc(var(--spacing) * 8);
853
+ }
831
854
  .size-9 {
832
855
  width: calc(var(--spacing) * 9);
833
856
  height: calc(var(--spacing) * 9);
@@ -836,6 +859,10 @@
836
859
  width: calc(var(--spacing) * 10);
837
860
  height: calc(var(--spacing) * 10);
838
861
  }
862
+ .size-12 {
863
+ width: calc(var(--spacing) * 12);
864
+ height: calc(var(--spacing) * 12);
865
+ }
839
866
  .size-\[length\:var\(--spacing-xl\)\] {
840
867
  width: var(--spacing-xl);
841
868
  height: var(--spacing-xl);
@@ -862,6 +889,9 @@
862
889
  .h-6 {
863
890
  height: calc(var(--spacing) * 6);
864
891
  }
892
+ .h-7 {
893
+ height: calc(var(--spacing) * 7);
894
+ }
865
895
  .h-8 {
866
896
  height: calc(var(--spacing) * 8);
867
897
  }
@@ -910,6 +940,9 @@
910
940
  .min-h-0 {
911
941
  min-height: calc(var(--spacing) * 0);
912
942
  }
943
+ .min-h-8 {
944
+ min-height: calc(var(--spacing) * 8);
945
+ }
913
946
  .min-h-10 {
914
947
  min-height: calc(var(--spacing) * 10);
915
948
  }
@@ -961,8 +994,11 @@
961
994
  .w-80 {
962
995
  width: calc(var(--spacing) * 80);
963
996
  }
964
- .w-\[104px\] {
965
- width: 104px;
997
+ .w-\[3px\] {
998
+ width: 3px;
999
+ }
1000
+ .w-\[72px\] {
1001
+ width: 72px;
966
1002
  }
967
1003
  .w-\[200px\] {
968
1004
  width: 200px;
@@ -989,7 +1025,7 @@
989
1025
  width: 1px;
990
1026
  }
991
1027
  .max-w-2xl {
992
- max-width: var(--spacing-2xl);
1028
+ max-width: var(--max-width-2xl);
993
1029
  }
994
1030
  .max-w-3xl {
995
1031
  max-width: var(--container-3xl);
@@ -1026,14 +1062,14 @@
1026
1062
  max-width: 100%;
1027
1063
  }
1028
1064
  .max-w-lg {
1029
- max-width: var(--spacing-lg);
1065
+ max-width: var(--max-width-lg);
1030
1066
  }
1031
1067
  .max-w-max {
1032
1068
  max-width: -moz-max-content;
1033
1069
  max-width: max-content;
1034
1070
  }
1035
1071
  .max-w-md {
1036
- max-width: var(--spacing-md);
1072
+ max-width: var(--max-width-md);
1037
1073
  }
1038
1074
  .max-w-min {
1039
1075
  max-width: -moz-min-content;
@@ -1064,13 +1100,13 @@
1064
1100
  max-width: var(--breakpoint-xl);
1065
1101
  }
1066
1102
  .max-w-sm {
1067
- max-width: var(--spacing-sm);
1103
+ max-width: var(--max-width-sm);
1068
1104
  }
1069
1105
  .max-w-xl {
1070
- max-width: var(--spacing-xl);
1106
+ max-width: var(--max-width-xl);
1071
1107
  }
1072
1108
  .max-w-xs {
1073
- max-width: var(--spacing-xs);
1109
+ max-width: var(--max-width-xs);
1074
1110
  }
1075
1111
  .min-w-0 {
1076
1112
  min-width: calc(var(--spacing) * 0);
@@ -1099,9 +1135,6 @@
1099
1135
  .flex-1 {
1100
1136
  flex: 1;
1101
1137
  }
1102
- .flex-shrink {
1103
- flex-shrink: 1;
1104
- }
1105
1138
  .flex-shrink-0 {
1106
1139
  flex-shrink: 0;
1107
1140
  }
@@ -1111,9 +1144,6 @@
1111
1144
  .shrink-0 {
1112
1145
  flex-shrink: 0;
1113
1146
  }
1114
- .flex-grow {
1115
- flex-grow: 1;
1116
- }
1117
1147
  .grow {
1118
1148
  flex-grow: 1;
1119
1149
  }
@@ -1161,12 +1191,6 @@
1161
1191
  .transform {
1162
1192
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1163
1193
  }
1164
- .transform\! {
1165
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;
1166
- }
1167
- .transform-gpu {
1168
- transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1169
- }
1170
1194
  .animate-\[slideUp_0\.3s_ease-out\] {
1171
1195
  animation: slideUp 0.3s ease-out;
1172
1196
  }
@@ -1242,9 +1266,6 @@
1242
1266
  .justify-start {
1243
1267
  justify-content: flex-start;
1244
1268
  }
1245
- .gap-0\.5 {
1246
- gap: calc(var(--spacing) * 0.5);
1247
- }
1248
1269
  .gap-1 {
1249
1270
  gap: calc(var(--spacing) * 1);
1250
1271
  }
@@ -1269,12 +1290,18 @@
1269
1290
  .gap-6 {
1270
1291
  gap: calc(var(--spacing) * 6);
1271
1292
  }
1272
- .gap-8 {
1273
- gap: calc(var(--spacing) * 8);
1293
+ .gap-10 {
1294
+ gap: calc(var(--spacing) * 10);
1295
+ }
1296
+ .gap-12 {
1297
+ gap: calc(var(--spacing) * 12);
1274
1298
  }
1275
1299
  .gap-14 {
1276
1300
  gap: calc(var(--spacing) * 14);
1277
1301
  }
1302
+ .gap-md {
1303
+ gap: var(--spacing-md);
1304
+ }
1278
1305
  .space-y-0 {
1279
1306
  :where(& > :not(:last-child)) {
1280
1307
  --tw-space-y-reverse: 0;
@@ -1345,6 +1372,22 @@
1345
1372
  margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
1346
1373
  }
1347
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
+ }
1348
1391
  .space-x-4 {
1349
1392
  :where(& > :not(:last-child)) {
1350
1393
  --tw-space-x-reverse: 0;
@@ -1352,6 +1395,18 @@
1352
1395
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
1353
1396
  }
1354
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
+ }
1355
1410
  .divide-y {
1356
1411
  :where(& > :not(:last-child)) {
1357
1412
  --tw-divide-y-reverse: 0;
@@ -1407,8 +1462,14 @@
1407
1462
  .rounded-3xl {
1408
1463
  border-radius: var(--radius-3xl);
1409
1464
  }
1410
- .rounded-\[20px\] {
1411
- 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);
1412
1473
  }
1413
1474
  .rounded-full {
1414
1475
  border-radius: calc(infinity * 1px);
@@ -1419,6 +1480,12 @@
1419
1480
  .rounded-md {
1420
1481
  border-radius: var(--radius-md);
1421
1482
  }
1483
+ .rounded-overlay {
1484
+ border-radius: var(--radius-overlay);
1485
+ }
1486
+ .rounded-pill {
1487
+ border-radius: var(--radius-pill);
1488
+ }
1422
1489
  .rounded-sm {
1423
1490
  border-radius: var(--radius-sm);
1424
1491
  }
@@ -1428,9 +1495,67 @@
1428
1495
  .rounded-xs {
1429
1496
  border-radius: var(--radius-xs);
1430
1497
  }
1431
- .rounded-t-3xl {
1432
- border-top-left-radius: var(--radius-3xl);
1433
- 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);
1434
1559
  }
1435
1560
  .border {
1436
1561
  border-style: var(--tw-border-style);
@@ -1448,6 +1573,10 @@
1448
1573
  border-top-style: var(--tw-border-style);
1449
1574
  border-top-width: 1px;
1450
1575
  }
1576
+ .border-t-2 {
1577
+ border-top-style: var(--tw-border-style);
1578
+ border-top-width: 2px;
1579
+ }
1451
1580
  .border-r {
1452
1581
  border-right-style: var(--tw-border-style);
1453
1582
  border-right-width: 1px;
@@ -1460,10 +1589,6 @@
1460
1589
  border-bottom-style: var(--tw-border-style);
1461
1590
  border-bottom-width: 2px;
1462
1591
  }
1463
- .border-l-2 {
1464
- border-left-style: var(--tw-border-style);
1465
- border-left-width: 2px;
1466
- }
1467
1592
  .border-dashed {
1468
1593
  --tw-border-style: dashed;
1469
1594
  border-style: dashed;
@@ -1481,27 +1606,21 @@
1481
1606
  .border-base-200 {
1482
1607
  border-color: var(--color-base-200);
1483
1608
  }
1484
- .border-base-300 {
1485
- border-color: var(--color-base-300);
1486
- }
1487
1609
  .border-base-400 {
1488
1610
  border-color: var(--color-base-400);
1489
1611
  }
1490
- .border-base-700 {
1491
- border-color: var(--color-base-700);
1492
- }
1493
1612
  .border-base-950 {
1494
1613
  border-color: var(--color-base-950);
1495
1614
  }
1496
- .border-blue-200 {
1497
- border-color: var(--color-blue-200);
1498
- }
1499
- .border-blue-300 {
1500
- border-color: var(--color-blue-300);
1501
- }
1502
1615
  .border-border {
1503
1616
  border-color: var(--color-border);
1504
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
+ }
1505
1624
  .border-brand-500 {
1506
1625
  border-color: var(--color-brand-500);
1507
1626
  }
@@ -1514,63 +1633,54 @@
1514
1633
  .border-description {
1515
1634
  border-color: var(--color-description);
1516
1635
  }
1517
- .border-energetic {
1518
- border-color: var(--color-energetic);
1636
+ .border-energetic-border {
1637
+ border-color: var(--color-energetic-border);
1519
1638
  }
1520
1639
  .border-error {
1521
1640
  border-color: var(--color-error);
1522
1641
  }
1523
- .border-green-200 {
1524
- border-color: var(--color-green-200);
1642
+ .border-error-border {
1643
+ border-color: var(--color-error-border);
1525
1644
  }
1526
1645
  .border-green-300 {
1527
1646
  border-color: var(--color-green-300);
1528
1647
  }
1648
+ .border-headline {
1649
+ border-color: var(--color-headline);
1650
+ }
1529
1651
  .border-info {
1530
1652
  border-color: var(--color-info);
1531
1653
  }
1532
- .border-input {
1533
- border-color: var(--color-input);
1654
+ .border-info-border {
1655
+ border-color: var(--color-info-border);
1534
1656
  }
1535
1657
  .border-input-border {
1536
1658
  border-color: var(--color-input-border);
1537
1659
  }
1538
- .border-iris-300 {
1539
- border-color: var(--color-iris-300);
1540
- }
1541
- .border-neutral {
1542
- border-color: var(--color-neutral);
1660
+ .border-neutral-border {
1661
+ border-color: var(--color-neutral-border);
1543
1662
  }
1544
1663
  .border-primary {
1545
1664
  border-color: var(--color-primary);
1546
1665
  }
1547
- .border-red-200 {
1548
- border-color: var(--color-red-200);
1549
- }
1550
- .border-red-300 {
1551
- border-color: var(--color-red-300);
1552
- }
1553
- .border-secondary {
1554
- border-color: var(--color-secondary);
1555
- }
1556
1666
  .border-success {
1557
1667
  border-color: var(--color-success);
1558
1668
  }
1669
+ .border-success-border {
1670
+ border-color: var(--color-success-border);
1671
+ }
1559
1672
  .border-transparent {
1560
1673
  border-color: transparent;
1561
1674
  }
1562
1675
  .border-warning {
1563
1676
  border-color: var(--color-warning);
1564
1677
  }
1678
+ .border-warning-border {
1679
+ border-color: var(--color-warning-border);
1680
+ }
1565
1681
  .border-white {
1566
1682
  border-color: var(--color-white);
1567
1683
  }
1568
- .border-yellow-200 {
1569
- border-color: var(--color-yellow-200);
1570
- }
1571
- .border-yellow-300 {
1572
- border-color: var(--color-yellow-300);
1573
- }
1574
1684
  .border-t-transparent {
1575
1685
  border-top-color: transparent;
1576
1686
  }
@@ -1586,9 +1696,6 @@
1586
1696
  .bg-action-primary-subtle {
1587
1697
  background-color: var(--color-action-primary-subtle);
1588
1698
  }
1589
- .bg-action-primary-subtle-hover {
1590
- background-color: var(--color-action-primary-subtle-hover);
1591
- }
1592
1699
  .bg-action-secondary {
1593
1700
  background-color: var(--color-action-secondary);
1594
1701
  }
@@ -1612,15 +1719,6 @@
1612
1719
  .bg-base-200 {
1613
1720
  background-color: var(--color-base-200);
1614
1721
  }
1615
- .bg-base-400 {
1616
- background-color: var(--color-base-400);
1617
- }
1618
- .bg-base-600 {
1619
- background-color: var(--color-base-600);
1620
- }
1621
- .bg-base-800 {
1622
- background-color: var(--color-base-800);
1623
- }
1624
1722
  .bg-base-900 {
1625
1723
  background-color: var(--color-base-900);
1626
1724
  }
@@ -1632,12 +1730,6 @@
1632
1730
  }
1633
1731
  }
1634
1732
  }
1635
- .bg-blue-50 {
1636
- background-color: var(--color-blue-50);
1637
- }
1638
- .bg-blue-100 {
1639
- background-color: var(--color-blue-100);
1640
- }
1641
1733
  .bg-border {
1642
1734
  background-color: var(--color-border);
1643
1735
  }
@@ -1655,102 +1747,119 @@
1655
1747
  .bg-brand-100 {
1656
1748
  background-color: var(--color-brand-100);
1657
1749
  }
1658
- .bg-brand-500 {
1659
- background-color: var(--color-brand-500);
1660
- }
1661
1750
  .bg-brand-600 {
1662
1751
  background-color: var(--color-brand-600);
1663
1752
  }
1664
1753
  .bg-card {
1665
1754
  background-color: var(--color-card);
1666
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
+ }
1667
1762
  .bg-energetic {
1668
1763
  background-color: var(--color-energetic);
1669
1764
  }
1765
+ .bg-energetic-subtle {
1766
+ background-color: var(--color-energetic-subtle);
1767
+ }
1670
1768
  .bg-error {
1671
1769
  background-color: var(--color-error);
1672
1770
  }
1771
+ .bg-error-subtle {
1772
+ background-color: var(--color-error-subtle);
1773
+ }
1673
1774
  .bg-gray-50 {
1674
1775
  background-color: var(--color-gray-50);
1675
1776
  }
1676
- .bg-green-50 {
1677
- background-color: var(--color-green-50);
1678
- }
1679
- .bg-green-100 {
1680
- background-color: var(--color-green-100);
1681
- }
1682
- .bg-green-500 {
1683
- background-color: var(--color-green-500);
1684
- }
1685
- .bg-green-600 {
1686
- background-color: var(--color-green-600);
1687
- }
1688
1777
  .bg-info {
1689
1778
  background-color: var(--color-info);
1690
1779
  }
1780
+ .bg-info-subtle {
1781
+ background-color: var(--color-info-subtle);
1782
+ }
1691
1783
  .bg-input {
1692
1784
  background-color: var(--color-input);
1693
1785
  }
1694
- .bg-iris-100 {
1695
- background-color: var(--color-iris-100);
1696
- }
1697
1786
  .bg-nav-menu-active {
1698
1787
  background-color: var(--color-nav-menu-active);
1699
1788
  }
1789
+ .bg-nav-menu-item-active {
1790
+ background-color: var(--color-nav-menu-item-active);
1791
+ }
1700
1792
  .bg-neutral {
1701
1793
  background-color: var(--color-neutral);
1702
1794
  }
1795
+ .bg-neutral-subtle {
1796
+ background-color: var(--color-neutral-subtle);
1797
+ }
1703
1798
  .bg-overlay {
1704
1799
  background-color: var(--color-overlay);
1705
1800
  }
1706
1801
  .bg-primary {
1707
1802
  background-color: var(--color-primary);
1708
1803
  }
1709
- .bg-purple-600 {
1710
- background-color: var(--color-purple-600);
1711
- }
1712
- .bg-red-50 {
1713
- background-color: var(--color-red-50);
1714
- }
1715
- .bg-red-100 {
1716
- background-color: var(--color-red-100);
1717
- }
1718
1804
  .bg-red-500 {
1719
1805
  background-color: var(--color-red-500);
1720
1806
  }
1721
- .bg-red-600 {
1722
- background-color: var(--color-red-600);
1723
- }
1724
1807
  .bg-secondary {
1725
1808
  background-color: var(--color-secondary);
1726
1809
  }
1727
1810
  .bg-success {
1728
1811
  background-color: var(--color-success);
1729
1812
  }
1813
+ .bg-success-subtle {
1814
+ background-color: var(--color-success-subtle);
1815
+ }
1730
1816
  .bg-surface-1 {
1731
1817
  background-color: var(--color-surface-1);
1732
1818
  }
1733
1819
  .bg-surface-2 {
1734
1820
  background-color: var(--color-surface-2);
1735
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
+ }
1845
+ .bg-tooltip-bg {
1846
+ background-color: var(--color-tooltip-bg);
1847
+ }
1736
1848
  .bg-transparent {
1737
1849
  background-color: transparent;
1738
1850
  }
1851
+ .bg-transparent\! {
1852
+ background-color: transparent !important;
1853
+ }
1739
1854
  .bg-warning {
1740
1855
  background-color: var(--color-warning);
1741
1856
  }
1857
+ .bg-warning-subtle {
1858
+ background-color: var(--color-warning-subtle);
1859
+ }
1742
1860
  .bg-white {
1743
1861
  background-color: var(--color-white);
1744
1862
  }
1745
- .bg-yellow-50 {
1746
- background-color: var(--color-yellow-50);
1747
- }
1748
- .bg-yellow-100 {
1749
- background-color: var(--color-yellow-100);
1750
- }
1751
- .bg-yellow-500 {
1752
- background-color: var(--color-yellow-500);
1753
- }
1754
1863
  .bg-linear-to-b {
1755
1864
  --tw-gradient-position: to bottom;
1756
1865
  @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1765,15 +1874,15 @@
1765
1874
  .p-0 {
1766
1875
  padding: calc(var(--spacing) * 0);
1767
1876
  }
1877
+ .p-0\! {
1878
+ padding: calc(var(--spacing) * 0) !important;
1879
+ }
1768
1880
  .p-1 {
1769
1881
  padding: calc(var(--spacing) * 1);
1770
1882
  }
1771
1883
  .p-2 {
1772
1884
  padding: calc(var(--spacing) * 2);
1773
1885
  }
1774
- .p-2\.5 {
1775
- padding: calc(var(--spacing) * 2.5);
1776
- }
1777
1886
  .p-3 {
1778
1887
  padding: calc(var(--spacing) * 3);
1779
1888
  }
@@ -1789,6 +1898,9 @@
1789
1898
  .p-8 {
1790
1899
  padding: calc(var(--spacing) * 8);
1791
1900
  }
1901
+ .p-lg {
1902
+ padding: var(--spacing-lg);
1903
+ }
1792
1904
  .px-0 {
1793
1905
  padding-inline: calc(var(--spacing) * 0);
1794
1906
  }
@@ -1846,27 +1958,24 @@
1846
1958
  .py-8 {
1847
1959
  padding-block: calc(var(--spacing) * 8);
1848
1960
  }
1961
+ .py-10 {
1962
+ padding-block: calc(var(--spacing) * 10);
1963
+ }
1849
1964
  .py-12 {
1850
1965
  padding-block: calc(var(--spacing) * 12);
1851
1966
  }
1852
1967
  .py-16 {
1853
1968
  padding-block: calc(var(--spacing) * 16);
1854
1969
  }
1970
+ .py-20 {
1971
+ padding-block: calc(var(--spacing) * 20);
1972
+ }
1855
1973
  .py-24 {
1856
1974
  padding-block: calc(var(--spacing) * 24);
1857
1975
  }
1858
- .py-32 {
1859
- padding-block: calc(var(--spacing) * 32);
1860
- }
1861
- .py-36 {
1862
- padding-block: calc(var(--spacing) * 36);
1863
- }
1864
1976
  .pt-0 {
1865
1977
  padding-top: calc(var(--spacing) * 0);
1866
1978
  }
1867
- .pt-0\.5 {
1868
- padding-top: calc(var(--spacing) * 0.5);
1869
- }
1870
1979
  .pt-1 {
1871
1980
  padding-top: calc(var(--spacing) * 1);
1872
1981
  }
@@ -1879,12 +1988,21 @@
1879
1988
  .pt-4 {
1880
1989
  padding-top: calc(var(--spacing) * 4);
1881
1990
  }
1991
+ .pt-5 {
1992
+ padding-top: calc(var(--spacing) * 5);
1993
+ }
1882
1994
  .pt-6 {
1883
1995
  padding-top: calc(var(--spacing) * 6);
1884
1996
  }
1997
+ .pt-14 {
1998
+ padding-top: calc(var(--spacing) * 14);
1999
+ }
1885
2000
  .pr-1 {
1886
2001
  padding-right: calc(var(--spacing) * 1);
1887
2002
  }
2003
+ .pr-2 {
2004
+ padding-right: calc(var(--spacing) * 2);
2005
+ }
1888
2006
  .pr-5 {
1889
2007
  padding-right: calc(var(--spacing) * 5);
1890
2008
  }
@@ -1900,9 +2018,6 @@
1900
2018
  .pb-1 {
1901
2019
  padding-bottom: calc(var(--spacing) * 1);
1902
2020
  }
1903
- .pb-1\.5 {
1904
- padding-bottom: calc(var(--spacing) * 1.5);
1905
- }
1906
2021
  .pb-2 {
1907
2022
  padding-bottom: calc(var(--spacing) * 2);
1908
2023
  }
@@ -1915,8 +2030,11 @@
1915
2030
  .pb-6 {
1916
2031
  padding-bottom: calc(var(--spacing) * 6);
1917
2032
  }
1918
- .pb-28 {
1919
- 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);
1920
2038
  }
1921
2039
  .pl-5 {
1922
2040
  padding-left: calc(var(--spacing) * 5);
@@ -1930,6 +2048,9 @@
1930
2048
  .text-left {
1931
2049
  text-align: left;
1932
2050
  }
2051
+ .align-\[-0\.1em\] {
2052
+ vertical-align: -0.1em;
2053
+ }
1933
2054
  .align-top {
1934
2055
  vertical-align: top;
1935
2056
  }
@@ -1968,8 +2089,14 @@
1968
2089
  font-size: var(--text-xs);
1969
2090
  line-height: var(--tw-leading, var(--text-xs--line-height));
1970
2091
  }
1971
- .text-\[10px\] {
1972
- 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;
1973
2100
  }
1974
2101
  .leading-4 {
1975
2102
  --tw-leading: calc(var(--spacing) * 4);
@@ -1983,10 +2110,26 @@
1983
2110
  --tw-leading: calc(var(--spacing) * 6);
1984
2111
  line-height: calc(var(--spacing) * 6);
1985
2112
  }
2113
+ .leading-7 {
2114
+ --tw-leading: calc(var(--spacing) * 7);
2115
+ line-height: calc(var(--spacing) * 7);
2116
+ }
1986
2117
  .leading-8 {
1987
2118
  --tw-leading: calc(var(--spacing) * 8);
1988
2119
  line-height: calc(var(--spacing) * 8);
1989
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
+ }
1990
2133
  .leading-none {
1991
2134
  --tw-leading: 1;
1992
2135
  line-height: 1;
@@ -2019,21 +2162,21 @@
2019
2162
  --tw-font-weight: var(--font-weight-semibold);
2020
2163
  font-weight: var(--font-weight-semibold);
2021
2164
  }
2022
- .tracking-\[0\.1px\] {
2023
- --tw-tracking: 0.1px;
2024
- letter-spacing: 0.1px;
2165
+ .tracking-\[-0\.01em\] {
2166
+ --tw-tracking: -0.01em;
2167
+ letter-spacing: -0.01em;
2025
2168
  }
2026
- .tracking-\[0\.5px\] {
2027
- --tw-tracking: 0.5px;
2028
- letter-spacing: 0.5px;
2169
+ .tracking-\[-0\.02em\] {
2170
+ --tw-tracking: -0.02em;
2171
+ letter-spacing: -0.02em;
2029
2172
  }
2030
- .tracking-\[0\.12em\] {
2031
- --tw-tracking: 0.12em;
2032
- letter-spacing: 0.12em;
2173
+ .tracking-\[-0\.005em\] {
2174
+ --tw-tracking: -0.005em;
2175
+ letter-spacing: -0.005em;
2033
2176
  }
2034
- .tracking-\[0\.15px\] {
2035
- --tw-tracking: 0.15px;
2036
- letter-spacing: 0.15px;
2177
+ .tracking-\[-0\.015em\] {
2178
+ --tw-tracking: -0.015em;
2179
+ letter-spacing: -0.015em;
2037
2180
  }
2038
2181
  .tracking-normal {
2039
2182
  --tw-tracking: var(--tracking-normal);
@@ -2047,6 +2190,10 @@
2047
2190
  --tw-tracking: var(--tracking-wide);
2048
2191
  letter-spacing: var(--tracking-wide);
2049
2192
  }
2193
+ .tracking-wider {
2194
+ --tw-tracking: var(--tracking-wider);
2195
+ letter-spacing: var(--tracking-wider);
2196
+ }
2050
2197
  .text-nowrap {
2051
2198
  text-wrap: nowrap;
2052
2199
  }
@@ -2059,12 +2206,24 @@
2059
2206
  .break-words {
2060
2207
  overflow-wrap: break-word;
2061
2208
  }
2209
+ .wrap-break-word {
2210
+ overflow-wrap: break-word;
2211
+ }
2212
+ .whitespace-normal {
2213
+ white-space: normal;
2214
+ }
2215
+ .whitespace-nowrap {
2216
+ white-space: nowrap;
2217
+ }
2062
2218
  .whitespace-pre {
2063
2219
  white-space: pre;
2064
2220
  }
2065
2221
  .whitespace-pre-line {
2066
2222
  white-space: pre-line;
2067
2223
  }
2224
+ .text-action-danger-text {
2225
+ color: var(--color-action-danger-text);
2226
+ }
2068
2227
  .text-action-primary {
2069
2228
  color: var(--color-action-primary);
2070
2229
  }
@@ -2074,27 +2233,12 @@
2074
2233
  .text-base-100 {
2075
2234
  color: var(--color-base-100);
2076
2235
  }
2077
- .text-base-300 {
2078
- color: var(--color-base-300);
2079
- }
2080
- .text-base-400 {
2081
- color: var(--color-base-400);
2082
- }
2083
2236
  .text-base-600 {
2084
2237
  color: var(--color-base-600);
2085
2238
  }
2086
- .text-base-700 {
2087
- color: var(--color-base-700);
2088
- }
2089
- .text-base-800 {
2090
- color: var(--color-base-800);
2091
- }
2092
2239
  .text-base-900 {
2093
2240
  color: var(--color-base-900);
2094
2241
  }
2095
- .text-blue-800 {
2096
- color: var(--color-blue-800);
2097
- }
2098
2242
  .text-body {
2099
2243
  color: var(--color-body);
2100
2244
  }
@@ -2119,14 +2263,14 @@
2119
2263
  .text-description {
2120
2264
  color: var(--color-description);
2121
2265
  }
2122
- .text-energetic {
2123
- color: var(--color-energetic);
2266
+ .text-energetic-text {
2267
+ color: var(--color-energetic-text);
2124
2268
  }
2125
2269
  .text-error {
2126
2270
  color: var(--color-error);
2127
2271
  }
2128
- .text-green-800 {
2129
- color: var(--color-green-800);
2272
+ .text-error-text {
2273
+ color: var(--color-error-text);
2130
2274
  }
2131
2275
  .text-headline {
2132
2276
  color: var(--color-headline);
@@ -2134,6 +2278,9 @@
2134
2278
  .text-info {
2135
2279
  color: var(--color-info);
2136
2280
  }
2281
+ .text-info-text {
2282
+ color: var(--color-info-text);
2283
+ }
2137
2284
  .text-inherit {
2138
2285
  color: inherit;
2139
2286
  }
@@ -2149,15 +2296,15 @@
2149
2296
  .text-nav-menu-item {
2150
2297
  color: var(--color-nav-menu-item);
2151
2298
  }
2152
- .text-neutral {
2153
- 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);
2154
2304
  }
2155
2305
  .text-primary {
2156
2306
  color: var(--color-primary);
2157
2307
  }
2158
- .text-red-800 {
2159
- color: var(--color-red-800);
2160
- }
2161
2308
  .text-secondary {
2162
2309
  color: var(--color-secondary);
2163
2310
  }
@@ -2172,28 +2319,21 @@
2172
2319
  .text-success {
2173
2320
  color: var(--color-success);
2174
2321
  }
2175
- .text-warning {
2176
- color: var(--color-warning);
2322
+ .text-success-text {
2323
+ color: var(--color-success-text);
2177
2324
  }
2178
- .text-white {
2179
- color: var(--color-white);
2325
+ .text-tooltip-fg {
2326
+ color: var(--color-tooltip-fg);
2180
2327
  }
2181
- .text-yellow-800 {
2182
- color: var(--color-yellow-800);
2328
+ .text-warning {
2329
+ color: var(--color-warning);
2183
2330
  }
2184
- .lowercase {
2185
- text-transform: lowercase;
2331
+ .text-warning-text {
2332
+ color: var(--color-warning-text);
2186
2333
  }
2187
2334
  .uppercase {
2188
2335
  text-transform: uppercase;
2189
2336
  }
2190
- .italic {
2191
- font-style: italic;
2192
- }
2193
- .ordinal {
2194
- --tw-ordinal: ordinal;
2195
- font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2196
- }
2197
2337
  .tabular-nums {
2198
2338
  --tw-numeric-spacing: tabular-nums;
2199
2339
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2201,21 +2341,20 @@
2201
2341
  .no-underline {
2202
2342
  text-decoration-line: none;
2203
2343
  }
2204
- .overline {
2205
- text-decoration-line: overline;
2206
- }
2207
2344
  .underline {
2208
2345
  text-decoration-line: underline;
2209
2346
  }
2347
+ .decoration-1 {
2348
+ text-decoration-thickness: 1px;
2349
+ }
2210
2350
  .underline-offset-2 {
2211
2351
  text-underline-offset: 2px;
2212
2352
  }
2213
2353
  .underline-offset-4 {
2214
2354
  text-underline-offset: 4px;
2215
2355
  }
2216
- .antialiased {
2217
- -webkit-font-smoothing: antialiased;
2218
- -moz-osx-font-smoothing: grayscale;
2356
+ .accent-label {
2357
+ accent-color: var(--color-label);
2219
2358
  }
2220
2359
  .opacity-0 {
2221
2360
  opacity: 0%;
@@ -2310,10 +2449,6 @@
2310
2449
  --tw-blur: blur(8px);
2311
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,);
2312
2451
  }
2313
- .grayscale {
2314
- --tw-grayscale: grayscale(100%);
2315
- 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,);
2316
- }
2317
2452
  .invert {
2318
2453
  --tw-invert: invert(100%);
2319
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,);
@@ -2321,18 +2456,24 @@
2321
2456
  .filter {
2322
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,);
2323
2458
  }
2324
- .filter\! {
2325
- 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;
2326
- }
2327
2459
  .backdrop-blur {
2328
2460
  --tw-backdrop-blur: blur(8px);
2329
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,);
2330
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
+ }
2331
2467
  .transition {
2332
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;
2333
2469
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2334
2470
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2335
2471
  }
2472
+ .transition-\[opacity\,visibility\,transform\] {
2473
+ transition-property: opacity,visibility,transform;
2474
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2475
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2476
+ }
2336
2477
  .transition-all {
2337
2478
  transition-property: all;
2338
2479
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2361,10 +2502,6 @@
2361
2502
  --tw-duration: 200ms;
2362
2503
  transition-duration: 200ms;
2363
2504
  }
2364
- .duration-300 {
2365
- --tw-duration: 300ms;
2366
- transition-duration: 300ms;
2367
- }
2368
2505
  .duration-1000 {
2369
2506
  --tw-duration: 1000ms;
2370
2507
  transition-duration: 1000ms;
@@ -2377,24 +2514,20 @@
2377
2514
  --tw-ease: linear;
2378
2515
  transition-timing-function: linear;
2379
2516
  }
2380
- .ease-out {
2381
- --tw-ease: var(--ease-out);
2382
- transition-timing-function: var(--ease-out);
2383
- }
2384
2517
  .outline-none {
2385
2518
  --tw-outline-style: none;
2386
2519
  outline-style: none;
2387
2520
  }
2388
- .select-all {
2389
- -webkit-user-select: all;
2390
- -moz-user-select: all;
2391
- user-select: all;
2392
- }
2393
2521
  .select-none {
2394
2522
  -webkit-user-select: none;
2395
2523
  -moz-user-select: none;
2396
2524
  user-select: none;
2397
2525
  }
2526
+ .group-focus-within\:opacity-100 {
2527
+ &:is(:where(.group):focus-within *) {
2528
+ opacity: 100%;
2529
+ }
2530
+ }
2398
2531
  .group-hover\:translate-x-1 {
2399
2532
  &:is(:where(.group):hover *) {
2400
2533
  @media (hover: hover) {
@@ -2403,16 +2536,6 @@
2403
2536
  }
2404
2537
  }
2405
2538
  }
2406
- .group-hover\:scale-110 {
2407
- &:is(:where(.group):hover *) {
2408
- @media (hover: hover) {
2409
- --tw-scale-x: 110%;
2410
- --tw-scale-y: 110%;
2411
- --tw-scale-z: 110%;
2412
- scale: var(--tw-scale-x) var(--tw-scale-y);
2413
- }
2414
- }
2415
- }
2416
2539
  .group-hover\:border-brand-500 {
2417
2540
  &:is(:where(.group):hover *) {
2418
2541
  @media (hover: hover) {
@@ -2483,6 +2606,14 @@
2483
2606
  color: var(--color-description);
2484
2607
  }
2485
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
+ }
2486
2617
  .first\:pt-1 {
2487
2618
  &:first-child {
2488
2619
  padding-top: calc(var(--spacing) * 1);
@@ -2509,31 +2640,17 @@
2509
2640
  opacity: 75%;
2510
2641
  }
2511
2642
  }
2512
- .hover\:scale-\[1\.02\] {
2643
+ .hover\:border-action-primary {
2513
2644
  &:hover {
2514
2645
  @media (hover: hover) {
2515
- scale: 1.02;
2646
+ border-color: var(--color-action-primary);
2516
2647
  }
2517
2648
  }
2518
2649
  }
2519
- .hover\:border-base-200 {
2650
+ .hover\:border-border {
2520
2651
  &:hover {
2521
2652
  @media (hover: hover) {
2522
- border-color: var(--color-base-200);
2523
- }
2524
- }
2525
- }
2526
- .hover\:border-base-300 {
2527
- &:hover {
2528
- @media (hover: hover) {
2529
- border-color: var(--color-base-300);
2530
- }
2531
- }
2532
- }
2533
- .hover\:border-base-400 {
2534
- &:hover {
2535
- @media (hover: hover) {
2536
- border-color: var(--color-base-400);
2653
+ border-color: var(--color-border);
2537
2654
  }
2538
2655
  }
2539
2656
  }
@@ -2544,34 +2661,10 @@
2544
2661
  }
2545
2662
  }
2546
2663
  }
2547
- .hover\:border-brand-500 {
2548
- &:hover {
2549
- @media (hover: hover) {
2550
- border-color: var(--color-brand-500);
2551
- }
2552
- }
2553
- }
2554
- .hover\:border-headline\/30 {
2664
+ .hover\:border-border-strong {
2555
2665
  &:hover {
2556
2666
  @media (hover: hover) {
2557
- border-color: color-mix(in srgb, #18181b 30%, transparent);
2558
- @supports (color: color-mix(in lab, red, red)) {
2559
- & {
2560
- border-color: color-mix(in oklab, var(--color-headline) 30%, transparent);
2561
- }
2562
- }
2563
- }
2564
- }
2565
- }
2566
- .hover\:border-primary\/20 {
2567
- &:hover {
2568
- @media (hover: hover) {
2569
- border-color: color-mix(in srgb, #6e84fa 20%, transparent);
2570
- @supports (color: color-mix(in lab, red, red)) {
2571
- & {
2572
- border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
2573
- }
2574
- }
2667
+ border-color: var(--color-border-strong);
2575
2668
  }
2576
2669
  }
2577
2670
  }
@@ -2596,13 +2689,6 @@
2596
2689
  }
2597
2690
  }
2598
2691
  }
2599
- .hover\:bg-action-secondary {
2600
- &:hover {
2601
- @media (hover: hover) {
2602
- background-color: var(--color-action-secondary);
2603
- }
2604
- }
2605
- }
2606
2692
  .hover\:bg-action-secondary-hover {
2607
2693
  &:hover {
2608
2694
  @media (hover: hover) {
@@ -2610,25 +2696,6 @@
2610
2696
  }
2611
2697
  }
2612
2698
  }
2613
- .hover\:bg-base-50 {
2614
- &:hover {
2615
- @media (hover: hover) {
2616
- background-color: var(--color-base-50);
2617
- }
2618
- }
2619
- }
2620
- .hover\:bg-base-50\/70 {
2621
- &:hover {
2622
- @media (hover: hover) {
2623
- background-color: color-mix(in srgb, #fafafa 70%, transparent);
2624
- @supports (color: color-mix(in lab, red, red)) {
2625
- & {
2626
- background-color: color-mix(in oklab, var(--color-base-50) 70%, transparent);
2627
- }
2628
- }
2629
- }
2630
- }
2631
- }
2632
2699
  .hover\:bg-base-50\/80 {
2633
2700
  &:hover {
2634
2701
  @media (hover: hover) {
@@ -2655,24 +2722,10 @@
2655
2722
  }
2656
2723
  }
2657
2724
  }
2658
- .hover\:bg-base-500 {
2659
- &:hover {
2660
- @media (hover: hover) {
2661
- background-color: var(--color-base-500);
2662
- }
2663
- }
2664
- }
2665
- .hover\:bg-base-700 {
2666
- &:hover {
2667
- @media (hover: hover) {
2668
- background-color: var(--color-base-700);
2669
- }
2670
- }
2671
- }
2672
- .hover\:bg-blue-700 {
2725
+ .hover\:bg-card {
2673
2726
  &:hover {
2674
2727
  @media (hover: hover) {
2675
- background-color: var(--color-blue-700);
2728
+ background-color: var(--color-card);
2676
2729
  }
2677
2730
  }
2678
2731
  }
@@ -2683,10 +2736,10 @@
2683
2736
  }
2684
2737
  }
2685
2738
  }
2686
- .hover\:bg-green-700 {
2739
+ .hover\:bg-control-track-hover {
2687
2740
  &:hover {
2688
2741
  @media (hover: hover) {
2689
- background-color: var(--color-green-700);
2742
+ background-color: var(--color-control-track-hover);
2690
2743
  }
2691
2744
  }
2692
2745
  }
@@ -2711,52 +2764,45 @@
2711
2764
  }
2712
2765
  }
2713
2766
  }
2714
- .hover\:bg-purple-700 {
2715
- &:hover {
2716
- @media (hover: hover) {
2717
- background-color: var(--color-purple-700);
2718
- }
2719
- }
2720
- }
2721
- .hover\:bg-red-700 {
2767
+ .hover\:bg-surface-hover {
2722
2768
  &:hover {
2723
2769
  @media (hover: hover) {
2724
- background-color: var(--color-red-700);
2770
+ background-color: var(--color-surface-hover);
2725
2771
  }
2726
2772
  }
2727
2773
  }
2728
- .hover\:text-action-primary {
2774
+ .hover\:bg-surface-overlay-hover {
2729
2775
  &:hover {
2730
2776
  @media (hover: hover) {
2731
- color: var(--color-action-primary);
2777
+ background-color: var(--color-surface-overlay-hover);
2732
2778
  }
2733
2779
  }
2734
2780
  }
2735
- .hover\:text-base-600 {
2781
+ .hover\:text-body {
2736
2782
  &:hover {
2737
2783
  @media (hover: hover) {
2738
- color: var(--color-base-600);
2784
+ color: var(--color-body);
2739
2785
  }
2740
2786
  }
2741
2787
  }
2742
- .hover\:text-body {
2788
+ .hover\:text-headline {
2743
2789
  &:hover {
2744
2790
  @media (hover: hover) {
2745
- color: var(--color-body);
2791
+ color: var(--color-headline);
2746
2792
  }
2747
2793
  }
2748
2794
  }
2749
- .hover\:text-headline {
2795
+ .hover\:text-link {
2750
2796
  &:hover {
2751
2797
  @media (hover: hover) {
2752
- color: var(--color-headline);
2798
+ color: var(--color-link);
2753
2799
  }
2754
2800
  }
2755
2801
  }
2756
- .hover\:text-inherit {
2802
+ .hover\:text-link-hover {
2757
2803
  &:hover {
2758
2804
  @media (hover: hover) {
2759
- color: inherit;
2805
+ color: var(--color-link-hover);
2760
2806
  }
2761
2807
  }
2762
2808
  }
@@ -2774,17 +2820,17 @@
2774
2820
  }
2775
2821
  }
2776
2822
  }
2777
- .hover\:text-white {
2823
+ .hover\:underline {
2778
2824
  &:hover {
2779
2825
  @media (hover: hover) {
2780
- color: var(--color-white);
2826
+ text-decoration-line: underline;
2781
2827
  }
2782
2828
  }
2783
2829
  }
2784
- .hover\:underline {
2830
+ .hover\:decoration-2 {
2785
2831
  &:hover {
2786
2832
  @media (hover: hover) {
2787
- text-decoration-line: underline;
2833
+ text-decoration-thickness: 2px;
2788
2834
  }
2789
2835
  }
2790
2836
  }
@@ -2803,30 +2849,6 @@
2803
2849
  }
2804
2850
  }
2805
2851
  }
2806
- .hover\:shadow-md {
2807
- &:hover {
2808
- @media (hover: hover) {
2809
- --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)));
2810
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2811
- }
2812
- }
2813
- }
2814
- .hover\:shadow-sm {
2815
- &:hover {
2816
- @media (hover: hover) {
2817
- --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)));
2818
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2819
- }
2820
- }
2821
- }
2822
- .hover\:shadow-xl {
2823
- &:hover {
2824
- @media (hover: hover) {
2825
- --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)));
2826
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2827
- }
2828
- }
2829
- }
2830
2852
  .hover\:ring-1 {
2831
2853
  &:hover {
2832
2854
  @media (hover: hover) {
@@ -2862,13 +2884,6 @@
2862
2884
  }
2863
2885
  }
2864
2886
  }
2865
- .hover\:ring-brand-500 {
2866
- &:hover {
2867
- @media (hover: hover) {
2868
- --tw-ring-color: var(--color-brand-500);
2869
- }
2870
- }
2871
- }
2872
2887
  .focus\:not-sr-only {
2873
2888
  &:focus {
2874
2889
  position: static;
@@ -2881,31 +2896,11 @@
2881
2896
  white-space: normal;
2882
2897
  }
2883
2898
  }
2884
- .focus\:border-error {
2885
- &:focus {
2886
- border-color: var(--color-error);
2887
- }
2888
- }
2889
- .focus\:border-success {
2890
- &:focus {
2891
- border-color: var(--color-success);
2892
- }
2893
- }
2894
- .focus\:border-warning {
2895
- &:focus {
2896
- border-color: var(--color-warning);
2897
- }
2898
- }
2899
2899
  .focus\:\!bg-transparent {
2900
2900
  &:focus {
2901
2901
  background-color: transparent !important;
2902
2902
  }
2903
2903
  }
2904
- .focus\:bg-input-focus {
2905
- &:focus {
2906
- background-color: var(--color-input-focus);
2907
- }
2908
- }
2909
2904
  .focus\:shadow-md {
2910
2905
  &:focus {
2911
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)));
@@ -2918,58 +2913,17 @@
2918
2913
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2919
2914
  }
2920
2915
  }
2921
- .focus\:ring-base-500 {
2922
- &:focus {
2923
- --tw-ring-color: var(--color-base-500);
2924
- }
2925
- }
2926
2916
  .focus\:ring-brand-500 {
2927
2917
  &:focus {
2928
2918
  --tw-ring-color: var(--color-brand-500);
2929
2919
  }
2930
2920
  }
2931
- .focus\:ring-error {
2932
- &:focus {
2933
- --tw-ring-color: var(--color-error);
2934
- }
2935
- }
2936
- .focus\:ring-focus-ring {
2937
- &:focus {
2938
- --tw-ring-color: var(--color-focus-ring);
2939
- }
2940
- }
2941
- .focus\:ring-red-500 {
2942
- &:focus {
2943
- --tw-ring-color: var(--color-red-500);
2944
- }
2945
- }
2946
- .focus\:ring-success {
2947
- &:focus {
2948
- --tw-ring-color: var(--color-success);
2949
- }
2950
- }
2951
- .focus\:ring-warning {
2952
- &:focus {
2953
- --tw-ring-color: var(--color-warning);
2954
- }
2955
- }
2956
2921
  .focus\:ring-offset-0 {
2957
2922
  &:focus {
2958
2923
  --tw-ring-offset-width: 0px;
2959
2924
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2960
2925
  }
2961
2926
  }
2962
- .focus\:ring-offset-2 {
2963
- &:focus {
2964
- --tw-ring-offset-width: 2px;
2965
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2966
- }
2967
- }
2968
- .focus\:ring-offset-base-50 {
2969
- &:focus {
2970
- --tw-ring-offset-color: var(--color-base-50);
2971
- }
2972
- }
2973
2927
  .focus\:outline-none {
2974
2928
  &:focus {
2975
2929
  --tw-outline-style: none;
@@ -3001,14 +2955,14 @@
3001
2955
  border-color: var(--color-warning);
3002
2956
  }
3003
2957
  }
3004
- .focus-visible\:bg-base-100 {
2958
+ .focus-visible\:bg-input-focus {
3005
2959
  &:focus-visible {
3006
- background-color: var(--color-base-100);
2960
+ background-color: var(--color-input-focus);
3007
2961
  }
3008
2962
  }
3009
- .focus-visible\:bg-input-focus {
2963
+ .focus-visible\:bg-surface-hover {
3010
2964
  &:focus-visible {
3011
- background-color: var(--color-input-focus);
2965
+ background-color: var(--color-surface-hover);
3012
2966
  }
3013
2967
  }
3014
2968
  .focus-visible\:outline-none {
@@ -3017,14 +2971,6 @@
3017
2971
  outline-style: none;
3018
2972
  }
3019
2973
  }
3020
- .active\:scale-95 {
3021
- &:active {
3022
- --tw-scale-x: 95%;
3023
- --tw-scale-y: 95%;
3024
- --tw-scale-z: 95%;
3025
- scale: var(--tw-scale-x) var(--tw-scale-y);
3026
- }
3027
- }
3028
2974
  .active\:scale-100 {
3029
2975
  &:active {
3030
2976
  --tw-scale-x: 100%;
@@ -3063,34 +3009,9 @@
3063
3009
  background-color: var(--color-action-secondary-active);
3064
3010
  }
3065
3011
  }
3066
- .active\:bg-base-100 {
3067
- &:active {
3068
- background-color: var(--color-base-100);
3069
- }
3070
- }
3071
- .active\:bg-base-200 {
3072
- &:active {
3073
- background-color: var(--color-base-200);
3074
- }
3075
- }
3076
- .active\:bg-base-500 {
3077
- &:active {
3078
- background-color: var(--color-base-500);
3079
- }
3080
- }
3081
- .active\:bg-base-800 {
3082
- &:active {
3083
- background-color: var(--color-base-800);
3084
- }
3085
- }
3086
- .active\:bg-blue-800 {
3087
- &:active {
3088
- background-color: var(--color-blue-800);
3089
- }
3090
- }
3091
- .active\:bg-green-800 {
3012
+ .active\:bg-control-track-active {
3092
3013
  &:active {
3093
- background-color: var(--color-green-800);
3014
+ background-color: var(--color-control-track-active);
3094
3015
  }
3095
3016
  }
3096
3017
  .active\:bg-input-focus {
@@ -3098,34 +3019,14 @@
3098
3019
  background-color: var(--color-input-focus);
3099
3020
  }
3100
3021
  }
3101
- .active\:bg-purple-800 {
3022
+ .active\:bg-nav-menu-active-hover {
3102
3023
  &:active {
3103
- background-color: var(--color-purple-800);
3024
+ background-color: var(--color-nav-menu-active-hover);
3104
3025
  }
3105
3026
  }
3106
- .active\:bg-red-800 {
3027
+ .active\:bg-surface-active {
3107
3028
  &:active {
3108
- background-color: var(--color-red-800);
3109
- }
3110
- }
3111
- .active\:text-action-primary {
3112
- &:active {
3113
- color: var(--color-action-primary);
3114
- }
3115
- }
3116
- .active\:text-brand-700 {
3117
- &:active {
3118
- color: var(--color-brand-700);
3119
- }
3120
- }
3121
- .active\:opacity-90 {
3122
- &:active {
3123
- opacity: 90%;
3124
- }
3125
- }
3126
- .disabled\:pointer-events-none {
3127
- &:disabled {
3128
- pointer-events: none;
3029
+ background-color: var(--color-surface-active);
3129
3030
  }
3130
3031
  }
3131
3032
  .disabled\:cursor-not-allowed {
@@ -3133,14 +3034,14 @@
3133
3034
  cursor: not-allowed;
3134
3035
  }
3135
3036
  }
3136
- .disabled\:border-disabled {
3037
+ .disabled\:border-transparent {
3137
3038
  &:disabled {
3138
- border-color: var(--color-disabled);
3039
+ border-color: transparent;
3139
3040
  }
3140
3041
  }
3141
- .disabled\:bg-base-200 {
3042
+ .disabled\:bg-action-disabled {
3142
3043
  &:disabled {
3143
- background-color: var(--color-base-200);
3044
+ background-color: var(--color-action-disabled);
3144
3045
  }
3145
3046
  }
3146
3047
  .disabled\:bg-input-disabled {
@@ -3148,9 +3049,9 @@
3148
3049
  background-color: var(--color-input-disabled);
3149
3050
  }
3150
3051
  }
3151
- .disabled\:text-disabled {
3052
+ .disabled\:text-action-disabled-text {
3152
3053
  &:disabled {
3153
- color: var(--color-disabled);
3054
+ color: var(--color-action-disabled-text);
3154
3055
  }
3155
3056
  }
3156
3057
  .disabled\:no-underline {
@@ -3163,6 +3064,12 @@
3163
3064
  opacity: 50%;
3164
3065
  }
3165
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
+ }
3166
3073
  .disabled\:hover\:border-transparent {
3167
3074
  &:disabled {
3168
3075
  &:hover {
@@ -3172,11 +3079,11 @@
3172
3079
  }
3173
3080
  }
3174
3081
  }
3175
- .disabled\:hover\:bg-base-50 {
3082
+ .disabled\:hover\:bg-action-disabled {
3176
3083
  &:disabled {
3177
3084
  &:hover {
3178
3085
  @media (hover: hover) {
3179
- background-color: var(--color-base-50);
3086
+ background-color: var(--color-action-disabled);
3180
3087
  }
3181
3088
  }
3182
3089
  }
@@ -3238,23 +3145,34 @@
3238
3145
  opacity: 50%;
3239
3146
  }
3240
3147
  }
3241
- .aria-\[current\=page\]\:bg-nav-menu-active {
3242
- &[aria-current="page"] {
3243
- background-color: var(--color-nav-menu-active);
3148
+ .aria-checked\:bg-card {
3149
+ &[aria-checked="true"] {
3150
+ background-color: var(--color-card);
3244
3151
  }
3245
3152
  }
3246
- .aria-\[current\=page\]\:text-nav-menu-item-active {
3247
- &[aria-current="page"] {
3248
- color: var(--color-nav-menu-item-active);
3153
+ .aria-checked\:text-headline {
3154
+ &[aria-checked="true"] {
3155
+ color: var(--color-headline);
3156
+ }
3157
+ }
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);
3162
+ }
3163
+ }
3164
+ .aria-pressed\:bg-action-primary-subtle {
3165
+ &[aria-pressed="true"] {
3166
+ background-color: var(--color-action-primary-subtle);
3249
3167
  }
3250
3168
  }
3251
- .data-\[active\=true\]\:bg-nav-menu-active {
3252
- &[data-active="true"] {
3253
- background-color: var(--color-nav-menu-active);
3169
+ .aria-pressed\:text-headline {
3170
+ &[aria-pressed="true"] {
3171
+ color: var(--color-headline);
3254
3172
  }
3255
3173
  }
3256
- .data-\[active\=true\]\:text-nav-menu-item-active {
3257
- &[data-active="true"] {
3174
+ .aria-\[current\=page\]\:text-nav-menu-item-active {
3175
+ &[aria-current="page"] {
3258
3176
  color: var(--color-nav-menu-item-active);
3259
3177
  }
3260
3178
  }
@@ -3293,24 +3211,24 @@
3293
3211
  grid-template-columns: repeat(3, minmax(0, 1fr));
3294
3212
  }
3295
3213
  }
3296
- .sm\:flex-row {
3214
+ .sm\:grid-cols-\[3rem_1fr\] {
3297
3215
  @media (width >= 40rem) {
3298
- flex-direction: row;
3216
+ grid-template-columns: 3rem 1fr;
3299
3217
  }
3300
3218
  }
3301
- .sm\:gap-5 {
3219
+ .sm\:flex-row {
3302
3220
  @media (width >= 40rem) {
3303
- gap: calc(var(--spacing) * 5);
3221
+ flex-direction: row;
3304
3222
  }
3305
3223
  }
3306
- .sm\:gap-8 {
3224
+ .sm\:flex-wrap {
3307
3225
  @media (width >= 40rem) {
3308
- gap: calc(var(--spacing) * 8);
3226
+ flex-wrap: wrap;
3309
3227
  }
3310
3228
  }
3311
- .sm\:gap-16 {
3229
+ .sm\:p-8 {
3312
3230
  @media (width >= 40rem) {
3313
- gap: calc(var(--spacing) * 16);
3231
+ padding: calc(var(--spacing) * 8);
3314
3232
  }
3315
3233
  }
3316
3234
  .sm\:px-3 {
@@ -3323,6 +3241,16 @@
3323
3241
  padding-inline: calc(var(--spacing) * 6);
3324
3242
  }
3325
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
+ }
3326
3254
  .sm\:py-12 {
3327
3255
  @media (width >= 40rem) {
3328
3256
  padding-block: calc(var(--spacing) * 12);
@@ -3333,11 +3261,6 @@
3333
3261
  padding-block: calc(var(--spacing) * 16);
3334
3262
  }
3335
3263
  }
3336
- .sm\:py-20 {
3337
- @media (width >= 40rem) {
3338
- padding-block: calc(var(--spacing) * 20);
3339
- }
3340
- }
3341
3264
  .sm\:py-24 {
3342
3265
  @media (width >= 40rem) {
3343
3266
  padding-block: calc(var(--spacing) * 24);
@@ -3348,31 +3271,15 @@
3348
3271
  padding-block: calc(var(--spacing) * 32);
3349
3272
  }
3350
3273
  }
3351
- .sm\:py-40 {
3352
- @media (width >= 40rem) {
3353
- padding-block: calc(var(--spacing) * 40);
3354
- }
3355
- }
3356
- .sm\:py-44 {
3357
- @media (width >= 40rem) {
3358
- padding-block: calc(var(--spacing) * 44);
3359
- }
3360
- }
3361
- .sm\:pb-32 {
3362
- @media (width >= 40rem) {
3363
- padding-bottom: calc(var(--spacing) * 32);
3364
- }
3365
- }
3366
- .sm\:text-2xl {
3274
+ .sm\:pt-20 {
3367
3275
  @media (width >= 40rem) {
3368
- font-size: var(--text-2xl);
3369
- line-height: var(--tw-leading, var(--text-2xl--line-height));
3276
+ padding-top: calc(var(--spacing) * 20);
3370
3277
  }
3371
3278
  }
3372
- .sm\:text-4xl {
3279
+ .sm\:text-5xl {
3373
3280
  @media (width >= 40rem) {
3374
- font-size: var(--text-4xl);
3375
- 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));
3376
3283
  }
3377
3284
  }
3378
3285
  .sm\:text-6xl {
@@ -3381,12 +3288,24 @@
3381
3288
  line-height: var(--tw-leading, var(--text-6xl--line-height));
3382
3289
  }
3383
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
+ }
3384
3297
  .sm\:text-xl {
3385
3298
  @media (width >= 40rem) {
3386
3299
  font-size: var(--text-xl);
3387
3300
  line-height: var(--tw-leading, var(--text-xl--line-height));
3388
3301
  }
3389
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
+ }
3390
3309
  .md\:static {
3391
3310
  @media (width >= 48rem) {
3392
3311
  position: static;
@@ -3523,14 +3442,9 @@
3523
3442
  justify-content: space-between;
3524
3443
  }
3525
3444
  }
3526
- .md\:gap-10 {
3527
- @media (width >= 48rem) {
3528
- gap: calc(var(--spacing) * 10);
3529
- }
3530
- }
3531
- .md\:rounded-3xl {
3445
+ .md\:rounded-overlay {
3532
3446
  @media (width >= 48rem) {
3533
- border-radius: var(--radius-3xl);
3447
+ border-radius: var(--radius-overlay);
3534
3448
  }
3535
3449
  }
3536
3450
  .md\:border-t-0 {
@@ -3560,6 +3474,41 @@
3560
3474
  text-align: left;
3561
3475
  }
3562
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
+ }
3563
3512
  .lg\:w-\[500px\] {
3564
3513
  @media (width >= 64rem) {
3565
3514
  width: 500px;
@@ -3580,24 +3529,84 @@
3580
3529
  grid-template-columns: repeat(4, minmax(0, 1fr));
3581
3530
  }
3582
3531
  }
3532
+ .lg\:grid-cols-12 {
3533
+ @media (width >= 64rem) {
3534
+ grid-template-columns: repeat(12, minmax(0, 1fr));
3535
+ }
3536
+ }
3583
3537
  .lg\:grid-cols-\[\.75fr_1fr\] {
3584
3538
  @media (width >= 64rem) {
3585
3539
  grid-template-columns: .75fr 1fr;
3586
3540
  }
3587
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
+ }
3588
3552
  .lg\:px-8 {
3589
3553
  @media (width >= 64rem) {
3590
3554
  padding-inline: calc(var(--spacing) * 8);
3591
3555
  }
3592
3556
  }
3593
- .lg\:py-52 {
3557
+ .lg\:py-20 {
3594
3558
  @media (width >= 64rem) {
3595
- padding-block: calc(var(--spacing) * 52);
3559
+ padding-block: calc(var(--spacing) * 20);
3596
3560
  }
3597
3561
  }
3598
- .lg\:pb-40 {
3562
+ .lg\:py-28 {
3599
3563
  @media (width >= 64rem) {
3600
- padding-bottom: calc(var(--spacing) * 40);
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);
3580
+ }
3581
+ }
3582
+ .lg\:text-\[4\.25rem\] {
3583
+ @media (width >= 64rem) {
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;
3601
3610
  }
3602
3611
  }
3603
3612
  .dark\:bg-brand-950 {
@@ -3611,6 +3620,12 @@
3611
3620
  --tw-ring-offset-color: transparent;
3612
3621
  }
3613
3622
  }
3623
+ @media (prefers-contrast: high) {
3624
+ :root {
3625
+ --color-tooltip-bg: CanvasText;
3626
+ --color-tooltip-fg: Canvas;
3627
+ }
3628
+ }
3614
3629
  body {
3615
3630
  font-family: var(--font-family-sans);
3616
3631
  }
@@ -3636,50 +3651,138 @@ body {
3636
3651
  --zabi-base-900: #18181b;
3637
3652
  --zabi-base-925: #101013;
3638
3653
  --zabi-base-950: #09090b;
3639
- --color-brand-50: #1f2866;
3640
- --color-brand-100: #2f3c99;
3641
- --color-brand-200: #3f4fc0;
3642
- --color-brand-300: #5366e2;
3643
- --color-brand-400: #6e84fa;
3644
- --color-brand-500: #8fa8ff;
3645
- --color-brand-600: #abc4ff;
3646
- --color-brand-700: #ccdbfd;
3647
- --color-brand-800: #dfe7fb;
3648
- --color-brand-900: #edf2fb;
3649
- --color-brand-950: #f7faff;
3650
- --color-citron-50: #323518;
3651
- --color-citron-100: #4d5229;
3652
- --color-citron-200: #666c35;
3653
- --color-citron-300: #848a43;
3654
- --color-citron-400: #a3a852;
3655
- --color-citron-500: #bbbe64;
3656
- --color-citron-600: #c7d460;
3657
- --color-citron-700: #d5e184;
3658
- --color-citron-800: #e4ecaa;
3659
- --color-citron-900: #f1f5cf;
3660
- --color-citron-950: #f9faeb;
3661
- --color-pine-50: #02160f;
3662
- --color-pine-100: #04231a;
3663
- --color-pine-200: #063a2a;
3664
- --color-pine-300: #084532;
3665
- --color-pine-400: #0a513a;
3666
- --color-pine-500: #0c5d43;
3667
- --color-pine-600: #49ad91;
3668
- --color-pine-700: #78c4ad;
3669
- --color-pine-800: #a7d9c9;
3670
- --color-pine-900: #d2ece4;
3671
- --color-pine-950: #e9f6f2;
3672
- --color-iris-50: #1b1b37;
3673
- --color-iris-100: #2a2a56;
3674
- --color-iris-200: #38386f;
3675
- --color-iris-300: #474788;
3676
- --color-iris-400: #58589e;
3677
- --color-iris-500: #6969b3;
3678
- --color-iris-600: #a3a3d8;
3679
- --color-iris-700: #bdbde6;
3680
- --color-iris-800: #d6d6f0;
3681
- --color-iris-900: #e9e9f7;
3682
- --color-iris-950: #f4f4fa;
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;
3665
+ --color-brand-50: var(--zabi-brand-950);
3666
+ --color-brand-100: var(--zabi-brand-900);
3667
+ --color-brand-200: var(--zabi-brand-800);
3668
+ --color-brand-300: var(--zabi-brand-700);
3669
+ --color-brand-400: var(--zabi-brand-600);
3670
+ --color-brand-500: var(--zabi-brand-500);
3671
+ --color-brand-600: var(--zabi-brand-400);
3672
+ --color-brand-700: var(--zabi-brand-300);
3673
+ --color-brand-800: var(--zabi-brand-200);
3674
+ --color-brand-900: var(--zabi-brand-100);
3675
+ --color-brand-950: var(--zabi-brand-50);
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;
3687
+ --color-citron-50: var(--zabi-citron-950);
3688
+ --color-citron-100: var(--zabi-citron-900);
3689
+ --color-citron-200: var(--zabi-citron-800);
3690
+ --color-citron-300: var(--zabi-citron-700);
3691
+ --color-citron-400: var(--zabi-citron-600);
3692
+ --color-citron-500: var(--zabi-citron-500);
3693
+ --color-citron-600: var(--zabi-citron-400);
3694
+ --color-citron-700: var(--zabi-citron-300);
3695
+ --color-citron-800: var(--zabi-citron-200);
3696
+ --color-citron-900: var(--zabi-citron-100);
3697
+ --color-citron-950: var(--zabi-citron-50);
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;
3709
+ --color-pine-50: var(--zabi-pine-950);
3710
+ --color-pine-100: var(--zabi-pine-900);
3711
+ --color-pine-200: var(--zabi-pine-800);
3712
+ --color-pine-300: var(--zabi-pine-700);
3713
+ --color-pine-400: var(--zabi-pine-600);
3714
+ --color-pine-500: var(--zabi-pine-500);
3715
+ --color-pine-600: var(--zabi-pine-400);
3716
+ --color-pine-700: var(--zabi-pine-300);
3717
+ --color-pine-800: var(--zabi-pine-200);
3718
+ --color-pine-900: var(--zabi-pine-100);
3719
+ --color-pine-950: var(--zabi-pine-50);
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;
3731
+ --color-iris-50: var(--zabi-iris-950);
3732
+ --color-iris-100: var(--zabi-iris-900);
3733
+ --color-iris-200: var(--zabi-iris-800);
3734
+ --color-iris-300: var(--zabi-iris-700);
3735
+ --color-iris-400: var(--zabi-iris-600);
3736
+ --color-iris-500: var(--zabi-iris-500);
3737
+ --color-iris-600: var(--zabi-iris-400);
3738
+ --color-iris-700: var(--zabi-iris-300);
3739
+ --color-iris-800: var(--zabi-iris-200);
3740
+ --color-iris-900: var(--zabi-iris-100);
3741
+ --color-iris-950: var(--zabi-iris-50);
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;
3753
+ --color-warning-50: var(--zabi-warning-950);
3754
+ --color-warning-100: var(--zabi-warning-900);
3755
+ --color-warning-200: var(--zabi-warning-800);
3756
+ --color-warning-300: var(--zabi-warning-700);
3757
+ --color-warning-400: var(--zabi-warning-600);
3758
+ --color-warning-500: var(--zabi-warning-500);
3759
+ --color-warning-600: var(--zabi-warning-400);
3760
+ --color-warning-700: var(--zabi-warning-300);
3761
+ --color-warning-800: var(--zabi-warning-200);
3762
+ --color-warning-900: var(--zabi-warning-100);
3763
+ --color-warning-950: var(--zabi-warning-50);
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;
3775
+ --color-error-50: var(--zabi-error-950);
3776
+ --color-error-100: var(--zabi-error-900);
3777
+ --color-error-200: var(--zabi-error-800);
3778
+ --color-error-300: var(--zabi-error-700);
3779
+ --color-error-400: var(--zabi-error-600);
3780
+ --color-error-500: var(--zabi-error-500);
3781
+ --color-error-600: var(--zabi-error-400);
3782
+ --color-error-700: var(--zabi-error-300);
3783
+ --color-error-800: var(--zabi-error-200);
3784
+ --color-error-900: var(--zabi-error-100);
3785
+ --color-error-950: var(--zabi-error-50);
3683
3786
  --color-base-50: #09090b;
3684
3787
  --color-base-75: #101013;
3685
3788
  --color-base-100: #18181b;
@@ -3701,49 +3804,44 @@ body {
3701
3804
  --color-base-900: #f4f4f5;
3702
3805
  --color-base-925: #f7f7f7;
3703
3806
  --color-base-950: #fafafa;
3704
- --color-card: var(--color-base-200);
3705
- --color-card-hover: var(--color-base-300);
3706
- --color-card-active: var(--color-base-400);
3707
- --color-card-elevated: var(--color-base-200);
3708
- --color-surface-1: var(--color-base-250);
3709
- --color-surface-2: var(--color-base-300);
3710
- --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);
3711
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);
3712
3827
  --color-overlay: rgba(0, 0, 0, 0.7);
3713
- --color-input: var(--color-base-250);
3714
- --color-input-border: var(--color-base-350);
3715
- --color-input-hover: var(--color-base-300);
3716
- --color-input-focus: var(--color-base-300);
3717
- --color-input-disabled: var(--color-base-300);
3718
- --color-success: var(--color-pine-400);
3719
- --color-success-weak: var(--color-pine-500);
3720
- --color-success-medium: var(--color-pine-300);
3721
- --color-success-strong: var(--color-pine-200);
3722
- --color-warning: #f59e0b;
3723
- --color-warning-weak: #d97706;
3724
- --color-warning-medium: #fbbf24;
3725
- --color-warning-strong: #fcd34d;
3726
- --color-error: #ef4444;
3727
- --color-error-weak: #dc2626;
3728
- --color-error-medium: #f87171;
3729
- --color-error-strong: #fca5a5;
3730
- --color-energetic: var(--color-citron-400);
3731
- --color-energetic-weak: var(--color-citron-500);
3732
- --color-energetic-medium: var(--color-citron-300);
3733
- --color-energetic-strong: var(--color-citron-200);
3734
- --color-info: var(--color-iris-500);
3735
- --color-info-weak: var(--color-iris-600);
3736
- --color-info-active: var(--color-iris-400);
3737
- --color-info-medium: var(--color-iris-400);
3738
- --color-info-strong: var(--color-iris-300);
3739
- --color-info-text: var(--color-info);
3740
- --color-action-primary-text: var(--color-brand-50);
3741
- --color-action-danger: #ef4444;
3742
- --color-action-danger-hover: #dc2626;
3743
- --color-action-danger-active: #b91c1c;
3744
- --color-action-danger-disabled: #b91c1c;
3745
- --color-action-danger-subtle: #450a0a;
3746
- --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);
3747
3845
  --shadow-opacity: 0.3;
3748
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));
3749
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));
@@ -4035,6 +4133,12 @@ body {
4035
4133
  .bg-nav-menu-active {
4036
4134
  background-color: var(--color-nav-menu-active);
4037
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
+ }
4038
4142
  .text-success {
4039
4143
  color: var(--color-success-text);
4040
4144
  }
@@ -4226,7 +4330,8 @@ body {
4226
4330
  background-color: var(--color-action-primary-active);
4227
4331
  }
4228
4332
  .bg-action-primary:disabled {
4229
- background-color: var(--color-action-primary-disabled);
4333
+ background-color: var(--color-action-disabled);
4334
+ color: var(--color-action-disabled-text);
4230
4335
  }
4231
4336
  .bg-action-primary-subtle {
4232
4337
  background-color: var(--color-action-primary-subtle);
@@ -4247,7 +4352,8 @@ body {
4247
4352
  background-color: var(--color-action-secondary-active);
4248
4353
  }
4249
4354
  .bg-action-secondary:disabled {
4250
- background-color: var(--color-action-secondary-disabled);
4355
+ background-color: var(--color-action-disabled);
4356
+ color: var(--color-action-disabled-text);
4251
4357
  }
4252
4358
  .bg-action-secondary-subtle {
4253
4359
  background-color: var(--color-action-secondary-subtle);
@@ -4265,7 +4371,8 @@ body {
4265
4371
  background-color: var(--color-action-danger-active);
4266
4372
  }
4267
4373
  .bg-action-danger:disabled {
4268
- background-color: var(--color-action-danger-disabled);
4374
+ background-color: var(--color-action-disabled);
4375
+ color: var(--color-action-disabled-text);
4269
4376
  }
4270
4377
  .bg-action-danger-subtle {
4271
4378
  background-color: var(--color-action-danger-subtle);
@@ -4273,6 +4380,9 @@ body {
4273
4380
  .bg-action-danger-subtle:hover {
4274
4381
  background-color: var(--color-action-danger-subtle-hover);
4275
4382
  }
4383
+ .z-sticky {
4384
+ z-index: var(--z-sticky);
4385
+ }
4276
4386
  .z-dropdown {
4277
4387
  z-index: var(--z-dropdown);
4278
4388
  }