@cdx-ui/styles 0.0.1-beta.55 → 0.0.1-beta.57

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 (5) hide show
  1. package/css/theme.css +138 -90
  2. package/css/vanilla.css +95 -63
  3. package/package.json +2 -2
  4. package/tokens/presets/.manifest.json +1 -1
  5. package/tokens/presets/poise.json +182 -54
package/css/theme.css CHANGED
@@ -399,12 +399,12 @@
399
399
  --color-surface-action-strong: var(--color-brand-700);
400
400
  --color-surface-action-strong-active: var(--color-brand-900);
401
401
  --color-surface-action-strong-hover: var(--color-brand-800);
402
- --color-surface-action-subtle: var(--color-brand-200);
403
- --color-surface-action-subtle-active: var(--color-brand-400);
404
- --color-surface-action-subtle-hover: var(--color-brand-300);
405
- --color-surface-action-tint: var(--color-brand-100);
406
- --color-surface-action-tint-active: var(--color-brand-300);
407
- --color-surface-action-tint-hover: var(--color-brand-200);
402
+ --color-surface-action-subtle: var(--color-brand-100);
403
+ --color-surface-action-subtle-active: var(--color-brand-300);
404
+ --color-surface-action-subtle-hover: var(--color-brand-200);
405
+ --color-surface-action-tint: var(--color-brand-50);
406
+ --color-surface-action-tint-active: var(--color-brand-200);
407
+ --color-surface-action-tint-hover: var(--color-brand-100);
408
408
  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
409
409
  --color-surface-background: var(--color-base-50);
410
410
  --color-surface-brand-core: var(--color-brand-input);
@@ -414,22 +414,30 @@
414
414
  --color-surface-danger-strong: var(--color-red-700);
415
415
  --color-surface-danger-strong-active: var(--color-red-900);
416
416
  --color-surface-danger-strong-hover: var(--color-red-800);
417
- --color-surface-danger-subtle: var(--color-red-200);
418
- --color-surface-danger-subtle-active: var(--color-red-400);
419
- --color-surface-danger-subtle-hover: var(--color-red-300);
420
- --color-surface-danger-tint: var(--color-red-100);
421
- --color-surface-danger-tint-active: var(--color-red-300);
422
- --color-surface-danger-tint-hover: var(--color-red-200);
417
+ --color-surface-danger-subtle: var(--color-red-100);
418
+ --color-surface-danger-subtle-active: var(--color-red-300);
419
+ --color-surface-danger-subtle-hover: var(--color-red-200);
420
+ --color-surface-danger-tint: var(--color-red-50);
421
+ --color-surface-danger-tint-active: var(--color-red-200);
422
+ --color-surface-danger-tint-hover: var(--color-red-100);
423
423
  --color-surface-info-strong: var(--color-sky-500);
424
- --color-surface-info-subtle: var(--color-sky-200);
425
- --color-surface-info-tint: var(--color-sky-100);
426
- --color-surface-info-tint-active: var(--color-sky-300);
427
- --color-surface-info-tint-hover: var(--color-sky-200);
424
+ --color-surface-info-strong-active: var(--color-sky-700);
425
+ --color-surface-info-strong-hover: var(--color-sky-600);
426
+ --color-surface-info-subtle: var(--color-sky-100);
427
+ --color-surface-info-subtle-active: var(--color-sky-300);
428
+ --color-surface-info-subtle-hover: var(--color-sky-200);
429
+ --color-surface-info-tint: var(--color-sky-50);
430
+ --color-surface-info-tint-active: var(--color-sky-200);
431
+ --color-surface-info-tint-hover: var(--color-sky-100);
428
432
  --color-surface-neutral-strong: var(--color-base-700);
429
- --color-surface-neutral-subtle: var(--color-base-200);
430
- --color-surface-neutral-tint: var(--color-base-100);
431
- --color-surface-neutral-tint-active: var(--color-base-300);
432
- --color-surface-neutral-tint-hover: var(--color-base-200);
433
+ --color-surface-neutral-strong-active: var(--color-base-800);
434
+ --color-surface-neutral-strong-hover: var(--color-base-800);
435
+ --color-surface-neutral-subtle: var(--color-base-100);
436
+ --color-surface-neutral-subtle-active: var(--color-base-300);
437
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
438
+ --color-surface-neutral-tint: var(--color-base-50);
439
+ --color-surface-neutral-tint-active: var(--color-base-200);
440
+ --color-surface-neutral-tint-hover: var(--color-base-100);
433
441
  --color-surface-primary: var(--color-white);
434
442
  --color-surface-primary-active: var(--color-base-200);
435
443
  --color-surface-primary-hover: var(--color-base-100);
@@ -437,16 +445,24 @@
437
445
  --color-surface-secondary-active: var(--color-base-300);
438
446
  --color-surface-secondary-hover: var(--color-base-200);
439
447
  --color-surface-success-strong: var(--color-green-600);
440
- --color-surface-success-subtle: var(--color-green-200);
441
- --color-surface-success-tint: var(--color-green-100);
442
- --color-surface-success-tint-active: var(--color-green-300);
443
- --color-surface-success-tint-hover: var(--color-green-200);
448
+ --color-surface-success-strong-active: var(--color-green-800);
449
+ --color-surface-success-strong-hover: var(--color-green-700);
450
+ --color-surface-success-subtle: var(--color-green-100);
451
+ --color-surface-success-subtle-active: var(--color-green-300);
452
+ --color-surface-success-subtle-hover: var(--color-green-200);
453
+ --color-surface-success-tint: var(--color-green-50);
454
+ --color-surface-success-tint-active: var(--color-green-200);
455
+ --color-surface-success-tint-hover: var(--color-green-100);
444
456
  --color-surface-tertiary: var(--color-brand-100);
445
457
  --color-surface-warning-strong: var(--color-amber-400);
446
- --color-surface-warning-subtle: var(--color-amber-200);
447
- --color-surface-warning-tint: var(--color-amber-100);
448
- --color-surface-warning-tint-active: var(--color-amber-300);
449
- --color-surface-warning-tint-hover: var(--color-amber-200);
458
+ --color-surface-warning-strong-active: var(--color-amber-600);
459
+ --color-surface-warning-strong-hover: var(--color-amber-500);
460
+ --color-surface-warning-subtle: var(--color-amber-100);
461
+ --color-surface-warning-subtle-active: var(--color-amber-300);
462
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
463
+ --color-surface-warning-tint: var(--color-amber-50);
464
+ --color-surface-warning-tint-active: var(--color-amber-200);
465
+ --color-surface-warning-tint-hover: var(--color-amber-100);
450
466
  --font-body: var(--font-sans);
451
467
  --font-body-bold: var(--font-sans-bold);
452
468
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -528,12 +544,12 @@
528
544
  --color-surface-action-strong: var(--color-brand-700);
529
545
  --color-surface-action-strong-active: var(--color-brand-900);
530
546
  --color-surface-action-strong-hover: var(--color-brand-800);
531
- --color-surface-action-subtle: var(--color-brand-200);
532
- --color-surface-action-subtle-active: var(--color-brand-400);
533
- --color-surface-action-subtle-hover: var(--color-brand-300);
534
- --color-surface-action-tint: var(--color-brand-100);
535
- --color-surface-action-tint-active: var(--color-brand-300);
536
- --color-surface-action-tint-hover: var(--color-brand-200);
547
+ --color-surface-action-subtle: var(--color-brand-100);
548
+ --color-surface-action-subtle-active: var(--color-brand-300);
549
+ --color-surface-action-subtle-hover: var(--color-brand-200);
550
+ --color-surface-action-tint: var(--color-brand-50);
551
+ --color-surface-action-tint-active: var(--color-brand-200);
552
+ --color-surface-action-tint-hover: var(--color-brand-100);
537
553
  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
538
554
  --color-surface-background: var(--color-base-50);
539
555
  --color-surface-brand-core: var(--color-brand-input);
@@ -543,22 +559,30 @@
543
559
  --color-surface-danger-strong: var(--color-red-700);
544
560
  --color-surface-danger-strong-active: var(--color-red-900);
545
561
  --color-surface-danger-strong-hover: var(--color-red-800);
546
- --color-surface-danger-subtle: var(--color-red-200);
547
- --color-surface-danger-subtle-active: var(--color-red-400);
548
- --color-surface-danger-subtle-hover: var(--color-red-300);
549
- --color-surface-danger-tint: var(--color-red-100);
550
- --color-surface-danger-tint-active: var(--color-red-300);
551
- --color-surface-danger-tint-hover: var(--color-red-200);
562
+ --color-surface-danger-subtle: var(--color-red-100);
563
+ --color-surface-danger-subtle-active: var(--color-red-300);
564
+ --color-surface-danger-subtle-hover: var(--color-red-200);
565
+ --color-surface-danger-tint: var(--color-red-50);
566
+ --color-surface-danger-tint-active: var(--color-red-200);
567
+ --color-surface-danger-tint-hover: var(--color-red-100);
552
568
  --color-surface-info-strong: var(--color-sky-500);
553
- --color-surface-info-subtle: var(--color-sky-200);
554
- --color-surface-info-tint: var(--color-sky-100);
555
- --color-surface-info-tint-active: var(--color-sky-300);
556
- --color-surface-info-tint-hover: var(--color-sky-200);
569
+ --color-surface-info-strong-active: var(--color-sky-700);
570
+ --color-surface-info-strong-hover: var(--color-sky-600);
571
+ --color-surface-info-subtle: var(--color-sky-100);
572
+ --color-surface-info-subtle-active: var(--color-sky-300);
573
+ --color-surface-info-subtle-hover: var(--color-sky-200);
574
+ --color-surface-info-tint: var(--color-sky-50);
575
+ --color-surface-info-tint-active: var(--color-sky-200);
576
+ --color-surface-info-tint-hover: var(--color-sky-100);
557
577
  --color-surface-neutral-strong: var(--color-base-700);
558
- --color-surface-neutral-subtle: var(--color-base-200);
559
- --color-surface-neutral-tint: var(--color-base-100);
560
- --color-surface-neutral-tint-active: var(--color-base-300);
561
- --color-surface-neutral-tint-hover: var(--color-base-200);
578
+ --color-surface-neutral-strong-active: var(--color-base-800);
579
+ --color-surface-neutral-strong-hover: var(--color-base-800);
580
+ --color-surface-neutral-subtle: var(--color-base-100);
581
+ --color-surface-neutral-subtle-active: var(--color-base-300);
582
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
583
+ --color-surface-neutral-tint: var(--color-base-50);
584
+ --color-surface-neutral-tint-active: var(--color-base-200);
585
+ --color-surface-neutral-tint-hover: var(--color-base-100);
562
586
  --color-surface-primary: var(--color-white);
563
587
  --color-surface-primary-active: var(--color-base-200);
564
588
  --color-surface-primary-hover: var(--color-base-100);
@@ -566,16 +590,24 @@
566
590
  --color-surface-secondary-active: var(--color-base-300);
567
591
  --color-surface-secondary-hover: var(--color-base-200);
568
592
  --color-surface-success-strong: var(--color-green-600);
569
- --color-surface-success-subtle: var(--color-green-200);
570
- --color-surface-success-tint: var(--color-green-100);
571
- --color-surface-success-tint-active: var(--color-green-300);
572
- --color-surface-success-tint-hover: var(--color-green-200);
593
+ --color-surface-success-strong-active: var(--color-green-800);
594
+ --color-surface-success-strong-hover: var(--color-green-700);
595
+ --color-surface-success-subtle: var(--color-green-100);
596
+ --color-surface-success-subtle-active: var(--color-green-300);
597
+ --color-surface-success-subtle-hover: var(--color-green-200);
598
+ --color-surface-success-tint: var(--color-green-50);
599
+ --color-surface-success-tint-active: var(--color-green-200);
600
+ --color-surface-success-tint-hover: var(--color-green-100);
573
601
  --color-surface-tertiary: var(--color-brand-100);
574
602
  --color-surface-warning-strong: var(--color-amber-400);
575
- --color-surface-warning-subtle: var(--color-amber-200);
576
- --color-surface-warning-tint: var(--color-amber-100);
577
- --color-surface-warning-tint-active: var(--color-amber-300);
578
- --color-surface-warning-tint-hover: var(--color-amber-200);
603
+ --color-surface-warning-strong-active: var(--color-amber-600);
604
+ --color-surface-warning-strong-hover: var(--color-amber-500);
605
+ --color-surface-warning-subtle: var(--color-amber-100);
606
+ --color-surface-warning-subtle-active: var(--color-amber-300);
607
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
608
+ --color-surface-warning-tint: var(--color-amber-50);
609
+ --color-surface-warning-tint-active: var(--color-amber-200);
610
+ --color-surface-warning-tint-hover: var(--color-amber-100);
579
611
  --font-body: var(--font-sans);
580
612
  --font-body-bold: var(--font-sans-bold);
581
613
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -649,42 +681,50 @@
649
681
  --color-stroke-warning: var(--color-amber-300);
650
682
  --color-surface-accent-core: var(--color-accent-input);
651
683
  --color-surface-accent-strong: var(--color-accent-300);
652
- --color-surface-accent-subtle: var(--color-accent-700);
653
- --color-surface-accent-tint: var(--color-accent-900);
684
+ --color-surface-accent-subtle: var(--color-accent-900);
685
+ --color-surface-accent-tint: var(--color-accent-950);
654
686
  --color-surface-action-strong: var(--color-brand-300);
655
687
  --color-surface-action-strong-active: var(--color-brand-100);
656
688
  --color-surface-action-strong-hover: var(--color-brand-200);
657
- --color-surface-action-subtle: var(--color-brand-800);
658
- --color-surface-action-subtle-active: var(--color-brand-600);
659
- --color-surface-action-subtle-hover: var(--color-brand-700);
660
- --color-surface-action-tint: var(--color-brand-900);
661
- --color-surface-action-tint-active: var(--color-brand-700);
662
- --color-surface-action-tint-hover: var(--color-brand-800);
689
+ --color-surface-action-subtle: var(--color-brand-900);
690
+ --color-surface-action-subtle-active: var(--color-brand-700);
691
+ --color-surface-action-subtle-hover: var(--color-brand-800);
692
+ --color-surface-action-tint: var(--color-brand-950);
693
+ --color-surface-action-tint-active: var(--color-brand-800);
694
+ --color-surface-action-tint-hover: var(--color-brand-900);
663
695
  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
664
- --color-surface-background: var(--color-base-900);
696
+ --color-surface-background: var(--color-base-950);
665
697
  --color-surface-brand-core: var(--color-brand-input);
666
698
  --color-surface-brand-strong: var(--color-brand-300);
667
- --color-surface-brand-subtle: var(--color-brand-700);
668
- --color-surface-brand-tint: var(--color-brand-900);
699
+ --color-surface-brand-subtle: var(--color-brand-900);
700
+ --color-surface-brand-tint: var(--color-brand-950);
669
701
  --color-surface-danger-strong: var(--color-red-200);
670
702
  --color-surface-danger-strong-active: var(--color-red-50);
671
703
  --color-surface-danger-strong-hover: var(--color-red-100);
672
- --color-surface-danger-subtle: var(--color-red-700);
673
- --color-surface-danger-subtle-active: var(--color-red-500);
674
- --color-surface-danger-subtle-hover: var(--color-red-600);
675
- --color-surface-danger-tint: var(--color-red-900);
676
- --color-surface-danger-tint-active: var(--color-red-700);
677
- --color-surface-danger-tint-hover: var(--color-red-800);
704
+ --color-surface-danger-subtle: var(--color-red-900);
705
+ --color-surface-danger-subtle-active: var(--color-red-700);
706
+ --color-surface-danger-subtle-hover: var(--color-red-800);
707
+ --color-surface-danger-tint: var(--color-red-950);
708
+ --color-surface-danger-tint-active: var(--color-red-800);
709
+ --color-surface-danger-tint-hover: var(--color-red-900);
678
710
  --color-surface-info-strong: var(--color-sky-300);
679
- --color-surface-info-subtle: var(--color-sky-700);
680
- --color-surface-info-tint: var(--color-sky-900);
681
- --color-surface-info-tint-active: var(--color-sky-700);
682
- --color-surface-info-tint-hover: var(--color-sky-800);
683
- --color-surface-neutral-strong: var(--color-base-200);
684
- --color-surface-neutral-subtle: var(--color-base-800);
685
- --color-surface-neutral-tint: var(--color-base-900);
686
- --color-surface-neutral-tint-active: var(--color-base-700);
687
- --color-surface-neutral-tint-hover: var(--color-base-800);
711
+ --color-surface-info-strong-active: var(--color-sky-100);
712
+ --color-surface-info-strong-hover: var(--color-sky-200);
713
+ --color-surface-info-subtle: var(--color-sky-900);
714
+ --color-surface-info-subtle-active: var(--color-sky-700);
715
+ --color-surface-info-subtle-hover: var(--color-sky-800);
716
+ --color-surface-info-tint: var(--color-sky-950);
717
+ --color-surface-info-tint-active: var(--color-sky-800);
718
+ --color-surface-info-tint-hover: var(--color-sky-900);
719
+ --color-surface-neutral-strong: var(--color-base-300);
720
+ --color-surface-neutral-strong-active: var(--color-base-100);
721
+ --color-surface-neutral-strong-hover: var(--color-base-200);
722
+ --color-surface-neutral-subtle: var(--color-base-900);
723
+ --color-surface-neutral-subtle-active: var(--color-base-700);
724
+ --color-surface-neutral-subtle-hover: var(--color-base-800);
725
+ --color-surface-neutral-tint: var(--color-base-950);
726
+ --color-surface-neutral-tint-active: var(--color-base-800);
727
+ --color-surface-neutral-tint-hover: var(--color-base-900);
688
728
  --color-surface-primary: var(--color-base-950);
689
729
  --color-surface-primary-active: var(--color-base-800);
690
730
  --color-surface-primary-hover: var(--color-base-900);
@@ -692,16 +732,24 @@
692
732
  --color-surface-secondary-active: var(--color-base-700);
693
733
  --color-surface-secondary-hover: var(--color-base-800);
694
734
  --color-surface-success-strong: var(--color-green-300);
695
- --color-surface-success-subtle: var(--color-green-700);
696
- --color-surface-success-tint: var(--color-green-900);
697
- --color-surface-success-tint-active: var(--color-green-700);
698
- --color-surface-success-tint-hover: var(--color-green-800);
735
+ --color-surface-success-strong-active: var(--color-green-100);
736
+ --color-surface-success-strong-hover: var(--color-green-200);
737
+ --color-surface-success-subtle: var(--color-green-900);
738
+ --color-surface-success-subtle-active: var(--color-green-700);
739
+ --color-surface-success-subtle-hover: var(--color-green-800);
740
+ --color-surface-success-tint: var(--color-green-950);
741
+ --color-surface-success-tint-active: var(--color-green-800);
742
+ --color-surface-success-tint-hover: var(--color-green-900);
699
743
  --color-surface-tertiary: var(--color-brand-900);
700
744
  --color-surface-warning-strong: var(--color-amber-300);
701
- --color-surface-warning-subtle: var(--color-amber-700);
702
- --color-surface-warning-tint: var(--color-amber-900);
703
- --color-surface-warning-tint-active: var(--color-amber-700);
704
- --color-surface-warning-tint-hover: var(--color-amber-800);
745
+ --color-surface-warning-strong-active: var(--color-amber-100);
746
+ --color-surface-warning-strong-hover: var(--color-amber-200);
747
+ --color-surface-warning-subtle: var(--color-amber-900);
748
+ --color-surface-warning-subtle-active: var(--color-amber-700);
749
+ --color-surface-warning-subtle-hover: var(--color-amber-800);
750
+ --color-surface-warning-tint: var(--color-amber-950);
751
+ --color-surface-warning-tint-active: var(--color-amber-800);
752
+ --color-surface-warning-tint-hover: var(--color-amber-900);
705
753
  --font-body: var(--font-sans);
706
754
  --font-body-bold: var(--font-sans-bold);
707
755
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/css/vanilla.css CHANGED
@@ -415,14 +415,14 @@
415
415
  --color-surface-action-strong: var(--color-brand-700);
416
416
  --color-surface-action-strong-active: var(--color-brand-900);
417
417
  --color-surface-action-strong-hover: var(--color-brand-800);
418
- --color-surface-action-subtle: var(--color-brand-200);
419
- --color-surface-action-subtle-active: var(--color-brand-400);
420
- --color-surface-action-subtle-hover: var(--color-brand-300);
421
- --color-surface-action-tint: var(--color-brand-100);
422
- --color-surface-action-tint-active: var(--color-brand-300);
423
- --color-surface-action-tint-hover: var(--color-brand-200);
418
+ --color-surface-action-subtle: var(--color-brand-100);
419
+ --color-surface-action-subtle-active: var(--color-brand-300);
420
+ --color-surface-action-subtle-hover: var(--color-brand-200);
421
+ --color-surface-action-tint: var(--color-brand-50);
422
+ --color-surface-action-tint-active: var(--color-brand-200);
423
+ --color-surface-action-tint-hover: var(--color-brand-100);
424
424
  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
425
- --color-surface-background: var(--color-base-100);
425
+ --color-surface-background: var(--color-base-50);
426
426
  --color-surface-brand-core: var(--color-brand-input);
427
427
  --color-surface-brand-strong: var(--color-brand-700);
428
428
  --color-surface-brand-subtle: var(--color-brand-200);
@@ -430,22 +430,30 @@
430
430
  --color-surface-danger-strong: var(--color-red-700);
431
431
  --color-surface-danger-strong-active: var(--color-red-900);
432
432
  --color-surface-danger-strong-hover: var(--color-red-800);
433
- --color-surface-danger-subtle: var(--color-red-200);
434
- --color-surface-danger-subtle-active: var(--color-red-400);
435
- --color-surface-danger-subtle-hover: var(--color-red-300);
436
- --color-surface-danger-tint: var(--color-red-100);
437
- --color-surface-danger-tint-active: var(--color-red-300);
438
- --color-surface-danger-tint-hover: var(--color-red-200);
433
+ --color-surface-danger-subtle: var(--color-red-100);
434
+ --color-surface-danger-subtle-active: var(--color-red-300);
435
+ --color-surface-danger-subtle-hover: var(--color-red-200);
436
+ --color-surface-danger-tint: var(--color-red-50);
437
+ --color-surface-danger-tint-active: var(--color-red-200);
438
+ --color-surface-danger-tint-hover: var(--color-red-100);
439
439
  --color-surface-info-strong: var(--color-sky-500);
440
- --color-surface-info-subtle: var(--color-sky-200);
441
- --color-surface-info-tint: var(--color-sky-100);
442
- --color-surface-info-tint-active: var(--color-sky-300);
443
- --color-surface-info-tint-hover: var(--color-sky-200);
440
+ --color-surface-info-strong-active: var(--color-sky-700);
441
+ --color-surface-info-strong-hover: var(--color-sky-600);
442
+ --color-surface-info-subtle: var(--color-sky-100);
443
+ --color-surface-info-subtle-active: var(--color-sky-300);
444
+ --color-surface-info-subtle-hover: var(--color-sky-200);
445
+ --color-surface-info-tint: var(--color-sky-50);
446
+ --color-surface-info-tint-active: var(--color-sky-200);
447
+ --color-surface-info-tint-hover: var(--color-sky-100);
444
448
  --color-surface-neutral-strong: var(--color-base-700);
445
- --color-surface-neutral-subtle: var(--color-base-200);
446
- --color-surface-neutral-tint: var(--color-base-100);
447
- --color-surface-neutral-tint-active: var(--color-base-300);
448
- --color-surface-neutral-tint-hover: var(--color-base-200);
449
+ --color-surface-neutral-strong-active: var(--color-base-800);
450
+ --color-surface-neutral-strong-hover: var(--color-base-800);
451
+ --color-surface-neutral-subtle: var(--color-base-100);
452
+ --color-surface-neutral-subtle-active: var(--color-base-300);
453
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
454
+ --color-surface-neutral-tint: var(--color-base-50);
455
+ --color-surface-neutral-tint-active: var(--color-base-200);
456
+ --color-surface-neutral-tint-hover: var(--color-base-100);
449
457
  --color-surface-primary: var(--color-white);
450
458
  --color-surface-primary-active: var(--color-base-200);
451
459
  --color-surface-primary-hover: var(--color-base-100);
@@ -453,16 +461,24 @@
453
461
  --color-surface-secondary-active: var(--color-base-300);
454
462
  --color-surface-secondary-hover: var(--color-base-200);
455
463
  --color-surface-success-strong: var(--color-green-600);
456
- --color-surface-success-subtle: var(--color-green-200);
457
- --color-surface-success-tint: var(--color-green-100);
458
- --color-surface-success-tint-active: var(--color-green-300);
459
- --color-surface-success-tint-hover: var(--color-green-200);
464
+ --color-surface-success-strong-active: var(--color-green-800);
465
+ --color-surface-success-strong-hover: var(--color-green-700);
466
+ --color-surface-success-subtle: var(--color-green-100);
467
+ --color-surface-success-subtle-active: var(--color-green-300);
468
+ --color-surface-success-subtle-hover: var(--color-green-200);
469
+ --color-surface-success-tint: var(--color-green-50);
470
+ --color-surface-success-tint-active: var(--color-green-200);
471
+ --color-surface-success-tint-hover: var(--color-green-100);
460
472
  --color-surface-tertiary: var(--color-brand-100);
461
473
  --color-surface-warning-strong: var(--color-amber-400);
462
- --color-surface-warning-subtle: var(--color-amber-200);
463
- --color-surface-warning-tint: var(--color-amber-100);
464
- --color-surface-warning-tint-active: var(--color-amber-300);
465
- --color-surface-warning-tint-hover: var(--color-amber-200);
474
+ --color-surface-warning-strong-active: var(--color-amber-600);
475
+ --color-surface-warning-strong-hover: var(--color-amber-500);
476
+ --color-surface-warning-subtle: var(--color-amber-100);
477
+ --color-surface-warning-subtle-active: var(--color-amber-300);
478
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
479
+ --color-surface-warning-tint: var(--color-amber-50);
480
+ --color-surface-warning-tint-active: var(--color-amber-200);
481
+ --color-surface-warning-tint-hover: var(--color-amber-100);
466
482
  --font-body: var(--font-sans);
467
483
  --font-body-bold: var(--font-sans-bold);
468
484
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -538,42 +554,50 @@
538
554
  --color-stroke-warning: var(--color-amber-300);
539
555
  --color-surface-accent-core: var(--color-accent-input);
540
556
  --color-surface-accent-strong: var(--color-accent-300);
541
- --color-surface-accent-subtle: var(--color-accent-700);
542
- --color-surface-accent-tint: var(--color-accent-900);
557
+ --color-surface-accent-subtle: var(--color-accent-900);
558
+ --color-surface-accent-tint: var(--color-accent-950);
543
559
  --color-surface-action-strong: var(--color-brand-300);
544
560
  --color-surface-action-strong-active: var(--color-brand-100);
545
561
  --color-surface-action-strong-hover: var(--color-brand-200);
546
- --color-surface-action-subtle: var(--color-brand-800);
547
- --color-surface-action-subtle-active: var(--color-brand-600);
548
- --color-surface-action-subtle-hover: var(--color-brand-700);
549
- --color-surface-action-tint: var(--color-brand-900);
550
- --color-surface-action-tint-active: var(--color-brand-700);
551
- --color-surface-action-tint-hover: var(--color-brand-800);
562
+ --color-surface-action-subtle: var(--color-brand-900);
563
+ --color-surface-action-subtle-active: var(--color-brand-700);
564
+ --color-surface-action-subtle-hover: var(--color-brand-800);
565
+ --color-surface-action-tint: var(--color-brand-950);
566
+ --color-surface-action-tint-active: var(--color-brand-800);
567
+ --color-surface-action-tint-hover: var(--color-brand-900);
552
568
  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
553
- --color-surface-background: var(--color-base-900);
569
+ --color-surface-background: var(--color-base-950);
554
570
  --color-surface-brand-core: var(--color-brand-input);
555
571
  --color-surface-brand-strong: var(--color-brand-300);
556
- --color-surface-brand-subtle: var(--color-brand-700);
557
- --color-surface-brand-tint: var(--color-brand-900);
572
+ --color-surface-brand-subtle: var(--color-brand-900);
573
+ --color-surface-brand-tint: var(--color-brand-950);
558
574
  --color-surface-danger-strong: var(--color-red-200);
559
575
  --color-surface-danger-strong-active: var(--color-red-50);
560
576
  --color-surface-danger-strong-hover: var(--color-red-100);
561
- --color-surface-danger-subtle: var(--color-red-700);
562
- --color-surface-danger-subtle-active: var(--color-red-500);
563
- --color-surface-danger-subtle-hover: var(--color-red-600);
564
- --color-surface-danger-tint: var(--color-red-900);
565
- --color-surface-danger-tint-active: var(--color-red-700);
566
- --color-surface-danger-tint-hover: var(--color-red-800);
577
+ --color-surface-danger-subtle: var(--color-red-900);
578
+ --color-surface-danger-subtle-active: var(--color-red-700);
579
+ --color-surface-danger-subtle-hover: var(--color-red-800);
580
+ --color-surface-danger-tint: var(--color-red-950);
581
+ --color-surface-danger-tint-active: var(--color-red-800);
582
+ --color-surface-danger-tint-hover: var(--color-red-900);
567
583
  --color-surface-info-strong: var(--color-sky-300);
568
- --color-surface-info-subtle: var(--color-sky-700);
569
- --color-surface-info-tint: var(--color-sky-900);
570
- --color-surface-info-tint-active: var(--color-sky-700);
571
- --color-surface-info-tint-hover: var(--color-sky-800);
572
- --color-surface-neutral-strong: var(--color-base-200);
573
- --color-surface-neutral-subtle: var(--color-base-800);
574
- --color-surface-neutral-tint: var(--color-base-900);
575
- --color-surface-neutral-tint-active: var(--color-base-700);
576
- --color-surface-neutral-tint-hover: var(--color-base-800);
584
+ --color-surface-info-strong-active: var(--color-sky-100);
585
+ --color-surface-info-strong-hover: var(--color-sky-200);
586
+ --color-surface-info-subtle: var(--color-sky-900);
587
+ --color-surface-info-subtle-active: var(--color-sky-700);
588
+ --color-surface-info-subtle-hover: var(--color-sky-800);
589
+ --color-surface-info-tint: var(--color-sky-950);
590
+ --color-surface-info-tint-active: var(--color-sky-800);
591
+ --color-surface-info-tint-hover: var(--color-sky-900);
592
+ --color-surface-neutral-strong: var(--color-base-300);
593
+ --color-surface-neutral-strong-active: var(--color-base-100);
594
+ --color-surface-neutral-strong-hover: var(--color-base-200);
595
+ --color-surface-neutral-subtle: var(--color-base-900);
596
+ --color-surface-neutral-subtle-active: var(--color-base-700);
597
+ --color-surface-neutral-subtle-hover: var(--color-base-800);
598
+ --color-surface-neutral-tint: var(--color-base-950);
599
+ --color-surface-neutral-tint-active: var(--color-base-800);
600
+ --color-surface-neutral-tint-hover: var(--color-base-900);
577
601
  --color-surface-primary: var(--color-base-950);
578
602
  --color-surface-primary-active: var(--color-base-800);
579
603
  --color-surface-primary-hover: var(--color-base-900);
@@ -581,16 +605,24 @@
581
605
  --color-surface-secondary-active: var(--color-base-700);
582
606
  --color-surface-secondary-hover: var(--color-base-800);
583
607
  --color-surface-success-strong: var(--color-green-300);
584
- --color-surface-success-subtle: var(--color-green-700);
585
- --color-surface-success-tint: var(--color-green-900);
586
- --color-surface-success-tint-active: var(--color-green-700);
587
- --color-surface-success-tint-hover: var(--color-green-800);
608
+ --color-surface-success-strong-active: var(--color-green-100);
609
+ --color-surface-success-strong-hover: var(--color-green-200);
610
+ --color-surface-success-subtle: var(--color-green-900);
611
+ --color-surface-success-subtle-active: var(--color-green-700);
612
+ --color-surface-success-subtle-hover: var(--color-green-800);
613
+ --color-surface-success-tint: var(--color-green-950);
614
+ --color-surface-success-tint-active: var(--color-green-800);
615
+ --color-surface-success-tint-hover: var(--color-green-900);
588
616
  --color-surface-tertiary: var(--color-brand-900);
589
617
  --color-surface-warning-strong: var(--color-amber-300);
590
- --color-surface-warning-subtle: var(--color-amber-700);
591
- --color-surface-warning-tint: var(--color-amber-900);
592
- --color-surface-warning-tint-active: var(--color-amber-700);
593
- --color-surface-warning-tint-hover: var(--color-amber-800);
618
+ --color-surface-warning-strong-active: var(--color-amber-100);
619
+ --color-surface-warning-strong-hover: var(--color-amber-200);
620
+ --color-surface-warning-subtle: var(--color-amber-900);
621
+ --color-surface-warning-subtle-active: var(--color-amber-700);
622
+ --color-surface-warning-subtle-hover: var(--color-amber-800);
623
+ --color-surface-warning-tint: var(--color-amber-950);
624
+ --color-surface-warning-tint-active: var(--color-amber-800);
625
+ --color-surface-warning-tint-hover: var(--color-amber-900);
594
626
  --font-body: var(--font-sans);
595
627
  --font-body-bold: var(--font-sans-bold);
596
628
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/styles",
3
- "version": "0.0.1-beta.55",
3
+ "version": "0.0.1-beta.57",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -65,7 +65,7 @@
65
65
  "@expo-google-fonts/manrope": "0.4.2",
66
66
  "@expo-google-fonts/outfit": "0.4.3",
67
67
  "@expo-google-fonts/public-sans": "0.4.2",
68
- "@cdx-ui/utils": "0.0.1-beta.55"
68
+ "@cdx-ui/utils": "0.0.1-beta.57"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "expo-font": ">=13.0.0",
package/tokens/presets/.manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "poise.json": "85d84d0915cc7a4d7d5e6b806e5056dbf2ecf9ee5e8452f76779314b44490eb3",
2
+ "poise.json": "ee2a44e74f3f5e82bcd3b270f667395fd981bcaa84a536372e8cc50f7b1add5e",
3
3
  "prestige.json": "d817cb775b15ec0293c0c1c99fd4e655646b07e4f7080c0aeedf2c81b4a82f7a",
4
4
  "pulse.json": "5fa3ef89a369281ddcdd142860ab2c99381a0e81cf02fead9e77bdfd8585ad39"
5
5
  }
package/tokens/presets/poise.json CHANGED
@@ -2507,27 +2507,27 @@
2507
2507
  },
2508
2508
  "subtle": {
2509
2509
  "$type": "color",
2510
- "$value": "{color.brand.200}"
2510
+ "$value": "{color.brand.100}"
2511
2511
  },
2512
2512
  "subtle-active": {
2513
2513
  "$type": "color",
2514
- "$value": "{color.brand.400}"
2514
+ "$value": "{color.brand.300}"
2515
2515
  },
2516
2516
  "subtle-hover": {
2517
2517
  "$type": "color",
2518
- "$value": "{color.brand.300}"
2518
+ "$value": "{color.brand.200}"
2519
2519
  },
2520
2520
  "tint": {
2521
2521
  "$type": "color",
2522
- "$value": "{color.brand.100}"
2522
+ "$value": "{color.brand.50}"
2523
2523
  },
2524
2524
  "tint-active": {
2525
2525
  "$type": "color",
2526
- "$value": "{color.brand.300}"
2526
+ "$value": "{color.brand.200}"
2527
2527
  },
2528
2528
  "tint-hover": {
2529
2529
  "$type": "color",
2530
- "$value": "{color.brand.200}"
2530
+ "$value": "{color.brand.100}"
2531
2531
  }
2532
2532
  },
2533
2533
  "backdrop": {
@@ -2536,7 +2536,7 @@
2536
2536
  },
2537
2537
  "background": {
2538
2538
  "$type": "color",
2539
- "$value": "{color.base.100}"
2539
+ "$value": "{color.base.50}"
2540
2540
  },
2541
2541
  "brand": {
2542
2542
  "core": {
@@ -2571,27 +2571,27 @@
2571
2571
  },
2572
2572
  "subtle": {
2573
2573
  "$type": "color",
2574
- "$value": "{color.red.200}"
2574
+ "$value": "{color.red.100}"
2575
2575
  },
2576
2576
  "subtle-active": {
2577
2577
  "$type": "color",
2578
- "$value": "{color.red.400}"
2578
+ "$value": "{color.red.300}"
2579
2579
  },
2580
2580
  "subtle-hover": {
2581
2581
  "$type": "color",
2582
- "$value": "{color.red.300}"
2582
+ "$value": "{color.red.200}"
2583
2583
  },
2584
2584
  "tint": {
2585
2585
  "$type": "color",
2586
- "$value": "{color.red.100}"
2586
+ "$value": "{color.red.50}"
2587
2587
  },
2588
2588
  "tint-active": {
2589
2589
  "$type": "color",
2590
- "$value": "{color.red.300}"
2590
+ "$value": "{color.red.200}"
2591
2591
  },
2592
2592
  "tint-hover": {
2593
2593
  "$type": "color",
2594
- "$value": "{color.red.200}"
2594
+ "$value": "{color.red.100}"
2595
2595
  }
2596
2596
  },
2597
2597
  "info": {
@@ -2599,21 +2599,37 @@
2599
2599
  "$type": "color",
2600
2600
  "$value": "{color.sky.500}"
2601
2601
  },
2602
+ "strong-active": {
2603
+ "$type": "color",
2604
+ "$value": "{color.sky.700}"
2605
+ },
2606
+ "strong-hover": {
2607
+ "$type": "color",
2608
+ "$value": "{color.sky.600}"
2609
+ },
2602
2610
  "subtle": {
2611
+ "$type": "color",
2612
+ "$value": "{color.sky.100}"
2613
+ },
2614
+ "subtle-active": {
2615
+ "$type": "color",
2616
+ "$value": "{color.sky.300}"
2617
+ },
2618
+ "subtle-hover": {
2603
2619
  "$type": "color",
2604
2620
  "$value": "{color.sky.200}"
2605
2621
  },
2606
2622
  "tint": {
2607
2623
  "$type": "color",
2608
- "$value": "{color.sky.100}"
2624
+ "$value": "{color.sky.50}"
2609
2625
  },
2610
2626
  "tint-active": {
2611
2627
  "$type": "color",
2612
- "$value": "{color.sky.300}"
2628
+ "$value": "{color.sky.200}"
2613
2629
  },
2614
2630
  "tint-hover": {
2615
2631
  "$type": "color",
2616
- "$value": "{color.sky.200}"
2632
+ "$value": "{color.sky.100}"
2617
2633
  }
2618
2634
  },
2619
2635
  "neutral": {
@@ -2621,21 +2637,37 @@
2621
2637
  "$type": "color",
2622
2638
  "$value": "{color.base.700}"
2623
2639
  },
2640
+ "strong-active": {
2641
+ "$type": "color",
2642
+ "$value": "{color.base.800}"
2643
+ },
2644
+ "strong-hover": {
2645
+ "$type": "color",
2646
+ "$value": "{color.base.800}"
2647
+ },
2624
2648
  "subtle": {
2649
+ "$type": "color",
2650
+ "$value": "{color.base.100}"
2651
+ },
2652
+ "subtle-active": {
2653
+ "$type": "color",
2654
+ "$value": "{color.base.300}"
2655
+ },
2656
+ "subtle-hover": {
2625
2657
  "$type": "color",
2626
2658
  "$value": "{color.base.200}"
2627
2659
  },
2628
2660
  "tint": {
2629
2661
  "$type": "color",
2630
- "$value": "{color.base.100}"
2662
+ "$value": "{color.base.50}"
2631
2663
  },
2632
2664
  "tint-active": {
2633
2665
  "$type": "color",
2634
- "$value": "{color.base.300}"
2666
+ "$value": "{color.base.200}"
2635
2667
  },
2636
2668
  "tint-hover": {
2637
2669
  "$type": "color",
2638
- "$value": "{color.base.200}"
2670
+ "$value": "{color.base.100}"
2639
2671
  }
2640
2672
  },
2641
2673
  "primary": {
@@ -2667,21 +2699,37 @@
2667
2699
  "$type": "color",
2668
2700
  "$value": "{color.green.600}"
2669
2701
  },
2702
+ "strong-active": {
2703
+ "$type": "color",
2704
+ "$value": "{color.green.800}"
2705
+ },
2706
+ "strong-hover": {
2707
+ "$type": "color",
2708
+ "$value": "{color.green.700}"
2709
+ },
2670
2710
  "subtle": {
2711
+ "$type": "color",
2712
+ "$value": "{color.green.100}"
2713
+ },
2714
+ "subtle-active": {
2715
+ "$type": "color",
2716
+ "$value": "{color.green.300}"
2717
+ },
2718
+ "subtle-hover": {
2671
2719
  "$type": "color",
2672
2720
  "$value": "{color.green.200}"
2673
2721
  },
2674
2722
  "tint": {
2675
2723
  "$type": "color",
2676
- "$value": "{color.green.100}"
2724
+ "$value": "{color.green.50}"
2677
2725
  },
2678
2726
  "tint-active": {
2679
2727
  "$type": "color",
2680
- "$value": "{color.green.300}"
2728
+ "$value": "{color.green.200}"
2681
2729
  },
2682
2730
  "tint-hover": {
2683
2731
  "$type": "color",
2684
- "$value": "{color.green.200}"
2732
+ "$value": "{color.green.100}"
2685
2733
  }
2686
2734
  },
2687
2735
  "tertiary": {
@@ -2693,21 +2741,37 @@
2693
2741
  "$type": "color",
2694
2742
  "$value": "{color.amber.400}"
2695
2743
  },
2744
+ "strong-active": {
2745
+ "$type": "color",
2746
+ "$value": "{color.amber.600}"
2747
+ },
2748
+ "strong-hover": {
2749
+ "$type": "color",
2750
+ "$value": "{color.amber.500}"
2751
+ },
2696
2752
  "subtle": {
2753
+ "$type": "color",
2754
+ "$value": "{color.amber.100}"
2755
+ },
2756
+ "subtle-active": {
2757
+ "$type": "color",
2758
+ "$value": "{color.amber.300}"
2759
+ },
2760
+ "subtle-hover": {
2697
2761
  "$type": "color",
2698
2762
  "$value": "{color.amber.200}"
2699
2763
  },
2700
2764
  "tint": {
2701
2765
  "$type": "color",
2702
- "$value": "{color.amber.100}"
2766
+ "$value": "{color.amber.50}"
2703
2767
  },
2704
2768
  "tint-active": {
2705
2769
  "$type": "color",
2706
- "$value": "{color.amber.300}"
2770
+ "$value": "{color.amber.200}"
2707
2771
  },
2708
2772
  "tint-hover": {
2709
2773
  "$type": "color",
2710
- "$value": "{color.amber.200}"
2774
+ "$value": "{color.amber.100}"
2711
2775
  }
2712
2776
  }
2713
2777
  }
@@ -3023,11 +3087,11 @@
3023
3087
  },
3024
3088
  "subtle": {
3025
3089
  "$type": "color",
3026
- "$value": "{color.accent.700}"
3090
+ "$value": "{color.accent.900}"
3027
3091
  },
3028
3092
  "tint": {
3029
3093
  "$type": "color",
3030
- "$value": "{color.accent.900}"
3094
+ "$value": "{color.accent.950}"
3031
3095
  }
3032
3096
  },
3033
3097
  "action": {
@@ -3045,27 +3109,27 @@
3045
3109
  },
3046
3110
  "subtle": {
3047
3111
  "$type": "color",
3048
- "$value": "{color.brand.800}"
3112
+ "$value": "{color.brand.900}"
3049
3113
  },
3050
3114
  "subtle-active": {
3051
3115
  "$type": "color",
3052
- "$value": "{color.brand.600}"
3116
+ "$value": "{color.brand.700}"
3053
3117
  },
3054
3118
  "subtle-hover": {
3055
3119
  "$type": "color",
3056
- "$value": "{color.brand.700}"
3120
+ "$value": "{color.brand.800}"
3057
3121
  },
3058
3122
  "tint": {
3059
3123
  "$type": "color",
3060
- "$value": "{color.brand.900}"
3124
+ "$value": "{color.brand.950}"
3061
3125
  },
3062
3126
  "tint-active": {
3063
3127
  "$type": "color",
3064
- "$value": "{color.brand.700}"
3128
+ "$value": "{color.brand.800}"
3065
3129
  },
3066
3130
  "tint-hover": {
3067
3131
  "$type": "color",
3068
- "$value": "{color.brand.800}"
3132
+ "$value": "{color.brand.900}"
3069
3133
  }
3070
3134
  },
3071
3135
  "backdrop": {
@@ -3074,7 +3138,7 @@
3074
3138
  },
3075
3139
  "background": {
3076
3140
  "$type": "color",
3077
- "$value": "{color.base.900}"
3141
+ "$value": "{color.base.950}"
3078
3142
  },
3079
3143
  "brand": {
3080
3144
  "core": {
@@ -3087,11 +3151,11 @@
3087
3151
  },
3088
3152
  "subtle": {
3089
3153
  "$type": "color",
3090
- "$value": "{color.brand.700}"
3154
+ "$value": "{color.brand.900}"
3091
3155
  },
3092
3156
  "tint": {
3093
3157
  "$type": "color",
3094
- "$value": "{color.brand.900}"
3158
+ "$value": "{color.brand.950}"
3095
3159
  }
3096
3160
  },
3097
3161
  "danger": {
@@ -3109,27 +3173,27 @@
3109
3173
  },
3110
3174
  "subtle": {
3111
3175
  "$type": "color",
3112
- "$value": "{color.red.700}"
3176
+ "$value": "{color.red.900}"
3113
3177
  },
3114
3178
  "subtle-active": {
3115
3179
  "$type": "color",
3116
- "$value": "{color.red.500}"
3180
+ "$value": "{color.red.700}"
3117
3181
  },
3118
3182
  "subtle-hover": {
3119
3183
  "$type": "color",
3120
- "$value": "{color.red.600}"
3184
+ "$value": "{color.red.800}"
3121
3185
  },
3122
3186
  "tint": {
3123
3187
  "$type": "color",
3124
- "$value": "{color.red.900}"
3188
+ "$value": "{color.red.950}"
3125
3189
  },
3126
3190
  "tint-active": {
3127
3191
  "$type": "color",
3128
- "$value": "{color.red.700}"
3192
+ "$value": "{color.red.800}"
3129
3193
  },
3130
3194
  "tint-hover": {
3131
3195
  "$type": "color",
3132
- "$value": "{color.red.800}"
3196
+ "$value": "{color.red.900}"
3133
3197
  }
3134
3198
  },
3135
3199
  "info": {
@@ -3137,43 +3201,75 @@
3137
3201
  "$type": "color",
3138
3202
  "$value": "{color.sky.300}"
3139
3203
  },
3204
+ "strong-active": {
3205
+ "$type": "color",
3206
+ "$value": "{color.sky.100}"
3207
+ },
3208
+ "strong-hover": {
3209
+ "$type": "color",
3210
+ "$value": "{color.sky.200}"
3211
+ },
3140
3212
  "subtle": {
3213
+ "$type": "color",
3214
+ "$value": "{color.sky.900}"
3215
+ },
3216
+ "subtle-active": {
3141
3217
  "$type": "color",
3142
3218
  "$value": "{color.sky.700}"
3143
3219
  },
3220
+ "subtle-hover": {
3221
+ "$type": "color",
3222
+ "$value": "{color.sky.800}"
3223
+ },
3144
3224
  "tint": {
3145
3225
  "$type": "color",
3146
- "$value": "{color.sky.900}"
3226
+ "$value": "{color.sky.950}"
3147
3227
  },
3148
3228
  "tint-active": {
3149
3229
  "$type": "color",
3150
- "$value": "{color.sky.700}"
3230
+ "$value": "{color.sky.800}"
3151
3231
  },
3152
3232
  "tint-hover": {
3153
3233
  "$type": "color",
3154
- "$value": "{color.sky.800}"
3234
+ "$value": "{color.sky.900}"
3155
3235
  }
3156
3236
  },
3157
3237
  "neutral": {
3158
3238
  "strong": {
3239
+ "$type": "color",
3240
+ "$value": "{color.base.300}"
3241
+ },
3242
+ "strong-active": {
3243
+ "$type": "color",
3244
+ "$value": "{color.base.100}"
3245
+ },
3246
+ "strong-hover": {
3159
3247
  "$type": "color",
3160
3248
  "$value": "{color.base.200}"
3161
3249
  },
3162
3250
  "subtle": {
3251
+ "$type": "color",
3252
+ "$value": "{color.base.900}"
3253
+ },
3254
+ "subtle-active": {
3255
+ "$type": "color",
3256
+ "$value": "{color.base.700}"
3257
+ },
3258
+ "subtle-hover": {
3163
3259
  "$type": "color",
3164
3260
  "$value": "{color.base.800}"
3165
3261
  },
3166
3262
  "tint": {
3167
3263
  "$type": "color",
3168
- "$value": "{color.base.900}"
3264
+ "$value": "{color.base.950}"
3169
3265
  },
3170
3266
  "tint-active": {
3171
3267
  "$type": "color",
3172
- "$value": "{color.base.700}"
3268
+ "$value": "{color.base.800}"
3173
3269
  },
3174
3270
  "tint-hover": {
3175
3271
  "$type": "color",
3176
- "$value": "{color.base.800}"
3272
+ "$value": "{color.base.900}"
3177
3273
  }
3178
3274
  },
3179
3275
  "primary": {
@@ -3205,21 +3301,37 @@
3205
3301
  "$type": "color",
3206
3302
  "$value": "{color.green.300}"
3207
3303
  },
3304
+ "strong-active": {
3305
+ "$type": "color",
3306
+ "$value": "{color.green.100}"
3307
+ },
3308
+ "strong-hover": {
3309
+ "$type": "color",
3310
+ "$value": "{color.green.200}"
3311
+ },
3208
3312
  "subtle": {
3313
+ "$type": "color",
3314
+ "$value": "{color.green.900}"
3315
+ },
3316
+ "subtle-active": {
3209
3317
  "$type": "color",
3210
3318
  "$value": "{color.green.700}"
3211
3319
  },
3320
+ "subtle-hover": {
3321
+ "$type": "color",
3322
+ "$value": "{color.green.800}"
3323
+ },
3212
3324
  "tint": {
3213
3325
  "$type": "color",
3214
- "$value": "{color.green.900}"
3326
+ "$value": "{color.green.950}"
3215
3327
  },
3216
3328
  "tint-active": {
3217
3329
  "$type": "color",
3218
- "$value": "{color.green.700}"
3330
+ "$value": "{color.green.800}"
3219
3331
  },
3220
3332
  "tint-hover": {
3221
3333
  "$type": "color",
3222
- "$value": "{color.green.800}"
3334
+ "$value": "{color.green.900}"
3223
3335
  }
3224
3336
  },
3225
3337
  "tertiary": {
@@ -3231,21 +3343,37 @@
3231
3343
  "$type": "color",
3232
3344
  "$value": "{color.amber.300}"
3233
3345
  },
3346
+ "strong-active": {
3347
+ "$type": "color",
3348
+ "$value": "{color.amber.100}"
3349
+ },
3350
+ "strong-hover": {
3351
+ "$type": "color",
3352
+ "$value": "{color.amber.200}"
3353
+ },
3234
3354
  "subtle": {
3355
+ "$type": "color",
3356
+ "$value": "{color.amber.900}"
3357
+ },
3358
+ "subtle-active": {
3235
3359
  "$type": "color",
3236
3360
  "$value": "{color.amber.700}"
3237
3361
  },
3362
+ "subtle-hover": {
3363
+ "$type": "color",
3364
+ "$value": "{color.amber.800}"
3365
+ },
3238
3366
  "tint": {
3239
3367
  "$type": "color",
3240
- "$value": "{color.amber.900}"
3368
+ "$value": "{color.amber.950}"
3241
3369
  },
3242
3370
  "tint-active": {
3243
3371
  "$type": "color",
3244
- "$value": "{color.amber.700}"
3372
+ "$value": "{color.amber.800}"
3245
3373
  },
3246
3374
  "tint-hover": {
3247
3375
  "$type": "color",
3248
- "$value": "{color.amber.800}"
3376
+ "$value": "{color.amber.900}"
3249
3377
  }
3250
3378
  }
3251
3379
  }