@beweco/aurora-ui 1.0.0-beta.112 → 1.0.0-beta.113

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 (29) hide show
  1. package/README.md +17 -4
  2. package/dist/assets/css/styles.css +1 -1
  3. package/dist/assets/css/theme.css +2 -2441
  4. package/dist/index.cjs.js +531 -58
  5. package/dist/index.esm.js +529 -54
  6. package/dist/types/__smoke__/v2-api-surface.d.ts +20 -2
  7. package/dist/types/__smoke__/v2-api-surface.d.ts.map +1 -1
  8. package/dist/types/compat/heroui-v2-shims.d.ts +4 -26
  9. package/dist/types/compat/heroui-v2-shims.d.ts.map +1 -1
  10. package/dist/types/components/alert/Alert.d.ts +14 -0
  11. package/dist/types/components/alert/Alert.d.ts.map +1 -0
  12. package/dist/types/components/alert/Alert.types.d.ts +100 -0
  13. package/dist/types/components/alert/Alert.types.d.ts.map +1 -0
  14. package/dist/types/components/alert/index.d.ts +3 -0
  15. package/dist/types/components/alert/index.d.ts.map +1 -0
  16. package/dist/types/components/checkbox/Checkbox.d.ts +22 -0
  17. package/dist/types/components/checkbox/Checkbox.d.ts.map +1 -0
  18. package/dist/types/components/checkbox/Checkbox.types.d.ts +69 -0
  19. package/dist/types/components/checkbox/Checkbox.types.d.ts.map +1 -0
  20. package/dist/types/components/checkbox/index.d.ts +3 -0
  21. package/dist/types/components/checkbox/index.d.ts.map +1 -0
  22. package/dist/types/components/icon/Icon.d.ts.map +1 -1
  23. package/dist/types/components/icon/Icon.types.d.ts +8 -2
  24. package/dist/types/components/icon/Icon.types.d.ts.map +1 -1
  25. package/dist/types/index.d.ts +4 -2
  26. package/dist/types/index.d.ts.map +1 -1
  27. package/dist/types/providers/theme/force-light-only-theme.d.ts +14 -3
  28. package/dist/types/providers/theme/force-light-only-theme.d.ts.map +1 -1
  29. package/package.json +4 -2
package/dist/assets/css/theme.css CHANGED
@@ -1,16 +1,16 @@
1
1
  /*
2
2
  * AUTOGENERADO — no editar a mano.
3
+ * Tokens de tema: SOLO el bloque de tema (static). Export `./theme`; la app lo importa con theme(reference), que anula el static.
3
4
  * Fuente: scripts/generate-theme-tokens.mjs
4
5
  * ← src/styles/colors.default.ts (14 packs)
5
6
  * ← scripts/v2-base-palette.json (paleta base heredada por `extend`)
6
- * ← @heroui/styles@3.2.4 (espejo de neutrales oscuros)
7
7
  *
8
8
  * Regenerar y verificar contra el oráculo v2:
9
9
  * node scripts/generate-theme-tokens.mjs --check
10
10
  */
11
11
 
12
12
  @theme static {
13
- /* Valores del tema base claro — los 16 bloques de abajo los pisan por clase. */
13
+ /* Valores del tema base claro — los bloques por clase de theme-packs.generated.css los pisan. */
14
14
  --color-background: #FFFFFF;
15
15
  --color-foreground: #11181C;
16
16
  --color-foreground-50: #fafafa;
@@ -109,2442 +109,3 @@
109
109
  --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
110
110
  --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
111
111
  }
112
-
113
- @layer base {
114
- :root, .light {
115
- --color-background: #FFFFFF;
116
- --color-foreground: #11181C;
117
- --color-foreground-50: #fafafa;
118
- --color-foreground-100: #f4f4f5;
119
- --color-foreground-200: #e4e4e7;
120
- --color-foreground-300: #d4d4d8;
121
- --color-foreground-400: #a1a1aa;
122
- --color-foreground-500: #71717a;
123
- --color-foreground-600: #52525b;
124
- --color-foreground-700: #3f3f46;
125
- --color-foreground-800: #27272a;
126
- --color-foreground-900: #18181b;
127
- --color-divider: rgba(17, 17, 17, 0.15);
128
- --color-focus: #006FEE;
129
- --color-content1: #FFFFFF;
130
- --color-content1-foreground: #11181C;
131
- --color-content2: #f4f4f5;
132
- --color-content2-foreground: #27272a;
133
- --color-content3: #e4e4e7;
134
- --color-content3-foreground: #3f3f46;
135
- --color-content4: #d4d4d8;
136
- --color-content4-foreground: #52525b;
137
- --color-default: #d4d4d8;
138
- --color-default-foreground: #000;
139
- --color-default-50: #fafafa;
140
- --color-default-100: #f4f4f5;
141
- --color-default-200: #e4e4e7;
142
- --color-default-300: #d4d4d8;
143
- --color-default-400: #a1a1aa;
144
- --color-default-500: #71717a;
145
- --color-default-600: #52525b;
146
- --color-default-700: #3f3f46;
147
- --color-default-800: #27272a;
148
- --color-default-900: #18181b;
149
- --color-primary: #006FEE;
150
- --color-primary-foreground: #fff;
151
- --color-primary-50: #e6f1fe;
152
- --color-primary-100: #cce3fd;
153
- --color-primary-200: #99c7fb;
154
- --color-primary-300: #66aaf9;
155
- --color-primary-400: #338ef7;
156
- --color-primary-500: #006FEE;
157
- --color-primary-600: #005bc4;
158
- --color-primary-700: #004493;
159
- --color-primary-800: #002e62;
160
- --color-primary-900: #001731;
161
- --color-secondary: #7828c8;
162
- --color-secondary-foreground: #fff;
163
- --color-secondary-50: #f2eafa;
164
- --color-secondary-100: #e4d4f4;
165
- --color-secondary-200: #c9a9e9;
166
- --color-secondary-300: #ae7ede;
167
- --color-secondary-400: #9353d3;
168
- --color-secondary-500: #7828c8;
169
- --color-secondary-600: #6020a0;
170
- --color-secondary-700: #481878;
171
- --color-secondary-800: #301050;
172
- --color-secondary-900: #180828;
173
- --color-success: #17c964;
174
- --color-success-foreground: #000;
175
- --color-success-50: #e8faf0;
176
- --color-success-100: #d1f4e0;
177
- --color-success-200: #a2e9c1;
178
- --color-success-300: #74dfa2;
179
- --color-success-400: #45d483;
180
- --color-success-500: #17c964;
181
- --color-success-600: #12a150;
182
- --color-success-700: #0e793c;
183
- --color-success-800: #095028;
184
- --color-success-900: #052814;
185
- --color-warning: #f5a524;
186
- --color-warning-foreground: #000;
187
- --color-warning-50: #fefce8;
188
- --color-warning-100: #fdedd3;
189
- --color-warning-200: #fbdba7;
190
- --color-warning-300: #f9c97c;
191
- --color-warning-400: #f7b750;
192
- --color-warning-500: #f5a524;
193
- --color-warning-600: #c4841d;
194
- --color-warning-700: #936316;
195
- --color-warning-800: #62420e;
196
- --color-warning-900: #312107;
197
- --color-danger: #f31260;
198
- --color-danger-foreground: #ffffff;
199
- --color-danger-50: #fee7ef;
200
- --color-danger-100: #fdd0df;
201
- --color-danger-200: #faa0bf;
202
- --color-danger-300: #f871a0;
203
- --color-danger-400: #f54180;
204
- --color-danger-500: #f31260;
205
- --color-danger-600: #c20e4d;
206
- --color-danger-700: #920b3a;
207
- --color-danger-800: #610726;
208
- --color-danger-900: #310413;
209
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
210
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
211
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
212
- }
213
-
214
- .dark {
215
- --color-background: #000000;
216
- --color-foreground: #ECEDEE;
217
- --color-foreground-50: #18181b;
218
- --color-foreground-100: #27272a;
219
- --color-foreground-200: #3f3f46;
220
- --color-foreground-300: #52525b;
221
- --color-foreground-400: #71717a;
222
- --color-foreground-500: #a1a1aa;
223
- --color-foreground-600: #d4d4d8;
224
- --color-foreground-700: #e4e4e7;
225
- --color-foreground-800: #f4f4f5;
226
- --color-foreground-900: #fafafa;
227
- --color-divider: rgba(255, 255, 255, 0.15);
228
- --color-focus: #006FEE;
229
- --color-content1: #18181b;
230
- --color-content1-foreground: #fafafa;
231
- --color-content2: #27272a;
232
- --color-content2-foreground: #f4f4f5;
233
- --color-content3: #3f3f46;
234
- --color-content3-foreground: #e4e4e7;
235
- --color-content4: #52525b;
236
- --color-content4-foreground: #d4d4d8;
237
- --color-default: #3f3f46;
238
- --color-default-foreground: #fff;
239
- --color-default-50: #18181b;
240
- --color-default-100: #27272a;
241
- --color-default-200: #3f3f46;
242
- --color-default-300: #52525b;
243
- --color-default-400: #71717a;
244
- --color-default-500: #a1a1aa;
245
- --color-default-600: #d4d4d8;
246
- --color-default-700: #e4e4e7;
247
- --color-default-800: #f4f4f5;
248
- --color-default-900: #fafafa;
249
- --color-primary: #006FEE;
250
- --color-primary-foreground: #fff;
251
- --color-primary-50: #001731;
252
- --color-primary-100: #002e62;
253
- --color-primary-200: #004493;
254
- --color-primary-300: #005bc4;
255
- --color-primary-400: #006FEE;
256
- --color-primary-500: #338ef7;
257
- --color-primary-600: #66aaf9;
258
- --color-primary-700: #99c7fb;
259
- --color-primary-800: #cce3fd;
260
- --color-primary-900: #e6f1fe;
261
- --color-secondary: #9353d3;
262
- --color-secondary-foreground: #fff;
263
- --color-secondary-50: #180828;
264
- --color-secondary-100: #301050;
265
- --color-secondary-200: #481878;
266
- --color-secondary-300: #6020a0;
267
- --color-secondary-400: #7828c8;
268
- --color-secondary-500: #9353d3;
269
- --color-secondary-600: #ae7ede;
270
- --color-secondary-700: #c9a9e9;
271
- --color-secondary-800: #e4d4f4;
272
- --color-secondary-900: #f2eafa;
273
- --color-success: #17c964;
274
- --color-success-foreground: #000;
275
- --color-success-50: #052814;
276
- --color-success-100: #095028;
277
- --color-success-200: #0e793c;
278
- --color-success-300: #12a150;
279
- --color-success-400: #17c964;
280
- --color-success-500: #45d483;
281
- --color-success-600: #74dfa2;
282
- --color-success-700: #a2e9c1;
283
- --color-success-800: #d1f4e0;
284
- --color-success-900: #e8faf0;
285
- --color-warning: #f5a524;
286
- --color-warning-foreground: #000;
287
- --color-warning-50: #312107;
288
- --color-warning-100: #62420e;
289
- --color-warning-200: #936316;
290
- --color-warning-300: #c4841d;
291
- --color-warning-400: #f5a524;
292
- --color-warning-500: #f7b750;
293
- --color-warning-600: #f9c97c;
294
- --color-warning-700: #fbdba7;
295
- --color-warning-800: #fdedd3;
296
- --color-warning-900: #fefce8;
297
- --color-danger: #f31260;
298
- --color-danger-foreground: #ffffff;
299
- --color-danger-50: #310413;
300
- --color-danger-100: #610726;
301
- --color-danger-200: #920b3a;
302
- --color-danger-300: #c20e4d;
303
- --color-danger-400: #f31260;
304
- --color-danger-500: #f54180;
305
- --color-danger-600: #f871a0;
306
- --color-danger-700: #faa0bf;
307
- --color-danger-800: #fdd0df;
308
- --color-danger-900: #fee7ef;
309
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
310
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
311
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
312
- }
313
-
314
- .blue-light {
315
- --color-background: #FFFFFF;
316
- --color-foreground: #11181C;
317
- --color-foreground-50: #fafafa;
318
- --color-foreground-100: #f4f4f5;
319
- --color-foreground-200: #e4e4e7;
320
- --color-foreground-300: #d4d4d8;
321
- --color-foreground-400: #a1a1aa;
322
- --color-foreground-500: #71717a;
323
- --color-foreground-600: #52525b;
324
- --color-foreground-700: #3f3f46;
325
- --color-foreground-800: #27272a;
326
- --color-foreground-900: #18181b;
327
- --color-divider: rgba(17, 17, 17, 0.15);
328
- --color-focus: #006FEE;
329
- --color-content1: #FFFFFF;
330
- --color-content1-foreground: #11181C;
331
- --color-content2: #f4f4f5;
332
- --color-content2-foreground: #27272a;
333
- --color-content3: #e4e4e7;
334
- --color-content3-foreground: #3f3f46;
335
- --color-content4: #d4d4d8;
336
- --color-content4-foreground: #52525b;
337
- --color-default: #d4d4d8;
338
- --color-default-foreground: #000;
339
- --color-default-50: #fafafa;
340
- --color-default-100: #f4f4f5;
341
- --color-default-200: #e4e4e7;
342
- --color-default-300: #d4d4d8;
343
- --color-default-400: #a1a1aa;
344
- --color-default-500: #71717a;
345
- --color-default-600: #52525b;
346
- --color-default-700: #3f3f46;
347
- --color-default-800: #27272a;
348
- --color-default-900: #18181b;
349
- --color-primary: #006fee;
350
- --color-primary-foreground: #fff;
351
- --color-primary-50: #dfedfd;
352
- --color-primary-100: #b3d4fa;
353
- --color-primary-200: #86bbf7;
354
- --color-primary-300: #59a1f4;
355
- --color-primary-400: #2d88f1;
356
- --color-primary-500: #006fee;
357
- --color-primary-600: #005cc4;
358
- --color-primary-700: #00489b;
359
- --color-primary-800: #003571;
360
- --color-primary-900: #002147;
361
- --color-secondary: #7828c8;
362
- --color-secondary-foreground: #fff;
363
- --color-secondary-50: #eee4f8;
364
- --color-secondary-100: #d7bfef;
365
- --color-secondary-200: #bf99e5;
366
- --color-secondary-300: #a773db;
367
- --color-secondary-400: #904ed2;
368
- --color-secondary-500: #7828c8;
369
- --color-secondary-600: #6321a5;
370
- --color-secondary-700: #4e1a82;
371
- --color-secondary-800: #39135f;
372
- --color-secondary-900: #240c3c;
373
- --color-success: #17c964;
374
- --color-success-foreground: #000;
375
- --color-success-50: #e2f8ec;
376
- --color-success-100: #b9efd1;
377
- --color-success-200: #91e5b5;
378
- --color-success-300: #68dc9a;
379
- --color-success-400: #40d27f;
380
- --color-success-500: #17c964;
381
- --color-success-600: #13a653;
382
- --color-success-700: #0f8341;
383
- --color-success-800: #0b5f30;
384
- --color-success-900: #073c1e;
385
- --color-warning: #f5a524;
386
- --color-warning-foreground: #000;
387
- --color-warning-50: #fef4e4;
388
- --color-warning-100: #fce4bd;
389
- --color-warning-200: #fad497;
390
- --color-warning-300: #f9c571;
391
- --color-warning-400: #f7b54a;
392
- --color-warning-500: #f5a524;
393
- --color-warning-600: #ca881e;
394
- --color-warning-700: #9f6b17;
395
- --color-warning-800: #744e11;
396
- --color-warning-900: #4a320b;
397
- --color-danger: #f31260;
398
- --color-danger-foreground: #000;
399
- --color-danger-50: #fee1eb;
400
- --color-danger-100: #fbb8cf;
401
- --color-danger-200: #f98eb3;
402
- --color-danger-300: #f76598;
403
- --color-danger-400: #f53b7c;
404
- --color-danger-500: #f31260;
405
- --color-danger-600: #c80f4f;
406
- --color-danger-700: #9e0c3e;
407
- --color-danger-800: #73092e;
408
- --color-danger-900: #49051d;
409
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
410
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
411
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
412
- }
413
-
414
- .blue-dark {
415
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
416
- /* == Dark Theme Variables == */
417
-
418
- /* Base Colors */
419
- --background: oklch(12% 0.005 285.823);
420
- --foreground: var(--snow);
421
-
422
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
423
- --surface: oklch(0.2103 0.0059 285.89);
424
- --surface-foreground: var(--foreground);
425
-
426
- --surface-secondary: oklch(0.257 0.0037 286.14);
427
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
428
-
429
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
430
- --overlay: oklch(0.2103 0.0059 285.89);
431
- --overlay-foreground: var(--foreground);
432
-
433
- --muted: oklch(70.5% 0.015 286.067);
434
-
435
- --scrollbar: var(--scrollbar-thumb);
436
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
437
- --scrollbar-track: transparent;
438
- --scrollbar-gutter: auto;
439
- --scrollbar-width: thin;
440
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
441
-
442
- --default: oklch(27.4% 0.006 286.033);
443
- --default-foreground: var(--snow);
444
-
445
- /* Form Fields */
446
- --field-background: oklch(0.2103 0.0059 285.89);
447
- --field-foreground: var(--foreground);
448
-
449
- /* Status Colors */
450
- --warning: oklch(0.8203 0.1388 76.34);
451
- --warning-foreground: var(--eclipse);
452
-
453
- --danger: oklch(0.594 0.1967 24.63);
454
- --danger-foreground: var(--snow);
455
-
456
- /* Component Colors */
457
- --segment: oklch(0.3964 0.01 285.93);
458
- --segment-foreground: var(--foreground);
459
-
460
- /* Misc Colors */
461
- --border: oklch(28% 0.006 286.033);
462
- --separator: oklch(25% 0.006 286.033);
463
- --focus: var(--accent);
464
- --link: var(--foreground);
465
-
466
- /* Backdrop */
467
- --backdrop: rgba(0, 0, 0, 0.6);
468
-
469
- /* Shadows */
470
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
471
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
472
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
473
-
474
- /* Calculated Colors */
475
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
476
-
477
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
478
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
479
- --background-inverse: var(--foreground);
480
-
481
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
482
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
483
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
484
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
485
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
486
-
487
- --field-hover: color-mix(
488
- in oklab,
489
- var(--field-background, var(--default)) 90%,
490
- var(--field-foreground, var(--foreground)) 2%
491
- );
492
- --field-focus: var(--field-background, var(--default));
493
- --field-border-hover: color-mix(
494
- in oklab,
495
- var(--field-border, var(--border)) 88%,
496
- var(--field-foreground, var(--foreground)) 10%
497
- );
498
- --field-border-focus: color-mix(
499
- in oklab,
500
- var(--field-border, var(--border)) 74%,
501
- var(--field-foreground, var(--foreground)) 22%
502
- );
503
-
504
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
505
- --default-soft-foreground: var(--default-foreground);
506
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
507
-
508
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
509
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
510
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
511
-
512
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
513
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
514
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
515
-
516
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
517
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
518
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
519
-
520
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
521
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
522
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
523
-
524
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
525
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
526
-
527
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
528
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
529
-
530
- --color-background: #000000;
531
- --color-foreground: #ECEDEE;
532
- --color-foreground-50: #18181b;
533
- --color-foreground-100: #27272a;
534
- --color-foreground-200: #3f3f46;
535
- --color-foreground-300: #52525b;
536
- --color-foreground-400: #71717a;
537
- --color-foreground-500: #a1a1aa;
538
- --color-foreground-600: #d4d4d8;
539
- --color-foreground-700: #e4e4e7;
540
- --color-foreground-800: #f4f4f5;
541
- --color-foreground-900: #fafafa;
542
- --color-divider: rgba(255, 255, 255, 0.15);
543
- --color-focus: #006FEE;
544
- --color-content1: #18181b;
545
- --color-content1-foreground: #fafafa;
546
- --color-content2: #27272a;
547
- --color-content2-foreground: #f4f4f5;
548
- --color-content3: #3f3f46;
549
- --color-content3-foreground: #e4e4e7;
550
- --color-content4: #52525b;
551
- --color-content4-foreground: #d4d4d8;
552
- --color-default: #3f3f46;
553
- --color-default-foreground: #fff;
554
- --color-default-50: #18181b;
555
- --color-default-100: #27272a;
556
- --color-default-200: #3f3f46;
557
- --color-default-300: #52525b;
558
- --color-default-400: #71717a;
559
- --color-default-500: #a1a1aa;
560
- --color-default-600: #d4d4d8;
561
- --color-default-700: #e4e4e7;
562
- --color-default-800: #f4f4f5;
563
- --color-default-900: #fafafa;
564
- --color-primary: #006fee;
565
- --color-primary-foreground: #fff;
566
- --color-primary-50: #002147;
567
- --color-primary-100: #003571;
568
- --color-primary-200: #00489b;
569
- --color-primary-300: #005cc4;
570
- --color-primary-400: #006fee;
571
- --color-primary-500: #2d88f1;
572
- --color-primary-600: #59a1f4;
573
- --color-primary-700: #86bbf7;
574
- --color-primary-800: #b3d4fa;
575
- --color-primary-900: #dfedfd;
576
- --color-secondary: #7828c8;
577
- --color-secondary-foreground: #fff;
578
- --color-secondary-50: #240c3c;
579
- --color-secondary-100: #39135f;
580
- --color-secondary-200: #4e1a82;
581
- --color-secondary-300: #6321a5;
582
- --color-secondary-400: #7828c8;
583
- --color-secondary-500: #904ed2;
584
- --color-secondary-600: #a773db;
585
- --color-secondary-700: #bf99e5;
586
- --color-secondary-800: #d7bfef;
587
- --color-secondary-900: #eee4f8;
588
- --color-success: #17c964;
589
- --color-success-foreground: #000;
590
- --color-success-50: #073c1e;
591
- --color-success-100: #0b5f30;
592
- --color-success-200: #0f8341;
593
- --color-success-300: #13a653;
594
- --color-success-400: #17c964;
595
- --color-success-500: #40d27f;
596
- --color-success-600: #68dc9a;
597
- --color-success-700: #91e5b5;
598
- --color-success-800: #b9efd1;
599
- --color-success-900: #e2f8ec;
600
- --color-warning: #f5a524;
601
- --color-warning-foreground: #000;
602
- --color-warning-50: #4a320b;
603
- --color-warning-100: #744e11;
604
- --color-warning-200: #9f6b17;
605
- --color-warning-300: #ca881e;
606
- --color-warning-400: #f5a524;
607
- --color-warning-500: #f7b54a;
608
- --color-warning-600: #f9c571;
609
- --color-warning-700: #fad497;
610
- --color-warning-800: #fce4bd;
611
- --color-warning-900: #fef4e4;
612
- --color-danger: #f31260;
613
- --color-danger-foreground: #000;
614
- --color-danger-50: #49051d;
615
- --color-danger-100: #73092e;
616
- --color-danger-200: #9e0c3e;
617
- --color-danger-300: #c80f4f;
618
- --color-danger-400: #f31260;
619
- --color-danger-500: #f53b7c;
620
- --color-danger-600: #f76598;
621
- --color-danger-700: #f98eb3;
622
- --color-danger-800: #fbb8cf;
623
- --color-danger-900: #fee1eb;
624
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
625
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
626
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
627
- }
628
-
629
- .purple-light {
630
- --color-background: #FFFFFF;
631
- --color-foreground: #11181C;
632
- --color-foreground-50: #fafafa;
633
- --color-foreground-100: #f4f4f5;
634
- --color-foreground-200: #e4e4e7;
635
- --color-foreground-300: #d4d4d8;
636
- --color-foreground-400: #a1a1aa;
637
- --color-foreground-500: #71717a;
638
- --color-foreground-600: #52525b;
639
- --color-foreground-700: #3f3f46;
640
- --color-foreground-800: #27272a;
641
- --color-foreground-900: #18181b;
642
- --color-divider: rgba(17, 17, 17, 0.15);
643
- --color-focus: #7828c8;
644
- --color-content1: #FFFFFF;
645
- --color-content1-foreground: #11181C;
646
- --color-content2: #f4f4f5;
647
- --color-content2-foreground: #27272a;
648
- --color-content3: #e4e4e7;
649
- --color-content3-foreground: #3f3f46;
650
- --color-content4: #d4d4d8;
651
- --color-content4-foreground: #52525b;
652
- --color-default: #d4d4d8;
653
- --color-default-foreground: #000;
654
- --color-default-50: #fafafa;
655
- --color-default-100: #f4f4f5;
656
- --color-default-200: #e4e4e7;
657
- --color-default-300: #d4d4d8;
658
- --color-default-400: #a1a1aa;
659
- --color-default-500: #71717a;
660
- --color-default-600: #52525b;
661
- --color-default-700: #3f3f46;
662
- --color-default-800: #27272a;
663
- --color-default-900: #18181b;
664
- --color-primary: #7828c8;
665
- --color-primary-foreground: #fff;
666
- --color-primary-50: #eee4f8;
667
- --color-primary-100: #d7bfef;
668
- --color-primary-200: #bf99e5;
669
- --color-primary-300: #a773db;
670
- --color-primary-400: #904ed2;
671
- --color-primary-500: #7828c8;
672
- --color-primary-600: #6321a5;
673
- --color-primary-700: #4e1a82;
674
- --color-primary-800: #39135f;
675
- --color-primary-900: #240c3c;
676
- --color-secondary: #006fee;
677
- --color-secondary-foreground: #fff;
678
- --color-secondary-50: #dfedfd;
679
- --color-secondary-100: #b3d4fa;
680
- --color-secondary-200: #86bbf7;
681
- --color-secondary-300: #59a1f4;
682
- --color-secondary-400: #2d88f1;
683
- --color-secondary-500: #006fee;
684
- --color-secondary-600: #005cc4;
685
- --color-secondary-700: #00489b;
686
- --color-secondary-800: #003571;
687
- --color-secondary-900: #002147;
688
- --color-success: #17c964;
689
- --color-success-foreground: #000;
690
- --color-success-50: #e8faf0;
691
- --color-success-100: #d1f4e0;
692
- --color-success-200: #a2e9c1;
693
- --color-success-300: #74dfa2;
694
- --color-success-400: #45d483;
695
- --color-success-500: #17c964;
696
- --color-success-600: #12a150;
697
- --color-success-700: #0e793c;
698
- --color-success-800: #095028;
699
- --color-success-900: #052814;
700
- --color-warning: #f5a524;
701
- --color-warning-foreground: #000;
702
- --color-warning-50: #fefce8;
703
- --color-warning-100: #fdedd3;
704
- --color-warning-200: #fbdba7;
705
- --color-warning-300: #f9c97c;
706
- --color-warning-400: #f7b750;
707
- --color-warning-500: #f5a524;
708
- --color-warning-600: #c4841d;
709
- --color-warning-700: #936316;
710
- --color-warning-800: #62420e;
711
- --color-warning-900: #312107;
712
- --color-danger: #f31260;
713
- --color-danger-foreground: #ffffff;
714
- --color-danger-50: #fee7ef;
715
- --color-danger-100: #fdd0df;
716
- --color-danger-200: #faa0bf;
717
- --color-danger-300: #f871a0;
718
- --color-danger-400: #f54180;
719
- --color-danger-500: #f31260;
720
- --color-danger-600: #c20e4d;
721
- --color-danger-700: #920b3a;
722
- --color-danger-800: #610726;
723
- --color-danger-900: #310413;
724
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
725
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
726
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
727
- }
728
-
729
- .purple-dark {
730
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
731
- /* == Dark Theme Variables == */
732
-
733
- /* Base Colors */
734
- --background: oklch(12% 0.005 285.823);
735
- --foreground: var(--snow);
736
-
737
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
738
- --surface: oklch(0.2103 0.0059 285.89);
739
- --surface-foreground: var(--foreground);
740
-
741
- --surface-secondary: oklch(0.257 0.0037 286.14);
742
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
743
-
744
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
745
- --overlay: oklch(0.2103 0.0059 285.89);
746
- --overlay-foreground: var(--foreground);
747
-
748
- --muted: oklch(70.5% 0.015 286.067);
749
-
750
- --scrollbar: var(--scrollbar-thumb);
751
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
752
- --scrollbar-track: transparent;
753
- --scrollbar-gutter: auto;
754
- --scrollbar-width: thin;
755
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
756
-
757
- --default: oklch(27.4% 0.006 286.033);
758
- --default-foreground: var(--snow);
759
-
760
- /* Form Fields */
761
- --field-background: oklch(0.2103 0.0059 285.89);
762
- --field-foreground: var(--foreground);
763
-
764
- /* Status Colors */
765
- --warning: oklch(0.8203 0.1388 76.34);
766
- --warning-foreground: var(--eclipse);
767
-
768
- --danger: oklch(0.594 0.1967 24.63);
769
- --danger-foreground: var(--snow);
770
-
771
- /* Component Colors */
772
- --segment: oklch(0.3964 0.01 285.93);
773
- --segment-foreground: var(--foreground);
774
-
775
- /* Misc Colors */
776
- --border: oklch(28% 0.006 286.033);
777
- --separator: oklch(25% 0.006 286.033);
778
- --focus: var(--accent);
779
- --link: var(--foreground);
780
-
781
- /* Backdrop */
782
- --backdrop: rgba(0, 0, 0, 0.6);
783
-
784
- /* Shadows */
785
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
786
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
787
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
788
-
789
- /* Calculated Colors */
790
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
791
-
792
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
793
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
794
- --background-inverse: var(--foreground);
795
-
796
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
797
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
798
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
799
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
800
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
801
-
802
- --field-hover: color-mix(
803
- in oklab,
804
- var(--field-background, var(--default)) 90%,
805
- var(--field-foreground, var(--foreground)) 2%
806
- );
807
- --field-focus: var(--field-background, var(--default));
808
- --field-border-hover: color-mix(
809
- in oklab,
810
- var(--field-border, var(--border)) 88%,
811
- var(--field-foreground, var(--foreground)) 10%
812
- );
813
- --field-border-focus: color-mix(
814
- in oklab,
815
- var(--field-border, var(--border)) 74%,
816
- var(--field-foreground, var(--foreground)) 22%
817
- );
818
-
819
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
820
- --default-soft-foreground: var(--default-foreground);
821
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
822
-
823
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
824
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
825
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
826
-
827
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
828
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
829
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
830
-
831
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
832
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
833
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
834
-
835
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
836
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
837
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
838
-
839
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
840
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
841
-
842
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
843
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
844
-
845
- --color-background: #000000;
846
- --color-foreground: #ECEDEE;
847
- --color-foreground-50: #18181b;
848
- --color-foreground-100: #27272a;
849
- --color-foreground-200: #3f3f46;
850
- --color-foreground-300: #52525b;
851
- --color-foreground-400: #71717a;
852
- --color-foreground-500: #a1a1aa;
853
- --color-foreground-600: #d4d4d8;
854
- --color-foreground-700: #e4e4e7;
855
- --color-foreground-800: #f4f4f5;
856
- --color-foreground-900: #fafafa;
857
- --color-divider: rgba(255, 255, 255, 0.15);
858
- --color-focus: #9353d3;
859
- --color-content1: #18181b;
860
- --color-content1-foreground: #fafafa;
861
- --color-content2: #27272a;
862
- --color-content2-foreground: #f4f4f5;
863
- --color-content3: #3f3f46;
864
- --color-content3-foreground: #e4e4e7;
865
- --color-content4: #52525b;
866
- --color-content4-foreground: #d4d4d8;
867
- --color-default: #3f3f46;
868
- --color-default-foreground: #fff;
869
- --color-default-50: #18181b;
870
- --color-default-100: #27272a;
871
- --color-default-200: #3f3f46;
872
- --color-default-300: #52525b;
873
- --color-default-400: #71717a;
874
- --color-default-500: #a1a1aa;
875
- --color-default-600: #d4d4d8;
876
- --color-default-700: #e4e4e7;
877
- --color-default-800: #f4f4f5;
878
- --color-default-900: #fafafa;
879
- --color-primary: #9353d3;
880
- --color-primary-foreground: #fff;
881
- --color-primary-50: #2c193f;
882
- --color-primary-100: #462764;
883
- --color-primary-200: #603689;
884
- --color-primary-300: #7944ae;
885
- --color-primary-400: #9353d3;
886
- --color-primary-500: #a671db;
887
- --color-primary-600: #b98fe2;
888
- --color-primary-700: #ccadea;
889
- --color-primary-800: #dfcbf2;
890
- --color-primary-900: #f2eafa;
891
- --color-secondary: #637aff;
892
- --color-secondary-foreground: #000;
893
- --color-secondary-50: #1e254d;
894
- --color-secondary-100: #2f3a79;
895
- --color-secondary-200: #404fa6;
896
- --color-secondary-300: #5265d2;
897
- --color-secondary-400: #637aff;
898
- --color-secondary-500: #7e91ff;
899
- --color-secondary-600: #9aa9ff;
900
- --color-secondary-700: #b5c0ff;
901
- --color-secondary-800: #d0d7ff;
902
- --color-secondary-900: #eceeff;
903
- --color-success: #17c964;
904
- --color-success-foreground: #000;
905
- --color-success-50: #052814;
906
- --color-success-100: #095028;
907
- --color-success-200: #0e793c;
908
- --color-success-300: #12a150;
909
- --color-success-400: #17c964;
910
- --color-success-500: #45d483;
911
- --color-success-600: #74dfa2;
912
- --color-success-700: #a2e9c1;
913
- --color-success-800: #d1f4e0;
914
- --color-success-900: #e8faf0;
915
- --color-warning: #f5a524;
916
- --color-warning-foreground: #000;
917
- --color-warning-50: #312107;
918
- --color-warning-100: #62420e;
919
- --color-warning-200: #936316;
920
- --color-warning-300: #c4841d;
921
- --color-warning-400: #f5a524;
922
- --color-warning-500: #f7b750;
923
- --color-warning-600: #f9c97c;
924
- --color-warning-700: #fbdba7;
925
- --color-warning-800: #fdedd3;
926
- --color-warning-900: #fefce8;
927
- --color-danger: #f31260;
928
- --color-danger-foreground: #ffffff;
929
- --color-danger-50: #310413;
930
- --color-danger-100: #610726;
931
- --color-danger-200: #920b3a;
932
- --color-danger-300: #c20e4d;
933
- --color-danger-400: #f31260;
934
- --color-danger-500: #f54180;
935
- --color-danger-600: #f871a0;
936
- --color-danger-700: #faa0bf;
937
- --color-danger-800: #fdd0df;
938
- --color-danger-900: #fee7ef;
939
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
940
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
941
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
942
- }
943
-
944
- .yellow-light {
945
- --color-background: #FFFFFF;
946
- --color-foreground: #11181C;
947
- --color-foreground-50: #fafafa;
948
- --color-foreground-100: #f4f4f5;
949
- --color-foreground-200: #e4e4e7;
950
- --color-foreground-300: #d4d4d8;
951
- --color-foreground-400: #a1a1aa;
952
- --color-foreground-500: #71717a;
953
- --color-foreground-600: #52525b;
954
- --color-foreground-700: #3f3f46;
955
- --color-foreground-800: #27272a;
956
- --color-foreground-900: #18181b;
957
- --color-divider: rgba(17, 17, 17, 0.15);
958
- --color-focus: #FFD505;
959
- --color-content1: #FFFFFF;
960
- --color-content1-foreground: #11181C;
961
- --color-content2: #f4f4f5;
962
- --color-content2-foreground: #27272a;
963
- --color-content3: #e4e4e7;
964
- --color-content3-foreground: #3f3f46;
965
- --color-content4: #d4d4d8;
966
- --color-content4-foreground: #52525b;
967
- --color-default: #d4d4d8;
968
- --color-default-foreground: #000;
969
- --color-default-50: #fafafa;
970
- --color-default-100: #f4f4f5;
971
- --color-default-200: #e4e4e7;
972
- --color-default-300: #d4d4d8;
973
- --color-default-400: #a1a1aa;
974
- --color-default-500: #71717a;
975
- --color-default-600: #52525b;
976
- --color-default-700: #3f3f46;
977
- --color-default-800: #27272a;
978
- --color-default-900: #18181b;
979
- --color-primary: #FFD505;
980
- --color-primary-foreground: #000;
981
- --color-primary-50: #fffbe6;
982
- --color-primary-100: #FFFACD;
983
- --color-primary-200: #FFF39B;
984
- --color-primary-300: #FFEB69;
985
- --color-primary-400: #FFE243;
986
- --color-primary-500: #FFD505;
987
- --color-primary-600: #DBB303;
988
- --color-primary-700: #B79202;
989
- --color-primary-800: #937301;
990
- --color-primary-900: #7A5D00;
991
- --color-secondary: #1E40AF;
992
- --color-secondary-foreground: #fff;
993
- --color-secondary-50: #F3F7FD;
994
- --color-secondary-100: #D1DFFB;
995
- --color-secondary-200: #A5BEF7;
996
- --color-secondary-300: #7494E7;
997
- --color-secondary-400: #4E6FCF;
998
- --color-secondary-500: #1E40AF;
999
- --color-secondary-600: #153096;
1000
- --color-secondary-700: #0F237D;
1001
- --color-secondary-800: #091865;
1002
- --color-secondary-900: #051053;
1003
- --color-success: #17c964;
1004
- --color-success-foreground: #000;
1005
- --color-success-50: #e8faf0;
1006
- --color-success-100: #d1f4e0;
1007
- --color-success-200: #a2e9c1;
1008
- --color-success-300: #74dfa2;
1009
- --color-success-400: #45d483;
1010
- --color-success-500: #17c964;
1011
- --color-success-600: #12a150;
1012
- --color-success-700: #0e793c;
1013
- --color-success-800: #095028;
1014
- --color-success-900: #052814;
1015
- --color-warning: #f5a524;
1016
- --color-warning-foreground: #000;
1017
- --color-warning-50: #fefce8;
1018
- --color-warning-100: #fdedd3;
1019
- --color-warning-200: #fbdba7;
1020
- --color-warning-300: #f9c97c;
1021
- --color-warning-400: #f7b750;
1022
- --color-warning-500: #f5a524;
1023
- --color-warning-600: #c4841d;
1024
- --color-warning-700: #936316;
1025
- --color-warning-800: #62420e;
1026
- --color-warning-900: #312107;
1027
- --color-danger: #f31260;
1028
- --color-danger-foreground: #ffffff;
1029
- --color-danger-50: #fee7ef;
1030
- --color-danger-100: #fdd0df;
1031
- --color-danger-200: #faa0bf;
1032
- --color-danger-300: #f871a0;
1033
- --color-danger-400: #f54180;
1034
- --color-danger-500: #f31260;
1035
- --color-danger-600: #c20e4d;
1036
- --color-danger-700: #920b3a;
1037
- --color-danger-800: #610726;
1038
- --color-danger-900: #310413;
1039
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1040
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1041
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1042
- }
1043
-
1044
- .yellow-dark {
1045
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
1046
- /* == Dark Theme Variables == */
1047
-
1048
- /* Base Colors */
1049
- --background: oklch(12% 0.005 285.823);
1050
- --foreground: var(--snow);
1051
-
1052
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
1053
- --surface: oklch(0.2103 0.0059 285.89);
1054
- --surface-foreground: var(--foreground);
1055
-
1056
- --surface-secondary: oklch(0.257 0.0037 286.14);
1057
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
1058
-
1059
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
1060
- --overlay: oklch(0.2103 0.0059 285.89);
1061
- --overlay-foreground: var(--foreground);
1062
-
1063
- --muted: oklch(70.5% 0.015 286.067);
1064
-
1065
- --scrollbar: var(--scrollbar-thumb);
1066
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
1067
- --scrollbar-track: transparent;
1068
- --scrollbar-gutter: auto;
1069
- --scrollbar-width: thin;
1070
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
1071
-
1072
- --default: oklch(27.4% 0.006 286.033);
1073
- --default-foreground: var(--snow);
1074
-
1075
- /* Form Fields */
1076
- --field-background: oklch(0.2103 0.0059 285.89);
1077
- --field-foreground: var(--foreground);
1078
-
1079
- /* Status Colors */
1080
- --warning: oklch(0.8203 0.1388 76.34);
1081
- --warning-foreground: var(--eclipse);
1082
-
1083
- --danger: oklch(0.594 0.1967 24.63);
1084
- --danger-foreground: var(--snow);
1085
-
1086
- /* Component Colors */
1087
- --segment: oklch(0.3964 0.01 285.93);
1088
- --segment-foreground: var(--foreground);
1089
-
1090
- /* Misc Colors */
1091
- --border: oklch(28% 0.006 286.033);
1092
- --separator: oklch(25% 0.006 286.033);
1093
- --focus: var(--accent);
1094
- --link: var(--foreground);
1095
-
1096
- /* Backdrop */
1097
- --backdrop: rgba(0, 0, 0, 0.6);
1098
-
1099
- /* Shadows */
1100
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
1101
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
1102
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
1103
-
1104
- /* Calculated Colors */
1105
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
1106
-
1107
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
1108
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
1109
- --background-inverse: var(--foreground);
1110
-
1111
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
1112
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
1113
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
1114
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
1115
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
1116
-
1117
- --field-hover: color-mix(
1118
- in oklab,
1119
- var(--field-background, var(--default)) 90%,
1120
- var(--field-foreground, var(--foreground)) 2%
1121
- );
1122
- --field-focus: var(--field-background, var(--default));
1123
- --field-border-hover: color-mix(
1124
- in oklab,
1125
- var(--field-border, var(--border)) 88%,
1126
- var(--field-foreground, var(--foreground)) 10%
1127
- );
1128
- --field-border-focus: color-mix(
1129
- in oklab,
1130
- var(--field-border, var(--border)) 74%,
1131
- var(--field-foreground, var(--foreground)) 22%
1132
- );
1133
-
1134
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
1135
- --default-soft-foreground: var(--default-foreground);
1136
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
1137
-
1138
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
1139
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
1140
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
1141
-
1142
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
1143
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
1144
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
1145
-
1146
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
1147
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
1148
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
1149
-
1150
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
1151
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
1152
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
1153
-
1154
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
1155
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
1156
-
1157
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
1158
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
1159
-
1160
- --color-background: #000000;
1161
- --color-foreground: #ECEDEE;
1162
- --color-foreground-50: #18181b;
1163
- --color-foreground-100: #27272a;
1164
- --color-foreground-200: #3f3f46;
1165
- --color-foreground-300: #52525b;
1166
- --color-foreground-400: #71717a;
1167
- --color-foreground-500: #a1a1aa;
1168
- --color-foreground-600: #d4d4d8;
1169
- --color-foreground-700: #e4e4e7;
1170
- --color-foreground-800: #f4f4f5;
1171
- --color-foreground-900: #fafafa;
1172
- --color-divider: rgba(255, 255, 255, 0.15);
1173
- --color-focus: #FFD505;
1174
- --color-content1: #18181b;
1175
- --color-content1-foreground: #fafafa;
1176
- --color-content2: #27272a;
1177
- --color-content2-foreground: #f4f4f5;
1178
- --color-content3: #3f3f46;
1179
- --color-content3-foreground: #e4e4e7;
1180
- --color-content4: #52525b;
1181
- --color-content4-foreground: #d4d4d8;
1182
- --color-default: #3f3f46;
1183
- --color-default-foreground: #fff;
1184
- --color-default-50: #18181b;
1185
- --color-default-100: #27272a;
1186
- --color-default-200: #3f3f46;
1187
- --color-default-300: #52525b;
1188
- --color-default-400: #71717a;
1189
- --color-default-500: #a1a1aa;
1190
- --color-default-600: #d4d4d8;
1191
- --color-default-700: #e4e4e7;
1192
- --color-default-800: #f4f4f5;
1193
- --color-default-900: #fafafa;
1194
- --color-primary: #FFD505;
1195
- --color-primary-foreground: #000;
1196
- --color-primary-50: #7A5D00;
1197
- --color-primary-100: #937301;
1198
- --color-primary-200: #B79202;
1199
- --color-primary-300: #DBB303;
1200
- --color-primary-400: #FFD505;
1201
- --color-primary-500: #FFE243;
1202
- --color-primary-600: #FFEB69;
1203
- --color-primary-700: #FFF39B;
1204
- --color-primary-800: #FFFACD;
1205
- --color-primary-900: #fffbe6;
1206
- --color-secondary: #006fee;
1207
- --color-secondary-foreground: #fff;
1208
- --color-secondary-50: #002147;
1209
- --color-secondary-100: #003571;
1210
- --color-secondary-200: #00489b;
1211
- --color-secondary-300: #005cc4;
1212
- --color-secondary-400: #006fee;
1213
- --color-secondary-500: #2d88f1;
1214
- --color-secondary-600: #59a1f4;
1215
- --color-secondary-700: #86bbf7;
1216
- --color-secondary-800: #b3d4fa;
1217
- --color-secondary-900: #dfedfd;
1218
- --color-success: #17c964;
1219
- --color-success-foreground: #000;
1220
- --color-success-50: #052814;
1221
- --color-success-100: #095028;
1222
- --color-success-200: #0e793c;
1223
- --color-success-300: #12a150;
1224
- --color-success-400: #17c964;
1225
- --color-success-500: #45d483;
1226
- --color-success-600: #74dfa2;
1227
- --color-success-700: #a2e9c1;
1228
- --color-success-800: #d1f4e0;
1229
- --color-success-900: #e8faf0;
1230
- --color-warning: #f5a524;
1231
- --color-warning-foreground: #000;
1232
- --color-warning-50: #312107;
1233
- --color-warning-100: #62420e;
1234
- --color-warning-200: #936316;
1235
- --color-warning-300: #c4841d;
1236
- --color-warning-400: #f5a524;
1237
- --color-warning-500: #f7b750;
1238
- --color-warning-600: #f9c97c;
1239
- --color-warning-700: #fbdba7;
1240
- --color-warning-800: #fdedd3;
1241
- --color-warning-900: #fefce8;
1242
- --color-danger: #f31260;
1243
- --color-danger-foreground: #ffffff;
1244
- --color-danger-50: #310413;
1245
- --color-danger-100: #610726;
1246
- --color-danger-200: #920b3a;
1247
- --color-danger-300: #c20e4d;
1248
- --color-danger-400: #f31260;
1249
- --color-danger-500: #f54180;
1250
- --color-danger-600: #f871a0;
1251
- --color-danger-700: #faa0bf;
1252
- --color-danger-800: #fdd0df;
1253
- --color-danger-900: #fee7ef;
1254
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1255
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1256
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1257
- }
1258
-
1259
- .coral-light {
1260
- --color-background: #FFFFFF;
1261
- --color-foreground: #11181C;
1262
- --color-foreground-50: #fafafa;
1263
- --color-foreground-100: #f4f4f5;
1264
- --color-foreground-200: #e4e4e7;
1265
- --color-foreground-300: #d4d4d8;
1266
- --color-foreground-400: #a1a1aa;
1267
- --color-foreground-500: #71717a;
1268
- --color-foreground-600: #52525b;
1269
- --color-foreground-700: #3f3f46;
1270
- --color-foreground-800: #27272a;
1271
- --color-foreground-900: #18181b;
1272
- --color-divider: rgba(17, 17, 17, 0.15);
1273
- --color-focus: #ff4f4f;
1274
- --color-content1: #FFFFFF;
1275
- --color-content1-foreground: #11181C;
1276
- --color-content2: #f4f4f5;
1277
- --color-content2-foreground: #27272a;
1278
- --color-content3: #e4e4e7;
1279
- --color-content3-foreground: #3f3f46;
1280
- --color-content4: #d4d4d8;
1281
- --color-content4-foreground: #52525b;
1282
- --color-default: #d4d4d8;
1283
- --color-default-foreground: #000;
1284
- --color-default-50: #fafafa;
1285
- --color-default-100: #f4f4f5;
1286
- --color-default-200: #e4e4e7;
1287
- --color-default-300: #d4d4d8;
1288
- --color-default-400: #a1a1aa;
1289
- --color-default-500: #71717a;
1290
- --color-default-600: #52525b;
1291
- --color-default-700: #3f3f46;
1292
- --color-default-800: #27272a;
1293
- --color-default-900: #18181b;
1294
- --color-primary: #ff4f4f;
1295
- --color-primary-foreground: #000;
1296
- --color-primary-50: #ffe9e9;
1297
- --color-primary-100: #ffcaca;
1298
- --color-primary-200: #ffabab;
1299
- --color-primary-300: #ff8d8d;
1300
- --color-primary-400: #ff6e6e;
1301
- --color-primary-500: #ff4f4f;
1302
- --color-primary-600: #d24141;
1303
- --color-primary-700: #a63333;
1304
- --color-primary-800: #792626;
1305
- --color-primary-900: #4d1818;
1306
- --color-secondary: #7828c8;
1307
- --color-secondary-foreground: #fff;
1308
- --color-secondary-50: #f2eafa;
1309
- --color-secondary-100: #e4d4f4;
1310
- --color-secondary-200: #c9a9e9;
1311
- --color-secondary-300: #ae7ede;
1312
- --color-secondary-400: #9353d3;
1313
- --color-secondary-500: #7828c8;
1314
- --color-secondary-600: #6020a0;
1315
- --color-secondary-700: #481878;
1316
- --color-secondary-800: #301050;
1317
- --color-secondary-900: #180828;
1318
- --color-success: #17c964;
1319
- --color-success-foreground: #000;
1320
- --color-success-50: #e8faf0;
1321
- --color-success-100: #d1f4e0;
1322
- --color-success-200: #a2e9c1;
1323
- --color-success-300: #74dfa2;
1324
- --color-success-400: #45d483;
1325
- --color-success-500: #17c964;
1326
- --color-success-600: #12a150;
1327
- --color-success-700: #0e793c;
1328
- --color-success-800: #095028;
1329
- --color-success-900: #052814;
1330
- --color-warning: #f5a524;
1331
- --color-warning-foreground: #000;
1332
- --color-warning-50: #fefce8;
1333
- --color-warning-100: #fdedd3;
1334
- --color-warning-200: #fbdba7;
1335
- --color-warning-300: #f9c97c;
1336
- --color-warning-400: #f7b750;
1337
- --color-warning-500: #f5a524;
1338
- --color-warning-600: #c4841d;
1339
- --color-warning-700: #936316;
1340
- --color-warning-800: #62420e;
1341
- --color-warning-900: #312107;
1342
- --color-danger: #f31260;
1343
- --color-danger-foreground: #ffffff;
1344
- --color-danger-50: #fee7ef;
1345
- --color-danger-100: #fdd0df;
1346
- --color-danger-200: #faa0bf;
1347
- --color-danger-300: #f871a0;
1348
- --color-danger-400: #f54180;
1349
- --color-danger-500: #f31260;
1350
- --color-danger-600: #c20e4d;
1351
- --color-danger-700: #920b3a;
1352
- --color-danger-800: #610726;
1353
- --color-danger-900: #310413;
1354
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1355
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1356
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1357
- }
1358
-
1359
- .coral-dark {
1360
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
1361
- /* == Dark Theme Variables == */
1362
-
1363
- /* Base Colors */
1364
- --background: oklch(12% 0.005 285.823);
1365
- --foreground: var(--snow);
1366
-
1367
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
1368
- --surface: oklch(0.2103 0.0059 285.89);
1369
- --surface-foreground: var(--foreground);
1370
-
1371
- --surface-secondary: oklch(0.257 0.0037 286.14);
1372
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
1373
-
1374
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
1375
- --overlay: oklch(0.2103 0.0059 285.89);
1376
- --overlay-foreground: var(--foreground);
1377
-
1378
- --muted: oklch(70.5% 0.015 286.067);
1379
-
1380
- --scrollbar: var(--scrollbar-thumb);
1381
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
1382
- --scrollbar-track: transparent;
1383
- --scrollbar-gutter: auto;
1384
- --scrollbar-width: thin;
1385
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
1386
-
1387
- --default: oklch(27.4% 0.006 286.033);
1388
- --default-foreground: var(--snow);
1389
-
1390
- /* Form Fields */
1391
- --field-background: oklch(0.2103 0.0059 285.89);
1392
- --field-foreground: var(--foreground);
1393
-
1394
- /* Status Colors */
1395
- --warning: oklch(0.8203 0.1388 76.34);
1396
- --warning-foreground: var(--eclipse);
1397
-
1398
- --danger: oklch(0.594 0.1967 24.63);
1399
- --danger-foreground: var(--snow);
1400
-
1401
- /* Component Colors */
1402
- --segment: oklch(0.3964 0.01 285.93);
1403
- --segment-foreground: var(--foreground);
1404
-
1405
- /* Misc Colors */
1406
- --border: oklch(28% 0.006 286.033);
1407
- --separator: oklch(25% 0.006 286.033);
1408
- --focus: var(--accent);
1409
- --link: var(--foreground);
1410
-
1411
- /* Backdrop */
1412
- --backdrop: rgba(0, 0, 0, 0.6);
1413
-
1414
- /* Shadows */
1415
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
1416
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
1417
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
1418
-
1419
- /* Calculated Colors */
1420
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
1421
-
1422
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
1423
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
1424
- --background-inverse: var(--foreground);
1425
-
1426
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
1427
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
1428
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
1429
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
1430
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
1431
-
1432
- --field-hover: color-mix(
1433
- in oklab,
1434
- var(--field-background, var(--default)) 90%,
1435
- var(--field-foreground, var(--foreground)) 2%
1436
- );
1437
- --field-focus: var(--field-background, var(--default));
1438
- --field-border-hover: color-mix(
1439
- in oklab,
1440
- var(--field-border, var(--border)) 88%,
1441
- var(--field-foreground, var(--foreground)) 10%
1442
- );
1443
- --field-border-focus: color-mix(
1444
- in oklab,
1445
- var(--field-border, var(--border)) 74%,
1446
- var(--field-foreground, var(--foreground)) 22%
1447
- );
1448
-
1449
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
1450
- --default-soft-foreground: var(--default-foreground);
1451
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
1452
-
1453
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
1454
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
1455
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
1456
-
1457
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
1458
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
1459
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
1460
-
1461
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
1462
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
1463
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
1464
-
1465
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
1466
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
1467
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
1468
-
1469
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
1470
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
1471
-
1472
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
1473
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
1474
-
1475
- --color-background: #000000;
1476
- --color-foreground: #ECEDEE;
1477
- --color-foreground-50: #18181b;
1478
- --color-foreground-100: #27272a;
1479
- --color-foreground-200: #3f3f46;
1480
- --color-foreground-300: #52525b;
1481
- --color-foreground-400: #71717a;
1482
- --color-foreground-500: #a1a1aa;
1483
- --color-foreground-600: #d4d4d8;
1484
- --color-foreground-700: #e4e4e7;
1485
- --color-foreground-800: #f4f4f5;
1486
- --color-foreground-900: #fafafa;
1487
- --color-divider: rgba(255, 255, 255, 0.15);
1488
- --color-focus: #ff4f4f;
1489
- --color-content1: #18181b;
1490
- --color-content1-foreground: #fafafa;
1491
- --color-content2: #27272a;
1492
- --color-content2-foreground: #f4f4f5;
1493
- --color-content3: #3f3f46;
1494
- --color-content3-foreground: #e4e4e7;
1495
- --color-content4: #52525b;
1496
- --color-content4-foreground: #d4d4d8;
1497
- --color-default: #3f3f46;
1498
- --color-default-foreground: #fff;
1499
- --color-default-50: #18181b;
1500
- --color-default-100: #27272a;
1501
- --color-default-200: #3f3f46;
1502
- --color-default-300: #52525b;
1503
- --color-default-400: #71717a;
1504
- --color-default-500: #a1a1aa;
1505
- --color-default-600: #d4d4d8;
1506
- --color-default-700: #e4e4e7;
1507
- --color-default-800: #f4f4f5;
1508
- --color-default-900: #fafafa;
1509
- --color-primary: #ff4f4f;
1510
- --color-primary-foreground: #000;
1511
- --color-primary-50: #4d1818;
1512
- --color-primary-100: #792626;
1513
- --color-primary-200: #a63333;
1514
- --color-primary-300: #d24141;
1515
- --color-primary-400: #ff4f4f;
1516
- --color-primary-500: #ff6e6e;
1517
- --color-primary-600: #ff8d8d;
1518
- --color-primary-700: #ffabab;
1519
- --color-primary-800: #ffcaca;
1520
- --color-primary-900: #ffe9e9;
1521
- --color-secondary: #9353d3;
1522
- --color-secondary-foreground: #fff;
1523
- --color-secondary-50: #180828;
1524
- --color-secondary-100: #301050;
1525
- --color-secondary-200: #481878;
1526
- --color-secondary-300: #6020a0;
1527
- --color-secondary-400: #7828c8;
1528
- --color-secondary-500: #9353d3;
1529
- --color-secondary-600: #ae7ede;
1530
- --color-secondary-700: #c9a9e9;
1531
- --color-secondary-800: #e4d4f4;
1532
- --color-secondary-900: #f2eafa;
1533
- --color-success: #17c964;
1534
- --color-success-foreground: #000;
1535
- --color-success-50: #052814;
1536
- --color-success-100: #095028;
1537
- --color-success-200: #0e793c;
1538
- --color-success-300: #12a150;
1539
- --color-success-400: #17c964;
1540
- --color-success-500: #45d483;
1541
- --color-success-600: #74dfa2;
1542
- --color-success-700: #a2e9c1;
1543
- --color-success-800: #d1f4e0;
1544
- --color-success-900: #e8faf0;
1545
- --color-warning: #f5a524;
1546
- --color-warning-foreground: #000;
1547
- --color-warning-50: #312107;
1548
- --color-warning-100: #62420e;
1549
- --color-warning-200: #936316;
1550
- --color-warning-300: #c4841d;
1551
- --color-warning-400: #f5a524;
1552
- --color-warning-500: #f7b750;
1553
- --color-warning-600: #f9c97c;
1554
- --color-warning-700: #fbdba7;
1555
- --color-warning-800: #fdedd3;
1556
- --color-warning-900: #fefce8;
1557
- --color-danger: #f31260;
1558
- --color-danger-foreground: #ffffff;
1559
- --color-danger-50: #310413;
1560
- --color-danger-100: #610726;
1561
- --color-danger-200: #920b3a;
1562
- --color-danger-300: #c20e4d;
1563
- --color-danger-400: #f31260;
1564
- --color-danger-500: #f54180;
1565
- --color-danger-600: #f871a0;
1566
- --color-danger-700: #faa0bf;
1567
- --color-danger-800: #fdd0df;
1568
- --color-danger-900: #fee7ef;
1569
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1570
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1571
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1572
- }
1573
-
1574
- .green-light {
1575
- --color-background: #FFFFFF;
1576
- --color-foreground: #11181C;
1577
- --color-foreground-50: #fafafa;
1578
- --color-foreground-100: #f4f4f5;
1579
- --color-foreground-200: #e4e4e7;
1580
- --color-foreground-300: #d4d4d8;
1581
- --color-foreground-400: #a1a1aa;
1582
- --color-foreground-500: #71717a;
1583
- --color-foreground-600: #52525b;
1584
- --color-foreground-700: #3f3f46;
1585
- --color-foreground-800: #27272a;
1586
- --color-foreground-900: #18181b;
1587
- --color-divider: rgba(17, 17, 17, 0.15);
1588
- --color-focus: #66cc8a;
1589
- --color-content1: #FFFFFF;
1590
- --color-content1-foreground: #11181C;
1591
- --color-content2: #f4f4f5;
1592
- --color-content2-foreground: #27272a;
1593
- --color-content3: #e4e4e7;
1594
- --color-content3-foreground: #3f3f46;
1595
- --color-content4: #d4d4d8;
1596
- --color-content4-foreground: #52525b;
1597
- --color-default: #d4d4d8;
1598
- --color-default-foreground: #000;
1599
- --color-default-50: #fafafa;
1600
- --color-default-100: #f4f4f5;
1601
- --color-default-200: #e4e4e7;
1602
- --color-default-300: #d4d4d8;
1603
- --color-default-400: #a1a1aa;
1604
- --color-default-500: #71717a;
1605
- --color-default-600: #52525b;
1606
- --color-default-700: #3f3f46;
1607
- --color-default-800: #27272a;
1608
- --color-default-900: #18181b;
1609
- --color-primary: #16C964;
1610
- --color-primary-foreground: #000;
1611
- --color-primary-50: #EFFFEF;
1612
- --color-primary-100: #CFFCD1;
1613
- --color-primary-200: #A0F9AC;
1614
- --color-primary-300: #6FEE8D;
1615
- --color-primary-400: #49DE7B;
1616
- --color-primary-500: #16C964;
1617
- --color-primary-600: #10AC64;
1618
- --color-primary-700: #0B905F;
1619
- --color-primary-800: #077457;
1620
- --color-primary-900: #046051;
1621
- --color-secondary: #3956F9;
1622
- --color-secondary-foreground: #fff;
1623
- --color-secondary-50: #e3eaff;
1624
- --color-secondary-100: #D7DFFE;
1625
- --color-secondary-200: #AFBFFE;
1626
- --color-secondary-300: #889DFD;
1627
- --color-secondary-400: #6A82FB;
1628
- --color-secondary-500: #3956F9;
1629
- --color-secondary-600: #2941D6;
1630
- --color-secondary-700: #1C2EB3;
1631
- --color-secondary-800: #121F90;
1632
- --color-secondary-900: #0A1477;
1633
- --color-success: #49D127;
1634
- --color-success-foreground: #000;
1635
- --color-success-50: #e7fde3;
1636
- --color-success-100: #E8FCD3;
1637
- --color-success-200: #CBFAA8;
1638
- --color-success-300: #A4F17B;
1639
- --color-success-400: #7EE358;
1640
- --color-success-500: #49D127;
1641
- --color-success-600: #2FB31C;
1642
- --color-success-700: #1A9613;
1643
- --color-success-800: #0C790E;
1644
- --color-success-900: #076410;
1645
- --color-warning: #FFC300;
1646
- --color-warning-foreground: #000;
1647
- --color-warning-50: #fff9da;
1648
- --color-warning-100: #FFF7CC;
1649
- --color-warning-200: #FFEE99;
1650
- --color-warning-300: #FFE266;
1651
- --color-warning-400: #FFD63F;
1652
- --color-warning-500: #FFC300;
1653
- --color-warning-600: #DBA200;
1654
- --color-warning-700: #B78300;
1655
- --color-warning-800: #936600;
1656
- --color-warning-900: #7A5100;
1657
- --color-danger: #FF3F4C;
1658
- --color-danger-foreground: #000;
1659
- --color-danger-50: #ffe2e5;
1660
- --color-danger-100: #FFE3D8;
1661
- --color-danger-200: #FFC1B2;
1662
- --color-danger-300: #FF988B;
1663
- --color-danger-400: #FF726F;
1664
- --color-danger-500: #FF3F4C;
1665
- --color-danger-600: #DB2E49;
1666
- --color-danger-700: #B71F45;
1667
- --color-danger-800: #93143F;
1668
- --color-danger-900: #7A0C3B;
1669
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1670
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1671
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1672
- }
1673
-
1674
- .green-dark {
1675
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
1676
- /* == Dark Theme Variables == */
1677
-
1678
- /* Base Colors */
1679
- --background: oklch(12% 0.005 285.823);
1680
- --foreground: var(--snow);
1681
-
1682
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
1683
- --surface: oklch(0.2103 0.0059 285.89);
1684
- --surface-foreground: var(--foreground);
1685
-
1686
- --surface-secondary: oklch(0.257 0.0037 286.14);
1687
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
1688
-
1689
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
1690
- --overlay: oklch(0.2103 0.0059 285.89);
1691
- --overlay-foreground: var(--foreground);
1692
-
1693
- --muted: oklch(70.5% 0.015 286.067);
1694
-
1695
- --scrollbar: var(--scrollbar-thumb);
1696
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
1697
- --scrollbar-track: transparent;
1698
- --scrollbar-gutter: auto;
1699
- --scrollbar-width: thin;
1700
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
1701
-
1702
- --default: oklch(27.4% 0.006 286.033);
1703
- --default-foreground: var(--snow);
1704
-
1705
- /* Form Fields */
1706
- --field-background: oklch(0.2103 0.0059 285.89);
1707
- --field-foreground: var(--foreground);
1708
-
1709
- /* Status Colors */
1710
- --warning: oklch(0.8203 0.1388 76.34);
1711
- --warning-foreground: var(--eclipse);
1712
-
1713
- --danger: oklch(0.594 0.1967 24.63);
1714
- --danger-foreground: var(--snow);
1715
-
1716
- /* Component Colors */
1717
- --segment: oklch(0.3964 0.01 285.93);
1718
- --segment-foreground: var(--foreground);
1719
-
1720
- /* Misc Colors */
1721
- --border: oklch(28% 0.006 286.033);
1722
- --separator: oklch(25% 0.006 286.033);
1723
- --focus: var(--accent);
1724
- --link: var(--foreground);
1725
-
1726
- /* Backdrop */
1727
- --backdrop: rgba(0, 0, 0, 0.6);
1728
-
1729
- /* Shadows */
1730
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
1731
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
1732
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
1733
-
1734
- /* Calculated Colors */
1735
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
1736
-
1737
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
1738
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
1739
- --background-inverse: var(--foreground);
1740
-
1741
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
1742
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
1743
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
1744
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
1745
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
1746
-
1747
- --field-hover: color-mix(
1748
- in oklab,
1749
- var(--field-background, var(--default)) 90%,
1750
- var(--field-foreground, var(--foreground)) 2%
1751
- );
1752
- --field-focus: var(--field-background, var(--default));
1753
- --field-border-hover: color-mix(
1754
- in oklab,
1755
- var(--field-border, var(--border)) 88%,
1756
- var(--field-foreground, var(--foreground)) 10%
1757
- );
1758
- --field-border-focus: color-mix(
1759
- in oklab,
1760
- var(--field-border, var(--border)) 74%,
1761
- var(--field-foreground, var(--foreground)) 22%
1762
- );
1763
-
1764
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
1765
- --default-soft-foreground: var(--default-foreground);
1766
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
1767
-
1768
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
1769
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
1770
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
1771
-
1772
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
1773
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
1774
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
1775
-
1776
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
1777
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
1778
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
1779
-
1780
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
1781
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
1782
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
1783
-
1784
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
1785
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
1786
-
1787
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
1788
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
1789
-
1790
- --color-background: #000000;
1791
- --color-foreground: #ECEDEE;
1792
- --color-foreground-50: #18181b;
1793
- --color-foreground-100: #27272a;
1794
- --color-foreground-200: #3f3f46;
1795
- --color-foreground-300: #52525b;
1796
- --color-foreground-400: #71717a;
1797
- --color-foreground-500: #a1a1aa;
1798
- --color-foreground-600: #d4d4d8;
1799
- --color-foreground-700: #e4e4e7;
1800
- --color-foreground-800: #f4f4f5;
1801
- --color-foreground-900: #fafafa;
1802
- --color-divider: rgba(255, 255, 255, 0.15);
1803
- --color-focus: #66cc8a;
1804
- --color-content1: #18181b;
1805
- --color-content1-foreground: #fafafa;
1806
- --color-content2: #27272a;
1807
- --color-content2-foreground: #f4f4f5;
1808
- --color-content3: #3f3f46;
1809
- --color-content3-foreground: #e4e4e7;
1810
- --color-content4: #52525b;
1811
- --color-content4-foreground: #d4d4d8;
1812
- --color-default: #3f3f46;
1813
- --color-default-foreground: #fff;
1814
- --color-default-50: #18181b;
1815
- --color-default-100: #27272a;
1816
- --color-default-200: #3f3f46;
1817
- --color-default-300: #52525b;
1818
- --color-default-400: #71717a;
1819
- --color-default-500: #a1a1aa;
1820
- --color-default-600: #d4d4d8;
1821
- --color-default-700: #e4e4e7;
1822
- --color-default-800: #f4f4f5;
1823
- --color-default-900: #fafafa;
1824
- --color-primary: #16C964;
1825
- --color-primary-foreground: #000;
1826
- --color-primary-50: #EFFFEF;
1827
- --color-primary-100: #CFFCD1;
1828
- --color-primary-200: #A0F9AC;
1829
- --color-primary-300: #6FEE8D;
1830
- --color-primary-400: #49DE7B;
1831
- --color-primary-500: #16C964;
1832
- --color-primary-600: #10AC64;
1833
- --color-primary-700: #0B905F;
1834
- --color-primary-800: #077457;
1835
- --color-primary-900: #046051;
1836
- --color-secondary: #3956F9;
1837
- --color-secondary-foreground: #fff;
1838
- --color-secondary-50: #e3eaff;
1839
- --color-secondary-100: #D7DFFE;
1840
- --color-secondary-200: #AFBFFE;
1841
- --color-secondary-300: #889DFD;
1842
- --color-secondary-400: #6A82FB;
1843
- --color-secondary-500: #3956F9;
1844
- --color-secondary-600: #2941D6;
1845
- --color-secondary-700: #1C2EB3;
1846
- --color-secondary-800: #121F90;
1847
- --color-secondary-900: #0A1477;
1848
- --color-success: #49D127;
1849
- --color-success-foreground: #000;
1850
- --color-success-50: #e7fde3;
1851
- --color-success-100: #E8FCD3;
1852
- --color-success-200: #CBFAA8;
1853
- --color-success-300: #A4F17B;
1854
- --color-success-400: #7EE358;
1855
- --color-success-500: #49D127;
1856
- --color-success-600: #2FB31C;
1857
- --color-success-700: #1A9613;
1858
- --color-success-800: #0C790E;
1859
- --color-success-900: #076410;
1860
- --color-warning: #FFC300;
1861
- --color-warning-foreground: #000;
1862
- --color-warning-50: #fff9da;
1863
- --color-warning-100: #FFF7CC;
1864
- --color-warning-200: #FFEE99;
1865
- --color-warning-300: #FFE266;
1866
- --color-warning-400: #FFD63F;
1867
- --color-warning-500: #FFC300;
1868
- --color-warning-600: #DBA200;
1869
- --color-warning-700: #B78300;
1870
- --color-warning-800: #936600;
1871
- --color-warning-900: #7A5100;
1872
- --color-danger: #FF3F4C;
1873
- --color-danger-foreground: #fff;
1874
- --color-danger-50: #ffe2e5;
1875
- --color-danger-100: #FFE3D8;
1876
- --color-danger-200: #FFC1B2;
1877
- --color-danger-300: #FF988B;
1878
- --color-danger-400: #FF726F;
1879
- --color-danger-500: #FF3F4C;
1880
- --color-danger-600: #DB2E49;
1881
- --color-danger-700: #B71F45;
1882
- --color-danger-800: #93143F;
1883
- --color-danger-900: #7A0C3B;
1884
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1885
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1886
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
1887
- }
1888
-
1889
- .skyBlue-light {
1890
- --color-background: #FFFFFF;
1891
- --color-foreground: #11181C;
1892
- --color-foreground-50: #fafafa;
1893
- --color-foreground-100: #f4f4f5;
1894
- --color-foreground-200: #e4e4e7;
1895
- --color-foreground-300: #d4d4d8;
1896
- --color-foreground-400: #a1a1aa;
1897
- --color-foreground-500: #71717a;
1898
- --color-foreground-600: #52525b;
1899
- --color-foreground-700: #3f3f46;
1900
- --color-foreground-800: #27272a;
1901
- --color-foreground-900: #18181b;
1902
- --color-divider: rgba(17, 17, 17, 0.15);
1903
- --color-focus: #006FEE;
1904
- --color-content1: #FFFFFF;
1905
- --color-content1-foreground: #11181C;
1906
- --color-content2: #f4f4f5;
1907
- --color-content2-foreground: #27272a;
1908
- --color-content3: #e4e4e7;
1909
- --color-content3-foreground: #3f3f46;
1910
- --color-content4: #d4d4d8;
1911
- --color-content4-foreground: #52525b;
1912
- --color-default: #d4d4d8;
1913
- --color-default-foreground: #000;
1914
- --color-default-50: #fafafa;
1915
- --color-default-100: #f4f4f5;
1916
- --color-default-200: #e4e4e7;
1917
- --color-default-300: #d4d4d8;
1918
- --color-default-400: #a1a1aa;
1919
- --color-default-500: #71717a;
1920
- --color-default-600: #52525b;
1921
- --color-default-700: #3f3f46;
1922
- --color-default-800: #27272a;
1923
- --color-default-900: #18181b;
1924
- --color-primary: #60a5fa;
1925
- --color-primary-foreground: #000;
1926
- --color-primary-50: #ebf4fe;
1927
- --color-primary-100: #cfe4fe;
1928
- --color-primary-200: #b3d4fd;
1929
- --color-primary-300: #98c5fc;
1930
- --color-primary-400: #7cb5fb;
1931
- --color-primary-500: #60a5fa;
1932
- --color-primary-600: #4f88ce;
1933
- --color-primary-700: #3e6ba3;
1934
- --color-primary-800: #2e4e77;
1935
- --color-primary-900: #1d324b;
1936
- --color-secondary: #fad19e;
1937
- --color-secondary-foreground: #000;
1938
- --color-secondary-50: #fef9f3;
1939
- --color-secondary-100: #fef1e2;
1940
- --color-secondary-200: #fde9d1;
1941
- --color-secondary-300: #fce1c0;
1942
- --color-secondary-400: #fbd9af;
1943
- --color-secondary-500: #fad19e;
1944
- --color-secondary-600: #ceac82;
1945
- --color-secondary-700: #a38867;
1946
- --color-secondary-800: #77634b;
1947
- --color-secondary-900: #4b3f2f;
1948
- --color-success: #7aca97;
1949
- --color-success-foreground: #000;
1950
- --color-success-50: #eef8f2;
1951
- --color-success-100: #d7efe0;
1952
- --color-success-200: #c0e6ce;
1953
- --color-success-300: #a9ddbb;
1954
- --color-success-400: #91d3a9;
1955
- --color-success-500: #7aca97;
1956
- --color-success-600: #65a77d;
1957
- --color-success-700: #4f8362;
1958
- --color-success-800: #3a6048;
1959
- --color-success-900: #253d2d;
1960
- --color-warning: #ffa37c;
1961
- --color-warning-foreground: #000;
1962
- --color-warning-50: #fff4ef;
1963
- --color-warning-100: #ffe3d8;
1964
- --color-warning-200: #ffd3c1;
1965
- --color-warning-300: #ffc3aa;
1966
- --color-warning-400: #ffb393;
1967
- --color-warning-500: #ffa37c;
1968
- --color-warning-600: #d28666;
1969
- --color-warning-700: #a66a51;
1970
- --color-warning-800: #794d3b;
1971
- --color-warning-900: #4d3125;
1972
- --color-danger: #f16969;
1973
- --color-danger-foreground: #000;
1974
- --color-danger-50: #fdecec;
1975
- --color-danger-100: #fbd2d2;
1976
- --color-danger-200: #f8b8b8;
1977
- --color-danger-300: #f69e9e;
1978
- --color-danger-400: #f38383;
1979
- --color-danger-500: #f16969;
1980
- --color-danger-600: #c75757;
1981
- --color-danger-700: #9d4444;
1982
- --color-danger-800: #723232;
1983
- --color-danger-900: #482020;
1984
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1985
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1986
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
1987
- }
1988
-
1989
- .skyBlue-dark {
1990
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
1991
- /* == Dark Theme Variables == */
1992
-
1993
- /* Base Colors */
1994
- --background: oklch(12% 0.005 285.823);
1995
- --foreground: var(--snow);
1996
-
1997
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
1998
- --surface: oklch(0.2103 0.0059 285.89);
1999
- --surface-foreground: var(--foreground);
2000
-
2001
- --surface-secondary: oklch(0.257 0.0037 286.14);
2002
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
2003
-
2004
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
2005
- --overlay: oklch(0.2103 0.0059 285.89);
2006
- --overlay-foreground: var(--foreground);
2007
-
2008
- --muted: oklch(70.5% 0.015 286.067);
2009
-
2010
- --scrollbar: var(--scrollbar-thumb);
2011
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
2012
- --scrollbar-track: transparent;
2013
- --scrollbar-gutter: auto;
2014
- --scrollbar-width: thin;
2015
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
2016
-
2017
- --default: oklch(27.4% 0.006 286.033);
2018
- --default-foreground: var(--snow);
2019
-
2020
- /* Form Fields */
2021
- --field-background: oklch(0.2103 0.0059 285.89);
2022
- --field-foreground: var(--foreground);
2023
-
2024
- /* Status Colors */
2025
- --warning: oklch(0.8203 0.1388 76.34);
2026
- --warning-foreground: var(--eclipse);
2027
-
2028
- --danger: oklch(0.594 0.1967 24.63);
2029
- --danger-foreground: var(--snow);
2030
-
2031
- /* Component Colors */
2032
- --segment: oklch(0.3964 0.01 285.93);
2033
- --segment-foreground: var(--foreground);
2034
-
2035
- /* Misc Colors */
2036
- --border: oklch(28% 0.006 286.033);
2037
- --separator: oklch(25% 0.006 286.033);
2038
- --focus: var(--accent);
2039
- --link: var(--foreground);
2040
-
2041
- /* Backdrop */
2042
- --backdrop: rgba(0, 0, 0, 0.6);
2043
-
2044
- /* Shadows */
2045
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
2046
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
2047
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
2048
-
2049
- /* Calculated Colors */
2050
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
2051
-
2052
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
2053
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
2054
- --background-inverse: var(--foreground);
2055
-
2056
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
2057
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
2058
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
2059
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
2060
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
2061
-
2062
- --field-hover: color-mix(
2063
- in oklab,
2064
- var(--field-background, var(--default)) 90%,
2065
- var(--field-foreground, var(--foreground)) 2%
2066
- );
2067
- --field-focus: var(--field-background, var(--default));
2068
- --field-border-hover: color-mix(
2069
- in oklab,
2070
- var(--field-border, var(--border)) 88%,
2071
- var(--field-foreground, var(--foreground)) 10%
2072
- );
2073
- --field-border-focus: color-mix(
2074
- in oklab,
2075
- var(--field-border, var(--border)) 74%,
2076
- var(--field-foreground, var(--foreground)) 22%
2077
- );
2078
-
2079
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
2080
- --default-soft-foreground: var(--default-foreground);
2081
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
2082
-
2083
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
2084
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
2085
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
2086
-
2087
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
2088
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
2089
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
2090
-
2091
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
2092
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
2093
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
2094
-
2095
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
2096
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
2097
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
2098
-
2099
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
2100
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
2101
-
2102
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
2103
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
2104
-
2105
- --color-background: #000000;
2106
- --color-foreground: #ECEDEE;
2107
- --color-foreground-50: #18181b;
2108
- --color-foreground-100: #27272a;
2109
- --color-foreground-200: #3f3f46;
2110
- --color-foreground-300: #52525b;
2111
- --color-foreground-400: #71717a;
2112
- --color-foreground-500: #a1a1aa;
2113
- --color-foreground-600: #d4d4d8;
2114
- --color-foreground-700: #e4e4e7;
2115
- --color-foreground-800: #f4f4f5;
2116
- --color-foreground-900: #fafafa;
2117
- --color-divider: rgba(255, 255, 255, 0.15);
2118
- --color-focus: #006FEE;
2119
- --color-content1: #18181b;
2120
- --color-content1-foreground: #fafafa;
2121
- --color-content2: #27272a;
2122
- --color-content2-foreground: #f4f4f5;
2123
- --color-content3: #3f3f46;
2124
- --color-content3-foreground: #e4e4e7;
2125
- --color-content4: #52525b;
2126
- --color-content4-foreground: #d4d4d8;
2127
- --color-default: #3f3f46;
2128
- --color-default-foreground: #fff;
2129
- --color-default-50: #18181b;
2130
- --color-default-100: #27272a;
2131
- --color-default-200: #3f3f46;
2132
- --color-default-300: #52525b;
2133
- --color-default-400: #71717a;
2134
- --color-default-500: #a1a1aa;
2135
- --color-default-600: #d4d4d8;
2136
- --color-default-700: #e4e4e7;
2137
- --color-default-800: #f4f4f5;
2138
- --color-default-900: #fafafa;
2139
- --color-primary: #60a5fa;
2140
- --color-primary-foreground: #000;
2141
- --color-primary-50: #1d324b;
2142
- --color-primary-100: #2e4e77;
2143
- --color-primary-200: #3e6ba3;
2144
- --color-primary-300: #4f88ce;
2145
- --color-primary-400: #60a5fa;
2146
- --color-primary-500: #7cb5fb;
2147
- --color-primary-600: #98c5fc;
2148
- --color-primary-700: #b3d4fd;
2149
- --color-primary-800: #cfe4fe;
2150
- --color-primary-900: #ebf4fe;
2151
- --color-secondary: #fad19e;
2152
- --color-secondary-foreground: #000;
2153
- --color-secondary-50: #4b3f2f;
2154
- --color-secondary-100: #77634b;
2155
- --color-secondary-200: #a38867;
2156
- --color-secondary-300: #ceac82;
2157
- --color-secondary-400: #fad19e;
2158
- --color-secondary-500: #fbd9af;
2159
- --color-secondary-600: #fce1c0;
2160
- --color-secondary-700: #fde9d1;
2161
- --color-secondary-800: #fef1e2;
2162
- --color-secondary-900: #fef9f3;
2163
- --color-success: #7aca97;
2164
- --color-success-foreground: #000;
2165
- --color-success-50: #253d2d;
2166
- --color-success-100: #3a6048;
2167
- --color-success-200: #4f8362;
2168
- --color-success-300: #65a77d;
2169
- --color-success-400: #7aca97;
2170
- --color-success-500: #91d3a9;
2171
- --color-success-600: #a9ddbb;
2172
- --color-success-700: #c0e6ce;
2173
- --color-success-800: #d7efe0;
2174
- --color-success-900: #eef8f2;
2175
- --color-warning: #ffa37c;
2176
- --color-warning-foreground: #000;
2177
- --color-warning-50: #4d3125;
2178
- --color-warning-100: #794d3b;
2179
- --color-warning-200: #a66a51;
2180
- --color-warning-300: #d28666;
2181
- --color-warning-400: #ffa37c;
2182
- --color-warning-500: #ffb393;
2183
- --color-warning-600: #ffc3aa;
2184
- --color-warning-700: #ffd3c1;
2185
- --color-warning-800: #ffe3d8;
2186
- --color-warning-900: #fff4ef;
2187
- --color-danger: #f16969;
2188
- --color-danger-foreground: #000;
2189
- --color-danger-50: #482020;
2190
- --color-danger-100: #723232;
2191
- --color-danger-200: #9d4444;
2192
- --color-danger-300: #c75757;
2193
- --color-danger-400: #f16969;
2194
- --color-danger-500: #f38383;
2195
- --color-danger-600: #f69e9e;
2196
- --color-danger-700: #f8b8b8;
2197
- --color-danger-800: #fbd2d2;
2198
- --color-danger-900: #fdecec;
2199
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2200
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2201
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2202
- }
2203
-
2204
- .oceanMint-light {
2205
- --color-background: #FFFFFF;
2206
- --color-foreground: #11181C;
2207
- --color-foreground-50: #fafafa;
2208
- --color-foreground-100: #f4f4f5;
2209
- --color-foreground-200: #e4e4e7;
2210
- --color-foreground-300: #d4d4d8;
2211
- --color-foreground-400: #a1a1aa;
2212
- --color-foreground-500: #71717a;
2213
- --color-foreground-600: #52525b;
2214
- --color-foreground-700: #3f3f46;
2215
- --color-foreground-800: #27272a;
2216
- --color-foreground-900: #18181b;
2217
- --color-divider: rgba(17, 17, 17, 0.15);
2218
- --color-focus: #006FEE;
2219
- --color-content1: #FFFFFF;
2220
- --color-content1-foreground: #11181C;
2221
- --color-content2: #f4f4f5;
2222
- --color-content2-foreground: #27272a;
2223
- --color-content3: #e4e4e7;
2224
- --color-content3-foreground: #3f3f46;
2225
- --color-content4: #d4d4d8;
2226
- --color-content4-foreground: #52525b;
2227
- --color-default: #d4d4d8;
2228
- --color-default-foreground: #000;
2229
- --color-default-50: #fafafa;
2230
- --color-default-100: #f4f4f5;
2231
- --color-default-200: #e4e4e7;
2232
- --color-default-300: #d4d4d8;
2233
- --color-default-400: #a1a1aa;
2234
- --color-default-500: #71717a;
2235
- --color-default-600: #52525b;
2236
- --color-default-700: #3f3f46;
2237
- --color-default-800: #27272a;
2238
- --color-default-900: #18181b;
2239
- --color-primary: #26a5e5;
2240
- --color-primary-foreground: #000;
2241
- --color-primary-50: #e4f4fc;
2242
- --color-primary-100: #bee4f7;
2243
- --color-primary-200: #98d4f3;
2244
- --color-primary-300: #72c5ee;
2245
- --color-primary-400: #4cb5ea;
2246
- --color-primary-500: #26a5e5;
2247
- --color-primary-600: #1f88bd;
2248
- --color-primary-700: #196b95;
2249
- --color-primary-800: #124e6d;
2250
- --color-primary-900: #0b3245;
2251
- --color-secondary: #1aef96;
2252
- --color-secondary-foreground: #000;
2253
- --color-secondary-50: #e2fdf2;
2254
- --color-secondary-100: #bafae0;
2255
- --color-secondary-200: #92f7cd;
2256
- --color-secondary-300: #6af5bb;
2257
- --color-secondary-400: #42f2a8;
2258
- --color-secondary-500: #1aef96;
2259
- --color-secondary-600: #15c57c;
2260
- --color-secondary-700: #119b62;
2261
- --color-secondary-800: #0c7247;
2262
- --color-secondary-900: #08482d;
2263
- --color-success: #17c964;
2264
- --color-success-foreground: #000;
2265
- --color-success-50: #e2f8ec;
2266
- --color-success-100: #b9efd1;
2267
- --color-success-200: #91e5b5;
2268
- --color-success-300: #68dc9a;
2269
- --color-success-400: #40d27f;
2270
- --color-success-500: #17c964;
2271
- --color-success-600: #13a653;
2272
- --color-success-700: #0f8341;
2273
- --color-success-800: #0b5f30;
2274
- --color-success-900: #073c1e;
2275
- --color-warning: #f5a524;
2276
- --color-warning-foreground: #000;
2277
- --color-warning-50: #fef4e4;
2278
- --color-warning-100: #fce4bd;
2279
- --color-warning-200: #fad497;
2280
- --color-warning-300: #f9c571;
2281
- --color-warning-400: #f7b54a;
2282
- --color-warning-500: #f5a524;
2283
- --color-warning-600: #ca881e;
2284
- --color-warning-700: #9f6b17;
2285
- --color-warning-800: #744e11;
2286
- --color-warning-900: #4a320b;
2287
- --color-danger: #f31260;
2288
- --color-danger-foreground: #000;
2289
- --color-danger-50: #fee1eb;
2290
- --color-danger-100: #fbb8cf;
2291
- --color-danger-200: #f98eb3;
2292
- --color-danger-300: #f76598;
2293
- --color-danger-400: #f53b7c;
2294
- --color-danger-500: #f31260;
2295
- --color-danger-600: #c80f4f;
2296
- --color-danger-700: #9e0c3e;
2297
- --color-danger-800: #73092e;
2298
- --color-danger-900: #49051d;
2299
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
2300
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
2301
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
2302
- }
2303
-
2304
- .oceanMint-dark {
2305
- /* Neutrales oscuros de HeroUI v3 (espejo de su selector `.dark`). */
2306
- /* == Dark Theme Variables == */
2307
-
2308
- /* Base Colors */
2309
- --background: oklch(12% 0.005 285.823);
2310
- --foreground: var(--snow);
2311
-
2312
- /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
2313
- --surface: oklch(0.2103 0.0059 285.89);
2314
- --surface-foreground: var(--foreground);
2315
-
2316
- --surface-secondary: oklch(0.257 0.0037 286.14);
2317
- --surface-tertiary: oklch(0.2721 0.0024 247.91);
2318
-
2319
- /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
2320
- --overlay: oklch(0.2103 0.0059 285.89);
2321
- --overlay-foreground: var(--foreground);
2322
-
2323
- --muted: oklch(70.5% 0.015 286.067);
2324
-
2325
- --scrollbar: var(--scrollbar-thumb);
2326
- --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
2327
- --scrollbar-track: transparent;
2328
- --scrollbar-gutter: auto;
2329
- --scrollbar-width: thin;
2330
- --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
2331
-
2332
- --default: oklch(27.4% 0.006 286.033);
2333
- --default-foreground: var(--snow);
2334
-
2335
- /* Form Fields */
2336
- --field-background: oklch(0.2103 0.0059 285.89);
2337
- --field-foreground: var(--foreground);
2338
-
2339
- /* Status Colors */
2340
- --warning: oklch(0.8203 0.1388 76.34);
2341
- --warning-foreground: var(--eclipse);
2342
-
2343
- --danger: oklch(0.594 0.1967 24.63);
2344
- --danger-foreground: var(--snow);
2345
-
2346
- /* Component Colors */
2347
- --segment: oklch(0.3964 0.01 285.93);
2348
- --segment-foreground: var(--foreground);
2349
-
2350
- /* Misc Colors */
2351
- --border: oklch(28% 0.006 286.033);
2352
- --separator: oklch(25% 0.006 286.033);
2353
- --focus: var(--accent);
2354
- --link: var(--foreground);
2355
-
2356
- /* Backdrop */
2357
- --backdrop: rgba(0, 0, 0, 0.6);
2358
-
2359
- /* Shadows */
2360
- --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
2361
- --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
2362
- --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
2363
-
2364
- /* Calculated Colors */
2365
- --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
2366
-
2367
- --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
2368
- --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
2369
- --background-inverse: var(--foreground);
2370
-
2371
- --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
2372
- --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
2373
- --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
2374
- --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
2375
- --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
2376
-
2377
- --field-hover: color-mix(
2378
- in oklab,
2379
- var(--field-background, var(--default)) 90%,
2380
- var(--field-foreground, var(--foreground)) 2%
2381
- );
2382
- --field-focus: var(--field-background, var(--default));
2383
- --field-border-hover: color-mix(
2384
- in oklab,
2385
- var(--field-border, var(--border)) 88%,
2386
- var(--field-foreground, var(--foreground)) 10%
2387
- );
2388
- --field-border-focus: color-mix(
2389
- in oklab,
2390
- var(--field-border, var(--border)) 74%,
2391
- var(--field-foreground, var(--foreground)) 22%
2392
- );
2393
-
2394
- --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
2395
- --default-soft-foreground: var(--default-foreground);
2396
- --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
2397
-
2398
- --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
2399
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
2400
- --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
2401
-
2402
- --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
2403
- --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
2404
- --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
2405
-
2406
- --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
2407
- --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
2408
- --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
2409
-
2410
- --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
2411
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
2412
- --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
2413
-
2414
- --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
2415
- --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
2416
-
2417
- --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
2418
- --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
2419
-
2420
- --color-background: #000000;
2421
- --color-foreground: #ECEDEE;
2422
- --color-foreground-50: #18181b;
2423
- --color-foreground-100: #27272a;
2424
- --color-foreground-200: #3f3f46;
2425
- --color-foreground-300: #52525b;
2426
- --color-foreground-400: #71717a;
2427
- --color-foreground-500: #a1a1aa;
2428
- --color-foreground-600: #d4d4d8;
2429
- --color-foreground-700: #e4e4e7;
2430
- --color-foreground-800: #f4f4f5;
2431
- --color-foreground-900: #fafafa;
2432
- --color-divider: rgba(255, 255, 255, 0.15);
2433
- --color-focus: #006FEE;
2434
- --color-content1: #18181b;
2435
- --color-content1-foreground: #fafafa;
2436
- --color-content2: #27272a;
2437
- --color-content2-foreground: #f4f4f5;
2438
- --color-content3: #3f3f46;
2439
- --color-content3-foreground: #e4e4e7;
2440
- --color-content4: #52525b;
2441
- --color-content4-foreground: #d4d4d8;
2442
- --color-default: #3f3f46;
2443
- --color-default-foreground: #fff;
2444
- --color-default-50: #18181b;
2445
- --color-default-100: #27272a;
2446
- --color-default-200: #3f3f46;
2447
- --color-default-300: #52525b;
2448
- --color-default-400: #71717a;
2449
- --color-default-500: #a1a1aa;
2450
- --color-default-600: #d4d4d8;
2451
- --color-default-700: #e4e4e7;
2452
- --color-default-800: #f4f4f5;
2453
- --color-default-900: #fafafa;
2454
- --color-primary: #26a5e5;
2455
- --color-primary-foreground: #000;
2456
- --color-primary-50: #0b3245;
2457
- --color-primary-100: #124e6d;
2458
- --color-primary-200: #196b95;
2459
- --color-primary-300: #1f88bd;
2460
- --color-primary-400: #26a5e5;
2461
- --color-primary-500: #4cb5ea;
2462
- --color-primary-600: #72c5ee;
2463
- --color-primary-700: #98d4f3;
2464
- --color-primary-800: #bee4f7;
2465
- --color-primary-900: #e4f4fc;
2466
- --color-secondary: #1aef96;
2467
- --color-secondary-foreground: #000;
2468
- --color-secondary-50: #08482d;
2469
- --color-secondary-100: #0c7247;
2470
- --color-secondary-200: #119b62;
2471
- --color-secondary-300: #15c57c;
2472
- --color-secondary-400: #1aef96;
2473
- --color-secondary-500: #42f2a8;
2474
- --color-secondary-600: #6af5bb;
2475
- --color-secondary-700: #92f7cd;
2476
- --color-secondary-800: #bafae0;
2477
- --color-secondary-900: #e2fdf2;
2478
- --color-success: #17c964;
2479
- --color-success-foreground: #000;
2480
- --color-success-50: #073c1e;
2481
- --color-success-100: #0b5f30;
2482
- --color-success-200: #0f8341;
2483
- --color-success-300: #13a653;
2484
- --color-success-400: #17c964;
2485
- --color-success-500: #40d27f;
2486
- --color-success-600: #68dc9a;
2487
- --color-success-700: #91e5b5;
2488
- --color-success-800: #b9efd1;
2489
- --color-success-900: #e2f8ec;
2490
- --color-warning: #f5a524;
2491
- --color-warning-foreground: #000;
2492
- --color-warning-50: #4a320b;
2493
- --color-warning-100: #744e11;
2494
- --color-warning-200: #9f6b17;
2495
- --color-warning-300: #ca881e;
2496
- --color-warning-400: #f5a524;
2497
- --color-warning-500: #f7b54a;
2498
- --color-warning-600: #f9c571;
2499
- --color-warning-700: #fad497;
2500
- --color-warning-800: #fce4bd;
2501
- --color-warning-900: #fef4e4;
2502
- --color-danger: #f31260;
2503
- --color-danger-foreground: #000;
2504
- --color-danger-50: #49051d;
2505
- --color-danger-100: #73092e;
2506
- --color-danger-200: #9e0c3e;
2507
- --color-danger-300: #c80f4f;
2508
- --color-danger-400: #f31260;
2509
- --color-danger-500: #f53b7c;
2510
- --color-danger-600: #f76598;
2511
- --color-danger-700: #f98eb3;
2512
- --color-danger-800: #fbb8cf;
2513
- --color-danger-900: #fee1eb;
2514
- --aurora-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2515
- --aurora-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2516
- --aurora-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
2517
- }
2518
-
2519
- /*
2520
- * HeroUI v3 pinta con sus propios tokens (`--accent`, `--danger`, `--focus`…).
2521
- * Se apuntan a los de Aurora para que sigan al pack activo sea cual sea.
2522
- * `secondary` no se mapea: v3 no tiene ese color (su `variant="secondary"` es gris).
2523
- */
2524
- :root, .light,
2525
- .dark,
2526
- .blue-light,
2527
- .blue-dark,
2528
- .purple-light,
2529
- .purple-dark,
2530
- .yellow-light,
2531
- .yellow-dark,
2532
- .coral-light,
2533
- .coral-dark,
2534
- .green-light,
2535
- .green-dark,
2536
- .skyBlue-light,
2537
- .skyBlue-dark,
2538
- .oceanMint-light,
2539
- .oceanMint-dark {
2540
- --accent: var(--color-primary);
2541
- --accent-foreground: var(--color-primary-foreground);
2542
- --success: var(--color-success);
2543
- --success-foreground: var(--color-success-foreground);
2544
- --warning: var(--color-warning);
2545
- --warning-foreground: var(--color-warning-foreground);
2546
- --danger: var(--color-danger);
2547
- --danger-foreground: var(--color-danger-foreground);
2548
- --focus: var(--color-focus);
2549
- }
2550
- }