@aivenio/aquarium 5.0.1 → 5.1.0

package/dist/_variables.scss

@@ -211,7 +211,10 @@ $font-size-8xl: 6rem;
 $font-size-9xl-line-height: 1;
 $font-size-9xl: 8rem;
 $background-color-body: $colors-white;
+$background-color-layer: $colors-white;
 $background-color-body-intense: $colors-grey-80;
+$background-color-inverse: $colors-grey-80;
+$background-color-overlay: $colors-white;
 $background-color-popover-content: $colors-white;
 $background-color-muted: $colors-grey-0;
 $background-color-default: $colors-grey-5;
@@ -221,18 +224,26 @@ $background-color-primary-default: $colors-primary-80;
 $background-color-primary-intense: $colors-primary-90;
 $background-color-primary-active: $colors-primary-5;
 $background-color-primary-hover: $colors-primary-5;
+$background-color-action-primary-button-default: $colors-primary-80;
+$background-color-action-primary-button-active: $colors-primary-5;
+$background-color-action-primary-button-hover: $colors-primary-90;
+$background-color-action-primary-button-disabled: $colors-primary-40;
 $background-color-info-muted: $colors-info-10;
 $background-color-info-default: $colors-info-70;
 $background-color-info-intense: $colors-info-90;
+$background-color-info-inverse: $colors-info-70;
 $background-color-success-muted: $colors-success-5;
 $background-color-success-default: $colors-success-70;
 $background-color-success-intense: $colors-success-90;
+$background-color-success-inverse: $colors-success-70;
 $background-color-warning-muted: $colors-warning-5;
 $background-color-warning-default: $colors-warning-70;
 $background-color-warning-intense: $colors-warning-90;
+$background-color-warning-inverse: $colors-warning-70;
 $background-color-danger-muted: $colors-error-10;
 $background-color-danger-default: $colors-error-20;
 $background-color-danger-intense: $colors-error-50;
+$background-color-danger-inverse: $colors-error-70;
 $background-color-status-announcement: $colors-primary-5;
 $background-color-status-info: $colors-info-10;
 $background-color-status-warning: $colors-warning-5;
@@ -244,6 +255,11 @@ $border-color-intense: $colors-grey-50;
 $border-color-primary-muted: $colors-primary-60;
 $border-color-primary-default: $colors-primary-80;
 $border-color-primary-intense: $colors-primary-100;
+$border-color-action-focus: $colors-primary-80;
+$border-color-action-secondary-button-default: $colors-primary-80;
+$border-color-action-secondary-button-active: $colors-primary-5;
+$border-color-action-secondary-button-hover: $colors-primary-5;
+$border-color-action-secondary-button-disabled: $colors-primary-60;
 $border-color-info-muted: $colors-info-50;
 $border-color-info-default: $colors-info-70;
 $border-color-info-intense: $colors-info-90;

package/dist/atoms.cjs

@@ -4579,7 +4579,7 @@ var TooltipWrapper = import_react2.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,
@@ -4619,7 +4619,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "absolute w-3 h-3 bg-body-intense rotate-45", ...props });
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "absolute w-3 h-3 bg-inverse rotate-45", ...props });
 };
 
 // src/atoms/Button/Button.tsx
@@ -4923,14 +4923,14 @@ var buttonStateClasses = (0, import_tailwind_variants2.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(),
@@ -4949,8 +4949,8 @@ var buttonClasses = (0, import_tailwind_variants2.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"
@@ -5121,7 +5121,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)",
@@ -5133,25 +5136,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)",
@@ -5173,6 +5188,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)",
@@ -6013,7 +6037,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)",
@@ -6030,7 +6055,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)",
@@ -6047,7 +6073,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)",
@@ -6097,15 +6124,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)",
@@ -6369,6 +6408,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)",
@@ -6792,7 +6840,7 @@ var toastStyles = (0, import_tailwind_variants3.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"
       },
@@ -6881,7 +6929,7 @@ var inputClasses = (0, import_tailwind_variants4.tv)({
   }
 });
 var menuClasses = (0, import_tailwind_variants4.tv)({
-  base: "text-default bg-popover-content overflow-y-auto"
+  base: "text-default bg-overlay overflow-y-auto"
 });
 var noResultsClasses = (0, import_tailwind_variants4.tv)({
   base: "p-3 text-inactive typography-small"
@@ -8977,7 +9025,7 @@ var import_react_aria_components = require("react-aria-components");
 var import_tailwind_variants13 = require("tailwind-variants");
 var popoverStyles = (0, import_tailwind_variants13.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_react55.default.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
@@ -10467,7 +10515,7 @@ var import_clsx26 = require("clsx");
 var import_tailwind_variants16 = require("tailwind-variants");
 var import_tick5 = __toESM(require_tick());
 var dropdownMenuStyles = (0, import_tailwind_variants16.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_react69.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -14548,8 +14596,8 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
 var modalStyles = (0, import_tailwind_variants23.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",
@@ -15057,7 +15105,7 @@ var DropdownMenu3 = ({
     const id = setTimeout(() => (menuRef.current?.children[0]).focus());
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ import_react98.default.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-popover-content" }, !!title && /* @__PURE__ */ import_react98.default.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ import_react98.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react98.default.Children.map(children, (child) => {
+  return /* @__PURE__ */ import_react98.default.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-overlay" }, !!title && /* @__PURE__ */ import_react98.default.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ import_react98.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react98.default.Children.map(children, (child) => {
     return import_react98.default.cloneElement(child, { setClose });
   })));
 };
@@ -16497,7 +16545,7 @@ var stepStyles = (0, import_tailwind_variants30.tv)({
       slots: ["indicator"],
       dense: true,
       state: "active",
-      class: "bg-body-intense"
+      class: "bg-inverse"
     },
     {
       slots: ["indicator"],

package/dist/atoms.mjs

@@ -4512,7 +4512,7 @@ var TooltipWrapper = React.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",
         ...mergeProps(props, tooltipProps)
       },
       props.children,
@@ -4552,7 +4552,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "absolute w-3 h-3 bg-body-intense rotate-45", ...props });
+  return /* @__PURE__ */ React.createElement("div", { className: "absolute w-3 h-3 bg-inverse rotate-45", ...props });
 };
 
 // src/atoms/Button/Button.tsx
@@ -4856,14 +4856,14 @@ var buttonStateClasses = tv2({
   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(),
@@ -4882,8 +4882,8 @@ var buttonClasses = tv2({
   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"
@@ -5057,7 +5057,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)",
@@ -5069,25 +5072,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)",
@@ -5109,6 +5124,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)",
@@ -5949,7 +5973,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)",
@@ -5966,7 +5991,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)",
@@ -5983,7 +6009,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)",
@@ -6033,15 +6060,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)",
@@ -6305,6 +6344,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)",
@@ -6728,7 +6776,7 @@ var toastStyles = tv3({
   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"
       },
@@ -6817,7 +6865,7 @@ var inputClasses = tv4({
   }
 });
 var menuClasses = tv4({
-  base: "text-default bg-popover-content overflow-y-auto"
+  base: "text-default bg-overlay overflow-y-auto"
 });
 var noResultsClasses = tv4({
   base: "p-3 text-inactive typography-small"
@@ -8917,7 +8965,7 @@ import {
 import { tv as tv13 } from "tailwind-variants";
 var popoverStyles = tv13({
   // 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 = React49.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
@@ -10418,7 +10466,7 @@ import { clsx as clsx26 } from "clsx";
 import { tv as tv16 } from "tailwind-variants";
 var import_tick5 = __toESM(require_tick());
 var dropdownMenuStyles = tv16({
-  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__ */ React62.createElement(AriaMenu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -14533,8 +14581,8 @@ var bodyMaskClasses = tv23({
 var modalStyles = tv23({
   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",
@@ -15042,7 +15090,7 @@ var DropdownMenu3 = ({
     const id = setTimeout(() => (menuRef.current?.children[0]).focus());
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ React90.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-popover-content" }, !!title && /* @__PURE__ */ React90.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ React90.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, React90.Children.map(children, (child) => {
+  return /* @__PURE__ */ React90.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-overlay" }, !!title && /* @__PURE__ */ React90.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ React90.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, React90.Children.map(children, (child) => {
     return React90.cloneElement(child, { setClose });
   })));
 };
@@ -16487,7 +16535,7 @@ var stepStyles = tv30({
       slots: ["indicator"],
       dense: true,
       state: "active",
-      class: "bg-body-intense"
+      class: "bg-inverse"
     },
     {
       slots: ["indicator"],

package/dist/charts.cjs

@@ -214,7 +214,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)",
@@ -226,25 +229,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)",
@@ -266,6 +281,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)",