@aivenio/aquarium 6.1.1 → 6.3.0

package/dist/styles.css

@@ -507,6 +507,7 @@ video {
   --aquarium-chart-colors-sequential-300: rgba(0, 150, 147, 1);
   --aquarium-chart-colors-sequential-400: rgba(0, 98, 96, 1);
   --aquarium-chart-colors-sequential-500: rgba(0, 74, 72, 1);
+  --aquarium-code-variable: rgba(123,45,139,1); /** Code block variable and identifiers */
   --aquarium-code-keyword: rgba(202, 33, 101, 1); /** Syntax: keyword */
   --aquarium-code-string: rgba(0, 127, 115, 1); /** Syntax: string */
   --aquarium-code-function: rgba(9, 128, 193, 1); /** Syntax: function */
@@ -621,7 +622,7 @@ video {
   --aquarium-background-color-muted: var(--aquarium-colors-grey-5);
   --aquarium-background-color-medium: var(--aquarium-colors-grey-10);
   --aquarium-background-color-intense: var(--aquarium-colors-grey-30);
-  --aquarium-background-color-primary-default: var(--aquarium-colors-primary-0);
+  --aquarium-background-color-primary-default: var(--aquarium-colors-primary-5);
   --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-30);
   --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-60);
   --aquarium-background-color-primary-active: var(--aquarium-colors-primary-0);
@@ -1088,8 +1089,8 @@ video {
 .top-\[3px\]{
   top: 3px;
 }
-.top-\[47px\]{
-  top: 47px;
+.top-\[43px\]{
+  top: 43px;
 }
 .-z-10{
   z-index: -10;
@@ -1175,6 +1176,9 @@ video {
   margin-top: 12px;
   margin-bottom: 12px;
 }
+.-mt-1px{
+  margin-top: -1px;
+}
 .mb-1{
   margin-bottom: 2px;
 }
@@ -2650,7 +2654,7 @@ video {
   background-color: var(--aquarium-background-color-primary-active);
 }
 .bg-primary-default{
-  background-color: rgba(240,254,254,1);
+  background-color: rgba(217,249,248,1);
   background-color: var(--aquarium-background-color-primary-default);
 }
 .bg-primary-graphic{
@@ -2670,11 +2674,11 @@ video {
   background-color: var(--aquarium-background-color-primary-inverse);
 }
 .bg-primary-muted{
-  background-color: rgba(240,254,254,1);
+  background-color: rgba(217,249,248,1);
   background-color: var(--aquarium-background-color-primary-muted);
 }
 .bg-status-announcement{
-  background-color: rgba(240,254,254,1);
+  background-color: rgba(217,249,248,1);
   background-color: var(--aquarium-background-color-status-announcement);
 }
 .bg-status-danger{
@@ -3723,7 +3727,16 @@ code{
   /*  the collapsible <Section> uses a different background color for the header element when expanded. To enhance the contrast between the header's background color and the secondary button's background color, we need to specifically change the secondary button's background to bg-body instead of bg-transparent. */
   background-color: rgba(255,255,255,1);
   background-color: var(--aquarium-background-color-body);
- }
+}
+/* 
+  Nested corners: matching parent/child radius can make child bg bleed past the
+  container curve. Use inner radius = outer radius - border width via design tokens.
+*/
+.Aquarium-SegmentedControl {
+  --aquarium-segmented-control-inner-radius: calc(
+    var(--aquarium-border-radius-default) - var(--aquarium-border-width-default)
+  );
+}
 .aquarium-theme-dark {
   --aquarium-border-color-muted: var(--aquarium-colors-grey-70);
   --aquarium-border-color-default: var(--aquarium-colors-grey-60);
@@ -3830,10 +3843,11 @@ code{
   --aquarium-text-color-danger-default: var(--aquarium-colors-error-20);
   --aquarium-text-color-danger-intense: var(--aquarium-text-color-danger-default);
 
-    /* Code block (syntax highlighting) */
+  /* Code block (syntax highlighting) */
   --aquarium-code-background: var(--aquarium-background-color-body);
   --aquarium-code-text: var(--aquarium-text-color-default);
   --aquarium-code-keyword: rgba(223, 86, 242, 1);
+  --aquarium-code-variable: rgba(192,132,252, 1);
   --aquarium-code-string: rgba(95, 250, 116, 1);
   --aquarium-code-function: rgba(89, 210, 244, 1);
   --aquarium-code-number: rgba(255, 229, 94, 1);
@@ -3912,7 +3926,7 @@ code{
     .aquarium-theme-dark .Aquarium-DropdownMenu\.Item.bg-muted,
     .aquarium-theme-dark .Aquarium-DropdownMenu\.Item.hover\:bg-muted:hover,
     .aquarium-theme-dark .Aquarium-Select\.Item.bg-muted,
-    .aquarium-theme-dark .Aquarium-Select\.Item.hover\:bg-muted:hover{
+    .aquarium-theme-dark .Aquarium-Select\.Item.hover\:bg-muted:hover {
       background-color: rgba(235,235,235,1);
       background-color: var(--aquarium-background-color-medium);
     }
@@ -3929,7 +3943,7 @@ code{
 .aquarium-theme-dark .Aquarium-StatusChip {
     --aquarium-text-color-info-intense: var(--aquarium-text-color-info-default);
   }
-.aquarium-theme-dark .Aquarium-Navigation li[role="presentation"] a[role="menuitem"] {
+.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-overlay) and banner background(bg-muted) colors are set to grey-90. To avoid them blending together, we need to use a different color. */
@@ -3949,7 +3963,14 @@ code{
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip {
       --aquarium-background-color-muted: var(--aquarium-background-color-medium);
     }
-.aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:focus {
+.aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role='button']:hover,
+      .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role='button']:focus,
+      .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role='button']:hover,
+      .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role='button']:focus,
+      .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role='button']:hover,
+      .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role='button']:focus,
+      .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role='button']:hover,
+      .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role='button']:focus {
         --aquarium-background-color-intense: var(--aquarium-background-color-inactive);
       }
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-Table .sticky, .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataList .sticky, .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataTable .sticky, .aquarium-theme-dark .Aquarium-Modal .Aquarium-ItemList .sticky, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-Table .sticky, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-DataList .sticky, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-DataTable .sticky, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-ItemList .sticky, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-Table .sticky, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-DataList .sticky, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-DataTable .sticky, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-ItemList .sticky, .aquarium-theme-dark .Aquarium-Popover .Aquarium-Table .sticky, .aquarium-theme-dark .Aquarium-Popover .Aquarium-DataList .sticky, .aquarium-theme-dark .Aquarium-Popover .Aquarium-DataTable .sticky, .aquarium-theme-dark .Aquarium-Popover .Aquarium-ItemList .sticky {
@@ -3960,24 +3981,24 @@ code{
     border: 1px solid rgba(225,225,225,1);
     border: 1px solid var(--aquarium-border-color-muted);
   }
-.aquarium-theme-dark .Aquarium-Table div[role="columnheader"],
+.aquarium-theme-dark .Aquarium-Table div[role='columnheader'],
     .aquarium-theme-dark .Aquarium-Table thead th.border-intense,
-    .aquarium-theme-dark .Aquarium-DataList div[role="columnheader"],
+    .aquarium-theme-dark .Aquarium-DataList div[role='columnheader'],
     .aquarium-theme-dark .Aquarium-DataList thead th.border-intense,
-    .aquarium-theme-dark .Aquarium-DataTable div[role="columnheader"],
+    .aquarium-theme-dark .Aquarium-DataTable div[role='columnheader'],
     .aquarium-theme-dark .Aquarium-DataTable thead th.border-intense,
-    .aquarium-theme-dark .Aquarium-ItemList div[role="columnheader"],
+    .aquarium-theme-dark .Aquarium-ItemList div[role='columnheader'],
     .aquarium-theme-dark .Aquarium-ItemList thead th.border-intense {
       border-color: rgba(181,181,183,1);
       border-color: var(--aquarium-border-color-default);
     }
-.aquarium-theme-dark .Aquarium-Table div[role="cell"],
+.aquarium-theme-dark .Aquarium-Table div[role='cell'],
     .aquarium-theme-dark .Aquarium-Table tbody td,
-    .aquarium-theme-dark .Aquarium-DataList div[role="cell"],
+    .aquarium-theme-dark .Aquarium-DataList div[role='cell'],
     .aquarium-theme-dark .Aquarium-DataList tbody td,
-    .aquarium-theme-dark .Aquarium-DataTable div[role="cell"],
+    .aquarium-theme-dark .Aquarium-DataTable div[role='cell'],
     .aquarium-theme-dark .Aquarium-DataTable tbody td,
-    .aquarium-theme-dark .Aquarium-ItemList div[role="cell"],
+    .aquarium-theme-dark .Aquarium-ItemList div[role='cell'],
     .aquarium-theme-dark .Aquarium-ItemList tbody td {
       border-color: rgba(225,225,225,1);
       border-color: var(--aquarium-border-color-muted);
@@ -4043,6 +4064,10 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
+.before\:-mb-5::before{
+  content: var(--tw-content);
+  margin-bottom: -16px;
+}
 .before\:h-5::before{
   content: var(--tw-content);
   height: 16px;
@@ -4096,9 +4121,9 @@ code{
   content: var(--tw-content);
   position: sticky;
 }
-.after\:bottom-3::after{
+.after\:bottom-0::after{
   content: var(--tw-content);
-  bottom: 8px;
+  bottom: 0px;
 }
 .after\:left-0::after{
   content: var(--tw-content);
@@ -4108,9 +4133,13 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
-.after\:h-5::after{
+.after\:-mt-\[60px\]::after{
   content: var(--tw-content);
-  height: 16px;
+  margin-top: -60px;
+}
+.after\:h-\[60px\]::after{
+  content: var(--tw-content);
+  height: 60px;
 }
 .after\:flex-shrink-0::after{
   content: var(--tw-content);
@@ -4137,21 +4166,17 @@ code{
 .first\:mt-0:first-child{
   margin-top: 0px;
 }
-.first\:rounded-l:first-child{
-  border-top-left-radius: 4px;
-  border-top-left-radius: var(--aquarium-border-radius-default);
-  border-bottom-left-radius: 4px;
-  border-bottom-left-radius: var(--aquarium-border-radius-default);
+.first\:rounded-l-\[var\(--aquarium-segmented-control-inner-radius\)\]:first-child{
+  border-top-left-radius: var(--aquarium-segmented-control-inner-radius);
+  border-bottom-left-radius: var(--aquarium-segmented-control-inner-radius);
 }
 .first\:border-l-0:first-child{
   border-left-width: 0px;
   border-left-width: var(--aquarium-border-width-0);
 }
-.last\:rounded-r:last-child{
-  border-top-right-radius: 4px;
-  border-top-right-radius: var(--aquarium-border-radius-default);
-  border-bottom-right-radius: 4px;
-  border-bottom-right-radius: var(--aquarium-border-radius-default);
+.last\:rounded-r-\[var\(--aquarium-segmented-control-inner-radius\)\]:last-child{
+  border-top-right-radius: var(--aquarium-segmented-control-inner-radius);
+  border-bottom-right-radius: var(--aquarium-segmented-control-inner-radius);
 }
 .last\:border-r-0:last-child{
   border-right-width: 0px;
@@ -4182,7 +4207,7 @@ code{
   background-color: var(--aquarium-background-color-primary-inverse);
 }
 .checked\:bg-primary-muted:checked{
-  background-color: rgba(240,254,254,1);
+  background-color: rgba(217,249,248,1);
   background-color: var(--aquarium-background-color-primary-muted);
 }
 .checked\:opacity-50:checked{