@react-text-game/ui 0.3.17 → 0.3.18

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 (2) hide show
  1. package/dist/styles/index.css +125 -1746
  2. package/package.json +4 -6
@@ -1,47 +1,27 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-white: #fff;
11
- --spacing: 0.25rem;
12
- --container-2xl: 42rem;
13
- --container-4xl: 56rem;
14
- --container-7xl: 80rem;
15
- --text-xs: 0.75rem;
16
- --text-xs--line-height: calc(1 / 0.75);
17
- --text-sm: 0.875rem;
18
- --text-sm--line-height: calc(1.25 / 0.875);
19
- --text-base: 1rem;
20
- --text-base--line-height: calc(1.5 / 1);
21
- --text-lg: 1.125rem;
22
- --text-lg--line-height: calc(1.75 / 1.125);
23
- --text-xl: 1.25rem;
24
- --text-xl--line-height: calc(1.75 / 1.25);
25
- --text-2xl: 1.5rem;
26
- --text-2xl--line-height: calc(2 / 1.5);
27
- --text-3xl: 1.875rem;
28
- --text-3xl--line-height: calc(2.25 / 1.875);
29
- --text-4xl: 2.25rem;
30
- --text-4xl--line-height: calc(2.5 / 2.25);
31
- --font-weight-light: 300;
32
- --font-weight-medium: 500;
33
- --font-weight-semibold: 600;
34
- --font-weight-bold: 700;
35
- --radius-sm: 0.25rem;
36
- --radius-md: 0.375rem;
37
- --radius-lg: 0.5rem;
38
- --radius-2xl: 1rem;
39
- --animate-spin: spin 1s linear infinite;
40
- --blur-sm: 8px;
41
- --default-transition-duration: 150ms;
42
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
43
- --default-font-family: var(--font-sans);
44
- --default-mono-font-family: var(--font-mono);
1
+ /*
2
+ * @react-text-game/ui - Theme & Styles
3
+ *
4
+ * This file is designed to be imported by consumers INSIDE their own
5
+ * Tailwind CSS setup. It provides:
6
+ * 1. @theme declarations (custom color tokens for Tailwind utilities)
7
+ * 2. @source directive (so consumer's Tailwind scans library components)
8
+ * 3. Library-specific keyframes
9
+ *
10
+ * Usage in your app's CSS file:
11
+ * @import "tailwindcss";
12
+ * @import "@react-text-game/ui/styles";
13
+ *
14
+ * The consumer's Tailwind instance handles theme/base/utilities layers.
15
+ * This file only extends the consumer's theme with library tokens.
16
+ */
17
+
18
+ /* Tell the consumer's Tailwind to scan our library components for utility classes.
19
+ * Path is relative to this CSS file (dist/styles/index.css -> dist/**\/*.js) */
20
+ @source "../**/*.js";
21
+
22
+ /* Theme Variables - Define semantic colors for theme customization */
23
+ @theme {
24
+ /* Primary Brand Colors */
45
25
  --color-primary-50: oklch(0.97 0.01 250);
46
26
  --color-primary-100: oklch(0.93 0.03 250);
47
27
  --color-primary-200: oklch(0.87 0.06 250);
@@ -49,1750 +29,149 @@
49
29
  --color-primary-400: oklch(0.68 0.13 250);
50
30
  --color-primary-500: oklch(0.58 0.16 250);
51
31
  --color-primary-600: oklch(0.48 0.15 250);
52
- --color-primary-700: oklch(0.40 0.13 250);
53
- --color-primary-800: oklch(0.33 0.10 250);
32
+ --color-primary-700: oklch(0.4 0.13 250);
33
+ --color-primary-800: oklch(0.33 0.1 250);
54
34
  --color-primary-900: oklch(0.27 0.07 250);
55
35
  --color-primary-950: oklch(0.17 0.04 250);
36
+
37
+ /* Secondary Brand Colors */
56
38
  --color-secondary-50: oklch(0.97 0.01 280);
57
39
  --color-secondary-100: oklch(0.93 0.04 280);
58
40
  --color-secondary-200: oklch(0.87 0.08 280);
59
41
  --color-secondary-300: oklch(0.78 0.13 280);
60
42
  --color-secondary-400: oklch(0.68 0.17 280);
61
- --color-secondary-500: oklch(0.58 0.20 280);
43
+ --color-secondary-500: oklch(0.58 0.2 280);
62
44
  --color-secondary-600: oklch(0.48 0.18 280);
63
- --color-secondary-700: oklch(0.40 0.15 280);
45
+ --color-secondary-700: oklch(0.4 0.15 280);
64
46
  --color-secondary-800: oklch(0.33 0.12 280);
47
+ --color-secondary-900: oklch(0.27 0.09 280);
48
+ --color-secondary-950: oklch(0.17 0.05 280);
49
+
50
+ /* Success Semantic Colors */
65
51
  --color-success-50: oklch(0.97 0.01 145);
66
52
  --color-success-100: oklch(0.93 0.03 145);
67
53
  --color-success-200: oklch(0.87 0.08 145);
68
54
  --color-success-300: oklch(0.79 0.12 145);
55
+ --color-success-400: oklch(0.7 0.16 145);
69
56
  --color-success-500: oklch(0.63 0.18 145);
70
57
  --color-success-600: oklch(0.53 0.16 145);
71
58
  --color-success-700: oklch(0.44 0.13 145);
72
- --color-success-800: oklch(0.37 0.10 145);
59
+ --color-success-800: oklch(0.37 0.1 145);
60
+ --color-success-900: oklch(0.31 0.07 145);
61
+ --color-success-950: oklch(0.19 0.04 145);
62
+
63
+ /* Warning Semantic Colors */
73
64
  --color-warning-50: oklch(0.98 0.01 85);
74
65
  --color-warning-100: oklch(0.95 0.04 85);
75
- --color-warning-200: oklch(0.90 0.10 85);
66
+ --color-warning-200: oklch(0.9 0.1 85);
76
67
  --color-warning-300: oklch(0.84 0.15 85);
77
- --color-warning-500: oklch(0.70 0.18 85);
68
+ --color-warning-400: oklch(0.77 0.18 85);
69
+ --color-warning-500: oklch(0.7 0.18 85);
78
70
  --color-warning-600: oklch(0.59 0.15 85);
79
71
  --color-warning-700: oklch(0.48 0.12 85);
80
- --color-warning-800: oklch(0.40 0.10 85);
72
+ --color-warning-800: oklch(0.4 0.1 85);
73
+ --color-warning-900: oklch(0.34 0.08 85);
74
+ --color-warning-950: oklch(0.21 0.04 85);
75
+
76
+ /* Danger/Error Semantic Colors */
81
77
  --color-danger-50: oklch(0.97 0.01 25);
82
78
  --color-danger-100: oklch(0.94 0.03 25);
83
79
  --color-danger-200: oklch(0.88 0.07 25);
84
80
  --color-danger-300: oklch(0.81 0.12 25);
81
+ --color-danger-400: oklch(0.71 0.18 25);
85
82
  --color-danger-500: oklch(0.63 0.21 25);
86
83
  --color-danger-600: oklch(0.55 0.22 25);
87
84
  --color-danger-700: oklch(0.46 0.19 25);
88
85
  --color-danger-800: oklch(0.39 0.15 25);
89
86
  --color-danger-900: oklch(0.34 0.12 25);
87
+ --color-danger-950: oklch(0.2 0.06 25);
88
+
89
+ /* Info Semantic Colors */
90
+ --color-info-50: oklch(0.97 0.01 220);
91
+ --color-info-100: oklch(0.93 0.03 220);
92
+ --color-info-200: oklch(0.87 0.07 220);
93
+ --color-info-300: oklch(0.78 0.11 220);
94
+ --color-info-400: oklch(0.68 0.15 220);
95
+ --color-info-500: oklch(0.58 0.17 220);
96
+ --color-info-600: oklch(0.48 0.16 220);
97
+ --color-info-700: oklch(0.4 0.14 220);
98
+ --color-info-800: oklch(0.33 0.11 220);
99
+ --color-info-900: oklch(0.27 0.08 220);
100
+ --color-info-950: oklch(0.17 0.04 220);
101
+
102
+ /* Muted/Neutral Colors */
90
103
  --color-muted-50: oklch(0.99 0 0);
91
104
  --color-muted-100: oklch(0.97 0.001 286);
92
105
  --color-muted-200: oklch(0.93 0.003 286);
93
106
  --color-muted-300: oklch(0.87 0.005 286);
94
107
  --color-muted-400: oklch(0.71 0.008 286);
95
- --color-muted-500: oklch(0.55 0.010 286);
96
- --color-muted-600: oklch(0.45 0.010 286);
108
+ --color-muted-500: oklch(0.55 0.01 286);
109
+ --color-muted-600: oklch(0.45 0.01 286);
97
110
  --color-muted-700: oklch(0.38 0.009 286);
111
+ --color-muted-800: oklch(0.27 0.007 286);
112
+ --color-muted-900: oklch(0.2 0.006 286);
113
+ --color-muted-950: oklch(0.13 0.004 286);
114
+
115
+ /* Brand Color Foregrounds (for text on colored backgrounds) */
98
116
  --color-primary-foreground: oklch(0.99 0 0);
99
117
  --color-secondary-foreground: oklch(0.99 0 0);
100
118
  --color-success-foreground: oklch(0.99 0 0);
101
119
  --color-warning-foreground: oklch(0.15 0.004 286);
102
120
  --color-danger-foreground: oklch(0.99 0 0);
103
- --color-background: oklch(0.13 0.004 286);
104
- --color-foreground: oklch(0.98 0.001 286);
105
- --color-card: oklch(0.13 0.004 286);
106
- --color-card-foreground: oklch(0.98 0.001 286);
107
- --color-popover: oklch(0.13 0.004 286);
108
- --color-popover-foreground: oklch(0.98 0.001 286);
109
- --color-border: oklch(0.27 0.007 286);
110
- --color-input: oklch(0.27 0.007 286);
111
- --color-muted: oklch(0.27 0.007 286);
112
- --color-muted-foreground: oklch(0.71 0.008 286);
113
- --color-accent-foreground: oklch(0.98 0.001 286);
121
+ --color-info-foreground: oklch(0.99 0 0);
122
+
123
+ /* Semantic Background & Foreground Colors */
124
+ --color-background: oklch(1 0 0);
125
+ --color-foreground: oklch(0.15 0.004 286);
126
+ --color-card: oklch(1 0 0);
127
+ --color-card-foreground: oklch(0.15 0.004 286);
128
+ --color-popover: oklch(1 0 0);
129
+ --color-popover-foreground: oklch(0.15 0.004 286);
130
+ --color-border: oklch(0.9 0.003 286);
131
+ --color-input: oklch(0.9 0.003 286);
132
+ --color-ring: oklch(0.58 0.16 250);
133
+ --color-muted: oklch(0.97 0.001 286);
134
+ --color-muted-foreground: oklch(0.55 0.01 286);
135
+ --color-accent: oklch(0.97 0.001 286);
136
+ --color-accent-foreground: oklch(0.15 0.004 286);
137
+ --color-destructive: oklch(0.63 0.21 25);
138
+ --color-destructive-foreground: oklch(0.99 0.001 286);
139
+
140
+ /* Overlay for modals/backdrops (use with opacity, e.g. bg-overlay/40) */
114
141
  --color-overlay: oklch(0 0 0);
115
- }
116
- }
117
- @layer base {
118
- *, ::after, ::before, ::backdrop, ::file-selector-button {
119
- box-sizing: border-box;
120
- margin: 0;
121
- padding: 0;
122
- border: 0 solid;
123
- }
124
- html, :host {
125
- line-height: 1.5;
126
- -webkit-text-size-adjust: 100%;
127
- tab-size: 4;
128
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
129
- font-feature-settings: var(--default-font-feature-settings, normal);
130
- font-variation-settings: var(--default-font-variation-settings, normal);
131
- -webkit-tap-highlight-color: transparent;
132
- }
133
- hr {
134
- height: 0;
135
- color: inherit;
136
- border-top-width: 1px;
137
- }
138
- abbr:where([title]) {
139
- -webkit-text-decoration: underline dotted;
140
- text-decoration: underline dotted;
141
- }
142
- h1, h2, h3, h4, h5, h6 {
143
- font-size: inherit;
144
- font-weight: inherit;
145
- }
146
- a {
147
- color: inherit;
148
- -webkit-text-decoration: inherit;
149
- text-decoration: inherit;
150
- }
151
- b, strong {
152
- font-weight: bolder;
153
- }
154
- code, kbd, samp, pre {
155
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
156
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
157
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
158
- font-size: 1em;
159
- }
160
- small {
161
- font-size: 80%;
162
- }
163
- sub, sup {
164
- font-size: 75%;
165
- line-height: 0;
166
- position: relative;
167
- vertical-align: baseline;
168
- }
169
- sub {
170
- bottom: -0.25em;
171
- }
172
- sup {
173
- top: -0.5em;
174
- }
175
- table {
176
- text-indent: 0;
177
- border-color: inherit;
178
- border-collapse: collapse;
179
- }
180
- :-moz-focusring {
181
- outline: auto;
182
- }
183
- progress {
184
- vertical-align: baseline;
185
- }
186
- summary {
187
- display: list-item;
188
- }
189
- ol, ul, menu {
190
- list-style: none;
191
- }
192
- img, svg, video, canvas, audio, iframe, embed, object {
193
- display: block;
194
- vertical-align: middle;
195
- }
196
- img, video {
197
- max-width: 100%;
198
- height: auto;
199
- }
200
- button, input, select, optgroup, textarea, ::file-selector-button {
201
- font: inherit;
202
- font-feature-settings: inherit;
203
- font-variation-settings: inherit;
204
- letter-spacing: inherit;
205
- color: inherit;
206
- border-radius: 0;
207
- background-color: transparent;
208
- opacity: 1;
209
- }
210
- :where(select:is([multiple], [size])) optgroup {
211
- font-weight: bolder;
212
- }
213
- :where(select:is([multiple], [size])) optgroup option {
214
- padding-inline-start: 20px;
215
- }
216
- ::file-selector-button {
217
- margin-inline-end: 4px;
218
- }
219
- ::placeholder {
220
- opacity: 1;
221
- }
222
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
223
- ::placeholder {
224
- color: currentcolor;
225
- @supports (color: color-mix(in lab, red, red)) {
226
- color: color-mix(in oklab, currentcolor 50%, transparent);
227
- }
228
- }
229
- }
230
- textarea {
231
- resize: vertical;
232
- }
233
- ::-webkit-search-decoration {
234
- -webkit-appearance: none;
235
- }
236
- ::-webkit-date-and-time-value {
237
- min-height: 1lh;
238
- text-align: inherit;
239
- }
240
- ::-webkit-datetime-edit {
241
- display: inline-flex;
242
- }
243
- ::-webkit-datetime-edit-fields-wrapper {
244
- padding: 0;
245
- }
246
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
247
- padding-block: 0;
248
- }
249
- ::-webkit-calendar-picker-indicator {
250
- line-height: 1;
251
- }
252
- :-moz-ui-invalid {
253
- box-shadow: none;
254
- }
255
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
256
- appearance: button;
257
- }
258
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
259
- height: auto;
260
- }
261
- [hidden]:where(:not([hidden="until-found"])) {
262
- display: none !important;
263
- }
264
- }
265
- @layer utilities {
266
- .pointer-events-auto {
267
- pointer-events: auto;
268
- }
269
- .pointer-events-none {
270
- pointer-events: none;
271
- }
272
- .visible {
273
- visibility: visible;
274
- }
275
- .absolute {
276
- position: absolute;
277
- }
278
- .fixed {
279
- position: fixed;
280
- }
281
- .relative {
282
- position: relative;
283
- }
284
- .static {
285
- position: static;
286
- }
287
- .inset-0 {
288
- inset: calc(var(--spacing) * 0);
289
- }
290
- .top-2 {
291
- top: calc(var(--spacing) * 2);
292
- }
293
- .top-4 {
294
- top: calc(var(--spacing) * 4);
295
- }
296
- .top-10 {
297
- top: calc(var(--spacing) * 10);
298
- }
299
- .top-full {
300
- top: 100%;
301
- }
302
- .right-2 {
303
- right: calc(var(--spacing) * 2);
304
- }
305
- .right-4 {
306
- right: calc(var(--spacing) * 4);
307
- }
308
- .right-20 {
309
- right: calc(var(--spacing) * 20);
310
- }
311
- .bottom-0 {
312
- bottom: calc(var(--spacing) * 0);
313
- }
314
- .bottom-3 {
315
- bottom: calc(var(--spacing) * 3);
316
- }
317
- .left-0 {
318
- left: calc(var(--spacing) * 0);
319
- }
320
- .left-1\/2 {
321
- left: calc(1/2 * 100%);
322
- }
323
- .left-2 {
324
- left: calc(var(--spacing) * 2);
325
- }
326
- .left-10 {
327
- left: calc(var(--spacing) * 10);
328
- }
329
- .left-full {
330
- left: 100%;
331
- }
332
- .-z-10 {
333
- z-index: calc(10 * -1);
334
- }
335
- .z-0 {
336
- z-index: 0;
337
- }
338
- .z-10 {
339
- z-index: 10;
340
- }
341
- .z-20 {
342
- z-index: 20;
343
- }
344
- .z-50 {
345
- z-index: 50;
346
- }
347
- .z-10000000 {
348
- z-index: 10000000;
349
- }
350
- .z-100000000 {
351
- z-index: 100000000;
352
- }
353
- .z-\[9999\] {
354
- z-index: 9999;
355
- }
356
- .order-first {
357
- order: -9999;
358
- }
359
- .order-last {
360
- order: 9999;
361
- }
362
- .container {
363
- width: 100%;
364
- @media (width >= 40rem) {
365
- max-width: 40rem;
366
- }
367
- @media (width >= 48rem) {
368
- max-width: 48rem;
369
- }
370
- @media (width >= 64rem) {
371
- max-width: 64rem;
372
- }
373
- @media (width >= 80rem) {
374
- max-width: 80rem;
375
- }
376
- @media (width >= 96rem) {
377
- max-width: 96rem;
378
- }
379
- }
380
- .m-auto {
381
- margin: auto;
382
- }
383
- .mx-0 {
384
- margin-inline: calc(var(--spacing) * 0);
385
- }
386
- .mx-auto {
387
- margin-inline: auto;
388
- }
389
- .my-4 {
390
- margin-block: calc(var(--spacing) * 4);
391
- }
392
- .mt-1 {
393
- margin-top: calc(var(--spacing) * 1);
394
- }
395
- .mt-4 {
396
- margin-top: calc(var(--spacing) * 4);
397
- }
398
- .mt-10 {
399
- margin-top: calc(var(--spacing) * 10);
400
- }
401
- .mr-2 {
402
- margin-right: calc(var(--spacing) * 2);
403
- }
404
- .mb-1 {
405
- margin-bottom: calc(var(--spacing) * 1);
406
- }
407
- .mb-2 {
408
- margin-bottom: calc(var(--spacing) * 2);
409
- }
410
- .mb-3 {
411
- margin-bottom: calc(var(--spacing) * 3);
412
- }
413
- .mb-4 {
414
- margin-bottom: calc(var(--spacing) * 4);
415
- }
416
- .ml-1 {
417
- margin-left: calc(var(--spacing) * 1);
418
- }
419
- .ml-2 {
420
- margin-left: calc(var(--spacing) * 2);
421
- }
422
- .line-clamp-2 {
423
- overflow: hidden;
424
- display: -webkit-box;
425
- -webkit-box-orient: vertical;
426
- -webkit-line-clamp: 2;
427
- }
428
- .flex {
429
- display: flex;
430
- }
431
- .grid {
432
- display: grid;
433
- }
434
- .hidden {
435
- display: none;
436
- }
437
- .inline {
438
- display: inline;
439
- }
440
- .inline-block {
441
- display: inline-block;
442
- }
443
- .table {
444
- display: table;
445
- }
446
- .h-1 {
447
- height: calc(var(--spacing) * 1);
448
- }
449
- .h-2 {
450
- height: calc(var(--spacing) * 2);
451
- }
452
- .h-4 {
453
- height: calc(var(--spacing) * 4);
454
- }
455
- .h-5 {
456
- height: calc(var(--spacing) * 5);
457
- }
458
- .h-6 {
459
- height: calc(var(--spacing) * 6);
460
- }
461
- .h-8 {
462
- height: calc(var(--spacing) * 8);
463
- }
464
- .h-10 {
465
- height: calc(var(--spacing) * 10);
466
- }
467
- .h-30 {
468
- height: calc(var(--spacing) * 30);
469
- }
470
- .h-32 {
471
- height: calc(var(--spacing) * 32);
472
- }
473
- .h-auto {
474
- height: auto;
475
- }
476
- .h-full {
477
- height: 100%;
478
- }
479
- .max-h-100 {
480
- max-height: calc(var(--spacing) * 100);
481
- }
482
- .max-h-200 {
483
- max-height: calc(var(--spacing) * 200);
484
- }
485
- .max-h-\[90vh\] {
486
- max-height: 90vh;
487
- }
488
- .max-h-screen {
489
- max-height: 100vh;
490
- }
491
- .min-h-0 {
492
- min-height: calc(var(--spacing) * 0);
493
- }
494
- .min-h-full {
495
- min-height: 100%;
496
- }
497
- .w-2 {
498
- width: calc(var(--spacing) * 2);
499
- }
500
- .w-4 {
501
- width: calc(var(--spacing) * 4);
502
- }
503
- .w-5 {
504
- width: calc(var(--spacing) * 5);
505
- }
506
- .w-6 {
507
- width: calc(var(--spacing) * 6);
508
- }
509
- .w-8 {
510
- width: calc(var(--spacing) * 8);
511
- }
512
- .w-10 {
513
- width: calc(var(--spacing) * 10);
514
- }
515
- .w-12 {
516
- width: calc(var(--spacing) * 12);
517
- }
518
- .w-40 {
519
- width: calc(var(--spacing) * 40);
520
- }
521
- .w-auto {
522
- width: auto;
523
- }
524
- .w-full {
525
- width: 100%;
526
- }
527
- .w-screen {
528
- width: 100vw;
529
- }
530
- .max-w-2xl {
531
- max-width: var(--container-2xl);
532
- }
533
- .max-w-7xl {
534
- max-width: var(--container-7xl);
535
- }
536
- .max-w-40 {
537
- max-width: calc(var(--spacing) * 40);
538
- }
539
- .max-w-100 {
540
- max-width: calc(var(--spacing) * 100);
541
- }
542
- .max-w-200 {
543
- max-width: calc(var(--spacing) * 200);
544
- }
545
- .max-w-\[70\%\] {
546
- max-width: 70%;
547
- }
548
- .max-w-\[80\%\] {
549
- max-width: 80%;
550
- }
551
- .max-w-\[1200px\] {
552
- max-width: 1200px;
553
- }
554
- .max-w-full {
555
- max-width: 100%;
556
- }
557
- .max-w-none {
558
- max-width: none;
559
- }
560
- .min-w-full {
561
- min-width: 100%;
562
- }
563
- .flex-1 {
564
- flex: 1;
565
- }
566
- .flex-shrink-0 {
567
- flex-shrink: 0;
568
- }
569
- .flex-grow {
570
- flex-grow: 1;
571
- }
572
- .-translate-x-1\/2 {
573
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
574
- translate: var(--tw-translate-x) var(--tw-translate-y);
575
- }
576
- .translate-y-0 {
577
- --tw-translate-y: calc(var(--spacing) * 0);
578
- translate: var(--tw-translate-x) var(--tw-translate-y);
579
- }
580
- .translate-y-\[calc\(100\%-1rem\)\] {
581
- --tw-translate-y: calc(100% - 1rem);
582
- translate: var(--tw-translate-x) var(--tw-translate-y);
583
- }
584
- .rotate-45 {
585
- rotate: 45deg;
586
- }
587
- .rotate-180 {
588
- rotate: 180deg;
589
- }
590
- .transform {
591
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
592
- }
593
- .animate-\[fadeIn_0\.3s_ease-in-out\] {
594
- animation: fadeIn 0.3s ease-in-out;
595
- }
596
- .animate-\[fadeIn_150ms_ease-in\] {
597
- animation: fadeIn 150ms ease-in;
598
- }
599
- .animate-spin {
600
- animation: var(--animate-spin);
601
- }
602
- .cursor-default {
603
- cursor: default;
604
- }
605
- .cursor-pointer {
606
- cursor: pointer;
607
- }
608
- .resize {
609
- resize: both;
610
- }
611
- .resize-none {
612
- resize: none;
613
- }
614
- .grid-cols-1 {
615
- grid-template-columns: repeat(1, minmax(0, 1fr));
616
- }
617
- .flex-col {
618
- flex-direction: column;
619
- }
620
- .flex-row {
621
- flex-direction: row;
622
- }
623
- .flex-wrap {
624
- flex-wrap: wrap;
625
- }
626
- .content-center {
627
- align-content: center;
628
- }
629
- .items-center {
630
- align-items: center;
631
- }
632
- .items-end {
633
- align-items: flex-end;
634
- }
635
- .items-start {
636
- align-items: flex-start;
637
- }
638
- .justify-between {
639
- justify-content: space-between;
640
- }
641
- .justify-center {
642
- justify-content: center;
643
- }
644
- .justify-end {
645
- justify-content: flex-end;
646
- }
647
- .justify-start {
648
- justify-content: flex-start;
649
- }
650
- .gap-2 {
651
- gap: calc(var(--spacing) * 2);
652
- }
653
- .gap-4 {
654
- gap: calc(var(--spacing) * 4);
655
- }
656
- .gap-8 {
657
- gap: calc(var(--spacing) * 8);
658
- }
659
- .space-y-2 {
660
- :where(& > :not(:last-child)) {
661
- --tw-space-y-reverse: 0;
662
- margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
663
- margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
664
- }
665
- }
666
- .overflow-auto {
667
- overflow: auto;
668
- }
669
- .overflow-hidden {
670
- overflow: hidden;
671
- }
672
- .overflow-x-auto {
673
- overflow-x: auto;
674
- }
675
- .overflow-x-hidden {
676
- overflow-x: hidden;
677
- }
678
- .overflow-y-auto {
679
- overflow-y: auto;
680
- }
681
- .overflow-y-hidden {
682
- overflow-y: hidden;
683
- }
684
- .rounded {
685
- border-radius: 0.25rem;
686
- }
687
- .rounded-2xl {
688
- border-radius: var(--radius-2xl);
689
- }
690
- .rounded-full {
691
- border-radius: calc(infinity * 1px);
692
- }
693
- .rounded-lg {
694
- border-radius: var(--radius-lg);
695
- }
696
- .rounded-md {
697
- border-radius: var(--radius-md);
698
- }
699
- .rounded-t-2xl {
700
- border-top-left-radius: var(--radius-2xl);
701
- border-top-right-radius: var(--radius-2xl);
702
- }
703
- .rounded-t-lg {
704
- border-top-left-radius: var(--radius-lg);
705
- border-top-right-radius: var(--radius-lg);
706
- }
707
- .rounded-tl-sm {
708
- border-top-left-radius: var(--radius-sm);
709
- }
710
- .rounded-tr-sm {
711
- border-top-right-radius: var(--radius-sm);
712
- }
713
- .rounded-br-2xl {
714
- border-bottom-right-radius: var(--radius-2xl);
715
- }
716
- .rounded-br-lg {
717
- border-bottom-right-radius: var(--radius-lg);
718
- }
719
- .rounded-bl-2xl {
720
- border-bottom-left-radius: var(--radius-2xl);
721
- }
722
- .rounded-bl-lg {
723
- border-bottom-left-radius: var(--radius-lg);
724
- }
725
- .border {
726
- border-style: var(--tw-border-style);
727
- border-width: 1px;
728
- }
729
- .border-2 {
730
- border-style: var(--tw-border-style);
731
- border-width: 2px;
732
- }
733
- .border-4 {
734
- border-style: var(--tw-border-style);
735
- border-width: 4px;
736
- }
737
- .border-t {
738
- border-top-style: var(--tw-border-style);
739
- border-top-width: 1px;
740
- }
741
- .border-t-4 {
742
- border-top-style: var(--tw-border-style);
743
- border-top-width: 4px;
744
- }
745
- .border-b {
746
- border-bottom-style: var(--tw-border-style);
747
- border-bottom-width: 1px;
748
- }
749
- .border-border {
750
- border-color: var(--color-border);
751
- }
752
- .border-danger-300 {
753
- border-color: var(--color-danger-300);
754
- }
755
- .border-danger-500 {
756
- border-color: var(--color-danger-500);
757
- }
758
- .border-input {
759
- border-color: var(--color-input);
760
- }
761
- .border-muted-200 {
762
- border-color: var(--color-muted-200);
763
- }
764
- .border-muted-500 {
765
- border-color: var(--color-muted-500);
766
- }
767
- .border-primary-500 {
768
- border-color: var(--color-primary-500);
769
- }
770
- .border-secondary-500 {
771
- border-color: var(--color-secondary-500);
772
- }
773
- .border-success-500 {
774
- border-color: var(--color-success-500);
775
- }
776
- .border-warning-500 {
777
- border-color: var(--color-warning-500);
778
- }
779
- .border-t-primary-500 {
780
- border-top-color: var(--color-primary-500);
781
- }
782
- .bg-background {
783
- background-color: var(--color-background);
784
- }
785
- .bg-card {
786
- background-color: var(--color-card);
787
- }
788
- .bg-danger-100 {
789
- background-color: var(--color-danger-100);
790
- }
791
- .bg-danger-200 {
792
- background-color: var(--color-danger-200);
793
- }
794
- .bg-danger-500 {
795
- background-color: var(--color-danger-500);
796
- }
797
- .bg-muted {
798
- background-color: var(--color-muted);
799
- }
800
- .bg-muted-100 {
801
- background-color: var(--color-muted-100);
802
- }
803
- .bg-muted-200 {
804
- background-color: var(--color-muted-200);
805
- }
806
- .bg-muted-300 {
807
- background-color: var(--color-muted-300);
808
- }
809
- .bg-muted-400 {
810
- background-color: var(--color-muted-400);
811
- }
812
- .bg-muted-500 {
813
- background-color: var(--color-muted-500);
814
- }
815
- .bg-muted\/20 {
816
- background-color: color-mix(in srgb, oklch(0.27 0.007 286) 20%, transparent);
817
- @supports (color: color-mix(in lab, red, red)) {
818
- background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
819
- }
820
- }
821
- .bg-overlay\/40 {
822
- background-color: color-mix(in srgb, oklch(0 0 0) 40%, transparent);
823
- @supports (color: color-mix(in lab, red, red)) {
824
- background-color: color-mix(in oklab, var(--color-overlay) 40%, transparent);
825
- }
826
- }
827
- .bg-overlay\/80 {
828
- background-color: color-mix(in srgb, oklch(0 0 0) 80%, transparent);
829
- @supports (color: color-mix(in lab, red, red)) {
830
- background-color: color-mix(in oklab, var(--color-overlay) 80%, transparent);
831
- }
832
- }
833
- .bg-popover {
834
- background-color: var(--color-popover);
835
- }
836
- .bg-popover\/95 {
837
- background-color: color-mix(in srgb, oklch(0.13 0.004 286) 95%, transparent);
838
- @supports (color: color-mix(in lab, red, red)) {
839
- background-color: color-mix(in oklab, var(--color-popover) 95%, transparent);
840
- }
841
- }
842
- .bg-primary-100 {
843
- background-color: var(--color-primary-100);
844
- }
845
- .bg-primary-200 {
846
- background-color: var(--color-primary-200);
847
- }
848
- .bg-primary-500 {
849
- background-color: var(--color-primary-500);
850
- }
851
- .bg-secondary-100 {
852
- background-color: var(--color-secondary-100);
853
- }
854
- .bg-secondary-200 {
855
- background-color: var(--color-secondary-200);
856
- }
857
- .bg-secondary-500 {
858
- background-color: var(--color-secondary-500);
859
- }
860
- .bg-secondary-600 {
861
- background-color: var(--color-secondary-600);
862
- }
863
- .bg-success-100 {
864
- background-color: var(--color-success-100);
865
- }
866
- .bg-success-200 {
867
- background-color: var(--color-success-200);
868
- }
869
- .bg-success-500 {
870
- background-color: var(--color-success-500);
871
- }
872
- .bg-transparent {
873
- background-color: transparent;
874
- }
875
- .bg-warning-100 {
876
- background-color: var(--color-warning-100);
877
- }
878
- .bg-warning-200 {
879
- background-color: var(--color-warning-200);
880
- }
881
- .bg-warning-500 {
882
- background-color: var(--color-warning-500);
883
- }
884
- .bg-white\/10 {
885
- background-color: color-mix(in srgb, #fff 10%, transparent);
886
- @supports (color: color-mix(in lab, red, red)) {
887
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
888
- }
889
- }
890
- .bg-cover {
891
- background-size: cover;
892
- }
893
- .bg-center {
894
- background-position: center;
895
- }
896
- .bg-no-repeat {
897
- background-repeat: no-repeat;
898
- }
899
- .object-contain {
900
- object-fit: contain;
901
- }
902
- .object-cover {
903
- object-fit: cover;
904
- }
905
- .p-2 {
906
- padding: calc(var(--spacing) * 2);
907
- }
908
- .p-3 {
909
- padding: calc(var(--spacing) * 3);
910
- }
911
- .p-4 {
912
- padding: calc(var(--spacing) * 4);
913
- }
914
- .p-6 {
915
- padding: calc(var(--spacing) * 6);
916
- }
917
- .p-8 {
918
- padding: calc(var(--spacing) * 8);
919
- }
920
- .px-2 {
921
- padding-inline: calc(var(--spacing) * 2);
922
- }
923
- .px-3 {
924
- padding-inline: calc(var(--spacing) * 3);
925
- }
926
- .px-4 {
927
- padding-inline: calc(var(--spacing) * 4);
928
- }
929
- .px-6 {
930
- padding-inline: calc(var(--spacing) * 6);
931
- }
932
- .py-2 {
933
- padding-block: calc(var(--spacing) * 2);
934
- }
935
- .py-2\.5 {
936
- padding-block: calc(var(--spacing) * 2.5);
937
- }
938
- .py-3 {
939
- padding-block: calc(var(--spacing) * 3);
940
- }
941
- .py-6 {
942
- padding-block: calc(var(--spacing) * 6);
943
- }
944
- .pt-2 {
945
- padding-top: calc(var(--spacing) * 2);
946
- }
947
- .text-justify {
948
- text-align: justify;
949
- }
950
- .text-left {
951
- text-align: left;
952
- }
953
- .font-mono {
954
- font-family: var(--font-mono);
955
- }
956
- .text-2xl {
957
- font-size: var(--text-2xl);
958
- line-height: var(--tw-leading, var(--text-2xl--line-height));
959
- }
960
- .text-3xl {
961
- font-size: var(--text-3xl);
962
- line-height: var(--tw-leading, var(--text-3xl--line-height));
963
- }
964
- .text-4xl {
965
- font-size: var(--text-4xl);
966
- line-height: var(--tw-leading, var(--text-4xl--line-height));
967
- }
968
- .text-base {
969
- font-size: var(--text-base);
970
- line-height: var(--tw-leading, var(--text-base--line-height));
971
- }
972
- .text-lg {
973
- font-size: var(--text-lg);
974
- line-height: var(--tw-leading, var(--text-lg--line-height));
975
- }
976
- .text-sm {
977
- font-size: var(--text-sm);
978
- line-height: var(--tw-leading, var(--text-sm--line-height));
979
- }
980
- .text-xl {
981
- font-size: var(--text-xl);
982
- line-height: var(--tw-leading, var(--text-xl--line-height));
983
- }
984
- .text-xs {
985
- font-size: var(--text-xs);
986
- line-height: var(--tw-leading, var(--text-xs--line-height));
987
- }
988
- .leading-none {
989
- --tw-leading: 1;
990
- line-height: 1;
991
- }
992
- .font-bold {
993
- --tw-font-weight: var(--font-weight-bold);
994
- font-weight: var(--font-weight-bold);
995
- }
996
- .font-light {
997
- --tw-font-weight: var(--font-weight-light);
998
- font-weight: var(--font-weight-light);
999
- }
1000
- .font-medium {
1001
- --tw-font-weight: var(--font-weight-medium);
1002
- font-weight: var(--font-weight-medium);
1003
- }
1004
- .font-semibold {
1005
- --tw-font-weight: var(--font-weight-semibold);
1006
- font-weight: var(--font-weight-semibold);
1007
- }
1008
- .whitespace-nowrap {
1009
- white-space: nowrap;
1010
- }
1011
- .whitespace-pre-wrap {
1012
- white-space: pre-wrap;
1013
- }
1014
- .text-card-foreground {
1015
- color: var(--color-card-foreground);
1016
- }
1017
- .text-danger-600 {
1018
- color: var(--color-danger-600);
1019
- }
1020
- .text-danger-700 {
1021
- color: var(--color-danger-700);
1022
- }
1023
- .text-danger-800 {
1024
- color: var(--color-danger-800);
1025
- }
1026
- .text-danger-900 {
1027
- color: var(--color-danger-900);
1028
- }
1029
- .text-danger-foreground {
1030
- color: var(--color-danger-foreground);
1031
- }
1032
- .text-foreground {
1033
- color: var(--color-foreground);
1034
- }
1035
- .text-muted-700 {
1036
- color: var(--color-muted-700);
1037
- }
1038
- .text-muted-foreground {
1039
- color: var(--color-muted-foreground);
1040
- }
1041
- .text-popover-foreground {
1042
- color: var(--color-popover-foreground);
1043
- }
1044
- .text-primary-500 {
1045
- color: var(--color-primary-500);
1046
- }
1047
- .text-primary-600 {
1048
- color: var(--color-primary-600);
1049
- }
1050
- .text-primary-700 {
1051
- color: var(--color-primary-700);
1052
- }
1053
- .text-primary-800 {
1054
- color: var(--color-primary-800);
1055
- }
1056
- .text-primary-900 {
1057
- color: var(--color-primary-900);
1058
- }
1059
- .text-primary-foreground {
1060
- color: var(--color-primary-foreground);
1061
- }
1062
- .text-secondary-400 {
1063
- color: var(--color-secondary-400);
1064
- }
1065
- .text-secondary-500 {
1066
- color: var(--color-secondary-500);
1067
- }
1068
- .text-secondary-600 {
1069
- color: var(--color-secondary-600);
1070
- }
1071
- .text-secondary-700 {
1072
- color: var(--color-secondary-700);
1073
- }
1074
- .text-secondary-800 {
1075
- color: var(--color-secondary-800);
1076
- }
1077
- .text-secondary-foreground {
1078
- color: var(--color-secondary-foreground);
1079
- }
1080
- .text-success-600 {
1081
- color: var(--color-success-600);
1082
- }
1083
- .text-success-700 {
1084
- color: var(--color-success-700);
1085
- }
1086
- .text-success-800 {
1087
- color: var(--color-success-800);
1088
- }
1089
- .text-success-foreground {
1090
- color: var(--color-success-foreground);
1091
- }
1092
- .text-warning-600 {
1093
- color: var(--color-warning-600);
1094
- }
1095
- .text-warning-700 {
1096
- color: var(--color-warning-700);
1097
- }
1098
- .text-warning-800 {
1099
- color: var(--color-warning-800);
1100
- }
1101
- .text-warning-foreground {
1102
- color: var(--color-warning-foreground);
1103
- }
1104
- .text-white {
1105
- color: var(--color-white);
1106
- }
1107
- .uppercase {
1108
- text-transform: uppercase;
1109
- }
1110
- .italic {
1111
- font-style: italic;
1112
- }
1113
- .accent-foreground {
1114
- accent-color: var(--color-foreground);
1115
- }
1116
- .opacity-0 {
1117
- opacity: 0%;
1118
- }
1119
- .opacity-100 {
1120
- opacity: 100%;
1121
- }
1122
- .shadow {
1123
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1124
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1125
- }
1126
- .shadow-2xl {
1127
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1128
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1129
- }
1130
- .shadow-lg {
1131
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1132
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1133
- }
1134
- .shadow-md {
1135
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1136
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1137
- }
1138
- .shadow-sm {
1139
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1140
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1141
- }
1142
- .ring {
1143
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1144
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1145
- }
1146
- .shadow-danger-500\/50 {
1147
- --tw-shadow-color: color-mix(in srgb, oklch(0.63 0.21 25) 50%, transparent);
1148
- @supports (color: color-mix(in lab, red, red)) {
1149
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-danger-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1150
- }
1151
- }
1152
- .shadow-muted-500\/50 {
1153
- --tw-shadow-color: color-mix(in srgb, oklch(0.55 0.010 286) 50%, transparent);
1154
- @supports (color: color-mix(in lab, red, red)) {
1155
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-muted-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1156
- }
1157
- }
1158
- .shadow-primary-500\/50 {
1159
- --tw-shadow-color: color-mix(in srgb, oklch(0.58 0.16 250) 50%, transparent);
1160
- @supports (color: color-mix(in lab, red, red)) {
1161
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1162
- }
1163
- }
1164
- .shadow-secondary-500\/50 {
1165
- --tw-shadow-color: color-mix(in srgb, oklch(0.58 0.20 280) 50%, transparent);
1166
- @supports (color: color-mix(in lab, red, red)) {
1167
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-secondary-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1168
- }
1169
- }
1170
- .shadow-success-500\/50 {
1171
- --tw-shadow-color: color-mix(in srgb, oklch(0.63 0.18 145) 50%, transparent);
1172
- @supports (color: color-mix(in lab, red, red)) {
1173
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-success-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1174
- }
1175
- }
1176
- .shadow-warning-500\/50 {
1177
- --tw-shadow-color: color-mix(in srgb, oklch(0.70 0.18 85) 50%, transparent);
1178
- @supports (color: color-mix(in lab, red, red)) {
1179
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-warning-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1180
- }
1181
- }
1182
- .backdrop-blur-sm {
1183
- --tw-backdrop-blur: blur(var(--blur-sm));
1184
- -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,);
1185
- 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,);
1186
- }
1187
- .transition {
1188
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
1189
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1190
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1191
- }
1192
- .transition-all {
1193
- transition-property: all;
1194
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1195
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1196
- }
1197
- .transition-colors {
1198
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1199
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1200
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1201
- }
1202
- .transition-opacity {
1203
- transition-property: opacity;
1204
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1205
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1206
- }
1207
- .transition-transform {
1208
- transition-property: transform, translate, scale, rotate;
1209
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1210
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1211
- }
1212
- .duration-150 {
1213
- --tw-duration: 150ms;
1214
- transition-duration: 150ms;
1215
- }
1216
- .duration-200 {
1217
- --tw-duration: 200ms;
1218
- transition-duration: 200ms;
1219
- }
1220
- .duration-300 {
1221
- --tw-duration: 300ms;
1222
- transition-duration: 300ms;
1223
- }
1224
- .peer-checked\/modal\:pointer-events-auto {
1225
- &:is(:where(.peer\/modal):checked ~ *) {
1226
- pointer-events: auto;
1227
- }
1228
- }
1229
- .peer-checked\/modal\:opacity-100 {
1230
- &:is(:where(.peer\/modal):checked ~ *) {
1231
- opacity: 100%;
1232
- }
1233
- }
1234
- .hover\:border-muted-400 {
1235
- &:hover {
1236
- @media (hover: hover) {
1237
- border-color: var(--color-muted-400);
1238
- }
1239
- }
1240
- }
1241
- .hover\:bg-danger-50 {
1242
- &:hover {
1243
- @media (hover: hover) {
1244
- background-color: var(--color-danger-50);
1245
- }
1246
- }
1247
- }
1248
- .hover\:bg-danger-200 {
1249
- &:hover {
1250
- @media (hover: hover) {
1251
- background-color: var(--color-danger-200);
1252
- }
1253
- }
1254
- }
1255
- .hover\:bg-danger-300 {
1256
- &:hover {
1257
- @media (hover: hover) {
1258
- background-color: var(--color-danger-300);
1259
- }
1260
- }
1261
- }
1262
- .hover\:bg-danger-600 {
1263
- &:hover {
1264
- @media (hover: hover) {
1265
- background-color: var(--color-danger-600);
1266
- }
1267
- }
1268
- }
1269
- .hover\:bg-muted {
1270
- &:hover {
1271
- @media (hover: hover) {
1272
- background-color: var(--color-muted);
1273
- }
1274
- }
1275
- }
1276
- .hover\:bg-muted-50 {
1277
- &:hover {
1278
- @media (hover: hover) {
1279
- background-color: var(--color-muted-50);
1280
- }
1281
- }
1282
- }
1283
- .hover\:bg-muted-100 {
1284
- &:hover {
1285
- @media (hover: hover) {
1286
- background-color: var(--color-muted-100);
1287
- }
1288
- }
1289
- }
1290
- .hover\:bg-muted-200 {
1291
- &:hover {
1292
- @media (hover: hover) {
1293
- background-color: var(--color-muted-200);
1294
- }
1295
- }
1296
- }
1297
- .hover\:bg-muted-300 {
1298
- &:hover {
1299
- @media (hover: hover) {
1300
- background-color: var(--color-muted-300);
1301
- }
1302
- }
1303
- }
1304
- .hover\:bg-muted-600 {
1305
- &:hover {
1306
- @media (hover: hover) {
1307
- background-color: var(--color-muted-600);
1308
- }
1309
- }
1310
- }
1311
- .hover\:bg-primary-50 {
1312
- &:hover {
1313
- @media (hover: hover) {
1314
- background-color: var(--color-primary-50);
1315
- }
1316
- }
1317
- }
1318
- .hover\:bg-primary-200 {
1319
- &:hover {
1320
- @media (hover: hover) {
1321
- background-color: var(--color-primary-200);
1322
- }
1323
- }
1324
- }
1325
- .hover\:bg-primary-300 {
1326
- &:hover {
1327
- @media (hover: hover) {
1328
- background-color: var(--color-primary-300);
1329
- }
1330
- }
1331
- }
1332
- .hover\:bg-primary-600 {
1333
- &:hover {
1334
- @media (hover: hover) {
1335
- background-color: var(--color-primary-600);
1336
- }
1337
- }
1338
- }
1339
- .hover\:bg-secondary-50 {
1340
- &:hover {
1341
- @media (hover: hover) {
1342
- background-color: var(--color-secondary-50);
1343
- }
1344
- }
1345
- }
1346
- .hover\:bg-secondary-200 {
1347
- &:hover {
1348
- @media (hover: hover) {
1349
- background-color: var(--color-secondary-200);
1350
- }
1351
- }
1352
- }
1353
- .hover\:bg-secondary-300 {
1354
- &:hover {
1355
- @media (hover: hover) {
1356
- background-color: var(--color-secondary-300);
1357
- }
1358
- }
1359
- }
1360
- .hover\:bg-secondary-600 {
1361
- &:hover {
1362
- @media (hover: hover) {
1363
- background-color: var(--color-secondary-600);
1364
- }
1365
- }
1366
- }
1367
- .hover\:bg-success-50 {
1368
- &:hover {
1369
- @media (hover: hover) {
1370
- background-color: var(--color-success-50);
1371
- }
1372
- }
1373
- }
1374
- .hover\:bg-success-200 {
1375
- &:hover {
1376
- @media (hover: hover) {
1377
- background-color: var(--color-success-200);
1378
- }
1379
- }
1380
- }
1381
- .hover\:bg-success-300 {
1382
- &:hover {
1383
- @media (hover: hover) {
1384
- background-color: var(--color-success-300);
1385
- }
1386
- }
1387
- }
1388
- .hover\:bg-success-600 {
1389
- &:hover {
1390
- @media (hover: hover) {
1391
- background-color: var(--color-success-600);
1392
- }
1393
- }
1394
- }
1395
- .hover\:bg-warning-50 {
1396
- &:hover {
1397
- @media (hover: hover) {
1398
- background-color: var(--color-warning-50);
1399
- }
1400
- }
1401
- }
1402
- .hover\:bg-warning-200 {
1403
- &:hover {
1404
- @media (hover: hover) {
1405
- background-color: var(--color-warning-200);
1406
- }
1407
- }
1408
- }
1409
- .hover\:bg-warning-300 {
1410
- &:hover {
1411
- @media (hover: hover) {
1412
- background-color: var(--color-warning-300);
1413
- }
1414
- }
1415
- }
1416
- .hover\:bg-warning-600 {
1417
- &:hover {
1418
- @media (hover: hover) {
1419
- background-color: var(--color-warning-600);
1420
- }
1421
- }
1422
- }
1423
- .hover\:bg-white\/20 {
1424
- &:hover {
1425
- @media (hover: hover) {
1426
- background-color: color-mix(in srgb, #fff 20%, transparent);
1427
- @supports (color: color-mix(in lab, red, red)) {
1428
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1429
- }
1430
- }
1431
- }
1432
- }
1433
- .hover\:text-accent-foreground {
1434
- &:hover {
1435
- @media (hover: hover) {
1436
- color: var(--color-accent-foreground);
1437
- }
1438
- }
1439
- }
1440
- .hover\:text-danger-800 {
1441
- &:hover {
1442
- @media (hover: hover) {
1443
- color: var(--color-danger-800);
1444
- }
1445
- }
1446
- }
1447
- .hover\:text-foreground {
1448
- &:hover {
1449
- @media (hover: hover) {
1450
- color: var(--color-foreground);
1451
- }
1452
- }
1453
- }
1454
- .hover\:opacity-50 {
1455
- &:hover {
1456
- @media (hover: hover) {
1457
- opacity: 50%;
1458
- }
1459
- }
1460
- }
1461
- .hover\:shadow-lg {
1462
- &:hover {
1463
- @media (hover: hover) {
1464
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1465
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1466
- }
1467
- }
1468
- }
1469
- .active\:scale-95 {
1470
- &:active {
1471
- --tw-scale-x: 95%;
1472
- --tw-scale-y: 95%;
1473
- --tw-scale-z: 95%;
1474
- scale: var(--tw-scale-x) var(--tw-scale-y);
1475
- }
1476
- }
1477
- .disabled\:cursor-not-allowed {
1478
- &:disabled {
1479
- cursor: not-allowed;
1480
- }
1481
- }
1482
- .disabled\:opacity-50 {
1483
- &:disabled {
1484
- opacity: 50%;
1485
- }
1486
- }
1487
- .disabled\:hover\:bg-primary-500 {
1488
- &:disabled {
1489
- &:hover {
1490
- @media (hover: hover) {
1491
- background-color: var(--color-primary-500);
1492
- }
1493
- }
1494
- }
1495
- }
1496
- .disabled\:active\:scale-100 {
1497
- &:disabled {
1498
- &:active {
1499
- --tw-scale-x: 100%;
1500
- --tw-scale-y: 100%;
1501
- --tw-scale-z: 100%;
1502
- scale: var(--tw-scale-x) var(--tw-scale-y);
1503
- }
1504
- }
1505
- }
1506
- .md\:mx-4 {
1507
- @media (width >= 48rem) {
1508
- margin-inline: calc(var(--spacing) * 4);
1509
- }
1510
- }
1511
- .md\:h-auto {
1512
- @media (width >= 48rem) {
1513
- height: auto;
1514
- }
1515
- }
1516
- .md\:max-h-\[90vh\] {
1517
- @media (width >= 48rem) {
1518
- max-height: 90vh;
1519
- }
1520
- }
1521
- .md\:w-\[60vw\] {
1522
- @media (width >= 48rem) {
1523
- width: 60vw;
1524
- }
1525
- }
1526
- .md\:w-auto {
1527
- @media (width >= 48rem) {
1528
- width: auto;
1529
- }
1530
- }
1531
- .md\:w-full {
1532
- @media (width >= 48rem) {
1533
- width: 100%;
1534
- }
1535
- }
1536
- .md\:max-w-4xl {
1537
- @media (width >= 48rem) {
1538
- max-width: var(--container-4xl);
1539
- }
1540
- }
1541
- .md\:grid-cols-2 {
1542
- @media (width >= 48rem) {
1543
- grid-template-columns: repeat(2, minmax(0, 1fr));
1544
- }
1545
- }
1546
- .md\:rounded-lg {
1547
- @media (width >= 48rem) {
1548
- border-radius: var(--radius-lg);
1549
- }
1550
- }
1551
- .md\:p-6 {
1552
- @media (width >= 48rem) {
1553
- padding: calc(var(--spacing) * 6);
1554
- }
1555
- }
1556
- .md\:text-2xl {
1557
- @media (width >= 48rem) {
1558
- font-size: var(--text-2xl);
1559
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1560
- }
1561
- }
1562
- .lg\:grid-cols-3 {
1563
- @media (width >= 64rem) {
1564
- grid-template-columns: repeat(3, minmax(0, 1fr));
1565
- }
1566
- }
1567
- }
142
+
143
+ /* Radius for consistency */
144
+ --radius-sm: 0.25rem;
145
+ --radius-md: 0.375rem;
146
+ --radius-lg: 0.5rem;
147
+ --radius-xl: 0.75rem;
148
+ }
149
+
150
+ /* Dark Mode Theme Variables */
151
+ @media (prefers-color-scheme: dark) {
152
+ @theme {
153
+ /* Dark mode overrides for semantic colors */
154
+ --color-background: oklch(0.13 0.004 286);
155
+ --color-foreground: oklch(0.98 0.001 286);
156
+ --color-card: oklch(0.13 0.004 286);
157
+ --color-card-foreground: oklch(0.98 0.001 286);
158
+ --color-popover: oklch(0.13 0.004 286);
159
+ --color-popover-foreground: oklch(0.98 0.001 286);
160
+ --color-border: oklch(0.27 0.007 286);
161
+ --color-input: oklch(0.27 0.007 286);
162
+ --color-muted: oklch(0.27 0.007 286);
163
+ --color-muted-foreground: oklch(0.71 0.008 286);
164
+ --color-accent: oklch(0.27 0.007 286);
165
+ --color-accent-foreground: oklch(0.98 0.001 286);
166
+ --color-destructive-foreground: oklch(0.98 0.001 286);
167
+ }
168
+ }
169
+
1568
170
  @keyframes fadeIn {
1569
- from {
1570
- opacity: 0;
1571
- }
1572
- to {
1573
- opacity: 1;
1574
- }
1575
- }
1576
- @property --tw-translate-x {
1577
- syntax: "*";
1578
- inherits: false;
1579
- initial-value: 0;
1580
- }
1581
- @property --tw-translate-y {
1582
- syntax: "*";
1583
- inherits: false;
1584
- initial-value: 0;
1585
- }
1586
- @property --tw-translate-z {
1587
- syntax: "*";
1588
- inherits: false;
1589
- initial-value: 0;
1590
- }
1591
- @property --tw-rotate-x {
1592
- syntax: "*";
1593
- inherits: false;
1594
- }
1595
- @property --tw-rotate-y {
1596
- syntax: "*";
1597
- inherits: false;
1598
- }
1599
- @property --tw-rotate-z {
1600
- syntax: "*";
1601
- inherits: false;
1602
- }
1603
- @property --tw-skew-x {
1604
- syntax: "*";
1605
- inherits: false;
1606
- }
1607
- @property --tw-skew-y {
1608
- syntax: "*";
1609
- inherits: false;
1610
- }
1611
- @property --tw-space-y-reverse {
1612
- syntax: "*";
1613
- inherits: false;
1614
- initial-value: 0;
1615
- }
1616
- @property --tw-border-style {
1617
- syntax: "*";
1618
- inherits: false;
1619
- initial-value: solid;
1620
- }
1621
- @property --tw-leading {
1622
- syntax: "*";
1623
- inherits: false;
1624
- }
1625
- @property --tw-font-weight {
1626
- syntax: "*";
1627
- inherits: false;
1628
- }
1629
- @property --tw-shadow {
1630
- syntax: "*";
1631
- inherits: false;
1632
- initial-value: 0 0 #0000;
1633
- }
1634
- @property --tw-shadow-color {
1635
- syntax: "*";
1636
- inherits: false;
1637
- }
1638
- @property --tw-shadow-alpha {
1639
- syntax: "<percentage>";
1640
- inherits: false;
1641
- initial-value: 100%;
1642
- }
1643
- @property --tw-inset-shadow {
1644
- syntax: "*";
1645
- inherits: false;
1646
- initial-value: 0 0 #0000;
1647
- }
1648
- @property --tw-inset-shadow-color {
1649
- syntax: "*";
1650
- inherits: false;
1651
- }
1652
- @property --tw-inset-shadow-alpha {
1653
- syntax: "<percentage>";
1654
- inherits: false;
1655
- initial-value: 100%;
1656
- }
1657
- @property --tw-ring-color {
1658
- syntax: "*";
1659
- inherits: false;
1660
- }
1661
- @property --tw-ring-shadow {
1662
- syntax: "*";
1663
- inherits: false;
1664
- initial-value: 0 0 #0000;
1665
- }
1666
- @property --tw-inset-ring-color {
1667
- syntax: "*";
1668
- inherits: false;
1669
- }
1670
- @property --tw-inset-ring-shadow {
1671
- syntax: "*";
1672
- inherits: false;
1673
- initial-value: 0 0 #0000;
1674
- }
1675
- @property --tw-ring-inset {
1676
- syntax: "*";
1677
- inherits: false;
1678
- }
1679
- @property --tw-ring-offset-width {
1680
- syntax: "<length>";
1681
- inherits: false;
1682
- initial-value: 0px;
1683
- }
1684
- @property --tw-ring-offset-color {
1685
- syntax: "*";
1686
- inherits: false;
1687
- initial-value: #fff;
1688
- }
1689
- @property --tw-ring-offset-shadow {
1690
- syntax: "*";
1691
- inherits: false;
1692
- initial-value: 0 0 #0000;
1693
- }
1694
- @property --tw-backdrop-blur {
1695
- syntax: "*";
1696
- inherits: false;
1697
- }
1698
- @property --tw-backdrop-brightness {
1699
- syntax: "*";
1700
- inherits: false;
1701
- }
1702
- @property --tw-backdrop-contrast {
1703
- syntax: "*";
1704
- inherits: false;
1705
- }
1706
- @property --tw-backdrop-grayscale {
1707
- syntax: "*";
1708
- inherits: false;
1709
- }
1710
- @property --tw-backdrop-hue-rotate {
1711
- syntax: "*";
1712
- inherits: false;
1713
- }
1714
- @property --tw-backdrop-invert {
1715
- syntax: "*";
1716
- inherits: false;
1717
- }
1718
- @property --tw-backdrop-opacity {
1719
- syntax: "*";
1720
- inherits: false;
1721
- }
1722
- @property --tw-backdrop-saturate {
1723
- syntax: "*";
1724
- inherits: false;
1725
- }
1726
- @property --tw-backdrop-sepia {
1727
- syntax: "*";
1728
- inherits: false;
1729
- }
1730
- @property --tw-duration {
1731
- syntax: "*";
1732
- inherits: false;
1733
- }
1734
- @property --tw-scale-x {
1735
- syntax: "*";
1736
- inherits: false;
1737
- initial-value: 1;
1738
- }
1739
- @property --tw-scale-y {
1740
- syntax: "*";
1741
- inherits: false;
1742
- initial-value: 1;
1743
- }
1744
- @property --tw-scale-z {
1745
- syntax: "*";
1746
- inherits: false;
1747
- initial-value: 1;
1748
- }
1749
- @keyframes spin {
1750
- to {
1751
- transform: rotate(360deg);
1752
- }
1753
- }
1754
- @layer properties {
1755
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1756
- *, ::before, ::after, ::backdrop {
1757
- --tw-translate-x: 0;
1758
- --tw-translate-y: 0;
1759
- --tw-translate-z: 0;
1760
- --tw-rotate-x: initial;
1761
- --tw-rotate-y: initial;
1762
- --tw-rotate-z: initial;
1763
- --tw-skew-x: initial;
1764
- --tw-skew-y: initial;
1765
- --tw-space-y-reverse: 0;
1766
- --tw-border-style: solid;
1767
- --tw-leading: initial;
1768
- --tw-font-weight: initial;
1769
- --tw-shadow: 0 0 #0000;
1770
- --tw-shadow-color: initial;
1771
- --tw-shadow-alpha: 100%;
1772
- --tw-inset-shadow: 0 0 #0000;
1773
- --tw-inset-shadow-color: initial;
1774
- --tw-inset-shadow-alpha: 100%;
1775
- --tw-ring-color: initial;
1776
- --tw-ring-shadow: 0 0 #0000;
1777
- --tw-inset-ring-color: initial;
1778
- --tw-inset-ring-shadow: 0 0 #0000;
1779
- --tw-ring-inset: initial;
1780
- --tw-ring-offset-width: 0px;
1781
- --tw-ring-offset-color: #fff;
1782
- --tw-ring-offset-shadow: 0 0 #0000;
1783
- --tw-backdrop-blur: initial;
1784
- --tw-backdrop-brightness: initial;
1785
- --tw-backdrop-contrast: initial;
1786
- --tw-backdrop-grayscale: initial;
1787
- --tw-backdrop-hue-rotate: initial;
1788
- --tw-backdrop-invert: initial;
1789
- --tw-backdrop-opacity: initial;
1790
- --tw-backdrop-saturate: initial;
1791
- --tw-backdrop-sepia: initial;
1792
- --tw-duration: initial;
1793
- --tw-scale-x: 1;
1794
- --tw-scale-y: 1;
1795
- --tw-scale-z: 1;
171
+ from {
172
+ opacity: 0;
173
+ }
174
+ to {
175
+ opacity: 1;
1796
176
  }
1797
- }
1798
177
  }