@aivenio/aquarium 5.1.0 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/_variables.scss +12 -0
  2. package/dist/atoms.cjs +61 -37
  3. package/dist/atoms.mjs +61 -37
  4. package/dist/charts.cjs +12 -0
  5. package/dist/charts.mjs +12 -0
  6. package/dist/src/atoms/Checkbox/Checkbox.js +1 -1
  7. package/dist/src/atoms/DatePicker/Calendar.js +3 -3
  8. package/dist/src/atoms/DatePicker/RangeCalendar.js +7 -7
  9. package/dist/src/atoms/DropdownMenu/DropdownMenu.js +2 -2
  10. package/dist/src/atoms/Filter/Filter.js +2 -2
  11. package/dist/src/atoms/Modal/Modal.js +2 -2
  12. package/dist/src/atoms/Navigation/Navigation.js +3 -3
  13. package/dist/src/atoms/ProgressBar/ProgressBar.js +4 -4
  14. package/dist/src/atoms/RadioButton/RadioButton.js +1 -1
  15. package/dist/src/atoms/Select/Select.js +3 -3
  16. package/dist/src/atoms/Skeleton/Skeleton.js +2 -2
  17. package/dist/src/atoms/Stepper/Stepper.js +2 -2
  18. package/dist/src/atoms/Switch/Switch.js +4 -4
  19. package/dist/src/atoms/Timeline/Timeline.js +2 -2
  20. package/dist/src/atoms/Toast/Toast.js +4 -4
  21. package/dist/src/atoms/utils/index.js +2 -2
  22. package/dist/src/molecules/Badge/Badge.js +1 -1
  23. package/dist/src/molecules/Chip/Chip.js +2 -2
  24. package/dist/src/molecules/ListItem/ListItem.js +2 -2
  25. package/dist/src/molecules/MultiInput/InputChip.js +2 -2
  26. package/dist/src/molecules/NativeSelect/NativeSelect.js +2 -2
  27. package/dist/src/molecules/TagLabel/TagLabel.js +4 -4
  28. package/dist/src/tokens/tokens.json +12 -0
  29. package/dist/src/utils/constants.js +2 -2
  30. package/dist/styles.css +135 -64
  31. package/dist/system.cjs +65 -41
  32. package/dist/system.mjs +65 -41
  33. package/dist/tailwind.theme.json +12 -0
  34. package/dist/tokens.json +12 -0
  35. package/dist/tsconfig.module.tsbuildinfo +1 -1
  36. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -659,10 +659,13 @@ video {
659
659
  --aquarium-background-color-popover-content: var(--aquarium-colors-white);
660
660
  --aquarium-background-color-muted: var(--aquarium-colors-grey-0);
661
661
  --aquarium-background-color-default: var(--aquarium-colors-grey-5);
662
+ --aquarium-background-color-medium: var(--aquarium-colors-grey-5);
662
663
  --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
663
664
  --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-40);
664
665
  --aquarium-background-color-primary-default: var(--aquarium-colors-primary-80);
666
+ --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-80);
665
667
  --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-90);
668
+ --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-90);
666
669
  --aquarium-background-color-primary-active: var(--aquarium-colors-primary-5);
667
670
  --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-5);
668
671
  --aquarium-background-color-action-primary-button-default: var(--aquarium-colors-primary-80);
@@ -671,19 +674,23 @@ video {
671
674
  --aquarium-background-color-action-primary-button-disabled: var(--aquarium-colors-primary-40);
672
675
  --aquarium-background-color-info-muted: var(--aquarium-colors-info-10);
673
676
  --aquarium-background-color-info-default: var(--aquarium-colors-info-70);
677
+ --aquarium-background-color-info-graphic: var(--aquarium-colors-info-70);
674
678
  --aquarium-background-color-info-intense: var(--aquarium-colors-info-90);
675
679
  --aquarium-background-color-info-inverse: var(--aquarium-colors-info-70);
676
680
  --aquarium-background-color-success-muted: var(--aquarium-colors-success-5);
677
681
  --aquarium-background-color-success-default: var(--aquarium-colors-success-70);
682
+ --aquarium-background-color-success-graphic: var(--aquarium-colors-success-70);
678
683
  --aquarium-background-color-success-intense: var(--aquarium-colors-success-90);
679
684
  --aquarium-background-color-success-inverse: var(--aquarium-colors-success-70);
680
685
  --aquarium-background-color-warning-muted: var(--aquarium-colors-warning-5);
681
686
  --aquarium-background-color-warning-default: var(--aquarium-colors-warning-70);
687
+ --aquarium-background-color-warning-graphic: var(--aquarium-colors-warning-70);
682
688
  --aquarium-background-color-warning-intense: var(--aquarium-colors-warning-90);
683
689
  --aquarium-background-color-warning-inverse: var(--aquarium-colors-warning-70);
684
690
  --aquarium-background-color-danger-muted: var(--aquarium-colors-error-10);
685
691
  --aquarium-background-color-danger-default: var(--aquarium-colors-error-20);
686
692
  --aquarium-background-color-danger-intense: var(--aquarium-colors-error-50);
693
+ --aquarium-background-color-danger-graphic: var(--aquarium-colors-error-50);
687
694
  --aquarium-background-color-danger-inverse: var(--aquarium-colors-error-70);
688
695
  --aquarium-background-color-status-announcement: var(--aquarium-colors-primary-5);
689
696
  --aquarium-background-color-status-info: var(--aquarium-colors-info-10);
@@ -721,22 +728,27 @@ video {
721
728
  --aquarium-text-color-primary-inactive: var(--aquarium-colors-primary-40);
722
729
  --aquarium-text-color-primary-active: var(--aquarium-colors-primary-90);
723
730
  --aquarium-text-color-primary-muted: var(--aquarium-colors-primary-60);
731
+ --aquarium-text-color-primary-graphic: var(--aquarium-colors-primary-60);
724
732
  --aquarium-text-color-primary-default: var(--aquarium-colors-primary-70);
725
733
  --aquarium-text-color-primary-intense: var(--aquarium-colors-primary-80);
726
734
  --aquarium-text-color-info-inactive: var(--aquarium-colors-info-20);
727
735
  --aquarium-text-color-info-muted: var(--aquarium-colors-info-40);
736
+ --aquarium-text-color-info-graphic: var(--aquarium-colors-info-40);
728
737
  --aquarium-text-color-info-default: var(--aquarium-colors-info-70);
729
738
  --aquarium-text-color-info-intense: var(--aquarium-colors-info-90);
730
739
  --aquarium-text-color-success-inactive: var(--aquarium-colors-success-10);
731
740
  --aquarium-text-color-success-muted: var(--aquarium-colors-success-30);
741
+ --aquarium-text-color-success-graphic: var(--aquarium-colors-success-30);
732
742
  --aquarium-text-color-success-default: var(--aquarium-colors-success-70);
733
743
  --aquarium-text-color-success-intense: var(--aquarium-colors-success-90);
734
744
  --aquarium-text-color-warning-inactive: var(--aquarium-colors-warning-20);
735
745
  --aquarium-text-color-warning-muted: var(--aquarium-colors-warning-40);
746
+ --aquarium-text-color-warning-graphic: var(--aquarium-colors-warning-40);
736
747
  --aquarium-text-color-warning-default: var(--aquarium-colors-warning-80);
737
748
  --aquarium-text-color-warning-intense: var(--aquarium-colors-warning-100);
738
749
  --aquarium-text-color-danger-inactive: var(--aquarium-colors-error-10);
739
750
  --aquarium-text-color-danger-muted: var(--aquarium-colors-error-20);
751
+ --aquarium-text-color-danger-graphic: var(--aquarium-colors-error-20);
740
752
  --aquarium-text-color-danger-default: var(--aquarium-colors-error-50);
741
753
  --aquarium-text-color-danger-intense: var(--aquarium-colors-error-80);
742
754
  --aquarium-box-shadow-24dp: var(--aquarium-elevations-24dp);
@@ -2321,6 +2333,10 @@ video {
2321
2333
  background-color: rgba(255,173,179,1);
2322
2334
  background-color: var(--aquarium-background-color-danger-default);
2323
2335
  }
2336
+ .bg-danger-graphic{
2337
+ background-color: rgba(230,39,40,1);
2338
+ background-color: var(--aquarium-background-color-danger-graphic);
2339
+ }
2324
2340
  .bg-danger-intense{
2325
2341
  background-color: rgba(230,39,40,1);
2326
2342
  background-color: var(--aquarium-background-color-danger-intense);
@@ -2489,6 +2505,10 @@ video {
2489
2505
  background-color: rgba(3,153,227,1);
2490
2506
  background-color: var(--aquarium-background-color-info-default);
2491
2507
  }
2508
+ .bg-info-graphic{
2509
+ background-color: rgba(3,153,227,1);
2510
+ background-color: var(--aquarium-background-color-info-graphic);
2511
+ }
2492
2512
  .bg-info-intense{
2493
2513
  background-color: rgba(1,116,186,1);
2494
2514
  background-color: var(--aquarium-background-color-info-intense);
@@ -2513,6 +2533,10 @@ video {
2513
2533
  background-color: white;
2514
2534
  background-color: var(--aquarium-background-color-layer);
2515
2535
  }
2536
+ .bg-medium{
2537
+ background-color: rgba(237,237,240,1);
2538
+ background-color: var(--aquarium-background-color-medium);
2539
+ }
2516
2540
  .bg-muted{
2517
2541
  background-color: rgba(247,247,250,1);
2518
2542
  background-color: var(--aquarium-background-color-muted);
@@ -2581,6 +2605,10 @@ video {
2581
2605
  background-color: rgba(53,69,190,1);
2582
2606
  background-color: var(--aquarium-background-color-primary-default);
2583
2607
  }
2608
+ .bg-primary-graphic{
2609
+ background-color: rgba(53,69,190,1);
2610
+ background-color: var(--aquarium-background-color-primary-graphic);
2611
+ }
2584
2612
  .bg-primary-hover{
2585
2613
  background-color: rgba(243,246,255,1);
2586
2614
  background-color: var(--aquarium-background-color-primary-hover);
@@ -2589,6 +2617,10 @@ video {
2589
2617
  background-color: rgba(34,47,149,1);
2590
2618
  background-color: var(--aquarium-background-color-primary-intense);
2591
2619
  }
2620
+ .bg-primary-inverse{
2621
+ background-color: rgba(34,47,149,1);
2622
+ background-color: var(--aquarium-background-color-primary-inverse);
2623
+ }
2592
2624
  .bg-primary-muted{
2593
2625
  background-color: rgba(185,197,239,1);
2594
2626
  background-color: var(--aquarium-background-color-primary-muted);
@@ -2713,6 +2745,10 @@ video {
2713
2745
  background-color: rgba(0,179,0,1);
2714
2746
  background-color: var(--aquarium-background-color-success-default);
2715
2747
  }
2748
+ .bg-success-graphic{
2749
+ background-color: rgba(0,179,0,1);
2750
+ background-color: var(--aquarium-background-color-success-graphic);
2751
+ }
2716
2752
  .bg-success-intense{
2717
2753
  background-color: rgba(0,142,0,1);
2718
2754
  background-color: var(--aquarium-background-color-success-intense);
@@ -2781,6 +2817,10 @@ video {
2781
2817
  background-color: rgba(255,179,0,1);
2782
2818
  background-color: var(--aquarium-background-color-warning-default);
2783
2819
  }
2820
+ .bg-warning-graphic{
2821
+ background-color: rgba(255,179,0,1);
2822
+ background-color: var(--aquarium-background-color-warning-graphic);
2823
+ }
2784
2824
  .bg-warning-intense{
2785
2825
  background-color: rgba(255,144,3,1);
2786
2826
  background-color: var(--aquarium-background-color-warning-intense);
@@ -3111,6 +3151,10 @@ video {
3111
3151
  color: rgba(230,39,40,1);
3112
3152
  color: var(--aquarium-text-color-danger-default);
3113
3153
  }
3154
+ .text-danger-graphic{
3155
+ color: rgba(255,173,179,1);
3156
+ color: var(--aquarium-text-color-danger-graphic);
3157
+ }
3114
3158
  .text-danger-inactive{
3115
3159
  color: rgba(255,203,210,1);
3116
3160
  color: var(--aquarium-text-color-danger-inactive);
@@ -3279,6 +3323,10 @@ video {
3279
3323
  color: rgba(3,153,227,1);
3280
3324
  color: var(--aquarium-text-color-info-default);
3281
3325
  }
3326
+ .text-info-graphic{
3327
+ color: rgba(76,194,247,1);
3328
+ color: var(--aquarium-text-color-info-graphic);
3329
+ }
3282
3330
  .text-info-inactive{
3283
3331
  color: rgba(180,229,251,1);
3284
3332
  color: var(--aquarium-text-color-info-inactive);
@@ -3359,6 +3407,10 @@ video {
3359
3407
  color: rgba(88,101,205,1);
3360
3408
  color: var(--aquarium-text-color-primary-default);
3361
3409
  }
3410
+ .text-primary-graphic{
3411
+ color: rgba(129,142,236,1);
3412
+ color: var(--aquarium-text-color-primary-graphic);
3413
+ }
3362
3414
  .text-primary-inactive{
3363
3415
  color: rgba(185,197,239,1);
3364
3416
  color: var(--aquarium-text-color-primary-inactive);
@@ -3471,6 +3523,10 @@ video {
3471
3523
  color: rgba(0,179,0,1);
3472
3524
  color: var(--aquarium-text-color-success-default);
3473
3525
  }
3526
+ .text-success-graphic{
3527
+ color: rgba(137,235,128,1);
3528
+ color: var(--aquarium-text-color-success-graphic);
3529
+ }
3474
3530
  .text-success-inactive{
3475
3531
  color: rgba(203,255,201,1);
3476
3532
  color: var(--aquarium-text-color-success-inactive);
@@ -3539,6 +3595,10 @@ video {
3539
3595
  color: rgba(253,159,0,1);
3540
3596
  color: var(--aquarium-text-color-warning-default);
3541
3597
  }
3598
+ .text-warning-graphic{
3599
+ color: rgba(253,212,77,1);
3600
+ color: var(--aquarium-text-color-warning-graphic);
3601
+ }
3542
3602
  .text-warning-inactive{
3543
3603
  color: rgba(254,235,178,1);
3544
3604
  color: var(--aquarium-text-color-warning-inactive);
@@ -3753,10 +3813,13 @@ input[type="number"].no-arrows{
3753
3813
  --aquarium-background-color-overlay: var(--aquarium-colors-grey-90);
3754
3814
  --aquarium-background-color-muted: var(--aquarium-colors-grey-90);
3755
3815
  --aquarium-background-color-default: var(--aquarium-colors-grey-80);
3816
+ --aquarium-background-color-medium: var(--aquarium-colors-grey-80);
3756
3817
  --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
3757
3818
  --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-90);
3758
3819
  --aquarium-background-color-primary-default: var(--aquarium-colors-primary-60);
3820
+ --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-60);
3759
3821
  --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-10);
3822
+ --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-10);
3760
3823
  --aquarium-background-color-primary-active: var(--aquarium-colors-primary-90);
3761
3824
  --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-90);
3762
3825
  --aquarium-background-color-action-primary-button-default: var(--aquarium-colors-primary-90);
@@ -3765,19 +3828,23 @@ input[type="number"].no-arrows{
3765
3828
  --aquarium-background-color-action-primary-button-disabled: color-mix(in srgb, var(--aquarium-colors-primary-60) 50%, transparent);
3766
3829
  --aquarium-background-color-info-muted: var(--aquarium-colors-info-100);
3767
3830
  --aquarium-background-color-info-default: var(--aquarium-colors-info-90);
3831
+ --aquarium-background-color-info-graphic: var(--aquarium-colors-info-90);
3768
3832
  --aquarium-background-color-info-intense: var(--aquarium-colors-info-40);
3769
3833
  --aquarium-background-color-info-inverse: var(--aquarium-colors-info-30);
3770
3834
  --aquarium-background-color-success-muted: var(--aquarium-colors-success-100);
3771
3835
  --aquarium-background-color-success-default: var(--aquarium-colors-success-90);
3836
+ --aquarium-background-color-success-graphic: var(--aquarium-colors-success-90);
3772
3837
  --aquarium-background-color-success-intense: var(--aquarium-colors-success-80);
3773
3838
  --aquarium-background-color-success-inverse: var(--aquarium-colors-success-50);
3774
3839
  --aquarium-background-color-warning-muted: var(--aquarium-colors-warning-100);
3775
3840
  --aquarium-background-color-warning-default: var(--aquarium-colors-warning-90);
3841
+ --aquarium-background-color-warning-graphic: var(--aquarium-colors-warning-90);
3776
3842
  --aquarium-background-color-warning-intense: var(--aquarium-colors-warning-40);
3777
3843
  --aquarium-background-color-warning-inverse: var(--aquarium-colors-warning-50);
3778
3844
  --aquarium-background-color-danger-muted: var(--aquarium-colors-error-90);
3779
3845
  --aquarium-background-color-danger-default: var(--aquarium-colors-error-80);
3780
3846
  --aquarium-background-color-danger-intense: var(--aquarium-colors-error-40);
3847
+ --aquarium-background-color-danger-graphic: var(--aquarium-colors-error-40);
3781
3848
  --aquarium-background-color-danger-inverse: var(--aquarium-colors-error-30);
3782
3849
  --aquarium-background-color-status-announcement: color-mix(in srgb, var(--aquarium-colors-primary-90) 30%, transparent);
3783
3850
  --aquarium-background-color-status-info: color-mix(in srgb, var(--aquarium-colors-info-100) 30%, transparent);
@@ -3793,22 +3860,27 @@ input[type="number"].no-arrows{
3793
3860
  --aquarium-text-color-primary-inactive: var(--aquarium-colors-grey-60);
3794
3861
  --aquarium-text-color-primary-active: var(--aquarium-colors-primary-60);
3795
3862
  --aquarium-text-color-primary-muted: var(--aquarium-colors-primary-90);
3863
+ --aquarium-text-color-primary-graphic: var(--aquarium-colors-primary-90);
3796
3864
  --aquarium-text-color-primary-default: var(--aquarium-colors-primary-60);
3797
3865
  --aquarium-text-color-primary-intense: var(--aquarium-colors-primary-40);
3798
3866
  --aquarium-text-color-info-inactive: var(--aquarium-colors-info-100);
3799
3867
  --aquarium-text-color-info-muted: var(--aquarium-colors-info-100);
3868
+ --aquarium-text-color-info-graphic: var(--aquarium-colors-info-100);
3800
3869
  --aquarium-text-color-info-default: var(--aquarium-colors-info-70);
3801
3870
  --aquarium-text-color-info-intense: var(--aquarium-colors-info-90);
3802
3871
  --aquarium-text-color-success-inactive: var(--aquarium-colors-success-100);
3803
3872
  --aquarium-text-color-success-muted: var(--aquarium-colors-success-100);
3873
+ --aquarium-text-color-success-graphic: var(--aquarium-colors-success-100);
3804
3874
  --aquarium-text-color-success-default: var(--aquarium-colors-success-90);
3805
3875
  --aquarium-text-color-success-intense: var(--aquarium-colors-success-70);
3806
3876
  --aquarium-text-color-warning-inactive: var(--aquarium-colors-warning-100);
3807
3877
  --aquarium-text-color-warning-muted: var(--aquarium-colors-warning-100);
3878
+ --aquarium-text-color-warning-graphic: var(--aquarium-colors-warning-100);
3808
3879
  --aquarium-text-color-warning-default: var(--aquarium-colors-warning-70);
3809
3880
  --aquarium-text-color-warning-intense: var(--aquarium-colors-warning-90);
3810
3881
  --aquarium-text-color-danger-inactive: var(--aquarium-colors-error-100);
3811
3882
  --aquarium-text-color-danger-muted: var(--aquarium-colors-error-100);
3883
+ --aquarium-text-color-danger-graphic: var(--aquarium-colors-error-100);
3812
3884
  --aquarium-text-color-danger-default: var(--aquarium-colors-error-50);
3813
3885
  --aquarium-text-color-danger-intense: var(--aquarium-colors-error-30);
3814
3886
 
@@ -3825,19 +3897,18 @@ input[type="number"].no-arrows{
3825
3897
  }
3826
3898
  .aquarium-theme-dark .Aquarium-Switch {
3827
3899
  --aquarium-background-color-intense: var(--aquarium-colors-grey-70);
3828
- --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-60);
3900
+ --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-60);
3829
3901
  }
3830
3902
  .aquarium-theme-dark .Aquarium-Button\.Primary:disabled {
3831
- color: rgba(53,69,190,1);
3832
- color: var(--aquarium-text-color-primary-intense);
3903
+ color: var(--aquarium-text-color-primary-inverse);
3833
3904
  }
3834
3905
  .aquarium-theme-dark .Aquarium-Checkbox input:disabled {
3835
3906
  background-color: rgba(237,237,240,1);
3836
- background-color: var(--aquarium-background-color-default);
3907
+ background-color: var(--aquarium-background-color-medium);
3837
3908
  }
3838
3909
  .aquarium-theme-dark .Aquarium-Checkbox input:disabled + svg {
3839
3910
  background-color: rgba(237,237,240,1);
3840
- background-color: var(--aquarium-background-color-default);
3911
+ background-color: var(--aquarium-background-color-medium);
3841
3912
  border-color: rgba(247,247,250,1);
3842
3913
  border-color: var(--aquarium-background-color-muted);
3843
3914
  }
@@ -3850,14 +3921,14 @@ input[type="number"].no-arrows{
3850
3921
  stroke: var(--aquarium-border-color-default);
3851
3922
  }
3852
3923
  .aquarium-theme-dark .Aquarium-Button\.Secondary {
3853
- --tw-ring-color: var(--aquarium-text-color-primary-intense);
3924
+ --tw-ring-color: var(--aquarium-text-color-primary-inverse);
3854
3925
  }
3855
3926
  .aquarium-theme-dark .Aquarium-Button\.Secondary:active,
3856
3927
  .aquarium-theme-dark .Aquarium-Button\.Secondary:hover {
3857
3928
  background-color: transparent;
3858
3929
  color: rgba(34,47,149,1);
3859
- color: var(--aquarium-background-color-primary-intense);
3860
- --tw-ring-color: var(--aquarium-background-color-primary-intense);
3930
+ color: var(--aquarium-background-color-primary-inverse);
3931
+ --tw-ring-color: var(--aquarium-background-color-primary-inverse);
3861
3932
  }
3862
3933
  .aquarium-theme-dark .Aquarium-Button\.Secondary:focus {
3863
3934
  --tw-ring-color: var(--aquarium-border-color-primary-default);
@@ -3889,7 +3960,7 @@ input[type="number"].no-arrows{
3889
3960
  .aquarium-theme-dark .Aquarium-Select\.Item.bg-muted,
3890
3961
  .aquarium-theme-dark .Aquarium-Select\.Item.hover\:bg-muted:hover{
3891
3962
  background-color: rgba(237,237,240,1);
3892
- background-color: var(--aquarium-background-color-default);
3963
+ background-color: var(--aquarium-background-color-medium);
3893
3964
  }
3894
3965
  .aquarium-theme-dark .Aquarium-Card {
3895
3966
  --aquarium-background-color-primary-hover: color-mix(in srgb, var(--aquarium-colors-primary-100) 70%, transparent);
@@ -3923,10 +3994,10 @@ input[type="number"].no-arrows{
3923
3994
  --aquarium-colors-white: var(--aquarium-background-color-muted);
3924
3995
  }
3925
3996
  .aquarium-theme-dark .Aquarium-Modal .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Popover .Aquarium-Banner {
3926
- --aquarium-background-color-muted: var(--aquarium-background-color-default);
3997
+ --aquarium-background-color-muted: var(--aquarium-background-color-medium);
3927
3998
  }
3928
3999
  .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip {
3929
- --aquarium-background-color-muted: var(--aquarium-background-color-default);
4000
+ --aquarium-background-color-muted: var(--aquarium-background-color-medium);
3930
4001
  }
3931
4002
  .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:focus {
3932
4003
  --aquarium-background-color-intense: var(--aquarium-background-color-inactive);
@@ -3960,7 +4031,7 @@ input[type="number"].no-arrows{
3960
4031
  .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataList [role="row"]:hover > *:not([role="columnheader"]),
3961
4032
  .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataTable tbody tr:hover > *:not([role="columnheader"]) {
3962
4033
  background-color: rgba(237,237,240,1);
3963
- background-color: var(--aquarium-background-color-default);
4034
+ background-color: var(--aquarium-background-color-medium);
3964
4035
  }
3965
4036
  .file\:typography-small-strong::file-selector-button{
3966
4037
  font: normal 500 14px/1.42 Inter;
@@ -4132,9 +4203,9 @@ input[type="number"].no-arrows{
4132
4203
  border-color: transparent;
4133
4204
  border-color: var(--aquarium-colors-transparent);
4134
4205
  }
4135
- .checked\:bg-primary-default:checked{
4206
+ .checked\:bg-primary-graphic:checked{
4136
4207
  background-color: rgba(53,69,190,1);
4137
- background-color: var(--aquarium-background-color-primary-default);
4208
+ background-color: var(--aquarium-background-color-primary-graphic);
4138
4209
  }
4139
4210
  .checked\:bg-primary-muted:checked{
4140
4211
  background-color: rgba(185,197,239,1);
@@ -4184,9 +4255,9 @@ input[type="number"].no-arrows{
4184
4255
  border-color: transparent;
4185
4256
  border-color: var(--aquarium-colors-transparent);
4186
4257
  }
4187
- .peer\/switch:checked ~ .peer-checked\/switch\:text-primary-muted{
4258
+ .peer\/switch:checked ~ .peer-checked\/switch\:text-primary-graphic{
4188
4259
  color: rgba(129,142,236,1);
4189
- color: var(--aquarium-text-color-primary-muted);
4260
+ color: var(--aquarium-text-color-primary-graphic);
4190
4261
  }
4191
4262
  .peer:checked ~ .peer-checked\:text-primary-default{
4192
4263
  color: rgba(88,101,205,1);
@@ -4268,10 +4339,6 @@ input[type="number"].no-arrows{
4268
4339
  background-color: rgba(255,203,210,1);
4269
4340
  background-color: var(--aquarium-background-color-danger-muted);
4270
4341
  }
4271
- .hover\:bg-default:where([data-rac])[data-hovered]{
4272
- background-color: rgba(237,237,240,1);
4273
- background-color: var(--aquarium-background-color-default);
4274
- }
4275
4342
  .hover\:bg-icon-button-hover:where([data-rac])[data-hovered]{
4276
4343
  background-color: rgba(25,25,29,.05);
4277
4344
  background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4280,6 +4347,10 @@ input[type="number"].no-arrows{
4280
4347
  background-color: rgba(210,210,214,1);
4281
4348
  background-color: var(--aquarium-background-color-intense);
4282
4349
  }
4350
+ .hover\:bg-medium:where([data-rac])[data-hovered]{
4351
+ background-color: rgba(237,237,240,1);
4352
+ background-color: var(--aquarium-background-color-medium);
4353
+ }
4283
4354
  .hover\:bg-muted:where([data-rac])[data-hovered]{
4284
4355
  background-color: rgba(247,247,250,1);
4285
4356
  background-color: var(--aquarium-background-color-muted);
@@ -4300,9 +4371,9 @@ input[type="number"].no-arrows{
4300
4371
  -webkit-text-decoration-line: underline;
4301
4372
  text-decoration-line: underline;
4302
4373
  }
4303
- .hover\:checked\:bg-primary-intense:checked:where([data-rac])[data-hovered]{
4374
+ .hover\:checked\:bg-primary-inverse:checked:where([data-rac])[data-hovered]{
4304
4375
  background-color: rgba(34,47,149,1);
4305
- background-color: var(--aquarium-background-color-primary-intense);
4376
+ background-color: var(--aquarium-background-color-primary-inverse);
4306
4377
  }
4307
4378
  .hover\:cursor-pointer:where(:not([data-rac])):hover{
4308
4379
  cursor: pointer;
@@ -4319,10 +4390,6 @@ input[type="number"].no-arrows{
4319
4390
  background-color: rgba(255,203,210,1);
4320
4391
  background-color: var(--aquarium-background-color-danger-muted);
4321
4392
  }
4322
- .hover\:bg-default:where(:not([data-rac])):hover{
4323
- background-color: rgba(237,237,240,1);
4324
- background-color: var(--aquarium-background-color-default);
4325
- }
4326
4393
  .hover\:bg-icon-button-hover:where(:not([data-rac])):hover{
4327
4394
  background-color: rgba(25,25,29,.05);
4328
4395
  background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4331,6 +4398,10 @@ input[type="number"].no-arrows{
4331
4398
  background-color: rgba(210,210,214,1);
4332
4399
  background-color: var(--aquarium-background-color-intense);
4333
4400
  }
4401
+ .hover\:bg-medium:where(:not([data-rac])):hover{
4402
+ background-color: rgba(237,237,240,1);
4403
+ background-color: var(--aquarium-background-color-medium);
4404
+ }
4334
4405
  .hover\:bg-muted:where(:not([data-rac])):hover{
4335
4406
  background-color: rgba(247,247,250,1);
4336
4407
  background-color: var(--aquarium-background-color-muted);
@@ -4351,24 +4422,24 @@ input[type="number"].no-arrows{
4351
4422
  -webkit-text-decoration-line: underline;
4352
4423
  text-decoration-line: underline;
4353
4424
  }
4354
- .hover\:checked\:bg-primary-intense:checked:where(:not([data-rac])):hover{
4425
+ .hover\:checked\:bg-primary-inverse:checked:where(:not([data-rac])):hover{
4355
4426
  background-color: rgba(34,47,149,1);
4356
- background-color: var(--aquarium-background-color-primary-intense);
4427
+ background-color: var(--aquarium-background-color-primary-inverse);
4357
4428
  }
4358
4429
  .group:where([data-rac])[data-hovered] .group-hover\:visible{
4359
4430
  visibility: visible;
4360
4431
  }
4361
- .group:where([data-rac])[data-hovered] .group-hover\:bg-default{
4432
+ .group:where([data-rac])[data-hovered] .group-hover\:bg-medium{
4362
4433
  background-color: rgba(237,237,240,1);
4363
- background-color: var(--aquarium-background-color-default);
4434
+ background-color: var(--aquarium-background-color-medium);
4364
4435
  }
4365
4436
  .group:where([data-rac])[data-hovered] .group-hover\:bg-muted{
4366
4437
  background-color: rgba(247,247,250,1);
4367
4438
  background-color: var(--aquarium-background-color-muted);
4368
4439
  }
4369
- .group:where([data-rac])[data-hovered] .group-hover\:bg-primary-default{
4440
+ .group:where([data-rac])[data-hovered] .group-hover\:bg-primary-graphic{
4370
4441
  background-color: rgba(53,69,190,1);
4371
- background-color: var(--aquarium-background-color-primary-default);
4442
+ background-color: var(--aquarium-background-color-primary-graphic);
4372
4443
  }
4373
4444
  .group:where([data-rac])[data-hovered] .group-hover\:opacity-100{
4374
4445
  opacity: 1;
@@ -4376,17 +4447,17 @@ input[type="number"].no-arrows{
4376
4447
  .group:where(:not([data-rac])):hover .group-hover\:visible{
4377
4448
  visibility: visible;
4378
4449
  }
4379
- .group:where(:not([data-rac])):hover .group-hover\:bg-default{
4450
+ .group:where(:not([data-rac])):hover .group-hover\:bg-medium{
4380
4451
  background-color: rgba(237,237,240,1);
4381
- background-color: var(--aquarium-background-color-default);
4452
+ background-color: var(--aquarium-background-color-medium);
4382
4453
  }
4383
4454
  .group:where(:not([data-rac])):hover .group-hover\:bg-muted{
4384
4455
  background-color: rgba(247,247,250,1);
4385
4456
  background-color: var(--aquarium-background-color-muted);
4386
4457
  }
4387
- .group:where(:not([data-rac])):hover .group-hover\:bg-primary-default{
4458
+ .group:where(:not([data-rac])):hover .group-hover\:bg-primary-graphic{
4388
4459
  background-color: rgba(53,69,190,1);
4389
- background-color: var(--aquarium-background-color-primary-default);
4460
+ background-color: var(--aquarium-background-color-primary-graphic);
4390
4461
  }
4391
4462
  .group:where(:not([data-rac])):hover .group-hover\:opacity-100{
4392
4463
  opacity: 1;
@@ -4435,14 +4506,14 @@ input[type="number"].no-arrows{
4435
4506
  background-color: rgba(255,173,179,1);
4436
4507
  background-color: var(--aquarium-background-color-danger-default);
4437
4508
  }
4438
- .focus\:bg-default:where([data-rac])[data-focused]{
4439
- background-color: rgba(237,237,240,1);
4440
- background-color: var(--aquarium-background-color-default);
4441
- }
4442
4509
  .focus\:bg-intense:where([data-rac])[data-focused]{
4443
4510
  background-color: rgba(210,210,214,1);
4444
4511
  background-color: var(--aquarium-background-color-intense);
4445
4512
  }
4513
+ .focus\:bg-medium:where([data-rac])[data-focused]{
4514
+ background-color: rgba(237,237,240,1);
4515
+ background-color: var(--aquarium-background-color-medium);
4516
+ }
4446
4517
  .focus\:text-primary-intense:where([data-rac])[data-focused]{
4447
4518
  color: rgba(53,69,190,1);
4448
4519
  color: var(--aquarium-text-color-primary-intense);
@@ -4469,14 +4540,14 @@ input[type="number"].no-arrows{
4469
4540
  background-color: rgba(255,173,179,1);
4470
4541
  background-color: var(--aquarium-background-color-danger-default);
4471
4542
  }
4472
- .focus\:bg-default:where(:not([data-rac])):focus{
4473
- background-color: rgba(237,237,240,1);
4474
- background-color: var(--aquarium-background-color-default);
4475
- }
4476
4543
  .focus\:bg-intense:where(:not([data-rac])):focus{
4477
4544
  background-color: rgba(210,210,214,1);
4478
4545
  background-color: var(--aquarium-background-color-intense);
4479
4546
  }
4547
+ .focus\:bg-medium:where(:not([data-rac])):focus{
4548
+ background-color: rgba(237,237,240,1);
4549
+ background-color: var(--aquarium-background-color-medium);
4550
+ }
4480
4551
  .focus\:text-primary-intense:where(:not([data-rac])):focus{
4481
4552
  color: rgba(53,69,190,1);
4482
4553
  color: var(--aquarium-text-color-primary-intense);
@@ -4682,21 +4753,21 @@ input[type="number"].no-arrows{
4682
4753
  background-color: rgba(210,210,214,1);
4683
4754
  background-color: var(--aquarium-background-color-intense);
4684
4755
  }
4685
- .group[data-pressed] .group-pressed\:bg-primary-intense{
4756
+ .group[data-pressed] .group-pressed\:bg-primary-inverse{
4686
4757
  background-color: rgba(34,47,149,1);
4687
- background-color: var(--aquarium-background-color-primary-intense);
4758
+ background-color: var(--aquarium-background-color-primary-inverse);
4688
4759
  }
4689
- .group:where([data-rac])[data-invalid][data-pressed] .group-invalid\:group-pressed\:bg-danger-intense{
4760
+ .group:where([data-rac])[data-invalid][data-pressed] .group-invalid\:group-pressed\:bg-danger-graphic{
4690
4761
  background-color: rgba(230,39,40,1);
4691
- background-color: var(--aquarium-background-color-danger-intense);
4762
+ background-color: var(--aquarium-background-color-danger-graphic);
4692
4763
  }
4693
- .group:where(:not([data-rac])):invalid[data-pressed] .group-invalid\:group-pressed\:bg-danger-intense{
4764
+ .group:where(:not([data-rac])):invalid[data-pressed] .group-invalid\:group-pressed\:bg-danger-graphic{
4694
4765
  background-color: rgba(230,39,40,1);
4695
- background-color: var(--aquarium-background-color-danger-intense);
4766
+ background-color: var(--aquarium-background-color-danger-graphic);
4696
4767
  }
4697
- .selected\:bg-primary-default[data-selected]{
4768
+ .selected\:bg-primary-graphic[data-selected]{
4698
4769
  background-color: rgba(53,69,190,1);
4699
- background-color: var(--aquarium-background-color-primary-default);
4770
+ background-color: var(--aquarium-background-color-primary-graphic);
4700
4771
  }
4701
4772
  .invalid\:selected\:bg-danger-default[data-selected]:where([data-rac])[data-invalid]{
4702
4773
  background-color: rgba(255,173,179,1);
@@ -4733,9 +4804,9 @@ input[type="number"].no-arrows{
4733
4804
  background-color: white;
4734
4805
  background-color: var(--aquarium-background-color-body);
4735
4806
  }
4736
- .disabled\:bg-default:where([data-rac])[data-disabled]{
4807
+ .disabled\:bg-medium:where([data-rac])[data-disabled]{
4737
4808
  background-color: rgba(237,237,240,1);
4738
- background-color: var(--aquarium-background-color-default);
4809
+ background-color: var(--aquarium-background-color-medium);
4739
4810
  }
4740
4811
  .disabled\:bg-muted:where([data-rac])[data-disabled]{
4741
4812
  background-color: rgba(247,247,250,1);
@@ -4773,9 +4844,9 @@ input[type="number"].no-arrows{
4773
4844
  background-color: white;
4774
4845
  background-color: var(--aquarium-background-color-body);
4775
4846
  }
4776
- .disabled\:bg-default:where(:not([data-rac])):disabled{
4847
+ .disabled\:bg-medium:where(:not([data-rac])):disabled{
4777
4848
  background-color: rgba(237,237,240,1);
4778
- background-color: var(--aquarium-background-color-default);
4849
+ background-color: var(--aquarium-background-color-medium);
4779
4850
  }
4780
4851
  .disabled\:bg-muted:where(:not([data-rac])):disabled{
4781
4852
  background-color: rgba(247,247,250,1);
@@ -4860,10 +4931,10 @@ input[type="number"].no-arrows{
4860
4931
  content: var(--tw-content);
4861
4932
  height: 1px;
4862
4933
  }
4863
- .\[\&\:not\(\:first-child\)\]\:before\:bg-default:not(:first-child)::before{
4934
+ .\[\&\:not\(\:first-child\)\]\:before\:bg-medium:not(:first-child)::before{
4864
4935
  content: var(--tw-content);
4865
4936
  background-color: rgba(237,237,240,1);
4866
- background-color: var(--aquarium-background-color-default);
4937
+ background-color: var(--aquarium-background-color-medium);
4867
4938
  }
4868
4939
  .\[\&\:not\(\:first-child\)\]\:before\:content-\[\"\"\]:not(:first-child)::before{
4869
4940
  --tw-content: "";
@@ -4892,9 +4963,9 @@ input[type="number"].no-arrows{
4892
4963
  background-color: rgba(247,247,250,1);
4893
4964
  background-color: var(--aquarium-background-color-muted);
4894
4965
  }
4895
- .hover\:\[\&\>\*\]\:text-primary-muted>*:where([data-rac])[data-hovered]{
4966
+ .hover\:\[\&\>\*\]\:text-primary-graphic>*:where([data-rac])[data-hovered]{
4896
4967
  color: rgba(129,142,236,1);
4897
- color: var(--aquarium-text-color-primary-muted);
4968
+ color: var(--aquarium-text-color-primary-graphic);
4898
4969
  }
4899
4970
  .hover\:\[\&\>\*\]\:text-white>*:where([data-rac])[data-hovered]{
4900
4971
  color: white;
@@ -4904,9 +4975,9 @@ input[type="number"].no-arrows{
4904
4975
  background-color: rgba(247,247,250,1);
4905
4976
  background-color: var(--aquarium-background-color-muted);
4906
4977
  }
4907
- .hover\:\[\&\>\*\]\:text-primary-muted>*:where(:not([data-rac])):hover{
4978
+ .hover\:\[\&\>\*\]\:text-primary-graphic>*:where(:not([data-rac])):hover{
4908
4979
  color: rgba(129,142,236,1);
4909
- color: var(--aquarium-text-color-primary-muted);
4980
+ color: var(--aquarium-text-color-primary-graphic);
4910
4981
  }
4911
4982
  .hover\:\[\&\>\*\]\:text-white>*:where(:not([data-rac])):hover{
4912
4983
  color: white;
@@ -4931,9 +5002,9 @@ input[type="number"].no-arrows{
4931
5002
  padding-top: 0px;
4932
5003
  padding-bottom: 0px;
4933
5004
  }
4934
- .\[\&\>button\]\:text-danger-muted>button{
5005
+ .\[\&\>button\]\:text-danger-graphic>button{
4935
5006
  color: rgba(255,173,179,1);
4936
- color: var(--aquarium-text-color-danger-muted);
5007
+ color: var(--aquarium-text-color-danger-graphic);
4937
5008
  }
4938
5009
  .\[\&\>button\]\:text-muted>button{
4939
5010
  color: rgba(120,120,133,1);