@texturehq/edges 0.1.7 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components.manifest.json +556 -7
  2. package/dist/generated/tailwind-tokens-dark.css +190 -0
  3. package/dist/generated/tailwind-tokens-light.css +190 -0
  4. package/dist/index.cjs +6 -5
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +1189 -129
  7. package/dist/index.d.ts +1189 -129
  8. package/dist/index.js +6 -5
  9. package/dist/index.js.map +1 -1
  10. package/dist/styles/animations.css +132 -0
  11. package/dist/styles/computed.css +137 -0
  12. package/dist/styles/utilities.css +13 -0
  13. package/dist/styles.css +1664 -661
  14. package/dist/theme.css +26 -1102
  15. package/package.json +44 -16
  16. package/scripts/validate-tokens.js +177 -0
package/dist/styles.css CHANGED
@@ -1,63 +1,485 @@
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-blue-50: oklch(0.97 0.014 237.69);
30
+ --color-blue-100: oklch(0.932 0.032 241.935);
31
+ --color-blue-200: oklch(0.882 0.059 243.157);
32
+ --color-blue-500: oklch(0.623 0.214 250.546);
33
+ --color-blue-600: oklch(0.546 0.245 253.739);
34
+ --color-blue-800: oklch(0.424 0.199 255.585);
35
+ --color-yellow-50: oklch(0.987 0.024 102.851);
36
+ --color-yellow-100: oklch(0.973 0.071 103.193);
37
+ --color-yellow-200: oklch(0.945 0.129 101.54);
38
+ --color-yellow-500: oklch(0.795 0.184 86.047);
39
+ --color-yellow-600: oklch(0.681 0.162 75.834);
40
+ --color-yellow-800: oklch(0.456 0.111 61.896);
41
+ --color-brand-primary: #444ae1;
42
+ --color-brand-light: #f7f7ff;
43
+ --color-brand-dark: #363ccb;
44
+ --color-neutral-white: #ffffff;
45
+ --color-neutral-black: #000000;
46
+ --spacing-0: 0px;
47
+ --spacing-1: 0.25rem;
48
+ --spacing-2: 0.5rem;
49
+ --spacing-3: 0.75rem;
50
+ --spacing-4: 1rem;
51
+ --spacing-5: 1.25rem;
52
+ --spacing-6: 1.5rem;
53
+ --spacing-7: 1.75rem;
54
+ --spacing-8: 2rem;
55
+ --spacing-9: 2.25rem;
56
+ --spacing-10: 2.5rem;
57
+ --spacing-12: 3rem;
58
+ --spacing-14: 3.5rem;
59
+ --spacing-16: 4rem;
60
+ --spacing-20: 5rem;
61
+ --spacing-24: 6rem;
62
+ --spacing-28: 7rem;
63
+ --spacing-32: 8rem;
64
+ --spacing-40: 10rem;
65
+ --spacing-48: 12rem;
66
+ --spacing-64: 16rem;
67
+ --spacing-80: 20rem;
68
+ --spacing-96: 24rem;
69
+ --radius-none: 0px;
70
+ --radius-sm: 0.25rem;
71
+ --radius-md: 0.375rem;
72
+ --radius-lg: 0.5rem;
73
+ --radius-xl: 0.75rem;
74
+ --radius-full: 9999px;
75
+ --font-weight-light: 300;
76
+ --font-weight-normal: 400;
77
+ --font-weight-medium: 500;
78
+ --font-weight-semibold: 600;
79
+ --font-weight-bold: 700;
80
+ --color-background-surface: #ffffff;
81
+ --color-background-muted: #f3f4f6;
82
+ --color-background-hover: #f3f4f6;
83
+ --color-background-selected: #d1d5db;
84
+ --color-background-input: #ffffff;
85
+ --color-text-body: #333333;
86
+ --color-text-heading: #111827;
87
+ --color-text-muted: #4b5563;
88
+ --color-text-caption: #6b7280;
89
+ --color-text-placeholder: #9ca3af;
90
+ --color-text-disabled: #9ca3af;
91
+ --color-text-link-default: #444ae1;
92
+ --color-text-link-hover: #363ccb;
93
+ --color-text-onPrimary: #ffffff;
94
+ --color-border-default: #e5e7eb;
95
+ --color-border-focus: #111827;
96
+ --color-border-muted: #e5e7eb;
97
+ --color-border-input: #d1d5db;
98
+ --color-feedback-success-text: #065f46;
99
+ --color-feedback-success-background: #d1fae5;
100
+ --color-feedback-success-border: #10b981;
101
+ --color-feedback-error-text: #b91c1c;
102
+ --color-feedback-error-background: #fee2e2;
103
+ --color-feedback-error-border: #ef4444;
104
+ --color-feedback-warning-text: #92400e;
105
+ --color-feedback-warning-background: #fef3c7;
106
+ --color-feedback-warning-border: #f59e0b;
107
+ --color-feedback-info-text: #2563eb;
108
+ --color-feedback-info-background: #dbeafe;
109
+ --color-feedback-info-border: #93c5fd;
110
+ --color-action-primary: #444ae1;
111
+ --color-action-primary-hover: #383ccb;
112
+ --color-action-secondary: #333333;
113
+ --control-sm: 0.75rem;
114
+ --control-md: 0.875rem;
115
+ --control-lg: 1rem;
116
+ --control-xl: 1.125rem;
117
+ --control-sm-height: calc(var(--control-sm) * 2.75);
118
+ --control-md-height: calc(var(--control-md) * 2.75);
119
+ --control-lg-height: calc(var(--control-lg) * 3);
120
+ --control-xl-height: calc(var(--control-xl) * 3);
121
+ --control-padding-sm: 0.75rem;
122
+ --control-padding-md: 1rem;
123
+ --control-padding-lg: 1.25rem;
124
+ --control-padding-xl: 1.5rem;
125
+ --control-gap-sm: 0.25rem;
126
+ --control-gap-md: 0.375rem;
127
+ --control-gap-lg: 0.5rem;
128
+ --control-gap-xl: 0.625rem;
129
+ --control-border-radius: var(--border-radius-lg);
130
+ --control-text-sm: var(--text-xs);
131
+ --control-text-md: var(--text-sm);
132
+ --control-text-lg: var(--text-base);
133
+ --control-text-xl: var(--text-lg);
134
+ --control-hover-opacity: 0.9;
135
+ --control-focus-ring-color: var(--color-neutral-black);
136
+ --control-focus-ring-color-error: var(--color-feedback-error-border);
137
+ --control-transition-duration: 150ms;
138
+ --control-transition-timing: var(--ease-in-out);
139
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
140
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
141
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
142
+ "Courier New", monospace;
143
+ --color-orange-50: oklch(98% 0.016 73.684);
144
+ --color-orange-200: oklch(90.1% 0.076 70.697);
145
+ --color-orange-600: oklch(64.6% 0.222 41.116);
146
+ --color-orange-800: oklch(47% 0.157 37.304);
147
+ --color-purple-50: oklch(97.7% 0.014 308.299);
148
+ --color-purple-600: oklch(55.8% 0.288 302.321);
149
+ --color-slate-300: oklch(86.9% 0.022 252.894);
150
+ --color-slate-600: oklch(44.6% 0.043 257.281);
151
+ --color-slate-700: oklch(37.2% 0.044 257.287);
152
+ --color-slate-800: oklch(27.9% 0.041 260.031);
153
+ --color-zinc-100: oklch(96.7% 0.001 286.375);
154
+ --color-zinc-200: oklch(92% 0.004 286.32);
155
+ --color-zinc-300: oklch(87.1% 0.006 286.286);
156
+ --color-zinc-400: oklch(70.5% 0.015 286.067);
157
+ --color-zinc-600: oklch(44.2% 0.017 285.786);
158
+ --color-zinc-700: oklch(37% 0.013 285.805);
159
+ --color-zinc-900: oklch(21% 0.006 285.885);
160
+ --spacing: 0.25rem;
161
+ --container-xs: 20rem;
162
+ --container-sm: 24rem;
163
+ --container-md: 28rem;
164
+ --container-lg: 32rem;
165
+ --container-xl: 36rem;
166
+ --container-4xl: 56rem;
167
+ --container-6xl: 72rem;
168
+ --text-xs: 0.75rem;
169
+ --text-xs--line-height: calc(1 / 0.75);
170
+ --text-sm: 0.875rem;
171
+ --text-sm--line-height: calc(1.25 / 0.875);
172
+ --text-base: 1rem;
173
+ --text-base--line-height: calc(1.5 / 1);
174
+ --text-lg: 1.125rem;
175
+ --text-lg--line-height: calc(1.75 / 1.125);
176
+ --text-xl: 1.25rem;
177
+ --text-xl--line-height: calc(1.75 / 1.25);
178
+ --text-2xl: 1.5rem;
179
+ --text-2xl--line-height: calc(2 / 1.5);
180
+ --text-3xl: 1.875rem;
181
+ --text-3xl--line-height: calc(2.25 / 1.875);
182
+ --text-4xl: 2.25rem;
183
+ --text-4xl--line-height: calc(2.5 / 2.25);
184
+ --tracking-tight: -0.025em;
185
+ --tracking-wider: 0.05em;
186
+ --leading-relaxed: 1.625;
187
+ --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
188
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
189
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
190
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
191
+ --animate-spin: spin 1s linear infinite;
192
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
193
+ --blur-sm: 8px;
194
+ --blur-md: 12px;
195
+ --blur-2xl: 40px;
196
+ --default-transition-duration: 150ms;
197
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
198
+ --default-font-family: var(--font-sans);
199
+ --default-mono-font-family: var(--font-mono);
200
+ }
201
+ .dark {
202
+ --color-white: #ffffff;
203
+ --color-black: #000000;
204
+ --color-gray-50: #f9fafb;
205
+ --color-gray-100: #f3f4f6;
206
+ --color-gray-200: #e5e7eb;
207
+ --color-gray-300: #d1d5db;
208
+ --color-gray-400: #9ca3af;
209
+ --color-gray-500: #6b7280;
210
+ --color-gray-600: #4b5563;
211
+ --color-gray-700: #374151;
212
+ --color-gray-800: #1f2937;
213
+ --color-gray-900: #111827;
214
+ --color-gray-950: #030712;
215
+ --color-red-50: oklch(0.971 0.013 17.38);
216
+ --color-red-100: oklch(0.936 0.032 17.717);
217
+ --color-red-200: oklch(0.885 0.062 18.334);
218
+ --color-red-300: oklch(0.808 0.114 19.571);
219
+ --color-red-400: oklch(0.704 0.191 22.216);
220
+ --color-red-500: oklch(0.637 0.237 25.331);
221
+ --color-red-600: oklch(0.577 0.245 27.325);
222
+ --color-red-700: oklch(0.505 0.213 27.518);
223
+ --color-red-800: oklch(0.444 0.177 26.899);
224
+ --color-red-900: oklch(0.396 0.141 25.723);
225
+ --color-red-950: oklch(0.258 0.092 26.042);
226
+ --color-green-50: oklch(0.982 0.018 131.68);
227
+ --color-green-100: oklch(0.947 0.052 132.272);
228
+ --color-green-200: oklch(0.895 0.111 131.438);
229
+ --color-green-300: oklch(0.82 0.178 132.63);
230
+ --color-green-400: oklch(0.718 0.209 130.901);
231
+ --color-green-500: oklch(0.627 0.194 130.331);
232
+ --color-green-600: oklch(0.527 0.19 131.688);
233
+ --color-green-700: oklch(0.437 0.154 132.474);
234
+ --color-green-800: oklch(0.366 0.121 132.109);
235
+ --color-green-900: oklch(0.314 0.095 133.748);
236
+ --color-green-950: oklch(0.197 0.06 130.709);
237
+ --color-blue-50: oklch(0.97 0.014 237.69);
238
+ --color-blue-100: oklch(0.932 0.032 241.935);
239
+ --color-blue-200: oklch(0.882 0.059 243.157);
240
+ --color-blue-300: oklch(0.809 0.105 244.039);
241
+ --color-blue-400: oklch(0.707 0.165 246.422);
242
+ --color-blue-500: oklch(0.623 0.214 250.546);
243
+ --color-blue-600: oklch(0.546 0.245 253.739);
244
+ --color-blue-700: oklch(0.488 0.243 255.638);
245
+ --color-blue-800: oklch(0.424 0.199 255.585);
246
+ --color-blue-900: oklch(0.368 0.146 254.128);
247
+ --color-blue-950: oklch(0.262 0.09 254.128);
248
+ --color-yellow-50: oklch(0.987 0.024 102.851);
249
+ --color-yellow-100: oklch(0.973 0.071 103.193);
250
+ --color-yellow-200: oklch(0.945 0.129 101.54);
251
+ --color-yellow-300: oklch(0.905 0.182 98.111);
252
+ --color-yellow-400: oklch(0.852 0.199 91.936);
253
+ --color-yellow-500: oklch(0.795 0.184 86.047);
254
+ --color-yellow-600: oklch(0.681 0.162 75.834);
255
+ --color-yellow-700: oklch(0.554 0.135 66.191);
256
+ --color-yellow-800: oklch(0.456 0.111 61.896);
257
+ --color-yellow-900: oklch(0.398 0.092 60.236);
258
+ --color-yellow-950: oklch(0.265 0.06 56.259);
259
+ --color-brand-primary: #444ae1;
260
+ --color-brand-light: #f7f7ff;
261
+ --color-brand-dark: #363ccb;
262
+ --color-brand-background: #f6f7ff;
263
+ --color-neutral-white: #ffffff;
264
+ --color-neutral-black: #000000;
265
+ --spacing-0: 0px;
266
+ --spacing-1: 0.25rem;
267
+ --spacing-2: 0.5rem;
268
+ --spacing-3: 0.75rem;
269
+ --spacing-4: 1rem;
270
+ --spacing-5: 1.25rem;
271
+ --spacing-6: 1.5rem;
272
+ --spacing-7: 1.75rem;
273
+ --spacing-8: 2rem;
274
+ --spacing-9: 2.25rem;
275
+ --spacing-10: 2.5rem;
276
+ --spacing-11: 2.75rem;
277
+ --spacing-12: 3rem;
278
+ --spacing-14: 3.5rem;
279
+ --spacing-16: 4rem;
280
+ --spacing-20: 5rem;
281
+ --spacing-24: 6rem;
282
+ --spacing-28: 7rem;
283
+ --spacing-32: 8rem;
284
+ --spacing-36: 9rem;
285
+ --spacing-40: 10rem;
286
+ --spacing-44: 11rem;
287
+ --spacing-48: 12rem;
288
+ --spacing-52: 13rem;
289
+ --spacing-56: 14rem;
290
+ --spacing-60: 15rem;
291
+ --spacing-64: 16rem;
292
+ --spacing-72: 18rem;
293
+ --spacing-80: 20rem;
294
+ --spacing-96: 24rem;
295
+ --radius-none: 0px;
296
+ --radius-xs: 0.125rem;
297
+ --radius-sm: 0.25rem;
298
+ --radius-md: 0.375rem;
299
+ --radius-lg: 0.5rem;
300
+ --radius-xl: 0.75rem;
301
+ --radius-2xl: 1rem;
302
+ --radius-3xl: 1.5rem;
303
+ --radius-4xl: 2rem;
304
+ --radius-full: 9999px;
305
+ --font-family-sans: Inter, system-ui, sans-serif;
306
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
307
+ --font-family-serif: Merriweather, serif;
308
+ --font-family-mono: 'Fira Code', monospace;
309
+ --font-size-xs: 0.75rem;
310
+ --font-size-sm: 0.875rem;
311
+ --font-size-base: 1rem;
312
+ --font-size-lg: 1.125rem;
313
+ --font-size-xl: 1.25rem;
314
+ --font-size-2xl: 1.5rem;
315
+ --font-size-3xl: 1.875rem;
316
+ --font-size-4xl: 2.25rem;
317
+ --font-size-5xl: 3rem;
318
+ --font-size-6xl: 3.75rem;
319
+ --font-size-7xl: 4.5rem;
320
+ --font-size-8xl: 6rem;
321
+ --font-size-9xl: 8rem;
322
+ --font-weight-thin: 100;
323
+ --font-weight-extralight: 200;
324
+ --font-weight-light: 300;
325
+ --font-weight-normal: 400;
326
+ --font-weight-medium: 500;
327
+ --font-weight-semibold: 600;
328
+ --font-weight-bold: 700;
329
+ --font-weight-extrabold: 800;
330
+ --font-weight-black: 900;
331
+ --font-lineheight-tight: 1.25;
332
+ --font-lineheight-snug: 1.375;
333
+ --font-lineheight-normal: 1.5;
334
+ --font-lineheight-relaxed: 1.625;
335
+ --font-lineheight-loose: 2;
336
+ --font-letterspacing-tighter: -0.05em;
337
+ --font-letterspacing-tight: -0.025em;
338
+ --font-letterspacing-normal: 0em;
339
+ --font-letterspacing-wide: 0.025em;
340
+ --font-letterspacing-wider: 0.05em;
341
+ --font-letterspacing-widest: 0.1em;
342
+ --color-background-body: #151a30;
343
+ --color-background-surface: #1a2038;
344
+ --color-background-muted: #374151;
345
+ --color-background-hover: #4b5563;
346
+ --color-background-selected: #6b7280;
347
+ --color-background-modal: rgba(255, 255, 255, 0.12);
348
+ --color-background-input: rgba(255, 255, 255, 0.05);
349
+ --color-text-body: #ededef;
350
+ --color-text-heading: #ffffff;
351
+ --color-text-muted: #9ca3af;
352
+ --color-text-caption: #d1d5db;
353
+ --color-text-placeholder: #9ca3af;
354
+ --color-text-disabled: #9ca3af;
355
+ --color-text-link-default: #b4b9ff;
356
+ --color-text-link-hover: #c0c5ff;
357
+ --color-text-onPrimary: #1f2937;
358
+ --color-border-default: #2e3a59;
359
+ --color-border-focus: #e5e7eb;
360
+ --color-border-muted: #4b5563;
361
+ --color-border-input: #6b7280;
362
+ --color-feedback-success-text: #d1fae5;
363
+ --color-feedback-success-background: #064e3b;
364
+ --color-feedback-success-border: #059669;
365
+ --color-feedback-error-text: #f87171;
366
+ --color-feedback-error-background: #7f1d1d;
367
+ --color-feedback-error-border: #dc2626;
368
+ --color-feedback-warning-text: #fbbf24;
369
+ --color-feedback-warning-background: #78350f;
370
+ --color-feedback-warning-border: #d97706;
371
+ --color-feedback-info-text: #60a5fa;
372
+ --color-feedback-info-background: #1e3a8a;
373
+ --color-feedback-info-border: #2563eb;
374
+ --color-action-primary: #7a8ee1;
375
+ --color-action-primary-hover: #6a6fcc;
376
+ --color-action-primary-text: #ffffff;
377
+ --color-action-secondary: #e5e7eb;
378
+ --color-action-secondary-hover: #f3f4f6;
379
+ --color-action-secondary-text: #111827;
380
+ }
381
+ @keyframes wave {
382
+ 0% {
383
+ transform: translateX(-100%);
384
+ }
385
+ 50%, 100% {
386
+ transform: translateX(100%);
387
+ }
388
+ }
389
+ @keyframes slide-in-from-right {
390
+ from {
391
+ transform: translateX(100%);
392
+ }
393
+ to {
394
+ transform: translateX(0);
395
+ }
396
+ }
397
+ @keyframes slide-in-from-left {
398
+ from {
399
+ transform: translateX(-100%);
400
+ }
401
+ to {
402
+ transform: translateX(0);
403
+ }
404
+ }
405
+ @keyframes slide-out-to-right {
406
+ from {
407
+ transform: translateX(0);
408
+ }
409
+ to {
410
+ transform: translateX(100%);
411
+ }
412
+ }
413
+ @keyframes slide-out-to-left {
414
+ from {
415
+ transform: translateX(0);
416
+ }
417
+ to {
418
+ transform: translateX(-100%);
419
+ }
420
+ }
421
+ @keyframes fade-in {
422
+ from {
423
+ opacity: 0;
424
+ }
425
+ to {
426
+ opacity: 1;
427
+ }
428
+ }
429
+ @keyframes fade-out {
430
+ from {
431
+ opacity: 1;
432
+ }
433
+ to {
434
+ opacity: 0;
435
+ }
436
+ }
437
+ @keyframes spin {
438
+ to {
439
+ transform: rotate(360deg);
440
+ }
441
+ }
442
+ @keyframes ping {
443
+ 75%, 100% {
444
+ transform: scale(2);
445
+ opacity: 0;
446
+ }
447
+ }
448
+ @keyframes pulse {
449
+ 50% {
450
+ opacity: 0.5;
451
+ }
452
+ }
453
+ @keyframes bounce {
454
+ 0%, 100% {
455
+ transform: translateY(-25%);
456
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
457
+ }
458
+ 50% {
459
+ transform: none;
460
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
59
461
  }
60
462
  }
463
+ .slide-in-from-right {
464
+ animation: slide-in-from-right 0.3s ease-out;
465
+ }
466
+ .slide-in-from-left {
467
+ animation: slide-in-from-left 0.3s ease-out;
468
+ }
469
+ .slide-out-to-right {
470
+ animation: slide-out-to-right 0.15s ease-in;
471
+ }
472
+ .slide-out-to-left {
473
+ animation: slide-out-to-left 0.15s ease-in;
474
+ }
475
+ .fade-in {
476
+ animation: fade-in 0.2s ease-out;
477
+ }
478
+ .fade-out {
479
+ animation: fade-out 0.15s ease-in;
480
+ }
481
+ @layer theme, base, components, utilities;
482
+ @layer theme;
61
483
  @layer base {
62
484
  *, ::after, ::before, ::backdrop, ::file-selector-button {
63
485
  box-sizing: border-box;
@@ -259,71 +681,113 @@
259
681
  position: sticky;
260
682
  }
261
683
  .inset-0 {
262
- inset: calc(0.25rem * 0);
684
+ inset: var(--spacing-0);
263
685
  }
264
686
  .inset-y-\[1px\] {
265
687
  inset-block: 1px;
266
688
  }
267
689
  .-top-2 {
268
- top: calc(0.25rem * -2);
690
+ top: calc(var(--spacing-2) * -1);
691
+ }
692
+ .-top-5 {
693
+ top: calc(var(--spacing-5) * -1);
269
694
  }
270
695
  .-top-\[5px\] {
271
696
  top: calc(5px * -1);
272
697
  }
273
698
  .top-0 {
274
- top: calc(0.25rem * 0);
699
+ top: var(--spacing-0);
275
700
  }
276
701
  .top-1\/2 {
277
702
  top: calc(1/2 * 100%);
278
703
  }
279
704
  .top-2 {
280
- top: calc(0.25rem * 2);
705
+ top: var(--spacing-2);
706
+ }
707
+ .top-4 {
708
+ top: var(--spacing-4);
281
709
  }
282
710
  .-right-2 {
283
- right: calc(0.25rem * -2);
711
+ right: calc(var(--spacing-2) * -1);
712
+ }
713
+ .right-0 {
714
+ right: var(--spacing-0);
715
+ }
716
+ .right-0\.5 {
717
+ right: calc(var(--spacing) * 0.5);
718
+ }
719
+ .right-1 {
720
+ right: var(--spacing-1);
284
721
  }
285
722
  .right-2 {
286
- right: calc(0.25rem * 2);
723
+ right: var(--spacing-2);
287
724
  }
288
725
  .right-3 {
289
- right: calc(0.25rem * 3);
726
+ right: var(--spacing-3);
290
727
  }
291
728
  .right-4 {
292
- right: calc(0.25rem * 4);
729
+ right: var(--spacing-4);
293
730
  }
294
731
  .right-\[1px\] {
295
732
  right: 1px;
296
733
  }
297
734
  .-bottom-2 {
298
- bottom: calc(0.25rem * -2);
735
+ bottom: calc(var(--spacing-2) * -1);
299
736
  }
300
737
  .bottom-0 {
301
- bottom: calc(0.25rem * 0);
738
+ bottom: var(--spacing-0);
739
+ }
740
+ .bottom-0\.5 {
741
+ bottom: calc(var(--spacing) * 0.5);
742
+ }
743
+ .bottom-1 {
744
+ bottom: var(--spacing-1);
745
+ }
746
+ .bottom-4 {
747
+ bottom: var(--spacing-4);
302
748
  }
303
749
  .-left-2 {
304
- left: calc(0.25rem * -2);
750
+ left: calc(var(--spacing-2) * -1);
305
751
  }
306
752
  .left-0 {
307
- left: calc(0.25rem * 0);
753
+ left: var(--spacing-0);
754
+ }
755
+ .left-1\/2 {
756
+ left: calc(1/2 * 100%);
308
757
  }
309
758
  .left-2 {
310
- left: calc(0.25rem * 2);
759
+ left: var(--spacing-2);
311
760
  }
312
761
  .left-3 {
313
- left: calc(0.25rem * 3);
762
+ left: var(--spacing-3);
314
763
  }
315
764
  .left-4 {
316
- left: calc(0.25rem * 4);
765
+ left: var(--spacing-4);
317
766
  }
318
767
  .left-full {
319
768
  left: 100%;
320
769
  }
770
+ .isolate {
771
+ isolation: isolate;
772
+ }
773
+ .z-0 {
774
+ z-index: 0;
775
+ }
321
776
  .z-10 {
322
777
  z-index: 10;
323
778
  }
779
+ .z-20 {
780
+ z-index: 20;
781
+ }
782
+ .z-30 {
783
+ z-index: 30;
784
+ }
324
785
  .z-50 {
325
786
  z-index: 50;
326
787
  }
788
+ .col-span-full {
789
+ grid-column: 1 / -1;
790
+ }
327
791
  .container {
328
792
  width: 100%;
329
793
  @media (width >= 40rem) {
@@ -343,49 +807,67 @@
343
807
  }
344
808
  }
345
809
  .-mx-1 {
346
- margin-inline: calc(0.25rem * -1);
810
+ margin-inline: calc(var(--spacing-1) * -1);
811
+ }
812
+ .mx-1 {
813
+ margin-inline: var(--spacing-1);
347
814
  }
348
815
  .mx-2 {
349
- margin-inline: calc(0.25rem * 2);
816
+ margin-inline: var(--spacing-2);
817
+ }
818
+ .mx-auto {
819
+ margin-inline: auto;
350
820
  }
351
821
  .-my-0\.5 {
352
- margin-block: calc(0.25rem * -0.5);
822
+ margin-block: calc(var(--spacing) * -0.5);
353
823
  }
354
824
  .my-6 {
355
- margin-block: calc(0.25rem * 6);
825
+ margin-block: var(--spacing-6);
356
826
  }
357
827
  .-mt-px {
358
828
  margin-top: -1px;
359
829
  }
360
830
  .mt-1 {
361
- margin-top: calc(0.25rem * 1);
831
+ margin-top: var(--spacing-1);
362
832
  }
363
833
  .mt-2 {
364
- margin-top: calc(0.25rem * 2);
834
+ margin-top: var(--spacing-2);
365
835
  }
366
836
  .mt-3 {
367
- margin-top: calc(0.25rem * 3);
837
+ margin-top: var(--spacing-3);
368
838
  }
369
839
  .mt-4 {
370
- margin-top: calc(0.25rem * 4);
840
+ margin-top: var(--spacing-4);
841
+ }
842
+ .mt-6 {
843
+ margin-top: var(--spacing-6);
371
844
  }
372
845
  .mr-1 {
373
- margin-right: calc(0.25rem * 1);
846
+ margin-right: var(--spacing-1);
847
+ }
848
+ .mr-1\.5 {
849
+ margin-right: calc(var(--spacing) * 1.5);
374
850
  }
375
851
  .mr-2 {
376
- margin-right: calc(0.25rem * 2);
852
+ margin-right: var(--spacing-2);
377
853
  }
378
854
  .mb-1 {
379
- margin-bottom: calc(0.25rem * 1);
855
+ margin-bottom: var(--spacing-1);
380
856
  }
381
857
  .mb-2 {
382
- margin-bottom: calc(0.25rem * 2);
858
+ margin-bottom: var(--spacing-2);
383
859
  }
384
860
  .mb-3 {
385
- margin-bottom: calc(0.25rem * 3);
861
+ margin-bottom: var(--spacing-3);
386
862
  }
387
863
  .mb-4 {
388
- margin-bottom: calc(0.25rem * 4);
864
+ margin-bottom: var(--spacing-4);
865
+ }
866
+ .-ml-px {
867
+ margin-left: -1px;
868
+ }
869
+ .ml-2 {
870
+ margin-left: var(--spacing-2);
389
871
  }
390
872
  .ml-auto {
391
873
  margin-left: auto;
@@ -399,6 +881,9 @@
399
881
  .block {
400
882
  display: block;
401
883
  }
884
+ .contents {
885
+ display: contents;
886
+ }
402
887
  .flex {
403
888
  display: flex;
404
889
  }
@@ -417,56 +902,71 @@
417
902
  .inline-flex {
418
903
  display: inline-flex;
419
904
  }
905
+ .inline-grid {
906
+ display: inline-grid;
907
+ }
420
908
  .table {
421
909
  display: table;
422
910
  }
423
911
  .h-1\.5 {
424
- height: calc(0.25rem * 1.5);
912
+ height: calc(var(--spacing) * 1.5);
425
913
  }
426
914
  .h-1\/2 {
427
915
  height: calc(1/2 * 100%);
428
916
  }
429
917
  .h-2 {
430
- height: calc(0.25rem * 2);
918
+ height: var(--spacing-2);
919
+ }
920
+ .h-2\.5 {
921
+ height: calc(var(--spacing) * 2.5);
431
922
  }
432
923
  .h-3 {
433
- height: calc(0.25rem * 3);
924
+ height: var(--spacing-3);
434
925
  }
435
926
  .h-4 {
436
- height: calc(0.25rem * 4);
927
+ height: var(--spacing-4);
437
928
  }
438
929
  .h-5 {
439
- height: calc(0.25rem * 5);
930
+ height: var(--spacing-5);
440
931
  }
441
932
  .h-6 {
442
- height: calc(0.25rem * 6);
933
+ height: var(--spacing-6);
443
934
  }
444
935
  .h-7 {
445
- height: calc(0.25rem * 7);
936
+ height: var(--spacing-7);
446
937
  }
447
938
  .h-8 {
448
- height: calc(0.25rem * 8);
939
+ height: var(--spacing-8);
449
940
  }
450
941
  .h-9 {
451
- height: calc(0.25rem * 9);
942
+ height: var(--spacing-9);
452
943
  }
453
944
  .h-10 {
454
- height: calc(0.25rem * 10);
945
+ height: var(--spacing-10);
455
946
  }
456
947
  .h-12 {
457
- height: calc(0.25rem * 12);
948
+ height: var(--spacing-12);
949
+ }
950
+ .h-14 {
951
+ height: var(--spacing-14);
458
952
  }
459
953
  .h-16 {
460
- height: calc(0.25rem * 16);
954
+ height: var(--spacing-16);
461
955
  }
462
956
  .h-20 {
463
- height: calc(0.25rem * 20);
957
+ height: var(--spacing-20);
464
958
  }
465
959
  .h-28 {
466
- height: calc(0.25rem * 28);
960
+ height: var(--spacing-28);
467
961
  }
468
962
  .h-32 {
469
- height: calc(0.25rem * 32);
963
+ height: var(--spacing-32);
964
+ }
965
+ .h-64 {
966
+ height: var(--spacing-64);
967
+ }
968
+ .h-96 {
969
+ height: var(--spacing-96);
470
970
  }
471
971
  .h-\[28px\] {
472
972
  height: 28px;
@@ -474,6 +974,9 @@
474
974
  .h-\[120px\] {
475
975
  height: 120px;
476
976
  }
977
+ .h-\[400px\] {
978
+ height: 400px;
979
+ }
477
980
  .h-\[var\(--control-lg-height\)\] {
478
981
  height: var(--control-lg-height);
479
982
  }
@@ -496,7 +999,7 @@
496
999
  height: 1px;
497
1000
  }
498
1001
  .max-h-48 {
499
- max-height: calc(0.25rem * 48);
1002
+ max-height: var(--spacing-48);
500
1003
  }
501
1004
  .max-h-\[300px\] {
502
1005
  max-height: 300px;
@@ -505,7 +1008,7 @@
505
1008
  max-height: inherit;
506
1009
  }
507
1010
  .min-h-0 {
508
- min-height: calc(0.25rem * 0);
1011
+ min-height: var(--spacing-0);
509
1012
  }
510
1013
  .min-h-\[28px\] {
511
1014
  min-height: 28px;
@@ -513,41 +1016,80 @@
513
1016
  .min-h-\[100px\] {
514
1017
  min-height: 100px;
515
1018
  }
1019
+ .min-h-\[200px\] {
1020
+ min-height: 200px;
1021
+ }
1022
+ .w-1\.5 {
1023
+ width: calc(var(--spacing) * 1.5);
1024
+ }
1025
+ .w-1\/2 {
1026
+ width: calc(1/2 * 100%);
1027
+ }
516
1028
  .w-2 {
517
- width: calc(0.25rem * 2);
1029
+ width: var(--spacing-2);
1030
+ }
1031
+ .w-2\.5 {
1032
+ width: calc(var(--spacing) * 2.5);
1033
+ }
1034
+ .w-2\/3 {
1035
+ width: calc(2/3 * 100%);
518
1036
  }
519
1037
  .w-3 {
520
- width: calc(0.25rem * 3);
1038
+ width: var(--spacing-3);
1039
+ }
1040
+ .w-3\/4 {
1041
+ width: calc(3/4 * 100%);
521
1042
  }
522
1043
  .w-4 {
523
- width: calc(0.25rem * 4);
1044
+ width: var(--spacing-4);
524
1045
  }
525
1046
  .w-5 {
526
- width: calc(0.25rem * 5);
1047
+ width: var(--spacing-5);
527
1048
  }
528
1049
  .w-6 {
529
- width: calc(0.25rem * 6);
1050
+ width: var(--spacing-6);
530
1051
  }
531
1052
  .w-7 {
532
- width: calc(0.25rem * 7);
1053
+ width: var(--spacing-7);
533
1054
  }
534
1055
  .w-8 {
535
- width: calc(0.25rem * 8);
1056
+ width: var(--spacing-8);
536
1057
  }
537
1058
  .w-9 {
538
- width: calc(0.25rem * 9);
1059
+ width: var(--spacing-9);
1060
+ }
1061
+ .w-10 {
1062
+ width: var(--spacing-10);
539
1063
  }
540
1064
  .w-12 {
541
- width: calc(0.25rem * 12);
1065
+ width: var(--spacing-12);
1066
+ }
1067
+ .w-16 {
1068
+ width: var(--spacing-16);
1069
+ }
1070
+ .w-20 {
1071
+ width: var(--spacing-20);
1072
+ }
1073
+ .w-24 {
1074
+ width: var(--spacing-24);
542
1075
  }
543
1076
  .w-32 {
544
- width: calc(0.25rem * 32);
1077
+ width: var(--spacing-32);
1078
+ }
1079
+ .w-40 {
1080
+ width: var(--spacing-40);
1081
+ }
1082
+ .w-48 {
1083
+ width: var(--spacing-48);
1084
+ }
1085
+ .w-64 {
1086
+ width: var(--spacing-64);
545
1087
  }
546
1088
  .w-80 {
547
- width: calc(0.25rem * 80);
1089
+ width: var(--spacing-80);
548
1090
  }
549
1091
  .w-96 {
550
- width: calc(0.25rem * 96);
1092
+ width: var(--spacing-96);
551
1093
  }
552
1094
  .w-\[28rem\] {
553
1095
  width: 28rem;
@@ -571,8 +1113,14 @@
571
1113
  .w-full {
572
1114
  width: 100%;
573
1115
  }
1116
+ .w-px {
1117
+ width: 1px;
1118
+ }
574
1119
  .max-w-4xl {
575
- max-width: 56rem;
1120
+ max-width: var(--container-4xl);
1121
+ }
1122
+ .max-w-6xl {
1123
+ max-width: var(--container-6xl);
576
1124
  }
577
1125
  .max-w-\[200px\] {
578
1126
  max-width: 200px;
@@ -584,25 +1132,31 @@
584
1132
  max-width: 100%;
585
1133
  }
586
1134
  .max-w-lg {
587
- max-width: 32rem;
1135
+ max-width: var(--container-lg);
588
1136
  }
589
1137
  .max-w-md {
590
- max-width: 28rem;
1138
+ max-width: var(--container-md);
1139
+ }
1140
+ .max-w-none {
1141
+ max-width: none;
591
1142
  }
592
1143
  .max-w-sm {
593
- max-width: 24rem;
1144
+ max-width: var(--container-sm);
594
1145
  }
595
1146
  .max-w-xl {
596
- max-width: 36rem;
1147
+ max-width: var(--container-xl);
597
1148
  }
598
1149
  .max-w-xs {
599
- max-width: 20rem;
1150
+ max-width: var(--container-xs);
600
1151
  }
601
1152
  .min-w-0 {
602
- min-width: calc(0.25rem * 0);
1153
+ min-width: var(--spacing-0);
603
1154
  }
604
1155
  .min-w-10 {
605
- min-width: calc(0.25rem * 10);
1156
+ min-width: var(--spacing-10);
1157
+ }
1158
+ .min-w-48 {
1159
+ min-width: var(--spacing-48);
606
1160
  }
607
1161
  .min-w-\[100px\] {
608
1162
  min-width: 100px;
@@ -610,6 +1164,9 @@
610
1164
  .min-w-\[150px\] {
611
1165
  min-width: 150px;
612
1166
  }
1167
+ .min-w-\[180px\] {
1168
+ min-width: 180px;
1169
+ }
613
1170
  .min-w-\[208px\] {
614
1171
  min-width: 208px;
615
1172
  }
@@ -625,11 +1182,29 @@
625
1182
  .grow {
626
1183
  flex-grow: 1;
627
1184
  }
1185
+ .table-auto {
1186
+ table-layout: auto;
1187
+ }
1188
+ .table-fixed {
1189
+ table-layout: fixed;
1190
+ }
628
1191
  .border-collapse {
629
1192
  border-collapse: collapse;
630
1193
  }
1194
+ .border-separate {
1195
+ border-collapse: separate;
1196
+ }
1197
+ .border-spacing-0 {
1198
+ --tw-border-spacing-x: var(--spacing-0);
1199
+ --tw-border-spacing-y: var(--spacing-0);
1200
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1201
+ }
1202
+ .-translate-x-1\/2 {
1203
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
1204
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1205
+ }
631
1206
  .translate-x-0 {
632
- --tw-translate-x: calc(0.25rem * 0);
1207
+ --tw-translate-x: var(--spacing-0);
633
1208
  translate: var(--tw-translate-x) var(--tw-translate-y);
634
1209
  }
635
1210
  .translate-x-\[100\%\] {
@@ -647,10 +1222,10 @@
647
1222
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
648
1223
  }
649
1224
  .animate-pulse {
650
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1225
+ animation: var(--animate-pulse);
651
1226
  }
652
1227
  .animate-spin {
653
- animation: spin 1s linear infinite;
1228
+ animation: var(--animate-spin);
654
1229
  }
655
1230
  .cursor-default {
656
1231
  cursor: default;
@@ -667,12 +1242,27 @@
667
1242
  .resize {
668
1243
  resize: both;
669
1244
  }
1245
+ .resize-none {
1246
+ resize: none;
1247
+ }
670
1248
  .resize-x {
671
1249
  resize: horizontal;
672
1250
  }
673
1251
  .resize-y {
674
1252
  resize: vertical;
675
1253
  }
1254
+ .list-inside {
1255
+ list-style-position: inside;
1256
+ }
1257
+ .list-decimal {
1258
+ list-style-type: decimal;
1259
+ }
1260
+ .list-disc {
1261
+ list-style-type: disc;
1262
+ }
1263
+ .list-none {
1264
+ list-style-type: none;
1265
+ }
676
1266
  .\[appearance\:textfield\] {
677
1267
  -webkit-appearance: textfield;
678
1268
  -moz-appearance: textfield;
@@ -713,6 +1303,9 @@
713
1303
  .items-center {
714
1304
  align-items: center;
715
1305
  }
1306
+ .items-end {
1307
+ align-items: flex-end;
1308
+ }
716
1309
  .items-start {
717
1310
  align-items: flex-start;
718
1311
  }
@@ -728,50 +1321,47 @@
728
1321
  .justify-start {
729
1322
  justify-content: flex-start;
730
1323
  }
731
- .\!gap-1 {
732
- gap: calc(0.25rem * 1) !important;
733
- }
734
1324
  .gap-0 {
735
- gap: calc(0.25rem * 0);
1325
+ gap: var(--spacing-0);
736
1326
  }
737
1327
  .gap-0\.5 {
738
- gap: calc(0.25rem * 0.5);
1328
+ gap: calc(var(--spacing) * 0.5);
739
1329
  }
740
1330
  .gap-1 {
741
- gap: calc(0.25rem * 1);
1331
+ gap: var(--spacing-1);
742
1332
  }
743
1333
  .gap-1\.5 {
744
- gap: calc(0.25rem * 1.5);
1334
+ gap: calc(var(--spacing) * 1.5);
745
1335
  }
746
1336
  .gap-2 {
747
- gap: calc(0.25rem * 2);
1337
+ gap: var(--spacing-2);
748
1338
  }
749
1339
  .gap-2\.5 {
750
- gap: calc(0.25rem * 2.5);
1340
+ gap: calc(var(--spacing) * 2.5);
751
1341
  }
752
1342
  .gap-3 {
753
- gap: calc(0.25rem * 3);
1343
+ gap: var(--spacing-3);
754
1344
  }
755
1345
  .gap-4 {
756
- gap: calc(0.25rem * 4);
1346
+ gap: var(--spacing-4);
757
1347
  }
758
1348
  .gap-5 {
759
- gap: calc(0.25rem * 5);
1349
+ gap: var(--spacing-5);
760
1350
  }
761
1351
  .gap-6 {
762
- gap: calc(0.25rem * 6);
1352
+ gap: var(--spacing-6);
763
1353
  }
764
1354
  .gap-7 {
765
- gap: calc(0.25rem * 7);
1355
+ gap: var(--spacing-7);
766
1356
  }
767
1357
  .gap-8 {
768
- gap: calc(0.25rem * 8);
1358
+ gap: var(--spacing-8);
769
1359
  }
770
1360
  .gap-9 {
771
- gap: calc(0.25rem * 9);
1361
+ gap: var(--spacing-9);
772
1362
  }
773
1363
  .gap-10 {
774
- gap: calc(0.25rem * 10);
1364
+ gap: var(--spacing-10);
775
1365
  }
776
1366
  .gap-\[var\(--control-gap-lg\)\] {
777
1367
  gap: var(--control-gap-lg);
@@ -788,50 +1378,57 @@
788
1378
  .space-y-1 {
789
1379
  :where(& > :not(:last-child)) {
790
1380
  --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)));
1381
+ margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
1382
+ margin-block-end: calc(var(--spacing-1) * calc(1 - var(--tw-space-y-reverse)));
793
1383
  }
794
1384
  }
795
1385
  .space-y-1\.5 {
796
1386
  :where(& > :not(:last-child)) {
797
1387
  --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)));
1388
+ margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
1389
+ margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
800
1390
  }
801
1391
  }
802
1392
  .space-y-2 {
803
1393
  :where(& > :not(:last-child)) {
804
1394
  --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)));
1395
+ margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
1396
+ margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
807
1397
  }
808
1398
  }
809
1399
  .space-y-3 {
810
1400
  :where(& > :not(:last-child)) {
811
1401
  --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)));
1402
+ margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
1403
+ margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
814
1404
  }
815
1405
  }
816
1406
  .space-y-4 {
817
1407
  :where(& > :not(:last-child)) {
818
1408
  --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)));
1409
+ margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
1410
+ margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
821
1411
  }
822
1412
  }
823
1413
  .space-y-6 {
824
1414
  :where(& > :not(:last-child)) {
825
1415
  --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)));
1416
+ margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
1417
+ margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
828
1418
  }
829
1419
  }
830
1420
  .space-y-8 {
831
1421
  :where(& > :not(:last-child)) {
832
1422
  --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)));
1423
+ margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
1424
+ margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
1425
+ }
1426
+ }
1427
+ .-space-x-2 {
1428
+ :where(& > :not(:last-child)) {
1429
+ --tw-space-x-reverse: 0;
1430
+ margin-inline-start: calc(calc(var(--spacing-2) * -1) * var(--tw-space-x-reverse));
1431
+ margin-inline-end: calc(calc(var(--spacing-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
835
1432
  }
836
1433
  }
837
1434
  .divide-x {
@@ -853,7 +1450,7 @@
853
1450
  }
854
1451
  .divide-border-default {
855
1452
  :where(& > :not(:last-child)) {
856
- border-color: #e5e7eb;
1453
+ border-color: var(--color-border-default);
857
1454
  }
858
1455
  }
859
1456
  .self-center {
@@ -870,18 +1467,21 @@
870
1467
  .overflow-hidden {
871
1468
  overflow: hidden;
872
1469
  }
1470
+ .overflow-visible {
1471
+ overflow: visible;
1472
+ }
873
1473
  .overflow-x-auto {
874
1474
  overflow-x: auto;
875
1475
  }
876
1476
  .overflow-y-auto {
877
1477
  overflow-y: auto;
878
1478
  }
1479
+ .overflow-y-hidden {
1480
+ overflow-y: hidden;
1481
+ }
879
1482
  .overscroll-contain {
880
1483
  overscroll-behavior: contain;
881
1484
  }
882
- .\!rounded-md {
883
- border-radius: 0.375rem !important;
884
- }
885
1485
  .rounded {
886
1486
  border-radius: 0.25rem;
887
1487
  }
@@ -897,32 +1497,38 @@
897
1497
  .rounded-full {
898
1498
  border-radius: calc(infinity * 1px);
899
1499
  }
1500
+ .rounded-full {
1501
+ border-radius: var(--radius-full);
1502
+ }
900
1503
  .rounded-lg {
901
- border-radius: 0.5rem;
1504
+ border-radius: var(--radius-lg);
902
1505
  }
903
1506
  .rounded-md {
904
- border-radius: 0.375rem;
1507
+ border-radius: var(--radius-md);
905
1508
  }
906
1509
  .rounded-none {
907
1510
  border-radius: 0;
908
1511
  }
1512
+ .rounded-none {
1513
+ border-radius: var(--radius-none);
1514
+ }
909
1515
  .rounded-sm {
910
- border-radius: 0.25rem;
1516
+ border-radius: var(--radius-sm);
911
1517
  }
912
1518
  .rounded-xl {
913
- border-radius: 0.75rem;
1519
+ border-radius: var(--radius-xl);
914
1520
  }
915
1521
  .rounded-l-sm {
916
- border-top-left-radius: 0.25rem;
917
- border-bottom-left-radius: 0.25rem;
1522
+ border-top-left-radius: var(--radius-sm);
1523
+ border-bottom-left-radius: var(--radius-sm);
918
1524
  }
919
1525
  .rounded-r-\[calc\(var\(--control-border-radius\)-1px\)\] {
920
1526
  border-top-right-radius: calc(var(--control-border-radius) - 1px);
921
1527
  border-bottom-right-radius: calc(var(--control-border-radius) - 1px);
922
1528
  }
923
1529
  .rounded-r-sm {
924
- border-top-right-radius: 0.25rem;
925
- border-bottom-right-radius: 0.25rem;
1530
+ border-top-right-radius: var(--radius-sm);
1531
+ border-bottom-right-radius: var(--radius-sm);
926
1532
  }
927
1533
  .border {
928
1534
  border-style: var(--tw-border-style);
@@ -972,6 +1578,10 @@
972
1578
  border-left-style: var(--tw-border-style);
973
1579
  border-left-width: 4px;
974
1580
  }
1581
+ .border-dashed {
1582
+ --tw-border-style: dashed;
1583
+ border-style: dashed;
1584
+ }
975
1585
  .border-none {
976
1586
  --tw-border-style: none;
977
1587
  border-style: none;
@@ -981,82 +1591,109 @@
981
1591
  border-style: solid;
982
1592
  }
983
1593
  .border-action-primary {
984
- border-color: #444ae1;
1594
+ border-color: var(--color-action-primary);
985
1595
  }
986
1596
  .border-action-primary\/20 {
987
- border-color: color-mix(in oklab, #444ae1 20%, transparent);
1597
+ border-color: color-mix(in srgb, #444ae1 20%, transparent);
1598
+ @supports (color: color-mix(in lab, red, red)) {
1599
+ border-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
1600
+ }
1601
+ }
1602
+ .border-background-surface {
1603
+ border-color: var(--color-background-surface);
988
1604
  }
989
1605
  .border-blue-200 {
990
- border-color: oklch(0.882 0.059 254.128);
1606
+ border-color: var(--color-blue-200);
991
1607
  }
992
1608
  .border-border-default {
993
- border-color: #e5e7eb;
1609
+ border-color: var(--color-border-default);
994
1610
  }
995
1611
  .border-border-input {
996
- border-color: #d1d5db;
1612
+ border-color: var(--color-border-input);
997
1613
  }
998
1614
  .border-border-input\/20 {
999
- border-color: color-mix(in oklab, #d1d5db 20%, transparent);
1615
+ border-color: color-mix(in srgb, #d1d5db 20%, transparent);
1616
+ @supports (color: color-mix(in lab, red, red)) {
1617
+ border-color: color-mix(in oklab, var(--color-border-input) 20%, transparent);
1618
+ }
1000
1619
  }
1001
1620
  .border-border-muted {
1002
- border-color: #e5e7eb;
1621
+ border-color: var(--color-border-muted);
1003
1622
  }
1004
1623
  .border-border-muted\/30 {
1005
- border-color: color-mix(in oklab, #e5e7eb 30%, transparent);
1624
+ border-color: color-mix(in srgb, #e5e7eb 30%, transparent);
1625
+ @supports (color: color-mix(in lab, red, red)) {
1626
+ border-color: color-mix(in oklab, var(--color-border-muted) 30%, transparent);
1627
+ }
1006
1628
  }
1007
1629
  .border-border-muted\/50 {
1008
- border-color: color-mix(in oklab, #e5e7eb 50%, transparent);
1630
+ border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
1631
+ @supports (color: color-mix(in lab, red, red)) {
1632
+ border-color: color-mix(in oklab, var(--color-border-muted) 50%, transparent);
1633
+ }
1009
1634
  }
1010
1635
  .border-brand-primary {
1011
- border-color: #444ae1;
1636
+ border-color: var(--color-brand-primary);
1012
1637
  }
1013
1638
  .border-current {
1014
1639
  border-color: currentcolor;
1015
1640
  }
1016
- .border-device-charging-border {
1017
- border-color: #c084fc;
1018
- }
1019
1641
  .border-feedback-error-border {
1020
- border-color: #ef4444;
1642
+ border-color: var(--color-feedback-error-border);
1643
+ }
1644
+ .border-feedback-info-border {
1645
+ border-color: var(--color-feedback-info-border);
1646
+ }
1647
+ .border-feedback-success-border {
1648
+ border-color: var(--color-feedback-success-border);
1649
+ }
1650
+ .border-feedback-warning-border {
1651
+ border-color: var(--color-feedback-warning-border);
1021
1652
  }
1022
1653
  .border-gray-100 {
1023
- border-color: oklch(0.967 0.003 264.542);
1654
+ border-color: var(--color-gray-100);
1024
1655
  }
1025
1656
  .border-gray-200 {
1026
- border-color: oklch(0.928 0.006 264.531);
1657
+ border-color: var(--color-gray-200);
1027
1658
  }
1028
1659
  .border-gray-300 {
1029
- border-color: oklch(0.872 0.01 258.338);
1660
+ border-color: var(--color-gray-300);
1030
1661
  }
1031
1662
  .border-green-200 {
1032
- border-color: oklch(0.925 0.084 155.995);
1663
+ border-color: var(--color-green-200);
1033
1664
  }
1034
1665
  .border-orange-200 {
1035
- border-color: oklch(0.901 0.076 70.697);
1666
+ border-color: var(--color-orange-200);
1036
1667
  }
1037
1668
  .border-red-200 {
1038
- border-color: oklch(0.885 0.062 18.334);
1669
+ border-color: var(--color-red-200);
1039
1670
  }
1040
1671
  .border-slate-800 {
1041
- border-color: oklch(0.279 0.041 260.031);
1672
+ border-color: var(--color-slate-800);
1042
1673
  }
1043
1674
  .border-text-body {
1044
- border-color: #333333;
1675
+ border-color: var(--color-text-body);
1045
1676
  }
1046
1677
  .border-transparent {
1047
1678
  border-color: transparent;
1048
1679
  }
1680
+ .border-white {
1681
+ border-color: var(--color-white);
1682
+ }
1049
1683
  .border-yellow-200 {
1050
- border-color: oklch(0.945 0.129 101.54);
1684
+ border-color: var(--color-yellow-200);
1685
+ }
1686
+ .border-t-transparent {
1687
+ border-top-color: transparent;
1051
1688
  }
1052
1689
  .border-r-transparent {
1053
1690
  border-right-color: transparent;
1054
1691
  }
1055
1692
  .border-l-border-muted {
1056
- border-left-color: #e5e7eb;
1693
+ border-left-color: var(--color-border-muted);
1057
1694
  }
1058
1695
  .\!bg-neutral-black {
1059
- background-color: #333333 !important;
1696
+ background-color: var(--color-neutral-black) !important;
1060
1697
  }
1061
1698
  .bg-\[\#444ae1\] {
1062
1699
  background-color: #444ae1;
@@ -1064,128 +1701,188 @@
1064
1701
  .bg-\[var\(--skeleton-base\)\] {
1065
1702
  background-color: var(--skeleton-base);
1066
1703
  }
1067
- .bg-action-destructive {
1068
- background-color: #b91c1c;
1069
- }
1070
1704
  .bg-action-primary {
1071
- background-color: #444ae1;
1705
+ background-color: var(--color-action-primary);
1706
+ }
1707
+ .bg-action-primary\/5 {
1708
+ background-color: color-mix(in srgb, #444ae1 5%, transparent);
1709
+ @supports (color: color-mix(in lab, red, red)) {
1710
+ background-color: color-mix(in oklab, var(--color-action-primary) 5%, transparent);
1711
+ }
1072
1712
  }
1073
1713
  .bg-action-primary\/10 {
1074
- background-color: color-mix(in oklab, #444ae1 10%, transparent);
1714
+ background-color: color-mix(in srgb, #444ae1 10%, transparent);
1715
+ @supports (color: color-mix(in lab, red, red)) {
1716
+ background-color: color-mix(in oklab, var(--color-action-primary) 10%, transparent);
1717
+ }
1718
+ }
1719
+ .bg-action-secondary\/10 {
1720
+ background-color: color-mix(in srgb, #333333 10%, transparent);
1721
+ @supports (color: color-mix(in lab, red, red)) {
1722
+ background-color: color-mix(in oklab, var(--color-action-secondary) 10%, transparent);
1723
+ }
1075
1724
  }
1076
1725
  .bg-background-hover {
1077
- background-color: #f3f4f6;
1726
+ background-color: var(--color-background-hover);
1078
1727
  }
1079
1728
  .bg-background-input {
1080
- background-color: #ffffff;
1729
+ background-color: var(--color-background-input);
1081
1730
  }
1082
1731
  .bg-background-muted {
1083
- background-color: #f3f4f6;
1732
+ background-color: var(--color-background-muted);
1084
1733
  }
1085
1734
  .bg-background-muted\/30 {
1086
- background-color: color-mix(in oklab, #f3f4f6 30%, transparent);
1735
+ background-color: color-mix(in srgb, #f3f4f6 30%, transparent);
1736
+ @supports (color: color-mix(in lab, red, red)) {
1737
+ background-color: color-mix(in oklab, var(--color-background-muted) 30%, transparent);
1738
+ }
1087
1739
  }
1088
1740
  .bg-background-selected {
1089
- background-color: #d1d5db;
1741
+ background-color: var(--color-background-selected);
1090
1742
  }
1091
1743
  .bg-background-surface {
1092
- background-color: #ffffff;
1744
+ background-color: var(--color-background-surface);
1745
+ }
1746
+ .bg-background-surface\/80 {
1747
+ background-color: color-mix(in srgb, #ffffff 80%, transparent);
1748
+ @supports (color: color-mix(in lab, red, red)) {
1749
+ background-color: color-mix(in oklab, var(--color-background-surface) 80%, transparent);
1750
+ }
1093
1751
  }
1094
1752
  .bg-black\/50 {
1095
- background-color: color-mix(in srgb, #333333 50%, transparent);
1753
+ background-color: color-mix(in srgb, #000000 50%, transparent);
1096
1754
  @supports (color: color-mix(in lab, red, red)) {
1097
- background-color: color-mix(in oklab, var(--color-neutral-black) 50%, transparent);
1755
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1098
1756
  }
1099
1757
  }
1100
1758
  .bg-blue-50 {
1101
- background-color: oklch(0.97 0.014 254.604);
1759
+ background-color: var(--color-blue-50);
1102
1760
  }
1103
1761
  .bg-blue-100 {
1104
- background-color: oklch(0.932 0.032 255.585);
1762
+ background-color: var(--color-blue-100);
1105
1763
  }
1106
1764
  .bg-blue-500 {
1107
- background-color: oklch(0.623 0.214 259.815);
1765
+ background-color: var(--color-blue-500);
1108
1766
  }
1109
1767
  .bg-blue-600 {
1110
- background-color: oklch(0.546 0.245 262.881);
1768
+ background-color: var(--color-blue-600);
1769
+ }
1770
+ .bg-border-muted {
1771
+ background-color: var(--color-border-muted);
1111
1772
  }
1112
1773
  .bg-brand-light {
1113
- background-color: #f7f7ff;
1774
+ background-color: var(--color-brand-light);
1114
1775
  }
1115
1776
  .bg-brand-primary {
1116
- background-color: #444ae1;
1777
+ background-color: var(--color-brand-primary);
1117
1778
  }
1118
- .bg-device-charging-background {
1119
- background-color: #f3e8ff;
1779
+ .bg-current {
1780
+ background-color: currentcolor;
1120
1781
  }
1121
1782
  .bg-feedback-error-background {
1122
- background-color: #fee2e2;
1783
+ background-color: var(--color-feedback-error-background);
1784
+ }
1785
+ .bg-feedback-error-background\/50 {
1786
+ background-color: color-mix(in srgb, #fee2e2 50%, transparent);
1787
+ @supports (color: color-mix(in lab, red, red)) {
1788
+ background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
1789
+ }
1790
+ }
1791
+ .bg-feedback-error-text {
1792
+ background-color: var(--color-feedback-error-text);
1793
+ }
1794
+ .bg-feedback-info-background {
1795
+ background-color: var(--color-feedback-info-background);
1796
+ }
1797
+ .bg-feedback-info-text {
1798
+ background-color: var(--color-feedback-info-text);
1123
1799
  }
1124
1800
  .bg-feedback-success-background {
1125
- background-color: #d1fae5;
1801
+ background-color: var(--color-feedback-success-background);
1802
+ }
1803
+ .bg-feedback-success-text {
1804
+ background-color: var(--color-feedback-success-text);
1805
+ }
1806
+ .bg-feedback-warning-background {
1807
+ background-color: var(--color-feedback-warning-background);
1808
+ }
1809
+ .bg-feedback-warning-text {
1810
+ background-color: var(--color-feedback-warning-text);
1126
1811
  }
1127
1812
  .bg-gray-50 {
1128
- background-color: oklch(0.985 0.002 247.839);
1813
+ background-color: var(--color-gray-50);
1129
1814
  }
1130
1815
  .bg-gray-100 {
1131
- background-color: oklch(0.967 0.003 264.542);
1816
+ background-color: var(--color-gray-100);
1132
1817
  }
1133
1818
  .bg-gray-100\/60 {
1134
- background-color: color-mix(in oklab, oklch(0.967 0.003 264.542) 60%, transparent);
1819
+ background-color: color-mix(in srgb, #f3f4f6 60%, transparent);
1820
+ @supports (color: color-mix(in lab, red, red)) {
1821
+ background-color: color-mix(in oklab, var(--color-gray-100) 60%, transparent);
1822
+ }
1135
1823
  }
1136
1824
  .bg-gray-200 {
1137
- background-color: oklch(0.928 0.006 264.531);
1825
+ background-color: var(--color-gray-200);
1138
1826
  }
1139
1827
  .bg-gray-400 {
1140
- background-color: oklch(0.707 0.022 261.325);
1828
+ background-color: var(--color-gray-400);
1141
1829
  }
1142
1830
  .bg-gray-700 {
1143
- background-color: oklch(0.373 0.034 259.733);
1144
- }
1145
- .bg-gray-light {
1146
- background-color: #e5e7eb;
1831
+ background-color: var(--color-gray-700);
1147
1832
  }
1148
1833
  .bg-green-50 {
1149
- background-color: oklch(0.982 0.018 155.826);
1834
+ background-color: var(--color-green-50);
1835
+ }
1836
+ .bg-green-100 {
1837
+ background-color: var(--color-green-100);
1150
1838
  }
1151
1839
  .bg-green-500 {
1152
- background-color: oklch(0.723 0.219 149.579);
1840
+ background-color: var(--color-green-500);
1153
1841
  }
1154
1842
  .bg-neutral-black {
1155
- background-color: #333333;
1843
+ background-color: var(--color-neutral-black);
1156
1844
  }
1157
1845
  .bg-orange-50 {
1158
- background-color: oklch(0.98 0.016 73.684);
1846
+ background-color: var(--color-orange-50);
1159
1847
  }
1160
1848
  .bg-purple-50 {
1161
- background-color: oklch(0.977 0.014 308.299);
1849
+ background-color: var(--color-purple-50);
1162
1850
  }
1163
1851
  .bg-red-50 {
1164
- background-color: oklch(0.971 0.013 17.38);
1852
+ background-color: var(--color-red-50);
1853
+ }
1854
+ .bg-red-100 {
1855
+ background-color: var(--color-red-100);
1165
1856
  }
1166
1857
  .bg-red-600 {
1167
- background-color: oklch(0.577 0.245 27.325);
1858
+ background-color: var(--color-red-600);
1168
1859
  }
1169
1860
  .bg-slate-700 {
1170
- background-color: oklch(0.372 0.044 257.287);
1861
+ background-color: var(--color-slate-700);
1171
1862
  }
1172
1863
  .bg-text-body {
1173
- background-color: #333333;
1864
+ background-color: var(--color-text-body);
1865
+ }
1866
+ .bg-text-muted {
1867
+ background-color: var(--color-text-muted);
1174
1868
  }
1175
1869
  .bg-transparent {
1176
1870
  background-color: transparent;
1177
1871
  }
1178
1872
  .bg-white {
1179
- background-color: var(--color-neutral-white);
1873
+ background-color: var(--color-white);
1180
1874
  }
1181
1875
  .bg-white\/20 {
1182
1876
  background-color: color-mix(in srgb, #ffffff 20%, transparent);
1183
1877
  @supports (color: color-mix(in lab, red, red)) {
1184
- background-color: color-mix(in oklab, var(--color-neutral-white) 20%, transparent);
1878
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1185
1879
  }
1186
1880
  }
1187
1881
  .bg-yellow-50 {
1188
- background-color: oklch(0.987 0.026 102.212);
1882
+ background-color: var(--color-yellow-50);
1883
+ }
1884
+ .bg-yellow-100 {
1885
+ background-color: var(--color-yellow-100);
1189
1886
  }
1190
1887
  .bg-gradient-to-r {
1191
1888
  --tw-gradient-position: to right in oklab;
@@ -1211,85 +1908,96 @@
1211
1908
  fill: #333333;
1212
1909
  }
1213
1910
  .fill-brand-primary {
1214
- fill: #444ae1;
1911
+ fill: var(--color-brand-primary);
1215
1912
  }
1216
1913
  .fill-neutral-black {
1217
- fill: #333333;
1914
+ fill: var(--color-neutral-black);
1218
1915
  }
1219
1916
  .fill-slate-700 {
1220
- fill: oklch(0.372 0.044 257.287);
1917
+ fill: var(--color-slate-700);
1221
1918
  }
1222
1919
  .fill-white {
1223
- fill: var(--color-neutral-white);
1920
+ fill: var(--color-white);
1224
1921
  }
1225
1922
  .stroke-black\/10 {
1226
- stroke: color-mix(in srgb, #333333 10%, transparent);
1923
+ stroke: color-mix(in srgb, #000000 10%, transparent);
1227
1924
  @supports (color: color-mix(in lab, red, red)) {
1228
- stroke: color-mix(in oklab, var(--color-neutral-black) 10%, transparent);
1925
+ stroke: color-mix(in oklab, var(--color-black) 10%, transparent);
1229
1926
  }
1230
1927
  }
1231
1928
  .stroke-gray-800 {
1232
- stroke: oklch(0.278 0.033 256.848);
1929
+ stroke: var(--color-gray-800);
1233
1930
  }
1234
1931
  .stroke-1 {
1235
1932
  stroke-width: 1;
1236
1933
  }
1934
+ .object-contain {
1935
+ -o-object-fit: contain;
1936
+ object-fit: contain;
1937
+ }
1938
+ .object-cover {
1939
+ -o-object-fit: cover;
1940
+ object-fit: cover;
1941
+ }
1237
1942
  .p-0 {
1238
- padding: calc(0.25rem * 0);
1943
+ padding: var(--spacing-0);
1239
1944
  }
1240
1945
  .p-0\.5 {
1241
- padding: calc(0.25rem * 0.5);
1946
+ padding: calc(var(--spacing) * 0.5);
1242
1947
  }
1243
1948
  .p-1 {
1244
- padding: calc(0.25rem * 1);
1949
+ padding: var(--spacing-1);
1245
1950
  }
1246
1951
  .p-2 {
1247
- padding: calc(0.25rem * 2);
1952
+ padding: var(--spacing-2);
1248
1953
  }
1249
1954
  .p-3 {
1250
- padding: calc(0.25rem * 3);
1955
+ padding: var(--spacing-3);
1251
1956
  }
1252
1957
  .p-4 {
1253
- padding: calc(0.25rem * 4);
1958
+ padding: var(--spacing-4);
1254
1959
  }
1255
1960
  .p-6 {
1256
- padding: calc(0.25rem * 6);
1961
+ padding: var(--spacing-6);
1257
1962
  }
1258
1963
  .p-8 {
1259
- padding: calc(0.25rem * 8);
1964
+ padding: var(--spacing-8);
1260
1965
  }
1261
1966
  .p-10 {
1262
- padding: calc(0.25rem * 10);
1967
+ padding: var(--spacing-10);
1263
1968
  }
1264
1969
  .p-\[1rem\] {
1265
1970
  padding: 1rem;
1266
1971
  }
1267
- .\!px-1\.5 {
1268
- padding-inline: calc(0.25rem * 1.5) !important;
1269
- }
1270
1972
  .\!px-2 {
1271
- padding-inline: calc(0.25rem * 2) !important;
1973
+ padding-inline: var(--spacing-2) !important;
1272
1974
  }
1273
1975
  .px-0\.5 {
1274
- padding-inline: calc(0.25rem * 0.5);
1976
+ padding-inline: calc(var(--spacing) * 0.5);
1275
1977
  }
1276
1978
  .px-1 {
1277
- padding-inline: calc(0.25rem * 1);
1979
+ padding-inline: var(--spacing-1);
1278
1980
  }
1279
1981
  .px-1\.5 {
1280
- padding-inline: calc(0.25rem * 1.5);
1982
+ padding-inline: calc(var(--spacing) * 1.5);
1281
1983
  }
1282
1984
  .px-2 {
1283
- padding-inline: calc(0.25rem * 2);
1985
+ padding-inline: var(--spacing-2);
1986
+ }
1987
+ .px-2\.5 {
1988
+ padding-inline: calc(var(--spacing) * 2.5);
1284
1989
  }
1285
1990
  .px-3 {
1286
- padding-inline: calc(0.25rem * 3);
1991
+ padding-inline: var(--spacing-3);
1992
+ }
1993
+ .px-3\.5 {
1994
+ padding-inline: calc(var(--spacing) * 3.5);
1287
1995
  }
1288
1996
  .px-4 {
1289
- padding-inline: calc(0.25rem * 4);
1997
+ padding-inline: var(--spacing-4);
1290
1998
  }
1291
1999
  .px-5 {
1292
- padding-inline: calc(0.25rem * 5);
2000
+ padding-inline: var(--spacing-5);
1293
2001
  }
1294
2002
  .px-\[var\(--control-padding-lg\)\] {
1295
2003
  padding-inline: var(--control-padding-lg);
@@ -1306,80 +2014,83 @@
1306
2014
  .px-px {
1307
2015
  padding-inline: 1px;
1308
2016
  }
1309
- .\!py-0\.5 {
1310
- padding-block: calc(0.25rem * 0.5) !important;
1311
- }
1312
2017
  .py-0\.5 {
1313
- padding-block: calc(0.25rem * 0.5);
2018
+ padding-block: calc(var(--spacing) * 0.5);
1314
2019
  }
1315
2020
  .py-1 {
1316
- padding-block: calc(0.25rem * 1);
2021
+ padding-block: var(--spacing-1);
1317
2022
  }
1318
2023
  .py-1\.5 {
1319
- padding-block: calc(0.25rem * 1.5);
2024
+ padding-block: calc(var(--spacing) * 1.5);
1320
2025
  }
1321
2026
  .py-2 {
1322
- padding-block: calc(0.25rem * 2);
2027
+ padding-block: var(--spacing-2);
1323
2028
  }
1324
2029
  .py-2\.5 {
1325
- padding-block: calc(0.25rem * 2.5);
2030
+ padding-block: calc(var(--spacing) * 2.5);
1326
2031
  }
1327
2032
  .py-3 {
1328
- padding-block: calc(0.25rem * 3);
2033
+ padding-block: var(--spacing-3);
1329
2034
  }
1330
2035
  .py-3\.5 {
1331
- padding-block: calc(0.25rem * 3.5);
2036
+ padding-block: calc(var(--spacing) * 3.5);
1332
2037
  }
1333
2038
  .py-4 {
1334
- padding-block: calc(0.25rem * 4);
2039
+ padding-block: var(--spacing-4);
1335
2040
  }
1336
2041
  .py-6 {
1337
- padding-block: calc(0.25rem * 6);
2042
+ padding-block: var(--spacing-6);
2043
+ }
2044
+ .py-12 {
2045
+ padding-block: var(--spacing-12);
1338
2046
  }
1339
2047
  .pr-0 {
1340
- padding-right: calc(0.25rem * 0);
2048
+ padding-right: var(--spacing-0);
1341
2049
  }
1342
2050
  .pr-1 {
1343
- padding-right: calc(0.25rem * 1);
2051
+ padding-right: var(--spacing-1);
1344
2052
  }
1345
2053
  .pr-3 {
1346
- padding-right: calc(0.25rem * 3);
2054
+ padding-right: var(--spacing-3);
1347
2055
  }
1348
2056
  .pr-8 {
1349
- padding-right: calc(0.25rem * 8);
2057
+ padding-right: var(--spacing-8);
1350
2058
  }
1351
2059
  .pr-9 {
1352
- padding-right: calc(0.25rem * 9);
2060
+ padding-right: var(--spacing-9);
1353
2061
  }
1354
2062
  .pb-1\.5 {
1355
- padding-bottom: calc(0.25rem * 1.5);
2063
+ padding-bottom: calc(var(--spacing) * 1.5);
1356
2064
  }
1357
2065
  .pb-2 {
1358
- padding-bottom: calc(0.25rem * 2);
2066
+ padding-bottom: var(--spacing-2);
1359
2067
  }
1360
2068
  .pb-4 {
1361
- padding-bottom: calc(0.25rem * 4);
2069
+ padding-bottom: var(--spacing-4);
1362
2070
  }
1363
2071
  .pl-0 {
1364
- padding-left: calc(0.25rem * 0);
2072
+ padding-left: var(--spacing-0);
1365
2073
  }
1366
2074
  .pl-3 {
1367
- padding-left: calc(0.25rem * 3);
2075
+ padding-left: var(--spacing-3);
2076
+ }
2077
+ .pl-5 {
2078
+ padding-left: var(--spacing-5);
1368
2079
  }
1369
2080
  .pl-7 {
1370
- padding-left: calc(0.25rem * 7);
2081
+ padding-left: var(--spacing-7);
1371
2082
  }
1372
2083
  .pl-8 {
1373
- padding-left: calc(0.25rem * 8);
2084
+ padding-left: var(--spacing-8);
1374
2085
  }
1375
2086
  .pl-9 {
1376
- padding-left: calc(0.25rem * 9);
2087
+ padding-left: var(--spacing-9);
1377
2088
  }
1378
2089
  .pl-10 {
1379
- padding-left: calc(0.25rem * 10);
2090
+ padding-left: var(--spacing-10);
1380
2091
  }
1381
2092
  .pl-12 {
1382
- padding-left: calc(0.25rem * 12);
2093
+ padding-left: var(--spacing-12);
1383
2094
  }
1384
2095
  .pl-\[var\(--control-padding-sm\)\] {
1385
2096
  padding-left: var(--control-padding-sm);
@@ -1402,44 +2113,43 @@
1402
2113
  .align-middle {
1403
2114
  vertical-align: middle;
1404
2115
  }
2116
+ .align-text-bottom {
2117
+ vertical-align: text-bottom;
2118
+ }
1405
2119
  .font-mono {
1406
- font-family: "Fira Code", monospace;
1407
- }
1408
- .\!text-xs {
1409
- font-size: 0.75rem !important;
1410
- line-height: var(--tw-leading, calc(1 / 0.75)) !important;
2120
+ font-family: var(--font-mono);
1411
2121
  }
1412
2122
  .text-2xl {
1413
- font-size: 1.5rem;
1414
- line-height: var(--tw-leading, calc(2 / 1.5));
2123
+ font-size: var(--text-2xl);
2124
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
1415
2125
  }
1416
2126
  .text-3xl {
1417
- font-size: 1.875rem;
1418
- line-height: var(--tw-leading, calc(2.25 / 1.875));
2127
+ font-size: var(--text-3xl);
2128
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
1419
2129
  }
1420
2130
  .text-4xl {
1421
- font-size: 2.25rem;
1422
- line-height: var(--tw-leading, calc(2.5 / 2.25));
2131
+ font-size: var(--text-4xl);
2132
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
1423
2133
  }
1424
2134
  .text-base {
1425
- font-size: 1rem;
1426
- line-height: var(--tw-leading, calc(1.5 / 1));
2135
+ font-size: var(--text-base);
2136
+ line-height: var(--tw-leading, var(--text-base--line-height));
1427
2137
  }
1428
2138
  .text-lg {
1429
- font-size: 1.125rem;
1430
- line-height: var(--tw-leading, calc(1.75 / 1.125));
2139
+ font-size: var(--text-lg);
2140
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1431
2141
  }
1432
2142
  .text-sm {
1433
- font-size: 0.875rem;
1434
- line-height: var(--tw-leading, calc(1.25 / 0.875));
2143
+ font-size: var(--text-sm);
2144
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1435
2145
  }
1436
2146
  .text-xl {
1437
- font-size: 1.25rem;
1438
- line-height: var(--tw-leading, calc(1.75 / 1.25));
2147
+ font-size: var(--text-xl);
2148
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1439
2149
  }
1440
2150
  .text-xs {
1441
- font-size: 0.75rem;
1442
- line-height: var(--tw-leading, calc(1 / 0.75));
2151
+ font-size: var(--text-xs);
2152
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1443
2153
  }
1444
2154
  .text-\[1\.125rem\] {
1445
2155
  font-size: 1.125rem;
@@ -1459,10 +2169,6 @@
1459
2169
  .text-\[length\:var\(--control-text-xl\)\] {
1460
2170
  font-size: var(--control-text-xl);
1461
2171
  }
1462
- .\!leading-none {
1463
- --tw-leading: 1 !important;
1464
- line-height: 1 !important;
1465
- }
1466
2172
  .leading-\[2\.25\] {
1467
2173
  --tw-leading: 2.25;
1468
2174
  line-height: 2.25;
@@ -1471,50 +2177,54 @@
1471
2177
  --tw-leading: 62px;
1472
2178
  line-height: 62px;
1473
2179
  }
2180
+ .leading-none {
2181
+ --tw-leading: 1;
2182
+ line-height: 1;
2183
+ }
1474
2184
  .leading-relaxed {
1475
- --tw-leading: 1.625;
1476
- line-height: 1.625;
2185
+ --tw-leading: var(--leading-relaxed);
2186
+ line-height: var(--leading-relaxed);
1477
2187
  }
1478
2188
  .font-\[500\] {
1479
2189
  --tw-font-weight: 500;
1480
2190
  font-weight: 500;
1481
2191
  }
1482
2192
  .font-bold {
1483
- --tw-font-weight: 700;
1484
- font-weight: 700;
2193
+ --tw-font-weight: var(--font-weight-bold);
2194
+ font-weight: var(--font-weight-bold);
1485
2195
  }
1486
2196
  .font-light {
1487
- --tw-font-weight: 300;
1488
- font-weight: 300;
2197
+ --tw-font-weight: var(--font-weight-light);
2198
+ font-weight: var(--font-weight-light);
1489
2199
  }
1490
2200
  .font-medium {
1491
- --tw-font-weight: 500;
1492
- font-weight: 500;
2201
+ --tw-font-weight: var(--font-weight-medium);
2202
+ font-weight: var(--font-weight-medium);
1493
2203
  }
1494
2204
  .font-normal {
1495
- --tw-font-weight: 400;
1496
- font-weight: 400;
2205
+ --tw-font-weight: var(--font-weight-normal);
2206
+ font-weight: var(--font-weight-normal);
1497
2207
  }
1498
2208
  .font-semibold {
1499
- --tw-font-weight: 600;
1500
- font-weight: 600;
2209
+ --tw-font-weight: var(--font-weight-semibold);
2210
+ font-weight: var(--font-weight-semibold);
1501
2211
  }
1502
2212
  .tracking-tight {
1503
- --tw-tracking: -0.025em;
1504
- letter-spacing: -0.025em;
2213
+ --tw-tracking: var(--tracking-tight);
2214
+ letter-spacing: var(--tracking-tight);
1505
2215
  }
1506
2216
  .tracking-wider {
1507
- --tw-tracking: 0.05em;
1508
- letter-spacing: 0.05em;
2217
+ --tw-tracking: var(--tracking-wider);
2218
+ letter-spacing: var(--tracking-wider);
1509
2219
  }
1510
2220
  .whitespace-nowrap {
1511
2221
  white-space: nowrap;
1512
2222
  }
1513
2223
  .\!text-action-primary {
1514
- color: #444ae1 !important;
2224
+ color: var(--color-action-primary) !important;
1515
2225
  }
1516
2226
  .\!text-text-caption {
1517
- color: #6b7280 !important;
2227
+ color: var(--color-text-caption) !important;
1518
2228
  }
1519
2229
  .text-\[\#111827\] {
1520
2230
  color: #111827;
@@ -1525,116 +2235,137 @@
1525
2235
  .text-\[\#ffffff\] {
1526
2236
  color: #ffffff;
1527
2237
  }
1528
- .text-action-destructive {
1529
- color: #b91c1c;
1530
- }
1531
2238
  .text-action-primary {
1532
- color: #444ae1;
2239
+ color: var(--color-action-primary);
2240
+ }
2241
+ .text-action-secondary {
2242
+ color: var(--color-action-secondary);
1533
2243
  }
1534
2244
  .text-blue-500 {
1535
- color: oklch(0.623 0.214 259.815);
2245
+ color: var(--color-blue-500);
1536
2246
  }
1537
2247
  .text-blue-600 {
1538
- color: oklch(0.546 0.245 262.881);
2248
+ color: var(--color-blue-600);
1539
2249
  }
1540
2250
  .text-blue-800 {
1541
- color: oklch(0.424 0.199 265.638);
2251
+ color: var(--color-blue-800);
1542
2252
  }
1543
2253
  .text-brand-dark {
1544
- color: #363ccb;
2254
+ color: var(--color-brand-dark);
1545
2255
  }
1546
2256
  .text-brand-light {
1547
- color: #f7f7ff;
2257
+ color: var(--color-brand-light);
1548
2258
  }
1549
2259
  .text-brand-primary {
1550
- color: #444ae1;
2260
+ color: var(--color-brand-primary);
1551
2261
  }
1552
2262
  .text-current {
1553
2263
  color: currentcolor;
1554
2264
  }
1555
2265
  .text-feedback-error-text {
1556
- color: #b91c1c;
2266
+ color: var(--color-feedback-error-text);
2267
+ }
2268
+ .text-feedback-info-text {
2269
+ color: var(--color-feedback-info-text);
1557
2270
  }
1558
2271
  .text-feedback-success-text {
1559
- color: #065f46;
2272
+ color: var(--color-feedback-success-text);
2273
+ }
2274
+ .text-feedback-warning-text {
2275
+ color: var(--color-feedback-warning-text);
1560
2276
  }
1561
2277
  .text-gray-200 {
1562
- color: oklch(0.928 0.006 264.531);
2278
+ color: var(--color-gray-200);
1563
2279
  }
1564
2280
  .text-gray-300 {
1565
- color: oklch(0.872 0.01 258.338);
2281
+ color: var(--color-gray-300);
2282
+ }
2283
+ .text-gray-400 {
2284
+ color: var(--color-gray-400);
2285
+ }
2286
+ .text-gray-500 {
2287
+ color: var(--color-gray-500);
1566
2288
  }
1567
2289
  .text-gray-600 {
1568
- color: oklch(0.446 0.03 256.802);
2290
+ color: var(--color-gray-600);
2291
+ }
2292
+ .text-gray-700 {
2293
+ color: var(--color-gray-700);
1569
2294
  }
1570
2295
  .text-gray-800 {
1571
- color: oklch(0.278 0.033 256.848);
2296
+ color: var(--color-gray-800);
2297
+ }
2298
+ .text-gray-900 {
2299
+ color: var(--color-gray-900);
1572
2300
  }
1573
2301
  .text-green-600 {
1574
- color: oklch(0.627 0.194 149.214);
2302
+ color: var(--color-green-600);
1575
2303
  }
1576
2304
  .text-green-800 {
1577
- color: oklch(0.448 0.119 151.328);
2305
+ color: var(--color-green-800);
1578
2306
  }
1579
2307
  .text-inherit {
1580
2308
  color: inherit;
1581
2309
  }
1582
2310
  .text-neutral-white {
1583
- color: #ffffff;
2311
+ color: var(--color-neutral-white);
1584
2312
  }
1585
2313
  .text-orange-600 {
1586
- color: oklch(0.646 0.222 41.116);
2314
+ color: var(--color-orange-600);
1587
2315
  }
1588
2316
  .text-orange-800 {
1589
- color: oklch(0.47 0.157 37.304);
2317
+ color: var(--color-orange-800);
1590
2318
  }
1591
2319
  .text-purple-600 {
1592
- color: oklch(0.558 0.288 302.321);
2320
+ color: var(--color-purple-600);
1593
2321
  }
1594
2322
  .text-red-500 {
1595
- color: oklch(0.637 0.237 25.331);
2323
+ color: var(--color-red-500);
1596
2324
  }
1597
2325
  .text-red-600 {
1598
- color: oklch(0.577 0.245 27.325);
2326
+ color: var(--color-red-600);
1599
2327
  }
1600
2328
  .text-red-800 {
1601
- color: oklch(0.444 0.177 26.899);
2329
+ color: var(--color-red-800);
1602
2330
  }
1603
2331
  .text-slate-300 {
1604
- color: oklch(0.869 0.022 252.894);
2332
+ color: var(--color-slate-300);
1605
2333
  }
1606
2334
  .text-text-body {
1607
- color: #333333;
2335
+ color: var(--color-text-body);
1608
2336
  }
1609
2337
  .text-text-caption {
1610
- color: #6b7280;
2338
+ color: var(--color-text-caption);
1611
2339
  }
1612
2340
  .text-text-disabled {
1613
- color: #9ca3af;
2341
+ color: var(--color-text-disabled);
1614
2342
  }
1615
2343
  .text-text-heading {
1616
- color: #111827;
2344
+ color: var(--color-text-heading);
1617
2345
  }
1618
2346
  .text-text-link-default {
1619
- color: #444ae1;
2347
+ color: var(--color-text-link-default);
1620
2348
  }
1621
2349
  .text-text-muted {
1622
- color: #4b5563;
2350
+ color: var(--color-text-muted);
1623
2351
  }
1624
2352
  .text-text-onPrimary {
1625
- color: #ffffff;
2353
+ color: var(--color-text-onPrimary);
1626
2354
  }
1627
2355
  .text-white {
1628
- color: var(--color-neutral-white);
2356
+ color: var(--color-white);
1629
2357
  }
1630
2358
  .text-yellow-500 {
1631
- color: oklch(0.795 0.184 86.047);
2359
+ color: var(--color-yellow-500);
2360
+ }
2361
+ .text-yellow-600 {
2362
+ color: var(--color-yellow-600);
1632
2363
  }
1633
2364
  .text-yellow-800 {
1634
- color: oklch(0.476 0.114 61.907);
2365
+ color: var(--color-yellow-800);
1635
2366
  }
1636
2367
  .text-zinc-900 {
1637
- color: oklch(0.21 0.006 285.885);
2368
+ color: var(--color-zinc-900);
1638
2369
  }
1639
2370
  .capitalize {
1640
2371
  text-transform: capitalize;
@@ -1653,6 +2384,15 @@
1653
2384
  --tw-numeric-spacing: tabular-nums;
1654
2385
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1655
2386
  }
2387
+ .underline {
2388
+ text-decoration-line: underline;
2389
+ }
2390
+ .decoration-text-link-default\/30 {
2391
+ text-decoration-color: color-mix(in srgb, #444ae1 30%, transparent);
2392
+ @supports (color: color-mix(in lab, red, red)) {
2393
+ text-decoration-color: color-mix(in oklab, var(--color-text-link-default) 30%, transparent);
2394
+ }
2395
+ }
1656
2396
  .opacity-0 {
1657
2397
  opacity: 0%;
1658
2398
  }
@@ -1665,6 +2405,9 @@
1665
2405
  .opacity-70 {
1666
2406
  opacity: 70%;
1667
2407
  }
2408
+ .opacity-75 {
2409
+ opacity: 75%;
2410
+ }
1668
2411
  .opacity-100 {
1669
2412
  opacity: 100%;
1670
2413
  }
@@ -1676,7 +2419,7 @@
1676
2419
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1677
2420
  }
1678
2421
  .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
1679
- --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, oklch(0.446 0.03 256.802));
2422
+ --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #4b5563);
1680
2423
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1681
2424
  }
1682
2425
  .shadow-inner {
@@ -1711,12 +2454,25 @@
1711
2454
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1712
2455
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1713
2456
  }
2457
+ .ring-2 {
2458
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2459
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2460
+ }
2461
+ .ring-background-surface {
2462
+ --tw-ring-color: var(--color-background-surface);
2463
+ }
1714
2464
  .ring-black\/5 {
1715
- --tw-ring-color: color-mix(in srgb, #333333 5%, transparent);
2465
+ --tw-ring-color: color-mix(in srgb, #000000 5%, transparent);
1716
2466
  @supports (color: color-mix(in lab, red, red)) {
1717
- --tw-ring-color: color-mix(in oklab, var(--color-neutral-black) 5%, transparent);
2467
+ --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1718
2468
  }
1719
2469
  }
2470
+ .ring-border-muted {
2471
+ --tw-ring-color: var(--color-border-muted);
2472
+ }
2473
+ .ring-gray-200 {
2474
+ --tw-ring-color: var(--color-gray-200);
2475
+ }
1720
2476
  .ring-offset-2 {
1721
2477
  --tw-ring-offset-width: 2px;
1722
2478
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1757,10 +2513,10 @@
1757
2513
  outline-color: var(--control-focus-ring-color-error);
1758
2514
  }
1759
2515
  .outline-border-input {
1760
- outline-color: #d1d5db;
2516
+ outline-color: var(--color-border-input);
1761
2517
  }
1762
2518
  .outline-white {
1763
- outline-color: var(--color-neutral-white);
2519
+ outline-color: var(--color-white);
1764
2520
  }
1765
2521
  .blur {
1766
2522
  --tw-blur: blur(8px);
@@ -1768,7 +2524,7 @@
1768
2524
  }
1769
2525
  .drop-shadow-lg {
1770
2526
  --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
1771
- --tw-drop-shadow: drop-shadow(0 4px 4px rgb(0 0 0 / 0.15));
2527
+ --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
1772
2528
  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,);
1773
2529
  }
1774
2530
  .grayscale {
@@ -1779,12 +2535,12 @@
1779
2535
  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,);
1780
2536
  }
1781
2537
  .backdrop-blur-md {
1782
- --tw-backdrop-blur: blur(12px);
2538
+ --tw-backdrop-blur: blur(var(--blur-md));
1783
2539
  -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,);
1784
2540
  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,);
1785
2541
  }
1786
2542
  .backdrop-blur-sm {
1787
- --tw-backdrop-blur: blur(8px);
2543
+ --tw-backdrop-blur: blur(var(--blur-sm));
1788
2544
  -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,);
1789
2545
  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,);
1790
2546
  }
@@ -1803,6 +2559,11 @@
1803
2559
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1804
2560
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1805
2561
  }
2562
+ .transition-opacity {
2563
+ transition-property: opacity;
2564
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2565
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2566
+ }
1806
2567
  .transition-transform {
1807
2568
  transition-property: transform, translate, scale, rotate;
1808
2569
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1825,16 +2586,16 @@
1825
2586
  transition-duration: 1000ms;
1826
2587
  }
1827
2588
  .ease-in {
1828
- --tw-ease: cubic-bezier(0.4, 0, 1, 1);
1829
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2589
+ --tw-ease: var(--ease-in);
2590
+ transition-timing-function: var(--ease-in);
1830
2591
  }
1831
2592
  .ease-in-out {
1832
- --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
1833
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2593
+ --tw-ease: var(--ease-in-out);
2594
+ transition-timing-function: var(--ease-in-out);
1834
2595
  }
1835
2596
  .ease-out {
1836
- --tw-ease: cubic-bezier(0, 0, 0.2, 1);
1837
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2597
+ --tw-ease: var(--ease-out);
2598
+ transition-timing-function: var(--ease-out);
1838
2599
  }
1839
2600
  .will-change-transform {
1840
2601
  will-change: transform;
@@ -1857,9 +2618,12 @@
1857
2618
  .\[--tw-enter-translate-x\:calc\(-16rem-100\%\)\] {
1858
2619
  --tw-enter-translate-x: calc(-16rem - 100%);
1859
2620
  }
2621
+ .ring-inset {
2622
+ --tw-ring-inset: inset;
2623
+ }
1860
2624
  .group-invalid\:bg-red-600 {
1861
2625
  &:is(:where(.group):invalid *) {
1862
- background-color: oklch(0.577 0.245 27.325);
2626
+ background-color: var(--color-red-600);
1863
2627
  }
1864
2628
  }
1865
2629
  .group-invalid\:outline-2 {
@@ -1870,20 +2634,27 @@
1870
2634
  }
1871
2635
  .group-invalid\:outline-feedback-error-border {
1872
2636
  &:is(:where(.group):invalid *) {
1873
- outline-color: #ef4444;
2637
+ outline-color: var(--color-feedback-error-border);
2638
+ }
2639
+ }
2640
+ .group-hover\:bg-background-hover {
2641
+ &:is(:where(.group):hover *) {
2642
+ @media (hover: hover) {
2643
+ background-color: var(--color-background-hover);
2644
+ }
1874
2645
  }
1875
2646
  }
1876
2647
  .group-hover\:bg-gray-200 {
1877
2648
  &:is(:where(.group):hover *) {
1878
2649
  @media (hover: hover) {
1879
- background-color: oklch(0.928 0.006 264.531);
2650
+ background-color: var(--color-gray-200);
1880
2651
  }
1881
2652
  }
1882
2653
  }
1883
2654
  .group-hover\:bg-gray-300 {
1884
2655
  &:is(:where(.group):hover *) {
1885
2656
  @media (hover: hover) {
1886
- background-color: oklch(0.872 0.01 258.338);
2657
+ background-color: var(--color-gray-300);
1887
2658
  }
1888
2659
  }
1889
2660
  }
@@ -1891,27 +2662,27 @@
1891
2662
  &:is(:where(.group):invalid *) {
1892
2663
  &:is(:where(.group):hover *) {
1893
2664
  @media (hover: hover) {
1894
- background-color: oklch(0.885 0.062 18.334);
2665
+ background-color: var(--color-red-200);
1895
2666
  }
1896
2667
  }
1897
2668
  }
1898
2669
  }
1899
2670
  .group-disabled\:text-gray-200 {
1900
2671
  &:is(:where(.group):disabled *) {
1901
- color: oklch(0.928 0.006 264.531);
2672
+ color: var(--color-gray-200);
1902
2673
  }
1903
2674
  }
1904
2675
  .group-disabled\:text-text-disabled {
1905
2676
  &:is(:where(.group):disabled *) {
1906
- color: #9ca3af;
2677
+ color: var(--color-text-disabled);
1907
2678
  }
1908
2679
  }
1909
2680
  .placeholder\:text-text-placeholder {
1910
2681
  &::-moz-placeholder {
1911
- color: #9ca3af;
2682
+ color: var(--color-text-placeholder);
1912
2683
  }
1913
2684
  &::placeholder {
1914
- color: #9ca3af;
2685
+ color: var(--color-text-placeholder);
1915
2686
  }
1916
2687
  }
1917
2688
  .before\:absolute {
@@ -1923,7 +2694,7 @@
1923
2694
  .before\:inset-0 {
1924
2695
  &::before {
1925
2696
  content: var(--tw-content);
1926
- inset: calc(0.25rem * 0);
2697
+ inset: var(--spacing-0);
1927
2698
  }
1928
2699
  }
1929
2700
  .before\:bg-gradient-to-r {
@@ -1964,19 +2735,19 @@
1964
2735
  .after\:right-0 {
1965
2736
  &::after {
1966
2737
  content: var(--tw-content);
1967
- right: calc(0.25rem * 0);
2738
+ right: var(--spacing-0);
1968
2739
  }
1969
2740
  }
1970
2741
  .after\:bottom-0 {
1971
2742
  &::after {
1972
2743
  content: var(--tw-content);
1973
- bottom: calc(0.25rem * 0);
2744
+ bottom: var(--spacing-0);
1974
2745
  }
1975
2746
  }
1976
2747
  .after\:left-0 {
1977
2748
  &::after {
1978
2749
  content: var(--tw-content);
1979
- left: calc(0.25rem * 0);
2750
+ left: var(--spacing-0);
1980
2751
  }
1981
2752
  }
1982
2753
  .after\:block {
@@ -2000,7 +2771,7 @@
2000
2771
  .after\:bg-border-default {
2001
2772
  &::after {
2002
2773
  content: var(--tw-content);
2003
- background-color: #e5e7eb;
2774
+ background-color: var(--color-border-default);
2004
2775
  }
2005
2776
  }
2006
2777
  .after\:content-\[\'\'\] {
@@ -2015,24 +2786,29 @@
2015
2786
  margin-top: calc(5px * -1);
2016
2787
  }
2017
2788
  }
2789
+ .first\:ml-0 {
2790
+ &:first-child {
2791
+ margin-left: var(--spacing-0);
2792
+ }
2793
+ }
2018
2794
  .visited\:text-action-primary {
2019
2795
  &:visited {
2020
- color: #444ae1;
2796
+ color: var(--color-action-primary);
2021
2797
  }
2022
2798
  }
2023
2799
  .visited\:text-text-link-default {
2024
2800
  &:visited {
2025
- color: #444ae1;
2801
+ color: var(--color-text-link-default);
2026
2802
  }
2027
2803
  }
2028
2804
  .visited\:text-text-muted {
2029
2805
  &:visited {
2030
- color: #4b5563;
2806
+ color: var(--color-text-muted);
2031
2807
  }
2032
2808
  }
2033
2809
  .invalid\:bg-red-600 {
2034
2810
  &:invalid {
2035
- background-color: oklch(0.577 0.245 27.325);
2811
+ background-color: var(--color-red-600);
2036
2812
  }
2037
2813
  }
2038
2814
  .invalid\:outline-2 {
@@ -2043,7 +2819,17 @@
2043
2819
  }
2044
2820
  .invalid\:outline-feedback-error-border {
2045
2821
  &:invalid {
2046
- outline-color: #ef4444;
2822
+ outline-color: var(--color-feedback-error-border);
2823
+ }
2824
+ }
2825
+ .hover\:scale-110 {
2826
+ &:hover {
2827
+ @media (hover: hover) {
2828
+ --tw-scale-x: 110%;
2829
+ --tw-scale-y: 110%;
2830
+ --tw-scale-z: 110%;
2831
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2832
+ }
2047
2833
  }
2048
2834
  }
2049
2835
  .hover\:cursor-pointer {
@@ -2056,51 +2842,54 @@
2056
2842
  .hover\:border-action-primary-hover {
2057
2843
  &:hover {
2058
2844
  @media (hover: hover) {
2059
- border-color: #383ccb;
2845
+ border-color: var(--color-action-primary-hover);
2060
2846
  }
2061
2847
  }
2062
2848
  }
2063
- .hover\:border-border-focus {
2849
+ .hover\:border-border-default {
2064
2850
  &:hover {
2065
2851
  @media (hover: hover) {
2066
- border-color: #333333;
2852
+ border-color: var(--color-border-default);
2067
2853
  }
2068
2854
  }
2069
2855
  }
2070
- .hover\:bg-action-destructive\/5 {
2856
+ .hover\:border-border-focus {
2071
2857
  &:hover {
2072
2858
  @media (hover: hover) {
2073
- background-color: color-mix(in oklab, #b91c1c 5%, transparent);
2859
+ border-color: var(--color-border-focus);
2074
2860
  }
2075
2861
  }
2076
2862
  }
2077
2863
  .hover\:bg-action-primary-hover {
2078
2864
  &:hover {
2079
2865
  @media (hover: hover) {
2080
- background-color: #383ccb;
2866
+ background-color: var(--color-action-primary-hover);
2081
2867
  }
2082
2868
  }
2083
2869
  }
2084
2870
  .hover\:bg-action-primary\/15 {
2085
2871
  &:hover {
2086
2872
  @media (hover: hover) {
2087
- background-color: color-mix(in oklab, #444ae1 15%, transparent);
2873
+ background-color: color-mix(in srgb, #444ae1 15%, transparent);
2874
+ @supports (color: color-mix(in lab, red, red)) {
2875
+ background-color: color-mix(in oklab, var(--color-action-primary) 15%, transparent);
2876
+ }
2088
2877
  }
2089
2878
  }
2090
2879
  }
2091
2880
  .hover\:bg-background-hover {
2092
2881
  &:hover {
2093
2882
  @media (hover: hover) {
2094
- background-color: #f3f4f6;
2883
+ background-color: var(--color-background-hover);
2095
2884
  }
2096
2885
  }
2097
2886
  }
2098
2887
  .hover\:bg-black\/10 {
2099
2888
  &:hover {
2100
2889
  @media (hover: hover) {
2101
- background-color: color-mix(in srgb, #333333 10%, transparent);
2890
+ background-color: color-mix(in srgb, #000000 10%, transparent);
2102
2891
  @supports (color: color-mix(in lab, red, red)) {
2103
- background-color: color-mix(in oklab, var(--color-neutral-black) 10%, transparent);
2892
+ background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
2104
2893
  }
2105
2894
  }
2106
2895
  }
@@ -2108,84 +2897,108 @@
2108
2897
  .hover\:bg-blue-200 {
2109
2898
  &:hover {
2110
2899
  @media (hover: hover) {
2111
- background-color: oklch(0.882 0.059 254.128);
2900
+ background-color: var(--color-blue-200);
2112
2901
  }
2113
2902
  }
2114
2903
  }
2115
2904
  .hover\:bg-blue-600 {
2116
2905
  &:hover {
2117
2906
  @media (hover: hover) {
2118
- background-color: oklch(0.546 0.245 262.881);
2907
+ background-color: var(--color-blue-600);
2908
+ }
2909
+ }
2910
+ }
2911
+ .hover\:bg-feedback-error-background {
2912
+ &:hover {
2913
+ @media (hover: hover) {
2914
+ background-color: var(--color-feedback-error-background);
2119
2915
  }
2120
2916
  }
2121
2917
  }
2122
2918
  .hover\:bg-gray-100 {
2123
2919
  &:hover {
2124
2920
  @media (hover: hover) {
2125
- background-color: oklch(0.967 0.003 264.542);
2921
+ background-color: var(--color-gray-100);
2126
2922
  }
2127
2923
  }
2128
2924
  }
2129
2925
  .hover\:bg-red-700 {
2130
2926
  &:hover {
2131
2927
  @media (hover: hover) {
2132
- background-color: oklch(0.505 0.213 27.518);
2928
+ background-color: var(--color-red-700);
2133
2929
  }
2134
2930
  }
2135
2931
  }
2136
2932
  .hover\:bg-text-body\/5 {
2137
2933
  &:hover {
2138
2934
  @media (hover: hover) {
2139
- background-color: color-mix(in oklab, #333333 5%, transparent);
2935
+ background-color: color-mix(in srgb, #333333 5%, transparent);
2936
+ @supports (color: color-mix(in lab, red, red)) {
2937
+ background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
2938
+ }
2140
2939
  }
2141
2940
  }
2142
2941
  }
2143
2942
  .hover\:bg-text-body\/\[0\.05\] {
2144
2943
  &:hover {
2145
2944
  @media (hover: hover) {
2146
- background-color: color-mix(in oklab, #333333 5%, transparent);
2945
+ background-color: color-mix(in srgb, #333333 5%, transparent);
2946
+ @supports (color: color-mix(in lab, red, red)) {
2947
+ background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
2948
+ }
2949
+ }
2950
+ }
2951
+ }
2952
+ .hover\:font-semibold {
2953
+ &:hover {
2954
+ @media (hover: hover) {
2955
+ --tw-font-weight: var(--font-weight-semibold);
2956
+ font-weight: var(--font-weight-semibold);
2147
2957
  }
2148
2958
  }
2149
2959
  }
2150
2960
  .hover\:text-action-primary {
2151
2961
  &:hover {
2152
2962
  @media (hover: hover) {
2153
- color: #444ae1;
2963
+ color: var(--color-action-primary);
2154
2964
  }
2155
2965
  }
2156
2966
  }
2157
2967
  .hover\:text-action-primary-hover {
2158
2968
  &:hover {
2159
2969
  @media (hover: hover) {
2160
- color: #383ccb;
2970
+ color: var(--color-action-primary-hover);
2161
2971
  }
2162
2972
  }
2163
2973
  }
2164
2974
  .hover\:text-action-primary\/90 {
2165
2975
  &:hover {
2166
2976
  @media (hover: hover) {
2167
- color: color-mix(in oklab, #444ae1 90%, transparent);
2977
+ color: color-mix(in srgb, #444ae1 90%, transparent);
2978
+ @supports (color: color-mix(in lab, red, red)) {
2979
+ color: color-mix(in oklab, var(--color-action-primary) 90%, transparent);
2980
+ }
2168
2981
  }
2169
2982
  }
2170
2983
  }
2171
2984
  .hover\:text-text-body {
2172
2985
  &:hover {
2173
2986
  @media (hover: hover) {
2174
- color: #333333;
2987
+ color: var(--color-text-body);
2175
2988
  }
2176
2989
  }
2177
2990
  }
2178
2991
  .hover\:text-text-link-hover {
2179
2992
  &:hover {
2180
2993
  @media (hover: hover) {
2181
- color: #383ccb;
2994
+ color: var(--color-text-link-hover);
2182
2995
  }
2183
2996
  }
2184
2997
  }
2185
2998
  .hover\:text-text-muted {
2186
2999
  &:hover {
2187
3000
  @media (hover: hover) {
2188
- color: #4b5563;
3001
+ color: var(--color-text-muted);
2189
3002
  }
2190
3003
  }
2191
3004
  }
@@ -2196,6 +3009,13 @@
2196
3009
  }
2197
3010
  }
2198
3011
  }
3012
+ .hover\:decoration-text-link-hover {
3013
+ &:hover {
3014
+ @media (hover: hover) {
3015
+ text-decoration-color: var(--color-text-link-hover);
3016
+ }
3017
+ }
3018
+ }
2199
3019
  .hover\:decoration-1 {
2200
3020
  &:hover {
2201
3021
  @media (hover: hover) {
@@ -2217,6 +3037,13 @@
2217
3037
  }
2218
3038
  }
2219
3039
  }
3040
+ .hover\:opacity-80 {
3041
+ &:hover {
3042
+ @media (hover: hover) {
3043
+ opacity: 80%;
3044
+ }
3045
+ }
3046
+ }
2220
3047
  .hover\:opacity-100 {
2221
3048
  &:hover {
2222
3049
  @media (hover: hover) {
@@ -2240,6 +3067,16 @@
2240
3067
  }
2241
3068
  }
2242
3069
  }
3070
+ .focus\:bg-background-hover {
3071
+ &:focus {
3072
+ background-color: var(--color-background-hover);
3073
+ }
3074
+ }
3075
+ .focus\:bg-feedback-error-background {
3076
+ &:focus {
3077
+ background-color: var(--color-feedback-error-background);
3078
+ }
3079
+ }
2243
3080
  .focus\:ring-2 {
2244
3081
  &:focus {
2245
3082
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2248,7 +3085,7 @@
2248
3085
  }
2249
3086
  .focus\:ring-border-focus {
2250
3087
  &:focus {
2251
- --tw-ring-color: #333333;
3088
+ --tw-ring-color: var(--color-border-focus);
2252
3089
  }
2253
3090
  }
2254
3091
  .focus\:outline-2 {
@@ -2264,7 +3101,7 @@
2264
3101
  }
2265
3102
  .focus\:outline-border-focus {
2266
3103
  &:focus {
2267
- outline-color: #333333;
3104
+ outline-color: var(--color-border-focus);
2268
3105
  }
2269
3106
  }
2270
3107
  .focus\:outline-none {
@@ -2292,7 +3129,7 @@
2292
3129
  }
2293
3130
  .focus-visible\:outline-border-focus {
2294
3131
  &:focus-visible {
2295
- outline-color: #333333;
3132
+ outline-color: var(--color-border-focus);
2296
3133
  }
2297
3134
  }
2298
3135
  .disabled\:cursor-not-allowed {
@@ -2302,12 +3139,12 @@
2302
3139
  }
2303
3140
  .disabled\:text-gray-300 {
2304
3141
  &:disabled {
2305
- color: oklch(0.872 0.01 258.338);
3142
+ color: var(--color-gray-300);
2306
3143
  }
2307
3144
  }
2308
3145
  .disabled\:text-text-muted {
2309
3146
  &:disabled {
2310
- color: #4b5563;
3147
+ color: var(--color-text-muted);
2311
3148
  }
2312
3149
  }
2313
3150
  .disabled\:opacity-50 {
@@ -2317,7 +3154,7 @@
2317
3154
  }
2318
3155
  .data-\[focused\]\:bg-background-hover {
2319
3156
  &[data-focused] {
2320
- background-color: #f3f4f6;
3157
+ background-color: var(--color-background-hover);
2321
3158
  }
2322
3159
  }
2323
3160
  .data-\[focused\]\:opacity-100 {
@@ -2343,18 +3180,18 @@
2343
3180
  }
2344
3181
  .data-\[placeholder\]\:text-text-placeholder {
2345
3182
  &[data-placeholder] {
2346
- color: #9ca3af;
3183
+ color: var(--color-text-placeholder);
2347
3184
  }
2348
3185
  }
2349
3186
  .data-\[selected\]\:bg-background-selected {
2350
3187
  &[data-selected] {
2351
- background-color: #d1d5db;
3188
+ background-color: var(--color-background-selected);
2352
3189
  }
2353
3190
  }
2354
3191
  .data-\[selected\]\:font-medium {
2355
3192
  &[data-selected] {
2356
- --tw-font-weight: 500;
2357
- font-weight: 500;
3193
+ --tw-font-weight: var(--font-weight-medium);
3194
+ font-weight: var(--font-weight-medium);
2358
3195
  }
2359
3196
  }
2360
3197
  .data-\[selected\]\:opacity-100 {
@@ -2364,7 +3201,27 @@
2364
3201
  }
2365
3202
  .supports-\[-moz-appearance\:none\]\:bg-gray-100 {
2366
3203
  @supports (-moz-appearance:none) {
2367
- background-color: oklch(0.967 0.003 264.542);
3204
+ background-color: var(--color-gray-100);
3205
+ }
3206
+ }
3207
+ .sm\:grid {
3208
+ @media (width >= 40rem) {
3209
+ display: grid;
3210
+ }
3211
+ }
3212
+ .sm\:hidden {
3213
+ @media (width >= 40rem) {
3214
+ display: none;
3215
+ }
3216
+ }
3217
+ .md\:grid {
3218
+ @media (width >= 48rem) {
3219
+ display: grid;
3220
+ }
3221
+ }
3222
+ .md\:hidden {
3223
+ @media (width >= 48rem) {
3224
+ display: none;
2368
3225
  }
2369
3226
  }
2370
3227
  .md\:w-\[50\%\] {
@@ -2389,16 +3246,41 @@
2389
3246
  border-inline-width: 0px;
2390
3247
  }
2391
3248
  }
3249
+ .lg\:grid {
3250
+ @media (width >= 64rem) {
3251
+ display: grid;
3252
+ }
3253
+ }
3254
+ .lg\:hidden {
3255
+ @media (width >= 64rem) {
3256
+ display: none;
3257
+ }
3258
+ }
2392
3259
  .lg\:w-\[75\%\] {
2393
3260
  @media (width >= 64rem) {
2394
3261
  width: 75%;
2395
3262
  }
2396
3263
  }
3264
+ .xl\:grid {
3265
+ @media (width >= 80rem) {
3266
+ display: grid;
3267
+ }
3268
+ }
3269
+ .xl\:hidden {
3270
+ @media (width >= 80rem) {
3271
+ display: none;
3272
+ }
3273
+ }
3274
+ .dark\:border-gray-700 {
3275
+ @media (prefers-color-scheme: dark) {
3276
+ border-color: var(--color-gray-700);
3277
+ }
3278
+ }
2397
3279
  .dark\:border-white\/5 {
2398
3280
  @media (prefers-color-scheme: dark) {
2399
3281
  border-color: color-mix(in srgb, #ffffff 5%, transparent);
2400
3282
  @supports (color: color-mix(in lab, red, red)) {
2401
- border-color: color-mix(in oklab, var(--color-neutral-white) 5%, transparent);
3283
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2402
3284
  }
2403
3285
  }
2404
3286
  }
@@ -2406,58 +3288,64 @@
2406
3288
  @media (prefers-color-scheme: dark) {
2407
3289
  border-color: color-mix(in srgb, #ffffff 10%, transparent);
2408
3290
  @supports (color: color-mix(in lab, red, red)) {
2409
- border-color: color-mix(in oklab, var(--color-neutral-white) 10%, transparent);
3291
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2410
3292
  }
2411
3293
  }
2412
3294
  }
2413
3295
  .dark\:border-y-zinc-700 {
2414
3296
  @media (prefers-color-scheme: dark) {
2415
- border-block-color: oklch(0.37 0.013 285.805);
3297
+ border-block-color: var(--color-zinc-700);
2416
3298
  }
2417
3299
  }
2418
3300
  .dark\:bg-blue-500 {
2419
3301
  @media (prefers-color-scheme: dark) {
2420
- background-color: oklch(0.623 0.214 259.815);
3302
+ background-color: var(--color-blue-500);
2421
3303
  }
2422
3304
  }
2423
3305
  .dark\:bg-gray-800 {
2424
3306
  @media (prefers-color-scheme: dark) {
2425
- background-color: oklch(0.278 0.033 256.848);
3307
+ background-color: var(--color-gray-800);
2426
3308
  }
2427
3309
  }
2428
3310
  .dark\:bg-slate-600 {
2429
3311
  @media (prefers-color-scheme: dark) {
2430
- background-color: oklch(0.446 0.043 257.281);
3312
+ background-color: var(--color-slate-600);
2431
3313
  }
2432
3314
  }
2433
3315
  .dark\:bg-zinc-300 {
2434
3316
  @media (prefers-color-scheme: dark) {
2435
- background-color: oklch(0.871 0.006 286.286);
3317
+ background-color: var(--color-zinc-300);
2436
3318
  }
2437
3319
  }
2438
3320
  .dark\:bg-zinc-400 {
2439
3321
  @media (prefers-color-scheme: dark) {
2440
- background-color: oklch(0.705 0.015 286.067);
3322
+ background-color: var(--color-zinc-400);
2441
3323
  }
2442
3324
  }
2443
3325
  .dark\:bg-zinc-700 {
2444
3326
  @media (prefers-color-scheme: dark) {
2445
- background-color: oklch(0.37 0.013 285.805);
3327
+ background-color: var(--color-zinc-700);
2446
3328
  }
2447
3329
  }
2448
3330
  .dark\:bg-zinc-700\/60 {
2449
3331
  @media (prefers-color-scheme: dark) {
2450
- background-color: color-mix(in oklab, oklch(0.37 0.013 285.805) 60%, transparent);
3332
+ background-color: color-mix(in srgb, oklch(37% 0.013 285.805) 60%, transparent);
3333
+ @supports (color: color-mix(in lab, red, red)) {
3334
+ background-color: color-mix(in oklab, var(--color-zinc-700) 60%, transparent);
3335
+ }
2451
3336
  }
2452
3337
  }
2453
3338
  .dark\:bg-zinc-900 {
2454
3339
  @media (prefers-color-scheme: dark) {
2455
- background-color: oklch(0.21 0.006 285.885);
3340
+ background-color: var(--color-zinc-900);
2456
3341
  }
2457
3342
  }
2458
3343
  .dark\:bg-zinc-900\/70 {
2459
3344
  @media (prefers-color-scheme: dark) {
2460
- background-color: color-mix(in oklab, oklch(0.21 0.006 285.885) 70%, transparent);
3345
+ background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 70%, transparent);
3346
+ @supports (color: color-mix(in lab, red, red)) {
3347
+ background-color: color-mix(in oklab, var(--color-zinc-900) 70%, transparent);
3348
+ }
2461
3349
  }
2462
3350
  }
2463
3351
  .dark\:fill-\[\#1f1f21\] {
@@ -2467,45 +3355,60 @@
2467
3355
  }
2468
3356
  .dark\:fill-slate-600 {
2469
3357
  @media (prefers-color-scheme: dark) {
2470
- fill: oklch(0.446 0.043 257.281);
3358
+ fill: var(--color-slate-600);
2471
3359
  }
2472
3360
  }
2473
3361
  .dark\:stroke-white\/10 {
2474
3362
  @media (prefers-color-scheme: dark) {
2475
3363
  stroke: color-mix(in srgb, #ffffff 10%, transparent);
2476
3364
  @supports (color: color-mix(in lab, red, red)) {
2477
- stroke: color-mix(in oklab, var(--color-neutral-white) 10%, transparent);
3365
+ stroke: color-mix(in oklab, var(--color-white) 10%, transparent);
2478
3366
  }
2479
3367
  }
2480
3368
  }
2481
3369
  .dark\:stroke-zinc-600 {
2482
3370
  @media (prefers-color-scheme: dark) {
2483
- stroke: oklch(0.442 0.017 285.786);
3371
+ stroke: var(--color-zinc-600);
3372
+ }
3373
+ }
3374
+ .dark\:text-gray-100 {
3375
+ @media (prefers-color-scheme: dark) {
3376
+ color: var(--color-gray-100);
3377
+ }
3378
+ }
3379
+ .dark\:text-gray-300 {
3380
+ @media (prefers-color-scheme: dark) {
3381
+ color: var(--color-gray-300);
3382
+ }
3383
+ }
3384
+ .dark\:text-gray-400 {
3385
+ @media (prefers-color-scheme: dark) {
3386
+ color: var(--color-gray-400);
2484
3387
  }
2485
3388
  }
2486
3389
  .dark\:text-text-body {
2487
3390
  @media (prefers-color-scheme: dark) {
2488
- color: #333333;
3391
+ color: var(--color-text-body);
2489
3392
  }
2490
3393
  }
2491
3394
  .dark\:text-zinc-100 {
2492
3395
  @media (prefers-color-scheme: dark) {
2493
- color: oklch(0.967 0.001 286.375);
3396
+ color: var(--color-zinc-100);
2494
3397
  }
2495
3398
  }
2496
3399
  .dark\:text-zinc-200 {
2497
3400
  @media (prefers-color-scheme: dark) {
2498
- color: oklch(0.92 0.004 286.32);
3401
+ color: var(--color-zinc-200);
2499
3402
  }
2500
3403
  }
2501
3404
  .dark\:text-zinc-300 {
2502
3405
  @media (prefers-color-scheme: dark) {
2503
- color: oklch(0.871 0.006 286.286);
3406
+ color: var(--color-zinc-300);
2504
3407
  }
2505
3408
  }
2506
3409
  .dark\:text-zinc-600 {
2507
3410
  @media (prefers-color-scheme: dark) {
2508
- color: oklch(0.442 0.017 285.786);
3411
+ color: var(--color-zinc-600);
2509
3412
  }
2510
3413
  }
2511
3414
  .dark\:shadow-none {
@@ -2514,14 +3417,19 @@
2514
3417
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2515
3418
  }
2516
3419
  }
3420
+ .dark\:ring-gray-700 {
3421
+ @media (prefers-color-scheme: dark) {
3422
+ --tw-ring-color: var(--color-gray-700);
3423
+ }
3424
+ }
2517
3425
  .dark\:outline-white {
2518
3426
  @media (prefers-color-scheme: dark) {
2519
- outline-color: var(--color-neutral-white);
3427
+ outline-color: var(--color-white);
2520
3428
  }
2521
3429
  }
2522
3430
  .dark\:backdrop-blur-2xl {
2523
3431
  @media (prefers-color-scheme: dark) {
2524
- --tw-backdrop-blur: blur(40px);
3432
+ --tw-backdrop-blur: blur(var(--blur-2xl));
2525
3433
  -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,);
2526
3434
  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,);
2527
3435
  }
@@ -2536,7 +3444,7 @@
2536
3444
  .group-disabled\:dark\:text-zinc-600 {
2537
3445
  &:is(:where(.group):disabled *) {
2538
3446
  @media (prefers-color-scheme: dark) {
2539
- color: oklch(0.442 0.017 285.786);
3447
+ color: var(--color-zinc-600);
2540
3448
  }
2541
3449
  }
2542
3450
  }
@@ -2544,7 +3452,16 @@
2544
3452
  @media (prefers-color-scheme: dark) {
2545
3453
  &:hover {
2546
3454
  @media (hover: hover) {
2547
- background-color: #f3f4f6;
3455
+ background-color: var(--color-background-hover);
3456
+ }
3457
+ }
3458
+ }
3459
+ }
3460
+ .dark\:hover\:bg-gray-700 {
3461
+ @media (prefers-color-scheme: dark) {
3462
+ &:hover {
3463
+ @media (hover: hover) {
3464
+ background-color: var(--color-gray-700);
2548
3465
  }
2549
3466
  }
2550
3467
  }
@@ -2553,7 +3470,7 @@
2553
3470
  @media (prefers-color-scheme: dark) {
2554
3471
  &:hover {
2555
3472
  @media (hover: hover) {
2556
- background-color: oklch(0.37 0.013 285.805);
3473
+ background-color: var(--color-zinc-700);
2557
3474
  }
2558
3475
  }
2559
3476
  }
@@ -2561,14 +3478,14 @@
2561
3478
  .dark\:disabled\:text-text-muted {
2562
3479
  @media (prefers-color-scheme: dark) {
2563
3480
  &:disabled {
2564
- color: #4b5563;
3481
+ color: var(--color-text-muted);
2565
3482
  }
2566
3483
  }
2567
3484
  }
2568
3485
  .dark\:disabled\:text-zinc-600 {
2569
3486
  @media (prefers-color-scheme: dark) {
2570
3487
  &:disabled {
2571
- color: oklch(0.442 0.017 285.786);
3488
+ color: var(--color-zinc-600);
2572
3489
  }
2573
3490
  }
2574
3491
  }
@@ -2597,6 +3514,11 @@
2597
3514
  border-color: GrayText;
2598
3515
  }
2599
3516
  }
3517
+ .forced-colors\:\!bg-\[ButtonFace\] {
3518
+ @media (forced-colors: active) {
3519
+ background-color: ButtonFace !important;
3520
+ }
3521
+ }
2600
3522
  .forced-colors\:\!bg-\[Highlight\] {
2601
3523
  @media (forced-colors: active) {
2602
3524
  background-color: Highlight !important;
@@ -2637,6 +3559,21 @@
2637
3559
  stroke: ButtonBorder;
2638
3560
  }
2639
3561
  }
3562
+ .forced-colors\:\!text-\[ButtonText\] {
3563
+ @media (forced-colors: active) {
3564
+ color: ButtonText !important;
3565
+ }
3566
+ }
3567
+ .forced-colors\:\!text-\[GrayText\] {
3568
+ @media (forced-colors: active) {
3569
+ color: GrayText !important;
3570
+ }
3571
+ }
3572
+ .forced-colors\:\!text-\[HighlightText\] {
3573
+ @media (forced-colors: active) {
3574
+ color: HighlightText !important;
3575
+ }
3576
+ }
2640
3577
  .forced-colors\:text-\[ButtonFace\] {
2641
3578
  @media (forced-colors: active) {
2642
3579
  color: ButtonFace;
@@ -2664,7 +3601,7 @@
2664
3601
  }
2665
3602
  .forced-colors\:text-white {
2666
3603
  @media (forced-colors: active) {
2667
- color: var(--color-neutral-white);
3604
+ color: var(--color-white);
2668
3605
  }
2669
3606
  }
2670
3607
  .forced-colors\:outline-\[GrayText\] {
@@ -2756,32 +3693,206 @@
2756
3693
  }
2757
3694
  }
2758
3695
  }
3696
+ .\[\&_\.ProseMirror\]\:min-h-\[inherit\] {
3697
+ & .ProseMirror {
3698
+ min-height: inherit;
3699
+ }
3700
+ }
3701
+ .\[\&_\.ProseMirror\]\:outline-none {
3702
+ & .ProseMirror {
3703
+ --tw-outline-style: none;
3704
+ outline-style: none;
3705
+ }
3706
+ }
3707
+ .\[\&_\.ProseMirror_blockquote\]\:border-l-4 {
3708
+ & .ProseMirror blockquote {
3709
+ border-left-style: var(--tw-border-style);
3710
+ border-left-width: 4px;
3711
+ }
3712
+ }
3713
+ .\[\&_\.ProseMirror_blockquote\]\:border-border-muted {
3714
+ & .ProseMirror blockquote {
3715
+ border-color: var(--color-border-muted);
3716
+ }
3717
+ }
3718
+ .\[\&_\.ProseMirror_blockquote\]\:pl-4 {
3719
+ & .ProseMirror blockquote {
3720
+ padding-left: var(--spacing-4);
3721
+ }
3722
+ }
3723
+ .\[\&_\.ProseMirror_blockquote\]\:italic {
3724
+ & .ProseMirror blockquote {
3725
+ font-style: italic;
3726
+ }
3727
+ }
3728
+ .\[\&_\.ProseMirror_code\]\:rounded {
3729
+ & .ProseMirror code {
3730
+ border-radius: 0.25rem;
3731
+ }
3732
+ }
3733
+ .\[\&_\.ProseMirror_code\]\:bg-background-muted {
3734
+ & .ProseMirror code {
3735
+ background-color: var(--color-background-muted);
3736
+ }
3737
+ }
3738
+ .\[\&_\.ProseMirror_code\]\:px-1 {
3739
+ & .ProseMirror code {
3740
+ padding-inline: var(--spacing-1);
3741
+ }
3742
+ }
3743
+ .\[\&_\.ProseMirror_code\]\:py-0\.5 {
3744
+ & .ProseMirror code {
3745
+ padding-block: calc(var(--spacing) * 0.5);
3746
+ }
3747
+ }
3748
+ .\[\&_\.ProseMirror_code\]\:font-mono {
3749
+ & .ProseMirror code {
3750
+ font-family: var(--font-mono);
3751
+ }
3752
+ }
3753
+ .\[\&_\.ProseMirror_code\]\:text-sm {
3754
+ & .ProseMirror code {
3755
+ font-size: var(--text-sm);
3756
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3757
+ }
3758
+ }
3759
+ .\[\&_\.ProseMirror_h1\]\:mb-4 {
3760
+ & .ProseMirror h1 {
3761
+ margin-bottom: var(--spacing-4);
3762
+ }
3763
+ }
3764
+ .\[\&_\.ProseMirror_h1\]\:text-2xl {
3765
+ & .ProseMirror h1 {
3766
+ font-size: var(--text-2xl);
3767
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
3768
+ }
3769
+ }
3770
+ .\[\&_\.ProseMirror_h1\]\:font-bold {
3771
+ & .ProseMirror h1 {
3772
+ --tw-font-weight: var(--font-weight-bold);
3773
+ font-weight: var(--font-weight-bold);
3774
+ }
3775
+ }
3776
+ .\[\&_\.ProseMirror_h2\]\:mb-3 {
3777
+ & .ProseMirror h2 {
3778
+ margin-bottom: var(--spacing-3);
3779
+ }
3780
+ }
3781
+ .\[\&_\.ProseMirror_h2\]\:text-xl {
3782
+ & .ProseMirror h2 {
3783
+ font-size: var(--text-xl);
3784
+ line-height: var(--tw-leading, var(--text-xl--line-height));
3785
+ }
3786
+ }
3787
+ .\[\&_\.ProseMirror_h2\]\:font-semibold {
3788
+ & .ProseMirror h2 {
3789
+ --tw-font-weight: var(--font-weight-semibold);
3790
+ font-weight: var(--font-weight-semibold);
3791
+ }
3792
+ }
3793
+ .\[\&_\.ProseMirror_hr\]\:border-border-muted {
3794
+ & .ProseMirror hr {
3795
+ border-color: var(--color-border-muted);
3796
+ }
3797
+ }
3798
+ .\[\&_\.ProseMirror_li\]\:mb-1 {
3799
+ & .ProseMirror li {
3800
+ margin-bottom: var(--spacing-1);
3801
+ }
3802
+ }
3803
+ .\[\&_\.ProseMirror_ol\]\:mb-2 {
3804
+ & .ProseMirror ol {
3805
+ margin-bottom: var(--spacing-2);
3806
+ }
3807
+ }
3808
+ .\[\&_\.ProseMirror_ol\]\:ml-6 {
3809
+ & .ProseMirror ol {
3810
+ margin-left: var(--spacing-6);
3811
+ }
3812
+ }
3813
+ .\[\&_\.ProseMirror_ol\]\:list-decimal {
3814
+ & .ProseMirror ol {
3815
+ list-style-type: decimal;
3816
+ }
3817
+ }
3818
+ .\[\&_\.ProseMirror_p\]\:mb-2 {
3819
+ & .ProseMirror p {
3820
+ margin-bottom: var(--spacing-2);
3821
+ }
3822
+ }
3823
+ .\[\&_\.ProseMirror_pre\]\:rounded-md {
3824
+ & .ProseMirror pre {
3825
+ border-radius: var(--radius-md);
3826
+ }
3827
+ }
3828
+ .\[\&_\.ProseMirror_pre\]\:bg-background-muted {
3829
+ & .ProseMirror pre {
3830
+ background-color: var(--color-background-muted);
3831
+ }
3832
+ }
3833
+ .\[\&_\.ProseMirror_pre\]\:p-3 {
3834
+ & .ProseMirror pre {
3835
+ padding: var(--spacing-3);
3836
+ }
3837
+ }
3838
+ .\[\&_\.ProseMirror_pre\]\:font-mono {
3839
+ & .ProseMirror pre {
3840
+ font-family: var(--font-mono);
3841
+ }
3842
+ }
3843
+ .\[\&_\.ProseMirror_pre\]\:text-sm {
3844
+ & .ProseMirror pre {
3845
+ font-size: var(--text-sm);
3846
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3847
+ }
3848
+ }
3849
+ .\[\&_\.ProseMirror_ul\]\:mb-2 {
3850
+ & .ProseMirror ul {
3851
+ margin-bottom: var(--spacing-2);
3852
+ }
3853
+ }
3854
+ .\[\&_\.ProseMirror_ul\]\:ml-6 {
3855
+ & .ProseMirror ul {
3856
+ margin-left: var(--spacing-6);
3857
+ }
3858
+ }
3859
+ .\[\&_\.ProseMirror_ul\]\:list-disc {
3860
+ & .ProseMirror ul {
3861
+ list-style-type: disc;
3862
+ }
3863
+ }
2759
3864
  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-primary\/20 {
2760
3865
  & [data-chip-id]::-moz-selection {
2761
- background-color: color-mix(in oklab, #444ae1 20%, transparent);
3866
+ background-color: color-mix(in srgb, #444ae1 20%, transparent);
3867
+ @supports (color: color-mix(in lab, red, red)) {
3868
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
3869
+ }
2762
3870
  }
2763
3871
  & [data-chip-id]::selection {
2764
- background-color: color-mix(in oklab, #444ae1 20%, transparent);
3872
+ background-color: color-mix(in srgb, #444ae1 20%, transparent);
3873
+ @supports (color: color-mix(in lab, red, red)) {
3874
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
3875
+ }
2765
3876
  }
2766
3877
  }
2767
3878
  .\[\&_td\]\:px-0 {
2768
3879
  & td {
2769
- padding-inline: calc(0.25rem * 0);
3880
+ padding-inline: var(--spacing-0);
2770
3881
  }
2771
3882
  }
2772
3883
  .\[\&\+\*\]\:mt-1 {
2773
3884
  &+* {
2774
- margin-top: calc(0.25rem * 1);
3885
+ margin-top: var(--spacing-1);
2775
3886
  }
2776
3887
  }
2777
3888
  .\[\&\:\:-moz-range-thumb\]\:h-4 {
2778
3889
  &::-moz-range-thumb {
2779
- height: calc(0.25rem * 4);
3890
+ height: var(--spacing-4);
2780
3891
  }
2781
3892
  }
2782
3893
  .\[\&\:\:-moz-range-thumb\]\:w-4 {
2783
3894
  &::-moz-range-thumb {
2784
- width: calc(0.25rem * 4);
3895
+ width: var(--spacing-4);
2785
3896
  }
2786
3897
  }
2787
3898
  .\[\&\:\:-moz-range-thumb\]\:rounded-full {
@@ -2789,6 +3900,11 @@
2789
3900
  border-radius: calc(infinity * 1px);
2790
3901
  }
2791
3902
  }
3903
+ .\[\&\:\:-moz-range-thumb\]\:rounded-full {
3904
+ &::-moz-range-thumb {
3905
+ border-radius: var(--radius-full);
3906
+ }
3907
+ }
2792
3908
  .\[\&\:\:-moz-range-thumb\]\:border {
2793
3909
  &::-moz-range-thumb {
2794
3910
  border-style: var(--tw-border-style);
@@ -2797,12 +3913,12 @@
2797
3913
  }
2798
3914
  .\[\&\:\:-moz-range-thumb\]\:border-border-input {
2799
3915
  &::-moz-range-thumb {
2800
- border-color: #d1d5db;
3916
+ border-color: var(--color-border-input);
2801
3917
  }
2802
3918
  }
2803
3919
  .\[\&\:\:-moz-range-thumb\]\:bg-background-input {
2804
3920
  &::-moz-range-thumb {
2805
- background-color: #ffffff;
3921
+ background-color: var(--color-background-input);
2806
3922
  }
2807
3923
  }
2808
3924
  .hover\:\[\&\:\:-moz-range-thumb\]\:shadow-sm {
@@ -2826,7 +3942,7 @@
2826
3942
  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:outline-border-focus {
2827
3943
  &:focus-visible {
2828
3944
  &::-moz-range-thumb {
2829
- outline-color: #333333;
3945
+ outline-color: var(--color-border-focus);
2830
3946
  }
2831
3947
  }
2832
3948
  }
@@ -2844,12 +3960,12 @@
2844
3960
  }
2845
3961
  .\[\&\:\:-webkit-slider-thumb\]\:h-4 {
2846
3962
  &::-webkit-slider-thumb {
2847
- height: calc(0.25rem * 4);
3963
+ height: var(--spacing-4);
2848
3964
  }
2849
3965
  }
2850
3966
  .\[\&\:\:-webkit-slider-thumb\]\:w-4 {
2851
3967
  &::-webkit-slider-thumb {
2852
- width: calc(0.25rem * 4);
3968
+ width: var(--spacing-4);
2853
3969
  }
2854
3970
  }
2855
3971
  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
@@ -2863,6 +3979,11 @@
2863
3979
  border-radius: calc(infinity * 1px);
2864
3980
  }
2865
3981
  }
3982
+ .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
3983
+ &::-webkit-slider-thumb {
3984
+ border-radius: var(--radius-full);
3985
+ }
3986
+ }
2866
3987
  .\[\&\:\:-webkit-slider-thumb\]\:border {
2867
3988
  &::-webkit-slider-thumb {
2868
3989
  border-style: var(--tw-border-style);
@@ -2871,12 +3992,12 @@
2871
3992
  }
2872
3993
  .\[\&\:\:-webkit-slider-thumb\]\:border-border-input {
2873
3994
  &::-webkit-slider-thumb {
2874
- border-color: #d1d5db;
3995
+ border-color: var(--color-border-input);
2875
3996
  }
2876
3997
  }
2877
3998
  .\[\&\:\:-webkit-slider-thumb\]\:bg-background-input {
2878
3999
  &::-webkit-slider-thumb {
2879
- background-color: #ffffff;
4000
+ background-color: var(--color-background-input);
2880
4001
  }
2881
4002
  }
2882
4003
  .hover\:\[\&\:\:-webkit-slider-thumb\]\:shadow-sm {
@@ -2900,7 +4021,7 @@
2900
4021
  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:outline-border-focus {
2901
4022
  &:focus-visible {
2902
4023
  &::-webkit-slider-thumb {
2903
- outline-color: #333333;
4024
+ outline-color: var(--color-border-focus);
2904
4025
  }
2905
4026
  }
2906
4027
  }
@@ -2916,7 +4037,7 @@
2916
4037
  &:empty {
2917
4038
  &::before {
2918
4039
  content: var(--tw-content);
2919
- color: #9ca3af;
4040
+ color: var(--color-text-placeholder);
2920
4041
  }
2921
4042
  }
2922
4043
  }
@@ -2929,17 +4050,42 @@
2929
4050
  }
2930
4051
  }
2931
4052
  }
4053
+ .\[\&\>\*\]\:\!justify-start {
4054
+ &>* {
4055
+ justify-content: flex-start !important;
4056
+ }
4057
+ }
2932
4058
  .\[\&\>\*\]\:rounded-none {
2933
4059
  &>* {
2934
4060
  border-radius: 0;
2935
4061
  }
2936
4062
  }
4063
+ .\[\&\>\*\]\:rounded-none {
4064
+ &>* {
4065
+ border-radius: var(--radius-none);
4066
+ }
4067
+ }
2937
4068
  .\[\&\>\*\]\:border-none {
2938
4069
  &>* {
2939
4070
  --tw-border-style: none;
2940
4071
  border-style: none;
2941
4072
  }
2942
4073
  }
4074
+ .\[\&\>\*\]\:\!text-left {
4075
+ &>* {
4076
+ text-align: left !important;
4077
+ }
4078
+ }
4079
+ .\[\&\>\*\:first-child\]\:mt-0 {
4080
+ &>*:first-child {
4081
+ margin-top: var(--spacing-0);
4082
+ }
4083
+ }
4084
+ .\[\&\>\*\:last-child\]\:mb-0 {
4085
+ &>*:last-child {
4086
+ margin-bottom: var(--spacing-0);
4087
+ }
4088
+ }
2943
4089
  .\[\.group\[data-selected\]\:has\(\+\[data-selected\]\)_\&\]\:block {
2944
4090
  .group[data-selected]:has(+[data-selected]) & {
2945
4091
  display: block;
@@ -2947,7 +4093,7 @@
2947
4093
  }
2948
4094
  .\[\[data-placement\]\>\&\]\:p-4 {
2949
4095
  [data-placement]>& {
2950
- padding: calc(0.25rem * 4);
4096
+ padding: var(--spacing-4);
2951
4097
  }
2952
4098
  }
2953
4099
  .\[td\:first-child_\&\]\:rounded-s-full {
@@ -2956,181 +4102,22 @@
2956
4102
  border-end-start-radius: calc(infinity * 1px);
2957
4103
  }
2958
4104
  }
2959
- }
2960
- @keyframes wave {
2961
- 0% {
2962
- transform: translateX(-100%);
2963
- }
2964
- 50%, 100% {
2965
- transform: translateX(100%);
2966
- }
2967
- }
2968
- @keyframes slide-in-from-right {
2969
- from {
2970
- transform: translateX(100%);
2971
- }
2972
- to {
2973
- transform: translateX(0);
2974
- }
2975
- }
2976
- @keyframes slide-in-from-left {
2977
- from {
2978
- transform: translateX(-100%);
2979
- }
2980
- to {
2981
- transform: translateX(0);
2982
- }
2983
- }
2984
- @keyframes slide-out-to-right {
2985
- from {
2986
- transform: translateX(0);
2987
- }
2988
- to {
2989
- transform: translateX(100%);
2990
- }
2991
- }
2992
- @keyframes slide-out-to-left {
2993
- from {
2994
- transform: translateX(0);
2995
- }
2996
- to {
2997
- transform: translateX(-100%);
2998
- }
2999
- }
3000
- @keyframes fade-in {
3001
- from {
3002
- opacity: 0;
3003
- }
3004
- to {
3005
- opacity: 1;
3006
- }
3007
- }
3008
- @keyframes fade-out {
3009
- from {
3010
- opacity: 1;
3011
- }
3012
- to {
3013
- opacity: 0;
4105
+ .\[td\:first-child_\&\]\:rounded-s-full {
4106
+ td:first-child & {
4107
+ border-start-start-radius: var(--radius-full);
4108
+ border-end-start-radius: var(--radius-full);
4109
+ }
3014
4110
  }
3015
4111
  }
3016
- .dark {
3017
- --color-brand-primary: #b4b9ff;
3018
- --color-brand-light: #c4c4ff;
3019
- --color-brand-dark: #a8aeff;
3020
- --color-brand-background: #3a3f63;
3021
- --color-neutral-black: #e5e7eb;
3022
- --color-neutral-white: #151a30;
3023
- --color-gray-lightest: #1f2937;
3024
- --color-gray-lighter: #374151;
3025
- --color-gray-light: #4b5563;
3026
- --color-gray-medium: #6b7280;
3027
- --color-gray-dark: #9ca3af;
3028
- --color-gray-darker: #d1d5db;
3029
- --color-gray-darkest: #f3f4f6;
3030
- --color-text-body: #ededef;
3031
- --color-text-heading: #ffffff;
3032
- --color-text-caption: #d1d5db;
3033
- --color-text-muted: #9ca3af;
3034
- --color-text-placeholder: #9ca3af;
3035
- --color-text-disabled: #9ca3af;
3036
- --color-text-link-default: #b4b9ff;
3037
- --color-text-link-hover: #c0c5ff;
3038
- --color-text-link-active: #b4b9ff;
3039
- --color-text-link-visited: #c0c5ff;
3040
- --color-text-onPrimary: #1f2937;
3041
- --color-background-body: #151a30;
3042
- --color-background-surface: #1a2038;
3043
- --color-background-muted: #374151;
3044
- --color-background-hover: #4b5563;
3045
- --color-background-selected: #6b7280;
3046
- --color-background-modal: rgba(255, 255, 255, 0.12);
3047
- --color-background-input: rgba(255, 255, 255, 0.05);
3048
- --color-background-menu-active: #222b44;
3049
- --color-border-default: #2e3a59;
3050
- --color-border-focus: #e5e7eb;
3051
- --color-border-muted: #4b5563;
3052
- --color-border-input: #6b7280;
3053
- --color-action-primary: #7a8ee1;
3054
- --color-action-primary-hover: #6a6fcc;
3055
- --color-action-secondary: #e5e7eb;
3056
- --color-action-secondary-hover: #f3f4f6;
3057
- --color-action-destructive: #e55a5a;
3058
- --color-action-destructive-hover: #d12c2c;
3059
- --color-action-success: #d1fae5;
3060
- --color-action-disabled: #9ca3af;
3061
- --color-feedback-success-text: #d1fae5;
3062
- --color-feedback-success-icon: #d1fae5;
3063
- --color-feedback-success-background: #065f46;
3064
- --color-feedback-success-border: #10b981;
3065
- --color-feedback-error-text: #fee2e2;
3066
- --color-feedback-error-icon: #fee2e2;
3067
- --color-feedback-error-background: #b91c1c;
3068
- --color-feedback-error-border: #ef4444;
3069
- --color-feedback-warning-text: #fef3c7;
3070
- --color-feedback-warning-icon: #fef3c7;
3071
- --color-feedback-warning-background: #92400e;
3072
- --color-feedback-warning-border: #f59e0b;
3073
- --color-feedback-info-text: #60a5fa;
3074
- --color-feedback-info-icon: #60a5fa;
3075
- --color-feedback-info-background: #1e3160;
3076
- --color-feedback-info-border: #2563eb;
3077
- --color-device-charging-background: #581c87;
3078
- --color-device-charging-border: #a855f7;
3079
- --color-device-charging-text: #e9d5ff;
3080
- --color-device-discharging-background: #78350f;
3081
- --color-device-discharging-border: #eab308;
3082
- --color-device-discharging-text: #fef3c7;
3083
- --color-device-heat-background: #7f1d1d;
3084
- --color-device-heat-border: #ef4444;
3085
- --color-device-heat-text: #fee2e2;
3086
- --color-device-cool-background: #1e3a8a;
3087
- --color-device-cool-border: #3b82f6;
3088
- --color-device-cool-text: #dbeafe;
3089
- --color-device-eco-background: #064e3b;
3090
- --color-device-eco-border: #10b981;
3091
- --color-device-eco-text: #d1fae5;
3092
- --color-device-auto-background: #7c2d12;
3093
- --color-device-auto-border: #fb923c;
3094
- --color-device-auto-text: #ffedd5;
3095
- --color-device-on-background: #134e4a;
3096
- --color-device-on-border: #14b8a6;
3097
- --color-device-on-text: #ccfbf1;
3098
- --color-device-idle-background: #374151;
3099
- --color-device-idle-border: #6b7280;
3100
- --color-device-idle-text: #e5e7eb;
3101
- --color-device-off-background: #374151;
3102
- --color-device-off-border: #6b7280;
3103
- --color-device-off-text: #e5e7eb;
3104
- --color-device-unknown-background: #1f2937;
3105
- --color-device-unknown-border: #6b7280;
3106
- --color-device-unknown-text: #ffffff;
3107
- --color-device-importing-background: #1f2937;
3108
- --color-device-importing-border: #6b7280;
3109
- --color-device-importing-text: #ffffff;
3110
- --color-device-exporting-background: #1f2937;
3111
- --color-device-exporting-border: #6b7280;
3112
- --color-device-exporting-text: #ffffff;
3113
- --skeleton-base: #2e3a59;
3114
- --skeleton-highlight: #374151;
3115
- --skeleton-wave: rgba(255, 255, 255, 0.1);
3116
- }
3117
- .slide-in-from-right {
3118
- animation: slide-in-from-right 0.3s ease-out;
3119
- }
3120
- .slide-in-from-left {
3121
- animation: slide-in-from-left 0.3s ease-out;
3122
- }
3123
- .slide-out-to-right {
3124
- animation: slide-out-to-right 0.15s ease-in;
3125
- }
3126
- .slide-out-to-left {
3127
- animation: slide-out-to-left 0.15s ease-in;
3128
- }
3129
- .fade-in {
3130
- animation: fade-in 0.2s ease-out;
4112
+ @property --tw-border-spacing-x {
4113
+ syntax: "<length>";
4114
+ inherits: false;
4115
+ initial-value: 0;
3131
4116
  }
3132
- .fade-out {
3133
- animation: fade-out 0.15s ease-in;
4117
+ @property --tw-border-spacing-y {
4118
+ syntax: "<length>";
4119
+ inherits: false;
4120
+ initial-value: 0;
3134
4121
  }
3135
4122
  @property --tw-translate-x {
3136
4123
  syntax: "*";
@@ -3172,6 +4159,11 @@
3172
4159
  inherits: false;
3173
4160
  initial-value: 0;
3174
4161
  }
4162
+ @property --tw-space-x-reverse {
4163
+ syntax: "*";
4164
+ inherits: false;
4165
+ initial-value: 0;
4166
+ }
3175
4167
  @property --tw-divide-x-reverse {
3176
4168
  syntax: "*";
3177
4169
  inherits: false;
@@ -3433,15 +4425,20 @@
3433
4425
  initial-value: "";
3434
4426
  inherits: false;
3435
4427
  }
3436
- @keyframes spin {
3437
- to {
3438
- transform: rotate(360deg);
3439
- }
4428
+ @property --tw-scale-x {
4429
+ syntax: "*";
4430
+ inherits: false;
4431
+ initial-value: 1;
3440
4432
  }
3441
- @keyframes pulse {
3442
- 50% {
3443
- opacity: 0.5;
3444
- }
4433
+ @property --tw-scale-y {
4434
+ syntax: "*";
4435
+ inherits: false;
4436
+ initial-value: 1;
4437
+ }
4438
+ @property --tw-scale-z {
4439
+ syntax: "*";
4440
+ inherits: false;
4441
+ initial-value: 1;
3445
4442
  }
3446
4443
  @keyframes spin {
3447
4444
  to {
@@ -3456,6 +4453,8 @@
3456
4453
  @layer properties {
3457
4454
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3458
4455
  *, ::before, ::after, ::backdrop {
4456
+ --tw-border-spacing-x: 0;
4457
+ --tw-border-spacing-y: 0;
3459
4458
  --tw-translate-x: 0;
3460
4459
  --tw-translate-y: 0;
3461
4460
  --tw-translate-z: 0;
@@ -3465,6 +4464,7 @@
3465
4464
  --tw-skew-x: initial;
3466
4465
  --tw-skew-y: initial;
3467
4466
  --tw-space-y-reverse: 0;
4467
+ --tw-space-x-reverse: 0;
3468
4468
  --tw-divide-x-reverse: 0;
3469
4469
  --tw-border-style: solid;
3470
4470
  --tw-divide-y-reverse: 0;
@@ -3525,6 +4525,9 @@
3525
4525
  --tw-duration: initial;
3526
4526
  --tw-ease: initial;
3527
4527
  --tw-content: "";
4528
+ --tw-scale-x: 1;
4529
+ --tw-scale-y: 1;
4530
+ --tw-scale-z: 1;
3528
4531
  }
3529
4532
  }
3530
4533
  }