@aivenio/aquarium 1.65.2 → 1.67.0-rc1

package/dist/styles.css

@@ -472,9 +472,52 @@ img,video {
   --aquarium-screens-md: 1056px;
   --aquarium-screens-lg: 1312px;
   --aquarium-screens-xl: 1536px;
+  --aquarium-background-color-body: var(--aquarium-colors-white);
+  --aquarium-background-color-body-intense: var(--aquarium-colors-grey-80);
+  --aquarium-background-color-popover-content: var(--aquarium-colors-white);
+  --aquarium-background-color-muted: var(--aquarium-colors-grey-0);
+  --aquarium-background-color-default: var(--aquarium-colors-grey-5);
+  --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
+  --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-40);
+  --aquarium-background-color-primary-default: var(--aquarium-colors-primary-80);
+  --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-primary-active: var(--aquarium-colors-primary-5);
+  --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-5);
+  --aquarium-background-color-info-muted: var(--aquarium-colors-info-10);
+  --aquarium-background-color-info-default: var(--aquarium-colors-info-70);
+  --aquarium-background-color-info-intense: var(--aquarium-colors-info-90);
+  --aquarium-background-color-success-muted: var(--aquarium-colors-success-5);
+  --aquarium-background-color-success-default: var(--aquarium-colors-success-70);
+  --aquarium-background-color-success-intense: var(--aquarium-colors-success-90);
+  --aquarium-background-color-warning-muted: var(--aquarium-colors-warning-5);
+  --aquarium-background-color-warning-default: var(--aquarium-colors-warning-70);
+  --aquarium-background-color-warning-intense: var(--aquarium-colors-warning-90);
+  --aquarium-background-color-danger-muted: var(--aquarium-colors-error-10);
+  --aquarium-background-color-danger-default: var(--aquarium-colors-error-20);
+  --aquarium-background-color-danger-intense: var(--aquarium-colors-error-50);
+  --aquarium-background-color-status-announcement: var(--aquarium-colors-primary-5);
+  --aquarium-background-color-status-info: var(--aquarium-colors-info-10);
+  --aquarium-background-color-status-warning: var(--aquarium-colors-warning-5);
+  --aquarium-background-color-status-danger: var(--aquarium-colors-error-5);
+  --aquarium-background-color-status-success: var(--aquarium-colors-success-5);
   --aquarium-border-color-muted: var(--aquarium-colors-grey-5);
   --aquarium-border-color-default: var(--aquarium-colors-grey-20);
   --aquarium-border-color-intense: var(--aquarium-colors-grey-50);
+  --aquarium-border-color-primary-muted: var(--aquarium-colors-primary-60);
+  --aquarium-border-color-primary-default: var(--aquarium-colors-primary-80);
+  --aquarium-border-color-primary-intense: var(--aquarium-colors-primary-100);
+  --aquarium-border-color-info-muted: var(--aquarium-colors-info-50);
+  --aquarium-border-color-info-default: var(--aquarium-colors-info-70);
+  --aquarium-border-color-info-intense: var(--aquarium-colors-info-90);
+  --aquarium-border-color-success-muted: var(--aquarium-colors-success-10);
+  --aquarium-border-color-success-default: var(--aquarium-colors-success-40);
+  --aquarium-border-color-success-intense: var(--aquarium-colors-success-70);
+  --aquarium-border-color-warning-muted: var(--aquarium-colors-warning-20);
+  --aquarium-border-color-warning-default: var(--aquarium-colors-warning-70);
+  --aquarium-border-color-warning-intense: var(--aquarium-colors-warning-90);
+  --aquarium-border-color-danger-muted: var(--aquarium-colors-error-10);
+  --aquarium-border-color-danger-default: var(--aquarium-colors-error-50);
+  --aquarium-border-color-danger-intense: var(--aquarium-colors-error-80);
   --aquarium-border-width-0: 0px;
   --aquarium-border-width-2: 2px;
   --aquarium-border-width-4: 4px;
@@ -536,8 +579,31 @@ img,video {
   --aquarium-spacing-l5: 64px;
   --aquarium-spacing-l6: 96px;
   --aquarium-spacing-l7: 160px;
-  --aquarium-text-color-muted: var(--aquarium-colors-grey-40);
+  --aquarium-text-color-inactive: var(--aquarium-colors-grey-40);
+  --aquarium-text-color-muted: var(--aquarium-colors-grey-50);
   --aquarium-text-color-default: var(--aquarium-colors-grey-70);
+  --aquarium-text-color-intense: var(--aquarium-colors-grey-90);
+  --aquarium-text-color-primary-inactive: var(--aquarium-colors-primary-40);
+  --aquarium-text-color-primary-active: var(--aquarium-colors-primary-90);
+  --aquarium-text-color-primary-muted: var(--aquarium-colors-primary-60);
+  --aquarium-text-color-primary-default: var(--aquarium-colors-primary-70);
+  --aquarium-text-color-primary-intense: var(--aquarium-colors-primary-80);
+  --aquarium-text-color-info-inactive: var(--aquarium-colors-info-20);
+  --aquarium-text-color-info-muted: var(--aquarium-colors-info-40);
+  --aquarium-text-color-info-default: var(--aquarium-colors-info-70);
+  --aquarium-text-color-info-intense: var(--aquarium-colors-info-90);
+  --aquarium-text-color-success-inactive: var(--aquarium-colors-success-10);
+  --aquarium-text-color-success-muted: var(--aquarium-colors-success-30);
+  --aquarium-text-color-success-default: var(--aquarium-colors-success-70);
+  --aquarium-text-color-success-intense: var(--aquarium-colors-success-90);
+  --aquarium-text-color-warning-inactive: var(--aquarium-colors-warning-20);
+  --aquarium-text-color-warning-muted: var(--aquarium-colors-warning-40);
+  --aquarium-text-color-warning-default: var(--aquarium-colors-warning-80);
+  --aquarium-text-color-warning-intense: var(--aquarium-colors-warning-100);
+  --aquarium-text-color-danger-inactive: var(--aquarium-colors-error-10);
+  --aquarium-text-color-danger-muted: var(--aquarium-colors-error-20);
+  --aquarium-text-color-danger-default: var(--aquarium-colors-error-50);
+  --aquarium-text-color-danger-intense: var(--aquarium-colors-error-80);
 }
 input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].no-arrow::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -1693,34 +1759,30 @@ input[type='number'].no-arrows {
 .border-none{
   border-style: none;
 }
-.border-error-50{
+.border-danger-default{
   border-color: #e62728;
-  border-color: var(--aquarium-colors-error-50, #e62728);
+  border-color: var(--aquarium-border-color-danger-default);
 }
 .border-default{
   border-color: #d2d2d6;
   border-color: var(--aquarium-border-color-default);
 }
-.border-info-70{
+.border-info-default{
   border-color: #0399e3;
-  border-color: var(--aquarium-colors-info-70, #0399e3);
+  border-color: var(--aquarium-border-color-info-default);
 }
 .border-muted{
   border-color: #ededf0;
   border-color: var(--aquarium-border-color-muted);
 }
-.border-primary-80{
+.border-primary-default{
   border-color: #3545be;
-  border-color: var(--aquarium-colors-primary-80, #3545be);
+  border-color: var(--aquarium-border-color-primary-default);
 }
 .border-transparent{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent, transparent);
 }
-.border-primary-40{
-  border-color: #b9c5ef;
-  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
-}
 .border-intense{
   border-color: #787885;
   border-color: var(--aquarium-border-color-intense);
@@ -1729,9 +1791,9 @@ input[type='number'].no-arrows {
   border-color: #292a31;
   border-color: var(--aquarium-colors-grey-90, #292a31);
 }
-.border-success-70{
+.border-success-intense{
   border-color: #00b300;
-  border-color: var(--aquarium-colors-success-70, #00b300);
+  border-color: var(--aquarium-border-color-success-intense);
 }
 .border-current{
   border-color: currentColor;
@@ -1741,93 +1803,85 @@ input[type='number'].no-arrows {
   border-color: #19191d;
   border-color: var(--aquarium-colors-grey-100, #19191d);
 }
-.bg-grey-10{
-  background-color: #e1e1e3;
-  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
+.bg-intense{
+  background-color: #d2d2d6;
+  background-color: var(--aquarium-background-color-intense);
 }
-.bg-error-5{
+.bg-status-danger{
   background-color: #fee8e7;
-  background-color: var(--aquarium-colors-error-5, #fee8e7);
+  background-color: var(--aquarium-background-color-status-danger);
 }
-.bg-info-10{
+.bg-status-info{
   background-color: #e0f5fe;
-  background-color: var(--aquarium-colors-info-10, #e0f5fe);
+  background-color: var(--aquarium-background-color-status-info);
 }
-.bg-success-5{
+.bg-status-success{
   background-color: #ecf7ed;
-  background-color: var(--aquarium-colors-success-5, #ecf7ed);
+  background-color: var(--aquarium-background-color-status-success);
 }
-.bg-warning-5{
+.bg-status-warning{
   background-color: #fff8ea;
-  background-color: var(--aquarium-colors-warning-5, #fff8ea);
+  background-color: var(--aquarium-background-color-status-warning);
 }
-.bg-primary-10{
-  background-color: #e3e9ff;
-  background-color: var(--aquarium-colors-primary-10, #e3e9ff);
-}
-.bg-primary-5{
+.bg-status-announcement{
   background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+  background-color: var(--aquarium-background-color-status-announcement);
 }
-.bg-grey-0{
+.bg-muted{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
-.bg-white{
+.bg-body{
   background-color: white;
-  background-color: var(--aquarium-colors-white, white);
+  background-color: var(--aquarium-background-color-body);
 }
-.bg-primary-80{
+.bg-primary-default{
   background-color: #3545be;
-  background-color: var(--aquarium-colors-primary-80, #3545be);
+  background-color: var(--aquarium-background-color-primary-default);
 }
-.bg-primary-40{
+.bg-primary-muted{
   background-color: #b9c5ef;
-  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
+  background-color: var(--aquarium-background-color-primary-muted);
 }
-.bg-grey-5{
+.bg-primary-active{
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-background-color-primary-active);
+}
+.bg-popover-content{
+  background-color: white;
+  background-color: var(--aquarium-background-color-popover-content);
+}
+.bg-default{
   background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+  background-color: var(--aquarium-background-color-default);
 }
-.bg-primary-100{
-  background-color: #0e1652;
-  background-color: var(--aquarium-colors-primary-100, #0e1652);
+.bg-primary-intense{
+  background-color: #222f95;
+  background-color: var(--aquarium-background-color-primary-intense);
 }
-.bg-info-50{
-  background-color: #28b4f4;
-  background-color: var(--aquarium-colors-info-50, #28b4f4);
+.bg-info-default{
+  background-color: #0399e3;
+  background-color: var(--aquarium-background-color-info-default);
 }
-.bg-warning-70{
+.bg-warning-default{
   background-color: #ffb300;
-  background-color: var(--aquarium-colors-warning-70, #ffb300);
+  background-color: var(--aquarium-background-color-warning-default);
 }
-.bg-success-70{
+.bg-success-default{
   background-color: #00b300;
-  background-color: var(--aquarium-colors-success-70, #00b300);
-}
-.bg-error-70{
-  background-color: #d80005;
-  background-color: var(--aquarium-colors-error-70, #d80005);
-}
-.bg-grey-20{
-  background-color: #d2d2d6;
-  background-color: var(--aquarium-colors-grey-20, #d2d2d6);
-}
-.bg-grey-90{
-  background-color: #292a31;
-  background-color: var(--aquarium-colors-grey-90, #292a31);
-}
-.bg-primary-70{
-  background-color: #5865cd;
-  background-color: var(--aquarium-colors-primary-70, #5865cd);
+  background-color: var(--aquarium-background-color-success-default);
 }
-.bg-grey-30{
-  background-color: #b4b4bb;
-  background-color: var(--aquarium-colors-grey-30, #b4b4bb);
+.bg-danger-intense{
+  background-color: #e62728;
+  background-color: var(--aquarium-background-color-danger-intense);
 }
-.bg-grey-80{
+.bg-body-intense{
   background-color: #3a3a44;
-  background-color: var(--aquarium-colors-grey-80, #3a3a44);
+  background-color: var(--aquarium-background-color-body-intense);
+}
+.bg-white{
+  background-color: white;
+  background-color: var(--aquarium-colors-white, white);
 }
 .bg-black{
   background-color: black;
@@ -1841,33 +1895,17 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
-.bg-info-5{
-  background-color: #effaff;
-  background-color: var(--aquarium-colors-info-5, #effaff);
-}
-.bg-secondary-5{
-  background-color: #fff3e8;
-  background-color: var(--aquarium-colors-secondary-5, #fff3e8);
-}
-.bg-error-0{
-  background-color: #fef2f1;
-  background-color: var(--aquarium-colors-error-0, #fef2f1);
+.bg-grey-5{
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
-.bg-error-20{
+.bg-danger-default{
   background-color: #ffadb3;
-  background-color: var(--aquarium-colors-error-20, #ffadb3);
+  background-color: var(--aquarium-background-color-danger-default);
 }
-.bg-secondary-90{
-  background-color: #eb4610;
-  background-color: var(--aquarium-colors-secondary-90, #eb4610);
-}
-.bg-success-90{
+.bg-success-intense{
   background-color: #008e00;
-  background-color: var(--aquarium-colors-success-90, #008e00);
-}
-.bg-primary-90{
-  background-color: #222f95;
-  background-color: var(--aquarium-colors-primary-90, #222f95);
+  background-color: var(--aquarium-background-color-success-intense);
 }
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -2447,18 +2485,110 @@ input[type='number'].no-arrows {
   color: #ffffff;
   color: var(--aquarium-colors-primary-0, #ffffff);
 }
+.text-inactive{
+  color: #9696a0;
+  color: var(--aquarium-text-color-inactive);
+}
+.text-muted{
+  color: #787885;
+  color: var(--aquarium-text-color-muted);
+}
 .text-default{
   color: #4a4b57;
   color: var(--aquarium-text-color-default);
 }
+.text-intense{
+  color: #292a31;
+  color: var(--aquarium-text-color-intense);
+}
+.text-primary-inactive{
+  color: #b9c5ef;
+  color: var(--aquarium-text-color-primary-inactive);
+}
+.text-primary-active{
+  color: #222f95;
+  color: var(--aquarium-text-color-primary-active);
+}
+.text-primary-muted{
+  color: #818eec;
+  color: var(--aquarium-text-color-primary-muted);
+}
+.text-primary-default{
+  color: #5865cd;
+  color: var(--aquarium-text-color-primary-default);
+}
+.text-primary-intense{
+  color: #3545be;
+  color: var(--aquarium-text-color-primary-intense);
+}
+.text-info-inactive{
+  color: #b4e5fb;
+  color: var(--aquarium-text-color-info-inactive);
+}
+.text-info-muted{
+  color: #4cc2f7;
+  color: var(--aquarium-text-color-info-muted);
+}
+.text-info-default{
+  color: #0399e3;
+  color: var(--aquarium-text-color-info-default);
+}
+.text-info-intense{
+  color: #0174ba;
+  color: var(--aquarium-text-color-info-intense);
+}
+.text-success-inactive{
+  color: #cbffc9;
+  color: var(--aquarium-text-color-success-inactive);
+}
+.text-success-muted{
+  color: #89eb80;
+  color: var(--aquarium-text-color-success-muted);
+}
+.text-success-default{
+  color: #00b300;
+  color: var(--aquarium-text-color-success-default);
+}
+.text-success-intense{
+  color: #008e00;
+  color: var(--aquarium-text-color-success-intense);
+}
+.text-warning-inactive{
+  color: #feebb2;
+  color: var(--aquarium-text-color-warning-inactive);
+}
+.text-warning-muted{
+  color: #fdd44d;
+  color: var(--aquarium-text-color-warning-muted);
+}
+.text-warning-default{
+  color: #fd9f00;
+  color: var(--aquarium-text-color-warning-default);
+}
+.text-warning-intense{
+  color: #fe6d00;
+  color: var(--aquarium-text-color-warning-intense);
+}
+.text-danger-inactive{
+  color: #ffcbd2;
+  color: var(--aquarium-text-color-danger-inactive);
+}
+.text-danger-muted{
+  color: #ffadb3;
+  color: var(--aquarium-text-color-danger-muted);
+}
+.text-danger-default{
+  color: #e62728;
+  color: var(--aquarium-text-color-danger-default);
+}
+.text-danger-intense{
+  color: #c50001;
+  color: var(--aquarium-text-color-danger-intense);
+}
 .text-transparent{
   color: transparent;
   color: var(--aquarium-colors-transparent, transparent);
 }
-.text-muted{
-  color: #9696a0;
-  color: var(--aquarium-text-color-muted);
-}
 .text-white{
   color: white;
   color: var(--aquarium-colors-white, white);
@@ -2656,13 +2786,13 @@ input[type='number'].no-arrows {
   --aquarium-background-color-accent: var(--aquarium-colors-grey-70);
   --aquarium-background-color-contrast: var(--aquarium-colors-grey-20);
 }
-.placeholder\:text-muted::-moz-placeholder{
+.placeholder\:text-inactive::-moz-placeholder{
   color: #9696a0;
-  color: var(--aquarium-text-color-muted);
+  color: var(--aquarium-text-color-inactive);
 }
-.placeholder\:text-muted::placeholder{
+.placeholder\:text-inactive::placeholder{
   color: #9696a0;
-  color: var(--aquarium-text-color-muted);
+  color: var(--aquarium-text-color-inactive);
 }
 .before\:content-\[\'_\'\]::before{
   --tw-content: ' ';
@@ -2674,28 +2804,25 @@ input[type='number'].no-arrows {
 .last\:border-r-0:last-child{
   border-right-width: 0px;
 }
-.visited\:text-primary-80:visited{
+.visited\:text-primary-intense:visited{
   color: #3545be;
-  color: var(--aquarium-colors-primary-80, #3545be);
+  color: var(--aquarium-text-color-primary-intense);
 }
-.checked\:border-primary-80:checked{
+.checked\:border-primary-default:checked{
   border-color: #3545be;
-  border-color: var(--aquarium-colors-primary-80, #3545be);
+  border-color: var(--aquarium-border-color-primary-default);
 }
-.checked\:border-primary-40:checked{
-  border-color: #b9c5ef;
-  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
+.checked\:border-transparent:checked{
+  border-color: transparent;
+  border-color: var(--aquarium-colors-transparent, transparent);
 }
-.checked\:bg-primary-80:checked{
+.checked\:bg-primary-default:checked{
   background-color: #3545be;
-  background-color: var(--aquarium-colors-primary-80, #3545be);
+  background-color: var(--aquarium-background-color-primary-default);
 }
-.checked\:bg-primary-40:checked{
+.checked\:bg-primary-muted:checked{
   background-color: #b9c5ef;
-  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
-}
-.checked\:bg-opacity-40:checked{
-  --tw-bg-opacity: 0.4;
+  background-color: var(--aquarium-background-color-primary-muted);
 }
 .checked\:opacity-50:checked{
   opacity: 0.5;
@@ -2713,53 +2840,45 @@ input[type='number'].no-arrows {
   border-color: #787885;
   border-color: var(--aquarium-border-color-intense);
 }
-.hover\:bg-primary-5:hover{
+.hover\:bg-primary-hover:hover{
   background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+  background-color: var(--aquarium-background-color-primary-hover);
 }
-.hover\:bg-grey-0:hover{
+.hover\:bg-muted:hover{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
-.hover\:bg-grey-5:hover{
+.hover\:bg-default:hover{
   background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+  background-color: var(--aquarium-background-color-default);
 }
-.hover\:bg-grey-20:hover{
+.hover\:bg-intense:hover{
   background-color: #d2d2d6;
-  background-color: var(--aquarium-colors-grey-20, #d2d2d6);
+  background-color: var(--aquarium-background-color-intense);
 }
-.hover\:bg-primary-90:hover{
+.hover\:bg-primary-intense:hover{
   background-color: #222f95;
-  background-color: var(--aquarium-colors-primary-90, #222f95);
+  background-color: var(--aquarium-background-color-primary-intense);
 }
-.hover\:bg-error-10:hover{
+.hover\:bg-danger-muted:hover{
   background-color: #ffcbd2;
-  background-color: var(--aquarium-colors-error-10, #ffcbd2);
-}
-.hover\:bg-grey-10:hover{
-  background-color: #e1e1e3;
-  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
+  background-color: var(--aquarium-background-color-danger-muted);
 }
-.hover\:text-primary-90:hover{
+.hover\:text-primary-active:hover{
   color: #222f95;
-  color: var(--aquarium-colors-primary-90, #222f95);
+  color: var(--aquarium-text-color-primary-active);
 }
-.hover\:text-primary-70:hover{
+.hover\:text-primary-default:hover{
   color: #5865cd;
-  color: var(--aquarium-colors-primary-70, #5865cd);
+  color: var(--aquarium-text-color-primary-default);
 }
-.hover\:text-grey-80:hover{
-  color: #3a3a44;
-  color: var(--aquarium-colors-grey-80, #3a3a44);
+.hover\:text-primary-intense:hover{
+  color: #3545be;
+  color: var(--aquarium-text-color-primary-intense);
 }
-.hover\:text-grey-90:hover{
+.hover\:text-intense:hover{
   color: #292a31;
-  color: var(--aquarium-colors-grey-90, #292a31);
-}
-.hover\:text-primary-80:hover{
-  color: #3545be;
-  color: var(--aquarium-colors-primary-80, #3545be);
+  color: var(--aquarium-text-color-intense);
 }
 .hover\:underline:hover{
   -webkit-text-decoration-line: underline;
@@ -2768,29 +2887,29 @@ input[type='number'].no-arrows {
 .hover\:ring-primary-90:hover{
   --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
-.hover\:checked\:bg-primary-70:checked:hover{
-  background-color: #5865cd;
-  background-color: var(--aquarium-colors-primary-70, #5865cd);
+.hover\:checked\:bg-primary-intense:checked:hover{
+  background-color: #222f95;
+  background-color: var(--aquarium-background-color-primary-intense);
 }
-.focus\:border-info-70:focus{
+.focus\:border-info-default:focus{
   border-color: #0399e3;
-  border-color: var(--aquarium-colors-info-70, #0399e3);
+  border-color: var(--aquarium-border-color-info-default);
 }
 .focus\:border-transparent:focus{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent, transparent);
 }
-.focus\:bg-error-20:focus{
+.focus\:bg-danger-default:focus{
   background-color: #ffadb3;
-  background-color: var(--aquarium-colors-error-20, #ffadb3);
+  background-color: var(--aquarium-background-color-danger-default);
 }
-.focus\:bg-grey-20:focus{
+.focus\:bg-intense:focus{
   background-color: #d2d2d6;
-  background-color: var(--aquarium-colors-grey-20, #d2d2d6);
+  background-color: var(--aquarium-background-color-intense);
 }
-.focus\:text-primary-80:focus{
+.focus\:text-primary-intense:focus{
   color: #3545be;
-  color: var(--aquarium-colors-primary-80, #3545be);
+  color: var(--aquarium-text-color-primary-intense);
 }
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
@@ -2820,53 +2939,45 @@ input[type='number'].no-arrows {
 .focus\:ring-offset-0:focus{
   --tw-ring-offset-width: 0px;
 }
-.focus-visible\:border-info-70.focus-visible{
+.focus-visible\:border-info-default.focus-visible{
   border-color: #0399e3;
-  border-color: var(--aquarium-colors-info-70, #0399e3);
+  border-color: var(--aquarium-border-color-info-default);
 }
-.focus-visible\:border-info-70:focus-visible{
+.focus-visible\:border-info-default:focus-visible{
   border-color: #0399e3;
-  border-color: var(--aquarium-colors-info-70, #0399e3);
+  border-color: var(--aquarium-border-color-info-default);
 }
-.focus-visible\:bg-grey-0.focus-visible{
+.focus-visible\:bg-muted.focus-visible{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
-.focus-visible\:bg-grey-0:focus-visible{
+.focus-visible\:bg-muted:focus-visible{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
-.focus-visible\:text-primary-90.focus-visible{
+.focus-visible\:text-primary-active.focus-visible{
   color: #222f95;
-  color: var(--aquarium-colors-primary-90, #222f95);
+  color: var(--aquarium-text-color-primary-active);
 }
-.focus-visible\:text-primary-90:focus-visible{
+.focus-visible\:text-primary-active:focus-visible{
   color: #222f95;
-  color: var(--aquarium-colors-primary-90, #222f95);
+  color: var(--aquarium-text-color-primary-active);
 }
-.focus-visible\:text-primary-80.focus-visible{
+.focus-visible\:text-primary-intense.focus-visible{
   color: #3545be;
-  color: var(--aquarium-colors-primary-80, #3545be);
+  color: var(--aquarium-text-color-primary-intense);
 }
-.focus-visible\:text-primary-80:focus-visible{
+.focus-visible\:text-primary-intense:focus-visible{
   color: #3545be;
-  color: var(--aquarium-colors-primary-80, #3545be);
+  color: var(--aquarium-text-color-primary-intense);
 }
-.focus-visible\:text-grey-80.focus-visible{
-  color: #3a3a44;
-  color: var(--aquarium-colors-grey-80, #3a3a44);
-}
-.focus-visible\:text-grey-80:focus-visible{
-  color: #3a3a44;
-  color: var(--aquarium-colors-grey-80, #3a3a44);
-}
-.focus-visible\:text-grey-90.focus-visible{
+.focus-visible\:text-intense.focus-visible{
   color: #292a31;
-  color: var(--aquarium-colors-grey-90, #292a31);
+  color: var(--aquarium-text-color-intense);
 }
-.focus-visible\:text-grey-90:focus-visible{
+.focus-visible\:text-intense:focus-visible{
   color: #292a31;
-  color: var(--aquarium-colors-grey-90, #292a31);
+  color: var(--aquarium-text-color-intense);
 }
 .focus-visible\:outline-0.focus-visible{
   outline-width: 0px;
@@ -2922,37 +3033,41 @@ input[type='number'].no-arrows {
 .focus-visible\:ring-info-70:focus-visible{
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
-.active\:bg-white:active{
+.active\:bg-body:active{
   background-color: white;
-  background-color: var(--aquarium-colors-white, white);
+  background-color: var(--aquarium-background-color-body);
 }
-.active\:bg-primary-90:active{
+.active\:bg-primary-intense:active{
   background-color: #222f95;
-  background-color: var(--aquarium-colors-primary-90, #222f95);
+  background-color: var(--aquarium-background-color-primary-intense);
 }
-.active\:bg-primary-5:active{
+.active\:bg-primary-active:active{
   background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+  background-color: var(--aquarium-background-color-primary-active);
 }
 .active\:bg-transparent:active{
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
-.active\:bg-grey-5:active{
+.active\:bg-default:active{
   background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+  background-color: var(--aquarium-background-color-default);
 }
-.active\:bg-grey-10:active{
-  background-color: #e1e1e3;
-  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
+.active\:bg-intense:active{
+  background-color: #d2d2d6;
+  background-color: var(--aquarium-background-color-intense);
 }
-.active\:text-primary-90:active{
+.active\:text-primary-active:active{
   color: #222f95;
-  color: var(--aquarium-colors-primary-90, #222f95);
+  color: var(--aquarium-text-color-primary-active);
 }
-.active\:text-grey-50:active{
+.active\:text-primary-intense:active{
+  color: #3545be;
+  color: var(--aquarium-text-color-primary-intense);
+}
+.active\:text-muted:active{
   color: #787885;
-  color: var(--aquarium-colors-grey-50, #787885);
+  color: var(--aquarium-text-color-muted);
 }
 .active\:text-default:active{
   color: #4a4b57;
@@ -2974,33 +3089,29 @@ input[type='number'].no-arrows {
   border-color: #d2d2d6;
   border-color: var(--aquarium-border-color-default);
 }
-.disabled\:bg-grey-5:disabled{
+.disabled\:bg-default:disabled{
   background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+  background-color: var(--aquarium-background-color-default);
 }
-.disabled\:bg-primary-40:disabled{
+.disabled\:bg-primary-muted:disabled{
   background-color: #b9c5ef;
-  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
+  background-color: var(--aquarium-background-color-primary-muted);
 }
-.disabled\:bg-white:disabled{
+.disabled\:bg-body:disabled{
   background-color: white;
-  background-color: var(--aquarium-colors-white, white);
+  background-color: var(--aquarium-background-color-body);
 }
 .disabled\:bg-transparent:disabled{
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
-.disabled\:text-muted:disabled{
+.disabled\:text-inactive:disabled{
   color: #9696a0;
-  color: var(--aquarium-text-color-muted);
+  color: var(--aquarium-text-color-inactive);
 }
-.disabled\:text-primary-40:disabled{
+.disabled\:text-primary-inactive:disabled{
   color: #b9c5ef;
-  color: var(--aquarium-colors-primary-40, #b9c5ef);
-}
-.disabled\:text-grey-30:disabled{
-  color: #b4b4bb;
-  color: var(--aquarium-colors-grey-30, #b4b4bb);
+  color: var(--aquarium-text-color-primary-inactive);
 }
 .disabled\:ring-primary-40:disabled{
   --tw-ring-color: var(--aquarium-colors-primary-40, #b9c5ef);
@@ -3011,9 +3122,9 @@ input[type='number'].no-arrows {
 .group:hover .group-hover\:visible{
   visibility: visible;
 }
-.group:hover .group-hover\:bg-grey-0{
+.group:hover .group-hover\:bg-muted{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
 .peer\/switch:checked~.peer-checked\/switch\:left-1{
   left: 2px;
@@ -3022,33 +3133,33 @@ input[type='number'].no-arrows {
   --tw-translate-x: 16px;
   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));
 }
-.peer:checked~.peer-checked\:border-primary-80{
+.peer:checked~.peer-checked\:border-primary-default{
   border-color: #3545be;
-  border-color: var(--aquarium-colors-primary-80, #3545be);
+  border-color: var(--aquarium-border-color-primary-default);
 }
-.peer:checked~.peer-checked\:border-primary-40{
-  border-color: #b9c5ef;
-  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
+.peer:checked~.peer-checked\:border-transparent{
+  border-color: transparent;
+  border-color: var(--aquarium-colors-transparent, transparent);
 }
 .peer:checked~.peer-checked\:text-white{
   color: white;
   color: var(--aquarium-colors-white, white);
 }
-.peer:checked~.peer-checked\:text-primary-10{
-  color: #e3e9ff;
-  color: var(--aquarium-colors-primary-10, #e3e9ff);
+.peer:checked~.peer-checked\:text-primary-default{
+  color: #5865cd;
+  color: var(--aquarium-text-color-primary-default);
 }
-.peer\/switch:checked~.peer-checked\/switch\:text-primary-60{
+.peer\/switch:checked~.peer-checked\/switch\:text-primary-muted{
   color: #818eec;
-  color: var(--aquarium-colors-primary-60, #818eec);
+  color: var(--aquarium-text-color-primary-muted);
 }
 .peer:hover~.peer-hover\:border-intense{
   border-color: #787885;
   border-color: var(--aquarium-border-color-intense);
 }
-.peer:focus~.peer-focus\:border-info-70{
+.peer:focus~.peer-focus\:border-info-default{
   border-color: #0399e3;
-  border-color: var(--aquarium-colors-info-70, #0399e3);
+  border-color: var(--aquarium-border-color-info-default);
 }
 .children\:inline-block>*{
   display: inline-block;
@@ -3067,35 +3178,35 @@ input[type='number'].no-arrows {
   stroke: transparent;
   stroke: var(--aquarium-colors-transparent, transparent);
 }
-.\[\&\>path\]\:stroke-2>path{
-  stroke-width: 2;
+.\[\&\>path\]\:stroke-\[3px\]>path{
+  stroke-width: 3px;
 }
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path{
   stroke: white;
   stroke: var(--aquarium-colors-white, white);
 }
-.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-primary-10>path{
-  stroke: #e3e9ff;
-  stroke: var(--aquarium-colors-primary-10, #e3e9ff);
+.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-primary-70>path{
+  stroke: #5865cd;
+  stroke: var(--aquarium-colors-primary-70, #5865cd);
 }
-.\[\&\>\*\]\:bg-primary-5>*{
+.\[\&\>\*\]\:bg-primary-active>*{
   background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+  background-color: var(--aquarium-background-color-primary-active);
 }
-.\[\&\>\*\]\:hover\:bg-grey-0:hover>*{
+.\[\&\>\*\]\:hover\:bg-muted:hover>*{
   background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+  background-color: var(--aquarium-background-color-muted);
 }
 .\[\&\>button\]\:p-0>button{
   padding: 0;
 }
-.\[\&\>button\]\:text-grey-50>button{
+.\[\&\>button\]\:text-muted>button{
   color: #787885;
-  color: var(--aquarium-colors-grey-50, #787885);
+  color: var(--aquarium-text-color-muted);
 }
-.\[\&\>button\]\:text-error-20>button{
+.\[\&\>button\]\:text-danger-muted>button{
   color: #ffadb3;
-  color: var(--aquarium-colors-error-20, #ffadb3);
+  color: var(--aquarium-text-color-danger-muted);
 }
 .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child){
   margin-left: -8px;
@@ -3107,4 +3218,8 @@ input[type='number'].no-arrows {
 .\[\&\>div\:first-child\]\:px-3>div:first-child{
   padding-left: 8px;
   padding-right: 8px;
+}
+.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button{
+  -webkit-appearance: none;
+          appearance: none;
 }