@aivenio/aquarium 1.21.0 → 1.22.0-rc1

package/dist/system.cjs

@@ -714,18 +714,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",
+            "primary-100": "0e1652",
+            "primary-90": "#222f95",
+            "primary-80": "#3545be",
+            "primary-70": "#5865cd",
+            "primary-60": "#818eec",
+            "primary-50": "#000000",
+            "primary-40": "#b9c5ef",
+            "primary-30": "#000000",
+            "primary-20": "#000000",
+            "primary-10": "#e3e9ff",
+            "primary-5": "#f3f6ff",
+            "primary-0": "#ffffff",
             "grey-20": "#d2d2d6"
           },
           typography: {
@@ -5798,18 +5798,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)",
+    "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, #000000)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
+    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
@@ -7132,9 +7132,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-70 focus-visible:text-primary-90 hover:text-primary-70 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);
@@ -7144,12 +7147,12 @@ 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-90 focus-visible:ring-inset hover:bg-primary-70 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-80",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
+    "hover:ring-primary-70 hover:text-primary-70 disabled:text-primary-40 disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
   "text": ghostButtonStyle,
@@ -7157,15 +7160,12 @@ var COLOR_CLASSNAMES = {
     "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"
   });
 };
@@ -7263,6 +7263,7 @@ var asButton = (Component, isDropdownButton) => {
               "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
+              "underline hover:no-underline": kind === "text",
               "py-3 px-4": !dense && isButton,
               "py-2 px-3": dense && isButton,
               "py-3": !dense && isGhost,
@@ -7279,8 +7280,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());
@@ -7656,10 +7656,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", {
@@ -7731,8 +7731,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, {
@@ -7802,7 +7801,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 ", {
-          "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
         })
       )
@@ -8506,7 +8505,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({
@@ -8517,8 +8516,8 @@ 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,
@@ -8533,8 +8532,8 @@ var Checkbox = import_react39.default.forwardRef(
           "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
         }
       )
     }));
@@ -9784,10 +9783,10 @@ var RadioButton = import_react59.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
           }
         )
       ),
@@ -10992,12 +10991,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ import_react81.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "warning-80"
+          color: selected ? void 0 : "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ import_react81.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "error-50"
+          color: selected ? void 0 : "error-50"
         });
       }
       const tab = /* @__PURE__ */ import_react81.default.createElement(Component, __spreadValues({
@@ -12990,8 +12989,8 @@ var Switch = import_react104.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
           }
         )
       ),

package/dist/system.mjs

@@ -712,18 +712,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",
+            "primary-100": "0e1652",
+            "primary-90": "#222f95",
+            "primary-80": "#3545be",
+            "primary-70": "#5865cd",
+            "primary-60": "#818eec",
+            "primary-50": "#000000",
+            "primary-40": "#b9c5ef",
+            "primary-30": "#000000",
+            "primary-20": "#000000",
+            "primary-10": "#e3e9ff",
+            "primary-5": "#f3f6ff",
+            "primary-0": "#ffffff",
             "grey-20": "#d2d2d6"
           },
           typography: {
@@ -5656,18 +5656,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)",
+    "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, #000000)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
+    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
@@ -6990,9 +6990,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-70 focus-visible:text-primary-90 hover:text-primary-70 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);
@@ -7002,12 +7005,12 @@ 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-90 focus-visible:ring-inset hover:bg-primary-70 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-80",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
+    "hover:ring-primary-70 hover:text-primary-70 disabled:text-primary-40 disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
   "text": ghostButtonStyle,
@@ -7015,15 +7018,12 @@ var COLOR_CLASSNAMES = {
     "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__ */ React15.createElement(InlineIcon, {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: kind === "primary" ? "primary-60" : "grey-60",
+    color: "primary-80",
     "data-testid": "loading-button"
   });
 };
@@ -7121,6 +7121,7 @@ var asButton = (Component, isDropdownButton) => {
               "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
+              "underline hover:no-underline": kind === "text",
               "py-3 px-4": !dense && isButton,
               "py-2 px-3": dense && isButton,
               "py-3": !dense && isGhost,
@@ -7137,8 +7138,7 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ React15.createElement(LoadingSpinner, {
-        size: iconSize,
-        kind: kind === "primary" ? "primary" : "secondary"
+        size: iconSize
       })), /* @__PURE__ */ React15.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -7514,10 +7514,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__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: titleVariant === "secondary" ? "primary-80" : "grey-100",
+    color: "grey-100",
     className: classNames(
       className,
       tw("whitespace-nowrap", {
@@ -7589,8 +7589,7 @@ var createBanner = (displayName, opts = {}) => {
     }, /* @__PURE__ */ React23.createElement(Banner.ContentContainer, {
       layout
     }, /* @__PURE__ */ React23.createElement(Banner.Title, {
-      layout,
-      titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
+      layout
     }, title), /* @__PURE__ */ React23.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
     }, children || description), action && /* @__PURE__ */ React23.createElement(Banner.Actions, {
@@ -7660,7 +7659,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ React24.createElement("span", {
       className: classNames3(
         tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
-          "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
         })
       )
@@ -8364,7 +8363,7 @@ var Checkbox = React34.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__ */ React34.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__ */ React34.createElement("input", __spreadProps(__spreadValues({
@@ -8375,8 +8374,8 @@ var Checkbox = React34.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,
@@ -8391,8 +8390,8 @@ var Checkbox = React34.forwardRef(
           "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
         }
       )
     }));
@@ -9642,10 +9641,10 @@ var RadioButton = React54.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
           }
         )
       ),
@@ -10850,12 +10849,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ React75.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "warning-80"
+          color: selected ? void 0 : "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ React75.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "error-50"
+          color: selected ? void 0 : "error-50"
         });
       }
       const tab = /* @__PURE__ */ React75.createElement(Component, __spreadValues({
@@ -12848,8 +12847,8 @@ var Switch = React98.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
           }
         )
       ),

package/dist/tailwind.theme.json

@@ -341,18 +341,18 @@
     "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)",
+    "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, #000000)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
+    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     "transparent": "var(--aquarium-colors-transparent, transparent)",
     "white": "var(--aquarium-colors-white, white)",

package/dist/tokens.json

@@ -633,18 +633,18 @@
                 "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",
+                "primary-100": "0e1652",
+                "primary-90": "#222f95",
+                "primary-80": "#3545be",
+                "primary-70": "#5865cd",
+                "primary-60": "#818eec",
+                "primary-50": "#000000",
+                "primary-40": "#b9c5ef",
+                "primary-30": "#000000",
+                "primary-20": "#000000",
+                "primary-10": "#e3e9ff",
+                "primary-5": "#f3f6ff",
+                "primary-0": "#ffffff",
                 "grey-20": "#d2d2d6"
             },
             "typography": {