@aivenio/aquarium 5.1.0 → 5.2.0

package/dist/system.mjs

@@ -4468,7 +4468,7 @@ var inputContainerClasses = tv({
   variants: {
     variant: {
       default: "border px-3 py-[6px] border-default hover:border-intense bg-transparent",
-      disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-default",
+      disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-medium",
       error: "border px-3 py-[6px] border-danger-default bg-transparent",
       focused: "border px-3 py-[6px] border-info-default bg-transparent",
       readOnly: "cursor-default border-default bg-transparent"
@@ -4476,7 +4476,7 @@ var inputContainerClasses = tv({
   }
 });
 var inputClasses = tv({
-  base: "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+  base: "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-medium placeholder:text-inactive",
   variants: {
     disabled: {
       true: "text-inactive",
@@ -5412,7 +5412,9 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-primary-100)",
       muted: "var(--aquarium-background-color-primary-muted)",
       default: "var(--aquarium-background-color-primary-default)",
+      graphic: "var(--aquarium-background-color-primary-graphic)",
       intense: "var(--aquarium-background-color-primary-intense)",
+      inverse: "var(--aquarium-background-color-primary-inverse)",
       active: "var(--aquarium-background-color-primary-active)",
       hover: "var(--aquarium-background-color-primary-hover)"
     },
@@ -5424,6 +5426,7 @@ var tailwind_theme_default = {
     "popover-content": "var(--aquarium-background-color-popover-content)",
     muted: "var(--aquarium-background-color-muted)",
     default: "var(--aquarium-background-color-default)",
+    medium: "var(--aquarium-background-color-medium)",
     intense: "var(--aquarium-background-color-intense)",
     action: {
       "primary-button": {
@@ -5945,11 +5948,14 @@ var tokens_default = {
     "popover-content": "white",
     muted: "rgba(247,247,250,1)",
     default: "rgba(237,237,240,1)",
+    medium: "rgba(237,237,240,1)",
     intense: "rgba(210,210,214,1)",
     primary: {
       muted: "rgba(185,197,239,1)",
       default: "rgba(53,69,190,1)",
+      graphic: "rgba(53,69,190,1)",
       intense: "rgba(34,47,149,1)",
+      inverse: "rgba(34,47,149,1)",
       active: "rgba(243,246,255,1)",
       hover: "rgba(243,246,255,1)"
     },
@@ -6833,7 +6839,7 @@ import { tv as tv3 } from "tailwind-variants";
 import { clsx as clsx3 } from "clsx";
 import { tv as tv2 } from "tailwind-variants";
 var getCommonInputStyles = ({ readOnly, valid }) => clsx3(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-medium typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
     "px-3 py-3 bg-transparent": !readOnly,
     "border-none resize-none cursor-default bg-transparent": readOnly,
@@ -7911,7 +7917,7 @@ import React25 from "react";
 import { isNumber, isUndefined as isUndefined6 } from "lodash-es";
 import { tv as tv7 } from "tailwind-variants";
 var skeletonStyles = tv7({
-  base: "bg-default",
+  base: "bg-medium",
   variants: {
     hasHeight: {
       false: "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]"
@@ -8215,7 +8221,7 @@ var getStatusClassNames = (status = "neutral") => {
       return "text-success-intense bg-status-success";
     case "neutral":
     default:
-      return "text-default bg-default";
+      return "text-default bg-medium";
   }
 };
 var Chip2 = ({
@@ -8556,7 +8562,7 @@ var checkboxClasses = tv11({
       },
       false: {
         wrapper: "hover:border-intense peer-checked:border-primary-default",
-        input: "cursor-pointer checked:bg-primary-default",
+        input: "cursor-pointer checked:bg-primary-graphic",
         icon: "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default"
       }
     }
@@ -8585,7 +8591,7 @@ var Checkbox = React35.forwardRef(
 import React36 from "react";
 import { tv as tv12 } from "tailwind-variants";
 var radioButtonClasses = tv12({
-  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-default checked:shadow-bodyInset",
+  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-graphic checked:shadow-bodyInset",
   variants: {
     disabled: {
       true: "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent",
@@ -11228,7 +11234,7 @@ var dropdownMenuGroupStyles = tv17({
   slots: {
     base: [
       '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
-      "[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-default [&:not(:first-child)]:before:m-3"
+      "[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-medium [&:not(:first-child)]:before:m-3"
     ],
     title: "p-3 text-inactive uppercase cursor-default typography-caption"
   }
@@ -11338,7 +11344,7 @@ var fieldBorder = tv18({
       true: "border-danger-default"
     },
     isDisabled: {
-      true: "bg-default cursor-not-allowed text-inactive"
+      true: "bg-medium cursor-not-allowed text-inactive"
     }
   }
 });
@@ -12452,8 +12458,8 @@ var cellStyles = tv21({
   base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
     isSelected: {
-      false: "text-default hover:bg-default pressed:bg-intense",
-      true: "bg-primary-default invalid:bg-danger-default text-white"
+      false: "text-default hover:bg-medium pressed:bg-intense",
+      true: "bg-primary-graphic invalid:bg-danger-default text-white"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -15153,7 +15159,7 @@ import { tv as tv23 } from "tailwind-variants";
 var cellContainer = tv23({
   base: [
     "group w-8 h-8 typography-small outline outline-0 cursor-default",
-    "outside-month:hidden selected:bg-primary-default",
+    "outside-month:hidden selected:bg-primary-graphic",
     "invalid:selected:bg-danger-default",
     "selection-start:rounded-s-md selection-end:rounded-e-md"
   ]
@@ -15163,15 +15169,15 @@ var cell = tv23({
   base: "w-full h-full flex items-center justify-center rounded-md text-default",
   variants: {
     selectionState: {
-      none: "group-hover:bg-default group-pressed:bg-intense",
+      none: "group-hover:bg-medium group-pressed:bg-intense",
       middle: [
         "text-white",
-        "group-hover:bg-primary-default",
+        "group-hover:bg-primary-graphic",
         "group-invalid:group-hover:bg-danger-default",
-        "group-pressed:bg-primary-intense",
+        "group-pressed:bg-primary-inverse",
         "group-invalid:group-pressed:bg-danger-intense"
       ],
-      cap: "text-white bg-primary-default group-invalid:bg-danger-default"
+      cap: "text-white bg-primary-graphic group-invalid:bg-danger-default"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -15379,7 +15385,7 @@ var modalStyles = tv24({
         headerImage: "object-cover"
       },
       false: {
-        headerImage: "bg-default"
+        headerImage: "bg-medium"
       }
     }
   },
@@ -16210,7 +16216,7 @@ var FilterClearButton = ({ onClear }) => (
         }
         onClear();
       },
-      className: "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-default focus:bg-default outline-0 outline-none rounded-r-full"
+      className: "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-medium focus:bg-medium outline-0 outline-none rounded-r-full"
     },
     /* @__PURE__ */ React98.createElement(InlineIcon, { icon: import_cross7.default })
   )
@@ -16281,7 +16287,7 @@ var ListItem = ({ name, icon, active = false }) => {
       variant: active ? "small-strong" : "small",
       color: "default",
       htmlTag: "span",
-      className: `px-4 py-2 rounded-full ${active ? "bg-default" : "hover:bg-muted"}`
+      className: `px-4 py-2 rounded-full ${active ? "bg-medium" : "hover:bg-muted"}`
     },
     /* @__PURE__ */ React101.createElement("img", { src: icon, alt: "", className: "inline mr-4", height: 28, width: 28 }),
     name
@@ -16367,7 +16373,7 @@ var InputChip = React103.forwardRef(
           {
             "bg-status-danger": invalid,
             "bg-muted": !invalid && !disabled,
-            "bg-default": disabled
+            "bg-medium": disabled
           }
         )
       },
@@ -16865,7 +16871,7 @@ var NativeSelectBase = React106.forwardRef(
         className: clsx37(
           "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-inactive focus:outline-none",
           {
-            "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+            "px-3 py-3 bg-transparent disabled:border-default disabled:bg-medium disabled:text-inactive": !readOnly,
             "px-0 py-3 border-none bg-transparent": readOnly,
             "border border-danger-default": !valid && !readOnly,
             "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
@@ -16944,9 +16950,9 @@ var navigationClasses = tv26({
     sectionList: "flex flex-col",
     divider: "border-t-2 border-muted",
     itemContainer: "",
-    itemAnchor: "py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable",
+    itemAnchor: "py-3 px-6 hover:bg-medium cursor-pointer flex gap-4 items-center typography-small focusable",
     submenuContainer: "",
-    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full",
+    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-medium cursor-pointer typography-small focusable flex items-center w-full",
     submenuList: "flex flex-col",
     submenuItem: "pl-[56px]"
   },
@@ -17367,10 +17373,10 @@ var switchStyles = tv29({
   variants: {
     disabled: {
       true: {
-        input: "bg-default checked:opacity-50 checked:bg-primary-muted"
+        input: "bg-medium checked:opacity-50 checked:bg-primary-muted"
       },
       false: {
-        input: "bg-intense hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense",
+        input: "bg-intense hover:bg-intense checked:bg-primary-graphic hover:checked:bg-primary-inverse",
         thumb: "shadow-4dp"
       }
     }
@@ -17437,14 +17443,14 @@ import { clsx as clsx41 } from "clsx";
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "neutral":
-      return "bg-default";
+      return "bg-medium";
     case "danger":
       return "bg-danger-intense";
     case "success":
       return "bg-success-intense";
     case "primary":
     default:
-      return "bg-primary-default";
+      return "bg-primary-graphic";
   }
 };
 var TagLabel = ({ title, dense = false, variant, ...rest }) => /* @__PURE__ */ React119.createElement(
@@ -17922,7 +17928,7 @@ var Timeline = ({ className, ...rest }) => /* @__PURE__ */ React127.createElemen
 var Content2 = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("pb-6", className) });
 var Separator = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("flex items-center justify-center h-5 w-5", className) });
 var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("w-1 bg-default h-full justify-self-center", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("w-1 bg-medium h-full justify-self-center", className) });
 var Dot = ({ className, ...rest }) => /* @__PURE__ */ React127.createElement("div", { ...rest, className: clsx45("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;

package/dist/tailwind.theme.json

@@ -449,7 +449,9 @@
       "100": "var(--aquarium-colors-primary-100)",
       "muted": "var(--aquarium-background-color-primary-muted)",
       "default": "var(--aquarium-background-color-primary-default)",
+      "graphic": "var(--aquarium-background-color-primary-graphic)",
       "intense": "var(--aquarium-background-color-primary-intense)",
+      "inverse": "var(--aquarium-background-color-primary-inverse)",
       "active": "var(--aquarium-background-color-primary-active)",
       "hover": "var(--aquarium-background-color-primary-hover)"
     },
@@ -461,6 +463,7 @@
     "popover-content": "var(--aquarium-background-color-popover-content)",
     "muted": "var(--aquarium-background-color-muted)",
     "default": "var(--aquarium-background-color-default)",
+    "medium": "var(--aquarium-background-color-medium)",
     "intense": "var(--aquarium-background-color-intense)",
     "action": {
       "primary-button": {

package/dist/tokens.json

@@ -27,11 +27,14 @@
     "popover-content": "white",
     "muted": "rgba(247,247,250,1)",
     "default": "rgba(237,237,240,1)",
+    "medium": "rgba(237,237,240,1)",
     "intense": "rgba(210,210,214,1)",
     "primary": {
       "muted": "rgba(185,197,239,1)",
       "default": "rgba(53,69,190,1)",
+      "graphic": "rgba(53,69,190,1)",
       "intense": "rgba(34,47,149,1)",
+      "inverse": "rgba(34,47,149,1)",
       "active": "rgba(243,246,255,1)",
       "hover": "rgba(243,246,255,1)"
     },