@aivenio/aquarium 1.29.0 → 1.30.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 13 Jul 2023 12:37:08 GMT
+// Generated on Fri, 14 Jul 2023 08:34:12 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;
@@ -67,6 +67,7 @@ $colors-grey-60: #5a5b6a !default;
 $colors-grey-50: #787885 !default;
 $colors-grey-40: #9696a0 !default;
 $colors-grey-30: #b4b4bb !default;
+$colors-grey-20: #d2d2d6 !default;
 $colors-grey-10: #e1e1e3 !default;
 $colors-grey-5: #ededf0 !default;
 $colors-grey-0: #f7f7fa !default;
@@ -82,20 +83,18 @@ $colors-secondary-20: #f8c99c !default;
 $colors-secondary-10: #fee8d0 !default;
 $colors-secondary-5: #fff3e8 !default;
 $colors-secondary-0: #fffbf8 !default;
-$colors-primary-100: #a70045 !default;
-$colors-primary-90: #c60443 !default;
-$colors-primary-80: #e41a4a !default;
-$colors-primary-70: #ff3554 !default;
-$colors-primary-60: #ff5275 !default;
-$colors-primary-50: #ff6f94 !default;
-$colors-primary-40: #ff8db0 !default;
-$colors-primary-30: #ffa9c9 !default;
-$colors-primary-20: #ffc4de !default;
-$colors-primary-10: #ffdeef !default;
-$colors-primary-5: #ffe8f4 !default;
-$colors-primary-0: #fff9fc !default;
-$colors-grey-20: #d2d2d6 !default;
-$colors-navy-blue-100: #30375e !default;
+$colors-primary-100: #0e1652 !default;
+$colors-primary-90: #222f95 !default;
+$colors-primary-80: #3545be !default;
+$colors-primary-70: #5865cd !default;
+$colors-primary-60: #818eec !default;
+$colors-primary-50: #9daaee !default;
+$colors-primary-40: #b9c5ef !default;
+$colors-primary-30: #c7d1f4 !default;
+$colors-primary-20: #d5ddfa !default;
+$colors-primary-10: #e3e9ff !default;
+$colors-primary-5: #f3f6ff !default;
+$colors-primary-0: #ffffff !default;
 $colors-transparent: transparent !default;
 $colors-white: white !default;
 $colors-black: black !default;

package/dist/_variables_timescale.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 13 Jul 2023 12:37:09 GMT
+// Generated on Fri, 14 Jul 2023 08:34:13 GMT
 
 $border-radius-none: 0px;
 $border-radius-sm: 0.125rem;
@@ -95,7 +95,6 @@ $colors-primary-20: #b4e5fb;
 $colors-primary-10: #e0f5fe;
 $colors-primary-5: #effaff;
 $colors-primary-0: #f9fdff;
-$colors-navy-blue-100: #30375e;
 $colors-transparent: transparent;
 $colors-white: white;
 $colors-black: black;

package/dist/atoms.cjs

@@ -3889,8 +3889,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: [
@@ -4423,6 +4422,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",
@@ -4438,20 +4438,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: [
@@ -4459,40 +4457,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",
@@ -5332,6 +5330,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)",
@@ -5347,20 +5346,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)",
@@ -6526,9 +6523,12 @@ var Arrow = (props) => {
 
 // src/utils/constants.ts
 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 underline hover:no-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);
@@ -6538,28 +6538,27 @@ var import_chevronDown2 = __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_react18.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"
   });
 };
@@ -6673,8 +6672,7 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ import_react18.default.createElement(LoadingSpinner, {
-        size: iconSize,
-        kind: kind === "primary" ? "primary" : "secondary"
+        size: iconSize
       })), /* @__PURE__ */ import_react18.default.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -6803,19 +6801,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) => {
@@ -6835,7 +6833,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),
@@ -6965,7 +6963,7 @@ var Checkbox = import_react22.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_react22.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_react22.default.createElement("input", __spreadProps(__spreadValues({
@@ -6976,24 +6974,25 @@ var Checkbox = import_react22.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_react22.default.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick2.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
         }
       )
     }));
@@ -7442,7 +7441,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react31.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_react31.default.forwardRef(
@@ -7678,10 +7677,10 @@ var RadioButton = import_react35.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
           }
         )
       ),
@@ -7963,8 +7962,8 @@ var Switch = import_react38.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
           }
         )
       ),