@aivenio/aquarium 5.0.0 → 5.1.0

package/dist/styles.css

@@ -652,7 +652,10 @@ video {
   --aquarium-font-size-9xl-line-height: 1;
   --aquarium-font-size-9xl: 8rem;
   --aquarium-background-color-body: var(--aquarium-colors-white);
+  --aquarium-background-color-layer: var(--aquarium-colors-white);
   --aquarium-background-color-body-intense: var(--aquarium-colors-grey-80);
+  --aquarium-background-color-inverse: var(--aquarium-colors-grey-80);
+  --aquarium-background-color-overlay: var(--aquarium-colors-white);
   --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);
@@ -662,18 +665,26 @@ video {
   --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-action-primary-button-default: var(--aquarium-colors-primary-80);
+  --aquarium-background-color-action-primary-button-active: var(--aquarium-colors-primary-5);
+  --aquarium-background-color-action-primary-button-hover: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-action-primary-button-disabled: var(--aquarium-colors-primary-40);
   --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-info-inverse: var(--aquarium-colors-info-70);
   --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-success-inverse: var(--aquarium-colors-success-70);
   --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-warning-inverse: var(--aquarium-colors-warning-70);
   --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-danger-inverse: var(--aquarium-colors-error-70);
   --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);
@@ -685,6 +696,11 @@ video {
   --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-action-focus: var(--aquarium-colors-primary-80);
+  --aquarium-border-color-action-secondary-button-default: var(--aquarium-colors-primary-80);
+  --aquarium-border-color-action-secondary-button-active: var(--aquarium-colors-primary-5);
+  --aquarium-border-color-action-secondary-button-hover: var(--aquarium-colors-primary-5);
+  --aquarium-border-color-action-secondary-button-disabled: var(--aquarium-colors-primary-60);
   --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);
@@ -1043,6 +1059,9 @@ video {
 .z-40{
   z-index: 40;
 }
+.z-\[101\]{
+  z-index: 101;
+}
 .z-modal{
   z-index: 100;
 }
@@ -1822,6 +1841,26 @@ video {
 .border-none{
   border-style: none;
 }
+.border-action-focus{
+  border-color: rgba(53,69,190,1);
+  border-color: var(--aquarium-border-color-action-focus);
+}
+.border-action-secondary-button-active{
+  border-color: rgba(243,246,255,1);
+  border-color: var(--aquarium-border-color-action-secondary-button-active);
+}
+.border-action-secondary-button-default{
+  border-color: rgba(53,69,190,1);
+  border-color: var(--aquarium-border-color-action-secondary-button-default);
+}
+.border-action-secondary-button-disabled{
+  border-color: rgba(129,142,236,1);
+  border-color: var(--aquarium-border-color-action-secondary-button-disabled);
+}
+.border-action-secondary-button-hover{
+  border-color: rgba(243,246,255,1);
+  border-color: var(--aquarium-border-color-action-secondary-button-hover);
+}
 .border-black{
   border-color: black;
   border-color: var(--aquarium-colors-black);
@@ -2246,6 +2285,22 @@ video {
   border-color: white;
   border-color: var(--aquarium-colors-white);
 }
+.bg-action-primary-button-active{
+  background-color: rgba(243,246,255,1);
+  background-color: var(--aquarium-background-color-action-primary-button-active);
+}
+.bg-action-primary-button-default{
+  background-color: rgba(53,69,190,1);
+  background-color: var(--aquarium-background-color-action-primary-button-default);
+}
+.bg-action-primary-button-disabled{
+  background-color: rgba(185,197,239,1);
+  background-color: var(--aquarium-background-color-action-primary-button-disabled);
+}
+.bg-action-primary-button-hover{
+  background-color: rgba(34,47,149,1);
+  background-color: var(--aquarium-background-color-action-primary-button-hover);
+}
 .bg-black{
   background-color: black;
   background-color: var(--aquarium-colors-black);
@@ -2270,6 +2325,10 @@ video {
   background-color: rgba(230,39,40,1);
   background-color: var(--aquarium-background-color-danger-intense);
 }
+.bg-danger-inverse{
+  background-color: rgba(216,0,5,1);
+  background-color: var(--aquarium-background-color-danger-inverse);
+}
 .bg-danger-muted{
   background-color: rgba(255,203,210,1);
   background-color: var(--aquarium-background-color-danger-muted);
@@ -2434,6 +2493,10 @@ video {
   background-color: rgba(1,116,186,1);
   background-color: var(--aquarium-background-color-info-intense);
 }
+.bg-info-inverse{
+  background-color: rgba(3,153,227,1);
+  background-color: var(--aquarium-background-color-info-inverse);
+}
 .bg-info-muted{
   background-color: rgba(224,245,254,1);
   background-color: var(--aquarium-background-color-info-muted);
@@ -2442,10 +2505,22 @@ video {
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.bg-inverse{
+  background-color: rgba(58,58,68,1);
+  background-color: var(--aquarium-background-color-inverse);
+}
+.bg-layer{
+  background-color: white;
+  background-color: var(--aquarium-background-color-layer);
+}
 .bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
+.bg-overlay{
+  background-color: white;
+  background-color: var(--aquarium-background-color-overlay);
+}
 .bg-popover-content{
   background-color: white;
   background-color: var(--aquarium-background-color-popover-content);
@@ -2642,6 +2717,10 @@ video {
   background-color: rgba(0,142,0,1);
   background-color: var(--aquarium-background-color-success-intense);
 }
+.bg-success-inverse{
+  background-color: rgba(0,179,0,1);
+  background-color: var(--aquarium-background-color-success-inverse);
+}
 .bg-success-muted{
   background-color: rgba(236,247,237,1);
   background-color: var(--aquarium-background-color-success-muted);
@@ -2706,6 +2785,10 @@ video {
   background-color: rgba(255,144,3,1);
   background-color: var(--aquarium-background-color-warning-intense);
 }
+.bg-warning-inverse{
+  background-color: rgba(255,179,0,1);
+  background-color: var(--aquarium-background-color-warning-inverse);
+}
 .bg-warning-muted{
   background-color: rgba(255,248,234,1);
   background-color: var(--aquarium-background-color-warning-muted);
@@ -3494,6 +3577,9 @@ video {
 .opacity-100{
   opacity: 1;
 }
+.opacity-30{
+  opacity: 0.3;
+}
 .opacity-40{
   opacity: 0.4;
 }
@@ -3642,6 +3728,10 @@ input[type="number"].no-arrows{
   --aquarium-border-color-primary-muted: var(--aquarium-colors-primary-80);
   --aquarium-border-color-primary-default: var(--aquarium-colors-primary-60);
   --aquarium-border-color-primary-intense: var(--aquarium-colors-primary-40);
+  --aquarium-border-color-action-secondary-button-default: var(--aquarium-colors-primary-60);
+  --aquarium-border-color-action-secondary-button-active: var(--aquarium-colors-primary-70);
+  --aquarium-border-color-action-secondary-button-hover: var(--aquarium-colors-primary-60);
+  --aquarium-border-color-action-secondary-button-disabled: var(--aquarium-colors-primary-80);
   --aquarium-border-color-info-muted: var(--aquarium-colors-info-100);
   --aquarium-border-color-info-default: var(--aquarium-colors-info-90);
   --aquarium-border-color-info-intense: var(--aquarium-colors-info-20);
@@ -3656,8 +3746,11 @@ input[type="number"].no-arrows{
   --aquarium-border-color-danger-intense: var(--aquarium-colors-error-10);
 
   --aquarium-background-color-body: var(--aquarium-colors-grey-100);
-  --aquarium-background-color-body-intense: var(--aquarium-colors-grey-100);
+  --aquarium-background-color-layer: var(--aquarium-colors-grey-90);
+  --aquarium-background-color-body-intense: var(--aquarium-colors-grey-20);
+  --aquarium-background-color-inverse: var(--aquarium-colors-grey-20);
   --aquarium-background-color-popover-content: var(--aquarium-colors-grey-90);
+  --aquarium-background-color-overlay: var(--aquarium-colors-grey-90);
   --aquarium-background-color-muted: var(--aquarium-colors-grey-90);
   --aquarium-background-color-default: var(--aquarium-colors-grey-80);
   --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
@@ -3666,18 +3759,26 @@ input[type="number"].no-arrows{
   --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-10);
   --aquarium-background-color-primary-active: var(--aquarium-colors-primary-90);
   --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-action-primary-button-default: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-action-primary-button-active: var(--aquarium-colors-primary-80);
+  --aquarium-background-color-action-primary-button-hover: var(--aquarium-colors-primary-80);
+  --aquarium-background-color-action-primary-button-disabled: color-mix(in srgb, var(--aquarium-colors-primary-60) 50%, transparent);
   --aquarium-background-color-info-muted: var(--aquarium-colors-info-100);
   --aquarium-background-color-info-default: var(--aquarium-colors-info-90);
   --aquarium-background-color-info-intense: var(--aquarium-colors-info-40);
+  --aquarium-background-color-info-inverse: var(--aquarium-colors-info-30);
   --aquarium-background-color-success-muted: var(--aquarium-colors-success-100);
   --aquarium-background-color-success-default: var(--aquarium-colors-success-90);
   --aquarium-background-color-success-intense: var(--aquarium-colors-success-80);
+  --aquarium-background-color-success-inverse: var(--aquarium-colors-success-50);
   --aquarium-background-color-warning-muted: var(--aquarium-colors-warning-100);
   --aquarium-background-color-warning-default: var(--aquarium-colors-warning-90);
   --aquarium-background-color-warning-intense: var(--aquarium-colors-warning-40);
+  --aquarium-background-color-warning-inverse: var(--aquarium-colors-warning-50);
   --aquarium-background-color-danger-muted: var(--aquarium-colors-error-90);
   --aquarium-background-color-danger-default: var(--aquarium-colors-error-80);
   --aquarium-background-color-danger-intense: var(--aquarium-colors-error-40);
+  --aquarium-background-color-danger-inverse: var(--aquarium-colors-error-30);
   --aquarium-background-color-status-announcement: color-mix(in srgb, var(--aquarium-colors-primary-90) 30%, transparent);
   --aquarium-background-color-status-info: color-mix(in srgb, var(--aquarium-colors-info-100) 30%, transparent);
   --aquarium-background-color-status-warning: color-mix(in srgb, var(--aquarium-colors-warning-100) 30%, transparent);
@@ -3715,7 +3816,7 @@ input[type="number"].no-arrows{
   --aquarium-box-shadow-body-inset: inset 0 0 0 3px var(--aquarium-background-color-body);
 }
 .aquarium-theme-dark .Aquarium-Toast {
-    --aquarium-background-color-body-intense: var(--aquarium-background-color-intense);
+    --aquarium-background-color-inverse: var(--aquarium-background-color-intense);
     --aquarium-text-color-primary-inactive: var(--aquarium-text-color-primary-muted);
   }
 .aquarium-theme-dark .Aquarium-Tabs .from-white,
@@ -3726,11 +3827,6 @@ input[type="number"].no-arrows{
     --aquarium-background-color-intense: var(--aquarium-colors-grey-70);
     --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-60);
   }
-.aquarium-theme-dark .Aquarium-Button\.Primary {
-    --aquarium-background-color-primary-default: var(--aquarium-colors-primary-90);
-    --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-80);
-    --aquarium-background-color-primary-muted: color-mix(in srgb, var(--aquarium-colors-primary-60) 50%, transparent);
-  }
 .aquarium-theme-dark .Aquarium-Button\.Primary:disabled {
       color: rgba(53,69,190,1);
       color: var(--aquarium-text-color-primary-intense);
@@ -3799,7 +3895,7 @@ input[type="number"].no-arrows{
     --aquarium-background-color-primary-hover: color-mix(in srgb, var(--aquarium-colors-primary-100) 70%, transparent);
   }
 .aquarium-theme-dark .Aquarium-Tooltip {
-    --aquarium-background-color-body-intense: var(--aquarium-background-color-intense);
+    --aquarium-background-color-inverse: var(--aquarium-background-color-intense);
   }
 .aquarium-theme-dark .Aquarium-Label\.Tooltip {
     color: rgba(120,120,133,1);
@@ -3807,7 +3903,7 @@ input[type="number"].no-arrows{
   }
 .aquarium-theme-dark .Aquarium-Stepper-Indicator {
     --aquarium-background-color-intense: var(--aquarium-text-color-inactive);
-    --aquarium-background-color-body-intense: var(--aquarium-text-color-intense);
+    --aquarium-background-color-inverse: var(--aquarium-text-color-intense);
   }
 .aquarium-theme-dark .Aquarium-StatusChip {
     --aquarium-text-color-info-intense: var(--aquarium-text-color-info-default);
@@ -3815,7 +3911,7 @@ input[type="number"].no-arrows{
 .aquarium-theme-dark .Aquarium-Navigation li[role="presentation"] a[role="menuitem"] {
         --aquarium-text-color-primary-intense: var(--aquarium-text-color-primary-default);
       }
-/* In dark mode, both these popover related components(bg-popover-content) and banner background(bg-muted) colors are set to grey-90. To avoid them blending together, we need to use a different color. */
+/* In dark mode, both these popover related components(bg-overlay) and banner background(bg-muted) colors are set to grey-90. To avoid them blending together, we need to use a different color. */
 .aquarium-theme-dark .Aquarium-Modal .before\:from-white::before,
     .aquarium-theme-dark .Aquarium-Modal .after\:from-white::after,
     .aquarium-theme-dark .Aquarium-Dialog .before\:from-white::before,
@@ -3944,10 +4040,10 @@ input[type="number"].no-arrows{
   border-width: 1px;
   border-width: var(--aquarium-border-width-default);
 }
-.before\:border-primary-default::before{
+.before\:border-action-secondary-button-default::before{
   content: var(--tw-content);
   border-color: rgba(53,69,190,1);
-  border-color: var(--aquarium-border-color-primary-default);
+  border-color: var(--aquarium-border-color-action-secondary-button-default);
 }
 .before\:bg-gradient-to-b::before{
   content: var(--tw-content);
@@ -4053,6 +4149,10 @@ input[type="number"].no-arrows{
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
+.active\:bg-action-primary-button-active:active{
+  background-color: rgba(243,246,255,1);
+  background-color: var(--aquarium-background-color-action-primary-button-active);
+}
 .active\:bg-body:active{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
@@ -4160,6 +4260,10 @@ input[type="number"].no-arrows{
   border-color: rgba(120,120,133,1);
   border-color: var(--aquarium-border-color-intense);
 }
+.hover\:bg-action-primary-button-hover:where([data-rac])[data-hovered]{
+  background-color: rgba(34,47,149,1);
+  background-color: var(--aquarium-background-color-action-primary-button-hover);
+}
 .hover\:bg-danger-muted:where([data-rac])[data-hovered]{
   background-color: rgba(255,203,210,1);
   background-color: var(--aquarium-background-color-danger-muted);
@@ -4184,10 +4288,6 @@ input[type="number"].no-arrows{
   background-color: rgba(243,246,255,1);
   background-color: var(--aquarium-background-color-primary-hover);
 }
-.hover\:bg-primary-intense:where([data-rac])[data-hovered]{
-  background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
-}
 .hover\:text-primary-active:where([data-rac])[data-hovered]{
   color: rgba(34,47,149,1);
   color: var(--aquarium-text-color-primary-active);
@@ -4211,6 +4311,10 @@ input[type="number"].no-arrows{
   border-color: rgba(120,120,133,1);
   border-color: var(--aquarium-border-color-intense);
 }
+.hover\:bg-action-primary-button-hover:where(:not([data-rac])):hover{
+  background-color: rgba(34,47,149,1);
+  background-color: var(--aquarium-background-color-action-primary-button-hover);
+}
 .hover\:bg-danger-muted:where(:not([data-rac])):hover{
   background-color: rgba(255,203,210,1);
   background-color: var(--aquarium-background-color-danger-muted);
@@ -4235,10 +4339,6 @@ input[type="number"].no-arrows{
   background-color: rgba(243,246,255,1);
   background-color: var(--aquarium-background-color-primary-hover);
 }
-.hover\:bg-primary-intense:where(:not([data-rac])):hover{
-  background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
-}
 .hover\:text-primary-active:where(:not([data-rac])):hover{
   color: rgba(34,47,149,1);
   color: var(--aquarium-text-color-primary-active);
@@ -4625,6 +4725,10 @@ input[type="number"].no-arrows{
   border-color: rgba(210,210,214,1);
   border-color: var(--aquarium-border-color-default);
 }
+.disabled\:bg-action-primary-button-disabled:where([data-rac])[data-disabled]{
+  background-color: rgba(185,197,239,1);
+  background-color: var(--aquarium-background-color-action-primary-button-disabled);
+}
 .disabled\:bg-body:where([data-rac])[data-disabled]{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
@@ -4637,10 +4741,6 @@ input[type="number"].no-arrows{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.disabled\:bg-primary-muted:where([data-rac])[data-disabled]{
-  background-color: rgba(185,197,239,1);
-  background-color: var(--aquarium-background-color-primary-muted);
-}
 .disabled\:text-inactive:where([data-rac])[data-disabled]{
   color: rgba(150,150,160,1);
   color: var(--aquarium-text-color-inactive);
@@ -4653,10 +4753,10 @@ input[type="number"].no-arrows{
   color: white;
   color: var(--aquarium-colors-white);
 }
-.before\:disabled\:border-primary-muted:where([data-rac])[data-disabled]::before{
+.before\:disabled\:border-action-secondary-button-disabled:where([data-rac])[data-disabled]::before{
   content: var(--tw-content);
   border-color: rgba(129,142,236,1);
-  border-color: var(--aquarium-border-color-primary-muted);
+  border-color: var(--aquarium-border-color-action-secondary-button-disabled);
 }
 .disabled\:cursor-not-allowed:where(:not([data-rac])):disabled{
   cursor: not-allowed;
@@ -4665,6 +4765,10 @@ input[type="number"].no-arrows{
   border-color: rgba(210,210,214,1);
   border-color: var(--aquarium-border-color-default);
 }
+.disabled\:bg-action-primary-button-disabled:where(:not([data-rac])):disabled{
+  background-color: rgba(185,197,239,1);
+  background-color: var(--aquarium-background-color-action-primary-button-disabled);
+}
 .disabled\:bg-body:where(:not([data-rac])):disabled{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
@@ -4677,10 +4781,6 @@ input[type="number"].no-arrows{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.disabled\:bg-primary-muted:where(:not([data-rac])):disabled{
-  background-color: rgba(185,197,239,1);
-  background-color: var(--aquarium-background-color-primary-muted);
-}
 .disabled\:text-inactive:where(:not([data-rac])):disabled{
   color: rgba(150,150,160,1);
   color: var(--aquarium-text-color-inactive);
@@ -4693,10 +4793,10 @@ input[type="number"].no-arrows{
   color: white;
   color: var(--aquarium-colors-white);
 }
-.before\:disabled\:border-primary-muted:where(:not([data-rac])):disabled::before{
+.before\:disabled\:border-action-secondary-button-disabled:where(:not([data-rac])):disabled::before{
   content: var(--tw-content);
   border-color: rgba(129,142,236,1);
-  border-color: var(--aquarium-border-color-primary-muted);
+  border-color: var(--aquarium-border-color-action-secondary-button-disabled);
 }
 .peer:where([data-rac])[data-disabled] ~ .peer-disabled\:cursor-not-allowed{
   cursor: not-allowed;