@texturehq/edges 0.1.8 → 1.0.1

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 (27) hide show
  1. package/dist/components.manifest.json +833 -63
  2. package/dist/generated/tailwind-tokens-dark.css +191 -0
  3. package/dist/generated/tailwind-tokens-light.css +191 -0
  4. package/dist/index.cjs +69 -5
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +491 -257
  7. package/dist/index.d.ts +491 -257
  8. package/dist/index.js +69 -5
  9. package/dist/index.js.map +1 -1
  10. package/dist/server-DmvMh5XJ.d.cts +933 -0
  11. package/dist/server-DmvMh5XJ.d.ts +933 -0
  12. package/dist/server.cjs +66 -0
  13. package/dist/server.cjs.map +1 -0
  14. package/dist/server.d.cts +7 -0
  15. package/dist/server.d.ts +7 -0
  16. package/dist/server.js +66 -0
  17. package/dist/server.js.map +1 -0
  18. package/dist/styles/animations.css +132 -0
  19. package/dist/styles/computed.css +137 -0
  20. package/dist/styles/utilities.css +13 -0
  21. package/dist/styles.css +1892 -640
  22. package/dist/theme.css +26 -1102
  23. package/package.json +53 -16
  24. package/scripts/copy-assets.js +48 -0
  25. package/scripts/validate-tokens.js +178 -0
  26. package/templates/claude-rules/claude.md +1 -1
  27. package/templates/cursor-rules/edges-usage.mdc +1 -1
package/dist/styles.css CHANGED
@@ -1,63 +1,491 @@
1
1
  /*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --text-xs: 0.75rem;
7
- --text-sm: 0.875rem;
8
- --text-base: 1rem;
9
- --text-lg: 1.125rem;
10
- --radius-lg: 0.5rem;
11
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
12
- --default-transition-duration: 150ms;
13
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
14
- --default-font-family: "Inter", system-ui, sans-serif;
15
- --default-mono-font-family: "Fira Code", monospace;
16
- --color-brand-primary: #444ae1;
17
- --color-neutral-black: #333333;
18
- --color-neutral-white: #ffffff;
19
- --color-text-body: #333333;
20
- --color-text-muted: #4b5563;
21
- --color-feedback-success-text: #065f46;
22
- --color-feedback-success-background: #d1fae5;
23
- --color-feedback-success-border: #10b981;
24
- --color-feedback-error-text: #b91c1c;
25
- --color-feedback-error-background: #fee2e2;
26
- --color-feedback-error-border: #ef4444;
27
- --color-feedback-warning-text: #92400e;
28
- --color-feedback-warning-background: #fef3c7;
29
- --color-feedback-warning-border: #f59e0b;
30
- --skeleton-base: #e5e7eb;
31
- --skeleton-highlight: #f3f4f6;
32
- --skeleton-wave: rgba(255, 255, 255, 0.3);
33
- --control-sm: 0.75rem;
34
- --control-md: 0.875rem;
35
- --control-lg: 1rem;
36
- --control-xl: 1.125rem;
37
- --control-sm-height: calc(var(--control-sm) * 2.75);
38
- --control-md-height: calc(var(--control-md) * 2.75);
39
- --control-lg-height: calc(var(--control-lg) * 3);
40
- --control-xl-height: calc(var(--control-xl) * 3);
41
- --control-padding-sm: 0.75rem;
42
- --control-padding-md: 1rem;
43
- --control-padding-lg: 1.25rem;
44
- --control-padding-xl: 1.5rem;
45
- --control-gap-sm: 0.25rem;
46
- --control-gap-md: 0.375rem;
47
- --control-gap-lg: 0.5rem;
48
- --control-gap-xl: 0.625rem;
49
- --control-border-radius: var(--border-radius-lg);
50
- --control-text-sm: var(--text-xs);
51
- --control-text-md: var(--text-sm);
52
- --control-text-lg: var(--text-base);
53
- --control-text-xl: var(--text-lg);
54
- --control-hover-opacity: 0.9;
55
- --control-focus-ring-color: var(--color-neutral-black);
56
- --control-focus-ring-color-error: var(--color-feedback-error-border);
57
- --control-transition-duration: 150ms;
58
- --control-transition-timing: var(--ease-in-out);
3
+ :root, :host {
4
+ --color-white: #ffffff;
5
+ --color-black: #000000;
6
+ --color-gray-50: #f9fafb;
7
+ --color-gray-100: #f3f4f6;
8
+ --color-gray-200: #e5e7eb;
9
+ --color-gray-300: #d1d5db;
10
+ --color-gray-400: #9ca3af;
11
+ --color-gray-500: #6b7280;
12
+ --color-gray-600: #4b5563;
13
+ --color-gray-700: #374151;
14
+ --color-gray-800: #1f2937;
15
+ --color-gray-900: #111827;
16
+ --color-red-50: oklch(0.971 0.013 17.38);
17
+ --color-red-100: oklch(0.936 0.032 17.717);
18
+ --color-red-200: oklch(0.885 0.062 18.334);
19
+ --color-red-500: oklch(0.637 0.237 25.331);
20
+ --color-red-600: oklch(0.577 0.245 27.325);
21
+ --color-red-700: oklch(0.505 0.213 27.518);
22
+ --color-red-800: oklch(0.444 0.177 26.899);
23
+ --color-green-50: oklch(0.982 0.018 131.68);
24
+ --color-green-100: oklch(0.947 0.052 132.272);
25
+ --color-green-200: oklch(0.895 0.111 131.438);
26
+ --color-green-500: oklch(0.627 0.194 130.331);
27
+ --color-green-600: oklch(0.527 0.19 131.688);
28
+ --color-green-800: oklch(0.366 0.121 132.109);
29
+ --color-green-900: oklch(0.314 0.095 133.748);
30
+ --color-blue-50: oklch(0.97 0.014 237.69);
31
+ --color-blue-100: oklch(0.932 0.032 241.935);
32
+ --color-blue-200: oklch(0.882 0.059 243.157);
33
+ --color-blue-500: oklch(0.623 0.214 250.546);
34
+ --color-blue-600: oklch(0.546 0.245 253.739);
35
+ --color-blue-800: oklch(0.424 0.199 255.585);
36
+ --color-blue-900: oklch(0.368 0.146 254.128);
37
+ --color-yellow-50: oklch(0.987 0.024 102.851);
38
+ --color-yellow-100: oklch(0.973 0.071 103.193);
39
+ --color-yellow-200: oklch(0.945 0.129 101.54);
40
+ --color-yellow-500: oklch(0.795 0.184 86.047);
41
+ --color-yellow-600: oklch(0.681 0.162 75.834);
42
+ --color-yellow-800: oklch(0.456 0.111 61.896);
43
+ --color-brand-primary: #444ae1;
44
+ --color-brand-light: #f7f7ff;
45
+ --color-brand-dark: #363ccb;
46
+ --color-neutral-white: #ffffff;
47
+ --color-neutral-black: #000000;
48
+ --spacing-0: 0px;
49
+ --spacing-1: 0.25rem;
50
+ --spacing-2: 0.5rem;
51
+ --spacing-3: 0.75rem;
52
+ --spacing-4: 1rem;
53
+ --spacing-5: 1.25rem;
54
+ --spacing-6: 1.5rem;
55
+ --spacing-7: 1.75rem;
56
+ --spacing-8: 2rem;
57
+ --spacing-9: 2.25rem;
58
+ --spacing-10: 2.5rem;
59
+ --spacing-12: 3rem;
60
+ --spacing-14: 3.5rem;
61
+ --spacing-16: 4rem;
62
+ --spacing-20: 5rem;
63
+ --spacing-24: 6rem;
64
+ --spacing-28: 7rem;
65
+ --spacing-32: 8rem;
66
+ --spacing-40: 10rem;
67
+ --spacing-48: 12rem;
68
+ --spacing-64: 16rem;
69
+ --spacing-80: 20rem;
70
+ --spacing-96: 24rem;
71
+ --radius-none: 0px;
72
+ --radius-sm: 0.25rem;
73
+ --radius-md: 0.375rem;
74
+ --radius-lg: 0.5rem;
75
+ --radius-xl: 0.75rem;
76
+ --radius-full: 9999px;
77
+ --font-weight-light: 300;
78
+ --font-weight-normal: 400;
79
+ --font-weight-medium: 500;
80
+ --font-weight-semibold: 600;
81
+ --font-weight-bold: 700;
82
+ --color-background-body: #ffffff;
83
+ --color-background-surface: #ffffff;
84
+ --color-background-muted: #f3f4f6;
85
+ --color-background-hover: #f3f4f6;
86
+ --color-background-selected: #d1d5db;
87
+ --color-background-input: #ffffff;
88
+ --color-text-body: #333333;
89
+ --color-text-heading: #111827;
90
+ --color-text-muted: #4b5563;
91
+ --color-text-caption: #6b7280;
92
+ --color-text-placeholder: #9ca3af;
93
+ --color-text-disabled: #9ca3af;
94
+ --color-text-link-default: #444ae1;
95
+ --color-text-link-hover: #363ccb;
96
+ --color-text-onPrimary: #ffffff;
97
+ --color-border-default: #e5e7eb;
98
+ --color-border-focus: #111827;
99
+ --color-border-muted: #e5e7eb;
100
+ --color-border-input: #d1d5db;
101
+ --color-feedback-success-text: #065f46;
102
+ --color-feedback-success-background: #d1fae5;
103
+ --color-feedback-success-border: #10b981;
104
+ --color-feedback-error-text: #b91c1c;
105
+ --color-feedback-error-background: #fee2e2;
106
+ --color-feedback-error-border: #ef4444;
107
+ --color-feedback-warning-text: #92400e;
108
+ --color-feedback-warning-background: #fef3c7;
109
+ --color-feedback-warning-border: #f59e0b;
110
+ --color-feedback-info-text: #2563eb;
111
+ --color-feedback-info-background: #dbeafe;
112
+ --color-feedback-info-border: #93c5fd;
113
+ --color-action-primary: #444ae1;
114
+ --color-action-primary-hover: #383ccb;
115
+ --color-action-primary-light: rgba(68, 74, 225, 0.1);
116
+ --color-action-secondary: #333333;
117
+ --control-sm: 0.75rem;
118
+ --control-md: 0.875rem;
119
+ --control-lg: 1rem;
120
+ --control-xl: 1.125rem;
121
+ --control-sm-height: calc(var(--control-sm) * 2.75);
122
+ --control-md-height: calc(var(--control-md) * 2.75);
123
+ --control-lg-height: calc(var(--control-lg) * 3);
124
+ --control-xl-height: calc(var(--control-xl) * 3);
125
+ --control-padding-sm: 0.75rem;
126
+ --control-padding-md: 1rem;
127
+ --control-padding-lg: 1.25rem;
128
+ --control-padding-xl: 1.5rem;
129
+ --control-gap-sm: 0.25rem;
130
+ --control-gap-md: 0.375rem;
131
+ --control-gap-lg: 0.5rem;
132
+ --control-gap-xl: 0.625rem;
133
+ --control-border-radius: var(--border-radius-lg);
134
+ --control-text-sm: var(--text-xs);
135
+ --control-text-md: var(--text-sm);
136
+ --control-text-lg: var(--text-base);
137
+ --control-text-xl: var(--text-lg);
138
+ --control-hover-opacity: 0.9;
139
+ --control-focus-ring-color: var(--color-neutral-black);
140
+ --control-focus-ring-color-error: var(--color-feedback-error-border);
141
+ --control-transition-duration: 150ms;
142
+ --control-transition-timing: var(--ease-in-out);
143
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
144
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
145
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
146
+ "Courier New", monospace;
147
+ --color-orange-50: oklch(98% 0.016 73.684);
148
+ --color-orange-200: oklch(90.1% 0.076 70.697);
149
+ --color-orange-600: oklch(64.6% 0.222 41.116);
150
+ --color-orange-800: oklch(47% 0.157 37.304);
151
+ --color-purple-50: oklch(97.7% 0.014 308.299);
152
+ --color-purple-600: oklch(55.8% 0.288 302.321);
153
+ --color-slate-300: oklch(86.9% 0.022 252.894);
154
+ --color-slate-600: oklch(44.6% 0.043 257.281);
155
+ --color-slate-700: oklch(37.2% 0.044 257.287);
156
+ --color-slate-800: oklch(27.9% 0.041 260.031);
157
+ --color-zinc-100: oklch(96.7% 0.001 286.375);
158
+ --color-zinc-200: oklch(92% 0.004 286.32);
159
+ --color-zinc-300: oklch(87.1% 0.006 286.286);
160
+ --color-zinc-400: oklch(70.5% 0.015 286.067);
161
+ --color-zinc-600: oklch(44.2% 0.017 285.786);
162
+ --color-zinc-700: oklch(37% 0.013 285.805);
163
+ --color-zinc-900: oklch(21% 0.006 285.885);
164
+ --spacing: 0.25rem;
165
+ --container-xs: 20rem;
166
+ --container-sm: 24rem;
167
+ --container-md: 28rem;
168
+ --container-lg: 32rem;
169
+ --container-xl: 36rem;
170
+ --container-4xl: 56rem;
171
+ --container-6xl: 72rem;
172
+ --container-7xl: 80rem;
173
+ --text-xs: 0.75rem;
174
+ --text-xs--line-height: calc(1 / 0.75);
175
+ --text-sm: 0.875rem;
176
+ --text-sm--line-height: calc(1.25 / 0.875);
177
+ --text-base: 1rem;
178
+ --text-base--line-height: calc(1.5 / 1);
179
+ --text-lg: 1.125rem;
180
+ --text-lg--line-height: calc(1.75 / 1.125);
181
+ --text-xl: 1.25rem;
182
+ --text-xl--line-height: calc(1.75 / 1.25);
183
+ --text-2xl: 1.5rem;
184
+ --text-2xl--line-height: calc(2 / 1.5);
185
+ --text-3xl: 1.875rem;
186
+ --text-3xl--line-height: calc(2.25 / 1.875);
187
+ --text-4xl: 2.25rem;
188
+ --text-4xl--line-height: calc(2.5 / 2.25);
189
+ --tracking-tight: -0.025em;
190
+ --tracking-wider: 0.05em;
191
+ --leading-relaxed: 1.625;
192
+ --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
193
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
194
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
195
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
196
+ --animate-spin: spin 1s linear infinite;
197
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
198
+ --blur-sm: 8px;
199
+ --blur-md: 12px;
200
+ --blur-2xl: 40px;
201
+ --default-transition-duration: 150ms;
202
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
203
+ --default-font-family: var(--font-sans);
204
+ --default-mono-font-family: var(--font-mono);
205
+ }
206
+ .theme-dark {
207
+ --color-white: #ffffff;
208
+ --color-black: #000000;
209
+ --color-gray-50: #f9fafb;
210
+ --color-gray-100: #f3f4f6;
211
+ --color-gray-200: #e5e7eb;
212
+ --color-gray-300: #d1d5db;
213
+ --color-gray-400: #9ca3af;
214
+ --color-gray-500: #6b7280;
215
+ --color-gray-600: #4b5563;
216
+ --color-gray-700: #374151;
217
+ --color-gray-800: #1f2937;
218
+ --color-gray-900: #111827;
219
+ --color-gray-950: #030712;
220
+ --color-red-50: oklch(0.971 0.013 17.38);
221
+ --color-red-100: oklch(0.936 0.032 17.717);
222
+ --color-red-200: oklch(0.885 0.062 18.334);
223
+ --color-red-300: oklch(0.808 0.114 19.571);
224
+ --color-red-400: oklch(0.704 0.191 22.216);
225
+ --color-red-500: oklch(0.637 0.237 25.331);
226
+ --color-red-600: oklch(0.577 0.245 27.325);
227
+ --color-red-700: oklch(0.505 0.213 27.518);
228
+ --color-red-800: oklch(0.444 0.177 26.899);
229
+ --color-red-900: oklch(0.396 0.141 25.723);
230
+ --color-red-950: oklch(0.258 0.092 26.042);
231
+ --color-green-50: oklch(0.982 0.018 131.68);
232
+ --color-green-100: oklch(0.947 0.052 132.272);
233
+ --color-green-200: oklch(0.895 0.111 131.438);
234
+ --color-green-300: oklch(0.82 0.178 132.63);
235
+ --color-green-400: oklch(0.718 0.209 130.901);
236
+ --color-green-500: oklch(0.627 0.194 130.331);
237
+ --color-green-600: oklch(0.527 0.19 131.688);
238
+ --color-green-700: oklch(0.437 0.154 132.474);
239
+ --color-green-800: oklch(0.366 0.121 132.109);
240
+ --color-green-900: oklch(0.314 0.095 133.748);
241
+ --color-green-950: oklch(0.197 0.06 130.709);
242
+ --color-blue-50: oklch(0.97 0.014 237.69);
243
+ --color-blue-100: oklch(0.932 0.032 241.935);
244
+ --color-blue-200: oklch(0.882 0.059 243.157);
245
+ --color-blue-300: oklch(0.809 0.105 244.039);
246
+ --color-blue-400: oklch(0.707 0.165 246.422);
247
+ --color-blue-500: oklch(0.623 0.214 250.546);
248
+ --color-blue-600: oklch(0.546 0.245 253.739);
249
+ --color-blue-700: oklch(0.488 0.243 255.638);
250
+ --color-blue-800: oklch(0.424 0.199 255.585);
251
+ --color-blue-900: oklch(0.368 0.146 254.128);
252
+ --color-blue-950: oklch(0.262 0.09 254.128);
253
+ --color-yellow-50: oklch(0.987 0.024 102.851);
254
+ --color-yellow-100: oklch(0.973 0.071 103.193);
255
+ --color-yellow-200: oklch(0.945 0.129 101.54);
256
+ --color-yellow-300: oklch(0.905 0.182 98.111);
257
+ --color-yellow-400: oklch(0.852 0.199 91.936);
258
+ --color-yellow-500: oklch(0.795 0.184 86.047);
259
+ --color-yellow-600: oklch(0.681 0.162 75.834);
260
+ --color-yellow-700: oklch(0.554 0.135 66.191);
261
+ --color-yellow-800: oklch(0.456 0.111 61.896);
262
+ --color-yellow-900: oklch(0.398 0.092 60.236);
263
+ --color-yellow-950: oklch(0.265 0.06 56.259);
264
+ --color-brand-primary: #444ae1;
265
+ --color-brand-light: #f7f7ff;
266
+ --color-brand-dark: #363ccb;
267
+ --color-brand-background: #f6f7ff;
268
+ --color-neutral-white: #ffffff;
269
+ --color-neutral-black: #000000;
270
+ --spacing-0: 0px;
271
+ --spacing-1: 0.25rem;
272
+ --spacing-2: 0.5rem;
273
+ --spacing-3: 0.75rem;
274
+ --spacing-4: 1rem;
275
+ --spacing-5: 1.25rem;
276
+ --spacing-6: 1.5rem;
277
+ --spacing-7: 1.75rem;
278
+ --spacing-8: 2rem;
279
+ --spacing-9: 2.25rem;
280
+ --spacing-10: 2.5rem;
281
+ --spacing-11: 2.75rem;
282
+ --spacing-12: 3rem;
283
+ --spacing-14: 3.5rem;
284
+ --spacing-16: 4rem;
285
+ --spacing-20: 5rem;
286
+ --spacing-24: 6rem;
287
+ --spacing-28: 7rem;
288
+ --spacing-32: 8rem;
289
+ --spacing-36: 9rem;
290
+ --spacing-40: 10rem;
291
+ --spacing-44: 11rem;
292
+ --spacing-48: 12rem;
293
+ --spacing-52: 13rem;
294
+ --spacing-56: 14rem;
295
+ --spacing-60: 15rem;
296
+ --spacing-64: 16rem;
297
+ --spacing-72: 18rem;
298
+ --spacing-80: 20rem;
299
+ --spacing-96: 24rem;
300
+ --radius-none: 0px;
301
+ --radius-xs: 0.125rem;
302
+ --radius-sm: 0.25rem;
303
+ --radius-md: 0.375rem;
304
+ --radius-lg: 0.5rem;
305
+ --radius-xl: 0.75rem;
306
+ --radius-2xl: 1rem;
307
+ --radius-3xl: 1.5rem;
308
+ --radius-4xl: 2rem;
309
+ --radius-full: 9999px;
310
+ --font-family-sans: Inter, system-ui, sans-serif;
311
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
312
+ --font-family-serif: Merriweather, serif;
313
+ --font-family-mono: 'Fira Code', monospace;
314
+ --font-size-xs: 0.75rem;
315
+ --font-size-sm: 0.875rem;
316
+ --font-size-base: 1rem;
317
+ --font-size-lg: 1.125rem;
318
+ --font-size-xl: 1.25rem;
319
+ --font-size-2xl: 1.5rem;
320
+ --font-size-3xl: 1.875rem;
321
+ --font-size-4xl: 2.25rem;
322
+ --font-size-5xl: 3rem;
323
+ --font-size-6xl: 3.75rem;
324
+ --font-size-7xl: 4.5rem;
325
+ --font-size-8xl: 6rem;
326
+ --font-size-9xl: 8rem;
327
+ --font-weight-thin: 100;
328
+ --font-weight-extralight: 200;
329
+ --font-weight-light: 300;
330
+ --font-weight-normal: 400;
331
+ --font-weight-medium: 500;
332
+ --font-weight-semibold: 600;
333
+ --font-weight-bold: 700;
334
+ --font-weight-extrabold: 800;
335
+ --font-weight-black: 900;
336
+ --font-lineheight-tight: 1.25;
337
+ --font-lineheight-snug: 1.375;
338
+ --font-lineheight-normal: 1.5;
339
+ --font-lineheight-relaxed: 1.625;
340
+ --font-lineheight-loose: 2;
341
+ --font-letterspacing-tighter: -0.05em;
342
+ --font-letterspacing-tight: -0.025em;
343
+ --font-letterspacing-normal: 0em;
344
+ --font-letterspacing-wide: 0.025em;
345
+ --font-letterspacing-wider: 0.05em;
346
+ --font-letterspacing-widest: 0.1em;
347
+ --color-background-body: #151a30;
348
+ --color-background-surface: #1a2038;
349
+ --color-background-muted: #374151;
350
+ --color-background-hover: #4b5563;
351
+ --color-background-selected: #6b7280;
352
+ --color-background-modal: rgba(255, 255, 255, 0.12);
353
+ --color-background-input: rgba(255, 255, 255, 0.05);
354
+ --color-text-body: #ededef;
355
+ --color-text-heading: #ffffff;
356
+ --color-text-muted: #9ca3af;
357
+ --color-text-caption: #d1d5db;
358
+ --color-text-placeholder: #9ca3af;
359
+ --color-text-disabled: #9ca3af;
360
+ --color-text-link-default: #b4b9ff;
361
+ --color-text-link-hover: #c0c5ff;
362
+ --color-text-onPrimary: #1f2937;
363
+ --color-border-default: #2e3a59;
364
+ --color-border-focus: #e5e7eb;
365
+ --color-border-muted: #4b5563;
366
+ --color-border-input: #6b7280;
367
+ --color-feedback-success-text: #d1fae5;
368
+ --color-feedback-success-background: #064e3b;
369
+ --color-feedback-success-border: #059669;
370
+ --color-feedback-error-text: #f87171;
371
+ --color-feedback-error-background: #7f1d1d;
372
+ --color-feedback-error-border: #dc2626;
373
+ --color-feedback-warning-text: #fbbf24;
374
+ --color-feedback-warning-background: #78350f;
375
+ --color-feedback-warning-border: #d97706;
376
+ --color-feedback-info-text: #60a5fa;
377
+ --color-feedback-info-background: #1e3a8a;
378
+ --color-feedback-info-border: #2563eb;
379
+ --color-action-primary: #7a8ee1;
380
+ --color-action-primary-hover: #6a6fcc;
381
+ --color-action-primary-text: #ffffff;
382
+ --color-action-primary-light: rgba(122, 142, 225, 0.15);
383
+ --color-action-secondary: #e5e7eb;
384
+ --color-action-secondary-hover: #f3f4f6;
385
+ --color-action-secondary-text: #111827;
386
+ }
387
+ @keyframes wave {
388
+ 0% {
389
+ transform: translateX(-100%);
390
+ }
391
+ 50%, 100% {
392
+ transform: translateX(100%);
393
+ }
394
+ }
395
+ @keyframes slide-in-from-right {
396
+ from {
397
+ transform: translateX(100%);
398
+ }
399
+ to {
400
+ transform: translateX(0);
401
+ }
402
+ }
403
+ @keyframes slide-in-from-left {
404
+ from {
405
+ transform: translateX(-100%);
406
+ }
407
+ to {
408
+ transform: translateX(0);
409
+ }
410
+ }
411
+ @keyframes slide-out-to-right {
412
+ from {
413
+ transform: translateX(0);
414
+ }
415
+ to {
416
+ transform: translateX(100%);
417
+ }
418
+ }
419
+ @keyframes slide-out-to-left {
420
+ from {
421
+ transform: translateX(0);
422
+ }
423
+ to {
424
+ transform: translateX(-100%);
425
+ }
426
+ }
427
+ @keyframes fade-in {
428
+ from {
429
+ opacity: 0;
430
+ }
431
+ to {
432
+ opacity: 1;
433
+ }
434
+ }
435
+ @keyframes fade-out {
436
+ from {
437
+ opacity: 1;
438
+ }
439
+ to {
440
+ opacity: 0;
441
+ }
442
+ }
443
+ @keyframes spin {
444
+ to {
445
+ transform: rotate(360deg);
446
+ }
447
+ }
448
+ @keyframes ping {
449
+ 75%, 100% {
450
+ transform: scale(2);
451
+ opacity: 0;
452
+ }
453
+ }
454
+ @keyframes pulse {
455
+ 50% {
456
+ opacity: 0.5;
457
+ }
458
+ }
459
+ @keyframes bounce {
460
+ 0%, 100% {
461
+ transform: translateY(-25%);
462
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
59
463
  }
464
+ 50% {
465
+ transform: none;
466
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
467
+ }
468
+ }
469
+ .slide-in-from-right {
470
+ animation: slide-in-from-right 0.3s ease-out;
471
+ }
472
+ .slide-in-from-left {
473
+ animation: slide-in-from-left 0.3s ease-out;
60
474
  }
475
+ .slide-out-to-right {
476
+ animation: slide-out-to-right 0.15s ease-in;
477
+ }
478
+ .slide-out-to-left {
479
+ animation: slide-out-to-left 0.15s ease-in;
480
+ }
481
+ .fade-in {
482
+ animation: fade-in 0.2s ease-out;
483
+ }
484
+ .fade-out {
485
+ animation: fade-out 0.15s ease-in;
486
+ }
487
+ @layer theme, base, components, utilities;
488
+ @layer theme;
61
489
  @layer base {
62
490
  *, ::after, ::before, ::backdrop, ::file-selector-button {
63
491
  box-sizing: border-box;
@@ -259,71 +687,122 @@
259
687
  position: sticky;
260
688
  }
261
689
  .inset-0 {
262
- inset: calc(0.25rem * 0);
690
+ inset: var(--spacing-0);
263
691
  }
264
692
  .inset-y-\[1px\] {
265
693
  inset-block: 1px;
266
694
  }
267
695
  .-top-2 {
268
- top: calc(0.25rem * -2);
696
+ top: calc(var(--spacing-2) * -1);
697
+ }
698
+ .-top-5 {
699
+ top: calc(var(--spacing-5) * -1);
269
700
  }
270
701
  .-top-\[5px\] {
271
702
  top: calc(5px * -1);
272
703
  }
273
704
  .top-0 {
274
- top: calc(0.25rem * 0);
705
+ top: var(--spacing-0);
275
706
  }
276
707
  .top-1\/2 {
277
708
  top: calc(1/2 * 100%);
278
709
  }
279
710
  .top-2 {
280
- top: calc(0.25rem * 2);
711
+ top: var(--spacing-2);
712
+ }
713
+ .top-4 {
714
+ top: var(--spacing-4);
281
715
  }
282
716
  .-right-2 {
283
- right: calc(0.25rem * -2);
717
+ right: calc(var(--spacing-2) * -1);
718
+ }
719
+ .right-0 {
720
+ right: var(--spacing-0);
721
+ }
722
+ .right-0\.5 {
723
+ right: calc(var(--spacing) * 0.5);
724
+ }
725
+ .right-1 {
726
+ right: var(--spacing-1);
284
727
  }
285
728
  .right-2 {
286
- right: calc(0.25rem * 2);
729
+ right: var(--spacing-2);
287
730
  }
288
731
  .right-3 {
289
- right: calc(0.25rem * 3);
732
+ right: var(--spacing-3);
290
733
  }
291
734
  .right-4 {
292
- right: calc(0.25rem * 4);
735
+ right: var(--spacing-4);
293
736
  }
294
737
  .right-\[1px\] {
295
738
  right: 1px;
296
739
  }
297
740
  .-bottom-2 {
298
- bottom: calc(0.25rem * -2);
741
+ bottom: calc(var(--spacing-2) * -1);
299
742
  }
300
743
  .bottom-0 {
301
- bottom: calc(0.25rem * 0);
744
+ bottom: var(--spacing-0);
745
+ }
746
+ .bottom-0\.5 {
747
+ bottom: calc(var(--spacing) * 0.5);
748
+ }
749
+ .bottom-1 {
750
+ bottom: var(--spacing-1);
751
+ }
752
+ .bottom-4 {
753
+ bottom: var(--spacing-4);
302
754
  }
303
755
  .-left-2 {
304
- left: calc(0.25rem * -2);
756
+ left: calc(var(--spacing-2) * -1);
305
757
  }
306
758
  .left-0 {
307
- left: calc(0.25rem * 0);
759
+ left: var(--spacing-0);
760
+ }
761
+ .left-1\/2 {
762
+ left: calc(1/2 * 100%);
308
763
  }
309
764
  .left-2 {
310
- left: calc(0.25rem * 2);
765
+ left: var(--spacing-2);
311
766
  }
312
767
  .left-3 {
313
- left: calc(0.25rem * 3);
768
+ left: var(--spacing-3);
314
769
  }
315
770
  .left-4 {
316
- left: calc(0.25rem * 4);
771
+ left: var(--spacing-4);
317
772
  }
318
773
  .left-full {
319
774
  left: 100%;
320
775
  }
776
+ .isolate {
777
+ isolation: isolate;
778
+ }
779
+ .-z-10 {
780
+ z-index: calc(10 * -1);
781
+ }
782
+ .z-0 {
783
+ z-index: 0;
784
+ }
321
785
  .z-10 {
322
786
  z-index: 10;
323
787
  }
788
+ .z-20 {
789
+ z-index: 20;
790
+ }
791
+ .z-30 {
792
+ z-index: 30;
793
+ }
794
+ .z-40 {
795
+ z-index: 40;
796
+ }
324
797
  .z-50 {
325
798
  z-index: 50;
326
799
  }
800
+ .z-\[60\] {
801
+ z-index: 60;
802
+ }
803
+ .col-span-full {
804
+ grid-column: 1 / -1;
805
+ }
327
806
  .container {
328
807
  width: 100%;
329
808
  @media (width >= 40rem) {
@@ -343,49 +822,76 @@
343
822
  }
344
823
  }
345
824
  .-mx-1 {
346
- margin-inline: calc(0.25rem * -1);
825
+ margin-inline: calc(var(--spacing-1) * -1);
826
+ }
827
+ .mx-1 {
828
+ margin-inline: var(--spacing-1);
347
829
  }
348
830
  .mx-2 {
349
- margin-inline: calc(0.25rem * 2);
831
+ margin-inline: var(--spacing-2);
832
+ }
833
+ .mx-auto {
834
+ margin-inline: auto;
350
835
  }
351
836
  .-my-0\.5 {
352
- margin-block: calc(0.25rem * -0.5);
837
+ margin-block: calc(var(--spacing) * -0.5);
353
838
  }
354
839
  .my-6 {
355
- margin-block: calc(0.25rem * 6);
840
+ margin-block: var(--spacing-6);
356
841
  }
357
842
  .-mt-px {
358
843
  margin-top: -1px;
359
844
  }
360
845
  .mt-1 {
361
- margin-top: calc(0.25rem * 1);
846
+ margin-top: var(--spacing-1);
362
847
  }
363
848
  .mt-2 {
364
- margin-top: calc(0.25rem * 2);
849
+ margin-top: var(--spacing-2);
365
850
  }
366
851
  .mt-3 {
367
- margin-top: calc(0.25rem * 3);
852
+ margin-top: var(--spacing-3);
368
853
  }
369
854
  .mt-4 {
370
- margin-top: calc(0.25rem * 4);
855
+ margin-top: var(--spacing-4);
856
+ }
857
+ .mt-6 {
858
+ margin-top: var(--spacing-6);
859
+ }
860
+ .mt-8 {
861
+ margin-top: var(--spacing-8);
371
862
  }
372
863
  .mr-1 {
373
- margin-right: calc(0.25rem * 1);
864
+ margin-right: var(--spacing-1);
865
+ }
866
+ .mr-1\.5 {
867
+ margin-right: calc(var(--spacing) * 1.5);
374
868
  }
375
869
  .mr-2 {
376
- margin-right: calc(0.25rem * 2);
870
+ margin-right: var(--spacing-2);
377
871
  }
378
872
  .mb-1 {
379
- margin-bottom: calc(0.25rem * 1);
873
+ margin-bottom: var(--spacing-1);
380
874
  }
381
875
  .mb-2 {
382
- margin-bottom: calc(0.25rem * 2);
876
+ margin-bottom: var(--spacing-2);
383
877
  }
384
878
  .mb-3 {
385
- margin-bottom: calc(0.25rem * 3);
879
+ margin-bottom: var(--spacing-3);
386
880
  }
387
881
  .mb-4 {
388
- margin-bottom: calc(0.25rem * 4);
882
+ margin-bottom: var(--spacing-4);
883
+ }
884
+ .mb-6 {
885
+ margin-bottom: var(--spacing-6);
886
+ }
887
+ .-ml-px {
888
+ margin-left: -1px;
889
+ }
890
+ .ml-2 {
891
+ margin-left: var(--spacing-2);
892
+ }
893
+ .ml-6 {
894
+ margin-left: var(--spacing-6);
389
895
  }
390
896
  .ml-auto {
391
897
  margin-left: auto;
@@ -399,6 +905,9 @@
399
905
  .block {
400
906
  display: block;
401
907
  }
908
+ .contents {
909
+ display: contents;
910
+ }
402
911
  .flex {
403
912
  display: flex;
404
913
  }
@@ -417,63 +926,87 @@
417
926
  .inline-flex {
418
927
  display: inline-flex;
419
928
  }
929
+ .inline-grid {
930
+ display: inline-grid;
931
+ }
420
932
  .table {
421
933
  display: table;
422
934
  }
423
935
  .h-1\.5 {
424
- height: calc(0.25rem * 1.5);
936
+ height: calc(var(--spacing) * 1.5);
425
937
  }
426
938
  .h-1\/2 {
427
939
  height: calc(1/2 * 100%);
428
940
  }
429
941
  .h-2 {
430
- height: calc(0.25rem * 2);
942
+ height: var(--spacing-2);
943
+ }
944
+ .h-2\.5 {
945
+ height: calc(var(--spacing) * 2.5);
431
946
  }
432
947
  .h-3 {
433
- height: calc(0.25rem * 3);
948
+ height: var(--spacing-3);
434
949
  }
435
950
  .h-4 {
436
- height: calc(0.25rem * 4);
951
+ height: var(--spacing-4);
437
952
  }
438
953
  .h-5 {
439
- height: calc(0.25rem * 5);
954
+ height: var(--spacing-5);
440
955
  }
441
956
  .h-6 {
442
- height: calc(0.25rem * 6);
957
+ height: var(--spacing-6);
443
958
  }
444
959
  .h-7 {
445
- height: calc(0.25rem * 7);
960
+ height: var(--spacing-7);
446
961
  }
447
962
  .h-8 {
448
- height: calc(0.25rem * 8);
963
+ height: var(--spacing-8);
449
964
  }
450
965
  .h-9 {
451
- height: calc(0.25rem * 9);
966
+ height: var(--spacing-9);
452
967
  }
453
968
  .h-10 {
454
- height: calc(0.25rem * 10);
969
+ height: var(--spacing-10);
455
970
  }
456
971
  .h-12 {
457
- height: calc(0.25rem * 12);
972
+ height: var(--spacing-12);
973
+ }
974
+ .h-14 {
975
+ height: var(--spacing-14);
458
976
  }
459
977
  .h-16 {
460
- height: calc(0.25rem * 16);
978
+ height: var(--spacing-16);
461
979
  }
462
980
  .h-20 {
463
- height: calc(0.25rem * 20);
981
+ height: var(--spacing-20);
464
982
  }
465
983
  .h-28 {
466
- height: calc(0.25rem * 28);
984
+ height: var(--spacing-28);
467
985
  }
468
986
  .h-32 {
469
- height: calc(0.25rem * 32);
987
+ height: var(--spacing-32);
988
+ }
989
+ .h-64 {
990
+ height: var(--spacing-64);
991
+ }
992
+ .h-96 {
993
+ height: var(--spacing-96);
470
994
  }
471
995
  .h-\[28px\] {
472
996
  height: 28px;
473
997
  }
998
+ .h-\[60px\] {
999
+ height: 60px;
1000
+ }
474
1001
  .h-\[120px\] {
475
1002
  height: 120px;
476
1003
  }
1004
+ .h-\[400px\] {
1005
+ height: 400px;
1006
+ }
1007
+ .h-\[calc\(100vh-60px\)\] {
1008
+ height: calc(100vh - 60px);
1009
+ }
477
1010
  .h-\[var\(--control-lg-height\)\] {
478
1011
  height: var(--control-lg-height);
479
1012
  }
@@ -495,8 +1028,11 @@
495
1028
  .h-px {
496
1029
  height: 1px;
497
1030
  }
1031
+ .h-screen {
1032
+ height: 100vh;
1033
+ }
498
1034
  .max-h-48 {
499
- max-height: calc(0.25rem * 48);
1035
+ max-height: var(--spacing-48);
500
1036
  }
501
1037
  .max-h-\[300px\] {
502
1038
  max-height: 300px;
@@ -505,7 +1041,7 @@
505
1041
  max-height: inherit;
506
1042
  }
507
1043
  .min-h-0 {
508
- min-height: calc(0.25rem * 0);
1044
+ min-height: var(--spacing-0);
509
1045
  }
510
1046
  .min-h-\[28px\] {
511
1047
  min-height: 28px;
@@ -513,41 +1049,86 @@
513
1049
  .min-h-\[100px\] {
514
1050
  min-height: 100px;
515
1051
  }
1052
+ .min-h-\[200px\] {
1053
+ min-height: 200px;
1054
+ }
1055
+ .min-h-screen {
1056
+ min-height: 100vh;
1057
+ }
1058
+ .w-1\.5 {
1059
+ width: calc(var(--spacing) * 1.5);
1060
+ }
1061
+ .w-1\/2 {
1062
+ width: calc(1/2 * 100%);
1063
+ }
516
1064
  .w-2 {
517
- width: calc(0.25rem * 2);
1065
+ width: var(--spacing-2);
1066
+ }
1067
+ .w-2\.5 {
1068
+ width: calc(var(--spacing) * 2.5);
1069
+ }
1070
+ .w-2\/3 {
1071
+ width: calc(2/3 * 100%);
518
1072
  }
519
1073
  .w-3 {
520
- width: calc(0.25rem * 3);
1074
+ width: var(--spacing-3);
1075
+ }
1076
+ .w-3\/4 {
1077
+ width: calc(3/4 * 100%);
521
1078
  }
522
1079
  .w-4 {
523
- width: calc(0.25rem * 4);
1080
+ width: var(--spacing-4);
524
1081
  }
525
1082
  .w-5 {
526
- width: calc(0.25rem * 5);
1083
+ width: var(--spacing-5);
527
1084
  }
528
1085
  .w-6 {
529
- width: calc(0.25rem * 6);
1086
+ width: var(--spacing-6);
530
1087
  }
531
1088
  .w-7 {
532
- width: calc(0.25rem * 7);
1089
+ width: var(--spacing-7);
533
1090
  }
534
1091
  .w-8 {
535
- width: calc(0.25rem * 8);
1092
+ width: var(--spacing-8);
536
1093
  }
537
1094
  .w-9 {
538
- width: calc(0.25rem * 9);
1095
+ width: var(--spacing-9);
1096
+ }
1097
+ .w-10 {
1098
+ width: var(--spacing-10);
539
1099
  }
540
1100
  .w-12 {
541
- width: calc(0.25rem * 12);
1101
+ width: var(--spacing-12);
1102
+ }
1103
+ .w-14 {
1104
+ width: var(--spacing-14);
1105
+ }
1106
+ .w-16 {
1107
+ width: var(--spacing-16);
1108
+ }
1109
+ .w-20 {
1110
+ width: var(--spacing-20);
1111
+ }
1112
+ .w-24 {
1113
+ width: var(--spacing-24);
542
1114
  }
543
1115
  .w-32 {
544
- width: calc(0.25rem * 32);
1116
+ width: var(--spacing-32);
1117
+ }
1118
+ .w-40 {
1119
+ width: var(--spacing-40);
1120
+ }
1121
+ .w-48 {
1122
+ width: var(--spacing-48);
1123
+ }
1124
+ .w-64 {
1125
+ width: var(--spacing-64);
545
1126
  }
546
1127
  .w-80 {
547
- width: calc(0.25rem * 80);
1128
+ width: var(--spacing-80);
548
1129
  }
549
1130
  .w-96 {
550
- width: calc(0.25rem * 96);
1131
+ width: var(--spacing-96);
551
1132
  }
552
1133
  .w-\[28rem\] {
553
1134
  width: 28rem;
@@ -571,8 +1152,17 @@
571
1152
  .w-full {
572
1153
  width: 100%;
573
1154
  }
1155
+ .w-px {
1156
+ width: 1px;
1157
+ }
574
1158
  .max-w-4xl {
575
- max-width: 56rem;
1159
+ max-width: var(--container-4xl);
1160
+ }
1161
+ .max-w-6xl {
1162
+ max-width: var(--container-6xl);
1163
+ }
1164
+ .max-w-7xl {
1165
+ max-width: var(--container-7xl);
576
1166
  }
577
1167
  .max-w-\[200px\] {
578
1168
  max-width: 200px;
@@ -584,25 +1174,31 @@
584
1174
  max-width: 100%;
585
1175
  }
586
1176
  .max-w-lg {
587
- max-width: 32rem;
1177
+ max-width: var(--container-lg);
588
1178
  }
589
1179
  .max-w-md {
590
- max-width: 28rem;
1180
+ max-width: var(--container-md);
1181
+ }
1182
+ .max-w-none {
1183
+ max-width: none;
591
1184
  }
592
1185
  .max-w-sm {
593
- max-width: 24rem;
1186
+ max-width: var(--container-sm);
594
1187
  }
595
1188
  .max-w-xl {
596
- max-width: 36rem;
1189
+ max-width: var(--container-xl);
597
1190
  }
598
1191
  .max-w-xs {
599
- max-width: 20rem;
1192
+ max-width: var(--container-xs);
600
1193
  }
601
1194
  .min-w-0 {
602
- min-width: calc(0.25rem * 0);
1195
+ min-width: var(--spacing-0);
603
1196
  }
604
1197
  .min-w-10 {
605
- min-width: calc(0.25rem * 10);
1198
+ min-width: var(--spacing-10);
1199
+ }
1200
+ .min-w-48 {
1201
+ min-width: var(--spacing-48);
606
1202
  }
607
1203
  .min-w-\[100px\] {
608
1204
  min-width: 100px;
@@ -610,6 +1206,9 @@
610
1206
  .min-w-\[150px\] {
611
1207
  min-width: 150px;
612
1208
  }
1209
+ .min-w-\[180px\] {
1210
+ min-width: 180px;
1211
+ }
613
1212
  .min-w-\[208px\] {
614
1213
  min-width: 208px;
615
1214
  }
@@ -625,11 +1224,33 @@
625
1224
  .grow {
626
1225
  flex-grow: 1;
627
1226
  }
1227
+ .table-auto {
1228
+ table-layout: auto;
1229
+ }
1230
+ .table-fixed {
1231
+ table-layout: fixed;
1232
+ }
628
1233
  .border-collapse {
629
1234
  border-collapse: collapse;
630
1235
  }
1236
+ .border-separate {
1237
+ border-collapse: separate;
1238
+ }
1239
+ .border-spacing-0 {
1240
+ --tw-border-spacing-x: var(--spacing-0);
1241
+ --tw-border-spacing-y: var(--spacing-0);
1242
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1243
+ }
1244
+ .-translate-x-1\/2 {
1245
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
1246
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1247
+ }
1248
+ .-translate-x-full {
1249
+ --tw-translate-x: -100%;
1250
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1251
+ }
631
1252
  .translate-x-0 {
632
- --tw-translate-x: calc(0.25rem * 0);
1253
+ --tw-translate-x: var(--spacing-0);
633
1254
  translate: var(--tw-translate-x) var(--tw-translate-y);
634
1255
  }
635
1256
  .translate-x-\[100\%\] {
@@ -647,10 +1268,10 @@
647
1268
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
648
1269
  }
649
1270
  .animate-pulse {
650
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1271
+ animation: var(--animate-pulse);
651
1272
  }
652
1273
  .animate-spin {
653
- animation: spin 1s linear infinite;
1274
+ animation: var(--animate-spin);
654
1275
  }
655
1276
  .cursor-default {
656
1277
  cursor: default;
@@ -676,6 +1297,18 @@
676
1297
  .resize-y {
677
1298
  resize: vertical;
678
1299
  }
1300
+ .list-inside {
1301
+ list-style-position: inside;
1302
+ }
1303
+ .list-decimal {
1304
+ list-style-type: decimal;
1305
+ }
1306
+ .list-disc {
1307
+ list-style-type: disc;
1308
+ }
1309
+ .list-none {
1310
+ list-style-type: none;
1311
+ }
679
1312
  .\[appearance\:textfield\] {
680
1313
  -webkit-appearance: textfield;
681
1314
  -moz-appearance: textfield;
@@ -716,6 +1349,9 @@
716
1349
  .items-center {
717
1350
  align-items: center;
718
1351
  }
1352
+ .items-end {
1353
+ align-items: flex-end;
1354
+ }
719
1355
  .items-start {
720
1356
  align-items: flex-start;
721
1357
  }
@@ -732,46 +1368,46 @@
732
1368
  justify-content: flex-start;
733
1369
  }
734
1370
  .gap-0 {
735
- gap: calc(0.25rem * 0);
1371
+ gap: var(--spacing-0);
736
1372
  }
737
1373
  .gap-0\.5 {
738
- gap: calc(0.25rem * 0.5);
1374
+ gap: calc(var(--spacing) * 0.5);
739
1375
  }
740
1376
  .gap-1 {
741
- gap: calc(0.25rem * 1);
1377
+ gap: var(--spacing-1);
742
1378
  }
743
1379
  .gap-1\.5 {
744
- gap: calc(0.25rem * 1.5);
1380
+ gap: calc(var(--spacing) * 1.5);
745
1381
  }
746
1382
  .gap-2 {
747
- gap: calc(0.25rem * 2);
1383
+ gap: var(--spacing-2);
748
1384
  }
749
1385
  .gap-2\.5 {
750
- gap: calc(0.25rem * 2.5);
1386
+ gap: calc(var(--spacing) * 2.5);
751
1387
  }
752
1388
  .gap-3 {
753
- gap: calc(0.25rem * 3);
1389
+ gap: var(--spacing-3);
754
1390
  }
755
1391
  .gap-4 {
756
- gap: calc(0.25rem * 4);
1392
+ gap: var(--spacing-4);
757
1393
  }
758
1394
  .gap-5 {
759
- gap: calc(0.25rem * 5);
1395
+ gap: var(--spacing-5);
760
1396
  }
761
1397
  .gap-6 {
762
- gap: calc(0.25rem * 6);
1398
+ gap: var(--spacing-6);
763
1399
  }
764
1400
  .gap-7 {
765
- gap: calc(0.25rem * 7);
1401
+ gap: var(--spacing-7);
766
1402
  }
767
1403
  .gap-8 {
768
- gap: calc(0.25rem * 8);
1404
+ gap: var(--spacing-8);
769
1405
  }
770
1406
  .gap-9 {
771
- gap: calc(0.25rem * 9);
1407
+ gap: var(--spacing-9);
772
1408
  }
773
1409
  .gap-10 {
774
- gap: calc(0.25rem * 10);
1410
+ gap: var(--spacing-10);
775
1411
  }
776
1412
  .gap-\[var\(--control-gap-lg\)\] {
777
1413
  gap: var(--control-gap-lg);
@@ -788,50 +1424,57 @@
788
1424
  .space-y-1 {
789
1425
  :where(& > :not(:last-child)) {
790
1426
  --tw-space-y-reverse: 0;
791
- margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));
792
- margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));
1427
+ margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
1428
+ margin-block-end: calc(var(--spacing-1) * calc(1 - var(--tw-space-y-reverse)));
793
1429
  }
794
1430
  }
795
1431
  .space-y-1\.5 {
796
1432
  :where(& > :not(:last-child)) {
797
1433
  --tw-space-y-reverse: 0;
798
- margin-block-start: calc(calc(0.25rem * 1.5) * var(--tw-space-y-reverse));
799
- margin-block-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-y-reverse)));
1434
+ margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
1435
+ margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
800
1436
  }
801
1437
  }
802
1438
  .space-y-2 {
803
1439
  :where(& > :not(:last-child)) {
804
1440
  --tw-space-y-reverse: 0;
805
- margin-block-start: calc(calc(0.25rem * 2) * var(--tw-space-y-reverse));
806
- margin-block-end: calc(calc(0.25rem * 2) * calc(1 - var(--tw-space-y-reverse)));
1441
+ margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
1442
+ margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
807
1443
  }
808
1444
  }
809
1445
  .space-y-3 {
810
1446
  :where(& > :not(:last-child)) {
811
1447
  --tw-space-y-reverse: 0;
812
- margin-block-start: calc(calc(0.25rem * 3) * var(--tw-space-y-reverse));
813
- margin-block-end: calc(calc(0.25rem * 3) * calc(1 - var(--tw-space-y-reverse)));
1448
+ margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
1449
+ margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
814
1450
  }
815
1451
  }
816
1452
  .space-y-4 {
817
1453
  :where(& > :not(:last-child)) {
818
1454
  --tw-space-y-reverse: 0;
819
- margin-block-start: calc(calc(0.25rem * 4) * var(--tw-space-y-reverse));
820
- margin-block-end: calc(calc(0.25rem * 4) * calc(1 - var(--tw-space-y-reverse)));
1455
+ margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
1456
+ margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
821
1457
  }
822
1458
  }
823
1459
  .space-y-6 {
824
1460
  :where(& > :not(:last-child)) {
825
1461
  --tw-space-y-reverse: 0;
826
- margin-block-start: calc(calc(0.25rem * 6) * var(--tw-space-y-reverse));
827
- margin-block-end: calc(calc(0.25rem * 6) * calc(1 - var(--tw-space-y-reverse)));
1462
+ margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
1463
+ margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
828
1464
  }
829
1465
  }
830
1466
  .space-y-8 {
831
1467
  :where(& > :not(:last-child)) {
832
1468
  --tw-space-y-reverse: 0;
833
- margin-block-start: calc(calc(0.25rem * 8) * var(--tw-space-y-reverse));
834
- margin-block-end: calc(calc(0.25rem * 8) * calc(1 - var(--tw-space-y-reverse)));
1469
+ margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
1470
+ margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
1471
+ }
1472
+ }
1473
+ .-space-x-2 {
1474
+ :where(& > :not(:last-child)) {
1475
+ --tw-space-x-reverse: 0;
1476
+ margin-inline-start: calc(calc(var(--spacing-2) * -1) * var(--tw-space-x-reverse));
1477
+ margin-inline-end: calc(calc(var(--spacing-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
835
1478
  }
836
1479
  }
837
1480
  .divide-x {
@@ -853,7 +1496,7 @@
853
1496
  }
854
1497
  .divide-border-default {
855
1498
  :where(& > :not(:last-child)) {
856
- border-color: #e5e7eb;
1499
+ border-color: var(--color-border-default);
857
1500
  }
858
1501
  }
859
1502
  .self-center {
@@ -870,12 +1513,18 @@
870
1513
  .overflow-hidden {
871
1514
  overflow: hidden;
872
1515
  }
1516
+ .overflow-visible {
1517
+ overflow: visible;
1518
+ }
873
1519
  .overflow-x-auto {
874
1520
  overflow-x: auto;
875
1521
  }
876
1522
  .overflow-y-auto {
877
1523
  overflow-y: auto;
878
1524
  }
1525
+ .overflow-y-hidden {
1526
+ overflow-y: hidden;
1527
+ }
879
1528
  .overscroll-contain {
880
1529
  overscroll-behavior: contain;
881
1530
  }
@@ -894,32 +1543,38 @@
894
1543
  .rounded-full {
895
1544
  border-radius: calc(infinity * 1px);
896
1545
  }
1546
+ .rounded-full {
1547
+ border-radius: var(--radius-full);
1548
+ }
897
1549
  .rounded-lg {
898
- border-radius: 0.5rem;
1550
+ border-radius: var(--radius-lg);
899
1551
  }
900
1552
  .rounded-md {
901
- border-radius: 0.375rem;
1553
+ border-radius: var(--radius-md);
902
1554
  }
903
1555
  .rounded-none {
904
1556
  border-radius: 0;
905
1557
  }
1558
+ .rounded-none {
1559
+ border-radius: var(--radius-none);
1560
+ }
906
1561
  .rounded-sm {
907
- border-radius: 0.25rem;
1562
+ border-radius: var(--radius-sm);
908
1563
  }
909
1564
  .rounded-xl {
910
- border-radius: 0.75rem;
1565
+ border-radius: var(--radius-xl);
911
1566
  }
912
1567
  .rounded-l-sm {
913
- border-top-left-radius: 0.25rem;
914
- border-bottom-left-radius: 0.25rem;
1568
+ border-top-left-radius: var(--radius-sm);
1569
+ border-bottom-left-radius: var(--radius-sm);
915
1570
  }
916
1571
  .rounded-r-\[calc\(var\(--control-border-radius\)-1px\)\] {
917
1572
  border-top-right-radius: calc(var(--control-border-radius) - 1px);
918
1573
  border-bottom-right-radius: calc(var(--control-border-radius) - 1px);
919
1574
  }
920
1575
  .rounded-r-sm {
921
- border-top-right-radius: 0.25rem;
922
- border-bottom-right-radius: 0.25rem;
1576
+ border-top-right-radius: var(--radius-sm);
1577
+ border-bottom-right-radius: var(--radius-sm);
923
1578
  }
924
1579
  .border {
925
1580
  border-style: var(--tw-border-style);
@@ -945,6 +1600,10 @@
945
1600
  border-top-style: var(--tw-border-style);
946
1601
  border-top-width: 1px;
947
1602
  }
1603
+ .\!border-r-0 {
1604
+ border-right-style: var(--tw-border-style) !important;
1605
+ border-right-width: 0px !important;
1606
+ }
948
1607
  .border-r {
949
1608
  border-right-style: var(--tw-border-style);
950
1609
  border-right-width: 1px;
@@ -965,10 +1624,18 @@
965
1624
  border-left-style: var(--tw-border-style);
966
1625
  border-left-width: 1px;
967
1626
  }
1627
+ .border-l-2 {
1628
+ border-left-style: var(--tw-border-style);
1629
+ border-left-width: 2px;
1630
+ }
968
1631
  .border-l-4 {
969
1632
  border-left-style: var(--tw-border-style);
970
1633
  border-left-width: 4px;
971
1634
  }
1635
+ .border-dashed {
1636
+ --tw-border-style: dashed;
1637
+ border-style: dashed;
1638
+ }
972
1639
  .border-none {
973
1640
  --tw-border-style: none;
974
1641
  border-style: none;
@@ -978,82 +1645,109 @@
978
1645
  border-style: solid;
979
1646
  }
980
1647
  .border-action-primary {
981
- border-color: #444ae1;
1648
+ border-color: var(--color-action-primary);
982
1649
  }
983
1650
  .border-action-primary\/20 {
984
- border-color: color-mix(in oklab, #444ae1 20%, transparent);
1651
+ border-color: color-mix(in srgb, #444ae1 20%, transparent);
1652
+ @supports (color: color-mix(in lab, red, red)) {
1653
+ border-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
1654
+ }
1655
+ }
1656
+ .border-background-surface {
1657
+ border-color: var(--color-background-surface);
985
1658
  }
986
1659
  .border-blue-200 {
987
- border-color: oklch(0.882 0.059 254.128);
1660
+ border-color: var(--color-blue-200);
988
1661
  }
989
1662
  .border-border-default {
990
- border-color: #e5e7eb;
1663
+ border-color: var(--color-border-default);
991
1664
  }
992
1665
  .border-border-input {
993
- border-color: #d1d5db;
1666
+ border-color: var(--color-border-input);
994
1667
  }
995
1668
  .border-border-input\/20 {
996
- border-color: color-mix(in oklab, #d1d5db 20%, transparent);
1669
+ border-color: color-mix(in srgb, #d1d5db 20%, transparent);
1670
+ @supports (color: color-mix(in lab, red, red)) {
1671
+ border-color: color-mix(in oklab, var(--color-border-input) 20%, transparent);
1672
+ }
997
1673
  }
998
1674
  .border-border-muted {
999
- border-color: #e5e7eb;
1675
+ border-color: var(--color-border-muted);
1000
1676
  }
1001
1677
  .border-border-muted\/30 {
1002
- border-color: color-mix(in oklab, #e5e7eb 30%, transparent);
1678
+ border-color: color-mix(in srgb, #e5e7eb 30%, transparent);
1679
+ @supports (color: color-mix(in lab, red, red)) {
1680
+ border-color: color-mix(in oklab, var(--color-border-muted) 30%, transparent);
1681
+ }
1003
1682
  }
1004
1683
  .border-border-muted\/50 {
1005
- border-color: color-mix(in oklab, #e5e7eb 50%, transparent);
1684
+ border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
1685
+ @supports (color: color-mix(in lab, red, red)) {
1686
+ border-color: color-mix(in oklab, var(--color-border-muted) 50%, transparent);
1687
+ }
1006
1688
  }
1007
1689
  .border-brand-primary {
1008
- border-color: #444ae1;
1690
+ border-color: var(--color-brand-primary);
1009
1691
  }
1010
1692
  .border-current {
1011
1693
  border-color: currentcolor;
1012
1694
  }
1013
- .border-device-charging-border {
1014
- border-color: #c084fc;
1015
- }
1016
1695
  .border-feedback-error-border {
1017
- border-color: #ef4444;
1696
+ border-color: var(--color-feedback-error-border);
1697
+ }
1698
+ .border-feedback-info-border {
1699
+ border-color: var(--color-feedback-info-border);
1700
+ }
1701
+ .border-feedback-success-border {
1702
+ border-color: var(--color-feedback-success-border);
1703
+ }
1704
+ .border-feedback-warning-border {
1705
+ border-color: var(--color-feedback-warning-border);
1018
1706
  }
1019
1707
  .border-gray-100 {
1020
- border-color: oklch(0.967 0.003 264.542);
1708
+ border-color: var(--color-gray-100);
1021
1709
  }
1022
1710
  .border-gray-200 {
1023
- border-color: oklch(0.928 0.006 264.531);
1711
+ border-color: var(--color-gray-200);
1024
1712
  }
1025
1713
  .border-gray-300 {
1026
- border-color: oklch(0.872 0.01 258.338);
1714
+ border-color: var(--color-gray-300);
1027
1715
  }
1028
1716
  .border-green-200 {
1029
- border-color: oklch(0.925 0.084 155.995);
1717
+ border-color: var(--color-green-200);
1030
1718
  }
1031
1719
  .border-orange-200 {
1032
- border-color: oklch(0.901 0.076 70.697);
1720
+ border-color: var(--color-orange-200);
1033
1721
  }
1034
1722
  .border-red-200 {
1035
- border-color: oklch(0.885 0.062 18.334);
1723
+ border-color: var(--color-red-200);
1036
1724
  }
1037
1725
  .border-slate-800 {
1038
- border-color: oklch(0.279 0.041 260.031);
1726
+ border-color: var(--color-slate-800);
1039
1727
  }
1040
1728
  .border-text-body {
1041
- border-color: #333333;
1729
+ border-color: var(--color-text-body);
1042
1730
  }
1043
1731
  .border-transparent {
1044
1732
  border-color: transparent;
1045
1733
  }
1734
+ .border-white {
1735
+ border-color: var(--color-white);
1736
+ }
1046
1737
  .border-yellow-200 {
1047
- border-color: oklch(0.945 0.129 101.54);
1738
+ border-color: var(--color-yellow-200);
1739
+ }
1740
+ .border-t-transparent {
1741
+ border-top-color: transparent;
1048
1742
  }
1049
1743
  .border-r-transparent {
1050
1744
  border-right-color: transparent;
1051
1745
  }
1052
1746
  .border-l-border-muted {
1053
- border-left-color: #e5e7eb;
1747
+ border-left-color: var(--color-border-muted);
1054
1748
  }
1055
1749
  .\!bg-neutral-black {
1056
- background-color: #333333 !important;
1750
+ background-color: var(--color-neutral-black) !important;
1057
1751
  }
1058
1752
  .bg-\[\#444ae1\] {
1059
1753
  background-color: #444ae1;
@@ -1061,128 +1755,194 @@
1061
1755
  .bg-\[var\(--skeleton-base\)\] {
1062
1756
  background-color: var(--skeleton-base);
1063
1757
  }
1064
- .bg-action-destructive {
1065
- background-color: #b91c1c;
1066
- }
1067
1758
  .bg-action-primary {
1068
- background-color: #444ae1;
1759
+ background-color: var(--color-action-primary);
1760
+ }
1761
+ .bg-action-primary-light {
1762
+ background-color: var(--color-action-primary-light);
1763
+ }
1764
+ .bg-action-primary\/5 {
1765
+ background-color: color-mix(in srgb, #444ae1 5%, transparent);
1766
+ @supports (color: color-mix(in lab, red, red)) {
1767
+ background-color: color-mix(in oklab, var(--color-action-primary) 5%, transparent);
1768
+ }
1069
1769
  }
1070
1770
  .bg-action-primary\/10 {
1071
- background-color: color-mix(in oklab, #444ae1 10%, transparent);
1771
+ background-color: color-mix(in srgb, #444ae1 10%, transparent);
1772
+ @supports (color: color-mix(in lab, red, red)) {
1773
+ background-color: color-mix(in oklab, var(--color-action-primary) 10%, transparent);
1774
+ }
1775
+ }
1776
+ .bg-action-secondary\/10 {
1777
+ background-color: color-mix(in srgb, #333333 10%, transparent);
1778
+ @supports (color: color-mix(in lab, red, red)) {
1779
+ background-color: color-mix(in oklab, var(--color-action-secondary) 10%, transparent);
1780
+ }
1781
+ }
1782
+ .bg-background-body {
1783
+ background-color: var(--color-background-body);
1072
1784
  }
1073
1785
  .bg-background-hover {
1074
- background-color: #f3f4f6;
1786
+ background-color: var(--color-background-hover);
1075
1787
  }
1076
1788
  .bg-background-input {
1077
- background-color: #ffffff;
1789
+ background-color: var(--color-background-input);
1078
1790
  }
1079
1791
  .bg-background-muted {
1080
- background-color: #f3f4f6;
1792
+ background-color: var(--color-background-muted);
1081
1793
  }
1082
1794
  .bg-background-muted\/30 {
1083
- background-color: color-mix(in oklab, #f3f4f6 30%, transparent);
1795
+ background-color: color-mix(in srgb, #f3f4f6 30%, transparent);
1796
+ @supports (color: color-mix(in lab, red, red)) {
1797
+ background-color: color-mix(in oklab, var(--color-background-muted) 30%, transparent);
1798
+ }
1084
1799
  }
1085
1800
  .bg-background-selected {
1086
- background-color: #d1d5db;
1801
+ background-color: var(--color-background-selected);
1087
1802
  }
1088
1803
  .bg-background-surface {
1089
- background-color: #ffffff;
1804
+ background-color: var(--color-background-surface);
1805
+ }
1806
+ .bg-background-surface\/80 {
1807
+ background-color: color-mix(in srgb, #ffffff 80%, transparent);
1808
+ @supports (color: color-mix(in lab, red, red)) {
1809
+ background-color: color-mix(in oklab, var(--color-background-surface) 80%, transparent);
1810
+ }
1090
1811
  }
1091
1812
  .bg-black\/50 {
1092
- background-color: color-mix(in srgb, #333333 50%, transparent);
1813
+ background-color: color-mix(in srgb, #000000 50%, transparent);
1093
1814
  @supports (color: color-mix(in lab, red, red)) {
1094
- background-color: color-mix(in oklab, var(--color-neutral-black) 50%, transparent);
1815
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1095
1816
  }
1096
1817
  }
1097
1818
  .bg-blue-50 {
1098
- background-color: oklch(0.97 0.014 254.604);
1819
+ background-color: var(--color-blue-50);
1099
1820
  }
1100
1821
  .bg-blue-100 {
1101
- background-color: oklch(0.932 0.032 255.585);
1822
+ background-color: var(--color-blue-100);
1102
1823
  }
1103
1824
  .bg-blue-500 {
1104
- background-color: oklch(0.623 0.214 259.815);
1825
+ background-color: var(--color-blue-500);
1105
1826
  }
1106
1827
  .bg-blue-600 {
1107
- background-color: oklch(0.546 0.245 262.881);
1828
+ background-color: var(--color-blue-600);
1829
+ }
1830
+ .bg-border-muted {
1831
+ background-color: var(--color-border-muted);
1108
1832
  }
1109
1833
  .bg-brand-light {
1110
- background-color: #f7f7ff;
1834
+ background-color: var(--color-brand-light);
1111
1835
  }
1112
1836
  .bg-brand-primary {
1113
- background-color: #444ae1;
1837
+ background-color: var(--color-brand-primary);
1114
1838
  }
1115
- .bg-device-charging-background {
1116
- background-color: #f3e8ff;
1839
+ .bg-current {
1840
+ background-color: currentcolor;
1117
1841
  }
1118
1842
  .bg-feedback-error-background {
1119
- background-color: #fee2e2;
1843
+ background-color: var(--color-feedback-error-background);
1844
+ }
1845
+ .bg-feedback-error-background\/50 {
1846
+ background-color: color-mix(in srgb, #fee2e2 50%, transparent);
1847
+ @supports (color: color-mix(in lab, red, red)) {
1848
+ background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
1849
+ }
1850
+ }
1851
+ .bg-feedback-error-text {
1852
+ background-color: var(--color-feedback-error-text);
1853
+ }
1854
+ .bg-feedback-info-background {
1855
+ background-color: var(--color-feedback-info-background);
1856
+ }
1857
+ .bg-feedback-info-text {
1858
+ background-color: var(--color-feedback-info-text);
1120
1859
  }
1121
1860
  .bg-feedback-success-background {
1122
- background-color: #d1fae5;
1861
+ background-color: var(--color-feedback-success-background);
1862
+ }
1863
+ .bg-feedback-success-text {
1864
+ background-color: var(--color-feedback-success-text);
1865
+ }
1866
+ .bg-feedback-warning-background {
1867
+ background-color: var(--color-feedback-warning-background);
1868
+ }
1869
+ .bg-feedback-warning-text {
1870
+ background-color: var(--color-feedback-warning-text);
1123
1871
  }
1124
1872
  .bg-gray-50 {
1125
- background-color: oklch(0.985 0.002 247.839);
1873
+ background-color: var(--color-gray-50);
1126
1874
  }
1127
1875
  .bg-gray-100 {
1128
- background-color: oklch(0.967 0.003 264.542);
1876
+ background-color: var(--color-gray-100);
1129
1877
  }
1130
1878
  .bg-gray-100\/60 {
1131
- background-color: color-mix(in oklab, oklch(0.967 0.003 264.542) 60%, transparent);
1879
+ background-color: color-mix(in srgb, #f3f4f6 60%, transparent);
1880
+ @supports (color: color-mix(in lab, red, red)) {
1881
+ background-color: color-mix(in oklab, var(--color-gray-100) 60%, transparent);
1882
+ }
1132
1883
  }
1133
1884
  .bg-gray-200 {
1134
- background-color: oklch(0.928 0.006 264.531);
1885
+ background-color: var(--color-gray-200);
1135
1886
  }
1136
1887
  .bg-gray-400 {
1137
- background-color: oklch(0.707 0.022 261.325);
1888
+ background-color: var(--color-gray-400);
1138
1889
  }
1139
1890
  .bg-gray-700 {
1140
- background-color: oklch(0.373 0.034 259.733);
1141
- }
1142
- .bg-gray-light {
1143
- background-color: #e5e7eb;
1891
+ background-color: var(--color-gray-700);
1144
1892
  }
1145
1893
  .bg-green-50 {
1146
- background-color: oklch(0.982 0.018 155.826);
1894
+ background-color: var(--color-green-50);
1895
+ }
1896
+ .bg-green-100 {
1897
+ background-color: var(--color-green-100);
1147
1898
  }
1148
1899
  .bg-green-500 {
1149
- background-color: oklch(0.723 0.219 149.579);
1900
+ background-color: var(--color-green-500);
1150
1901
  }
1151
1902
  .bg-neutral-black {
1152
- background-color: #333333;
1903
+ background-color: var(--color-neutral-black);
1153
1904
  }
1154
1905
  .bg-orange-50 {
1155
- background-color: oklch(0.98 0.016 73.684);
1906
+ background-color: var(--color-orange-50);
1156
1907
  }
1157
1908
  .bg-purple-50 {
1158
- background-color: oklch(0.977 0.014 308.299);
1909
+ background-color: var(--color-purple-50);
1159
1910
  }
1160
1911
  .bg-red-50 {
1161
- background-color: oklch(0.971 0.013 17.38);
1912
+ background-color: var(--color-red-50);
1913
+ }
1914
+ .bg-red-100 {
1915
+ background-color: var(--color-red-100);
1162
1916
  }
1163
1917
  .bg-red-600 {
1164
- background-color: oklch(0.577 0.245 27.325);
1918
+ background-color: var(--color-red-600);
1165
1919
  }
1166
1920
  .bg-slate-700 {
1167
- background-color: oklch(0.372 0.044 257.287);
1921
+ background-color: var(--color-slate-700);
1168
1922
  }
1169
1923
  .bg-text-body {
1170
- background-color: #333333;
1924
+ background-color: var(--color-text-body);
1925
+ }
1926
+ .bg-text-muted {
1927
+ background-color: var(--color-text-muted);
1171
1928
  }
1172
1929
  .bg-transparent {
1173
1930
  background-color: transparent;
1174
1931
  }
1175
1932
  .bg-white {
1176
- background-color: var(--color-neutral-white);
1933
+ background-color: var(--color-white);
1177
1934
  }
1178
1935
  .bg-white\/20 {
1179
1936
  background-color: color-mix(in srgb, #ffffff 20%, transparent);
1180
1937
  @supports (color: color-mix(in lab, red, red)) {
1181
- background-color: color-mix(in oklab, var(--color-neutral-white) 20%, transparent);
1938
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1182
1939
  }
1183
1940
  }
1184
1941
  .bg-yellow-50 {
1185
- background-color: oklch(0.987 0.026 102.212);
1942
+ background-color: var(--color-yellow-50);
1943
+ }
1944
+ .bg-yellow-100 {
1945
+ background-color: var(--color-yellow-100);
1186
1946
  }
1187
1947
  .bg-gradient-to-r {
1188
1948
  --tw-gradient-position: to right in oklab;
@@ -1204,86 +1964,103 @@
1204
1964
  .bg-clip-padding {
1205
1965
  background-clip: padding-box;
1206
1966
  }
1207
- .fill-\[\#333333\] {
1208
- fill: #333333;
1209
- }
1210
1967
  .fill-brand-primary {
1211
- fill: #444ae1;
1968
+ fill: var(--color-brand-primary);
1212
1969
  }
1213
1970
  .fill-neutral-black {
1214
- fill: #333333;
1971
+ fill: var(--color-neutral-black);
1215
1972
  }
1216
1973
  .fill-slate-700 {
1217
- fill: oklch(0.372 0.044 257.287);
1974
+ fill: var(--color-slate-700);
1218
1975
  }
1219
1976
  .fill-white {
1220
- fill: var(--color-neutral-white);
1977
+ fill: var(--color-white);
1221
1978
  }
1222
1979
  .stroke-black\/10 {
1223
- stroke: color-mix(in srgb, #333333 10%, transparent);
1980
+ stroke: color-mix(in srgb, #000000 10%, transparent);
1224
1981
  @supports (color: color-mix(in lab, red, red)) {
1225
- stroke: color-mix(in oklab, var(--color-neutral-black) 10%, transparent);
1982
+ stroke: color-mix(in oklab, var(--color-black) 10%, transparent);
1226
1983
  }
1227
1984
  }
1228
1985
  .stroke-gray-800 {
1229
- stroke: oklch(0.278 0.033 256.848);
1986
+ stroke: var(--color-gray-800);
1230
1987
  }
1231
1988
  .stroke-1 {
1232
1989
  stroke-width: 1;
1233
1990
  }
1991
+ .object-contain {
1992
+ -o-object-fit: contain;
1993
+ object-fit: contain;
1994
+ }
1995
+ .object-cover {
1996
+ -o-object-fit: cover;
1997
+ object-fit: cover;
1998
+ }
1234
1999
  .p-0 {
1235
- padding: calc(0.25rem * 0);
2000
+ padding: var(--spacing-0);
1236
2001
  }
1237
2002
  .p-0\.5 {
1238
- padding: calc(0.25rem * 0.5);
2003
+ padding: calc(var(--spacing) * 0.5);
1239
2004
  }
1240
2005
  .p-1 {
1241
- padding: calc(0.25rem * 1);
2006
+ padding: var(--spacing-1);
1242
2007
  }
1243
2008
  .p-2 {
1244
- padding: calc(0.25rem * 2);
2009
+ padding: var(--spacing-2);
1245
2010
  }
1246
2011
  .p-3 {
1247
- padding: calc(0.25rem * 3);
2012
+ padding: var(--spacing-3);
1248
2013
  }
1249
2014
  .p-4 {
1250
- padding: calc(0.25rem * 4);
2015
+ padding: var(--spacing-4);
1251
2016
  }
1252
2017
  .p-6 {
1253
- padding: calc(0.25rem * 6);
2018
+ padding: var(--spacing-6);
1254
2019
  }
1255
2020
  .p-8 {
1256
- padding: calc(0.25rem * 8);
2021
+ padding: var(--spacing-8);
1257
2022
  }
1258
2023
  .p-10 {
1259
- padding: calc(0.25rem * 10);
2024
+ padding: var(--spacing-10);
1260
2025
  }
1261
2026
  .p-\[1rem\] {
1262
2027
  padding: 1rem;
1263
2028
  }
2029
+ .\!px-1 {
2030
+ padding-inline: var(--spacing-1) !important;
2031
+ }
1264
2032
  .\!px-2 {
1265
- padding-inline: calc(0.25rem * 2) !important;
2033
+ padding-inline: var(--spacing-2) !important;
1266
2034
  }
1267
2035
  .px-0\.5 {
1268
- padding-inline: calc(0.25rem * 0.5);
2036
+ padding-inline: calc(var(--spacing) * 0.5);
1269
2037
  }
1270
2038
  .px-1 {
1271
- padding-inline: calc(0.25rem * 1);
2039
+ padding-inline: var(--spacing-1);
1272
2040
  }
1273
2041
  .px-1\.5 {
1274
- padding-inline: calc(0.25rem * 1.5);
2042
+ padding-inline: calc(var(--spacing) * 1.5);
1275
2043
  }
1276
2044
  .px-2 {
1277
- padding-inline: calc(0.25rem * 2);
2045
+ padding-inline: var(--spacing-2);
2046
+ }
2047
+ .px-2\.5 {
2048
+ padding-inline: calc(var(--spacing) * 2.5);
1278
2049
  }
1279
2050
  .px-3 {
1280
- padding-inline: calc(0.25rem * 3);
2051
+ padding-inline: var(--spacing-3);
2052
+ }
2053
+ .px-3\.5 {
2054
+ padding-inline: calc(var(--spacing) * 3.5);
1281
2055
  }
1282
2056
  .px-4 {
1283
- padding-inline: calc(0.25rem * 4);
2057
+ padding-inline: var(--spacing-4);
1284
2058
  }
1285
2059
  .px-5 {
1286
- padding-inline: calc(0.25rem * 5);
2060
+ padding-inline: var(--spacing-5);
2061
+ }
2062
+ .px-6 {
2063
+ padding-inline: var(--spacing-6);
1287
2064
  }
1288
2065
  .px-\[var\(--control-padding-lg\)\] {
1289
2066
  padding-inline: var(--control-padding-lg);
@@ -1301,76 +2078,88 @@
1301
2078
  padding-inline: 1px;
1302
2079
  }
1303
2080
  .py-0\.5 {
1304
- padding-block: calc(0.25rem * 0.5);
2081
+ padding-block: calc(var(--spacing) * 0.5);
1305
2082
  }
1306
2083
  .py-1 {
1307
- padding-block: calc(0.25rem * 1);
2084
+ padding-block: var(--spacing-1);
1308
2085
  }
1309
2086
  .py-1\.5 {
1310
- padding-block: calc(0.25rem * 1.5);
2087
+ padding-block: calc(var(--spacing) * 1.5);
1311
2088
  }
1312
2089
  .py-2 {
1313
- padding-block: calc(0.25rem * 2);
2090
+ padding-block: var(--spacing-2);
1314
2091
  }
1315
2092
  .py-2\.5 {
1316
- padding-block: calc(0.25rem * 2.5);
2093
+ padding-block: calc(var(--spacing) * 2.5);
1317
2094
  }
1318
2095
  .py-3 {
1319
- padding-block: calc(0.25rem * 3);
2096
+ padding-block: var(--spacing-3);
1320
2097
  }
1321
2098
  .py-3\.5 {
1322
- padding-block: calc(0.25rem * 3.5);
2099
+ padding-block: calc(var(--spacing) * 3.5);
1323
2100
  }
1324
2101
  .py-4 {
1325
- padding-block: calc(0.25rem * 4);
2102
+ padding-block: var(--spacing-4);
1326
2103
  }
1327
2104
  .py-6 {
1328
- padding-block: calc(0.25rem * 6);
2105
+ padding-block: var(--spacing-6);
2106
+ }
2107
+ .py-12 {
2108
+ padding-block: var(--spacing-12);
2109
+ }
2110
+ .pt-\[60px\] {
2111
+ padding-top: 60px;
1329
2112
  }
1330
2113
  .pr-0 {
1331
- padding-right: calc(0.25rem * 0);
2114
+ padding-right: var(--spacing-0);
1332
2115
  }
1333
2116
  .pr-1 {
1334
- padding-right: calc(0.25rem * 1);
2117
+ padding-right: var(--spacing-1);
1335
2118
  }
1336
2119
  .pr-3 {
1337
- padding-right: calc(0.25rem * 3);
2120
+ padding-right: var(--spacing-3);
2121
+ }
2122
+ .pr-6 {
2123
+ padding-right: var(--spacing-6);
1338
2124
  }
1339
2125
  .pr-8 {
1340
- padding-right: calc(0.25rem * 8);
2126
+ padding-right: var(--spacing-8);
1341
2127
  }
1342
2128
  .pr-9 {
1343
- padding-right: calc(0.25rem * 9);
2129
+ padding-right: var(--spacing-9);
1344
2130
  }
1345
2131
  .pb-1\.5 {
1346
- padding-bottom: calc(0.25rem * 1.5);
2132
+ padding-bottom: calc(var(--spacing) * 1.5);
1347
2133
  }
1348
2134
  .pb-2 {
1349
- padding-bottom: calc(0.25rem * 2);
2135
+ padding-bottom: var(--spacing-2);
1350
2136
  }
1351
2137
  .pb-4 {
1352
- padding-bottom: calc(0.25rem * 4);
2138
+ padding-bottom: var(--spacing-4);
1353
2139
  }
1354
2140
  .pl-0 {
1355
- padding-left: calc(0.25rem * 0);
2141
+ padding-left: var(--spacing-0);
1356
2142
  }
1357
2143
  .pl-3 {
1358
- padding-left: calc(0.25rem * 3);
2144
+ padding-left: var(--spacing-3);
2145
+ }
2146
+ .pl-5 {
2147
+ padding-left: var(--spacing-5);
1359
2148
  }
1360
2149
  .pl-7 {
1361
- padding-left: calc(0.25rem * 7);
2150
+ padding-left: var(--spacing-7);
1362
2151
  }
1363
2152
  .pl-8 {
1364
- padding-left: calc(0.25rem * 8);
2153
+ padding-left: var(--spacing-8);
1365
2154
  }
1366
2155
  .pl-9 {
1367
- padding-left: calc(0.25rem * 9);
2156
+ padding-left: var(--spacing-9);
1368
2157
  }
1369
2158
  .pl-10 {
1370
- padding-left: calc(0.25rem * 10);
2159
+ padding-left: var(--spacing-10);
1371
2160
  }
1372
2161
  .pl-12 {
1373
- padding-left: calc(0.25rem * 12);
2162
+ padding-left: var(--spacing-12);
1374
2163
  }
1375
2164
  .pl-\[var\(--control-padding-sm\)\] {
1376
2165
  padding-left: var(--control-padding-sm);
@@ -1393,40 +2182,43 @@
1393
2182
  .align-middle {
1394
2183
  vertical-align: middle;
1395
2184
  }
2185
+ .align-text-bottom {
2186
+ vertical-align: text-bottom;
2187
+ }
1396
2188
  .font-mono {
1397
- font-family: "Fira Code", monospace;
2189
+ font-family: var(--font-mono);
1398
2190
  }
1399
2191
  .text-2xl {
1400
- font-size: 1.5rem;
1401
- line-height: var(--tw-leading, calc(2 / 1.5));
2192
+ font-size: var(--text-2xl);
2193
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
1402
2194
  }
1403
2195
  .text-3xl {
1404
- font-size: 1.875rem;
1405
- line-height: var(--tw-leading, calc(2.25 / 1.875));
2196
+ font-size: var(--text-3xl);
2197
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
1406
2198
  }
1407
2199
  .text-4xl {
1408
- font-size: 2.25rem;
1409
- line-height: var(--tw-leading, calc(2.5 / 2.25));
2200
+ font-size: var(--text-4xl);
2201
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
1410
2202
  }
1411
2203
  .text-base {
1412
- font-size: 1rem;
1413
- line-height: var(--tw-leading, calc(1.5 / 1));
2204
+ font-size: var(--text-base);
2205
+ line-height: var(--tw-leading, var(--text-base--line-height));
1414
2206
  }
1415
2207
  .text-lg {
1416
- font-size: 1.125rem;
1417
- line-height: var(--tw-leading, calc(1.75 / 1.125));
2208
+ font-size: var(--text-lg);
2209
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1418
2210
  }
1419
2211
  .text-sm {
1420
- font-size: 0.875rem;
1421
- line-height: var(--tw-leading, calc(1.25 / 0.875));
2212
+ font-size: var(--text-sm);
2213
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1422
2214
  }
1423
2215
  .text-xl {
1424
- font-size: 1.25rem;
1425
- line-height: var(--tw-leading, calc(1.75 / 1.25));
2216
+ font-size: var(--text-xl);
2217
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1426
2218
  }
1427
2219
  .text-xs {
1428
- font-size: 0.75rem;
1429
- line-height: var(--tw-leading, calc(1 / 0.75));
2220
+ font-size: var(--text-xs);
2221
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1430
2222
  }
1431
2223
  .text-\[1\.125rem\] {
1432
2224
  font-size: 1.125rem;
@@ -1459,49 +2251,49 @@
1459
2251
  line-height: 1;
1460
2252
  }
1461
2253
  .leading-relaxed {
1462
- --tw-leading: 1.625;
1463
- line-height: 1.625;
2254
+ --tw-leading: var(--leading-relaxed);
2255
+ line-height: var(--leading-relaxed);
1464
2256
  }
1465
2257
  .font-\[500\] {
1466
2258
  --tw-font-weight: 500;
1467
2259
  font-weight: 500;
1468
2260
  }
1469
2261
  .font-bold {
1470
- --tw-font-weight: 700;
1471
- font-weight: 700;
2262
+ --tw-font-weight: var(--font-weight-bold);
2263
+ font-weight: var(--font-weight-bold);
1472
2264
  }
1473
2265
  .font-light {
1474
- --tw-font-weight: 300;
1475
- font-weight: 300;
2266
+ --tw-font-weight: var(--font-weight-light);
2267
+ font-weight: var(--font-weight-light);
1476
2268
  }
1477
2269
  .font-medium {
1478
- --tw-font-weight: 500;
1479
- font-weight: 500;
2270
+ --tw-font-weight: var(--font-weight-medium);
2271
+ font-weight: var(--font-weight-medium);
1480
2272
  }
1481
2273
  .font-normal {
1482
- --tw-font-weight: 400;
1483
- font-weight: 400;
2274
+ --tw-font-weight: var(--font-weight-normal);
2275
+ font-weight: var(--font-weight-normal);
1484
2276
  }
1485
2277
  .font-semibold {
1486
- --tw-font-weight: 600;
1487
- font-weight: 600;
2278
+ --tw-font-weight: var(--font-weight-semibold);
2279
+ font-weight: var(--font-weight-semibold);
1488
2280
  }
1489
2281
  .tracking-tight {
1490
- --tw-tracking: -0.025em;
1491
- letter-spacing: -0.025em;
2282
+ --tw-tracking: var(--tracking-tight);
2283
+ letter-spacing: var(--tracking-tight);
1492
2284
  }
1493
2285
  .tracking-wider {
1494
- --tw-tracking: 0.05em;
1495
- letter-spacing: 0.05em;
2286
+ --tw-tracking: var(--tracking-wider);
2287
+ letter-spacing: var(--tracking-wider);
1496
2288
  }
1497
2289
  .whitespace-nowrap {
1498
2290
  white-space: nowrap;
1499
2291
  }
1500
2292
  .\!text-action-primary {
1501
- color: #444ae1 !important;
2293
+ color: var(--color-action-primary) !important;
1502
2294
  }
1503
2295
  .\!text-text-caption {
1504
- color: #6b7280 !important;
2296
+ color: var(--color-text-caption) !important;
1505
2297
  }
1506
2298
  .text-\[\#111827\] {
1507
2299
  color: #111827;
@@ -1512,116 +2304,140 @@
1512
2304
  .text-\[\#ffffff\] {
1513
2305
  color: #ffffff;
1514
2306
  }
1515
- .text-action-destructive {
1516
- color: #b91c1c;
1517
- }
1518
2307
  .text-action-primary {
1519
- color: #444ae1;
2308
+ color: var(--color-action-primary);
2309
+ }
2310
+ .text-action-secondary {
2311
+ color: var(--color-action-secondary);
1520
2312
  }
1521
2313
  .text-blue-500 {
1522
- color: oklch(0.623 0.214 259.815);
2314
+ color: var(--color-blue-500);
1523
2315
  }
1524
2316
  .text-blue-600 {
1525
- color: oklch(0.546 0.245 262.881);
2317
+ color: var(--color-blue-600);
1526
2318
  }
1527
2319
  .text-blue-800 {
1528
- color: oklch(0.424 0.199 265.638);
2320
+ color: var(--color-blue-800);
2321
+ }
2322
+ .text-blue-900 {
2323
+ color: var(--color-blue-900);
1529
2324
  }
1530
2325
  .text-brand-dark {
1531
- color: #363ccb;
2326
+ color: var(--color-brand-dark);
1532
2327
  }
1533
2328
  .text-brand-light {
1534
- color: #f7f7ff;
2329
+ color: var(--color-brand-light);
1535
2330
  }
1536
2331
  .text-brand-primary {
1537
- color: #444ae1;
2332
+ color: var(--color-brand-primary);
1538
2333
  }
1539
2334
  .text-current {
1540
2335
  color: currentcolor;
1541
2336
  }
1542
2337
  .text-feedback-error-text {
1543
- color: #b91c1c;
2338
+ color: var(--color-feedback-error-text);
2339
+ }
2340
+ .text-feedback-info-text {
2341
+ color: var(--color-feedback-info-text);
1544
2342
  }
1545
2343
  .text-feedback-success-text {
1546
- color: #065f46;
2344
+ color: var(--color-feedback-success-text);
2345
+ }
2346
+ .text-feedback-warning-text {
2347
+ color: var(--color-feedback-warning-text);
1547
2348
  }
1548
2349
  .text-gray-200 {
1549
- color: oklch(0.928 0.006 264.531);
2350
+ color: var(--color-gray-200);
1550
2351
  }
1551
2352
  .text-gray-300 {
1552
- color: oklch(0.872 0.01 258.338);
2353
+ color: var(--color-gray-300);
2354
+ }
2355
+ .text-gray-400 {
2356
+ color: var(--color-gray-400);
2357
+ }
2358
+ .text-gray-500 {
2359
+ color: var(--color-gray-500);
1553
2360
  }
1554
2361
  .text-gray-600 {
1555
- color: oklch(0.446 0.03 256.802);
2362
+ color: var(--color-gray-600);
2363
+ }
2364
+ .text-gray-700 {
2365
+ color: var(--color-gray-700);
1556
2366
  }
1557
2367
  .text-gray-800 {
1558
- color: oklch(0.278 0.033 256.848);
2368
+ color: var(--color-gray-800);
2369
+ }
2370
+ .text-gray-900 {
2371
+ color: var(--color-gray-900);
1559
2372
  }
1560
2373
  .text-green-600 {
1561
- color: oklch(0.627 0.194 149.214);
2374
+ color: var(--color-green-600);
1562
2375
  }
1563
2376
  .text-green-800 {
1564
- color: oklch(0.448 0.119 151.328);
2377
+ color: var(--color-green-800);
1565
2378
  }
1566
2379
  .text-inherit {
1567
2380
  color: inherit;
1568
2381
  }
1569
2382
  .text-neutral-white {
1570
- color: #ffffff;
2383
+ color: var(--color-neutral-white);
1571
2384
  }
1572
2385
  .text-orange-600 {
1573
- color: oklch(0.646 0.222 41.116);
2386
+ color: var(--color-orange-600);
1574
2387
  }
1575
2388
  .text-orange-800 {
1576
- color: oklch(0.47 0.157 37.304);
2389
+ color: var(--color-orange-800);
1577
2390
  }
1578
2391
  .text-purple-600 {
1579
- color: oklch(0.558 0.288 302.321);
2392
+ color: var(--color-purple-600);
1580
2393
  }
1581
2394
  .text-red-500 {
1582
- color: oklch(0.637 0.237 25.331);
2395
+ color: var(--color-red-500);
1583
2396
  }
1584
2397
  .text-red-600 {
1585
- color: oklch(0.577 0.245 27.325);
2398
+ color: var(--color-red-600);
1586
2399
  }
1587
2400
  .text-red-800 {
1588
- color: oklch(0.444 0.177 26.899);
2401
+ color: var(--color-red-800);
1589
2402
  }
1590
2403
  .text-slate-300 {
1591
- color: oklch(0.869 0.022 252.894);
2404
+ color: var(--color-slate-300);
1592
2405
  }
1593
2406
  .text-text-body {
1594
- color: #333333;
2407
+ color: var(--color-text-body);
1595
2408
  }
1596
2409
  .text-text-caption {
1597
- color: #6b7280;
2410
+ color: var(--color-text-caption);
1598
2411
  }
1599
2412
  .text-text-disabled {
1600
- color: #9ca3af;
2413
+ color: var(--color-text-disabled);
1601
2414
  }
1602
2415
  .text-text-heading {
1603
- color: #111827;
2416
+ color: var(--color-text-heading);
1604
2417
  }
1605
2418
  .text-text-link-default {
1606
- color: #444ae1;
2419
+ color: var(--color-text-link-default);
1607
2420
  }
1608
2421
  .text-text-muted {
1609
- color: #4b5563;
2422
+ color: var(--color-text-muted);
1610
2423
  }
1611
2424
  .text-text-onPrimary {
1612
- color: #ffffff;
2425
+ color: var(--color-text-onPrimary);
1613
2426
  }
1614
2427
  .text-white {
1615
- color: var(--color-neutral-white);
2428
+ color: var(--color-white);
1616
2429
  }
1617
2430
  .text-yellow-500 {
1618
- color: oklch(0.795 0.184 86.047);
2431
+ color: var(--color-yellow-500);
2432
+ }
2433
+ .text-yellow-600 {
2434
+ color: var(--color-yellow-600);
1619
2435
  }
1620
2436
  .text-yellow-800 {
1621
- color: oklch(0.476 0.114 61.907);
2437
+ color: var(--color-yellow-800);
1622
2438
  }
1623
2439
  .text-zinc-900 {
1624
- color: oklch(0.21 0.006 285.885);
2440
+ color: var(--color-zinc-900);
1625
2441
  }
1626
2442
  .capitalize {
1627
2443
  text-transform: capitalize;
@@ -1640,6 +2456,15 @@
1640
2456
  --tw-numeric-spacing: tabular-nums;
1641
2457
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1642
2458
  }
2459
+ .underline {
2460
+ text-decoration-line: underline;
2461
+ }
2462
+ .decoration-text-link-default\/30 {
2463
+ text-decoration-color: color-mix(in srgb, #444ae1 30%, transparent);
2464
+ @supports (color: color-mix(in lab, red, red)) {
2465
+ text-decoration-color: color-mix(in oklab, var(--color-text-link-default) 30%, transparent);
2466
+ }
2467
+ }
1643
2468
  .opacity-0 {
1644
2469
  opacity: 0%;
1645
2470
  }
@@ -1666,7 +2491,7 @@
1666
2491
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1667
2492
  }
1668
2493
  .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
1669
- --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, oklch(0.446 0.03 256.802));
2494
+ --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #4b5563);
1670
2495
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1671
2496
  }
1672
2497
  .shadow-inner {
@@ -1701,12 +2526,25 @@
1701
2526
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1702
2527
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1703
2528
  }
2529
+ .ring-2 {
2530
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2531
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2532
+ }
2533
+ .ring-background-surface {
2534
+ --tw-ring-color: var(--color-background-surface);
2535
+ }
1704
2536
  .ring-black\/5 {
1705
- --tw-ring-color: color-mix(in srgb, #333333 5%, transparent);
2537
+ --tw-ring-color: color-mix(in srgb, #000000 5%, transparent);
1706
2538
  @supports (color: color-mix(in lab, red, red)) {
1707
- --tw-ring-color: color-mix(in oklab, var(--color-neutral-black) 5%, transparent);
2539
+ --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1708
2540
  }
1709
2541
  }
2542
+ .ring-border-muted {
2543
+ --tw-ring-color: var(--color-border-muted);
2544
+ }
2545
+ .ring-gray-200 {
2546
+ --tw-ring-color: var(--color-gray-200);
2547
+ }
1710
2548
  .ring-offset-2 {
1711
2549
  --tw-ring-offset-width: 2px;
1712
2550
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1747,10 +2585,10 @@
1747
2585
  outline-color: var(--control-focus-ring-color-error);
1748
2586
  }
1749
2587
  .outline-border-input {
1750
- outline-color: #d1d5db;
2588
+ outline-color: var(--color-border-input);
1751
2589
  }
1752
2590
  .outline-white {
1753
- outline-color: var(--color-neutral-white);
2591
+ outline-color: var(--color-white);
1754
2592
  }
1755
2593
  .blur {
1756
2594
  --tw-blur: blur(8px);
@@ -1758,7 +2596,7 @@
1758
2596
  }
1759
2597
  .drop-shadow-lg {
1760
2598
  --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
1761
- --tw-drop-shadow: drop-shadow(0 4px 4px rgb(0 0 0 / 0.15));
2599
+ --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
1762
2600
  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,);
1763
2601
  }
1764
2602
  .grayscale {
@@ -1769,12 +2607,12 @@
1769
2607
  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,);
1770
2608
  }
1771
2609
  .backdrop-blur-md {
1772
- --tw-backdrop-blur: blur(12px);
2610
+ --tw-backdrop-blur: blur(var(--blur-md));
1773
2611
  -webkit-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,);
1774
2612
  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,);
1775
2613
  }
1776
2614
  .backdrop-blur-sm {
1777
- --tw-backdrop-blur: blur(8px);
2615
+ --tw-backdrop-blur: blur(var(--blur-sm));
1778
2616
  -webkit-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,);
1779
2617
  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,);
1780
2618
  }
@@ -1793,6 +2631,11 @@
1793
2631
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1794
2632
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1795
2633
  }
2634
+ .transition-opacity {
2635
+ transition-property: opacity;
2636
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2637
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2638
+ }
1796
2639
  .transition-transform {
1797
2640
  transition-property: transform, translate, scale, rotate;
1798
2641
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1815,16 +2658,16 @@
1815
2658
  transition-duration: 1000ms;
1816
2659
  }
1817
2660
  .ease-in {
1818
- --tw-ease: cubic-bezier(0.4, 0, 1, 1);
1819
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2661
+ --tw-ease: var(--ease-in);
2662
+ transition-timing-function: var(--ease-in);
1820
2663
  }
1821
2664
  .ease-in-out {
1822
- --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
1823
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2665
+ --tw-ease: var(--ease-in-out);
2666
+ transition-timing-function: var(--ease-in-out);
1824
2667
  }
1825
2668
  .ease-out {
1826
- --tw-ease: cubic-bezier(0, 0, 0.2, 1);
1827
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2669
+ --tw-ease: var(--ease-out);
2670
+ transition-timing-function: var(--ease-out);
1828
2671
  }
1829
2672
  .will-change-transform {
1830
2673
  will-change: transform;
@@ -1847,9 +2690,12 @@
1847
2690
  .\[--tw-enter-translate-x\:calc\(-16rem-100\%\)\] {
1848
2691
  --tw-enter-translate-x: calc(-16rem - 100%);
1849
2692
  }
2693
+ .ring-inset {
2694
+ --tw-ring-inset: inset;
2695
+ }
1850
2696
  .group-invalid\:bg-red-600 {
1851
2697
  &:is(:where(.group):invalid *) {
1852
- background-color: oklch(0.577 0.245 27.325);
2698
+ background-color: var(--color-red-600);
1853
2699
  }
1854
2700
  }
1855
2701
  .group-invalid\:outline-2 {
@@ -1860,20 +2706,27 @@
1860
2706
  }
1861
2707
  .group-invalid\:outline-feedback-error-border {
1862
2708
  &:is(:where(.group):invalid *) {
1863
- outline-color: #ef4444;
2709
+ outline-color: var(--color-feedback-error-border);
2710
+ }
2711
+ }
2712
+ .group-hover\:bg-background-hover {
2713
+ &:is(:where(.group):hover *) {
2714
+ @media (hover: hover) {
2715
+ background-color: var(--color-background-hover);
2716
+ }
1864
2717
  }
1865
2718
  }
1866
2719
  .group-hover\:bg-gray-200 {
1867
2720
  &:is(:where(.group):hover *) {
1868
2721
  @media (hover: hover) {
1869
- background-color: oklch(0.928 0.006 264.531);
2722
+ background-color: var(--color-gray-200);
1870
2723
  }
1871
2724
  }
1872
2725
  }
1873
2726
  .group-hover\:bg-gray-300 {
1874
2727
  &:is(:where(.group):hover *) {
1875
2728
  @media (hover: hover) {
1876
- background-color: oklch(0.872 0.01 258.338);
2729
+ background-color: var(--color-gray-300);
1877
2730
  }
1878
2731
  }
1879
2732
  }
@@ -1881,27 +2734,53 @@
1881
2734
  &:is(:where(.group):invalid *) {
1882
2735
  &:is(:where(.group):hover *) {
1883
2736
  @media (hover: hover) {
1884
- background-color: oklch(0.885 0.062 18.334);
2737
+ background-color: var(--color-red-200);
1885
2738
  }
1886
2739
  }
1887
2740
  }
1888
2741
  }
1889
2742
  .group-disabled\:text-gray-200 {
1890
2743
  &:is(:where(.group):disabled *) {
1891
- color: oklch(0.928 0.006 264.531);
2744
+ color: var(--color-gray-200);
1892
2745
  }
1893
2746
  }
1894
2747
  .group-disabled\:text-text-disabled {
1895
2748
  &:is(:where(.group):disabled *) {
1896
- color: #9ca3af;
2749
+ color: var(--color-text-disabled);
2750
+ }
2751
+ }
2752
+ .peer-checked\/category\:block {
2753
+ &:is(:where(.peer\/category):checked ~ *) {
2754
+ display: block;
2755
+ }
2756
+ }
2757
+ .peer-checked\/category\:rotate-180 {
2758
+ &:is(:where(.peer\/category):checked ~ *) {
2759
+ rotate: 180deg;
2760
+ }
2761
+ }
2762
+ .peer-checked\/mobile\:pointer-events-auto {
2763
+ &:is(:where(.peer\/mobile):checked ~ *) {
2764
+ pointer-events: auto;
2765
+ }
2766
+ }
2767
+ .peer-checked\/mobile\:translate-x-0 {
2768
+ &:is(:where(.peer\/mobile):checked ~ *) {
2769
+ --tw-translate-x: var(--spacing-0);
2770
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2771
+ }
2772
+ }
2773
+ .peer-checked\/mobile\:opacity-100 {
2774
+ &:is(:where(.peer\/mobile):checked ~ *) {
2775
+ opacity: 100%;
1897
2776
  }
1898
2777
  }
1899
2778
  .placeholder\:text-text-placeholder {
1900
2779
  &::-moz-placeholder {
1901
- color: #9ca3af;
2780
+ color: var(--color-text-placeholder);
1902
2781
  }
1903
2782
  &::placeholder {
1904
- color: #9ca3af;
2783
+ color: var(--color-text-placeholder);
1905
2784
  }
1906
2785
  }
1907
2786
  .before\:absolute {
@@ -1913,7 +2792,7 @@
1913
2792
  .before\:inset-0 {
1914
2793
  &::before {
1915
2794
  content: var(--tw-content);
1916
- inset: calc(0.25rem * 0);
2795
+ inset: var(--spacing-0);
1917
2796
  }
1918
2797
  }
1919
2798
  .before\:bg-gradient-to-r {
@@ -1954,19 +2833,19 @@
1954
2833
  .after\:right-0 {
1955
2834
  &::after {
1956
2835
  content: var(--tw-content);
1957
- right: calc(0.25rem * 0);
2836
+ right: var(--spacing-0);
1958
2837
  }
1959
2838
  }
1960
2839
  .after\:bottom-0 {
1961
2840
  &::after {
1962
2841
  content: var(--tw-content);
1963
- bottom: calc(0.25rem * 0);
2842
+ bottom: var(--spacing-0);
1964
2843
  }
1965
2844
  }
1966
2845
  .after\:left-0 {
1967
2846
  &::after {
1968
2847
  content: var(--tw-content);
1969
- left: calc(0.25rem * 0);
2848
+ left: var(--spacing-0);
1970
2849
  }
1971
2850
  }
1972
2851
  .after\:block {
@@ -1990,7 +2869,7 @@
1990
2869
  .after\:bg-border-default {
1991
2870
  &::after {
1992
2871
  content: var(--tw-content);
1993
- background-color: #e5e7eb;
2872
+ background-color: var(--color-border-default);
1994
2873
  }
1995
2874
  }
1996
2875
  .after\:content-\[\'\'\] {
@@ -2005,24 +2884,29 @@
2005
2884
  margin-top: calc(5px * -1);
2006
2885
  }
2007
2886
  }
2887
+ .first\:ml-0 {
2888
+ &:first-child {
2889
+ margin-left: var(--spacing-0);
2890
+ }
2891
+ }
2008
2892
  .visited\:text-action-primary {
2009
2893
  &:visited {
2010
- color: #444ae1;
2894
+ color: var(--color-action-primary);
2011
2895
  }
2012
2896
  }
2013
2897
  .visited\:text-text-link-default {
2014
2898
  &:visited {
2015
- color: #444ae1;
2899
+ color: var(--color-text-link-default);
2016
2900
  }
2017
2901
  }
2018
2902
  .visited\:text-text-muted {
2019
2903
  &:visited {
2020
- color: #4b5563;
2904
+ color: var(--color-text-muted);
2021
2905
  }
2022
2906
  }
2023
2907
  .invalid\:bg-red-600 {
2024
2908
  &:invalid {
2025
- background-color: oklch(0.577 0.245 27.325);
2909
+ background-color: var(--color-red-600);
2026
2910
  }
2027
2911
  }
2028
2912
  .invalid\:outline-2 {
@@ -2033,7 +2917,17 @@
2033
2917
  }
2034
2918
  .invalid\:outline-feedback-error-border {
2035
2919
  &:invalid {
2036
- outline-color: #ef4444;
2920
+ outline-color: var(--color-feedback-error-border);
2921
+ }
2922
+ }
2923
+ .hover\:scale-110 {
2924
+ &:hover {
2925
+ @media (hover: hover) {
2926
+ --tw-scale-x: 110%;
2927
+ --tw-scale-y: 110%;
2928
+ --tw-scale-z: 110%;
2929
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2930
+ }
2037
2931
  }
2038
2932
  }
2039
2933
  .hover\:cursor-pointer {
@@ -2046,51 +2940,54 @@
2046
2940
  .hover\:border-action-primary-hover {
2047
2941
  &:hover {
2048
2942
  @media (hover: hover) {
2049
- border-color: #383ccb;
2943
+ border-color: var(--color-action-primary-hover);
2050
2944
  }
2051
2945
  }
2052
2946
  }
2053
- .hover\:border-border-focus {
2947
+ .hover\:border-border-default {
2054
2948
  &:hover {
2055
2949
  @media (hover: hover) {
2056
- border-color: #333333;
2950
+ border-color: var(--color-border-default);
2057
2951
  }
2058
2952
  }
2059
2953
  }
2060
- .hover\:bg-action-destructive\/5 {
2954
+ .hover\:border-border-focus {
2061
2955
  &:hover {
2062
2956
  @media (hover: hover) {
2063
- background-color: color-mix(in oklab, #b91c1c 5%, transparent);
2957
+ border-color: var(--color-border-focus);
2064
2958
  }
2065
2959
  }
2066
2960
  }
2067
2961
  .hover\:bg-action-primary-hover {
2068
2962
  &:hover {
2069
2963
  @media (hover: hover) {
2070
- background-color: #383ccb;
2964
+ background-color: var(--color-action-primary-hover);
2071
2965
  }
2072
2966
  }
2073
2967
  }
2074
2968
  .hover\:bg-action-primary\/15 {
2075
2969
  &:hover {
2076
2970
  @media (hover: hover) {
2077
- background-color: color-mix(in oklab, #444ae1 15%, transparent);
2971
+ background-color: color-mix(in srgb, #444ae1 15%, transparent);
2972
+ @supports (color: color-mix(in lab, red, red)) {
2973
+ background-color: color-mix(in oklab, var(--color-action-primary) 15%, transparent);
2974
+ }
2078
2975
  }
2079
2976
  }
2080
2977
  }
2081
2978
  .hover\:bg-background-hover {
2082
2979
  &:hover {
2083
2980
  @media (hover: hover) {
2084
- background-color: #f3f4f6;
2981
+ background-color: var(--color-background-hover);
2085
2982
  }
2086
2983
  }
2087
2984
  }
2088
2985
  .hover\:bg-black\/10 {
2089
2986
  &:hover {
2090
2987
  @media (hover: hover) {
2091
- background-color: color-mix(in srgb, #333333 10%, transparent);
2988
+ background-color: color-mix(in srgb, #000000 10%, transparent);
2092
2989
  @supports (color: color-mix(in lab, red, red)) {
2093
- background-color: color-mix(in oklab, var(--color-neutral-black) 10%, transparent);
2990
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
2094
2991
  }
2095
2992
  }
2096
2993
  }
@@ -2098,84 +2995,122 @@
2098
2995
  .hover\:bg-blue-200 {
2099
2996
  &:hover {
2100
2997
  @media (hover: hover) {
2101
- background-color: oklch(0.882 0.059 254.128);
2998
+ background-color: var(--color-blue-200);
2102
2999
  }
2103
3000
  }
2104
3001
  }
2105
3002
  .hover\:bg-blue-600 {
2106
3003
  &:hover {
2107
3004
  @media (hover: hover) {
2108
- background-color: oklch(0.546 0.245 262.881);
3005
+ background-color: var(--color-blue-600);
3006
+ }
3007
+ }
3008
+ }
3009
+ .hover\:bg-feedback-error-background {
3010
+ &:hover {
3011
+ @media (hover: hover) {
3012
+ background-color: var(--color-feedback-error-background);
2109
3013
  }
2110
3014
  }
2111
3015
  }
2112
3016
  .hover\:bg-gray-100 {
2113
3017
  &:hover {
2114
3018
  @media (hover: hover) {
2115
- background-color: oklch(0.967 0.003 264.542);
3019
+ background-color: var(--color-gray-100);
2116
3020
  }
2117
3021
  }
2118
3022
  }
2119
3023
  .hover\:bg-red-700 {
2120
3024
  &:hover {
2121
3025
  @media (hover: hover) {
2122
- background-color: oklch(0.505 0.213 27.518);
3026
+ background-color: var(--color-red-700);
2123
3027
  }
2124
3028
  }
2125
3029
  }
2126
3030
  .hover\:bg-text-body\/5 {
2127
3031
  &:hover {
2128
3032
  @media (hover: hover) {
2129
- background-color: color-mix(in oklab, #333333 5%, transparent);
3033
+ background-color: color-mix(in srgb, #333333 5%, transparent);
3034
+ @supports (color: color-mix(in lab, red, red)) {
3035
+ background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
3036
+ }
2130
3037
  }
2131
3038
  }
2132
3039
  }
2133
3040
  .hover\:bg-text-body\/\[0\.05\] {
2134
3041
  &:hover {
2135
3042
  @media (hover: hover) {
2136
- background-color: color-mix(in oklab, #333333 5%, transparent);
3043
+ background-color: color-mix(in srgb, #333333 5%, transparent);
3044
+ @supports (color: color-mix(in lab, red, red)) {
3045
+ background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
3046
+ }
3047
+ }
3048
+ }
3049
+ }
3050
+ .hover\:bg-transparent {
3051
+ &:hover {
3052
+ @media (hover: hover) {
3053
+ background-color: transparent;
3054
+ }
3055
+ }
3056
+ }
3057
+ .hover\:font-semibold {
3058
+ &:hover {
3059
+ @media (hover: hover) {
3060
+ --tw-font-weight: var(--font-weight-semibold);
3061
+ font-weight: var(--font-weight-semibold);
2137
3062
  }
2138
3063
  }
2139
3064
  }
2140
3065
  .hover\:text-action-primary {
2141
3066
  &:hover {
2142
3067
  @media (hover: hover) {
2143
- color: #444ae1;
3068
+ color: var(--color-action-primary);
2144
3069
  }
2145
3070
  }
2146
3071
  }
2147
3072
  .hover\:text-action-primary-hover {
2148
3073
  &:hover {
2149
3074
  @media (hover: hover) {
2150
- color: #383ccb;
3075
+ color: var(--color-action-primary-hover);
2151
3076
  }
2152
3077
  }
2153
3078
  }
2154
3079
  .hover\:text-action-primary\/90 {
2155
3080
  &:hover {
2156
3081
  @media (hover: hover) {
2157
- color: color-mix(in oklab, #444ae1 90%, transparent);
3082
+ color: color-mix(in srgb, #444ae1 90%, transparent);
3083
+ @supports (color: color-mix(in lab, red, red)) {
3084
+ color: color-mix(in oklab, var(--color-action-primary) 90%, transparent);
3085
+ }
2158
3086
  }
2159
3087
  }
2160
3088
  }
2161
3089
  .hover\:text-text-body {
2162
3090
  &:hover {
2163
3091
  @media (hover: hover) {
2164
- color: #333333;
3092
+ color: var(--color-text-body);
3093
+ }
3094
+ }
3095
+ }
3096
+ .hover\:text-text-heading {
3097
+ &:hover {
3098
+ @media (hover: hover) {
3099
+ color: var(--color-text-heading);
2165
3100
  }
2166
3101
  }
2167
3102
  }
2168
3103
  .hover\:text-text-link-hover {
2169
3104
  &:hover {
2170
3105
  @media (hover: hover) {
2171
- color: #383ccb;
3106
+ color: var(--color-text-link-hover);
2172
3107
  }
2173
3108
  }
2174
3109
  }
2175
3110
  .hover\:text-text-muted {
2176
3111
  &:hover {
2177
3112
  @media (hover: hover) {
2178
- color: #4b5563;
3113
+ color: var(--color-text-muted);
2179
3114
  }
2180
3115
  }
2181
3116
  }
@@ -2186,6 +3121,13 @@
2186
3121
  }
2187
3122
  }
2188
3123
  }
3124
+ .hover\:decoration-text-link-hover {
3125
+ &:hover {
3126
+ @media (hover: hover) {
3127
+ text-decoration-color: var(--color-text-link-hover);
3128
+ }
3129
+ }
3130
+ }
2189
3131
  .hover\:decoration-1 {
2190
3132
  &:hover {
2191
3133
  @media (hover: hover) {
@@ -2207,6 +3149,13 @@
2207
3149
  }
2208
3150
  }
2209
3151
  }
3152
+ .hover\:opacity-80 {
3153
+ &:hover {
3154
+ @media (hover: hover) {
3155
+ opacity: 80%;
3156
+ }
3157
+ }
3158
+ }
2210
3159
  .hover\:opacity-100 {
2211
3160
  &:hover {
2212
3161
  @media (hover: hover) {
@@ -2230,6 +3179,43 @@
2230
3179
  }
2231
3180
  }
2232
3181
  }
3182
+ .focus\:not-sr-only {
3183
+ &:focus {
3184
+ position: static;
3185
+ width: auto;
3186
+ height: auto;
3187
+ padding: 0;
3188
+ margin: 0;
3189
+ overflow: visible;
3190
+ clip: auto;
3191
+ white-space: normal;
3192
+ }
3193
+ }
3194
+ .focus\:absolute {
3195
+ &:focus {
3196
+ position: absolute;
3197
+ }
3198
+ }
3199
+ .focus\:top-4 {
3200
+ &:focus {
3201
+ top: var(--spacing-4);
3202
+ }
3203
+ }
3204
+ .focus\:left-4 {
3205
+ &:focus {
3206
+ left: var(--spacing-4);
3207
+ }
3208
+ }
3209
+ .focus\:bg-background-hover {
3210
+ &:focus {
3211
+ background-color: var(--color-background-hover);
3212
+ }
3213
+ }
3214
+ .focus\:bg-feedback-error-background {
3215
+ &:focus {
3216
+ background-color: var(--color-feedback-error-background);
3217
+ }
3218
+ }
2233
3219
  .focus\:ring-2 {
2234
3220
  &:focus {
2235
3221
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2238,7 +3224,13 @@
2238
3224
  }
2239
3225
  .focus\:ring-border-focus {
2240
3226
  &:focus {
2241
- --tw-ring-color: #333333;
3227
+ --tw-ring-color: var(--color-border-focus);
3228
+ }
3229
+ }
3230
+ .focus\:ring-offset-2 {
3231
+ &:focus {
3232
+ --tw-ring-offset-width: 2px;
3233
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2242
3234
  }
2243
3235
  }
2244
3236
  .focus\:outline-2 {
@@ -2254,7 +3246,7 @@
2254
3246
  }
2255
3247
  .focus\:outline-border-focus {
2256
3248
  &:focus {
2257
- outline-color: #333333;
3249
+ outline-color: var(--color-border-focus);
2258
3250
  }
2259
3251
  }
2260
3252
  .focus\:outline-none {
@@ -2282,7 +3274,7 @@
2282
3274
  }
2283
3275
  .focus-visible\:outline-border-focus {
2284
3276
  &:focus-visible {
2285
- outline-color: #333333;
3277
+ outline-color: var(--color-border-focus);
2286
3278
  }
2287
3279
  }
2288
3280
  .disabled\:cursor-not-allowed {
@@ -2292,12 +3284,12 @@
2292
3284
  }
2293
3285
  .disabled\:text-gray-300 {
2294
3286
  &:disabled {
2295
- color: oklch(0.872 0.01 258.338);
3287
+ color: var(--color-gray-300);
2296
3288
  }
2297
3289
  }
2298
3290
  .disabled\:text-text-muted {
2299
3291
  &:disabled {
2300
- color: #4b5563;
3292
+ color: var(--color-text-muted);
2301
3293
  }
2302
3294
  }
2303
3295
  .disabled\:opacity-50 {
@@ -2307,7 +3299,7 @@
2307
3299
  }
2308
3300
  .data-\[focused\]\:bg-background-hover {
2309
3301
  &[data-focused] {
2310
- background-color: #f3f4f6;
3302
+ background-color: var(--color-background-hover);
2311
3303
  }
2312
3304
  }
2313
3305
  .data-\[focused\]\:opacity-100 {
@@ -2333,18 +3325,18 @@
2333
3325
  }
2334
3326
  .data-\[placeholder\]\:text-text-placeholder {
2335
3327
  &[data-placeholder] {
2336
- color: #9ca3af;
3328
+ color: var(--color-text-placeholder);
2337
3329
  }
2338
3330
  }
2339
3331
  .data-\[selected\]\:bg-background-selected {
2340
3332
  &[data-selected] {
2341
- background-color: #d1d5db;
3333
+ background-color: var(--color-background-selected);
2342
3334
  }
2343
3335
  }
2344
3336
  .data-\[selected\]\:font-medium {
2345
3337
  &[data-selected] {
2346
- --tw-font-weight: 500;
2347
- font-weight: 500;
3338
+ --tw-font-weight: var(--font-weight-medium);
3339
+ font-weight: var(--font-weight-medium);
2348
3340
  }
2349
3341
  }
2350
3342
  .data-\[selected\]\:opacity-100 {
@@ -2354,7 +3346,47 @@
2354
3346
  }
2355
3347
  .supports-\[-moz-appearance\:none\]\:bg-gray-100 {
2356
3348
  @supports (-moz-appearance:none) {
2357
- background-color: oklch(0.967 0.003 264.542);
3349
+ background-color: var(--color-gray-100);
3350
+ }
3351
+ }
3352
+ .sm\:grid {
3353
+ @media (width >= 40rem) {
3354
+ display: grid;
3355
+ }
3356
+ }
3357
+ .sm\:hidden {
3358
+ @media (width >= 40rem) {
3359
+ display: none;
3360
+ }
3361
+ }
3362
+ .md\:relative {
3363
+ @media (width >= 48rem) {
3364
+ position: relative;
3365
+ }
3366
+ }
3367
+ .md\:block {
3368
+ @media (width >= 48rem) {
3369
+ display: block;
3370
+ }
3371
+ }
3372
+ .md\:flex {
3373
+ @media (width >= 48rem) {
3374
+ display: flex;
3375
+ }
3376
+ }
3377
+ .md\:grid {
3378
+ @media (width >= 48rem) {
3379
+ display: grid;
3380
+ }
3381
+ }
3382
+ .md\:hidden {
3383
+ @media (width >= 48rem) {
3384
+ display: none;
3385
+ }
3386
+ }
3387
+ .md\:h-screen {
3388
+ @media (width >= 48rem) {
3389
+ height: 100vh;
2358
3390
  }
2359
3391
  }
2360
3392
  .md\:w-\[50\%\] {
@@ -2367,6 +3399,12 @@
2367
3399
  width: 456px;
2368
3400
  }
2369
3401
  }
3402
+ .md\:translate-x-0 {
3403
+ @media (width >= 48rem) {
3404
+ --tw-translate-x: var(--spacing-0);
3405
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3406
+ }
3407
+ }
2370
3408
  .md\:border-x {
2371
3409
  @media (width >= 48rem) {
2372
3410
  border-inline-style: var(--tw-border-style);
@@ -2379,16 +3417,56 @@
2379
3417
  border-inline-width: 0px;
2380
3418
  }
2381
3419
  }
3420
+ .md\:px-6 {
3421
+ @media (width >= 48rem) {
3422
+ padding-inline: var(--spacing-6);
3423
+ }
3424
+ }
3425
+ .md\:py-6 {
3426
+ @media (width >= 48rem) {
3427
+ padding-block: var(--spacing-6);
3428
+ }
3429
+ }
3430
+ .lg\:grid {
3431
+ @media (width >= 64rem) {
3432
+ display: grid;
3433
+ }
3434
+ }
3435
+ .lg\:hidden {
3436
+ @media (width >= 64rem) {
3437
+ display: none;
3438
+ }
3439
+ }
2382
3440
  .lg\:w-\[75\%\] {
2383
3441
  @media (width >= 64rem) {
2384
3442
  width: 75%;
2385
3443
  }
2386
3444
  }
3445
+ .xl\:grid {
3446
+ @media (width >= 80rem) {
3447
+ display: grid;
3448
+ }
3449
+ }
3450
+ .xl\:hidden {
3451
+ @media (width >= 80rem) {
3452
+ display: none;
3453
+ }
3454
+ }
3455
+ .dark\:border-blue-800 {
3456
+ @media (prefers-color-scheme: dark) {
3457
+ border-color: var(--color-blue-800);
3458
+ }
3459
+ }
3460
+ .dark\:border-gray-700 {
3461
+ @media (prefers-color-scheme: dark) {
3462
+ border-color: var(--color-gray-700);
3463
+ }
3464
+ }
2387
3465
  .dark\:border-white\/5 {
2388
3466
  @media (prefers-color-scheme: dark) {
2389
3467
  border-color: color-mix(in srgb, #ffffff 5%, transparent);
2390
3468
  @supports (color: color-mix(in lab, red, red)) {
2391
- border-color: color-mix(in oklab, var(--color-neutral-white) 5%, transparent);
3469
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2392
3470
  }
2393
3471
  }
2394
3472
  }
@@ -2396,58 +3474,85 @@
2396
3474
  @media (prefers-color-scheme: dark) {
2397
3475
  border-color: color-mix(in srgb, #ffffff 10%, transparent);
2398
3476
  @supports (color: color-mix(in lab, red, red)) {
2399
- border-color: color-mix(in oklab, var(--color-neutral-white) 10%, transparent);
3477
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2400
3478
  }
2401
3479
  }
2402
3480
  }
2403
3481
  .dark\:border-y-zinc-700 {
2404
3482
  @media (prefers-color-scheme: dark) {
2405
- border-block-color: oklch(0.37 0.013 285.805);
3483
+ border-block-color: var(--color-zinc-700);
2406
3484
  }
2407
3485
  }
2408
3486
  .dark\:bg-blue-500 {
2409
3487
  @media (prefers-color-scheme: dark) {
2410
- background-color: oklch(0.623 0.214 259.815);
3488
+ background-color: var(--color-blue-500);
3489
+ }
3490
+ }
3491
+ .dark\:bg-blue-900\/20 {
3492
+ @media (prefers-color-scheme: dark) {
3493
+ background-color: color-mix(in srgb, oklch(0.368 0.146 254.128) 20%, transparent);
3494
+ @supports (color: color-mix(in lab, red, red)) {
3495
+ background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
3496
+ }
2411
3497
  }
2412
3498
  }
2413
3499
  .dark\:bg-gray-800 {
2414
3500
  @media (prefers-color-scheme: dark) {
2415
- background-color: oklch(0.278 0.033 256.848);
3501
+ background-color: var(--color-gray-800);
3502
+ }
3503
+ }
3504
+ .dark\:bg-gray-900 {
3505
+ @media (prefers-color-scheme: dark) {
3506
+ background-color: var(--color-gray-900);
3507
+ }
3508
+ }
3509
+ .dark\:bg-green-900\/20 {
3510
+ @media (prefers-color-scheme: dark) {
3511
+ background-color: color-mix(in srgb, oklch(0.314 0.095 133.748) 20%, transparent);
3512
+ @supports (color: color-mix(in lab, red, red)) {
3513
+ background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
3514
+ }
2416
3515
  }
2417
3516
  }
2418
3517
  .dark\:bg-slate-600 {
2419
3518
  @media (prefers-color-scheme: dark) {
2420
- background-color: oklch(0.446 0.043 257.281);
3519
+ background-color: var(--color-slate-600);
2421
3520
  }
2422
3521
  }
2423
3522
  .dark\:bg-zinc-300 {
2424
3523
  @media (prefers-color-scheme: dark) {
2425
- background-color: oklch(0.871 0.006 286.286);
3524
+ background-color: var(--color-zinc-300);
2426
3525
  }
2427
3526
  }
2428
3527
  .dark\:bg-zinc-400 {
2429
3528
  @media (prefers-color-scheme: dark) {
2430
- background-color: oklch(0.705 0.015 286.067);
3529
+ background-color: var(--color-zinc-400);
2431
3530
  }
2432
3531
  }
2433
3532
  .dark\:bg-zinc-700 {
2434
3533
  @media (prefers-color-scheme: dark) {
2435
- background-color: oklch(0.37 0.013 285.805);
3534
+ background-color: var(--color-zinc-700);
2436
3535
  }
2437
3536
  }
2438
3537
  .dark\:bg-zinc-700\/60 {
2439
3538
  @media (prefers-color-scheme: dark) {
2440
- background-color: color-mix(in oklab, oklch(0.37 0.013 285.805) 60%, transparent);
3539
+ background-color: color-mix(in srgb, oklch(37% 0.013 285.805) 60%, transparent);
3540
+ @supports (color: color-mix(in lab, red, red)) {
3541
+ background-color: color-mix(in oklab, var(--color-zinc-700) 60%, transparent);
3542
+ }
2441
3543
  }
2442
3544
  }
2443
3545
  .dark\:bg-zinc-900 {
2444
3546
  @media (prefers-color-scheme: dark) {
2445
- background-color: oklch(0.21 0.006 285.885);
3547
+ background-color: var(--color-zinc-900);
2446
3548
  }
2447
3549
  }
2448
3550
  .dark\:bg-zinc-900\/70 {
2449
3551
  @media (prefers-color-scheme: dark) {
2450
- background-color: color-mix(in oklab, oklch(0.21 0.006 285.885) 70%, transparent);
3552
+ background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 70%, transparent);
3553
+ @supports (color: color-mix(in lab, red, red)) {
3554
+ background-color: color-mix(in oklab, var(--color-zinc-900) 70%, transparent);
3555
+ }
2451
3556
  }
2452
3557
  }
2453
3558
  .dark\:fill-\[\#1f1f21\] {
@@ -2457,45 +3562,70 @@
2457
3562
  }
2458
3563
  .dark\:fill-slate-600 {
2459
3564
  @media (prefers-color-scheme: dark) {
2460
- fill: oklch(0.446 0.043 257.281);
3565
+ fill: var(--color-slate-600);
2461
3566
  }
2462
3567
  }
2463
3568
  .dark\:stroke-white\/10 {
2464
3569
  @media (prefers-color-scheme: dark) {
2465
3570
  stroke: color-mix(in srgb, #ffffff 10%, transparent);
2466
3571
  @supports (color: color-mix(in lab, red, red)) {
2467
- stroke: color-mix(in oklab, var(--color-neutral-white) 10%, transparent);
3572
+ stroke: color-mix(in oklab, var(--color-white) 10%, transparent);
2468
3573
  }
2469
3574
  }
2470
3575
  }
2471
3576
  .dark\:stroke-zinc-600 {
2472
3577
  @media (prefers-color-scheme: dark) {
2473
- stroke: oklch(0.442 0.017 285.786);
3578
+ stroke: var(--color-zinc-600);
3579
+ }
3580
+ }
3581
+ .dark\:text-blue-100 {
3582
+ @media (prefers-color-scheme: dark) {
3583
+ color: var(--color-blue-100);
3584
+ }
3585
+ }
3586
+ .dark\:text-blue-200 {
3587
+ @media (prefers-color-scheme: dark) {
3588
+ color: var(--color-blue-200);
3589
+ }
3590
+ }
3591
+ .dark\:text-gray-100 {
3592
+ @media (prefers-color-scheme: dark) {
3593
+ color: var(--color-gray-100);
3594
+ }
3595
+ }
3596
+ .dark\:text-gray-300 {
3597
+ @media (prefers-color-scheme: dark) {
3598
+ color: var(--color-gray-300);
3599
+ }
3600
+ }
3601
+ .dark\:text-gray-400 {
3602
+ @media (prefers-color-scheme: dark) {
3603
+ color: var(--color-gray-400);
2474
3604
  }
2475
3605
  }
2476
3606
  .dark\:text-text-body {
2477
3607
  @media (prefers-color-scheme: dark) {
2478
- color: #333333;
3608
+ color: var(--color-text-body);
2479
3609
  }
2480
3610
  }
2481
3611
  .dark\:text-zinc-100 {
2482
3612
  @media (prefers-color-scheme: dark) {
2483
- color: oklch(0.967 0.001 286.375);
3613
+ color: var(--color-zinc-100);
2484
3614
  }
2485
3615
  }
2486
3616
  .dark\:text-zinc-200 {
2487
3617
  @media (prefers-color-scheme: dark) {
2488
- color: oklch(0.92 0.004 286.32);
3618
+ color: var(--color-zinc-200);
2489
3619
  }
2490
3620
  }
2491
3621
  .dark\:text-zinc-300 {
2492
3622
  @media (prefers-color-scheme: dark) {
2493
- color: oklch(0.871 0.006 286.286);
3623
+ color: var(--color-zinc-300);
2494
3624
  }
2495
3625
  }
2496
3626
  .dark\:text-zinc-600 {
2497
3627
  @media (prefers-color-scheme: dark) {
2498
- color: oklch(0.442 0.017 285.786);
3628
+ color: var(--color-zinc-600);
2499
3629
  }
2500
3630
  }
2501
3631
  .dark\:shadow-none {
@@ -2504,14 +3634,19 @@
2504
3634
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2505
3635
  }
2506
3636
  }
3637
+ .dark\:ring-gray-700 {
3638
+ @media (prefers-color-scheme: dark) {
3639
+ --tw-ring-color: var(--color-gray-700);
3640
+ }
3641
+ }
2507
3642
  .dark\:outline-white {
2508
3643
  @media (prefers-color-scheme: dark) {
2509
- outline-color: var(--color-neutral-white);
3644
+ outline-color: var(--color-white);
2510
3645
  }
2511
3646
  }
2512
3647
  .dark\:backdrop-blur-2xl {
2513
3648
  @media (prefers-color-scheme: dark) {
2514
- --tw-backdrop-blur: blur(40px);
3649
+ --tw-backdrop-blur: blur(var(--blur-2xl));
2515
3650
  -webkit-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,);
2516
3651
  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,);
2517
3652
  }
@@ -2526,7 +3661,7 @@
2526
3661
  .group-disabled\:dark\:text-zinc-600 {
2527
3662
  &:is(:where(.group):disabled *) {
2528
3663
  @media (prefers-color-scheme: dark) {
2529
- color: oklch(0.442 0.017 285.786);
3664
+ color: var(--color-zinc-600);
2530
3665
  }
2531
3666
  }
2532
3667
  }
@@ -2534,7 +3669,25 @@
2534
3669
  @media (prefers-color-scheme: dark) {
2535
3670
  &:hover {
2536
3671
  @media (hover: hover) {
2537
- background-color: #f3f4f6;
3672
+ background-color: var(--color-background-hover);
3673
+ }
3674
+ }
3675
+ }
3676
+ }
3677
+ .dark\:hover\:bg-gray-700 {
3678
+ @media (prefers-color-scheme: dark) {
3679
+ &:hover {
3680
+ @media (hover: hover) {
3681
+ background-color: var(--color-gray-700);
3682
+ }
3683
+ }
3684
+ }
3685
+ }
3686
+ .dark\:hover\:bg-gray-800 {
3687
+ @media (prefers-color-scheme: dark) {
3688
+ &:hover {
3689
+ @media (hover: hover) {
3690
+ background-color: var(--color-gray-800);
2538
3691
  }
2539
3692
  }
2540
3693
  }
@@ -2543,7 +3696,7 @@
2543
3696
  @media (prefers-color-scheme: dark) {
2544
3697
  &:hover {
2545
3698
  @media (hover: hover) {
2546
- background-color: oklch(0.37 0.013 285.805);
3699
+ background-color: var(--color-zinc-700);
2547
3700
  }
2548
3701
  }
2549
3702
  }
@@ -2551,14 +3704,14 @@
2551
3704
  .dark\:disabled\:text-text-muted {
2552
3705
  @media (prefers-color-scheme: dark) {
2553
3706
  &:disabled {
2554
- color: #4b5563;
3707
+ color: var(--color-text-muted);
2555
3708
  }
2556
3709
  }
2557
3710
  }
2558
3711
  .dark\:disabled\:text-zinc-600 {
2559
3712
  @media (prefers-color-scheme: dark) {
2560
3713
  &:disabled {
2561
- color: oklch(0.442 0.017 285.786);
3714
+ color: var(--color-zinc-600);
2562
3715
  }
2563
3716
  }
2564
3717
  }
@@ -2587,6 +3740,11 @@
2587
3740
  border-color: GrayText;
2588
3741
  }
2589
3742
  }
3743
+ .forced-colors\:\!bg-\[ButtonFace\] {
3744
+ @media (forced-colors: active) {
3745
+ background-color: ButtonFace !important;
3746
+ }
3747
+ }
2590
3748
  .forced-colors\:\!bg-\[Highlight\] {
2591
3749
  @media (forced-colors: active) {
2592
3750
  background-color: Highlight !important;
@@ -2627,6 +3785,21 @@
2627
3785
  stroke: ButtonBorder;
2628
3786
  }
2629
3787
  }
3788
+ .forced-colors\:\!text-\[ButtonText\] {
3789
+ @media (forced-colors: active) {
3790
+ color: ButtonText !important;
3791
+ }
3792
+ }
3793
+ .forced-colors\:\!text-\[GrayText\] {
3794
+ @media (forced-colors: active) {
3795
+ color: GrayText !important;
3796
+ }
3797
+ }
3798
+ .forced-colors\:\!text-\[HighlightText\] {
3799
+ @media (forced-colors: active) {
3800
+ color: HighlightText !important;
3801
+ }
3802
+ }
2630
3803
  .forced-colors\:text-\[ButtonFace\] {
2631
3804
  @media (forced-colors: active) {
2632
3805
  color: ButtonFace;
@@ -2654,7 +3827,7 @@
2654
3827
  }
2655
3828
  .forced-colors\:text-white {
2656
3829
  @media (forced-colors: active) {
2657
- color: var(--color-neutral-white);
3830
+ color: var(--color-white);
2658
3831
  }
2659
3832
  }
2660
3833
  .forced-colors\:outline-\[GrayText\] {
@@ -2746,32 +3919,206 @@
2746
3919
  }
2747
3920
  }
2748
3921
  }
3922
+ .\[\&_\.ProseMirror\]\:min-h-\[inherit\] {
3923
+ & .ProseMirror {
3924
+ min-height: inherit;
3925
+ }
3926
+ }
3927
+ .\[\&_\.ProseMirror\]\:outline-none {
3928
+ & .ProseMirror {
3929
+ --tw-outline-style: none;
3930
+ outline-style: none;
3931
+ }
3932
+ }
3933
+ .\[\&_\.ProseMirror_blockquote\]\:border-l-4 {
3934
+ & .ProseMirror blockquote {
3935
+ border-left-style: var(--tw-border-style);
3936
+ border-left-width: 4px;
3937
+ }
3938
+ }
3939
+ .\[\&_\.ProseMirror_blockquote\]\:border-border-muted {
3940
+ & .ProseMirror blockquote {
3941
+ border-color: var(--color-border-muted);
3942
+ }
3943
+ }
3944
+ .\[\&_\.ProseMirror_blockquote\]\:pl-4 {
3945
+ & .ProseMirror blockquote {
3946
+ padding-left: var(--spacing-4);
3947
+ }
3948
+ }
3949
+ .\[\&_\.ProseMirror_blockquote\]\:italic {
3950
+ & .ProseMirror blockquote {
3951
+ font-style: italic;
3952
+ }
3953
+ }
3954
+ .\[\&_\.ProseMirror_code\]\:rounded {
3955
+ & .ProseMirror code {
3956
+ border-radius: 0.25rem;
3957
+ }
3958
+ }
3959
+ .\[\&_\.ProseMirror_code\]\:bg-background-muted {
3960
+ & .ProseMirror code {
3961
+ background-color: var(--color-background-muted);
3962
+ }
3963
+ }
3964
+ .\[\&_\.ProseMirror_code\]\:px-1 {
3965
+ & .ProseMirror code {
3966
+ padding-inline: var(--spacing-1);
3967
+ }
3968
+ }
3969
+ .\[\&_\.ProseMirror_code\]\:py-0\.5 {
3970
+ & .ProseMirror code {
3971
+ padding-block: calc(var(--spacing) * 0.5);
3972
+ }
3973
+ }
3974
+ .\[\&_\.ProseMirror_code\]\:font-mono {
3975
+ & .ProseMirror code {
3976
+ font-family: var(--font-mono);
3977
+ }
3978
+ }
3979
+ .\[\&_\.ProseMirror_code\]\:text-sm {
3980
+ & .ProseMirror code {
3981
+ font-size: var(--text-sm);
3982
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3983
+ }
3984
+ }
3985
+ .\[\&_\.ProseMirror_h1\]\:mb-4 {
3986
+ & .ProseMirror h1 {
3987
+ margin-bottom: var(--spacing-4);
3988
+ }
3989
+ }
3990
+ .\[\&_\.ProseMirror_h1\]\:text-2xl {
3991
+ & .ProseMirror h1 {
3992
+ font-size: var(--text-2xl);
3993
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
3994
+ }
3995
+ }
3996
+ .\[\&_\.ProseMirror_h1\]\:font-bold {
3997
+ & .ProseMirror h1 {
3998
+ --tw-font-weight: var(--font-weight-bold);
3999
+ font-weight: var(--font-weight-bold);
4000
+ }
4001
+ }
4002
+ .\[\&_\.ProseMirror_h2\]\:mb-3 {
4003
+ & .ProseMirror h2 {
4004
+ margin-bottom: var(--spacing-3);
4005
+ }
4006
+ }
4007
+ .\[\&_\.ProseMirror_h2\]\:text-xl {
4008
+ & .ProseMirror h2 {
4009
+ font-size: var(--text-xl);
4010
+ line-height: var(--tw-leading, var(--text-xl--line-height));
4011
+ }
4012
+ }
4013
+ .\[\&_\.ProseMirror_h2\]\:font-semibold {
4014
+ & .ProseMirror h2 {
4015
+ --tw-font-weight: var(--font-weight-semibold);
4016
+ font-weight: var(--font-weight-semibold);
4017
+ }
4018
+ }
4019
+ .\[\&_\.ProseMirror_hr\]\:border-border-muted {
4020
+ & .ProseMirror hr {
4021
+ border-color: var(--color-border-muted);
4022
+ }
4023
+ }
4024
+ .\[\&_\.ProseMirror_li\]\:mb-1 {
4025
+ & .ProseMirror li {
4026
+ margin-bottom: var(--spacing-1);
4027
+ }
4028
+ }
4029
+ .\[\&_\.ProseMirror_ol\]\:mb-2 {
4030
+ & .ProseMirror ol {
4031
+ margin-bottom: var(--spacing-2);
4032
+ }
4033
+ }
4034
+ .\[\&_\.ProseMirror_ol\]\:ml-6 {
4035
+ & .ProseMirror ol {
4036
+ margin-left: var(--spacing-6);
4037
+ }
4038
+ }
4039
+ .\[\&_\.ProseMirror_ol\]\:list-decimal {
4040
+ & .ProseMirror ol {
4041
+ list-style-type: decimal;
4042
+ }
4043
+ }
4044
+ .\[\&_\.ProseMirror_p\]\:mb-2 {
4045
+ & .ProseMirror p {
4046
+ margin-bottom: var(--spacing-2);
4047
+ }
4048
+ }
4049
+ .\[\&_\.ProseMirror_pre\]\:rounded-md {
4050
+ & .ProseMirror pre {
4051
+ border-radius: var(--radius-md);
4052
+ }
4053
+ }
4054
+ .\[\&_\.ProseMirror_pre\]\:bg-background-muted {
4055
+ & .ProseMirror pre {
4056
+ background-color: var(--color-background-muted);
4057
+ }
4058
+ }
4059
+ .\[\&_\.ProseMirror_pre\]\:p-3 {
4060
+ & .ProseMirror pre {
4061
+ padding: var(--spacing-3);
4062
+ }
4063
+ }
4064
+ .\[\&_\.ProseMirror_pre\]\:font-mono {
4065
+ & .ProseMirror pre {
4066
+ font-family: var(--font-mono);
4067
+ }
4068
+ }
4069
+ .\[\&_\.ProseMirror_pre\]\:text-sm {
4070
+ & .ProseMirror pre {
4071
+ font-size: var(--text-sm);
4072
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4073
+ }
4074
+ }
4075
+ .\[\&_\.ProseMirror_ul\]\:mb-2 {
4076
+ & .ProseMirror ul {
4077
+ margin-bottom: var(--spacing-2);
4078
+ }
4079
+ }
4080
+ .\[\&_\.ProseMirror_ul\]\:ml-6 {
4081
+ & .ProseMirror ul {
4082
+ margin-left: var(--spacing-6);
4083
+ }
4084
+ }
4085
+ .\[\&_\.ProseMirror_ul\]\:list-disc {
4086
+ & .ProseMirror ul {
4087
+ list-style-type: disc;
4088
+ }
4089
+ }
2749
4090
  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-primary\/20 {
2750
4091
  & [data-chip-id]::-moz-selection {
2751
- background-color: color-mix(in oklab, #444ae1 20%, transparent);
4092
+ background-color: color-mix(in srgb, #444ae1 20%, transparent);
4093
+ @supports (color: color-mix(in lab, red, red)) {
4094
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
4095
+ }
2752
4096
  }
2753
4097
  & [data-chip-id]::selection {
2754
- background-color: color-mix(in oklab, #444ae1 20%, transparent);
4098
+ background-color: color-mix(in srgb, #444ae1 20%, transparent);
4099
+ @supports (color: color-mix(in lab, red, red)) {
4100
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
4101
+ }
2755
4102
  }
2756
4103
  }
2757
4104
  .\[\&_td\]\:px-0 {
2758
4105
  & td {
2759
- padding-inline: calc(0.25rem * 0);
4106
+ padding-inline: var(--spacing-0);
2760
4107
  }
2761
4108
  }
2762
4109
  .\[\&\+\*\]\:mt-1 {
2763
4110
  &+* {
2764
- margin-top: calc(0.25rem * 1);
4111
+ margin-top: var(--spacing-1);
2765
4112
  }
2766
4113
  }
2767
4114
  .\[\&\:\:-moz-range-thumb\]\:h-4 {
2768
4115
  &::-moz-range-thumb {
2769
- height: calc(0.25rem * 4);
4116
+ height: var(--spacing-4);
2770
4117
  }
2771
4118
  }
2772
4119
  .\[\&\:\:-moz-range-thumb\]\:w-4 {
2773
4120
  &::-moz-range-thumb {
2774
- width: calc(0.25rem * 4);
4121
+ width: var(--spacing-4);
2775
4122
  }
2776
4123
  }
2777
4124
  .\[\&\:\:-moz-range-thumb\]\:rounded-full {
@@ -2779,6 +4126,11 @@
2779
4126
  border-radius: calc(infinity * 1px);
2780
4127
  }
2781
4128
  }
4129
+ .\[\&\:\:-moz-range-thumb\]\:rounded-full {
4130
+ &::-moz-range-thumb {
4131
+ border-radius: var(--radius-full);
4132
+ }
4133
+ }
2782
4134
  .\[\&\:\:-moz-range-thumb\]\:border {
2783
4135
  &::-moz-range-thumb {
2784
4136
  border-style: var(--tw-border-style);
@@ -2787,12 +4139,12 @@
2787
4139
  }
2788
4140
  .\[\&\:\:-moz-range-thumb\]\:border-border-input {
2789
4141
  &::-moz-range-thumb {
2790
- border-color: #d1d5db;
4142
+ border-color: var(--color-border-input);
2791
4143
  }
2792
4144
  }
2793
4145
  .\[\&\:\:-moz-range-thumb\]\:bg-background-input {
2794
4146
  &::-moz-range-thumb {
2795
- background-color: #ffffff;
4147
+ background-color: var(--color-background-input);
2796
4148
  }
2797
4149
  }
2798
4150
  .hover\:\[\&\:\:-moz-range-thumb\]\:shadow-sm {
@@ -2816,7 +4168,7 @@
2816
4168
  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:outline-border-focus {
2817
4169
  &:focus-visible {
2818
4170
  &::-moz-range-thumb {
2819
- outline-color: #333333;
4171
+ outline-color: var(--color-border-focus);
2820
4172
  }
2821
4173
  }
2822
4174
  }
@@ -2834,12 +4186,12 @@
2834
4186
  }
2835
4187
  .\[\&\:\:-webkit-slider-thumb\]\:h-4 {
2836
4188
  &::-webkit-slider-thumb {
2837
- height: calc(0.25rem * 4);
4189
+ height: var(--spacing-4);
2838
4190
  }
2839
4191
  }
2840
4192
  .\[\&\:\:-webkit-slider-thumb\]\:w-4 {
2841
4193
  &::-webkit-slider-thumb {
2842
- width: calc(0.25rem * 4);
4194
+ width: var(--spacing-4);
2843
4195
  }
2844
4196
  }
2845
4197
  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
@@ -2853,6 +4205,11 @@
2853
4205
  border-radius: calc(infinity * 1px);
2854
4206
  }
2855
4207
  }
4208
+ .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
4209
+ &::-webkit-slider-thumb {
4210
+ border-radius: var(--radius-full);
4211
+ }
4212
+ }
2856
4213
  .\[\&\:\:-webkit-slider-thumb\]\:border {
2857
4214
  &::-webkit-slider-thumb {
2858
4215
  border-style: var(--tw-border-style);
@@ -2861,12 +4218,12 @@
2861
4218
  }
2862
4219
  .\[\&\:\:-webkit-slider-thumb\]\:border-border-input {
2863
4220
  &::-webkit-slider-thumb {
2864
- border-color: #d1d5db;
4221
+ border-color: var(--color-border-input);
2865
4222
  }
2866
4223
  }
2867
4224
  .\[\&\:\:-webkit-slider-thumb\]\:bg-background-input {
2868
4225
  &::-webkit-slider-thumb {
2869
- background-color: #ffffff;
4226
+ background-color: var(--color-background-input);
2870
4227
  }
2871
4228
  }
2872
4229
  .hover\:\[\&\:\:-webkit-slider-thumb\]\:shadow-sm {
@@ -2890,7 +4247,7 @@
2890
4247
  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:outline-border-focus {
2891
4248
  &:focus-visible {
2892
4249
  &::-webkit-slider-thumb {
2893
- outline-color: #333333;
4250
+ outline-color: var(--color-border-focus);
2894
4251
  }
2895
4252
  }
2896
4253
  }
@@ -2906,7 +4263,7 @@
2906
4263
  &:empty {
2907
4264
  &::before {
2908
4265
  content: var(--tw-content);
2909
- color: #9ca3af;
4266
+ color: var(--color-text-placeholder);
2910
4267
  }
2911
4268
  }
2912
4269
  }
@@ -2919,17 +4276,42 @@
2919
4276
  }
2920
4277
  }
2921
4278
  }
4279
+ .\[\&\>\*\]\:\!justify-start {
4280
+ &>* {
4281
+ justify-content: flex-start !important;
4282
+ }
4283
+ }
2922
4284
  .\[\&\>\*\]\:rounded-none {
2923
4285
  &>* {
2924
4286
  border-radius: 0;
2925
4287
  }
2926
4288
  }
4289
+ .\[\&\>\*\]\:rounded-none {
4290
+ &>* {
4291
+ border-radius: var(--radius-none);
4292
+ }
4293
+ }
2927
4294
  .\[\&\>\*\]\:border-none {
2928
4295
  &>* {
2929
4296
  --tw-border-style: none;
2930
4297
  border-style: none;
2931
4298
  }
2932
4299
  }
4300
+ .\[\&\>\*\]\:\!text-left {
4301
+ &>* {
4302
+ text-align: left !important;
4303
+ }
4304
+ }
4305
+ .\[\&\>\*\:first-child\]\:mt-0 {
4306
+ &>*:first-child {
4307
+ margin-top: var(--spacing-0);
4308
+ }
4309
+ }
4310
+ .\[\&\>\*\:last-child\]\:mb-0 {
4311
+ &>*:last-child {
4312
+ margin-bottom: var(--spacing-0);
4313
+ }
4314
+ }
2933
4315
  .\[\.group\[data-selected\]\:has\(\+\[data-selected\]\)_\&\]\:block {
2934
4316
  .group[data-selected]:has(+[data-selected]) & {
2935
4317
  display: block;
@@ -2937,7 +4319,7 @@
2937
4319
  }
2938
4320
  .\[\[data-placement\]\>\&\]\:p-4 {
2939
4321
  [data-placement]>& {
2940
- padding: calc(0.25rem * 4);
4322
+ padding: var(--spacing-4);
2941
4323
  }
2942
4324
  }
2943
4325
  .\[td\:first-child_\&\]\:rounded-s-full {
@@ -2946,181 +4328,35 @@
2946
4328
  border-end-start-radius: calc(infinity * 1px);
2947
4329
  }
2948
4330
  }
2949
- }
2950
- @keyframes wave {
2951
- 0% {
2952
- transform: translateX(-100%);
2953
- }
2954
- 50%, 100% {
2955
- transform: translateX(100%);
2956
- }
2957
- }
2958
- @keyframes slide-in-from-right {
2959
- from {
2960
- transform: translateX(100%);
2961
- }
2962
- to {
2963
- transform: translateX(0);
2964
- }
2965
- }
2966
- @keyframes slide-in-from-left {
2967
- from {
2968
- transform: translateX(-100%);
2969
- }
2970
- to {
2971
- transform: translateX(0);
2972
- }
2973
- }
2974
- @keyframes slide-out-to-right {
2975
- from {
2976
- transform: translateX(0);
2977
- }
2978
- to {
2979
- transform: translateX(100%);
2980
- }
2981
- }
2982
- @keyframes slide-out-to-left {
2983
- from {
2984
- transform: translateX(0);
2985
- }
2986
- to {
2987
- transform: translateX(-100%);
4331
+ .\[td\:first-child_\&\]\:rounded-s-full {
4332
+ td:first-child & {
4333
+ border-start-start-radius: var(--radius-full);
4334
+ border-end-start-radius: var(--radius-full);
4335
+ }
2988
4336
  }
2989
4337
  }
2990
- @keyframes fade-in {
2991
- from {
2992
- opacity: 0;
2993
- }
2994
- to {
2995
- opacity: 1;
4338
+ @layer base {
4339
+ :root {
4340
+ --default-border-color: var(--color-border-default);
2996
4341
  }
2997
- }
2998
- @keyframes fade-out {
2999
- from {
3000
- opacity: 1;
4342
+ .theme-dark {
4343
+ --default-border-color: var(--color-border-default);
3001
4344
  }
3002
- to {
3003
- opacity: 0;
4345
+ *,
4346
+ ::after,
4347
+ ::before {
4348
+ border-color: var(--default-border-color);
3004
4349
  }
3005
4350
  }
3006
- .dark {
3007
- --color-brand-primary: #b4b9ff;
3008
- --color-brand-light: #c4c4ff;
3009
- --color-brand-dark: #a8aeff;
3010
- --color-brand-background: #3a3f63;
3011
- --color-neutral-black: #e5e7eb;
3012
- --color-neutral-white: #151a30;
3013
- --color-gray-lightest: #1f2937;
3014
- --color-gray-lighter: #374151;
3015
- --color-gray-light: #4b5563;
3016
- --color-gray-medium: #6b7280;
3017
- --color-gray-dark: #9ca3af;
3018
- --color-gray-darker: #d1d5db;
3019
- --color-gray-darkest: #f3f4f6;
3020
- --color-text-body: #ededef;
3021
- --color-text-heading: #ffffff;
3022
- --color-text-caption: #d1d5db;
3023
- --color-text-muted: #9ca3af;
3024
- --color-text-placeholder: #9ca3af;
3025
- --color-text-disabled: #9ca3af;
3026
- --color-text-link-default: #b4b9ff;
3027
- --color-text-link-hover: #c0c5ff;
3028
- --color-text-link-active: #b4b9ff;
3029
- --color-text-link-visited: #c0c5ff;
3030
- --color-text-onPrimary: #1f2937;
3031
- --color-background-body: #151a30;
3032
- --color-background-surface: #1a2038;
3033
- --color-background-muted: #374151;
3034
- --color-background-hover: #4b5563;
3035
- --color-background-selected: #6b7280;
3036
- --color-background-modal: rgba(255, 255, 255, 0.12);
3037
- --color-background-input: rgba(255, 255, 255, 0.05);
3038
- --color-background-menu-active: #222b44;
3039
- --color-border-default: #2e3a59;
3040
- --color-border-focus: #e5e7eb;
3041
- --color-border-muted: #4b5563;
3042
- --color-border-input: #6b7280;
3043
- --color-action-primary: #7a8ee1;
3044
- --color-action-primary-hover: #6a6fcc;
3045
- --color-action-secondary: #e5e7eb;
3046
- --color-action-secondary-hover: #f3f4f6;
3047
- --color-action-destructive: #e55a5a;
3048
- --color-action-destructive-hover: #d12c2c;
3049
- --color-action-success: #d1fae5;
3050
- --color-action-disabled: #9ca3af;
3051
- --color-feedback-success-text: #d1fae5;
3052
- --color-feedback-success-icon: #d1fae5;
3053
- --color-feedback-success-background: #065f46;
3054
- --color-feedback-success-border: #10b981;
3055
- --color-feedback-error-text: #fee2e2;
3056
- --color-feedback-error-icon: #fee2e2;
3057
- --color-feedback-error-background: #b91c1c;
3058
- --color-feedback-error-border: #ef4444;
3059
- --color-feedback-warning-text: #fef3c7;
3060
- --color-feedback-warning-icon: #fef3c7;
3061
- --color-feedback-warning-background: #92400e;
3062
- --color-feedback-warning-border: #f59e0b;
3063
- --color-feedback-info-text: #60a5fa;
3064
- --color-feedback-info-icon: #60a5fa;
3065
- --color-feedback-info-background: #1e3160;
3066
- --color-feedback-info-border: #2563eb;
3067
- --color-device-charging-background: #581c87;
3068
- --color-device-charging-border: #a855f7;
3069
- --color-device-charging-text: #e9d5ff;
3070
- --color-device-discharging-background: #78350f;
3071
- --color-device-discharging-border: #eab308;
3072
- --color-device-discharging-text: #fef3c7;
3073
- --color-device-heat-background: #7f1d1d;
3074
- --color-device-heat-border: #ef4444;
3075
- --color-device-heat-text: #fee2e2;
3076
- --color-device-cool-background: #1e3a8a;
3077
- --color-device-cool-border: #3b82f6;
3078
- --color-device-cool-text: #dbeafe;
3079
- --color-device-eco-background: #064e3b;
3080
- --color-device-eco-border: #10b981;
3081
- --color-device-eco-text: #d1fae5;
3082
- --color-device-auto-background: #7c2d12;
3083
- --color-device-auto-border: #fb923c;
3084
- --color-device-auto-text: #ffedd5;
3085
- --color-device-on-background: #134e4a;
3086
- --color-device-on-border: #14b8a6;
3087
- --color-device-on-text: #ccfbf1;
3088
- --color-device-idle-background: #374151;
3089
- --color-device-idle-border: #6b7280;
3090
- --color-device-idle-text: #e5e7eb;
3091
- --color-device-off-background: #374151;
3092
- --color-device-off-border: #6b7280;
3093
- --color-device-off-text: #e5e7eb;
3094
- --color-device-unknown-background: #1f2937;
3095
- --color-device-unknown-border: #6b7280;
3096
- --color-device-unknown-text: #ffffff;
3097
- --color-device-importing-background: #1f2937;
3098
- --color-device-importing-border: #6b7280;
3099
- --color-device-importing-text: #ffffff;
3100
- --color-device-exporting-background: #1f2937;
3101
- --color-device-exporting-border: #6b7280;
3102
- --color-device-exporting-text: #ffffff;
3103
- --skeleton-base: #2e3a59;
3104
- --skeleton-highlight: #374151;
3105
- --skeleton-wave: rgba(255, 255, 255, 0.1);
3106
- }
3107
- .slide-in-from-right {
3108
- animation: slide-in-from-right 0.3s ease-out;
3109
- }
3110
- .slide-in-from-left {
3111
- animation: slide-in-from-left 0.3s ease-out;
3112
- }
3113
- .slide-out-to-right {
3114
- animation: slide-out-to-right 0.15s ease-in;
3115
- }
3116
- .slide-out-to-left {
3117
- animation: slide-out-to-left 0.15s ease-in;
3118
- }
3119
- .fade-in {
3120
- animation: fade-in 0.2s ease-out;
4351
+ @property --tw-border-spacing-x {
4352
+ syntax: "<length>";
4353
+ inherits: false;
4354
+ initial-value: 0;
3121
4355
  }
3122
- .fade-out {
3123
- animation: fade-out 0.15s ease-in;
4356
+ @property --tw-border-spacing-y {
4357
+ syntax: "<length>";
4358
+ inherits: false;
4359
+ initial-value: 0;
3124
4360
  }
3125
4361
  @property --tw-translate-x {
3126
4362
  syntax: "*";
@@ -3162,6 +4398,11 @@
3162
4398
  inherits: false;
3163
4399
  initial-value: 0;
3164
4400
  }
4401
+ @property --tw-space-x-reverse {
4402
+ syntax: "*";
4403
+ inherits: false;
4404
+ initial-value: 0;
4405
+ }
3165
4406
  @property --tw-divide-x-reverse {
3166
4407
  syntax: "*";
3167
4408
  inherits: false;
@@ -3423,15 +4664,20 @@
3423
4664
  initial-value: "";
3424
4665
  inherits: false;
3425
4666
  }
3426
- @keyframes spin {
3427
- to {
3428
- transform: rotate(360deg);
3429
- }
4667
+ @property --tw-scale-x {
4668
+ syntax: "*";
4669
+ inherits: false;
4670
+ initial-value: 1;
3430
4671
  }
3431
- @keyframes pulse {
3432
- 50% {
3433
- opacity: 0.5;
3434
- }
4672
+ @property --tw-scale-y {
4673
+ syntax: "*";
4674
+ inherits: false;
4675
+ initial-value: 1;
4676
+ }
4677
+ @property --tw-scale-z {
4678
+ syntax: "*";
4679
+ inherits: false;
4680
+ initial-value: 1;
3435
4681
  }
3436
4682
  @keyframes spin {
3437
4683
  to {
@@ -3446,6 +4692,8 @@
3446
4692
  @layer properties {
3447
4693
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3448
4694
  *, ::before, ::after, ::backdrop {
4695
+ --tw-border-spacing-x: 0;
4696
+ --tw-border-spacing-y: 0;
3449
4697
  --tw-translate-x: 0;
3450
4698
  --tw-translate-y: 0;
3451
4699
  --tw-translate-z: 0;
@@ -3455,6 +4703,7 @@
3455
4703
  --tw-skew-x: initial;
3456
4704
  --tw-skew-y: initial;
3457
4705
  --tw-space-y-reverse: 0;
4706
+ --tw-space-x-reverse: 0;
3458
4707
  --tw-divide-x-reverse: 0;
3459
4708
  --tw-border-style: solid;
3460
4709
  --tw-divide-y-reverse: 0;
@@ -3515,6 +4764,9 @@
3515
4764
  --tw-duration: initial;
3516
4765
  --tw-ease: initial;
3517
4766
  --tw-content: "";
4767
+ --tw-scale-x: 1;
4768
+ --tw-scale-y: 1;
4769
+ --tw-scale-z: 1;
3518
4770
  }
3519
4771
  }
3520
4772
  }