@aivenio/aquarium 1.29.0 → 1.31.0

package/dist/system.cjs

@@ -166,8 +166,7 @@ var require_tokens = __commonJS({
             "primary-20": "#b4e5fb",
             "primary-10": "#e0f5fe",
             "primary-5": "#effaff",
-            "primary-0": "#f9fdff",
-            "navyBlue-100": "#30375e"
+            "primary-0": "#f9fdff"
           },
           typography: {
             sizes: [
@@ -700,6 +699,7 @@ var require_tokens = __commonJS({
             "grey-50": "#787885",
             "grey-40": "#9696a0",
             "grey-30": "#b4b4bb",
+            "grey-20": "#d2d2d6",
             "grey-10": "#e1e1e3",
             "grey-5": "#ededf0",
             "grey-0": "#f7f7fa",
@@ -715,20 +715,18 @@ var require_tokens = __commonJS({
             "secondary-10": "#fee8d0",
             "secondary-5": "#fff3e8",
             "secondary-0": "#fffbf8",
-            "primary-100": "#a70045",
-            "primary-90": "#c60443",
-            "primary-80": "#e41a4a",
-            "primary-70": "#ff3554",
-            "primary-60": "#ff5275",
-            "primary-50": "#ff6f94",
-            "primary-40": "#ff8db0",
-            "primary-30": "#ffa9c9",
-            "primary-20": "#ffc4de",
-            "primary-10": "#ffdeef",
-            "primary-5": "#ffe8f4",
-            "primary-0": "#fff9fc",
-            "grey-20": "#d2d2d6",
-            "navyBlue-100": "#30375e"
+            "primary-100": "#0e1652",
+            "primary-90": "#222f95",
+            "primary-80": "#3545be",
+            "primary-70": "#5865cd",
+            "primary-60": "#818eec",
+            "primary-50": "#9daaee",
+            "primary-40": "#b9c5ef",
+            "primary-30": "#c7d1f4",
+            "primary-20": "#d5ddfa",
+            "primary-10": "#e3e9ff",
+            "primary-5": "#f3f6ff",
+            "primary-0": "#ffffff"
           },
           typography: {
             sizes: [
@@ -736,40 +734,40 @@ var require_tokens = __commonJS({
                 name: "large-heading",
                 className: "typography-large-heading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "32px",
                   fontWeight: 700,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "heading",
                 className: "typography-heading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "24px",
                   fontWeight: 700,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "subheading",
                 className: "typography-subheading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "20px",
                   fontWeight: 600,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "large-strong",
@@ -5803,6 +5801,7 @@ var tailwind_theme_default = {
     "grey-50": "var(--aquarium-colors-grey-50, #787885)",
     "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
     "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
     "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
     "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
@@ -5818,20 +5817,18 @@ var tailwind_theme_default = {
     "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
     "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
     "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
-    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
-    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
-    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
-    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
-    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
-    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
-    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
-    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
-    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
-    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
-    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
-    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
-    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
-    "navyBlue-100": "var(--aquarium-colors-navyBlue-100, #30375e)",
+    "primary-100": "var(--aquarium-colors-primary-100, #0e1652)",
+    "primary-90": "var(--aquarium-colors-primary-90, #222f95)",
+    "primary-80": "var(--aquarium-colors-primary-80, #3545be)",
+    "primary-70": "var(--aquarium-colors-primary-70, #5865cd)",
+    "primary-60": "var(--aquarium-colors-primary-60, #818eec)",
+    "primary-50": "var(--aquarium-colors-primary-50, #9daaee)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #c7d1f4)",
+    "primary-20": "var(--aquarium-colors-primary-20, #d5ddfa)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
@@ -7152,9 +7149,12 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
+  "text-primary-80 active:text-primary-90 focus-visible:text-primary-90 hover:text-primary-90 disabled:text-primary-40"
+);
+var linkStyle = classNames(
+  ghostButtonStyle,
+  tw("visited:text-primary-80 no-underline hover:underline focusable")
 );
-var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
 // src/utils/string.ts
 var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
@@ -7164,28 +7164,27 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-5"
+    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-90 disabled:bg-primary-40"
   ),
   "secondary": tw(
-    "text-grey-60 bg-white ring-1 ring-grey-30 ring-inset active:bg-grey-5 active:ring-grey-50 active:text-grey-80",
-    "focus-visible:ring-2 focus-visible:ring-grey-50 focus-visible:text-grey-80",
-    "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
+    "text-primary-80 bg-white ring-1 ring-primary-80 ring-inset",
+    "active:bg-primary-5 active:ring-primary-90 active:text-primary-90",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
+    "hover:bg-primary-5 hover:ring-primary-90 hover:text-primary-90",
+    "disabled:bg-white disabled:text-primary-40 disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
-  "text": ghostButtonStyle,
+  "text": linkStyle,
   "secondary-ghost": tw(
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
 };
-var LoadingSpinner = ({
-  size = "20px",
-  kind = "primary"
-}) => {
+var LoadingSpinner = ({ size = "20px" }) => {
   return /* @__PURE__ */ import_react19.default.createElement(InlineIcon, {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: kind === "primary" ? "primary-60" : "grey-60",
+    color: "primary-80",
     "data-testid": "loading-button"
   });
 };
@@ -7299,8 +7298,7 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ import_react19.default.createElement(LoadingSpinner, {
-        size: iconSize,
-        kind: kind === "primary" ? "primary" : "secondary"
+        size: iconSize
       })), /* @__PURE__ */ import_react19.default.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -7432,19 +7430,19 @@ var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
   information: {
     icon: import_infoSign2.default,
-    color: "info-40"
+    color: "info-70"
   },
   warning: {
     icon: import_warningSign2.default,
-    color: "warning-40"
+    color: "warning-90"
   },
   error: {
     icon: import_error2.default,
-    color: "error-40"
+    color: "error-70"
   },
   success: {
     icon: import_tickCircle2.default,
-    color: "success-40"
+    color: "success-70"
   }
 };
 var Alert = (_a) => {
@@ -7464,7 +7462,7 @@ var Alert = (_a) => {
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
         "bg-error-5": type === "error",
-        "bg-info-5": type === "information",
+        "bg-info-10": type === "information",
         "bg-success-5": type === "success",
         "bg-warning-5": type === "warning",
         "p-4": Boolean(dense),
@@ -7693,10 +7691,10 @@ var Banner = (_a) => {
   }), children);
 };
 Banner.Title = (_a) => {
-  var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
+  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
   return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: titleVariant === "secondary" ? "primary-80" : "grey-100",
+    color: "grey-100",
     className: classNames(
       className,
       tw("whitespace-nowrap", {
@@ -7768,8 +7766,7 @@ var createBanner = (displayName, opts = {}) => {
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.ContentContainer, {
       layout
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.Title, {
-      layout,
-      titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
+      layout
     }, title), /* @__PURE__ */ import_react27.default.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
     }, children || description), action && /* @__PURE__ */ import_react27.default.createElement(Banner.Actions, {
@@ -7842,7 +7839,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ import_react28.default.createElement("span", {
       className: (0, import_classnames3.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
-          "text-primary-80 hover:text-primary-70": !options.isActive,
+          "text-primary-80 hover:text-primary-70 underline hover:no-underline": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
@@ -8546,7 +8543,7 @@ var Checkbox = import_react39.default.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ import_react39.default.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
+        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
         "border-grey-5": disabled
       })
     }, /* @__PURE__ */ import_react39.default.createElement("input", __spreadProps(__spreadValues({
@@ -8557,24 +8554,25 @@ var Checkbox = import_react39.default.forwardRef(
     }, props), {
       className: classNames(
         tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
-          "cursor-pointer checked:bg-navyBlue-100": !disabled,
-          "cursor-not-allowed bg-grey-0": disabled
+          "cursor-pointer checked:bg-primary-80": !disabled,
+          "cursor-not-allowed bg-grey-0 checked:bg-primary-40": disabled
         })
       ),
       readOnly,
       disabled
     })), /* @__PURE__ */ import_react39.default.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick3.default,
+      strokeWidth: "2px",
       className: classNames(
         tw(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
-          "text-transparent [&>path]:stroke-transparent",
+          "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
           "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
-          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
+          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
         }
       )
     }));
@@ -10202,10 +10200,10 @@ var RadioButton = import_react62.default.forwardRef(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
+            "hover:border-grey-50 checked:border-primary-80": !disabled,
+            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
           }
         )
       ),
@@ -10740,7 +10738,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react71.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-navyBlue-100 opacity-70"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-100 opacity-60"), className)
   }));
 };
 Modal.Dialog = import_react71.default.forwardRef(
@@ -11465,12 +11463,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "warning-80"
+          color: selected ? void 0 : "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "error-50"
+          color: selected ? void 0 : "error-50"
         });
       }
       const tab = /* @__PURE__ */ import_react85.default.createElement(Component, __spreadValues({
@@ -13188,8 +13186,8 @@ var Switch = import_react106.default.forwardRef(
           "outline-none focus:border border-info-70 bg-grey-20",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
-            "bg-grey-5 checked:opacity-40": disabled
+            "hover:bg-grey-30 checked:bg-primary-80 hover:checked:bg-primary-80": !disabled,
+            "bg-grey-5 checked:opacity-40 checked:bg-primary-40": disabled
           }
         )
       ),