@jameskabz/nextcraft-ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -3,42 +3,9 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --color-orange-400: oklch(75% 0.183 55.934);
7
- --color-amber-100: oklch(96.2% 0.059 95.617);
8
6
  --color-amber-200: oklch(92.4% 0.12 95.746);
9
- --color-amber-300: oklch(87.9% 0.169 91.605);
10
- --color-amber-400: oklch(82.8% 0.189 84.429);
11
- --color-emerald-100: oklch(95% 0.052 163.051);
12
7
  --color-emerald-200: oklch(90.5% 0.093 164.15);
13
- --color-emerald-300: oklch(84.5% 0.143 164.978);
14
- --color-emerald-400: oklch(76.5% 0.177 163.223);
15
- --color-teal-400: oklch(77.7% 0.152 181.912);
16
- --color-cyan-400: oklch(78.9% 0.154 211.53);
17
- --color-sky-100: oklch(95.1% 0.026 236.824);
18
- --color-sky-200: oklch(90.1% 0.058 230.902);
19
- --color-sky-300: oklch(82.8% 0.111 230.318);
20
- --color-sky-400: oklch(74.6% 0.16 232.661);
21
- --color-blue-400: oklch(70.7% 0.165 254.624);
22
- --color-blue-500: oklch(62.3% 0.214 259.815);
23
- --color-indigo-400: oklch(67.3% 0.182 276.935);
24
- --color-indigo-600: oklch(51.1% 0.262 276.966);
25
- --color-violet-100: oklch(94.3% 0.029 294.588);
26
8
  --color-violet-200: oklch(89.4% 0.057 293.283);
27
- --color-violet-300: oklch(81.1% 0.111 293.571);
28
- --color-violet-400: oklch(70.2% 0.183 293.541);
29
- --color-violet-500: oklch(60.6% 0.25 292.717);
30
- --color-violet-600: oklch(54.1% 0.281 293.009);
31
- --color-purple-400: oklch(71.4% 0.203 305.504);
32
- --color-purple-600: oklch(55.8% 0.288 302.321);
33
- --color-purple-700: oklch(49.6% 0.265 301.924);
34
- --color-fuchsia-400: oklch(74% 0.238 322.16);
35
- --color-fuchsia-500: oklch(66.7% 0.295 322.15);
36
- --color-pink-100: oklch(94.8% 0.028 342.258);
37
- --color-pink-200: oklch(89.9% 0.061 343.231);
38
- --color-pink-300: oklch(82.3% 0.12 346.018);
39
- --color-pink-400: oklch(71.8% 0.202 349.761);
40
- --color-pink-500: oklch(65.6% 0.241 354.308);
41
- --color-rose-400: oklch(71.2% 0.194 13.428);
42
9
  --color-slate-300: oklch(86.9% 0.022 252.894);
43
10
  --color-slate-400: oklch(70.4% 0.04 256.788);
44
11
  --color-slate-900: oklch(20.8% 0.042 265.755);
@@ -67,6 +34,7 @@
67
34
  --font-weight-semibold: 600;
68
35
  --font-weight-bold: 700;
69
36
  --tracking-wide: 0.025em;
37
+ --radius-lg: 0.5rem;
70
38
  --radius-xl: 0.75rem;
71
39
  --radius-2xl: 1rem;
72
40
  --radius-3xl: 1.5rem;
@@ -329,6 +297,9 @@
329
297
  .grid-cols-3 {
330
298
  grid-template-columns: repeat(3, minmax(0, 1fr));
331
299
  }
300
+ .flex-wrap {
301
+ flex-wrap: wrap;
302
+ }
332
303
  .items-center {
333
304
  align-items: center;
334
305
  }
@@ -338,6 +309,9 @@
338
309
  .gap-2 {
339
310
  gap: calc(var(--spacing) * 2);
340
311
  }
312
+ .gap-3 {
313
+ gap: calc(var(--spacing) * 3);
314
+ }
341
315
  .gap-4 {
342
316
  gap: calc(var(--spacing) * 4);
343
317
  }
@@ -388,6 +362,9 @@
388
362
  .rounded-3xl {
389
363
  border-radius: var(--radius-3xl);
390
364
  }
365
+ .rounded-lg {
366
+ border-radius: var(--radius-lg);
367
+ }
391
368
  .rounded-xl {
392
369
  border-radius: var(--radius-xl);
393
370
  }
@@ -403,65 +380,11 @@
403
380
  border-style: var(--tw-border-style);
404
381
  border-width: 2px;
405
382
  }
406
- .border-amber-300\/30 {
407
- border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent);
408
- @supports (color: color-mix(in lab, red, red)) {
409
- border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
410
- }
411
- }
412
- .border-amber-400\/30 {
413
- border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
414
- @supports (color: color-mix(in lab, red, red)) {
415
- border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
416
- }
417
- }
418
- .border-emerald-300\/30 {
419
- border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 30%, transparent);
420
- @supports (color: color-mix(in lab, red, red)) {
421
- border-color: color-mix(in oklab, var(--color-emerald-300) 30%, transparent);
422
- }
423
- }
424
- .border-emerald-400\/30 {
425
- border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
426
- @supports (color: color-mix(in lab, red, red)) {
427
- border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
428
- }
429
- }
430
- .border-pink-300\/30 {
431
- border-color: color-mix(in srgb, oklch(82.3% 0.12 346.018) 30%, transparent);
432
- @supports (color: color-mix(in lab, red, red)) {
433
- border-color: color-mix(in oklab, var(--color-pink-300) 30%, transparent);
434
- }
435
- }
436
- .border-sky-300\/30 {
437
- border-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 30%, transparent);
438
- @supports (color: color-mix(in lab, red, red)) {
439
- border-color: color-mix(in oklab, var(--color-sky-300) 30%, transparent);
440
- }
441
- }
442
- .border-sky-400\/30 {
443
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
444
- @supports (color: color-mix(in lab, red, red)) {
445
- border-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
446
- }
447
- }
448
- .border-sky-400\/50 {
449
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 50%, transparent);
450
- @supports (color: color-mix(in lab, red, red)) {
451
- border-color: color-mix(in oklab, var(--color-sky-400) 50%, transparent);
452
- }
453
- }
454
- .border-violet-300\/30 {
455
- border-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 30%, transparent);
456
- @supports (color: color-mix(in lab, red, red)) {
457
- border-color: color-mix(in oklab, var(--color-violet-300) 30%, transparent);
458
- }
383
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
384
+ border-color: rgb(var(--nc-accent-1)/0.5);
459
385
  }
460
- .border-violet-400\/30 {
461
- border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
462
- @supports (color: color-mix(in lab, red, red)) {
463
- border-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
464
- }
386
+ .border-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
387
+ border-color: rgb(var(--nc-accent-1)/0.3);
465
388
  }
466
389
  .border-white\/10 {
467
390
  border-color: color-mix(in srgb, #fff 10%, transparent);
@@ -469,45 +392,24 @@
469
392
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
470
393
  }
471
394
  }
472
- .bg-amber-400\/20 {
473
- background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
474
- @supports (color: color-mix(in lab, red, red)) {
475
- background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
476
- }
477
- }
478
- .bg-emerald-400\/20 {
479
- background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
480
- @supports (color: color-mix(in lab, red, red)) {
481
- background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
482
- }
483
- }
484
- .bg-pink-400\/20 {
485
- background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 20%, transparent);
486
- @supports (color: color-mix(in lab, red, red)) {
487
- background-color: color-mix(in oklab, var(--color-pink-400) 20%, transparent);
488
- }
489
- }
490
- .bg-sky-400\/20 {
491
- background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
492
- @supports (color: color-mix(in lab, red, red)) {
493
- background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
494
- }
395
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
396
+ background-color: rgb(var(--nc-accent-1)/0.2);
495
397
  }
496
398
  .bg-transparent {
497
399
  background-color: transparent;
498
400
  }
499
- .bg-violet-400\/20 {
500
- background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 20%, transparent);
501
- @supports (color: color-mix(in lab, red, red)) {
502
- background-color: color-mix(in oklab, var(--color-violet-400) 20%, transparent);
503
- }
504
- }
505
401
  .bg-white\/5 {
506
402
  background-color: color-mix(in srgb, #fff 5%, transparent);
507
403
  @supports (color: color-mix(in lab, red, red)) {
508
404
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
509
405
  }
510
406
  }
407
+ .bg-white\/10 {
408
+ background-color: color-mix(in srgb, #fff 10%, transparent);
409
+ @supports (color: color-mix(in lab, red, red)) {
410
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
411
+ }
412
+ }
511
413
  .bg-linear-to-br {
512
414
  --tw-gradient-position: to bottom right;
513
415
  @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -530,88 +432,25 @@
530
432
  --tw-gradient-position: to right in oklab;
531
433
  background-image: linear-gradient(var(--tw-gradient-stops));
532
434
  }
533
- .from-amber-400\/15 {
534
- --tw-gradient-from: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
535
- @supports (color: color-mix(in lab, red, red)) {
536
- --tw-gradient-from: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
537
- }
538
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
539
- }
540
- .from-emerald-400\/15 {
541
- --tw-gradient-from: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent);
542
- @supports (color: color-mix(in lab, red, red)) {
543
- --tw-gradient-from: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
544
- }
435
+ .from-\[rgb\(var\(--nc-accent-1\)\)\] {
436
+ --tw-gradient-from: rgb(var(--nc-accent-1));
545
437
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
546
438
  }
547
- .from-pink-400\/15 {
548
- --tw-gradient-from: color-mix(in srgb, oklch(71.8% 0.202 349.761) 15%, transparent);
549
- @supports (color: color-mix(in lab, red, red)) {
550
- --tw-gradient-from: color-mix(in oklab, var(--color-pink-400) 15%, transparent);
551
- }
552
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
553
- }
554
- .from-sky-400 {
555
- --tw-gradient-from: var(--color-sky-400);
556
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
557
- }
558
- .from-sky-400\/15 {
559
- --tw-gradient-from: color-mix(in srgb, oklch(74.6% 0.16 232.661) 15%, transparent);
560
- @supports (color: color-mix(in lab, red, red)) {
561
- --tw-gradient-from: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
562
- }
439
+ .from-\[rgb\(var\(--nc-accent-1\)\/0\.15\)\] {
440
+ --tw-gradient-from: rgb(var(--nc-accent-1)/0.15);
563
441
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
564
442
  }
565
443
  .from-slate-950 {
566
444
  --tw-gradient-from: var(--color-slate-950);
567
445
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
568
446
  }
569
- .from-violet-400\/15 {
570
- --tw-gradient-from: color-mix(in srgb, oklch(70.2% 0.183 293.541) 15%, transparent);
571
- @supports (color: color-mix(in lab, red, red)) {
572
- --tw-gradient-from: color-mix(in oklab, var(--color-violet-400) 15%, transparent);
573
- }
574
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
575
- }
576
- .from-violet-500 {
577
- --tw-gradient-from: var(--color-violet-500);
578
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
579
- }
580
- .from-violet-600 {
581
- --tw-gradient-from: var(--color-violet-600);
582
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
583
- }
584
- .via-blue-400\/10 {
585
- --tw-gradient-via: color-mix(in srgb, oklch(70.7% 0.165 254.624) 10%, transparent);
586
- @supports (color: color-mix(in lab, red, red)) {
587
- --tw-gradient-via: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
588
- }
589
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
590
- --tw-gradient-stops: var(--tw-gradient-via-stops);
591
- }
592
- .via-blue-500 {
593
- --tw-gradient-via: var(--color-blue-500);
594
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
595
- --tw-gradient-stops: var(--tw-gradient-via-stops);
596
- }
597
- .via-fuchsia-500 {
598
- --tw-gradient-via: var(--color-fuchsia-500);
599
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
600
- --tw-gradient-stops: var(--tw-gradient-via-stops);
601
- }
602
- .via-orange-400\/10 {
603
- --tw-gradient-via: color-mix(in srgb, oklch(75% 0.183 55.934) 10%, transparent);
604
- @supports (color: color-mix(in lab, red, red)) {
605
- --tw-gradient-via: color-mix(in oklab, var(--color-orange-400) 10%, transparent);
606
- }
447
+ .via-\[rgb\(var\(--nc-accent-2\)\)\] {
448
+ --tw-gradient-via: rgb(var(--nc-accent-2));
607
449
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
608
450
  --tw-gradient-stops: var(--tw-gradient-via-stops);
609
451
  }
610
- .via-purple-400\/10 {
611
- --tw-gradient-via: color-mix(in srgb, oklch(71.4% 0.203 305.504) 10%, transparent);
612
- @supports (color: color-mix(in lab, red, red)) {
613
- --tw-gradient-via: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
614
- }
452
+ .via-\[rgb\(var\(--nc-accent-2\)\/0\.10\)\] {
453
+ --tw-gradient-via: rgb(var(--nc-accent-2)/0.10);
615
454
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
616
455
  --tw-gradient-stops: var(--tw-gradient-via-stops);
617
456
  }
@@ -620,52 +459,12 @@
620
459
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
621
460
  --tw-gradient-stops: var(--tw-gradient-via-stops);
622
461
  }
623
- .via-teal-400\/10 {
624
- --tw-gradient-via: color-mix(in srgb, oklch(77.7% 0.152 181.912) 10%, transparent);
625
- @supports (color: color-mix(in lab, red, red)) {
626
- --tw-gradient-via: color-mix(in oklab, var(--color-teal-400) 10%, transparent);
627
- }
628
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
629
- --tw-gradient-stops: var(--tw-gradient-via-stops);
630
- }
631
- .to-cyan-400\/15 {
632
- --tw-gradient-to: color-mix(in srgb, oklch(78.9% 0.154 211.53) 15%, transparent);
633
- @supports (color: color-mix(in lab, red, red)) {
634
- --tw-gradient-to: color-mix(in oklab, var(--color-cyan-400) 15%, transparent);
635
- }
462
+ .to-\[rgb\(var\(--nc-accent-3\)\)\] {
463
+ --tw-gradient-to: rgb(var(--nc-accent-3));
636
464
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
637
465
  }
638
- .to-fuchsia-400\/15 {
639
- --tw-gradient-to: color-mix(in srgb, oklch(74% 0.238 322.16) 15%, transparent);
640
- @supports (color: color-mix(in lab, red, red)) {
641
- --tw-gradient-to: color-mix(in oklab, var(--color-fuchsia-400) 15%, transparent);
642
- }
643
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
644
- }
645
- .to-indigo-400\/15 {
646
- --tw-gradient-to: color-mix(in srgb, oklch(67.3% 0.182 276.935) 15%, transparent);
647
- @supports (color: color-mix(in lab, red, red)) {
648
- --tw-gradient-to: color-mix(in oklab, var(--color-indigo-400) 15%, transparent);
649
- }
650
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
651
- }
652
- .to-indigo-600 {
653
- --tw-gradient-to: var(--color-indigo-600);
654
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
655
- }
656
- .to-pink-500 {
657
- --tw-gradient-to: var(--color-pink-500);
658
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
659
- }
660
- .to-purple-600 {
661
- --tw-gradient-to: var(--color-purple-600);
662
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
663
- }
664
- .to-rose-400\/15 {
665
- --tw-gradient-to: color-mix(in srgb, oklch(71.2% 0.194 13.428) 15%, transparent);
666
- @supports (color: color-mix(in lab, red, red)) {
667
- --tw-gradient-to: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
668
- }
466
+ .to-\[rgb\(var\(--nc-accent-3\)\/0\.15\)\] {
467
+ --tw-gradient-to: rgb(var(--nc-accent-3)/0.15);
669
468
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
670
469
  }
671
470
  .to-slate-950 {
@@ -681,6 +480,9 @@
681
480
  .p-8 {
682
481
  padding: calc(var(--spacing) * 8);
683
482
  }
483
+ .px-3 {
484
+ padding-inline: calc(var(--spacing) * 3);
485
+ }
684
486
  .px-4 {
685
487
  padding-inline: calc(var(--spacing) * 4);
686
488
  }
@@ -693,6 +495,12 @@
693
495
  .px-8 {
694
496
  padding-inline: calc(var(--spacing) * 8);
695
497
  }
498
+ .py-1 {
499
+ padding-block: calc(var(--spacing) * 1);
500
+ }
501
+ .py-3 {
502
+ padding-block: calc(var(--spacing) * 3);
503
+ }
696
504
  .pt-4 {
697
505
  padding-top: calc(var(--spacing) * 4);
698
506
  }
@@ -750,96 +558,39 @@
750
558
  --tw-tracking: var(--tracking-wide);
751
559
  letter-spacing: var(--tracking-wide);
752
560
  }
753
- .text-amber-100 {
754
- color: var(--color-amber-100);
561
+ .text-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
562
+ color: rgb(var(--nc-accent-1));
755
563
  }
756
- .text-amber-200 {
757
- color: var(--color-amber-200);
564
+ .text-\[rgb\(var\(--nc-accent-1\)\)\] {
565
+ color: rgb(var(--nc-accent-1));
758
566
  }
759
- .text-amber-200\/70 {
760
- color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 70%, transparent);
761
- @supports (color: color-mix(in lab, red, red)) {
762
- color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
763
- }
567
+ .text-\[rgb\(var\(--nc-accent-soft\)\)\] {
568
+ color: rgb(var(--nc-accent-soft));
764
569
  }
765
- .text-amber-300 {
766
- color: var(--color-amber-300);
570
+ .text-\[rgb\(var\(--nc-accent-soft\)\/0\.7\)\] {
571
+ color: rgb(var(--nc-accent-soft)/0.7);
767
572
  }
768
- .text-emerald-100 {
769
- color: var(--color-emerald-100);
573
+ .text-amber-200 {
574
+ color: var(--color-amber-200);
770
575
  }
771
576
  .text-emerald-200 {
772
577
  color: var(--color-emerald-200);
773
578
  }
774
- .text-emerald-200\/70 {
775
- color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 70%, transparent);
776
- @supports (color: color-mix(in lab, red, red)) {
777
- color: color-mix(in oklab, var(--color-emerald-200) 70%, transparent);
778
- }
779
- }
780
- .text-emerald-300 {
781
- color: var(--color-emerald-300);
782
- }
783
- .text-pink-100 {
784
- color: var(--color-pink-100);
785
- }
786
- .text-pink-200\/70 {
787
- color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 70%, transparent);
788
- @supports (color: color-mix(in lab, red, red)) {
789
- color: color-mix(in oklab, var(--color-pink-200) 70%, transparent);
790
- }
791
- }
792
- .text-pink-300 {
793
- color: var(--color-pink-300);
794
- }
795
- .text-sky-100 {
796
- color: var(--color-sky-100);
797
- }
798
- .text-sky-200 {
799
- color: var(--color-sky-200);
800
- }
801
- .text-sky-200\/70 {
802
- color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 70%, transparent);
803
- @supports (color: color-mix(in lab, red, red)) {
804
- color: color-mix(in oklab, var(--color-sky-200) 70%, transparent);
805
- }
806
- }
807
- .text-sky-300 {
808
- color: var(--color-sky-300);
809
- }
810
- .text-sky-400 {
811
- color: var(--color-sky-400);
812
- }
813
579
  .text-slate-300 {
814
580
  color: var(--color-slate-300);
815
581
  }
816
582
  .text-slate-400 {
817
583
  color: var(--color-slate-400);
818
584
  }
585
+ .text-slate-900 {
586
+ color: var(--color-slate-900);
587
+ }
819
588
  .text-transparent {
820
589
  color: transparent;
821
590
  }
822
- .text-violet-100 {
823
- color: var(--color-violet-100);
824
- }
825
591
  .text-violet-200 {
826
592
  color: var(--color-violet-200);
827
593
  }
828
- .text-violet-200\/60 {
829
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 60%, transparent);
830
- @supports (color: color-mix(in lab, red, red)) {
831
- color: color-mix(in oklab, var(--color-violet-200) 60%, transparent);
832
- }
833
- }
834
- .text-violet-200\/70 {
835
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 70%, transparent);
836
- @supports (color: color-mix(in lab, red, red)) {
837
- color: color-mix(in oklab, var(--color-violet-200) 70%, transparent);
838
- }
839
- }
840
- .text-violet-300 {
841
- color: var(--color-violet-300);
842
- }
843
594
  .text-white {
844
595
  color: var(--color-white);
845
596
  }
@@ -849,6 +600,12 @@
849
600
  color: color-mix(in oklab, var(--color-white) 50%, transparent);
850
601
  }
851
602
  }
603
+ .text-white\/70 {
604
+ color: color-mix(in srgb, #fff 70%, transparent);
605
+ @supports (color: color-mix(in lab, red, red)) {
606
+ color: color-mix(in oklab, var(--color-white) 70%, transparent);
607
+ }
608
+ }
852
609
  .text-white\/80 {
853
610
  color: color-mix(in srgb, #fff 80%, transparent);
854
611
  @supports (color: color-mix(in lab, red, red)) {
@@ -863,31 +620,21 @@
863
620
  --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.3));
864
621
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
865
622
  }
866
- .shadow-\[inset_0_2px_8px_rgba\(0\,0\,0\,0\.3\)\] {
867
- --tw-shadow: inset 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.3));
623
+ .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
624
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.45));
868
625
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
869
626
  }
870
- .shadow-lg {
871
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
627
+ .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-2\)\/0\.45\)\] {
628
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
872
629
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
873
630
  }
874
- .shadow-blue-500\/50 {
875
- --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
876
- @supports (color: color-mix(in lab, red, red)) {
877
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
878
- }
879
- }
880
- .shadow-fuchsia-500\/50 {
881
- --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 50%, transparent);
882
- @supports (color: color-mix(in lab, red, red)) {
883
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
884
- }
631
+ .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.06\)\] {
632
+ --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.06));
633
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
885
634
  }
886
- .shadow-violet-500\/50 {
887
- --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 50%, transparent);
888
- @supports (color: color-mix(in lab, red, red)) {
889
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
890
- }
635
+ .shadow-\[inset_0_2px_8px_rgba\(0\,0\,0\,0\.3\)\] {
636
+ --tw-shadow: inset 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.3));
637
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
891
638
  }
892
639
  .outline {
893
640
  outline-style: var(--tw-outline-style);
@@ -930,36 +677,13 @@
930
677
  --tw-duration: 300ms;
931
678
  transition-duration: 300ms;
932
679
  }
933
- .placeholder\:text-amber-200\/40 {
934
- &::placeholder {
935
- color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 40%, transparent);
936
- @supports (color: color-mix(in lab, red, red)) {
937
- color: color-mix(in oklab, var(--color-amber-200) 40%, transparent);
938
- }
939
- }
940
- }
941
- .placeholder\:text-emerald-200\/40 {
942
- &::placeholder {
943
- color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 40%, transparent);
944
- @supports (color: color-mix(in lab, red, red)) {
945
- color: color-mix(in oklab, var(--color-emerald-200) 40%, transparent);
946
- }
947
- }
948
- }
949
- .placeholder\:text-sky-200\/40 {
950
- &::placeholder {
951
- color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 40%, transparent);
952
- @supports (color: color-mix(in lab, red, red)) {
953
- color: color-mix(in oklab, var(--color-sky-200) 40%, transparent);
954
- }
955
- }
680
+ .outline-none {
681
+ --tw-outline-style: none;
682
+ outline-style: none;
956
683
  }
957
- .placeholder\:text-violet-200\/40 {
684
+ .placeholder\:text-\[rgb\(var\(--nc-accent-soft\)\/0\.4\)\] {
958
685
  &::placeholder {
959
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 40%, transparent);
960
- @supports (color: color-mix(in lab, red, red)) {
961
- color: color-mix(in oklab, var(--color-violet-200) 40%, transparent);
962
- }
686
+ color: rgb(var(--nc-accent-soft)/0.4);
963
687
  }
964
688
  }
965
689
  .before\:absolute {
@@ -1012,13 +736,10 @@
1012
736
  background-image: linear-gradient(var(--tw-gradient-stops));
1013
737
  }
1014
738
  }
1015
- .before\:from-sky-400\/20 {
739
+ .before\:from-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
1016
740
  &::before {
1017
741
  content: var(--tw-content);
1018
- --tw-gradient-from: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
1019
- @supports (color: color-mix(in lab, red, red)) {
1020
- --tw-gradient-from: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
1021
- }
742
+ --tw-gradient-from: rgb(var(--nc-accent-1)/0.2);
1022
743
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1023
744
  }
1024
745
  }
@@ -1032,24 +753,18 @@
1032
753
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1033
754
  }
1034
755
  }
1035
- .before\:via-blue-500\/20 {
756
+ .before\:via-\[rgb\(var\(--nc-accent-2\)\/0\.2\)\] {
1036
757
  &::before {
1037
758
  content: var(--tw-content);
1038
- --tw-gradient-via: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
1039
- @supports (color: color-mix(in lab, red, red)) {
1040
- --tw-gradient-via: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
1041
- }
759
+ --tw-gradient-via: rgb(var(--nc-accent-2)/0.2);
1042
760
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1043
761
  --tw-gradient-stops: var(--tw-gradient-via-stops);
1044
762
  }
1045
763
  }
1046
- .before\:to-indigo-600\/20 {
764
+ .before\:to-\[rgb\(var\(--nc-accent-3\)\/0\.2\)\] {
1047
765
  &::before {
1048
766
  content: var(--tw-content);
1049
- --tw-gradient-to: color-mix(in srgb, oklch(51.1% 0.262 276.966) 20%, transparent);
1050
- @supports (color: color-mix(in lab, red, red)) {
1051
- --tw-gradient-to: color-mix(in oklab, var(--color-indigo-600) 20%, transparent);
1052
- }
767
+ --tw-gradient-to: rgb(var(--nc-accent-3)/0.2);
1053
768
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1054
769
  }
1055
770
  }
@@ -1088,6 +803,13 @@
1088
803
  transition-duration: 300ms;
1089
804
  }
1090
805
  }
806
+ .hover\:scale-\[1\.01\] {
807
+ &:hover {
808
+ @media (hover: hover) {
809
+ scale: 1.01;
810
+ }
811
+ }
812
+ }
1091
813
  .hover\:scale-\[1\.02\] {
1092
814
  &:hover {
1093
815
  @media (hover: hover) {
@@ -1095,10 +817,10 @@
1095
817
  }
1096
818
  }
1097
819
  }
1098
- .hover\:border-sky-400 {
820
+ .hover\:border-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
1099
821
  &:hover {
1100
822
  @media (hover: hover) {
1101
- border-color: var(--color-sky-400);
823
+ border-color: rgb(var(--nc-accent-1));
1102
824
  }
1103
825
  }
1104
826
  }
@@ -1112,13 +834,10 @@
1112
834
  }
1113
835
  }
1114
836
  }
1115
- .hover\:bg-sky-400\/10 {
837
+ .hover\:bg-\[color\:rgb\(var\(--nc-accent-1\)\/0\.1\)\] {
1116
838
  &:hover {
1117
839
  @media (hover: hover) {
1118
- background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 10%, transparent);
1119
- @supports (color: color-mix(in lab, red, red)) {
1120
- background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
1121
- }
840
+ background-color: rgb(var(--nc-accent-1)/0.1);
1122
841
  }
1123
842
  }
1124
843
  }
@@ -1132,22 +851,6 @@
1132
851
  }
1133
852
  }
1134
853
  }
1135
- .hover\:from-violet-600 {
1136
- &:hover {
1137
- @media (hover: hover) {
1138
- --tw-gradient-from: var(--color-violet-600);
1139
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1140
- }
1141
- }
1142
- }
1143
- .hover\:to-purple-700 {
1144
- &:hover {
1145
- @media (hover: hover) {
1146
- --tw-gradient-to: var(--color-purple-700);
1147
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1148
- }
1149
- }
1150
- }
1151
854
  .hover\:shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.4\)\] {
1152
855
  &:hover {
1153
856
  @media (hover: hover) {
@@ -1156,41 +859,19 @@
1156
859
  }
1157
860
  }
1158
861
  }
1159
- .hover\:shadow-xl {
862
+ .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1160
863
  &:hover {
1161
864
  @media (hover: hover) {
1162
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
865
+ --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.6));
1163
866
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1164
867
  }
1165
868
  }
1166
869
  }
1167
- .hover\:shadow-blue-500\/60 {
1168
- &:hover {
1169
- @media (hover: hover) {
1170
- --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 60%, transparent);
1171
- @supports (color: color-mix(in lab, red, red)) {
1172
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1173
- }
1174
- }
1175
- }
1176
- }
1177
- .hover\:shadow-fuchsia-500\/60 {
1178
- &:hover {
1179
- @media (hover: hover) {
1180
- --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 60%, transparent);
1181
- @supports (color: color-mix(in lab, red, red)) {
1182
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1183
- }
1184
- }
1185
- }
1186
- }
1187
- .hover\:shadow-violet-500\/60 {
870
+ .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-2\)\/0\.6\)\] {
1188
871
  &:hover {
1189
872
  @media (hover: hover) {
1190
- --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 60%, transparent);
1191
- @supports (color: color-mix(in lab, red, red)) {
1192
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1193
- }
873
+ --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.6));
874
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1194
875
  }
1195
876
  }
1196
877
  }
@@ -1204,36 +885,9 @@
1204
885
  }
1205
886
  }
1206
887
  }
1207
- .focus\:border-amber-400\/80 {
1208
- &:focus {
1209
- border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
1210
- @supports (color: color-mix(in lab, red, red)) {
1211
- border-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
1212
- }
1213
- }
1214
- }
1215
- .focus\:border-emerald-400\/80 {
888
+ .focus\:border-\[rgb\(var\(--nc-accent-1\)\/0\.8\)\] {
1216
889
  &:focus {
1217
- border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 80%, transparent);
1218
- @supports (color: color-mix(in lab, red, red)) {
1219
- border-color: color-mix(in oklab, var(--color-emerald-400) 80%, transparent);
1220
- }
1221
- }
1222
- }
1223
- .focus\:border-sky-400\/80 {
1224
- &:focus {
1225
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 80%, transparent);
1226
- @supports (color: color-mix(in lab, red, red)) {
1227
- border-color: color-mix(in oklab, var(--color-sky-400) 80%, transparent);
1228
- }
1229
- }
1230
- }
1231
- .focus\:border-violet-400\/80 {
1232
- &:focus {
1233
- border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 80%, transparent);
1234
- @supports (color: color-mix(in lab, red, red)) {
1235
- border-color: color-mix(in oklab, var(--color-violet-400) 80%, transparent);
1236
- }
890
+ border-color: rgb(var(--nc-accent-1)/0.8);
1237
891
  }
1238
892
  }
1239
893
  .focus\:shadow-\[0_0_30px_-5px_var\(--glow-color\)\] {
@@ -1242,42 +896,26 @@
1242
896
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1243
897
  }
1244
898
  }
1245
- .focus\:ring-4 {
899
+ .focus\:ring-2 {
1246
900
  &:focus {
1247
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
901
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1248
902
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1249
903
  }
1250
904
  }
1251
- .focus\:ring-amber-400\/30 {
1252
- &:focus {
1253
- --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
1254
- @supports (color: color-mix(in lab, red, red)) {
1255
- --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
1256
- }
1257
- }
1258
- }
1259
- .focus\:ring-emerald-400\/30 {
905
+ .focus\:ring-4 {
1260
906
  &:focus {
1261
- --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
1262
- @supports (color: color-mix(in lab, red, red)) {
1263
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
1264
- }
907
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
908
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1265
909
  }
1266
910
  }
1267
- .focus\:ring-sky-400\/30 {
911
+ .focus\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
1268
912
  &:focus {
1269
- --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
1270
- @supports (color: color-mix(in lab, red, red)) {
1271
- --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
1272
- }
913
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.3);
1273
914
  }
1274
915
  }
1275
- .focus\:ring-violet-400\/30 {
916
+ .focus\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1276
917
  &:focus {
1277
- --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
1278
- @supports (color: color-mix(in lab, red, red)) {
1279
- --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
1280
- }
918
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1281
919
  }
1282
920
  }
1283
921
  .focus\:outline-none {
@@ -1292,9 +930,9 @@
1292
930
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1293
931
  }
1294
932
  }
1295
- .focus-visible\:ring-sky-400 {
933
+ .focus-visible\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1296
934
  &:focus-visible {
1297
- --tw-ring-color: var(--color-sky-400);
935
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.6);
1298
936
  }
1299
937
  }
1300
938
  .focus-visible\:ring-offset-2 {
@@ -1355,6 +993,10 @@
1355
993
  :root {
1356
994
  --background: #ffffff;
1357
995
  --foreground: #171717;
996
+ --nc-accent-1: 56 189 248;
997
+ --nc-accent-2: 59 130 246;
998
+ --nc-accent-3: 99 102 241;
999
+ --nc-accent-soft: 224 242 254;
1358
1000
  }
1359
1001
  @media (prefers-color-scheme: dark) {
1360
1002
  :root {
@@ -1362,6 +1004,44 @@
1362
1004
  --foreground: #ededed;
1363
1005
  }
1364
1006
  }
1007
+ [data-nc-mode="light"] {
1008
+ --background: #ffffff;
1009
+ --foreground: #171717;
1010
+ }
1011
+ [data-nc-mode="dark"] {
1012
+ --background: #0a0a0a;
1013
+ --foreground: #ededed;
1014
+ }
1015
+ :root, [data-nc-theme="ocean"] {
1016
+ --nc-accent-1: 56 189 248;
1017
+ --nc-accent-2: 59 130 246;
1018
+ --nc-accent-3: 99 102 241;
1019
+ --nc-accent-soft: 224 242 254;
1020
+ }
1021
+ [data-nc-theme="aurora"] {
1022
+ --nc-accent-1: 52 211 153;
1023
+ --nc-accent-2: 45 212 191;
1024
+ --nc-accent-3: 34 211 238;
1025
+ --nc-accent-soft: 209 250 229;
1026
+ }
1027
+ [data-nc-theme="ember"] {
1028
+ --nc-accent-1: 251 146 60;
1029
+ --nc-accent-2: 249 115 22;
1030
+ --nc-accent-3: 244 63 94;
1031
+ --nc-accent-soft: 254 215 170;
1032
+ }
1033
+ [data-nc-theme="midnight"] {
1034
+ --nc-accent-1: 167 139 250;
1035
+ --nc-accent-2: 192 132 252;
1036
+ --nc-accent-3: 244 114 182;
1037
+ --nc-accent-soft: 237 233 254;
1038
+ }
1039
+ [data-nc-theme="cosmic"] {
1040
+ --nc-accent-1: 244 114 182;
1041
+ --nc-accent-2: 168 85 247;
1042
+ --nc-accent-3: 129 140 248;
1043
+ --nc-accent-soft: 251 207 232;
1044
+ }
1365
1045
  body {
1366
1046
  background: var(--background);
1367
1047
  color: var(--foreground);