@aivenio/aquarium 1.66.0 → 1.67.0

package/README.md

@@ -60,7 +60,7 @@ This project requires certain environment variables to be set before commands su
 
 - Create an npm account [here](https://www.npmjs.com/signup) if you don't already have one.
 - Generate a token for your account. You can read about how to do so [here](https://docs.npmjs.com/creating-and-viewing-access-tokens). For the purposes of building the project, read-only access will suffice.
-- Copy the sample environment file: `cp .env.sample env`
+- Copy the sample environment file: `cp .env.sample .env`
 - Add the necessary data into the newly-created `.env` file.
 - Source the `.env` file for the environment variables to be set: `source .env`
 
@@ -81,9 +81,12 @@ After Figma has been edited, run:
   - Install Tailwind CSS IntelliSense extension. See <https://github.com/tailwindlabs/tailwindcss-intellisense#recommended-vs-code-settings>
   - Install ESLint extension and optionally enable auto-format on save. See _"Step 4 — Formatting on Save"_ from <https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code>
 
-### npm link
+### Running locally
 
-To develop Aquarium components in the context of an application, it is easier to do it with [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link). It allows you to make changes to components, and instantly see the change in the context of the app (e.g. Console).
+To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application (e.g. Console).
+There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link), or copying the module into your app. This allows you to make changes to components and instantly see the change in the context of the app.
+
+#### npm link
 
 1. In design-system directory, run `npm link`
 2. In design-system directory, run `npm link <path to app>/node_modules/react` to avoid running into conflict of having two react instances. This will otherwise break the rules of hooks and crash the app. More info on the issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). If the command fails with errors about peer dependencies, re-run the command, adding `--force` at the end.
@@ -93,6 +96,11 @@ To develop Aquarium components in the context of an application, it is easier to
 6. Done! Now you should be able to develop DS locally, and changes are reflected to the application which depends on `@aivenio/aquarium`
 7. When you want to stop using the npm link, and go back to the regular imported version, in your app directory, run `npm unlink --no-save @aivenio/aquarium`, then `npm i` to reinstall the dependency.
 
+#### Copy module
+
+npm link can be tricky to get working. A simpler approach is to build the module and copy it into your application's `node-modules` directory:
+`npm run build:ds:module && cp -r dist <path to app>/node_modules/@aivenio/aquarium`
+
 ### Running tests
 
 Remember that `source .env` is needed before NPM commands.

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 08 May 2024 09:54:01 GMT
+// Generated on Wed, 22 May 2024 13:00:37 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;
@@ -112,41 +112,48 @@ $screens-md: 1056px !default;
 $screens-lg: 1312px !default;
 $screens-xl: 1536px !default;
 $background-color-body: var(--aquarium-colors-white) !default;
+$background-color-body-intense: var(--aquarium-colors-grey-80) !default;
 $background-color-popover-content: var(--aquarium-colors-white) !default;
 $background-color-muted: var(--aquarium-colors-grey-0) !default;
 $background-color-default: var(--aquarium-colors-grey-5) !default;
 $background-color-intense: var(--aquarium-colors-grey-20) !default;
-$background-color-intense-2x: var(--aquarium-colors-grey-80) !default;
-$background-color-primary-muted-3x: var(--aquarium-colors-primary-5) !default;
-$background-color-primary-muted-2x: var(--aquarium-colors-primary-10) !default;
 $background-color-primary-muted: var(--aquarium-colors-primary-40) !default;
 $background-color-primary-default: var(--aquarium-colors-primary-80) !default;
 $background-color-primary-intense: var(--aquarium-colors-primary-90) !default;
-$background-color-secondary-default: var(--aquarium-colors-secondary-90) !default;
+$background-color-primary-active: var(--aquarium-colors-primary-5) !default;
+$background-color-primary-hover: var(--aquarium-colors-primary-5) !default;
 $background-color-info-muted: var(--aquarium-colors-info-10) !default;
 $background-color-info-default: var(--aquarium-colors-info-70) !default;
+$background-color-info-intense: var(--aquarium-colors-info-90) !default;
 $background-color-success-muted: var(--aquarium-colors-success-5) !default;
 $background-color-success-default: var(--aquarium-colors-success-70) !default;
 $background-color-success-intense: var(--aquarium-colors-success-90) !default;
 $background-color-warning-muted: var(--aquarium-colors-warning-5) !default;
 $background-color-warning-default: var(--aquarium-colors-warning-70) !default;
-$background-color-danger-muted-2x: var(--aquarium-colors-error-5) !default;
+$background-color-warning-intense: var(--aquarium-colors-warning-90) !default;
 $background-color-danger-muted: var(--aquarium-colors-error-10) !default;
 $background-color-danger-default: var(--aquarium-colors-error-20) !default;
 $background-color-danger-intense: var(--aquarium-colors-error-50) !default;
-$border-color-muted-2x: var(--aquarium-colors-grey-0) !default;
+$background-color-status-announcement: var(--aquarium-colors-primary-5) !default;
+$background-color-status-info: var(--aquarium-colors-info-10) !default;
+$background-color-status-warning: var(--aquarium-colors-warning-5) !default;
+$background-color-status-danger: var(--aquarium-colors-error-5) !default;
+$background-color-status-success: var(--aquarium-colors-success-5) !default;
 $border-color-muted: var(--aquarium-colors-grey-5) !default;
 $border-color-default: var(--aquarium-colors-grey-20) !default;
 $border-color-intense: var(--aquarium-colors-grey-50) !default;
-$border-color-primary-muted-3x: var(--aquarium-colors-primary-10) !default;
-$border-color-primary-muted-2x: var(--aquarium-colors-primary-40) !default;
 $border-color-primary-muted: var(--aquarium-colors-primary-60) !default;
 $border-color-primary-default: var(--aquarium-colors-primary-80) !default;
+$border-color-primary-intense: var(--aquarium-colors-primary-100) !default;
+$border-color-info-muted: var(--aquarium-colors-info-50) !default;
 $border-color-info-default: var(--aquarium-colors-info-70) !default;
+$border-color-info-intense: var(--aquarium-colors-info-90) !default;
 $border-color-success-muted: var(--aquarium-colors-success-10) !default;
 $border-color-success-default: var(--aquarium-colors-success-40) !default;
 $border-color-success-intense: var(--aquarium-colors-success-70) !default;
 $border-color-warning-muted: var(--aquarium-colors-warning-20) !default;
+$border-color-warning-default: var(--aquarium-colors-warning-70) !default;
+$border-color-warning-intense: var(--aquarium-colors-warning-90) !default;
 $border-color-danger-muted: var(--aquarium-colors-error-10) !default;
 $border-color-danger-default: var(--aquarium-colors-error-50) !default;
 $border-color-danger-intense: var(--aquarium-colors-error-80) !default;
@@ -211,23 +218,28 @@ $spacing-l4: 48px !default;
 $spacing-l5: 64px !default;
 $spacing-l6: 96px !default;
 $spacing-l7: 160px !default;
-$text-color-muted-3x: var(--aquarium-colors-grey-30) !default;
-$text-color-muted-2x: var(--aquarium-colors-grey-40) !default;
+$text-color-inactive: var(--aquarium-colors-grey-40) !default;
 $text-color-muted: var(--aquarium-colors-grey-50) !default;
 $text-color-default: var(--aquarium-colors-grey-70) !default;
 $text-color-intense: var(--aquarium-colors-grey-90) !default;
-$text-color-primary-muted-3x: var(--aquarium-colors-primary-10) !default;
-$text-color-primary-muted-2x: var(--aquarium-colors-primary-40) !default;
+$text-color-primary-inactive: var(--aquarium-colors-primary-40) !default;
+$text-color-primary-active: var(--aquarium-colors-primary-90) !default;
 $text-color-primary-muted: var(--aquarium-colors-primary-60) !default;
 $text-color-primary-default: var(--aquarium-colors-primary-70) !default;
 $text-color-primary-intense: var(--aquarium-colors-primary-80) !default;
-$text-color-primary-intense-2x: var(--aquarium-colors-primary-90) !default;
+$text-color-info-inactive: var(--aquarium-colors-info-20) !default;
+$text-color-info-muted: var(--aquarium-colors-info-40) !default;
 $text-color-info-default: var(--aquarium-colors-info-70) !default;
 $text-color-info-intense: var(--aquarium-colors-info-90) !default;
+$text-color-success-inactive: var(--aquarium-colors-success-10) !default;
+$text-color-success-muted: var(--aquarium-colors-success-30) !default;
 $text-color-success-default: var(--aquarium-colors-success-70) !default;
 $text-color-success-intense: var(--aquarium-colors-success-90) !default;
+$text-color-warning-inactive: var(--aquarium-colors-warning-20) !default;
+$text-color-warning-muted: var(--aquarium-colors-warning-40) !default;
 $text-color-warning-default: var(--aquarium-colors-warning-80) !default;
 $text-color-warning-intense: var(--aquarium-colors-warning-100) !default;
+$text-color-danger-inactive: var(--aquarium-colors-error-10) !default;
 $text-color-danger-muted: var(--aquarium-colors-error-20) !default;
 $text-color-danger-default: var(--aquarium-colors-error-50) !default;
 $text-color-danger-intense: var(--aquarium-colors-error-80) !default;

package/dist/atoms.cjs

@@ -5129,28 +5129,33 @@ var tailwind_theme_default = {
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
     body: "var(--aquarium-background-color-body)",
+    "body-intense": "var(--aquarium-background-color-body-intense)",
     "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)",
-    "intense-2x": "var(--aquarium-background-color-intense-2x)",
-    "primary-muted-3x": "var(--aquarium-background-color-primary-muted-3x)",
-    "primary-muted-2x": "var(--aquarium-background-color-primary-muted-2x)",
     "primary-muted": "var(--aquarium-background-color-primary-muted)",
     "primary-default": "var(--aquarium-background-color-primary-default)",
     "primary-intense": "var(--aquarium-background-color-primary-intense)",
-    "secondary-default": "var(--aquarium-background-color-secondary-default)",
+    "primary-active": "var(--aquarium-background-color-primary-active)",
+    "primary-hover": "var(--aquarium-background-color-primary-hover)",
     "info-muted": "var(--aquarium-background-color-info-muted)",
     "info-default": "var(--aquarium-background-color-info-default)",
+    "info-intense": "var(--aquarium-background-color-info-intense)",
     "success-muted": "var(--aquarium-background-color-success-muted)",
     "success-default": "var(--aquarium-background-color-success-default)",
     "success-intense": "var(--aquarium-background-color-success-intense)",
     "warning-muted": "var(--aquarium-background-color-warning-muted)",
     "warning-default": "var(--aquarium-background-color-warning-default)",
-    "danger-muted-2x": "var(--aquarium-background-color-danger-muted-2x)",
+    "warning-intense": "var(--aquarium-background-color-warning-intense)",
     "danger-muted": "var(--aquarium-background-color-danger-muted)",
     "danger-default": "var(--aquarium-background-color-danger-default)",
-    "danger-intense": "var(--aquarium-background-color-danger-intense)"
+    "danger-intense": "var(--aquarium-background-color-danger-intense)",
+    "status-announcement": "var(--aquarium-background-color-status-announcement)",
+    "status-info": "var(--aquarium-background-color-status-info)",
+    "status-warning": "var(--aquarium-background-color-status-warning)",
+    "status-danger": "var(--aquarium-background-color-status-danger)",
+    "status-success": "var(--aquarium-background-color-status-success)"
   },
   textColor: {
     "error-100": "var(--aquarium-colors-error-100, #aa0000)",
@@ -5241,23 +5246,28 @@ var tailwind_theme_default = {
     current: "var(--aquarium-colors-current, currentColor)",
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
-    "muted-3x": "var(--aquarium-text-color-muted-3x)",
-    "muted-2x": "var(--aquarium-text-color-muted-2x)",
+    inactive: "var(--aquarium-text-color-inactive)",
     muted: "var(--aquarium-text-color-muted)",
     default: "var(--aquarium-text-color-default)",
     intense: "var(--aquarium-text-color-intense)",
-    "primary-muted-3x": "var(--aquarium-text-color-primary-muted-3x)",
-    "primary-muted-2x": "var(--aquarium-text-color-primary-muted-2x)",
+    "primary-inactive": "var(--aquarium-text-color-primary-inactive)",
+    "primary-active": "var(--aquarium-text-color-primary-active)",
     "primary-muted": "var(--aquarium-text-color-primary-muted)",
     "primary-default": "var(--aquarium-text-color-primary-default)",
     "primary-intense": "var(--aquarium-text-color-primary-intense)",
-    "primary-intense-2x": "var(--aquarium-text-color-primary-intense-2x)",
+    "info-inactive": "var(--aquarium-text-color-info-inactive)",
+    "info-muted": "var(--aquarium-text-color-info-muted)",
     "info-default": "var(--aquarium-text-color-info-default)",
     "info-intense": "var(--aquarium-text-color-info-intense)",
+    "success-inactive": "var(--aquarium-text-color-success-inactive)",
+    "success-muted": "var(--aquarium-text-color-success-muted)",
     "success-default": "var(--aquarium-text-color-success-default)",
     "success-intense": "var(--aquarium-text-color-success-intense)",
+    "warning-inactive": "var(--aquarium-text-color-warning-inactive)",
+    "warning-muted": "var(--aquarium-text-color-warning-muted)",
     "warning-default": "var(--aquarium-text-color-warning-default)",
     "warning-intense": "var(--aquarium-text-color-warning-intense)",
+    "danger-inactive": "var(--aquarium-text-color-danger-inactive)",
     "danger-muted": "var(--aquarium-text-color-danger-muted)",
     "danger-default": "var(--aquarium-text-color-danger-default)",
     "danger-intense": "var(--aquarium-text-color-danger-intense)"
@@ -5352,19 +5362,21 @@ var tailwind_theme_default = {
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
     DEFAULT: "currentColor",
-    "muted-2x": "var(--aquarium-border-color-muted-2x)",
     muted: "var(--aquarium-border-color-muted)",
     default: "var(--aquarium-border-color-default)",
     intense: "var(--aquarium-border-color-intense)",
-    "primary-muted-3x": "var(--aquarium-border-color-primary-muted-3x)",
-    "primary-muted-2x": "var(--aquarium-border-color-primary-muted-2x)",
     "primary-muted": "var(--aquarium-border-color-primary-muted)",
     "primary-default": "var(--aquarium-border-color-primary-default)",
+    "primary-intense": "var(--aquarium-border-color-primary-intense)",
+    "info-muted": "var(--aquarium-border-color-info-muted)",
     "info-default": "var(--aquarium-border-color-info-default)",
+    "info-intense": "var(--aquarium-border-color-info-intense)",
     "success-muted": "var(--aquarium-border-color-success-muted)",
     "success-default": "var(--aquarium-border-color-success-default)",
     "success-intense": "var(--aquarium-border-color-success-intense)",
     "warning-muted": "var(--aquarium-border-color-warning-muted)",
+    "warning-default": "var(--aquarium-border-color-warning-default)",
+    "warning-intense": "var(--aquarium-border-color-warning-intense)",
     "danger-muted": "var(--aquarium-border-color-danger-muted)",
     "danger-default": "var(--aquarium-border-color-danger-default)",
     "danger-intense": "var(--aquarium-border-color-danger-intense)"
@@ -5807,7 +5819,7 @@ var Toast = (_a) => {
   return /* @__PURE__ */ import_react7.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: (0, import_classnames2.default)(
       tw("typography-body-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4 text-white", {
-        "bg-intense-2x": variant === "default",
+        "bg-body-intense": variant === "default",
         "bg-danger-intense": variant === "danger"
       }),
       className
@@ -6511,7 +6523,7 @@ var TooltipWrapper = import_react17.default.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react17.default.createElement("div", __spreadValues({
       ref,
-      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-intense-2x text-white"))
+      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-white"))
     }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react17.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -6550,13 +6562,13 @@ var getArrowStyle = (element, position, { left, top }) => {
 };
 var Arrow = (props) => {
   return /* @__PURE__ */ import_react17.default.createElement("div", __spreadValues({
-    className: tw("absolute w-3 h-3 bg-intense-2x rotate-45")
+    className: tw("absolute w-3 h-3 bg-body-intense rotate-45")
   }, props));
 };
 
 // src/utils/constants.ts
 var ghostButtonStyle = tw(
-  "text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x"
+  "text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive"
 );
 var linkStyle = classNames(
   ghostButtonStyle,
@@ -6575,15 +6587,15 @@ var COLOR_CLASSNAMES = {
   ),
   "secondary": tw(
     "text-primary-intense bg-body ring-1 ring-primary-80 ring-inset",
-    "active:bg-primary-muted-3x active:ring-primary-90 active:text-primary-intense",
+    "active:bg-primary-active active:ring-primary-90 active:text-primary-intense",
     "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense",
-    "hover:bg-primary-muted-3x hover:ring-primary-90 hover:text-primary-intense",
-    "disabled:bg-body disabled:text-primary-muted-2x disabled:ring-primary-40"
+    "hover:bg-primary-hover hover:ring-primary-90 hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
   "text": linkStyle,
   "secondary-ghost": tw(
-    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-muted-3x"
+    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6686,7 +6698,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-muted-2x disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -6877,11 +6889,11 @@ var Alert = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
-        "bg-danger-muted-2x": type === "error",
-        "bg-info-muted": type === "information",
-        "bg-success-muted": type === "success",
-        "bg-warning-muted": type === "warning",
-        "bg-primary-muted-2x": type === "announcement",
+        "bg-status-danger": type === "error",
+        "bg-status-info": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning",
+        "bg-status-announcement": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -6945,10 +6957,10 @@ var Banner = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("relative flex px-[60px] justify-center", {
-        "bg-danger-muted-2x": type === "error",
-        "bg-primary-muted-3x": type === "information",
-        "bg-success-muted": type === "success",
-        "bg-warning-muted": type === "warning"
+        "bg-status-danger": type === "error",
+        "bg-status-announcement": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning"
       }),
       className
     )
@@ -7320,7 +7332,7 @@ var Card = import_react24.default.forwardRef((props, ref) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": clickable && !disabled,
+        "cursor-pointer hover:bg-primary-hover active:bg-body": clickable && !disabled,
         "focusable": clickable && modality === "keyboard"
       }),
       className
@@ -7333,7 +7345,7 @@ var Label = (props) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": !disabled,
+        "cursor-pointer hover:bg-primary-hover active:bg-body": !disabled,
         "border-primary-default": checked,
         "focusable": modality === "keyboard"
       }),
@@ -7447,17 +7459,17 @@ var Checkbox = import_react25.default.forwardRef(
       disabled
     })), /* @__PURE__ */ import_react25.default.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick2.default,
-      strokeWidth: "2px",
+      strokeWidth: "3px",
       className: classNames(
         tw(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
-          "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
+          "text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px]",
           "rounded-sm border border-default peer-focus:border-info-default"
         ),
         {
           "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
-          "border-muted peer-checked:text-primary-muted-3x peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-muted-2x": disabled
+          "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
     }));
@@ -7505,11 +7517,11 @@ var RadioButton = import_react27.default.forwardRef(
       className: classNames(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
-          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-default",
+          "w-5 h-5 p-[3px] rounded-full border border-default",
           "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-whiteInset",
           {
-            "hover:border-intense checked:border-primary-default": !disabled,
-            "cursor-not-allowed border-muted bg-muted checked:bg-opacity-40 checked:bg-primary-muted checked:border-primary-muted-2x": disabled
+            "cursor-pointer hover:border-intense checked:border-primary-default": !disabled,
+            "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent": disabled
           }
         )
       ),
@@ -7602,7 +7614,7 @@ var TableSelectCell = (_a) => {
 };
 var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-muted", { "flex-row-reverse": align === "right" });
 var getSortCellIconClassNames = (active) => {
-  return tw("text-[9px]", active ? "text-default" : "text-muted-2x");
+  return tw("text-[9px]", active ? "text-default" : "text-inactive");
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
@@ -7719,7 +7731,7 @@ var Row = (_a) => {
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
       "children:opacity-70": disabled,
-      "[&>*]:bg-primary-muted-3x": active,
+      "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
     })
   }));
@@ -7890,7 +7902,7 @@ var Skeleton = (_a) => {
 // src/molecules/Badge/Badge.tsx
 var createBadge = (type, displayName) => {
   const Component = (props) => {
-    const _a = props, { kind = "filled", value, textClassname, dense = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense"]);
+    const _a = props, { kind = "filled", value, textClassname, dense = false, disabled = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense", "disabled"]);
     const valueStr = value.toString();
     return /* @__PURE__ */ import_react31.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
@@ -7899,7 +7911,8 @@ var createBadge = (type, displayName) => {
           "rounded": type === "tab",
           "border border-current": kind === "outlined",
           "bg-current": kind === "filled" && type !== "chip",
-          "bg-white": type === "chip",
+          "bg-white": type === "chip" && !disabled,
+          "bg-muted": type === "chip" && disabled,
           "typography-caption-small leading-none py-1 px-2": !dense,
           "text-[8px]": dense,
           "px-1": dense && valueStr.length > 1,
@@ -7991,9 +8004,7 @@ var Group = import_react32.default.forwardRef(
     return /* @__PURE__ */ import_react32.default.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ import_react32.default.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-muted-2x uppercase cursor-default typography-caption", {
-        "text-muted-3x": props.disabled
-      })
+      className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
     }, titleProps), title), children);
   }
 );
@@ -8007,7 +8018,7 @@ var Item2 = import_react32.default.forwardRef(
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action",
-        "text-muted-3x cursor-not-allowed": props.disabled
+        "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && showNotification && /* @__PURE__ */ import_react32.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
       icon
@@ -8347,7 +8358,7 @@ var Section = (_a) => {
     role: "presentation",
     className: tw("py-5")
   }, title && /* @__PURE__ */ import_react37.default.createElement("div", {
-    className: classNames(className, "py-2 px-6 text-muted-2x uppercase cursor-default typography-caption")
+    className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption")
   }, title), /* @__PURE__ */ import_react37.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
@@ -8661,10 +8672,10 @@ var Input = import_react43.default.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-default placeholder:text-muted-2x",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
       {
         "text-default": !props.disabled,
-        "text-muted-3x": props.disabled,
+        "text-inactive": props.disabled,
         "cursor-default": props.readOnly
       }
     )
@@ -8686,7 +8697,7 @@ var NoResults = import_react43.default.forwardRef(
     return /* @__PURE__ */ import_react43.default.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: classNames(tw("p-3 text-muted-2x italic typography-small"), className)
+      className: classNames(tw("p-3 text-inactive italic typography-small"), className)
     }), children);
   }
 );
@@ -8706,10 +8717,7 @@ var Group2 = import_react43.default.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-muted-2x uppercase cursor-default typography-caption mt-4 first:mt-0",
-      {
-        "text-muted-3x": props.disabled
-      }
+      "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-caption mt-4 first:mt-0"
     )
   }, props), children);
 });
@@ -8737,12 +8745,11 @@ var ActionItem = import_react43.default.forwardRef(
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
-      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-intense", {
+      className: classNames(className, "flex items-center gap-x-3 typography-small", {
         "p-3": !dense,
         "px-3 py-2": dense,
-        "cursor-pointer": !props.disabled,
-        "text-muted-3x": props.disabled,
-        "hover:text-primary-default": !props.disabled
+        "text-primary-intense cursor-pointer hover:text-primary-default": !props.disabled,
+        "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && /* @__PURE__ */ import_react43.default.createElement(InlineIcon, {
       icon
@@ -8759,7 +8766,7 @@ var Toggle = import_react43.default.forwardRef((_a, ref) => {
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
   }), /* @__PURE__ */ import_react43.default.createElement(InlineIcon, {
-    color: props.disabled ? "muted-2x" : "default",
+    color: props.disabled ? "inactive" : "default",
     icon: hasFocus ? import_search2.default : isOpen ? import_chevronUp4.default : import_chevronDown5.default
   }));
 });
@@ -8823,8 +8830,9 @@ var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
   return /* @__PURE__ */ import_react44.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("flex flex-col items-center text-intense relative text-center", {
-        "text-muted-3x": state === "inactive"
+      tw("flex flex-col items-center relative text-center", {
+        "text-intense": state !== "inactive",
+        "text-inactive": state === "inactive"
       }),
       className
     )
@@ -8836,7 +8844,7 @@ var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
-  "bg-intense-2x": state === "active",
+  "bg-body-intense": state === "active",
   "bg-intense": state === "inactive",
   "text-success-default": state === "completed"
 });
@@ -8887,7 +8895,7 @@ var Switch = import_react45.default.forwardRef(
     })), /* @__PURE__ */ import_react45.default.createElement("span", {
       className: tw(
         "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
-        "bg-white left-2 peer-checked/switch:left-1 text-muted-3x peer-checked/switch:text-primary-muted",
+        "bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted",
         {
           "shadow-4dp": !disabled
         }