@duskmoon-dev/core 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +330 -120
- package/dist/themes/moonlight.css +145 -60
- package/dist/themes/sunshine.css +144 -60
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -355,6 +355,47 @@ html {
|
|
|
355
355
|
}
|
|
356
356
|
|
|
357
357
|
|
|
358
|
+
/* Custom utilities */
|
|
359
|
+
/**
|
|
360
|
+
* Custom utility classes
|
|
361
|
+
* Extends Tailwind CSS v4 with additional utilities
|
|
362
|
+
*/
|
|
363
|
+
|
|
364
|
+
/* Responsive grid utilities with auto-fill/auto-fit */
|
|
365
|
+
@utility grid-cols-auto-fill-* {
|
|
366
|
+
grid-template-columns: repeat(auto-fill, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
@utility grid-cols-auto-fit-* {
|
|
370
|
+
grid-template-columns: repeat(auto-fit, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* Screen reader only utility - visually hidden but accessible */
|
|
374
|
+
.sr-only {
|
|
375
|
+
position: absolute;
|
|
376
|
+
width: 1px;
|
|
377
|
+
height: 1px;
|
|
378
|
+
padding: 0;
|
|
379
|
+
margin: -1px;
|
|
380
|
+
overflow: hidden;
|
|
381
|
+
clip: rect(0, 0, 0, 0);
|
|
382
|
+
white-space: nowrap;
|
|
383
|
+
border: 0;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Undo sr-only for focus states (useful for skip links) */
|
|
387
|
+
.not-sr-only {
|
|
388
|
+
position: static;
|
|
389
|
+
width: auto;
|
|
390
|
+
height: auto;
|
|
391
|
+
padding: 0;
|
|
392
|
+
margin: 0;
|
|
393
|
+
overflow: visible;
|
|
394
|
+
clip: auto;
|
|
395
|
+
white-space: normal;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
|
|
358
399
|
|
|
359
400
|
/* Built-in themes */
|
|
360
401
|
/**
|
|
@@ -376,22 +417,22 @@ html {
|
|
|
376
417
|
* ============================================ */
|
|
377
418
|
|
|
378
419
|
/* Primary Color Family - Warm Orange */
|
|
379
|
-
--color-primary: oklch(
|
|
380
|
-
--color-primary-content: oklch(
|
|
381
|
-
--color-primary-container: oklch(95% 0.
|
|
382
|
-
--color-on-primary-container: oklch(
|
|
420
|
+
--color-primary: oklch(95.86% 0.0693 95.91);
|
|
421
|
+
--color-primary-content: oklch(20% 0 0);
|
|
422
|
+
--color-primary-container: oklch(95% 0.035 95.91);
|
|
423
|
+
--color-on-primary-container: oklch(25% 0.03 95.91);
|
|
383
424
|
|
|
384
425
|
/* Secondary Color Family - Coral Pink */
|
|
385
|
-
--color-secondary: oklch(
|
|
386
|
-
--color-secondary-content: oklch(
|
|
387
|
-
--color-secondary-container: oklch(
|
|
388
|
-
--color-on-secondary-container: oklch(
|
|
426
|
+
--color-secondary: oklch(87.42% 0.143 87.01);
|
|
427
|
+
--color-secondary-content: oklch(27.42% 0.143 87.01);
|
|
428
|
+
--color-secondary-container: oklch(94% 0.05 87.01);
|
|
429
|
+
--color-on-secondary-container: oklch(25% 0.05 87.01);
|
|
389
430
|
|
|
390
431
|
/* Tertiary Color Family - Violet */
|
|
391
|
-
--color-tertiary: oklch(
|
|
392
|
-
--color-tertiary-content: oklch(
|
|
393
|
-
--color-tertiary-container: oklch(95% 0.
|
|
394
|
-
--color-on-tertiary-container: oklch(
|
|
432
|
+
--color-tertiary: oklch(80% 0.085 235);
|
|
433
|
+
--color-tertiary-content: oklch(18% 0.010 235);
|
|
434
|
+
--color-tertiary-container: oklch(95% 0.035 235);
|
|
435
|
+
--color-on-tertiary-container: oklch(22% 0.012 235);
|
|
395
436
|
|
|
396
437
|
/* ============================================
|
|
397
438
|
* SURFACE COLORS
|
|
@@ -413,26 +454,26 @@ html {
|
|
|
413
454
|
* ============================================ */
|
|
414
455
|
|
|
415
456
|
/* Info - Sky Blue */
|
|
416
|
-
--color-info: oklch(
|
|
417
|
-
--color-info-content: oklch(
|
|
457
|
+
--color-info: oklch(41.94% 0.114 254.39);
|
|
458
|
+
--color-info-content: oklch(91.94% 0.114 254.39);
|
|
418
459
|
--color-info-container: oklch(95% 0.03 235);
|
|
419
460
|
--color-on-info-container: oklch(35% 0.08 235);
|
|
420
461
|
|
|
421
462
|
/* Success - Green */
|
|
422
|
-
--color-success: oklch(
|
|
423
|
-
--color-success-content: oklch(
|
|
463
|
+
--color-success: oklch(67.21% 0.19 133.55);
|
|
464
|
+
--color-success-content: oklch(27.21% 0.19 133.55);
|
|
424
465
|
--color-success-container: oklch(93% 0.04 150);
|
|
425
466
|
--color-on-success-container: oklch(30% 0.08 150);
|
|
426
467
|
|
|
427
468
|
/* Warning - Amber */
|
|
428
|
-
--color-warning: oklch(
|
|
429
|
-
--color-warning-content: oklch(
|
|
469
|
+
--color-warning: oklch(68.19% 0.203 42.44);
|
|
470
|
+
--color-warning-content: oklch(18.19% 0.6 42);
|
|
430
471
|
--color-warning-container: oklch(93% 0.05 80);
|
|
431
472
|
--color-on-warning-container: oklch(38% 0.10 80);
|
|
432
473
|
|
|
433
474
|
/* Error - Red */
|
|
434
|
-
--color-error: oklch(
|
|
435
|
-
--color-error-content: oklch(
|
|
475
|
+
--color-error: oklch(61.17% 0.237 28.15);
|
|
476
|
+
--color-error-content: oklch(90.01% 0.153 84.78);
|
|
436
477
|
--color-error-container: oklch(93% 0.04 25);
|
|
437
478
|
--color-on-error-container: oklch(32% 0.10 25);
|
|
438
479
|
|
|
@@ -440,16 +481,16 @@ html {
|
|
|
440
481
|
* NEUTRAL COLORS (Base Scale)
|
|
441
482
|
* ============================================ */
|
|
442
483
|
|
|
443
|
-
--color-base-100: oklch(100% 0
|
|
444
|
-
--color-base-200: oklch(
|
|
445
|
-
--color-base-300: oklch(
|
|
446
|
-
--color-base-400: oklch(
|
|
447
|
-
--color-base-500: oklch(
|
|
448
|
-
--color-base-600: oklch(
|
|
449
|
-
--color-base-700: oklch(
|
|
450
|
-
--color-base-800: oklch(
|
|
451
|
-
--color-base-900: oklch(
|
|
452
|
-
--color-base-content: oklch(
|
|
484
|
+
--color-base-100: oklch(100% 0.1 255);
|
|
485
|
+
--color-base-200: oklch(85% 0.1 255);
|
|
486
|
+
--color-base-300: oklch(70% 0.1 255);
|
|
487
|
+
--color-base-400: oklch(55% 0.06 255);
|
|
488
|
+
--color-base-500: oklch(45% 0.05 255);
|
|
489
|
+
--color-base-600: oklch(35% 0.04 255);
|
|
490
|
+
--color-base-700: oklch(25% 0.03 255);
|
|
491
|
+
--color-base-800: oklch(18% 0.02 255);
|
|
492
|
+
--color-base-900: oklch(12% 0.01 255);
|
|
493
|
+
--color-base-content: oklch(10% 0 255);
|
|
453
494
|
|
|
454
495
|
/* ============================================
|
|
455
496
|
* OUTLINE COLORS
|
|
@@ -457,6 +498,55 @@ html {
|
|
|
457
498
|
|
|
458
499
|
--color-outline: oklch(75% 0.01 260);
|
|
459
500
|
--color-outline-variant: oklch(85% 0.01 260);
|
|
501
|
+
|
|
502
|
+
/* ============================================
|
|
503
|
+
* ACCENT COLORS
|
|
504
|
+
* ============================================ */
|
|
505
|
+
|
|
506
|
+
--color-accent: oklch(85.23% 0.14 327);
|
|
507
|
+
--color-accent-content: oklch(41% 0.112 45.904);
|
|
508
|
+
|
|
509
|
+
/* ============================================
|
|
510
|
+
* NEUTRAL COLORS
|
|
511
|
+
* ============================================ */
|
|
512
|
+
|
|
513
|
+
--color-neutral: oklch(0% 0 0);
|
|
514
|
+
--color-neutral-content: oklch(80% 0.1 50);
|
|
515
|
+
--color-neutral-variant: oklch(50% 0.02 260);
|
|
516
|
+
|
|
517
|
+
/* ============================================
|
|
518
|
+
* SHAPE & DEPTH
|
|
519
|
+
* ============================================ */
|
|
520
|
+
|
|
521
|
+
--radius-selector: 0rem;
|
|
522
|
+
--radius-field: 0.5rem;
|
|
523
|
+
--radius-box: 2rem;
|
|
524
|
+
--size-selector: 0.1875rem;
|
|
525
|
+
--size-field: 0.1875rem;
|
|
526
|
+
--border: 0.5px;
|
|
527
|
+
--depth: 1;
|
|
528
|
+
--noise: 1;
|
|
529
|
+
|
|
530
|
+
/* ============================================
|
|
531
|
+
* SURFACE VARIANT
|
|
532
|
+
* ============================================ */
|
|
533
|
+
|
|
534
|
+
--color-surface-variant: oklch(94% 0.02 85);
|
|
535
|
+
|
|
536
|
+
/* ============================================
|
|
537
|
+
* INVERSE COLORS
|
|
538
|
+
* ============================================ */
|
|
539
|
+
|
|
540
|
+
--color-inverse-surface: oklch(25% 0.02 260);
|
|
541
|
+
--color-inverse-on-surface: oklch(95% 0.01 260);
|
|
542
|
+
--color-inverse-primary: oklch(80% 0.14 55);
|
|
543
|
+
|
|
544
|
+
/* ============================================
|
|
545
|
+
* SHADOW & SCRIM
|
|
546
|
+
* ============================================ */
|
|
547
|
+
|
|
548
|
+
--color-shadow: oklch(0% 0 0);
|
|
549
|
+
--color-scrim: oklch(0% 0 0 / 50%);
|
|
460
550
|
}
|
|
461
551
|
|
|
462
552
|
/* Default theme - applies sunshine when no data-theme is set */
|
|
@@ -464,20 +554,20 @@ html {
|
|
|
464
554
|
color-scheme: light;
|
|
465
555
|
|
|
466
556
|
/* Brand Colors */
|
|
467
|
-
--color-primary: oklch(
|
|
468
|
-
--color-primary-content: oklch(
|
|
469
|
-
--color-primary-container: oklch(95% 0.
|
|
470
|
-
--color-on-primary-container: oklch(
|
|
557
|
+
--color-primary: oklch(95.86% 0.0693 95.91);
|
|
558
|
+
--color-primary-content: oklch(20% 0 0);
|
|
559
|
+
--color-primary-container: oklch(95% 0.035 95.91);
|
|
560
|
+
--color-on-primary-container: oklch(25% 0.03 95.91);
|
|
471
561
|
|
|
472
|
-
--color-secondary: oklch(
|
|
473
|
-
--color-secondary-content: oklch(
|
|
474
|
-
--color-secondary-container: oklch(
|
|
475
|
-
--color-on-secondary-container: oklch(
|
|
562
|
+
--color-secondary: oklch(87.42% 0.143 87.01);
|
|
563
|
+
--color-secondary-content: oklch(27.42% 0.143 87.01);
|
|
564
|
+
--color-secondary-container: oklch(94% 0.05 87.01);
|
|
565
|
+
--color-on-secondary-container: oklch(25% 0.05 87.01);
|
|
476
566
|
|
|
477
|
-
--color-tertiary: oklch(
|
|
478
|
-
--color-tertiary-content: oklch(
|
|
479
|
-
--color-tertiary-container: oklch(95% 0.
|
|
480
|
-
--color-on-tertiary-container: oklch(
|
|
567
|
+
--color-tertiary: oklch(80% 0.085 235);
|
|
568
|
+
--color-tertiary-content: oklch(18% 0.010 235);
|
|
569
|
+
--color-tertiary-container: oklch(95% 0.035 235);
|
|
570
|
+
--color-on-tertiary-container: oklch(22% 0.012 235);
|
|
481
571
|
|
|
482
572
|
/* Surface Colors */
|
|
483
573
|
--color-surface: oklch(100% 0 0);
|
|
@@ -492,41 +582,76 @@ html {
|
|
|
492
582
|
--color-on-surface-variant: oklch(50% 0.02 260);
|
|
493
583
|
|
|
494
584
|
/* Semantic Colors */
|
|
495
|
-
--color-info: oklch(
|
|
496
|
-
--color-info-content: oklch(
|
|
585
|
+
--color-info: oklch(41.94% 0.114 254.39);
|
|
586
|
+
--color-info-content: oklch(91.94% 0.114 254.39);
|
|
497
587
|
--color-info-container: oklch(95% 0.03 235);
|
|
498
588
|
--color-on-info-container: oklch(35% 0.08 235);
|
|
499
589
|
|
|
500
|
-
--color-success: oklch(
|
|
501
|
-
--color-success-content: oklch(
|
|
590
|
+
--color-success: oklch(67.21% 0.19 133.55);
|
|
591
|
+
--color-success-content: oklch(27.21% 0.19 133.55);
|
|
502
592
|
--color-success-container: oklch(93% 0.04 150);
|
|
503
593
|
--color-on-success-container: oklch(30% 0.08 150);
|
|
504
594
|
|
|
505
|
-
--color-warning: oklch(
|
|
506
|
-
--color-warning-content: oklch(
|
|
595
|
+
--color-warning: oklch(68.19% 0.203 42.44);
|
|
596
|
+
--color-warning-content: oklch(18.19% 0.6 42);
|
|
507
597
|
--color-warning-container: oklch(93% 0.05 80);
|
|
508
598
|
--color-on-warning-container: oklch(38% 0.10 80);
|
|
509
599
|
|
|
510
|
-
--color-error: oklch(
|
|
511
|
-
--color-error-content: oklch(
|
|
600
|
+
--color-error: oklch(61.17% 0.237 28.15);
|
|
601
|
+
--color-error-content: oklch(90.01% 0.153 84.78);
|
|
512
602
|
--color-error-container: oklch(93% 0.04 25);
|
|
513
603
|
--color-on-error-container: oklch(32% 0.10 25);
|
|
514
604
|
|
|
515
605
|
/* Neutral Colors */
|
|
516
|
-
--color-base-100: oklch(100% 0
|
|
517
|
-
--color-base-200: oklch(
|
|
518
|
-
--color-base-300: oklch(
|
|
519
|
-
--color-base-400: oklch(
|
|
520
|
-
--color-base-500: oklch(
|
|
521
|
-
--color-base-600: oklch(
|
|
522
|
-
--color-base-700: oklch(
|
|
523
|
-
--color-base-800: oklch(
|
|
524
|
-
--color-base-900: oklch(
|
|
525
|
-
--color-base-content: oklch(
|
|
606
|
+
--color-base-100: oklch(100% 0.1 255);
|
|
607
|
+
--color-base-200: oklch(85% 0.1 255);
|
|
608
|
+
--color-base-300: oklch(70% 0.1 255);
|
|
609
|
+
--color-base-400: oklch(55% 0.06 255);
|
|
610
|
+
--color-base-500: oklch(45% 0.05 255);
|
|
611
|
+
--color-base-600: oklch(35% 0.04 255);
|
|
612
|
+
--color-base-700: oklch(25% 0.03 255);
|
|
613
|
+
--color-base-800: oklch(18% 0.02 255);
|
|
614
|
+
--color-base-900: oklch(12% 0.01 255);
|
|
615
|
+
--color-base-content: oklch(10% 0 255);
|
|
526
616
|
|
|
527
617
|
/* Outline Colors */
|
|
528
618
|
--color-outline: oklch(75% 0.01 260);
|
|
529
619
|
--color-outline-variant: oklch(85% 0.01 260);
|
|
620
|
+
|
|
621
|
+
/* Accent Colors */
|
|
622
|
+
--color-accent: oklch(85.23% 0.14 327);
|
|
623
|
+
--color-accent-content: oklch(41% 0.112 45.904);
|
|
624
|
+
|
|
625
|
+
/* Neutral Colors */
|
|
626
|
+
--color-neutral: oklch(0% 0 0);
|
|
627
|
+
--color-neutral-content: oklch(80% 0.1 50);
|
|
628
|
+
--color-neutral-variant: oklch(50% 0.02 260);
|
|
629
|
+
|
|
630
|
+
/* ============================================
|
|
631
|
+
* SHAPE & DEPTH
|
|
632
|
+
* ============================================ */
|
|
633
|
+
|
|
634
|
+
--radius-selector: 0rem;
|
|
635
|
+
--radius-field: 0.5rem;
|
|
636
|
+
--radius-box: 2rem;
|
|
637
|
+
--size-selector: 0.1875rem;
|
|
638
|
+
--size-field: 0.1875rem;
|
|
639
|
+
--border: 0.5px;
|
|
640
|
+
--depth: 1;
|
|
641
|
+
--noise: 1;
|
|
642
|
+
|
|
643
|
+
/* Surface Variant */
|
|
644
|
+
--color-surface-variant: oklch(94% 0.02 85);
|
|
645
|
+
|
|
646
|
+
|
|
647
|
+
/* Inverse Colors */
|
|
648
|
+
--color-inverse-surface: oklch(25% 0.02 260);
|
|
649
|
+
--color-inverse-on-surface: oklch(95% 0.01 260);
|
|
650
|
+
--color-inverse-primary: oklch(80% 0.14 55);
|
|
651
|
+
|
|
652
|
+
/* Shadow & Scrim */
|
|
653
|
+
--color-shadow: oklch(0% 0 0);
|
|
654
|
+
--color-scrim: oklch(0% 0 0 / 50%);
|
|
530
655
|
}
|
|
531
656
|
|
|
532
657
|
/**
|
|
@@ -543,22 +668,22 @@ html {
|
|
|
543
668
|
* ============================================ */
|
|
544
669
|
|
|
545
670
|
/* Primary Color Family - Cool Blue */
|
|
546
|
-
--color-primary: oklch(
|
|
547
|
-
--color-primary-content: oklch(
|
|
548
|
-
--color-primary-container: oklch(
|
|
549
|
-
--color-on-primary-container: oklch(
|
|
671
|
+
--color-primary: oklch(85.45% 0 0);
|
|
672
|
+
--color-primary-content: oklch(14.94% 0.031 39.947);
|
|
673
|
+
--color-primary-container: oklch(25% 0.01 0);
|
|
674
|
+
--color-on-primary-container: oklch(85% 0.01 0);
|
|
550
675
|
|
|
551
676
|
/* Secondary Color Family - Soft Teal */
|
|
552
|
-
--color-secondary: oklch(
|
|
553
|
-
--color-secondary-content: oklch(
|
|
554
|
-
--color-secondary-container: oklch(
|
|
555
|
-
--color-on-secondary-container: oklch(
|
|
677
|
+
--color-secondary: oklch(83.33% 0.0981 73.78);
|
|
678
|
+
--color-secondary-content: oklch(14.507% 0.035 2.72);
|
|
679
|
+
--color-secondary-container: oklch(28% 0.03 73.78);
|
|
680
|
+
--color-on-secondary-container: oklch(88% 0.03 73.78);
|
|
556
681
|
|
|
557
682
|
/* Tertiary Color Family - Lavender */
|
|
558
|
-
--color-tertiary: oklch(72% 0.
|
|
559
|
-
--color-tertiary-content: oklch(
|
|
560
|
-
--color-tertiary-container: oklch(
|
|
561
|
-
--color-on-tertiary-container: oklch(88% 0.
|
|
683
|
+
--color-tertiary: oklch(72% 0.090 255);
|
|
684
|
+
--color-tertiary-content: oklch(14% 0.012 255);
|
|
685
|
+
--color-tertiary-container: oklch(28% 0.030 255);
|
|
686
|
+
--color-on-tertiary-container: oklch(88% 0.010 255);
|
|
562
687
|
|
|
563
688
|
/* ============================================
|
|
564
689
|
* SURFACE COLORS
|
|
@@ -580,26 +705,26 @@ html {
|
|
|
580
705
|
* ============================================ */
|
|
581
706
|
|
|
582
707
|
/* Info - Light Blue */
|
|
583
|
-
--color-info: oklch(
|
|
584
|
-
--color-info-content: oklch(
|
|
708
|
+
--color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
|
|
709
|
+
--color-info-content: oklch(17.111% 0.017 206.015);
|
|
585
710
|
--color-info-container: oklch(32% 0.06 235);
|
|
586
711
|
--color-on-info-container: oklch(88% 0.06 235);
|
|
587
712
|
|
|
588
713
|
/* Success - Mint Green */
|
|
589
|
-
--color-success: oklch(
|
|
590
|
-
--color-success-content: oklch(
|
|
714
|
+
--color-success: oklch(82.19% 0.0621 133.3);
|
|
715
|
+
--color-success-content: oklch(17.112% 0.017 144.778);
|
|
591
716
|
--color-success-container: oklch(30% 0.05 150);
|
|
592
717
|
--color-on-success-container: oklch(85% 0.06 150);
|
|
593
718
|
|
|
594
719
|
/* Warning - Warm Amber */
|
|
595
|
-
--color-warning: oklch(
|
|
596
|
-
--color-warning-content: oklch(
|
|
720
|
+
--color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
|
|
721
|
+
--color-warning-content: oklch(17.113% 0.016 74.427);
|
|
597
722
|
--color-warning-container: oklch(35% 0.06 80);
|
|
598
723
|
--color-on-warning-container: oklch(90% 0.06 80);
|
|
599
724
|
|
|
600
725
|
/* Error - Soft Red */
|
|
601
|
-
--color-error: oklch(
|
|
602
|
-
--color-error-content: oklch(
|
|
726
|
+
--color-error: oklch(46.38% 0.1898 29.17);
|
|
727
|
+
--color-error-content: oklch(86.38% 0.298 39.17);
|
|
603
728
|
--color-error-container: oklch(30% 0.08 25);
|
|
604
729
|
--color-on-error-container: oklch(88% 0.06 25);
|
|
605
730
|
|
|
@@ -607,16 +732,17 @@ html {
|
|
|
607
732
|
* NEUTRAL COLORS (Base Scale)
|
|
608
733
|
* ============================================ */
|
|
609
734
|
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
735
|
+
--color-base-100: oklch(22% 0.019 237.69);
|
|
736
|
+
--color-base-200: oklch(20% 0.019 237.69);
|
|
737
|
+
--color-base-300: oklch(18% 0.019 237.69);
|
|
738
|
+
--color-base-400: oklch(26% 0.019 237.69);
|
|
739
|
+
--color-base-500: oklch(32% 0.019 237.69);
|
|
740
|
+
--color-base-600: oklch(40% 0.018 237.69);
|
|
741
|
+
--color-base-700: oklch(55% 0.017 237.69);
|
|
742
|
+
--color-base-800: oklch(70% 0.016 237.69);
|
|
743
|
+
--color-base-900: oklch(85% 0.015 237.69);
|
|
744
|
+
--color-base-content: oklch(77.383% 0.043 245.096);
|
|
745
|
+
|
|
620
746
|
|
|
621
747
|
/* ============================================
|
|
622
748
|
* OUTLINE COLORS
|
|
@@ -624,6 +750,55 @@ html {
|
|
|
624
750
|
|
|
625
751
|
--color-outline: oklch(44% 0.01 260);
|
|
626
752
|
--color-outline-variant: oklch(35% 0.01 260);
|
|
753
|
+
|
|
754
|
+
/* ============================================
|
|
755
|
+
* ACCENT COLORS
|
|
756
|
+
* ============================================ */
|
|
757
|
+
|
|
758
|
+
--color-accent: oklch(75.65% 0.1303 335.51);
|
|
759
|
+
--color-accent-content: oklch(14.258% 0.033 299.844);
|
|
760
|
+
|
|
761
|
+
/* ============================================
|
|
762
|
+
* NEUTRAL COLORS
|
|
763
|
+
* ============================================ */
|
|
764
|
+
|
|
765
|
+
--color-neutral: oklch(23% 0 0);
|
|
766
|
+
--color-neutral-content: oklch(52.43% 0 0);
|
|
767
|
+
--color-neutral-variant: oklch(55% 0.01 260);
|
|
768
|
+
|
|
769
|
+
/* ============================================
|
|
770
|
+
* SHAPE & DEPTH
|
|
771
|
+
* ============================================ */
|
|
772
|
+
|
|
773
|
+
--radius-selector: 0rem;
|
|
774
|
+
--radius-field: 0.5rem;
|
|
775
|
+
--radius-box: 2rem;
|
|
776
|
+
--size-selector: 0.1875rem;
|
|
777
|
+
--size-field: 0.1875rem;
|
|
778
|
+
--border: 0.5px;
|
|
779
|
+
--depth: 1;
|
|
780
|
+
--noise: 1;
|
|
781
|
+
|
|
782
|
+
/* ============================================
|
|
783
|
+
* SURFACE VARIANT
|
|
784
|
+
* ============================================ */
|
|
785
|
+
|
|
786
|
+
--color-surface-variant: oklch(30% 0.02 260);
|
|
787
|
+
|
|
788
|
+
/* ============================================
|
|
789
|
+
* INVERSE COLORS
|
|
790
|
+
* ============================================ */
|
|
791
|
+
|
|
792
|
+
--color-inverse-surface: oklch(95% 0.01 260);
|
|
793
|
+
--color-inverse-on-surface: oklch(25% 0.02 260);
|
|
794
|
+
--color-inverse-primary: oklch(55% 0.16 255);
|
|
795
|
+
|
|
796
|
+
/* ============================================
|
|
797
|
+
* SHADOW & SCRIM
|
|
798
|
+
* ============================================ */
|
|
799
|
+
|
|
800
|
+
--color-shadow: oklch(0% 0 0);
|
|
801
|
+
--color-scrim: oklch(0% 0 0 / 60%);
|
|
627
802
|
}
|
|
628
803
|
|
|
629
804
|
/* System preference: prefers-color-scheme dark */
|
|
@@ -632,20 +807,20 @@ html {
|
|
|
632
807
|
color-scheme: dark;
|
|
633
808
|
|
|
634
809
|
/* Brand Colors */
|
|
635
|
-
--color-primary: oklch(
|
|
636
|
-
--color-primary-content: oklch(
|
|
637
|
-
--color-primary-container: oklch(
|
|
638
|
-
--color-on-primary-container: oklch(
|
|
810
|
+
--color-primary: oklch(85.45% 0 0);
|
|
811
|
+
--color-primary-content: oklch(14.94% 0.031 39.947);
|
|
812
|
+
--color-primary-container: oklch(25% 0.01 0);
|
|
813
|
+
--color-on-primary-container: oklch(85% 0.01 0);
|
|
639
814
|
|
|
640
|
-
--color-secondary: oklch(
|
|
641
|
-
--color-secondary-content: oklch(
|
|
642
|
-
--color-secondary-container: oklch(
|
|
643
|
-
--color-on-secondary-container: oklch(
|
|
815
|
+
--color-secondary: oklch(83.33% 0.0981 73.78);
|
|
816
|
+
--color-secondary-content: oklch(14.507% 0.035 2.72);
|
|
817
|
+
--color-secondary-container: oklch(28% 0.03 73.78);
|
|
818
|
+
--color-on-secondary-container: oklch(88% 0.03 73.78);
|
|
644
819
|
|
|
645
|
-
--color-tertiary: oklch(72% 0.
|
|
646
|
-
--color-tertiary-content: oklch(
|
|
647
|
-
--color-tertiary-container: oklch(
|
|
648
|
-
--color-on-tertiary-container: oklch(88% 0.
|
|
820
|
+
--color-tertiary: oklch(72% 0.090 255);
|
|
821
|
+
--color-tertiary-content: oklch(14% 0.012 255);
|
|
822
|
+
--color-tertiary-container: oklch(28% 0.030 255);
|
|
823
|
+
--color-on-tertiary-container: oklch(88% 0.010 255);
|
|
649
824
|
|
|
650
825
|
/* Surface Colors */
|
|
651
826
|
--color-surface: oklch(20% 0.02 260);
|
|
@@ -660,46 +835,81 @@ html {
|
|
|
660
835
|
--color-on-surface-variant: oklch(75% 0.01 260);
|
|
661
836
|
|
|
662
837
|
/* Semantic Colors */
|
|
663
|
-
--color-info: oklch(
|
|
664
|
-
--color-info-content: oklch(
|
|
838
|
+
--color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
|
|
839
|
+
--color-info-content: oklch(17.111% 0.017 206.015);
|
|
665
840
|
--color-info-container: oklch(32% 0.06 235);
|
|
666
841
|
--color-on-info-container: oklch(88% 0.06 235);
|
|
667
842
|
|
|
668
|
-
--color-success: oklch(
|
|
669
|
-
--color-success-content: oklch(
|
|
843
|
+
--color-success: oklch(82.19% 0.0621 133.3);
|
|
844
|
+
--color-success-content: oklch(17.112% 0.017 144.778);
|
|
670
845
|
--color-success-container: oklch(30% 0.05 150);
|
|
671
846
|
--color-on-success-container: oklch(85% 0.06 150);
|
|
672
847
|
|
|
673
|
-
--color-warning: oklch(
|
|
674
|
-
--color-warning-content: oklch(
|
|
848
|
+
--color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
|
|
849
|
+
--color-warning-content: oklch(17.113% 0.016 74.427);
|
|
675
850
|
--color-warning-container: oklch(35% 0.06 80);
|
|
676
851
|
--color-on-warning-container: oklch(90% 0.06 80);
|
|
677
852
|
|
|
678
|
-
--color-error: oklch(
|
|
679
|
-
--color-error-content: oklch(
|
|
853
|
+
--color-error: oklch(46.38% 0.1898 29.17);
|
|
854
|
+
--color-error-content: oklch(86.38% 0.298 39.17);
|
|
680
855
|
--color-error-container: oklch(30% 0.08 25);
|
|
681
856
|
--color-on-error-container: oklch(88% 0.06 25);
|
|
682
857
|
|
|
683
858
|
/* Neutral Colors */
|
|
684
|
-
--color-base-100: oklch(
|
|
685
|
-
--color-base-200: oklch(
|
|
686
|
-
--color-base-300: oklch(
|
|
687
|
-
--color-base-400: oklch(
|
|
688
|
-
--color-base-500: oklch(
|
|
689
|
-
--color-base-600: oklch(
|
|
690
|
-
--color-base-700: oklch(
|
|
691
|
-
--color-base-800: oklch(
|
|
692
|
-
--color-base-900: oklch(
|
|
693
|
-
--color-base-content: oklch(
|
|
859
|
+
--color-base-100: oklch(22% 0.019 237.69);
|
|
860
|
+
--color-base-200: oklch(20% 0.019 237.69);
|
|
861
|
+
--color-base-300: oklch(18% 0.019 237.69);
|
|
862
|
+
--color-base-400: oklch(26% 0.019 237.69);
|
|
863
|
+
--color-base-500: oklch(32% 0.019 237.69);
|
|
864
|
+
--color-base-600: oklch(40% 0.018 237.69);
|
|
865
|
+
--color-base-700: oklch(55% 0.017 237.69);
|
|
866
|
+
--color-base-800: oklch(70% 0.016 237.69);
|
|
867
|
+
--color-base-900: oklch(85% 0.015 237.69);
|
|
868
|
+
--color-base-content: oklch(77.383% 0.043 245.096);
|
|
694
869
|
|
|
695
870
|
/* Outline Colors */
|
|
696
871
|
--color-outline: oklch(44% 0.01 260);
|
|
697
872
|
--color-outline-variant: oklch(35% 0.01 260);
|
|
873
|
+
|
|
874
|
+
/* Accent Colors */
|
|
875
|
+
--color-accent: oklch(75.65% 0.1303 335.51);
|
|
876
|
+
--color-accent-content: oklch(14.258% 0.033 299.844);
|
|
877
|
+
|
|
878
|
+
/* Neutral Colors */
|
|
879
|
+
--color-neutral: oklch(23% 0 0);
|
|
880
|
+
--color-neutral-content: oklch(52.43% 0 0);
|
|
881
|
+
--color-neutral-variant: oklch(55% 0.01 260);
|
|
882
|
+
|
|
883
|
+
/* ============================================
|
|
884
|
+
* SHAPE & DEPTH
|
|
885
|
+
* ============================================ */
|
|
886
|
+
|
|
887
|
+
--radius-selector: 0rem;
|
|
888
|
+
--radius-field: 0.5rem;
|
|
889
|
+
--radius-box: 2rem;
|
|
890
|
+
--size-selector: 0.1875rem;
|
|
891
|
+
--size-field: 0.1875rem;
|
|
892
|
+
--border: 0.5px;
|
|
893
|
+
--depth: 1;
|
|
894
|
+
--noise: 1;
|
|
895
|
+
|
|
896
|
+
/* Surface Variant */
|
|
897
|
+
--color-surface-variant: oklch(30% 0.02 260);
|
|
898
|
+
|
|
899
|
+
/* Inverse Colors */
|
|
900
|
+
--color-inverse-surface: oklch(95% 0.01 260);
|
|
901
|
+
--color-inverse-on-surface: oklch(25% 0.02 260);
|
|
902
|
+
--color-inverse-primary: oklch(55% 0.16 255);
|
|
903
|
+
|
|
904
|
+
/* Shadow & Scrim */
|
|
905
|
+
--color-shadow: oklch(0% 0 0);
|
|
906
|
+
--color-scrim: oklch(0% 0 0 / 60%);
|
|
698
907
|
}
|
|
699
908
|
}
|
|
700
909
|
|
|
701
910
|
|
|
702
911
|
|
|
912
|
+
|
|
703
913
|
/* Component styles */
|
|
704
914
|
/**
|
|
705
915
|
* DuskMoonUI Components
|
|
@@ -12,22 +12,22 @@
|
|
|
12
12
|
* ============================================ */
|
|
13
13
|
|
|
14
14
|
/* Primary Color Family - Cool Blue */
|
|
15
|
-
--color-primary: oklch(
|
|
16
|
-
--color-primary-content: oklch(
|
|
17
|
-
--color-primary-container: oklch(
|
|
18
|
-
--color-on-primary-container: oklch(
|
|
15
|
+
--color-primary: oklch(85.45% 0 0);
|
|
16
|
+
--color-primary-content: oklch(14.94% 0.031 39.947);
|
|
17
|
+
--color-primary-container: oklch(25% 0.01 0);
|
|
18
|
+
--color-on-primary-container: oklch(85% 0.01 0);
|
|
19
19
|
|
|
20
20
|
/* Secondary Color Family - Soft Teal */
|
|
21
|
-
--color-secondary: oklch(
|
|
22
|
-
--color-secondary-content: oklch(
|
|
23
|
-
--color-secondary-container: oklch(
|
|
24
|
-
--color-on-secondary-container: oklch(
|
|
21
|
+
--color-secondary: oklch(83.33% 0.0981 73.78);
|
|
22
|
+
--color-secondary-content: oklch(14.507% 0.035 2.72);
|
|
23
|
+
--color-secondary-container: oklch(28% 0.03 73.78);
|
|
24
|
+
--color-on-secondary-container: oklch(88% 0.03 73.78);
|
|
25
25
|
|
|
26
26
|
/* Tertiary Color Family - Lavender */
|
|
27
|
-
--color-tertiary: oklch(72% 0.
|
|
28
|
-
--color-tertiary-content: oklch(
|
|
29
|
-
--color-tertiary-container: oklch(
|
|
30
|
-
--color-on-tertiary-container: oklch(88% 0.
|
|
27
|
+
--color-tertiary: oklch(72% 0.090 255);
|
|
28
|
+
--color-tertiary-content: oklch(14% 0.012 255);
|
|
29
|
+
--color-tertiary-container: oklch(28% 0.030 255);
|
|
30
|
+
--color-on-tertiary-container: oklch(88% 0.010 255);
|
|
31
31
|
|
|
32
32
|
/* ============================================
|
|
33
33
|
* SURFACE COLORS
|
|
@@ -49,26 +49,26 @@
|
|
|
49
49
|
* ============================================ */
|
|
50
50
|
|
|
51
51
|
/* Info - Light Blue */
|
|
52
|
-
--color-info: oklch(
|
|
53
|
-
--color-info-content: oklch(
|
|
52
|
+
--color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
|
|
53
|
+
--color-info-content: oklch(17.111% 0.017 206.015);
|
|
54
54
|
--color-info-container: oklch(32% 0.06 235);
|
|
55
55
|
--color-on-info-container: oklch(88% 0.06 235);
|
|
56
56
|
|
|
57
57
|
/* Success - Mint Green */
|
|
58
|
-
--color-success: oklch(
|
|
59
|
-
--color-success-content: oklch(
|
|
58
|
+
--color-success: oklch(82.19% 0.0621 133.3);
|
|
59
|
+
--color-success-content: oklch(17.112% 0.017 144.778);
|
|
60
60
|
--color-success-container: oklch(30% 0.05 150);
|
|
61
61
|
--color-on-success-container: oklch(85% 0.06 150);
|
|
62
62
|
|
|
63
63
|
/* Warning - Warm Amber */
|
|
64
|
-
--color-warning: oklch(
|
|
65
|
-
--color-warning-content: oklch(
|
|
64
|
+
--color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
|
|
65
|
+
--color-warning-content: oklch(17.113% 0.016 74.427);
|
|
66
66
|
--color-warning-container: oklch(35% 0.06 80);
|
|
67
67
|
--color-on-warning-container: oklch(90% 0.06 80);
|
|
68
68
|
|
|
69
69
|
/* Error - Soft Red */
|
|
70
|
-
--color-error: oklch(
|
|
71
|
-
--color-error-content: oklch(
|
|
70
|
+
--color-error: oklch(46.38% 0.1898 29.17);
|
|
71
|
+
--color-error-content: oklch(86.38% 0.298 39.17);
|
|
72
72
|
--color-error-container: oklch(30% 0.08 25);
|
|
73
73
|
--color-on-error-container: oklch(88% 0.06 25);
|
|
74
74
|
|
|
@@ -76,16 +76,17 @@
|
|
|
76
76
|
* NEUTRAL COLORS (Base Scale)
|
|
77
77
|
* ============================================ */
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
79
|
+
--color-base-100: oklch(22% 0.019 237.69);
|
|
80
|
+
--color-base-200: oklch(20% 0.019 237.69);
|
|
81
|
+
--color-base-300: oklch(18% 0.019 237.69);
|
|
82
|
+
--color-base-400: oklch(26% 0.019 237.69);
|
|
83
|
+
--color-base-500: oklch(32% 0.019 237.69);
|
|
84
|
+
--color-base-600: oklch(40% 0.018 237.69);
|
|
85
|
+
--color-base-700: oklch(55% 0.017 237.69);
|
|
86
|
+
--color-base-800: oklch(70% 0.016 237.69);
|
|
87
|
+
--color-base-900: oklch(85% 0.015 237.69);
|
|
88
|
+
--color-base-content: oklch(77.383% 0.043 245.096);
|
|
89
|
+
|
|
89
90
|
|
|
90
91
|
/* ============================================
|
|
91
92
|
* OUTLINE COLORS
|
|
@@ -93,6 +94,55 @@
|
|
|
93
94
|
|
|
94
95
|
--color-outline: oklch(44% 0.01 260);
|
|
95
96
|
--color-outline-variant: oklch(35% 0.01 260);
|
|
97
|
+
|
|
98
|
+
/* ============================================
|
|
99
|
+
* ACCENT COLORS
|
|
100
|
+
* ============================================ */
|
|
101
|
+
|
|
102
|
+
--color-accent: oklch(75.65% 0.1303 335.51);
|
|
103
|
+
--color-accent-content: oklch(14.258% 0.033 299.844);
|
|
104
|
+
|
|
105
|
+
/* ============================================
|
|
106
|
+
* NEUTRAL COLORS
|
|
107
|
+
* ============================================ */
|
|
108
|
+
|
|
109
|
+
--color-neutral: oklch(23% 0 0);
|
|
110
|
+
--color-neutral-content: oklch(52.43% 0 0);
|
|
111
|
+
--color-neutral-variant: oklch(55% 0.01 260);
|
|
112
|
+
|
|
113
|
+
/* ============================================
|
|
114
|
+
* SHAPE & DEPTH
|
|
115
|
+
* ============================================ */
|
|
116
|
+
|
|
117
|
+
--radius-selector: 0rem;
|
|
118
|
+
--radius-field: 0.5rem;
|
|
119
|
+
--radius-box: 2rem;
|
|
120
|
+
--size-selector: 0.1875rem;
|
|
121
|
+
--size-field: 0.1875rem;
|
|
122
|
+
--border: 0.5px;
|
|
123
|
+
--depth: 1;
|
|
124
|
+
--noise: 1;
|
|
125
|
+
|
|
126
|
+
/* ============================================
|
|
127
|
+
* SURFACE VARIANT
|
|
128
|
+
* ============================================ */
|
|
129
|
+
|
|
130
|
+
--color-surface-variant: oklch(30% 0.02 260);
|
|
131
|
+
|
|
132
|
+
/* ============================================
|
|
133
|
+
* INVERSE COLORS
|
|
134
|
+
* ============================================ */
|
|
135
|
+
|
|
136
|
+
--color-inverse-surface: oklch(95% 0.01 260);
|
|
137
|
+
--color-inverse-on-surface: oklch(25% 0.02 260);
|
|
138
|
+
--color-inverse-primary: oklch(55% 0.16 255);
|
|
139
|
+
|
|
140
|
+
/* ============================================
|
|
141
|
+
* SHADOW & SCRIM
|
|
142
|
+
* ============================================ */
|
|
143
|
+
|
|
144
|
+
--color-shadow: oklch(0% 0 0);
|
|
145
|
+
--color-scrim: oklch(0% 0 0 / 60%);
|
|
96
146
|
}
|
|
97
147
|
|
|
98
148
|
/* System preference: prefers-color-scheme dark */
|
|
@@ -101,20 +151,20 @@
|
|
|
101
151
|
color-scheme: dark;
|
|
102
152
|
|
|
103
153
|
/* Brand Colors */
|
|
104
|
-
--color-primary: oklch(
|
|
105
|
-
--color-primary-content: oklch(
|
|
106
|
-
--color-primary-container: oklch(
|
|
107
|
-
--color-on-primary-container: oklch(
|
|
154
|
+
--color-primary: oklch(85.45% 0 0);
|
|
155
|
+
--color-primary-content: oklch(14.94% 0.031 39.947);
|
|
156
|
+
--color-primary-container: oklch(25% 0.01 0);
|
|
157
|
+
--color-on-primary-container: oklch(85% 0.01 0);
|
|
108
158
|
|
|
109
|
-
--color-secondary: oklch(
|
|
110
|
-
--color-secondary-content: oklch(
|
|
111
|
-
--color-secondary-container: oklch(
|
|
112
|
-
--color-on-secondary-container: oklch(
|
|
159
|
+
--color-secondary: oklch(83.33% 0.0981 73.78);
|
|
160
|
+
--color-secondary-content: oklch(14.507% 0.035 2.72);
|
|
161
|
+
--color-secondary-container: oklch(28% 0.03 73.78);
|
|
162
|
+
--color-on-secondary-container: oklch(88% 0.03 73.78);
|
|
113
163
|
|
|
114
|
-
--color-tertiary: oklch(72% 0.
|
|
115
|
-
--color-tertiary-content: oklch(
|
|
116
|
-
--color-tertiary-container: oklch(
|
|
117
|
-
--color-on-tertiary-container: oklch(88% 0.
|
|
164
|
+
--color-tertiary: oklch(72% 0.090 255);
|
|
165
|
+
--color-tertiary-content: oklch(14% 0.012 255);
|
|
166
|
+
--color-tertiary-container: oklch(28% 0.030 255);
|
|
167
|
+
--color-on-tertiary-container: oklch(88% 0.010 255);
|
|
118
168
|
|
|
119
169
|
/* Surface Colors */
|
|
120
170
|
--color-surface: oklch(20% 0.02 260);
|
|
@@ -129,40 +179,75 @@
|
|
|
129
179
|
--color-on-surface-variant: oklch(75% 0.01 260);
|
|
130
180
|
|
|
131
181
|
/* Semantic Colors */
|
|
132
|
-
--color-info: oklch(
|
|
133
|
-
--color-info-content: oklch(
|
|
182
|
+
--color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
|
|
183
|
+
--color-info-content: oklch(17.111% 0.017 206.015);
|
|
134
184
|
--color-info-container: oklch(32% 0.06 235);
|
|
135
185
|
--color-on-info-container: oklch(88% 0.06 235);
|
|
136
186
|
|
|
137
|
-
--color-success: oklch(
|
|
138
|
-
--color-success-content: oklch(
|
|
187
|
+
--color-success: oklch(82.19% 0.0621 133.3);
|
|
188
|
+
--color-success-content: oklch(17.112% 0.017 144.778);
|
|
139
189
|
--color-success-container: oklch(30% 0.05 150);
|
|
140
190
|
--color-on-success-container: oklch(85% 0.06 150);
|
|
141
191
|
|
|
142
|
-
--color-warning: oklch(
|
|
143
|
-
--color-warning-content: oklch(
|
|
192
|
+
--color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
|
|
193
|
+
--color-warning-content: oklch(17.113% 0.016 74.427);
|
|
144
194
|
--color-warning-container: oklch(35% 0.06 80);
|
|
145
195
|
--color-on-warning-container: oklch(90% 0.06 80);
|
|
146
196
|
|
|
147
|
-
--color-error: oklch(
|
|
148
|
-
--color-error-content: oklch(
|
|
197
|
+
--color-error: oklch(46.38% 0.1898 29.17);
|
|
198
|
+
--color-error-content: oklch(86.38% 0.298 39.17);
|
|
149
199
|
--color-error-container: oklch(30% 0.08 25);
|
|
150
200
|
--color-on-error-container: oklch(88% 0.06 25);
|
|
151
201
|
|
|
152
202
|
/* Neutral Colors */
|
|
153
|
-
--color-base-100: oklch(
|
|
154
|
-
--color-base-200: oklch(
|
|
155
|
-
--color-base-300: oklch(
|
|
156
|
-
--color-base-400: oklch(
|
|
157
|
-
--color-base-500: oklch(
|
|
158
|
-
--color-base-600: oklch(
|
|
159
|
-
--color-base-700: oklch(
|
|
160
|
-
--color-base-800: oklch(
|
|
161
|
-
--color-base-900: oklch(
|
|
162
|
-
--color-base-content: oklch(
|
|
203
|
+
--color-base-100: oklch(22% 0.019 237.69);
|
|
204
|
+
--color-base-200: oklch(20% 0.019 237.69);
|
|
205
|
+
--color-base-300: oklch(18% 0.019 237.69);
|
|
206
|
+
--color-base-400: oklch(26% 0.019 237.69);
|
|
207
|
+
--color-base-500: oklch(32% 0.019 237.69);
|
|
208
|
+
--color-base-600: oklch(40% 0.018 237.69);
|
|
209
|
+
--color-base-700: oklch(55% 0.017 237.69);
|
|
210
|
+
--color-base-800: oklch(70% 0.016 237.69);
|
|
211
|
+
--color-base-900: oklch(85% 0.015 237.69);
|
|
212
|
+
--color-base-content: oklch(77.383% 0.043 245.096);
|
|
163
213
|
|
|
164
214
|
/* Outline Colors */
|
|
165
215
|
--color-outline: oklch(44% 0.01 260);
|
|
166
216
|
--color-outline-variant: oklch(35% 0.01 260);
|
|
217
|
+
|
|
218
|
+
/* Accent Colors */
|
|
219
|
+
--color-accent: oklch(75.65% 0.1303 335.51);
|
|
220
|
+
--color-accent-content: oklch(14.258% 0.033 299.844);
|
|
221
|
+
|
|
222
|
+
/* Neutral Colors */
|
|
223
|
+
--color-neutral: oklch(23% 0 0);
|
|
224
|
+
--color-neutral-content: oklch(52.43% 0 0);
|
|
225
|
+
--color-neutral-variant: oklch(55% 0.01 260);
|
|
226
|
+
|
|
227
|
+
/* ============================================
|
|
228
|
+
* SHAPE & DEPTH
|
|
229
|
+
* ============================================ */
|
|
230
|
+
|
|
231
|
+
--radius-selector: 0rem;
|
|
232
|
+
--radius-field: 0.5rem;
|
|
233
|
+
--radius-box: 2rem;
|
|
234
|
+
--size-selector: 0.1875rem;
|
|
235
|
+
--size-field: 0.1875rem;
|
|
236
|
+
--border: 0.5px;
|
|
237
|
+
--depth: 1;
|
|
238
|
+
--noise: 1;
|
|
239
|
+
|
|
240
|
+
/* Surface Variant */
|
|
241
|
+
--color-surface-variant: oklch(30% 0.02 260);
|
|
242
|
+
|
|
243
|
+
/* Inverse Colors */
|
|
244
|
+
--color-inverse-surface: oklch(95% 0.01 260);
|
|
245
|
+
--color-inverse-on-surface: oklch(25% 0.02 260);
|
|
246
|
+
--color-inverse-primary: oklch(55% 0.16 255);
|
|
247
|
+
|
|
248
|
+
/* Shadow & Scrim */
|
|
249
|
+
--color-shadow: oklch(0% 0 0);
|
|
250
|
+
--color-scrim: oklch(0% 0 0 / 60%);
|
|
167
251
|
}
|
|
168
252
|
}
|
|
253
|
+
|
package/dist/themes/sunshine.css
CHANGED
|
@@ -12,22 +12,22 @@
|
|
|
12
12
|
* ============================================ */
|
|
13
13
|
|
|
14
14
|
/* Primary Color Family - Warm Orange */
|
|
15
|
-
--color-primary: oklch(
|
|
16
|
-
--color-primary-content: oklch(
|
|
17
|
-
--color-primary-container: oklch(95% 0.
|
|
18
|
-
--color-on-primary-container: oklch(
|
|
15
|
+
--color-primary: oklch(95.86% 0.0693 95.91);
|
|
16
|
+
--color-primary-content: oklch(20% 0 0);
|
|
17
|
+
--color-primary-container: oklch(95% 0.035 95.91);
|
|
18
|
+
--color-on-primary-container: oklch(25% 0.03 95.91);
|
|
19
19
|
|
|
20
20
|
/* Secondary Color Family - Coral Pink */
|
|
21
|
-
--color-secondary: oklch(
|
|
22
|
-
--color-secondary-content: oklch(
|
|
23
|
-
--color-secondary-container: oklch(
|
|
24
|
-
--color-on-secondary-container: oklch(
|
|
21
|
+
--color-secondary: oklch(87.42% 0.143 87.01);
|
|
22
|
+
--color-secondary-content: oklch(27.42% 0.143 87.01);
|
|
23
|
+
--color-secondary-container: oklch(94% 0.05 87.01);
|
|
24
|
+
--color-on-secondary-container: oklch(25% 0.05 87.01);
|
|
25
25
|
|
|
26
26
|
/* Tertiary Color Family - Violet */
|
|
27
|
-
--color-tertiary: oklch(
|
|
28
|
-
--color-tertiary-content: oklch(
|
|
29
|
-
--color-tertiary-container: oklch(95% 0.
|
|
30
|
-
--color-on-tertiary-container: oklch(
|
|
27
|
+
--color-tertiary: oklch(80% 0.085 235);
|
|
28
|
+
--color-tertiary-content: oklch(18% 0.010 235);
|
|
29
|
+
--color-tertiary-container: oklch(95% 0.035 235);
|
|
30
|
+
--color-on-tertiary-container: oklch(22% 0.012 235);
|
|
31
31
|
|
|
32
32
|
/* ============================================
|
|
33
33
|
* SURFACE COLORS
|
|
@@ -49,26 +49,26 @@
|
|
|
49
49
|
* ============================================ */
|
|
50
50
|
|
|
51
51
|
/* Info - Sky Blue */
|
|
52
|
-
--color-info: oklch(
|
|
53
|
-
--color-info-content: oklch(
|
|
52
|
+
--color-info: oklch(41.94% 0.114 254.39);
|
|
53
|
+
--color-info-content: oklch(91.94% 0.114 254.39);
|
|
54
54
|
--color-info-container: oklch(95% 0.03 235);
|
|
55
55
|
--color-on-info-container: oklch(35% 0.08 235);
|
|
56
56
|
|
|
57
57
|
/* Success - Green */
|
|
58
|
-
--color-success: oklch(
|
|
59
|
-
--color-success-content: oklch(
|
|
58
|
+
--color-success: oklch(67.21% 0.19 133.55);
|
|
59
|
+
--color-success-content: oklch(27.21% 0.19 133.55);
|
|
60
60
|
--color-success-container: oklch(93% 0.04 150);
|
|
61
61
|
--color-on-success-container: oklch(30% 0.08 150);
|
|
62
62
|
|
|
63
63
|
/* Warning - Amber */
|
|
64
|
-
--color-warning: oklch(
|
|
65
|
-
--color-warning-content: oklch(
|
|
64
|
+
--color-warning: oklch(68.19% 0.203 42.44);
|
|
65
|
+
--color-warning-content: oklch(18.19% 0.6 42);
|
|
66
66
|
--color-warning-container: oklch(93% 0.05 80);
|
|
67
67
|
--color-on-warning-container: oklch(38% 0.10 80);
|
|
68
68
|
|
|
69
69
|
/* Error - Red */
|
|
70
|
-
--color-error: oklch(
|
|
71
|
-
--color-error-content: oklch(
|
|
70
|
+
--color-error: oklch(61.17% 0.237 28.15);
|
|
71
|
+
--color-error-content: oklch(90.01% 0.153 84.78);
|
|
72
72
|
--color-error-container: oklch(93% 0.04 25);
|
|
73
73
|
--color-on-error-container: oklch(32% 0.10 25);
|
|
74
74
|
|
|
@@ -76,16 +76,16 @@
|
|
|
76
76
|
* NEUTRAL COLORS (Base Scale)
|
|
77
77
|
* ============================================ */
|
|
78
78
|
|
|
79
|
-
--color-base-100: oklch(100% 0
|
|
80
|
-
--color-base-200: oklch(
|
|
81
|
-
--color-base-300: oklch(
|
|
82
|
-
--color-base-400: oklch(
|
|
83
|
-
--color-base-500: oklch(
|
|
84
|
-
--color-base-600: oklch(
|
|
85
|
-
--color-base-700: oklch(
|
|
86
|
-
--color-base-800: oklch(
|
|
87
|
-
--color-base-900: oklch(
|
|
88
|
-
--color-base-content: oklch(
|
|
79
|
+
--color-base-100: oklch(100% 0.1 255);
|
|
80
|
+
--color-base-200: oklch(85% 0.1 255);
|
|
81
|
+
--color-base-300: oklch(70% 0.1 255);
|
|
82
|
+
--color-base-400: oklch(55% 0.06 255);
|
|
83
|
+
--color-base-500: oklch(45% 0.05 255);
|
|
84
|
+
--color-base-600: oklch(35% 0.04 255);
|
|
85
|
+
--color-base-700: oklch(25% 0.03 255);
|
|
86
|
+
--color-base-800: oklch(18% 0.02 255);
|
|
87
|
+
--color-base-900: oklch(12% 0.01 255);
|
|
88
|
+
--color-base-content: oklch(10% 0 255);
|
|
89
89
|
|
|
90
90
|
/* ============================================
|
|
91
91
|
* OUTLINE COLORS
|
|
@@ -93,6 +93,55 @@
|
|
|
93
93
|
|
|
94
94
|
--color-outline: oklch(75% 0.01 260);
|
|
95
95
|
--color-outline-variant: oklch(85% 0.01 260);
|
|
96
|
+
|
|
97
|
+
/* ============================================
|
|
98
|
+
* ACCENT COLORS
|
|
99
|
+
* ============================================ */
|
|
100
|
+
|
|
101
|
+
--color-accent: oklch(85.23% 0.14 327);
|
|
102
|
+
--color-accent-content: oklch(41% 0.112 45.904);
|
|
103
|
+
|
|
104
|
+
/* ============================================
|
|
105
|
+
* NEUTRAL COLORS
|
|
106
|
+
* ============================================ */
|
|
107
|
+
|
|
108
|
+
--color-neutral: oklch(0% 0 0);
|
|
109
|
+
--color-neutral-content: oklch(80% 0.1 50);
|
|
110
|
+
--color-neutral-variant: oklch(50% 0.02 260);
|
|
111
|
+
|
|
112
|
+
/* ============================================
|
|
113
|
+
* SHAPE & DEPTH
|
|
114
|
+
* ============================================ */
|
|
115
|
+
|
|
116
|
+
--radius-selector: 0rem;
|
|
117
|
+
--radius-field: 0.5rem;
|
|
118
|
+
--radius-box: 2rem;
|
|
119
|
+
--size-selector: 0.1875rem;
|
|
120
|
+
--size-field: 0.1875rem;
|
|
121
|
+
--border: 0.5px;
|
|
122
|
+
--depth: 1;
|
|
123
|
+
--noise: 1;
|
|
124
|
+
|
|
125
|
+
/* ============================================
|
|
126
|
+
* SURFACE VARIANT
|
|
127
|
+
* ============================================ */
|
|
128
|
+
|
|
129
|
+
--color-surface-variant: oklch(94% 0.02 85);
|
|
130
|
+
|
|
131
|
+
/* ============================================
|
|
132
|
+
* INVERSE COLORS
|
|
133
|
+
* ============================================ */
|
|
134
|
+
|
|
135
|
+
--color-inverse-surface: oklch(25% 0.02 260);
|
|
136
|
+
--color-inverse-on-surface: oklch(95% 0.01 260);
|
|
137
|
+
--color-inverse-primary: oklch(80% 0.14 55);
|
|
138
|
+
|
|
139
|
+
/* ============================================
|
|
140
|
+
* SHADOW & SCRIM
|
|
141
|
+
* ============================================ */
|
|
142
|
+
|
|
143
|
+
--color-shadow: oklch(0% 0 0);
|
|
144
|
+
--color-scrim: oklch(0% 0 0 / 50%);
|
|
96
145
|
}
|
|
97
146
|
|
|
98
147
|
/* Default theme - applies sunshine when no data-theme is set */
|
|
@@ -100,20 +149,20 @@
|
|
|
100
149
|
color-scheme: light;
|
|
101
150
|
|
|
102
151
|
/* Brand Colors */
|
|
103
|
-
--color-primary: oklch(
|
|
104
|
-
--color-primary-content: oklch(
|
|
105
|
-
--color-primary-container: oklch(95% 0.
|
|
106
|
-
--color-on-primary-container: oklch(
|
|
152
|
+
--color-primary: oklch(95.86% 0.0693 95.91);
|
|
153
|
+
--color-primary-content: oklch(20% 0 0);
|
|
154
|
+
--color-primary-container: oklch(95% 0.035 95.91);
|
|
155
|
+
--color-on-primary-container: oklch(25% 0.03 95.91);
|
|
107
156
|
|
|
108
|
-
--color-secondary: oklch(
|
|
109
|
-
--color-secondary-content: oklch(
|
|
110
|
-
--color-secondary-container: oklch(
|
|
111
|
-
--color-on-secondary-container: oklch(
|
|
157
|
+
--color-secondary: oklch(87.42% 0.143 87.01);
|
|
158
|
+
--color-secondary-content: oklch(27.42% 0.143 87.01);
|
|
159
|
+
--color-secondary-container: oklch(94% 0.05 87.01);
|
|
160
|
+
--color-on-secondary-container: oklch(25% 0.05 87.01);
|
|
112
161
|
|
|
113
|
-
--color-tertiary: oklch(
|
|
114
|
-
--color-tertiary-content: oklch(
|
|
115
|
-
--color-tertiary-container: oklch(95% 0.
|
|
116
|
-
--color-on-tertiary-container: oklch(
|
|
162
|
+
--color-tertiary: oklch(80% 0.085 235);
|
|
163
|
+
--color-tertiary-content: oklch(18% 0.010 235);
|
|
164
|
+
--color-tertiary-container: oklch(95% 0.035 235);
|
|
165
|
+
--color-on-tertiary-container: oklch(22% 0.012 235);
|
|
117
166
|
|
|
118
167
|
/* Surface Colors */
|
|
119
168
|
--color-surface: oklch(100% 0 0);
|
|
@@ -128,39 +177,74 @@
|
|
|
128
177
|
--color-on-surface-variant: oklch(50% 0.02 260);
|
|
129
178
|
|
|
130
179
|
/* Semantic Colors */
|
|
131
|
-
--color-info: oklch(
|
|
132
|
-
--color-info-content: oklch(
|
|
180
|
+
--color-info: oklch(41.94% 0.114 254.39);
|
|
181
|
+
--color-info-content: oklch(91.94% 0.114 254.39);
|
|
133
182
|
--color-info-container: oklch(95% 0.03 235);
|
|
134
183
|
--color-on-info-container: oklch(35% 0.08 235);
|
|
135
184
|
|
|
136
|
-
--color-success: oklch(
|
|
137
|
-
--color-success-content: oklch(
|
|
185
|
+
--color-success: oklch(67.21% 0.19 133.55);
|
|
186
|
+
--color-success-content: oklch(27.21% 0.19 133.55);
|
|
138
187
|
--color-success-container: oklch(93% 0.04 150);
|
|
139
188
|
--color-on-success-container: oklch(30% 0.08 150);
|
|
140
189
|
|
|
141
|
-
--color-warning: oklch(
|
|
142
|
-
--color-warning-content: oklch(
|
|
190
|
+
--color-warning: oklch(68.19% 0.203 42.44);
|
|
191
|
+
--color-warning-content: oklch(18.19% 0.6 42);
|
|
143
192
|
--color-warning-container: oklch(93% 0.05 80);
|
|
144
193
|
--color-on-warning-container: oklch(38% 0.10 80);
|
|
145
194
|
|
|
146
|
-
--color-error: oklch(
|
|
147
|
-
--color-error-content: oklch(
|
|
195
|
+
--color-error: oklch(61.17% 0.237 28.15);
|
|
196
|
+
--color-error-content: oklch(90.01% 0.153 84.78);
|
|
148
197
|
--color-error-container: oklch(93% 0.04 25);
|
|
149
198
|
--color-on-error-container: oklch(32% 0.10 25);
|
|
150
199
|
|
|
151
200
|
/* Neutral Colors */
|
|
152
|
-
--color-base-100: oklch(100% 0
|
|
153
|
-
--color-base-200: oklch(
|
|
154
|
-
--color-base-300: oklch(
|
|
155
|
-
--color-base-400: oklch(
|
|
156
|
-
--color-base-500: oklch(
|
|
157
|
-
--color-base-600: oklch(
|
|
158
|
-
--color-base-700: oklch(
|
|
159
|
-
--color-base-800: oklch(
|
|
160
|
-
--color-base-900: oklch(
|
|
161
|
-
--color-base-content: oklch(
|
|
201
|
+
--color-base-100: oklch(100% 0.1 255);
|
|
202
|
+
--color-base-200: oklch(85% 0.1 255);
|
|
203
|
+
--color-base-300: oklch(70% 0.1 255);
|
|
204
|
+
--color-base-400: oklch(55% 0.06 255);
|
|
205
|
+
--color-base-500: oklch(45% 0.05 255);
|
|
206
|
+
--color-base-600: oklch(35% 0.04 255);
|
|
207
|
+
--color-base-700: oklch(25% 0.03 255);
|
|
208
|
+
--color-base-800: oklch(18% 0.02 255);
|
|
209
|
+
--color-base-900: oklch(12% 0.01 255);
|
|
210
|
+
--color-base-content: oklch(10% 0 255);
|
|
162
211
|
|
|
163
212
|
/* Outline Colors */
|
|
164
213
|
--color-outline: oklch(75% 0.01 260);
|
|
165
214
|
--color-outline-variant: oklch(85% 0.01 260);
|
|
215
|
+
|
|
216
|
+
/* Accent Colors */
|
|
217
|
+
--color-accent: oklch(85.23% 0.14 327);
|
|
218
|
+
--color-accent-content: oklch(41% 0.112 45.904);
|
|
219
|
+
|
|
220
|
+
/* Neutral Colors */
|
|
221
|
+
--color-neutral: oklch(0% 0 0);
|
|
222
|
+
--color-neutral-content: oklch(80% 0.1 50);
|
|
223
|
+
--color-neutral-variant: oklch(50% 0.02 260);
|
|
224
|
+
|
|
225
|
+
/* ============================================
|
|
226
|
+
* SHAPE & DEPTH
|
|
227
|
+
* ============================================ */
|
|
228
|
+
|
|
229
|
+
--radius-selector: 0rem;
|
|
230
|
+
--radius-field: 0.5rem;
|
|
231
|
+
--radius-box: 2rem;
|
|
232
|
+
--size-selector: 0.1875rem;
|
|
233
|
+
--size-field: 0.1875rem;
|
|
234
|
+
--border: 0.5px;
|
|
235
|
+
--depth: 1;
|
|
236
|
+
--noise: 1;
|
|
237
|
+
|
|
238
|
+
/* Surface Variant */
|
|
239
|
+
--color-surface-variant: oklch(94% 0.02 85);
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
/* Inverse Colors */
|
|
243
|
+
--color-inverse-surface: oklch(25% 0.02 260);
|
|
244
|
+
--color-inverse-on-surface: oklch(95% 0.01 260);
|
|
245
|
+
--color-inverse-primary: oklch(80% 0.14 55);
|
|
246
|
+
|
|
247
|
+
/* Shadow & Scrim */
|
|
248
|
+
--color-shadow: oklch(0% 0 0);
|
|
249
|
+
--color-scrim: oklch(0% 0 0 / 50%);
|
|
166
250
|
}
|
package/package.json
CHANGED