@aivenio/aquarium 1.59.0 → 1.60.1

package/dist/system.mjs

@@ -4892,9 +4892,9 @@ var Input = React2.forwardRef((_a, ref) => {
     type: "text",
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-grey-40",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-muted",
       {
-        "text-grey-70": !props.disabled,
+        "text-default": !props.disabled,
         "text-grey-30": props.disabled,
         "cursor-default": props.readOnly
       }
@@ -4917,7 +4917,7 @@ var NoResults = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: classNames(tw("p-3 text-grey-40 italic typography-small"), className)
+      className: classNames(tw("p-3 text-muted italic typography-small"), className)
     }), children);
   }
 );
@@ -4937,7 +4937,7 @@ var Group = React2.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-grey-40 uppercase cursor-default typography-caption mt-4 first:mt-0",
+      "flex items-center gap-x-3 p-3 text-muted uppercase cursor-default typography-caption mt-4 first:mt-0",
       {
         "text-grey-20": props.disabled
       }
@@ -5388,9 +5388,9 @@ var tailwind_theme_default = {
     "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
     "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
+    current: "var(--aquarium-colors-current, currentColor)",
     white: "var(--aquarium-colors-white, white)",
-    black: "var(--aquarium-colors-black, black)",
-    current: "var(--aquarium-colors-current, currentColor)"
+    black: "var(--aquarium-colors-black, black)"
   },
   gap: {
     "0": "0",
@@ -6736,7 +6736,7 @@ var Arrow = (props) => {
 
 // src/utils/constants.ts
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none",
   {
     "px-3 py-3": !readOnly,
     "border-none resize-none cursor-default": readOnly,
@@ -6875,7 +6875,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "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,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-muted disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -7807,7 +7807,7 @@ var getStatusClassNames = (status = "neutral") => {
       return tw("text-success-100 bg-success-5");
     case "neutral":
     default:
-      return tw("text-grey-70 bg-grey-5");
+      return tw("text-default bg-grey-5");
   }
 };
 var Chip2 = (_a) => {
@@ -7831,8 +7831,8 @@ var Chip2 = (_a) => {
     className: classNames5(
       "Aquarium-Chip",
       tw({
-        "bg-grey-0 text-grey-70": !locked,
-        "bg-grey-5 text-grey-40": locked
+        "bg-grey-0 text-default": !locked,
+        "bg-grey-5 text-muted": locked
       })
     )
   }, rest), icon && /* @__PURE__ */ React27.createElement(InlineIcon, {
@@ -8644,7 +8644,7 @@ var ControlLabel = (_a) => {
     "style",
     "className"
   ]);
-  const textClass = disabled ? "text-grey-40" : "text-grey-70";
+  const textClass = disabled ? "text-muted" : "text-default";
   const rtl = labelPlacement === "left";
   const labelEl = label && /* @__PURE__ */ React39.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -8966,9 +8966,9 @@ var LabelText = ({
     className: tw("block mb-2")
   }, /* @__PURE__ */ React46.createElement("span", {
     className: tw("inline-flex items-center typography-small-strong", {
-      "text-grey-70": variant === "default",
+      "text-default": variant === "default",
       "text-error-50": variant === "error",
-      "text-grey-40": variant === "disabled"
+      "text-muted": variant === "disabled"
     })
   }, labelText, required && /* @__PURE__ */ React46.createElement("span", {
     className: tw("text-error-50")
@@ -8977,7 +8977,7 @@ var LabelText = ({
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ React46.createElement("span", {
     tabIndex: 0,
-    className: tw("text-grey-40 flex items-center cursor-pointer ml-2")
+    className: tw("text-muted flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ React46.createElement(InlineIcon, {
     icon: import_questionMark2.default,
     "data-testid": "icon-info"
@@ -9721,7 +9721,7 @@ var InputAdornment = ({
   children
 }) => {
   return /* @__PURE__ */ React56.createElement("span", {
-    className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
+    className: classNames(className, "absolute inset-y-0 grow-0 text-muted flex items-center mx-3", {
       "right-0": placement === "right",
       "left-0": placement === "left",
       "typography-small": dense,
@@ -10374,7 +10374,7 @@ var TableRow = (_a) => {
   }), children);
 };
 var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
-var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-grey-70 py-3", {
+var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-3", {
   "h-[50px]": table,
   "min-h-[50px]": !table,
   "sticky z-10 bg-white group-hover:bg-grey-0": Boolean(stickyColumn),
@@ -10425,7 +10425,7 @@ var TableSelectCell = (_a) => {
 };
 var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-grey-50", { "flex-row-reverse": align === "right" });
 var getSortCellIconClassNames = (active) => {
-  return tw("text-[9px]", active ? "text-grey-70" : "text-grey-30");
+  return tw("text-[9px]", active ? "text-default" : "text-muted");
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
@@ -10696,7 +10696,7 @@ var DropdownMenu = React65.forwardRef(
     return /* @__PURE__ */ React65.createElement("div", __spreadValues({
       ref,
       style: { minHeight, maxHeight, minWidth, maxWidth },
-      className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
+      className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-default")
     }, props), children);
   }
 );
@@ -10720,7 +10720,7 @@ var Group2 = React65.forwardRef(
     return /* @__PURE__ */ React65.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ React65.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
+      className: classNames(className, "p-3 text-muted uppercase cursor-default typography-caption", {
         "text-grey-20": props.disabled
       })
     }, titleProps), title), children);
@@ -12512,8 +12512,8 @@ var DropdownItem = (_a) => {
     onKeyDown: handleKeyDown
   }, props), {
     className: tw("typography-small flex items-center focus:ring-0", {
-      "text-grey-70 cursor-pointer hover:bg-grey-0": !disabled,
-      "text-grey-10 cursor-not-allowed": disabled,
+      "text-default cursor-pointer hover:bg-grey-0": !disabled,
+      "text-muted cursor-not-allowed": disabled,
       "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
     })
   }), tooltip ? /* @__PURE__ */ React80.createElement(Tooltip, {
@@ -12918,7 +12918,7 @@ var InputChip = React90.forwardRef(
       icon: import_smallCross2.default,
       className: tw({
         "text-error-70": invalid,
-        "text-grey-70": !invalid
+        "text-default": !invalid
       })
     })));
   }
@@ -13435,7 +13435,7 @@ var NativeSelectBase = React93.forwardRef(
       className: classNames("Aquarium-NativeSelectBase", tw("relative block"))
     }, !readOnly && /* @__PURE__ */ React93.createElement("span", {
       className: tw(
-        "absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
+        "absolute right-0 inset-y-0 mr-4 text-muted flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
     }, /* @__PURE__ */ React93.createElement(Icon, {
       icon: import_caretDown2.default,
@@ -13449,9 +13449,9 @@ var NativeSelectBase = React93.forwardRef(
       onBlur: handleBlur,
       className: classNames(
         tw(
-          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-grey-70  placeholder:text-grey-40 focus:outline-none",
+          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-muted focus:outline-none",
           {
-            "px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-grey-40": !readOnly,
+            "px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-muted": !readOnly,
             "px-0 py-3 border-none": readOnly,
             "border border-error-50": !valid && !readOnly,
             "border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
@@ -13546,7 +13546,7 @@ var Section2 = (_a) => {
     role: "presentation",
     className: tw("py-5")
   }, title && /* @__PURE__ */ React94.createElement("div", {
-    className: classNames(className, "py-2 px-6 text-grey-40 uppercase cursor-default typography-caption")
+    className: classNames(className, "py-2 px-6 text-muted uppercase cursor-default typography-caption")
   }, title), /* @__PURE__ */ React94.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
@@ -13843,9 +13843,9 @@ ProgressBar.Labels = (_a) => {
   return /* @__PURE__ */ React100.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
   }, /* @__PURE__ */ React100.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: tw("grow text-grey-70 typography-caption")
+    className: tw("grow text-default typography-caption")
   }), startLabel), /* @__PURE__ */ React100.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: tw("grow text-grey-70 typography-caption text-right")
+    className: tw("grow text-default typography-caption text-right")
   }), endLabel));
 };
 

package/dist/tailwind.config.js

@@ -21,12 +21,27 @@ const originalTheme = {
     zIndex: {
       modal: '100',
     },
+    textColor: {
+      muted: 'var(--aquarium-colors-grey-40)',
+      default: 'var(--aquarium-colors-grey-70)',
+    },
+    ringWidth: {
+      DEFAULT: '2px',
+      1: '1px',
+      2: '2px',
+    },
   },
   borderRadius: {
     ...defaultTheme.borderRadius,
     DEFAULT: '4px',
   },
-  colors: { ...theme.colors, transparent: 'transparent', white: 'white', black: 'black', current: 'currentColor' },
+  colors: {
+    ...theme.colors,
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: 'white',
+    black: 'black',
+  },
   spacing,
   margin: {
     ...spacing,
@@ -78,13 +93,6 @@ module.exports = {
     display: ['children'],
     opacity: ['sibling-input-focus', 'focus'],
   },
-  extend: {
-    ringWidth: {
-      DEFAULT: '2px',
-      1: '1px',
-      2: '2px',
-    },
-  },
   content: ['./src/**/*.tsx', './src/**/*.ts'],
   safelist: [
     ...theme.typography.sizes.map((s) => s.className),

package/dist/tailwind.theme.json

@@ -355,9 +355,9 @@
     "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
     "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     "transparent": "var(--aquarium-colors-transparent, transparent)",
+    "current": "var(--aquarium-colors-current, currentColor)",
     "white": "var(--aquarium-colors-white, white)",
-    "black": "var(--aquarium-colors-black, black)",
-    "current": "var(--aquarium-colors-current, currentColor)"
+    "black": "var(--aquarium-colors-black, black)"
   },
   "gap": {
     "0": "0",