@aivenio/aquarium 5.0.1 → 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);
@@ -1825,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);
@@ -2249,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);
@@ -2273,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);
@@ -2437,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);
@@ -2445,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);
@@ -2645,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);
@@ -2709,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);
@@ -3497,6 +3577,9 @@ video {
 .opacity-100{
   opacity: 1;
 }
+.opacity-30{
+  opacity: 0.3;
+}
 .opacity-40{
   opacity: 0.4;
 }
@@ -3645,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);
@@ -3659,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);
@@ -3669,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);
@@ -3718,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,
@@ -3729,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);
@@ -3802,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);
@@ -3810,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);
@@ -3818,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,
@@ -3947,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);
@@ -4056,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);
@@ -4163,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);
@@ -4187,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);
@@ -4214,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);
@@ -4238,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);
@@ -4628,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);
@@ -4640,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);
@@ -4656,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;
@@ -4668,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);
@@ -4680,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);
@@ -4696,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;

package/dist/system.cjs

@@ -4638,7 +4638,7 @@ var inputClasses = (0, import_tailwind_variants.tv)({
   }
 });
 var menuClasses = (0, import_tailwind_variants.tv)({
-  base: "text-default bg-popover-content overflow-y-auto"
+  base: "text-default bg-overlay overflow-y-auto"
 });
 var noResultsClasses = (0, import_tailwind_variants.tv)({
   base: "p-3 text-inactive typography-small"
@@ -5479,7 +5479,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-warning-100)",
       muted: "var(--aquarium-background-color-warning-muted)",
       default: "var(--aquarium-background-color-warning-default)",
-      intense: "var(--aquarium-background-color-warning-intense)"
+      intense: "var(--aquarium-background-color-warning-intense)",
+      inverse: "var(--aquarium-background-color-warning-inverse)"
     },
     success: {
       "0": "var(--aquarium-colors-success-0)",
@@ -5496,7 +5497,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-background-color-success-muted)",
       default: "var(--aquarium-background-color-success-default)",
-      intense: "var(--aquarium-background-color-success-intense)"
+      intense: "var(--aquarium-background-color-success-intense)",
+      inverse: "var(--aquarium-background-color-success-inverse)"
     },
     info: {
       "0": "var(--aquarium-colors-info-0)",
@@ -5513,7 +5515,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-info-100)",
       muted: "var(--aquarium-background-color-info-muted)",
       default: "var(--aquarium-background-color-info-default)",
-      intense: "var(--aquarium-background-color-info-intense)"
+      intense: "var(--aquarium-background-color-info-intense)",
+      inverse: "var(--aquarium-background-color-info-inverse)"
     },
     grey: {
       "0": "var(--aquarium-colors-grey-0)",
@@ -5563,15 +5566,27 @@ var tailwind_theme_default = {
       hover: "var(--aquarium-background-color-primary-hover)"
     },
     body: "var(--aquarium-background-color-body)",
+    layer: "var(--aquarium-background-color-layer)",
     "body-intense": "var(--aquarium-background-color-body-intense)",
+    inverse: "var(--aquarium-background-color-inverse)",
+    overlay: "var(--aquarium-background-color-overlay)",
     "popover-content": "var(--aquarium-background-color-popover-content)",
     muted: "var(--aquarium-background-color-muted)",
     default: "var(--aquarium-background-color-default)",
     intense: "var(--aquarium-background-color-intense)",
+    action: {
+      "primary-button": {
+        default: "var(--aquarium-background-color-action-primary-button-default)",
+        active: "var(--aquarium-background-color-action-primary-button-active)",
+        hover: "var(--aquarium-background-color-action-primary-button-hover)",
+        disabled: "var(--aquarium-background-color-action-primary-button-disabled)"
+      }
+    },
     danger: {
       muted: "var(--aquarium-background-color-danger-muted)",
       default: "var(--aquarium-background-color-danger-default)",
-      intense: "var(--aquarium-background-color-danger-intense)"
+      intense: "var(--aquarium-background-color-danger-intense)",
+      inverse: "var(--aquarium-background-color-danger-inverse)"
     },
     status: {
       announcement: "var(--aquarium-background-color-status-announcement)",
@@ -5835,6 +5850,15 @@ var tailwind_theme_default = {
     muted: "var(--aquarium-border-color-muted)",
     default: "var(--aquarium-border-color-default)",
     intense: "var(--aquarium-border-color-intense)",
+    action: {
+      focus: "var(--aquarium-border-color-action-focus)",
+      "secondary-button": {
+        default: "var(--aquarium-border-color-action-secondary-button-default)",
+        active: "var(--aquarium-border-color-action-secondary-button-active)",
+        hover: "var(--aquarium-border-color-action-secondary-button-hover)",
+        disabled: "var(--aquarium-border-color-action-secondary-button-disabled)"
+      }
+    },
     danger: {
       muted: "var(--aquarium-border-color-danger-muted)",
       default: "var(--aquarium-border-color-danger-default)",
@@ -6063,7 +6087,10 @@ var tokens_default = {
   },
   backgroundColor: {
     body: "white",
+    layer: "white",
     "body-intense": "rgba(58,58,68,1)",
+    inverse: "rgba(58,58,68,1)",
+    overlay: "white",
     "popover-content": "white",
     muted: "rgba(247,247,250,1)",
     default: "rgba(237,237,240,1)",
@@ -6075,25 +6102,37 @@ var tokens_default = {
       active: "rgba(243,246,255,1)",
       hover: "rgba(243,246,255,1)"
     },
+    action: {
+      "primary-button": {
+        default: "rgba(53,69,190,1)",
+        active: "rgba(243,246,255,1)",
+        hover: "rgba(34,47,149,1)",
+        disabled: "rgba(185,197,239,1)"
+      }
+    },
     info: {
       muted: "rgba(224,245,254,1)",
       default: "rgba(3,153,227,1)",
-      intense: "rgba(1,116,186,1)"
+      intense: "rgba(1,116,186,1)",
+      inverse: "rgba(3,153,227,1)"
     },
     success: {
       muted: "rgba(236,247,237,1)",
       default: "rgba(0,179,0,1)",
-      intense: "rgba(0,142,0,1)"
+      intense: "rgba(0,142,0,1)",
+      inverse: "rgba(0,179,0,1)"
     },
     warning: {
       muted: "rgba(255,248,234,1)",
       default: "rgba(255,179,0,1)",
-      intense: "rgba(255,144,3,1)"
+      intense: "rgba(255,144,3,1)",
+      inverse: "rgba(255,179,0,1)"
     },
     danger: {
       muted: "rgba(255,203,210,1)",
       default: "rgba(255,173,179,1)",
-      intense: "rgba(230,39,40,1)"
+      intense: "rgba(230,39,40,1)",
+      inverse: "rgba(216,0,5,1)"
     },
     status: {
       announcement: "rgba(243,246,255,1)",
@@ -6115,6 +6154,15 @@ var tokens_default = {
       default: "rgba(53,69,190,1)",
       intense: "rgba(14,22,82,1)"
     },
+    action: {
+      focus: "rgba(53,69,190,1)",
+      "secondary-button": {
+        default: "rgba(53,69,190,1)",
+        active: "rgba(243,246,255,1)",
+        hover: "rgba(243,246,255,1)",
+        disabled: "rgba(129,142,236,1)"
+      }
+    },
     info: {
       muted: "rgba(40,180,244,1)",
       default: "rgba(3,153,227,1)",
@@ -6881,7 +6929,7 @@ var TooltipWrapper = import_react9.default.forwardRef(
       "div",
       {
         ref,
-        className: "Aquarium-Tooltip p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-opposite-default",
+        className: "Aquarium-Tooltip p-3 rounded-sm typography-caption max-w-[320px] bg-inverse text-opposite-default",
         ...(0, import_utils.mergeProps)(props, tooltipProps)
       },
       props.children,
@@ -6921,7 +6969,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "absolute w-3 h-3 bg-body-intense rotate-45", ...props });
+  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "absolute w-3 h-3 bg-inverse rotate-45", ...props });
 };
 
 // src/atoms/Button/Button.tsx
@@ -6956,14 +7004,14 @@ var buttonStateClasses = (0, import_tailwind_variants3.tv)({
   variants: {
     kind: {
       primary: [
-        "active:text-white active:bg-primary-active",
-        "hover:bg-primary-intense",
-        "disabled:text-white disabled:bg-primary-muted"
+        "active:text-white active:bg-action-primary-button-active",
+        "hover:bg-action-primary-button-hover",
+        "disabled:text-white disabled:bg-action-primary-button-disabled"
       ],
       secondary: [
         "active:bg-primary-active active:text-primary-active",
         "hover:bg-primary-hover",
-        "before:disabled:border-primary-muted"
+        "before:disabled:border-action-secondary-button-disabled"
       ],
       ghost: ["hover:text-primary-active"],
       text: interactiveTextStyles(),
@@ -6982,8 +7030,8 @@ var buttonClasses = (0, import_tailwind_variants3.tv)({
   base: "Aquarium-Button whitespace-nowrap transition text-center text-primary-intense rounded-sm relative px-4 py-3 inline-flex gap-3 items-center justify-center",
   variants: {
     kind: {
-      primary: "Aquarium-Button.Primary text-white bg-primary-default icon-stroke-2",
-      secondary: "Aquarium-Button.Secondary bg-transparent before:absolute before:inset-0 before:border before:border-primary-default before:rounded-sm icon-stroke-2",
+      primary: "Aquarium-Button.Primary text-white bg-action-primary-button-default icon-stroke-2",
+      secondary: "Aquarium-Button.Secondary bg-transparent before:absolute before:inset-0 before:border before:border-action-secondary-button-default before:rounded-sm icon-stroke-2",
       ghost: "Aquarium-Button.Ghost px-0 icon-stroke-2",
       text: "Aquarium-Button.Text px-0 py-0 icon-stroke-2",
       icon: "Aquarium-Button.Icon px-2 py-2 text-default"
@@ -7157,7 +7205,7 @@ var toastStyles = (0, import_tailwind_variants4.tv)({
   variants: {
     variant: {
       default: {
-        base: "bg-body-intense text-opposite-default",
+        base: "bg-inverse text-opposite-default",
         dismiss: "[&>button]:text-muted",
         action: "[&>*]:text-primary-inactive hover:[&>*]:text-primary-muted"
       },
@@ -9794,7 +9842,7 @@ var import_react_aria_components = require("react-aria-components");
 var import_tailwind_variants14 = require("tailwind-variants");
 var popoverStyles = (0, import_tailwind_variants14.tv)({
   // z-[101] ensures popover appears above modal (z-modal: 100)
-  base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
+  base: "rounded-sm shadow-16dp bg-overlay mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
 });
 var Popover = import_react62.default.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
@@ -11301,7 +11349,7 @@ var import_clsx27 = require("clsx");
 var import_tailwind_variants17 = require("tailwind-variants");
 var import_tick5 = __toESM(require_tick());
 var dropdownMenuStyles = (0, import_tailwind_variants17.tv)({
-  base: "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-small text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
   return /* @__PURE__ */ import_react76.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -15382,8 +15430,8 @@ var bodyMaskClasses = (0, import_tailwind_variants24.tv)({
 var modalStyles = (0, import_tailwind_variants24.tv)({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
-    backdrop: "-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70",
-    dialog: "bg-popover-content max-h-full flex flex-col",
+    backdrop: "-z-10 fixed min-w-full min-h-full bg-inverse opacity-30",
+    dialog: "bg-overlay max-h-full flex flex-col",
     header: "pl-7 pr-[64px] pt-6 pb-4 gap-3 flex items-center",
     headerImage: "h-[120px] min-h-[120px] w-full",
     titleContainer: "flex flex-col grow",
@@ -15898,7 +15946,7 @@ var Drawer = ({
   }
   const { opacity, right } = (0, import_web5.useSpring)({
     right: open ? "0px" : `-${WIDTHS[size]}px`,
-    opacity: open ? 0.6 : 0,
+    opacity: open ? 0.3 : 0,
     config: {
       mass: 0.5,
       tension: 150,
@@ -15995,7 +16043,7 @@ var DropdownMenu3 = ({
     const id = setTimeout(() => (menuRef.current?.children[0]).focus());
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ import_react105.default.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-popover-content" }, !!title && /* @__PURE__ */ import_react105.default.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ import_react105.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react105.default.Children.map(children, (child) => {
+  return /* @__PURE__ */ import_react105.default.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-overlay" }, !!title && /* @__PURE__ */ import_react105.default.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ import_react105.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react105.default.Children.map(children, (child) => {
     return import_react105.default.cloneElement(child, { setClose });
   })));
 };
@@ -17793,7 +17841,7 @@ var stepStyles = (0, import_tailwind_variants31.tv)({
       slots: ["indicator"],
       dense: true,
       state: "active",
-      class: "bg-body-intense"
+      class: "bg-inverse"
     },
     {
       slots: ["indicator"],