@aivenio/aquarium 1.65.2 → 1.66.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 (73) hide show
  1. package/dist/_variables.scss +57 -3
  2. package/dist/atoms.cjs +804 -316
  3. package/dist/atoms.mjs +799 -316
  4. package/dist/charts.cjs +1 -1
  5. package/dist/charts.mjs +1 -1
  6. package/dist/src/atoms/Alert/Alert.js +15 -15
  7. package/dist/src/atoms/Banner/Banner.js +3 -3
  8. package/dist/src/atoms/Card/Card.js +6 -6
  9. package/dist/src/atoms/Checkbox/Checkbox.js +7 -7
  10. package/dist/src/atoms/DataList/DataList.js +5 -5
  11. package/dist/src/atoms/Dialog/Dialog.d.ts +2 -2
  12. package/dist/src/atoms/Dialog/Dialog.js +4 -4
  13. package/dist/src/atoms/DropdownMenu/DropdownMenu.js +9 -9
  14. package/dist/src/atoms/Modal/Modal.js +4 -4
  15. package/dist/src/atoms/Navigation/Navigation.js +5 -5
  16. package/dist/src/atoms/Popover/Popover.js +2 -2
  17. package/dist/src/atoms/ProgressBar/ProgressBar.js +6 -6
  18. package/dist/src/atoms/RadioButton/RadioButton.js +4 -4
  19. package/dist/src/atoms/Section/Section.js +2 -2
  20. package/dist/src/atoms/Select/Select.js +17 -17
  21. package/dist/src/atoms/Stepper/Stepper.js +11 -11
  22. package/dist/src/atoms/Switch/Switch.js +5 -5
  23. package/dist/src/atoms/Table/Table.js +6 -6
  24. package/dist/src/atoms/Timeline/Timeline.js +3 -3
  25. package/dist/src/atoms/Toast/Toast.js +5 -5
  26. package/dist/src/atoms/Typography/Typography.d.ts +2 -2
  27. package/dist/src/atoms/Typography/Typography.js +2 -2
  28. package/dist/src/atoms/index.d.ts +5 -0
  29. package/dist/src/atoms/index.js +6 -1
  30. package/dist/src/charts/PieChart/ChartValue.js +1 -1
  31. package/dist/src/js/resolveTheme.js +2 -14
  32. package/dist/src/molecules/Accordion/Accordion.js +2 -2
  33. package/dist/src/molecules/Badge/Badge.js +2 -2
  34. package/dist/src/molecules/Breadcrumbs/Breadcrumbs.js +4 -4
  35. package/dist/src/molecules/Button/Button.js +6 -6
  36. package/dist/src/molecules/Chip/Chip.js +9 -9
  37. package/dist/src/molecules/ChoiceChip/ChoiceChip.js +3 -3
  38. package/dist/src/molecules/ControlLabel/ControlLabel.js +2 -2
  39. package/dist/src/molecules/DataList/DataList.d.ts +5 -1
  40. package/dist/src/molecules/DataList/DataList.js +7 -6
  41. package/dist/src/molecules/DataList/DataListGroup.d.ts +1 -1
  42. package/dist/src/molecules/DataList/DataListGroup.js +4 -3
  43. package/dist/src/molecules/DataTable/DataTable.js +1 -1
  44. package/dist/src/molecules/Divider/Divider.js +2 -2
  45. package/dist/src/molecules/Dropdown/Dropdown.js +6 -6
  46. package/dist/src/molecules/Icon/Icon.d.ts +2 -2
  47. package/dist/src/molecules/Icon/Icon.js +3 -3
  48. package/dist/src/molecules/List/List.js +2 -2
  49. package/dist/src/molecules/ListItem/ListItem.js +2 -2
  50. package/dist/src/molecules/MultiInput/InputChip.js +7 -7
  51. package/dist/src/molecules/NativeSelect/NativeSelect.js +6 -6
  52. package/dist/src/molecules/Pagination/Pagination.js +2 -2
  53. package/dist/src/molecules/Section/Section.js +2 -2
  54. package/dist/src/molecules/SegmentedControl/SegmentedControl.js +12 -12
  55. package/dist/src/molecules/Skeleton/Skeleton.js +2 -2
  56. package/dist/src/molecules/Tabs/Tabs.js +9 -9
  57. package/dist/src/molecules/TagLabel/TagLabel.js +4 -4
  58. package/dist/src/molecules/Timeline/Timeline.js +2 -2
  59. package/dist/src/molecules/Tooltip/Tooltip.js +3 -3
  60. package/dist/src/utils/constants.js +6 -6
  61. package/dist/src/utils/form/CharCounter/CharCounter.js +2 -2
  62. package/dist/src/utils/form/HelperText/HelperText.js +2 -2
  63. package/dist/src/utils/form/InputAdornment/InputAdornment.js +6 -6
  64. package/dist/src/utils/form/Label/Label.js +6 -6
  65. package/dist/styles.css +315 -221
  66. package/dist/system.cjs +450 -209
  67. package/dist/system.mjs +450 -209
  68. package/dist/tailwind.config.js +62 -5
  69. package/dist/tailwind.theme.json +241 -1
  70. package/dist/tsconfig.module.tsbuildinfo +1 -1
  71. package/dist/types/designTokens.d.ts +2 -0
  72. package/dist/types/tailwindGenerated.d.ts +1 -1
  73. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -472,9 +472,45 @@ img,video {
472
472
  --aquarium-screens-md: 1056px;
473
473
  --aquarium-screens-lg: 1312px;
474
474
  --aquarium-screens-xl: 1536px;
475
+ --aquarium-background-color-body: var(--aquarium-colors-white);
476
+ --aquarium-background-color-popover-content: var(--aquarium-colors-white);
477
+ --aquarium-background-color-muted: var(--aquarium-colors-grey-0);
478
+ --aquarium-background-color-default: var(--aquarium-colors-grey-5);
479
+ --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
480
+ --aquarium-background-color-intense-2x: var(--aquarium-colors-grey-80);
481
+ --aquarium-background-color-primary-muted-3x: var(--aquarium-colors-primary-5);
482
+ --aquarium-background-color-primary-muted-2x: var(--aquarium-colors-primary-10);
483
+ --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-40);
484
+ --aquarium-background-color-primary-default: var(--aquarium-colors-primary-80);
485
+ --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-90);
486
+ --aquarium-background-color-secondary-default: var(--aquarium-colors-secondary-90);
487
+ --aquarium-background-color-info-muted: var(--aquarium-colors-info-10);
488
+ --aquarium-background-color-info-default: var(--aquarium-colors-info-70);
489
+ --aquarium-background-color-success-muted: var(--aquarium-colors-success-5);
490
+ --aquarium-background-color-success-default: var(--aquarium-colors-success-70);
491
+ --aquarium-background-color-success-intense: var(--aquarium-colors-success-90);
492
+ --aquarium-background-color-warning-muted: var(--aquarium-colors-warning-5);
493
+ --aquarium-background-color-warning-default: var(--aquarium-colors-warning-70);
494
+ --aquarium-background-color-danger-muted-2x: var(--aquarium-colors-error-5);
495
+ --aquarium-background-color-danger-muted: var(--aquarium-colors-error-10);
496
+ --aquarium-background-color-danger-default: var(--aquarium-colors-error-20);
497
+ --aquarium-background-color-danger-intense: var(--aquarium-colors-error-50);
498
+ --aquarium-border-color-muted-2x: var(--aquarium-colors-grey-0);
475
499
  --aquarium-border-color-muted: var(--aquarium-colors-grey-5);
476
500
  --aquarium-border-color-default: var(--aquarium-colors-grey-20);
477
501
  --aquarium-border-color-intense: var(--aquarium-colors-grey-50);
502
+ --aquarium-border-color-primary-muted-3x: var(--aquarium-colors-primary-10);
503
+ --aquarium-border-color-primary-muted-2x: var(--aquarium-colors-primary-40);
504
+ --aquarium-border-color-primary-muted: var(--aquarium-colors-primary-60);
505
+ --aquarium-border-color-primary-default: var(--aquarium-colors-primary-80);
506
+ --aquarium-border-color-info-default: var(--aquarium-colors-info-70);
507
+ --aquarium-border-color-success-muted: var(--aquarium-colors-success-10);
508
+ --aquarium-border-color-success-default: var(--aquarium-colors-success-40);
509
+ --aquarium-border-color-success-intense: var(--aquarium-colors-success-70);
510
+ --aquarium-border-color-warning-muted: var(--aquarium-colors-warning-20);
511
+ --aquarium-border-color-danger-muted: var(--aquarium-colors-error-10);
512
+ --aquarium-border-color-danger-default: var(--aquarium-colors-error-50);
513
+ --aquarium-border-color-danger-intense: var(--aquarium-colors-error-80);
478
514
  --aquarium-border-width-0: 0px;
479
515
  --aquarium-border-width-2: 2px;
480
516
  --aquarium-border-width-4: 4px;
@@ -536,8 +572,26 @@ img,video {
536
572
  --aquarium-spacing-l5: 64px;
537
573
  --aquarium-spacing-l6: 96px;
538
574
  --aquarium-spacing-l7: 160px;
539
- --aquarium-text-color-muted: var(--aquarium-colors-grey-40);
575
+ --aquarium-text-color-muted-3x: var(--aquarium-colors-grey-30);
576
+ --aquarium-text-color-muted-2x: var(--aquarium-colors-grey-40);
577
+ --aquarium-text-color-muted: var(--aquarium-colors-grey-50);
540
578
  --aquarium-text-color-default: var(--aquarium-colors-grey-70);
579
+ --aquarium-text-color-intense: var(--aquarium-colors-grey-90);
580
+ --aquarium-text-color-primary-muted-3x: var(--aquarium-colors-primary-10);
581
+ --aquarium-text-color-primary-muted-2x: var(--aquarium-colors-primary-40);
582
+ --aquarium-text-color-primary-muted: var(--aquarium-colors-primary-60);
583
+ --aquarium-text-color-primary-default: var(--aquarium-colors-primary-70);
584
+ --aquarium-text-color-primary-intense: var(--aquarium-colors-primary-80);
585
+ --aquarium-text-color-primary-intense-2x: var(--aquarium-colors-primary-90);
586
+ --aquarium-text-color-info-default: var(--aquarium-colors-info-70);
587
+ --aquarium-text-color-info-intense: var(--aquarium-colors-info-90);
588
+ --aquarium-text-color-success-default: var(--aquarium-colors-success-70);
589
+ --aquarium-text-color-success-intense: var(--aquarium-colors-success-90);
590
+ --aquarium-text-color-warning-default: var(--aquarium-colors-warning-80);
591
+ --aquarium-text-color-warning-intense: var(--aquarium-colors-warning-100);
592
+ --aquarium-text-color-danger-muted: var(--aquarium-colors-error-20);
593
+ --aquarium-text-color-danger-default: var(--aquarium-colors-error-50);
594
+ --aquarium-text-color-danger-intense: var(--aquarium-colors-error-80);
541
595
  }
542
596
  input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].no-arrow::-webkit-outer-spin-button {
543
597
  -webkit-appearance: none;
@@ -1693,33 +1747,33 @@ input[type='number'].no-arrows {
1693
1747
  .border-none{
1694
1748
  border-style: none;
1695
1749
  }
1696
- .border-error-50{
1750
+ .border-danger-default{
1697
1751
  border-color: #e62728;
1698
- border-color: var(--aquarium-colors-error-50, #e62728);
1752
+ border-color: var(--aquarium-border-color-danger-default);
1699
1753
  }
1700
1754
  .border-default{
1701
1755
  border-color: #d2d2d6;
1702
1756
  border-color: var(--aquarium-border-color-default);
1703
1757
  }
1704
- .border-info-70{
1758
+ .border-info-default{
1705
1759
  border-color: #0399e3;
1706
- border-color: var(--aquarium-colors-info-70, #0399e3);
1760
+ border-color: var(--aquarium-border-color-info-default);
1707
1761
  }
1708
1762
  .border-muted{
1709
1763
  border-color: #ededf0;
1710
1764
  border-color: var(--aquarium-border-color-muted);
1711
1765
  }
1712
- .border-primary-80{
1766
+ .border-primary-default{
1713
1767
  border-color: #3545be;
1714
- border-color: var(--aquarium-colors-primary-80, #3545be);
1768
+ border-color: var(--aquarium-border-color-primary-default);
1715
1769
  }
1716
1770
  .border-transparent{
1717
1771
  border-color: transparent;
1718
1772
  border-color: var(--aquarium-colors-transparent, transparent);
1719
1773
  }
1720
- .border-primary-40{
1774
+ .border-primary-muted-2x{
1721
1775
  border-color: #b9c5ef;
1722
- border-color: var(--aquarium-colors-primary-40, #b9c5ef);
1776
+ border-color: var(--aquarium-border-color-primary-muted-2x);
1723
1777
  }
1724
1778
  .border-intense{
1725
1779
  border-color: #787885;
@@ -1729,9 +1783,9 @@ input[type='number'].no-arrows {
1729
1783
  border-color: #292a31;
1730
1784
  border-color: var(--aquarium-colors-grey-90, #292a31);
1731
1785
  }
1732
- .border-success-70{
1786
+ .border-success-intense{
1733
1787
  border-color: #00b300;
1734
- border-color: var(--aquarium-colors-success-70, #00b300);
1788
+ border-color: var(--aquarium-border-color-success-intense);
1735
1789
  }
1736
1790
  .border-current{
1737
1791
  border-color: currentColor;
@@ -1741,93 +1795,85 @@ input[type='number'].no-arrows {
1741
1795
  border-color: #19191d;
1742
1796
  border-color: var(--aquarium-colors-grey-100, #19191d);
1743
1797
  }
1744
- .bg-grey-10{
1745
- background-color: #e1e1e3;
1746
- background-color: var(--aquarium-colors-grey-10, #e1e1e3);
1798
+ .bg-intense{
1799
+ background-color: #d2d2d6;
1800
+ background-color: var(--aquarium-background-color-intense);
1747
1801
  }
1748
- .bg-error-5{
1802
+ .bg-danger-muted-2x{
1749
1803
  background-color: #fee8e7;
1750
- background-color: var(--aquarium-colors-error-5, #fee8e7);
1804
+ background-color: var(--aquarium-background-color-danger-muted-2x);
1751
1805
  }
1752
- .bg-info-10{
1806
+ .bg-info-muted{
1753
1807
  background-color: #e0f5fe;
1754
- background-color: var(--aquarium-colors-info-10, #e0f5fe);
1808
+ background-color: var(--aquarium-background-color-info-muted);
1755
1809
  }
1756
- .bg-success-5{
1810
+ .bg-success-muted{
1757
1811
  background-color: #ecf7ed;
1758
- background-color: var(--aquarium-colors-success-5, #ecf7ed);
1812
+ background-color: var(--aquarium-background-color-success-muted);
1759
1813
  }
1760
- .bg-warning-5{
1814
+ .bg-warning-muted{
1761
1815
  background-color: #fff8ea;
1762
- background-color: var(--aquarium-colors-warning-5, #fff8ea);
1816
+ background-color: var(--aquarium-background-color-warning-muted);
1763
1817
  }
1764
- .bg-primary-10{
1818
+ .bg-primary-muted-2x{
1765
1819
  background-color: #e3e9ff;
1766
- background-color: var(--aquarium-colors-primary-10, #e3e9ff);
1820
+ background-color: var(--aquarium-background-color-primary-muted-2x);
1767
1821
  }
1768
- .bg-primary-5{
1822
+ .bg-primary-muted-3x{
1769
1823
  background-color: #f3f6ff;
1770
- background-color: var(--aquarium-colors-primary-5, #f3f6ff);
1824
+ background-color: var(--aquarium-background-color-primary-muted-3x);
1771
1825
  }
1772
- .bg-grey-0{
1826
+ .bg-muted{
1773
1827
  background-color: #f7f7fa;
1774
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
1828
+ background-color: var(--aquarium-background-color-muted);
1775
1829
  }
1776
- .bg-white{
1830
+ .bg-body{
1777
1831
  background-color: white;
1778
- background-color: var(--aquarium-colors-white, white);
1832
+ background-color: var(--aquarium-background-color-body);
1779
1833
  }
1780
- .bg-primary-80{
1834
+ .bg-primary-default{
1781
1835
  background-color: #3545be;
1782
- background-color: var(--aquarium-colors-primary-80, #3545be);
1836
+ background-color: var(--aquarium-background-color-primary-default);
1783
1837
  }
1784
- .bg-primary-40{
1838
+ .bg-primary-muted{
1785
1839
  background-color: #b9c5ef;
1786
- background-color: var(--aquarium-colors-primary-40, #b9c5ef);
1840
+ background-color: var(--aquarium-background-color-primary-muted);
1787
1841
  }
1788
- .bg-grey-5{
1842
+ .bg-popover-content{
1843
+ background-color: white;
1844
+ background-color: var(--aquarium-background-color-popover-content);
1845
+ }
1846
+ .bg-default{
1789
1847
  background-color: #ededf0;
1790
- background-color: var(--aquarium-colors-grey-5, #ededf0);
1848
+ background-color: var(--aquarium-background-color-default);
1791
1849
  }
1792
- .bg-primary-100{
1793
- background-color: #0e1652;
1794
- background-color: var(--aquarium-colors-primary-100, #0e1652);
1850
+ .bg-primary-intense{
1851
+ background-color: #222f95;
1852
+ background-color: var(--aquarium-background-color-primary-intense);
1795
1853
  }
1796
- .bg-info-50{
1797
- background-color: #28b4f4;
1798
- background-color: var(--aquarium-colors-info-50, #28b4f4);
1854
+ .bg-info-default{
1855
+ background-color: #0399e3;
1856
+ background-color: var(--aquarium-background-color-info-default);
1799
1857
  }
1800
- .bg-warning-70{
1858
+ .bg-warning-default{
1801
1859
  background-color: #ffb300;
1802
- background-color: var(--aquarium-colors-warning-70, #ffb300);
1860
+ background-color: var(--aquarium-background-color-warning-default);
1803
1861
  }
1804
- .bg-success-70{
1862
+ .bg-success-default{
1805
1863
  background-color: #00b300;
1806
- background-color: var(--aquarium-colors-success-70, #00b300);
1807
- }
1808
- .bg-error-70{
1809
- background-color: #d80005;
1810
- background-color: var(--aquarium-colors-error-70, #d80005);
1811
- }
1812
- .bg-grey-20{
1813
- background-color: #d2d2d6;
1814
- background-color: var(--aquarium-colors-grey-20, #d2d2d6);
1864
+ background-color: var(--aquarium-background-color-success-default);
1815
1865
  }
1816
- .bg-grey-90{
1817
- background-color: #292a31;
1818
- background-color: var(--aquarium-colors-grey-90, #292a31);
1866
+ .bg-danger-intense{
1867
+ background-color: #e62728;
1868
+ background-color: var(--aquarium-background-color-danger-intense);
1819
1869
  }
1820
- .bg-primary-70{
1821
- background-color: #5865cd;
1822
- background-color: var(--aquarium-colors-primary-70, #5865cd);
1823
- }
1824
- .bg-grey-30{
1825
- background-color: #b4b4bb;
1826
- background-color: var(--aquarium-colors-grey-30, #b4b4bb);
1827
- }
1828
- .bg-grey-80{
1870
+ .bg-intense-2x{
1829
1871
  background-color: #3a3a44;
1830
- background-color: var(--aquarium-colors-grey-80, #3a3a44);
1872
+ background-color: var(--aquarium-background-color-intense-2x);
1873
+ }
1874
+ .bg-white{
1875
+ background-color: white;
1876
+ background-color: var(--aquarium-colors-white, white);
1831
1877
  }
1832
1878
  .bg-black{
1833
1879
  background-color: black;
@@ -1841,33 +1887,21 @@ input[type='number'].no-arrows {
1841
1887
  background-color: transparent;
1842
1888
  background-color: var(--aquarium-colors-transparent, transparent);
1843
1889
  }
1844
- .bg-info-5{
1845
- background-color: #effaff;
1846
- background-color: var(--aquarium-colors-info-5, #effaff);
1847
- }
1848
- .bg-secondary-5{
1849
- background-color: #fff3e8;
1850
- background-color: var(--aquarium-colors-secondary-5, #fff3e8);
1851
- }
1852
- .bg-error-0{
1853
- background-color: #fef2f1;
1854
- background-color: var(--aquarium-colors-error-0, #fef2f1);
1890
+ .bg-grey-5{
1891
+ background-color: #ededf0;
1892
+ background-color: var(--aquarium-colors-grey-5, #ededf0);
1855
1893
  }
1856
- .bg-error-20{
1894
+ .bg-danger-default{
1857
1895
  background-color: #ffadb3;
1858
- background-color: var(--aquarium-colors-error-20, #ffadb3);
1896
+ background-color: var(--aquarium-background-color-danger-default);
1859
1897
  }
1860
- .bg-secondary-90{
1898
+ .bg-secondary-default{
1861
1899
  background-color: #eb4610;
1862
- background-color: var(--aquarium-colors-secondary-90, #eb4610);
1900
+ background-color: var(--aquarium-background-color-secondary-default);
1863
1901
  }
1864
- .bg-success-90{
1902
+ .bg-success-intense{
1865
1903
  background-color: #008e00;
1866
- background-color: var(--aquarium-colors-success-90, #008e00);
1867
- }
1868
- .bg-primary-90{
1869
- background-color: #222f95;
1870
- background-color: var(--aquarium-colors-primary-90, #222f95);
1904
+ background-color: var(--aquarium-background-color-success-intense);
1871
1905
  }
1872
1906
  .bg-gradient-to-r{
1873
1907
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -2447,18 +2481,90 @@ input[type='number'].no-arrows {
2447
2481
  color: #ffffff;
2448
2482
  color: var(--aquarium-colors-primary-0, #ffffff);
2449
2483
  }
2484
+ .text-muted-3x{
2485
+ color: #b4b4bb;
2486
+ color: var(--aquarium-text-color-muted-3x);
2487
+ }
2488
+ .text-muted-2x{
2489
+ color: #9696a0;
2490
+ color: var(--aquarium-text-color-muted-2x);
2491
+ }
2492
+ .text-muted{
2493
+ color: #787885;
2494
+ color: var(--aquarium-text-color-muted);
2495
+ }
2450
2496
  .text-default{
2451
2497
  color: #4a4b57;
2452
2498
  color: var(--aquarium-text-color-default);
2453
2499
  }
2500
+ .text-intense{
2501
+ color: #292a31;
2502
+ color: var(--aquarium-text-color-intense);
2503
+ }
2504
+ .text-primary-muted-3x{
2505
+ color: #e3e9ff;
2506
+ color: var(--aquarium-text-color-primary-muted-3x);
2507
+ }
2508
+ .text-primary-muted-2x{
2509
+ color: #b9c5ef;
2510
+ color: var(--aquarium-text-color-primary-muted-2x);
2511
+ }
2512
+ .text-primary-muted{
2513
+ color: #818eec;
2514
+ color: var(--aquarium-text-color-primary-muted);
2515
+ }
2516
+ .text-primary-default{
2517
+ color: #5865cd;
2518
+ color: var(--aquarium-text-color-primary-default);
2519
+ }
2520
+ .text-primary-intense{
2521
+ color: #3545be;
2522
+ color: var(--aquarium-text-color-primary-intense);
2523
+ }
2524
+ .text-primary-intense-2x{
2525
+ color: #222f95;
2526
+ color: var(--aquarium-text-color-primary-intense-2x);
2527
+ }
2528
+ .text-info-default{
2529
+ color: #0399e3;
2530
+ color: var(--aquarium-text-color-info-default);
2531
+ }
2532
+ .text-info-intense{
2533
+ color: #0174ba;
2534
+ color: var(--aquarium-text-color-info-intense);
2535
+ }
2536
+ .text-success-default{
2537
+ color: #00b300;
2538
+ color: var(--aquarium-text-color-success-default);
2539
+ }
2540
+ .text-success-intense{
2541
+ color: #008e00;
2542
+ color: var(--aquarium-text-color-success-intense);
2543
+ }
2544
+ .text-warning-default{
2545
+ color: #fd9f00;
2546
+ color: var(--aquarium-text-color-warning-default);
2547
+ }
2548
+ .text-warning-intense{
2549
+ color: #fe6d00;
2550
+ color: var(--aquarium-text-color-warning-intense);
2551
+ }
2552
+ .text-danger-muted{
2553
+ color: #ffadb3;
2554
+ color: var(--aquarium-text-color-danger-muted);
2555
+ }
2556
+ .text-danger-default{
2557
+ color: #e62728;
2558
+ color: var(--aquarium-text-color-danger-default);
2559
+ }
2560
+ .text-danger-intense{
2561
+ color: #c50001;
2562
+ color: var(--aquarium-text-color-danger-intense);
2563
+ }
2454
2564
  .text-transparent{
2455
2565
  color: transparent;
2456
2566
  color: var(--aquarium-colors-transparent, transparent);
2457
2567
  }
2458
- .text-muted{
2459
- color: #9696a0;
2460
- color: var(--aquarium-text-color-muted);
2461
- }
2462
2568
  .text-white{
2463
2569
  color: white;
2464
2570
  color: var(--aquarium-colors-white, white);
@@ -2656,13 +2762,13 @@ input[type='number'].no-arrows {
2656
2762
  --aquarium-background-color-accent: var(--aquarium-colors-grey-70);
2657
2763
  --aquarium-background-color-contrast: var(--aquarium-colors-grey-20);
2658
2764
  }
2659
- .placeholder\:text-muted::-moz-placeholder{
2765
+ .placeholder\:text-muted-2x::-moz-placeholder{
2660
2766
  color: #9696a0;
2661
- color: var(--aquarium-text-color-muted);
2767
+ color: var(--aquarium-text-color-muted-2x);
2662
2768
  }
2663
- .placeholder\:text-muted::placeholder{
2769
+ .placeholder\:text-muted-2x::placeholder{
2664
2770
  color: #9696a0;
2665
- color: var(--aquarium-text-color-muted);
2771
+ color: var(--aquarium-text-color-muted-2x);
2666
2772
  }
2667
2773
  .before\:content-\[\'_\'\]::before{
2668
2774
  --tw-content: ' ';
@@ -2674,25 +2780,25 @@ input[type='number'].no-arrows {
2674
2780
  .last\:border-r-0:last-child{
2675
2781
  border-right-width: 0px;
2676
2782
  }
2677
- .visited\:text-primary-80:visited{
2783
+ .visited\:text-primary-intense:visited{
2678
2784
  color: #3545be;
2679
- color: var(--aquarium-colors-primary-80, #3545be);
2785
+ color: var(--aquarium-text-color-primary-intense);
2680
2786
  }
2681
- .checked\:border-primary-80:checked{
2787
+ .checked\:border-primary-default:checked{
2682
2788
  border-color: #3545be;
2683
- border-color: var(--aquarium-colors-primary-80, #3545be);
2789
+ border-color: var(--aquarium-border-color-primary-default);
2684
2790
  }
2685
- .checked\:border-primary-40:checked{
2791
+ .checked\:border-primary-muted-2x:checked{
2686
2792
  border-color: #b9c5ef;
2687
- border-color: var(--aquarium-colors-primary-40, #b9c5ef);
2793
+ border-color: var(--aquarium-border-color-primary-muted-2x);
2688
2794
  }
2689
- .checked\:bg-primary-80:checked{
2795
+ .checked\:bg-primary-default:checked{
2690
2796
  background-color: #3545be;
2691
- background-color: var(--aquarium-colors-primary-80, #3545be);
2797
+ background-color: var(--aquarium-background-color-primary-default);
2692
2798
  }
2693
- .checked\:bg-primary-40:checked{
2799
+ .checked\:bg-primary-muted:checked{
2694
2800
  background-color: #b9c5ef;
2695
- background-color: var(--aquarium-colors-primary-40, #b9c5ef);
2801
+ background-color: var(--aquarium-background-color-primary-muted);
2696
2802
  }
2697
2803
  .checked\:bg-opacity-40:checked{
2698
2804
  --tw-bg-opacity: 0.4;
@@ -2713,53 +2819,45 @@ input[type='number'].no-arrows {
2713
2819
  border-color: #787885;
2714
2820
  border-color: var(--aquarium-border-color-intense);
2715
2821
  }
2716
- .hover\:bg-primary-5:hover{
2822
+ .hover\:bg-primary-muted-3x:hover{
2717
2823
  background-color: #f3f6ff;
2718
- background-color: var(--aquarium-colors-primary-5, #f3f6ff);
2824
+ background-color: var(--aquarium-background-color-primary-muted-3x);
2719
2825
  }
2720
- .hover\:bg-grey-0:hover{
2826
+ .hover\:bg-muted:hover{
2721
2827
  background-color: #f7f7fa;
2722
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
2828
+ background-color: var(--aquarium-background-color-muted);
2723
2829
  }
2724
- .hover\:bg-grey-5:hover{
2830
+ .hover\:bg-default:hover{
2725
2831
  background-color: #ededf0;
2726
- background-color: var(--aquarium-colors-grey-5, #ededf0);
2832
+ background-color: var(--aquarium-background-color-default);
2727
2833
  }
2728
- .hover\:bg-grey-20:hover{
2834
+ .hover\:bg-intense:hover{
2729
2835
  background-color: #d2d2d6;
2730
- background-color: var(--aquarium-colors-grey-20, #d2d2d6);
2836
+ background-color: var(--aquarium-background-color-intense);
2731
2837
  }
2732
- .hover\:bg-primary-90:hover{
2838
+ .hover\:bg-primary-intense:hover{
2733
2839
  background-color: #222f95;
2734
- background-color: var(--aquarium-colors-primary-90, #222f95);
2840
+ background-color: var(--aquarium-background-color-primary-intense);
2735
2841
  }
2736
- .hover\:bg-error-10:hover{
2842
+ .hover\:bg-danger-muted:hover{
2737
2843
  background-color: #ffcbd2;
2738
- background-color: var(--aquarium-colors-error-10, #ffcbd2);
2844
+ background-color: var(--aquarium-background-color-danger-muted);
2739
2845
  }
2740
- .hover\:bg-grey-10:hover{
2741
- background-color: #e1e1e3;
2742
- background-color: var(--aquarium-colors-grey-10, #e1e1e3);
2743
- }
2744
- .hover\:text-primary-90:hover{
2846
+ .hover\:text-primary-intense-2x:hover{
2745
2847
  color: #222f95;
2746
- color: var(--aquarium-colors-primary-90, #222f95);
2848
+ color: var(--aquarium-text-color-primary-intense-2x);
2747
2849
  }
2748
- .hover\:text-primary-70:hover{
2850
+ .hover\:text-primary-default:hover{
2749
2851
  color: #5865cd;
2750
- color: var(--aquarium-colors-primary-70, #5865cd);
2852
+ color: var(--aquarium-text-color-primary-default);
2751
2853
  }
2752
- .hover\:text-grey-80:hover{
2753
- color: #3a3a44;
2754
- color: var(--aquarium-colors-grey-80, #3a3a44);
2854
+ .hover\:text-primary-intense:hover{
2855
+ color: #3545be;
2856
+ color: var(--aquarium-text-color-primary-intense);
2755
2857
  }
2756
- .hover\:text-grey-90:hover{
2858
+ .hover\:text-intense:hover{
2757
2859
  color: #292a31;
2758
- color: var(--aquarium-colors-grey-90, #292a31);
2759
- }
2760
- .hover\:text-primary-80:hover{
2761
- color: #3545be;
2762
- color: var(--aquarium-colors-primary-80, #3545be);
2860
+ color: var(--aquarium-text-color-intense);
2763
2861
  }
2764
2862
  .hover\:underline:hover{
2765
2863
  -webkit-text-decoration-line: underline;
@@ -2768,29 +2866,29 @@ input[type='number'].no-arrows {
2768
2866
  .hover\:ring-primary-90:hover{
2769
2867
  --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
2770
2868
  }
2771
- .hover\:checked\:bg-primary-70:checked:hover{
2772
- background-color: #5865cd;
2773
- background-color: var(--aquarium-colors-primary-70, #5865cd);
2869
+ .hover\:checked\:bg-primary-intense:checked:hover{
2870
+ background-color: #222f95;
2871
+ background-color: var(--aquarium-background-color-primary-intense);
2774
2872
  }
2775
- .focus\:border-info-70:focus{
2873
+ .focus\:border-info-default:focus{
2776
2874
  border-color: #0399e3;
2777
- border-color: var(--aquarium-colors-info-70, #0399e3);
2875
+ border-color: var(--aquarium-border-color-info-default);
2778
2876
  }
2779
2877
  .focus\:border-transparent:focus{
2780
2878
  border-color: transparent;
2781
2879
  border-color: var(--aquarium-colors-transparent, transparent);
2782
2880
  }
2783
- .focus\:bg-error-20:focus{
2881
+ .focus\:bg-danger-default:focus{
2784
2882
  background-color: #ffadb3;
2785
- background-color: var(--aquarium-colors-error-20, #ffadb3);
2883
+ background-color: var(--aquarium-background-color-danger-default);
2786
2884
  }
2787
- .focus\:bg-grey-20:focus{
2885
+ .focus\:bg-intense:focus{
2788
2886
  background-color: #d2d2d6;
2789
- background-color: var(--aquarium-colors-grey-20, #d2d2d6);
2887
+ background-color: var(--aquarium-background-color-intense);
2790
2888
  }
2791
- .focus\:text-primary-80:focus{
2889
+ .focus\:text-primary-intense:focus{
2792
2890
  color: #3545be;
2793
- color: var(--aquarium-colors-primary-80, #3545be);
2891
+ color: var(--aquarium-text-color-primary-intense);
2794
2892
  }
2795
2893
  .focus\:outline-none:focus{
2796
2894
  outline: 2px solid transparent;
@@ -2820,53 +2918,45 @@ input[type='number'].no-arrows {
2820
2918
  .focus\:ring-offset-0:focus{
2821
2919
  --tw-ring-offset-width: 0px;
2822
2920
  }
2823
- .focus-visible\:border-info-70.focus-visible{
2921
+ .focus-visible\:border-info-default.focus-visible{
2824
2922
  border-color: #0399e3;
2825
- border-color: var(--aquarium-colors-info-70, #0399e3);
2923
+ border-color: var(--aquarium-border-color-info-default);
2826
2924
  }
2827
- .focus-visible\:border-info-70:focus-visible{
2925
+ .focus-visible\:border-info-default:focus-visible{
2828
2926
  border-color: #0399e3;
2829
- border-color: var(--aquarium-colors-info-70, #0399e3);
2927
+ border-color: var(--aquarium-border-color-info-default);
2830
2928
  }
2831
- .focus-visible\:bg-grey-0.focus-visible{
2929
+ .focus-visible\:bg-muted.focus-visible{
2832
2930
  background-color: #f7f7fa;
2833
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
2931
+ background-color: var(--aquarium-background-color-muted);
2834
2932
  }
2835
- .focus-visible\:bg-grey-0:focus-visible{
2933
+ .focus-visible\:bg-muted:focus-visible{
2836
2934
  background-color: #f7f7fa;
2837
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
2935
+ background-color: var(--aquarium-background-color-muted);
2838
2936
  }
2839
- .focus-visible\:text-primary-90.focus-visible{
2937
+ .focus-visible\:text-primary-intense-2x.focus-visible{
2840
2938
  color: #222f95;
2841
- color: var(--aquarium-colors-primary-90, #222f95);
2939
+ color: var(--aquarium-text-color-primary-intense-2x);
2842
2940
  }
2843
- .focus-visible\:text-primary-90:focus-visible{
2941
+ .focus-visible\:text-primary-intense-2x:focus-visible{
2844
2942
  color: #222f95;
2845
- color: var(--aquarium-colors-primary-90, #222f95);
2943
+ color: var(--aquarium-text-color-primary-intense-2x);
2846
2944
  }
2847
- .focus-visible\:text-primary-80.focus-visible{
2945
+ .focus-visible\:text-primary-intense.focus-visible{
2848
2946
  color: #3545be;
2849
- color: var(--aquarium-colors-primary-80, #3545be);
2947
+ color: var(--aquarium-text-color-primary-intense);
2850
2948
  }
2851
- .focus-visible\:text-primary-80:focus-visible{
2949
+ .focus-visible\:text-primary-intense:focus-visible{
2852
2950
  color: #3545be;
2853
- color: var(--aquarium-colors-primary-80, #3545be);
2854
- }
2855
- .focus-visible\:text-grey-80.focus-visible{
2856
- color: #3a3a44;
2857
- color: var(--aquarium-colors-grey-80, #3a3a44);
2858
- }
2859
- .focus-visible\:text-grey-80:focus-visible{
2860
- color: #3a3a44;
2861
- color: var(--aquarium-colors-grey-80, #3a3a44);
2951
+ color: var(--aquarium-text-color-primary-intense);
2862
2952
  }
2863
- .focus-visible\:text-grey-90.focus-visible{
2953
+ .focus-visible\:text-intense.focus-visible{
2864
2954
  color: #292a31;
2865
- color: var(--aquarium-colors-grey-90, #292a31);
2955
+ color: var(--aquarium-text-color-intense);
2866
2956
  }
2867
- .focus-visible\:text-grey-90:focus-visible{
2957
+ .focus-visible\:text-intense:focus-visible{
2868
2958
  color: #292a31;
2869
- color: var(--aquarium-colors-grey-90, #292a31);
2959
+ color: var(--aquarium-text-color-intense);
2870
2960
  }
2871
2961
  .focus-visible\:outline-0.focus-visible{
2872
2962
  outline-width: 0px;
@@ -2922,37 +3012,41 @@ input[type='number'].no-arrows {
2922
3012
  .focus-visible\:ring-info-70:focus-visible{
2923
3013
  --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
2924
3014
  }
2925
- .active\:bg-white:active{
3015
+ .active\:bg-body:active{
2926
3016
  background-color: white;
2927
- background-color: var(--aquarium-colors-white, white);
3017
+ background-color: var(--aquarium-background-color-body);
2928
3018
  }
2929
- .active\:bg-primary-90:active{
3019
+ .active\:bg-primary-intense:active{
2930
3020
  background-color: #222f95;
2931
- background-color: var(--aquarium-colors-primary-90, #222f95);
3021
+ background-color: var(--aquarium-background-color-primary-intense);
2932
3022
  }
2933
- .active\:bg-primary-5:active{
3023
+ .active\:bg-primary-muted-3x:active{
2934
3024
  background-color: #f3f6ff;
2935
- background-color: var(--aquarium-colors-primary-5, #f3f6ff);
3025
+ background-color: var(--aquarium-background-color-primary-muted-3x);
2936
3026
  }
2937
3027
  .active\:bg-transparent:active{
2938
3028
  background-color: transparent;
2939
3029
  background-color: var(--aquarium-colors-transparent, transparent);
2940
3030
  }
2941
- .active\:bg-grey-5:active{
3031
+ .active\:bg-default:active{
2942
3032
  background-color: #ededf0;
2943
- background-color: var(--aquarium-colors-grey-5, #ededf0);
3033
+ background-color: var(--aquarium-background-color-default);
2944
3034
  }
2945
- .active\:bg-grey-10:active{
2946
- background-color: #e1e1e3;
2947
- background-color: var(--aquarium-colors-grey-10, #e1e1e3);
3035
+ .active\:bg-intense:active{
3036
+ background-color: #d2d2d6;
3037
+ background-color: var(--aquarium-background-color-intense);
2948
3038
  }
2949
- .active\:text-primary-90:active{
3039
+ .active\:text-primary-intense-2x:active{
2950
3040
  color: #222f95;
2951
- color: var(--aquarium-colors-primary-90, #222f95);
3041
+ color: var(--aquarium-text-color-primary-intense-2x);
2952
3042
  }
2953
- .active\:text-grey-50:active{
3043
+ .active\:text-primary-intense:active{
3044
+ color: #3545be;
3045
+ color: var(--aquarium-text-color-primary-intense);
3046
+ }
3047
+ .active\:text-muted:active{
2954
3048
  color: #787885;
2955
- color: var(--aquarium-colors-grey-50, #787885);
3049
+ color: var(--aquarium-text-color-muted);
2956
3050
  }
2957
3051
  .active\:text-default:active{
2958
3052
  color: #4a4b57;
@@ -2974,33 +3068,33 @@ input[type='number'].no-arrows {
2974
3068
  border-color: #d2d2d6;
2975
3069
  border-color: var(--aquarium-border-color-default);
2976
3070
  }
2977
- .disabled\:bg-grey-5:disabled{
3071
+ .disabled\:bg-default:disabled{
2978
3072
  background-color: #ededf0;
2979
- background-color: var(--aquarium-colors-grey-5, #ededf0);
3073
+ background-color: var(--aquarium-background-color-default);
2980
3074
  }
2981
- .disabled\:bg-primary-40:disabled{
3075
+ .disabled\:bg-primary-muted:disabled{
2982
3076
  background-color: #b9c5ef;
2983
- background-color: var(--aquarium-colors-primary-40, #b9c5ef);
3077
+ background-color: var(--aquarium-background-color-primary-muted);
2984
3078
  }
2985
- .disabled\:bg-white:disabled{
3079
+ .disabled\:bg-body:disabled{
2986
3080
  background-color: white;
2987
- background-color: var(--aquarium-colors-white, white);
3081
+ background-color: var(--aquarium-background-color-body);
2988
3082
  }
2989
3083
  .disabled\:bg-transparent:disabled{
2990
3084
  background-color: transparent;
2991
3085
  background-color: var(--aquarium-colors-transparent, transparent);
2992
3086
  }
2993
- .disabled\:text-muted:disabled{
3087
+ .disabled\:text-muted-2x:disabled{
2994
3088
  color: #9696a0;
2995
- color: var(--aquarium-text-color-muted);
3089
+ color: var(--aquarium-text-color-muted-2x);
2996
3090
  }
2997
- .disabled\:text-primary-40:disabled{
3091
+ .disabled\:text-primary-muted-2x:disabled{
2998
3092
  color: #b9c5ef;
2999
- color: var(--aquarium-colors-primary-40, #b9c5ef);
3093
+ color: var(--aquarium-text-color-primary-muted-2x);
3000
3094
  }
3001
- .disabled\:text-grey-30:disabled{
3095
+ .disabled\:text-muted-3x:disabled{
3002
3096
  color: #b4b4bb;
3003
- color: var(--aquarium-colors-grey-30, #b4b4bb);
3097
+ color: var(--aquarium-text-color-muted-3x);
3004
3098
  }
3005
3099
  .disabled\:ring-primary-40:disabled{
3006
3100
  --tw-ring-color: var(--aquarium-colors-primary-40, #b9c5ef);
@@ -3011,9 +3105,9 @@ input[type='number'].no-arrows {
3011
3105
  .group:hover .group-hover\:visible{
3012
3106
  visibility: visible;
3013
3107
  }
3014
- .group:hover .group-hover\:bg-grey-0{
3108
+ .group:hover .group-hover\:bg-muted{
3015
3109
  background-color: #f7f7fa;
3016
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
3110
+ background-color: var(--aquarium-background-color-muted);
3017
3111
  }
3018
3112
  .peer\/switch:checked~.peer-checked\/switch\:left-1{
3019
3113
  left: 2px;
@@ -3022,33 +3116,33 @@ input[type='number'].no-arrows {
3022
3116
  --tw-translate-x: 16px;
3023
3117
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3024
3118
  }
3025
- .peer:checked~.peer-checked\:border-primary-80{
3119
+ .peer:checked~.peer-checked\:border-primary-default{
3026
3120
  border-color: #3545be;
3027
- border-color: var(--aquarium-colors-primary-80, #3545be);
3121
+ border-color: var(--aquarium-border-color-primary-default);
3028
3122
  }
3029
- .peer:checked~.peer-checked\:border-primary-40{
3123
+ .peer:checked~.peer-checked\:border-primary-muted-2x{
3030
3124
  border-color: #b9c5ef;
3031
- border-color: var(--aquarium-colors-primary-40, #b9c5ef);
3125
+ border-color: var(--aquarium-border-color-primary-muted-2x);
3032
3126
  }
3033
3127
  .peer:checked~.peer-checked\:text-white{
3034
3128
  color: white;
3035
3129
  color: var(--aquarium-colors-white, white);
3036
3130
  }
3037
- .peer:checked~.peer-checked\:text-primary-10{
3131
+ .peer:checked~.peer-checked\:text-primary-muted-3x{
3038
3132
  color: #e3e9ff;
3039
- color: var(--aquarium-colors-primary-10, #e3e9ff);
3133
+ color: var(--aquarium-text-color-primary-muted-3x);
3040
3134
  }
3041
- .peer\/switch:checked~.peer-checked\/switch\:text-primary-60{
3135
+ .peer\/switch:checked~.peer-checked\/switch\:text-primary-muted{
3042
3136
  color: #818eec;
3043
- color: var(--aquarium-colors-primary-60, #818eec);
3137
+ color: var(--aquarium-text-color-primary-muted);
3044
3138
  }
3045
3139
  .peer:hover~.peer-hover\:border-intense{
3046
3140
  border-color: #787885;
3047
3141
  border-color: var(--aquarium-border-color-intense);
3048
3142
  }
3049
- .peer:focus~.peer-focus\:border-info-70{
3143
+ .peer:focus~.peer-focus\:border-info-default{
3050
3144
  border-color: #0399e3;
3051
- border-color: var(--aquarium-colors-info-70, #0399e3);
3145
+ border-color: var(--aquarium-border-color-info-default);
3052
3146
  }
3053
3147
  .children\:inline-block>*{
3054
3148
  display: inline-block;
@@ -3078,24 +3172,24 @@ input[type='number'].no-arrows {
3078
3172
  stroke: #e3e9ff;
3079
3173
  stroke: var(--aquarium-colors-primary-10, #e3e9ff);
3080
3174
  }
3081
- .\[\&\>\*\]\:bg-primary-5>*{
3175
+ .\[\&\>\*\]\:bg-primary-muted-3x>*{
3082
3176
  background-color: #f3f6ff;
3083
- background-color: var(--aquarium-colors-primary-5, #f3f6ff);
3177
+ background-color: var(--aquarium-background-color-primary-muted-3x);
3084
3178
  }
3085
- .\[\&\>\*\]\:hover\:bg-grey-0:hover>*{
3179
+ .\[\&\>\*\]\:hover\:bg-muted:hover>*{
3086
3180
  background-color: #f7f7fa;
3087
- background-color: var(--aquarium-colors-grey-0, #f7f7fa);
3181
+ background-color: var(--aquarium-background-color-muted);
3088
3182
  }
3089
3183
  .\[\&\>button\]\:p-0>button{
3090
3184
  padding: 0;
3091
3185
  }
3092
- .\[\&\>button\]\:text-grey-50>button{
3186
+ .\[\&\>button\]\:text-muted>button{
3093
3187
  color: #787885;
3094
- color: var(--aquarium-colors-grey-50, #787885);
3188
+ color: var(--aquarium-text-color-muted);
3095
3189
  }
3096
- .\[\&\>button\]\:text-error-20>button{
3190
+ .\[\&\>button\]\:text-danger-muted>button{
3097
3191
  color: #ffadb3;
3098
- color: var(--aquarium-colors-error-20, #ffadb3);
3192
+ color: var(--aquarium-text-color-danger-muted);
3099
3193
  }
3100
3194
  .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child){
3101
3195
  margin-left: -8px;