@aivenio/aquarium 5.0.1 → 5.2.0

package/dist/styles.css

@@ -652,28 +652,42 @@ 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);
+  --aquarium-background-color-medium: 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-graphic: var(--aquarium-colors-primary-80);
   --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-primary-inverse: 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 +699,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);
@@ -1825,6 +1844,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);
@@ -2249,6 +2288,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);
@@ -2273,6 +2328,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);
@@ -2437,6 +2496,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);
@@ -2445,10 +2508,26 @@ 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-medium{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .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);
@@ -2509,6 +2588,10 @@ video {
   background-color: rgba(53,69,190,1);
   background-color: var(--aquarium-background-color-primary-default);
 }
+.bg-primary-graphic{
+  background-color: rgba(53,69,190,1);
+  background-color: var(--aquarium-background-color-primary-graphic);
+}
 .bg-primary-hover{
   background-color: rgba(243,246,255,1);
   background-color: var(--aquarium-background-color-primary-hover);
@@ -2517,6 +2600,10 @@ video {
   background-color: rgba(34,47,149,1);
   background-color: var(--aquarium-background-color-primary-intense);
 }
+.bg-primary-inverse{
+  background-color: rgba(34,47,149,1);
+  background-color: var(--aquarium-background-color-primary-inverse);
+}
 .bg-primary-muted{
   background-color: rgba(185,197,239,1);
   background-color: var(--aquarium-background-color-primary-muted);
@@ -2645,6 +2732,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);
@@ -2709,6 +2800,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);
@@ -3497,6 +3592,9 @@ video {
 .opacity-100{
   opacity: 1;
 }
+.opacity-30{
+  opacity: 0.3;
+}
 .opacity-40{
   opacity: 0.4;
 }
@@ -3645,6 +3743,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);
@@ -3659,28 +3761,42 @@ 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-medium: var(--aquarium-colors-grey-80);
   --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
   --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-90);
   --aquarium-background-color-primary-default: var(--aquarium-colors-primary-60);
+  --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-60);
   --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-10);
+  --aquarium-background-color-primary-inverse: 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);
@@ -3718,7 +3834,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,
@@ -3727,24 +3843,18 @@ input[type="number"].no-arrows{
     }
 .aquarium-theme-dark .Aquarium-Switch {
     --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-background-color-primary-inverse: var(--aquarium-colors-primary-60);
   }
 .aquarium-theme-dark .Aquarium-Button\.Primary:disabled {
-      color: rgba(53,69,190,1);
-      color: var(--aquarium-text-color-primary-intense);
+      color: var(--aquarium-text-color-primary-inverse);
     }
 .aquarium-theme-dark .Aquarium-Checkbox input:disabled {
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Checkbox input:disabled + svg {
         background-color: rgba(237,237,240,1);
-        background-color: var(--aquarium-background-color-default);
+        background-color: var(--aquarium-background-color-medium);
         border-color: rgba(247,247,250,1);
         border-color: var(--aquarium-background-color-muted);
       }
@@ -3757,14 +3867,14 @@ input[type="number"].no-arrows{
       stroke: var(--aquarium-border-color-default);
     }
 .aquarium-theme-dark .Aquarium-Button\.Secondary {
-    --tw-ring-color: var(--aquarium-text-color-primary-intense);
+    --tw-ring-color: var(--aquarium-text-color-primary-inverse);
   }
 .aquarium-theme-dark .Aquarium-Button\.Secondary:active,
     .aquarium-theme-dark .Aquarium-Button\.Secondary:hover {
       background-color: transparent;
       color: rgba(34,47,149,1);
-      color: var(--aquarium-background-color-primary-intense);
-      --tw-ring-color: var(--aquarium-background-color-primary-intense);
+      color: var(--aquarium-background-color-primary-inverse);
+      --tw-ring-color: var(--aquarium-background-color-primary-inverse);
     }
 .aquarium-theme-dark .Aquarium-Button\.Secondary:focus {
       --tw-ring-color: var(--aquarium-border-color-primary-default);
@@ -3796,13 +3906,13 @@ input[type="number"].no-arrows{
     .aquarium-theme-dark .Aquarium-Select\.Item.bg-muted,
     .aquarium-theme-dark .Aquarium-Select\.Item.hover\:bg-muted:hover{
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Card {
     --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);
@@ -3810,7 +3920,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);
@@ -3818,7 +3928,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,
@@ -3830,10 +3940,10 @@ input[type="number"].no-arrows{
       --aquarium-colors-white: var(--aquarium-background-color-muted);
     }
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Popover .Aquarium-Banner {
-      --aquarium-background-color-muted: var(--aquarium-background-color-default);
+      --aquarium-background-color-muted: var(--aquarium-background-color-medium);
     }
 .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-default);
+      --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-background-color-intense: var(--aquarium-background-color-inactive);
@@ -3867,7 +3977,7 @@ input[type="number"].no-arrows{
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataList [role="row"]:hover > *:not([role="columnheader"]), 
     .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataTable tbody tr:hover > *:not([role="columnheader"]) {
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .file\:typography-small-strong::file-selector-button{
   font: normal 500 14px/1.42 Inter;
@@ -3947,10 +4057,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);
@@ -4039,9 +4149,9 @@ input[type="number"].no-arrows{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent);
 }
-.checked\:bg-primary-default:checked{
+.checked\:bg-primary-graphic:checked{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .checked\:bg-primary-muted:checked{
   background-color: rgba(185,197,239,1);
@@ -4056,6 +4166,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);
@@ -4163,14 +4277,14 @@ 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);
 }
-.hover\:bg-default:where([data-rac])[data-hovered]{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .hover\:bg-icon-button-hover:where([data-rac])[data-hovered]{
   background-color: rgba(25,25,29,.05);
   background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4179,6 +4293,10 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.hover\:bg-medium:where([data-rac])[data-hovered]{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .hover\:bg-muted:where([data-rac])[data-hovered]{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
@@ -4187,10 +4305,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);
@@ -4203,9 +4317,9 @@ input[type="number"].no-arrows{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.hover\:checked\:bg-primary-intense:checked:where([data-rac])[data-hovered]{
+.hover\:checked\:bg-primary-inverse:checked:where([data-rac])[data-hovered]{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .hover\:cursor-pointer:where(:not([data-rac])):hover{
   cursor: pointer;
@@ -4214,14 +4328,14 @@ 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);
 }
-.hover\:bg-default:where(:not([data-rac])):hover{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .hover\:bg-icon-button-hover:where(:not([data-rac])):hover{
   background-color: rgba(25,25,29,.05);
   background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4230,6 +4344,10 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.hover\:bg-medium:where(:not([data-rac])):hover{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .hover\:bg-muted:where(:not([data-rac])):hover{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
@@ -4238,10 +4356,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);
@@ -4254,24 +4368,24 @@ input[type="number"].no-arrows{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.hover\:checked\:bg-primary-intense:checked:where(:not([data-rac])):hover{
+.hover\:checked\:bg-primary-inverse:checked:where(:not([data-rac])):hover{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:visible{
   visibility: visible;
 }
-.group:where([data-rac])[data-hovered] .group-hover\:bg-default{
+.group:where([data-rac])[data-hovered] .group-hover\:bg-medium{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.group:where([data-rac])[data-hovered] .group-hover\:bg-primary-default{
+.group:where([data-rac])[data-hovered] .group-hover\:bg-primary-graphic{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:opacity-100{
   opacity: 1;
@@ -4279,17 +4393,17 @@ input[type="number"].no-arrows{
 .group:where(:not([data-rac])):hover .group-hover\:visible{
   visibility: visible;
 }
-.group:where(:not([data-rac])):hover .group-hover\:bg-default{
+.group:where(:not([data-rac])):hover .group-hover\:bg-medium{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .group:where(:not([data-rac])):hover .group-hover\:bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.group:where(:not([data-rac])):hover .group-hover\:bg-primary-default{
+.group:where(:not([data-rac])):hover .group-hover\:bg-primary-graphic{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .group:where(:not([data-rac])):hover .group-hover\:opacity-100{
   opacity: 1;
@@ -4338,14 +4452,14 @@ input[type="number"].no-arrows{
   background-color: rgba(255,173,179,1);
   background-color: var(--aquarium-background-color-danger-default);
 }
-.focus\:bg-default:where([data-rac])[data-focused]{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .focus\:bg-intense:where([data-rac])[data-focused]{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.focus\:bg-medium:where([data-rac])[data-focused]{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .focus\:text-primary-intense:where([data-rac])[data-focused]{
   color: rgba(53,69,190,1);
   color: var(--aquarium-text-color-primary-intense);
@@ -4372,14 +4486,14 @@ input[type="number"].no-arrows{
   background-color: rgba(255,173,179,1);
   background-color: var(--aquarium-background-color-danger-default);
 }
-.focus\:bg-default:where(:not([data-rac])):focus{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .focus\:bg-intense:where(:not([data-rac])):focus{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.focus\:bg-medium:where(:not([data-rac])):focus{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .focus\:text-primary-intense:where(:not([data-rac])):focus{
   color: rgba(53,69,190,1);
   color: var(--aquarium-text-color-primary-intense);
@@ -4585,9 +4699,9 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
-.group[data-pressed] .group-pressed\:bg-primary-intense{
+.group[data-pressed] .group-pressed\:bg-primary-inverse{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .group:where([data-rac])[data-invalid][data-pressed] .group-invalid\:group-pressed\:bg-danger-intense{
   background-color: rgba(230,39,40,1);
@@ -4597,9 +4711,9 @@ input[type="number"].no-arrows{
   background-color: rgba(230,39,40,1);
   background-color: var(--aquarium-background-color-danger-intense);
 }
-.selected\:bg-primary-default[data-selected]{
+.selected\:bg-primary-graphic[data-selected]{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .invalid\:selected\:bg-danger-default[data-selected]:where([data-rac])[data-invalid]{
   background-color: rgba(255,173,179,1);
@@ -4628,22 +4742,22 @@ 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);
 }
-.disabled\:bg-default:where([data-rac])[data-disabled]{
+.disabled\:bg-medium:where([data-rac])[data-disabled]{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .disabled\:bg-muted:where([data-rac])[data-disabled]{
   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);
@@ -4656,10 +4770,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;
@@ -4668,22 +4782,22 @@ 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);
 }
-.disabled\:bg-default:where(:not([data-rac])):disabled{
+.disabled\:bg-medium:where(:not([data-rac])):disabled{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .disabled\:bg-muted:where(:not([data-rac])):disabled{
   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);
@@ -4696,10 +4810,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;
@@ -4763,10 +4877,10 @@ input[type="number"].no-arrows{
   content: var(--tw-content);
   height: 1px;
 }
-.\[\&\:not\(\:first-child\)\]\:before\:bg-default:not(:first-child)::before{
+.\[\&\:not\(\:first-child\)\]\:before\:bg-medium:not(:first-child)::before{
   content: var(--tw-content);
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .\[\&\:not\(\:first-child\)\]\:before\:content-\[\"\"\]:not(:first-child)::before{
   --tw-content: "";