@aivenio/aquarium 5.1.0 → 5.3.0

package/dist/_variables.scss

@@ -218,10 +218,13 @@ $background-color-overlay: $colors-white;
 $background-color-popover-content: $colors-white;
 $background-color-muted: $colors-grey-0;
 $background-color-default: $colors-grey-5;
+$background-color-medium: $colors-grey-5;
 $background-color-intense: $colors-grey-20;
 $background-color-primary-muted: $colors-primary-40;
 $background-color-primary-default: $colors-primary-80;
+$background-color-primary-graphic: $colors-primary-80;
 $background-color-primary-intense: $colors-primary-90;
+$background-color-primary-inverse: $colors-primary-90;
 $background-color-primary-active: $colors-primary-5;
 $background-color-primary-hover: $colors-primary-5;
 $background-color-action-primary-button-default: $colors-primary-80;
@@ -230,19 +233,23 @@ $background-color-action-primary-button-hover: $colors-primary-90;
 $background-color-action-primary-button-disabled: $colors-primary-40;
 $background-color-info-muted: $colors-info-10;
 $background-color-info-default: $colors-info-70;
+$background-color-info-graphic: $colors-info-70;
 $background-color-info-intense: $colors-info-90;
 $background-color-info-inverse: $colors-info-70;
 $background-color-success-muted: $colors-success-5;
 $background-color-success-default: $colors-success-70;
+$background-color-success-graphic: $colors-success-70;
 $background-color-success-intense: $colors-success-90;
 $background-color-success-inverse: $colors-success-70;
 $background-color-warning-muted: $colors-warning-5;
 $background-color-warning-default: $colors-warning-70;
+$background-color-warning-graphic: $colors-warning-70;
 $background-color-warning-intense: $colors-warning-90;
 $background-color-warning-inverse: $colors-warning-70;
 $background-color-danger-muted: $colors-error-10;
 $background-color-danger-default: $colors-error-20;
 $background-color-danger-intense: $colors-error-50;
+$background-color-danger-graphic: $colors-error-50;
 $background-color-danger-inverse: $colors-error-70;
 $background-color-status-announcement: $colors-primary-5;
 $background-color-status-info: $colors-info-10;
@@ -280,22 +287,27 @@ $text-color-opposite-default: $colors-white;
 $text-color-primary-inactive: $colors-primary-40;
 $text-color-primary-active: $colors-primary-90;
 $text-color-primary-muted: $colors-primary-60;
+$text-color-primary-graphic: $colors-primary-60;
 $text-color-primary-default: $colors-primary-70;
 $text-color-primary-intense: $colors-primary-80;
 $text-color-info-inactive: $colors-info-20;
 $text-color-info-muted: $colors-info-40;
+$text-color-info-graphic: $colors-info-40;
 $text-color-info-default: $colors-info-70;
 $text-color-info-intense: $colors-info-90;
 $text-color-success-inactive: $colors-success-10;
 $text-color-success-muted: $colors-success-30;
+$text-color-success-graphic: $colors-success-30;
 $text-color-success-default: $colors-success-70;
 $text-color-success-intense: $colors-success-90;
 $text-color-warning-inactive: $colors-warning-20;
 $text-color-warning-muted: $colors-warning-40;
+$text-color-warning-graphic: $colors-warning-40;
 $text-color-warning-default: $colors-warning-80;
 $text-color-warning-intense: $colors-warning-100;
 $text-color-danger-inactive: $colors-error-10;
 $text-color-danger-muted: $colors-error-20;
+$text-color-danger-graphic: $colors-error-20;
 $text-color-danger-default: $colors-error-50;
 $text-color-danger-intense: $colors-error-80;
 $box-shadow-24dp: $elevations-24dp;

package/dist/atoms.cjs

@@ -4901,7 +4901,7 @@ var import_warningSign = __toESM(require_warningSign());
 var import_clsx = require("clsx");
 var import_tailwind_variants = require("tailwind-variants");
 var getCommonInputStyles = ({ readOnly, valid }) => (0, import_clsx.clsx)(
-  "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,
@@ -5128,11 +5128,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)"
     },
@@ -5147,18 +5150,21 @@ var tokens_default = {
     info: {
       muted: "rgba(224,245,254,1)",
       default: "rgba(3,153,227,1)",
+      graphic: "rgba(3,153,227,1)",
       intense: "rgba(1,116,186,1)",
       inverse: "rgba(3,153,227,1)"
     },
     success: {
       muted: "rgba(236,247,237,1)",
       default: "rgba(0,179,0,1)",
+      graphic: "rgba(0,179,0,1)",
       intense: "rgba(0,142,0,1)",
       inverse: "rgba(0,179,0,1)"
     },
     warning: {
       muted: "rgba(255,248,234,1)",
       default: "rgba(255,179,0,1)",
+      graphic: "rgba(255,179,0,1)",
       intense: "rgba(255,144,3,1)",
       inverse: "rgba(255,179,0,1)"
     },
@@ -5166,6 +5172,7 @@ var tokens_default = {
       muted: "rgba(255,203,210,1)",
       default: "rgba(255,173,179,1)",
       intense: "rgba(230,39,40,1)",
+      graphic: "rgba(230,39,40,1)",
       inverse: "rgba(216,0,5,1)"
     },
     status: {
@@ -5389,30 +5396,35 @@ var tokens_default = {
       inactive: "rgba(185,197,239,1)",
       active: "rgba(34,47,149,1)",
       muted: "rgba(129,142,236,1)",
+      graphic: "rgba(129,142,236,1)",
       default: "rgba(88,101,205,1)",
       intense: "rgba(53,69,190,1)"
     },
     info: {
       inactive: "rgba(180,229,251,1)",
       muted: "rgba(76,194,247,1)",
+      graphic: "rgba(76,194,247,1)",
       default: "rgba(3,153,227,1)",
       intense: "rgba(1,116,186,1)"
     },
     success: {
       inactive: "rgba(203,255,201,1)",
       muted: "rgba(137,235,128,1)",
+      graphic: "rgba(137,235,128,1)",
       default: "rgba(0,179,0,1)",
       intense: "rgba(0,142,0,1)"
     },
     warning: {
       inactive: "rgba(254,235,178,1)",
       muted: "rgba(253,212,77,1)",
+      graphic: "rgba(253,212,77,1)",
       default: "rgba(253,159,0,1)",
       intense: "rgba(254,109,0,1)"
     },
     danger: {
       inactive: "rgba(255,203,210,1)",
       muted: "rgba(255,173,179,1)",
+      graphic: "rgba(255,173,179,1)",
       default: "rgba(230,39,40,1)",
       intense: "rgba(197,0,1,1)"
     }
@@ -6037,6 +6049,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-warning-100)",
       muted: "var(--aquarium-background-color-warning-muted)",
       default: "var(--aquarium-background-color-warning-default)",
+      graphic: "var(--aquarium-background-color-warning-graphic)",
       intense: "var(--aquarium-background-color-warning-intense)",
       inverse: "var(--aquarium-background-color-warning-inverse)"
     },
@@ -6055,6 +6068,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-background-color-success-muted)",
       default: "var(--aquarium-background-color-success-default)",
+      graphic: "var(--aquarium-background-color-success-graphic)",
       intense: "var(--aquarium-background-color-success-intense)",
       inverse: "var(--aquarium-background-color-success-inverse)"
     },
@@ -6073,6 +6087,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-info-100)",
       muted: "var(--aquarium-background-color-info-muted)",
       default: "var(--aquarium-background-color-info-default)",
+      graphic: "var(--aquarium-background-color-info-graphic)",
       intense: "var(--aquarium-background-color-info-intense)",
       inverse: "var(--aquarium-background-color-info-inverse)"
     },
@@ -6119,7 +6134,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)"
     },
@@ -6131,6 +6148,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": {
@@ -6144,6 +6162,7 @@ var tailwind_theme_default = {
       muted: "var(--aquarium-background-color-danger-muted)",
       default: "var(--aquarium-background-color-danger-default)",
       intense: "var(--aquarium-background-color-danger-intense)",
+      graphic: "var(--aquarium-background-color-danger-graphic)",
       inverse: "var(--aquarium-background-color-danger-inverse)"
     },
     status: {
@@ -6191,6 +6210,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-warning-100)",
       inactive: "var(--aquarium-text-color-warning-inactive)",
       muted: "var(--aquarium-text-color-warning-muted)",
+      graphic: "var(--aquarium-text-color-warning-graphic)",
       default: "var(--aquarium-text-color-warning-default)",
       intense: "var(--aquarium-text-color-warning-intense)"
     },
@@ -6209,6 +6229,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       inactive: "var(--aquarium-text-color-success-inactive)",
       muted: "var(--aquarium-text-color-success-muted)",
+      graphic: "var(--aquarium-text-color-success-graphic)",
       default: "var(--aquarium-text-color-success-default)",
       intense: "var(--aquarium-text-color-success-intense)"
     },
@@ -6227,6 +6248,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-info-100)",
       inactive: "var(--aquarium-text-color-info-inactive)",
       muted: "var(--aquarium-text-color-info-muted)",
+      graphic: "var(--aquarium-text-color-info-graphic)",
       default: "var(--aquarium-text-color-info-default)",
       intense: "var(--aquarium-text-color-info-intense)"
     },
@@ -6274,6 +6296,7 @@ var tailwind_theme_default = {
       inactive: "var(--aquarium-text-color-primary-inactive)",
       active: "var(--aquarium-text-color-primary-active)",
       muted: "var(--aquarium-text-color-primary-muted)",
+      graphic: "var(--aquarium-text-color-primary-graphic)",
       default: "var(--aquarium-text-color-primary-default)",
       intense: "var(--aquarium-text-color-primary-intense)"
     },
@@ -6285,6 +6308,7 @@ var tailwind_theme_default = {
     danger: {
       inactive: "var(--aquarium-text-color-danger-inactive)",
       muted: "var(--aquarium-text-color-danger-muted)",
+      graphic: "var(--aquarium-text-color-danger-graphic)",
       default: "var(--aquarium-text-color-danger-default)",
       intense: "var(--aquarium-text-color-danger-intense)"
     }
@@ -6842,11 +6866,11 @@ var toastStyles = (0, import_tailwind_variants3.tv)({
       default: {
         base: "bg-inverse text-opposite-default",
         dismiss: "[&>button]:text-muted",
-        action: "[&>*]:text-primary-inactive hover:[&>*]:text-primary-muted"
+        action: "[&>*]:text-primary-inactive hover:[&>*]:text-primary-graphic"
       },
       danger: {
-        base: "bg-danger-intense text-white",
-        dismiss: "[&>button]:text-danger-muted",
+        base: "bg-danger-graphic text-white",
+        dismiss: "[&>button]:text-danger-graphic",
         action: "[&>*]:text-white hover:[&>*]:text-white"
       }
     },
@@ -6908,7 +6932,7 @@ var inputContainerClasses = (0, import_tailwind_variants4.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"
@@ -6916,7 +6940,7 @@ var inputContainerClasses = (0, import_tailwind_variants4.tv)({
   }
 });
 var inputClasses = (0, import_tailwind_variants4.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",
@@ -7404,7 +7428,7 @@ var import_react24 = __toESM(require("react"));
 var import_lodash_es6 = require("lodash-es");
 var import_tailwind_variants6 = require("tailwind-variants");
 var skeletonStyles = (0, import_tailwind_variants6.tv)({
-  base: "bg-default",
+  base: "bg-medium",
   variants: {
     hasHeight: {
       false: "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]"
@@ -7501,7 +7525,7 @@ var createBadge = (type, displayName) => {
   return Component;
 };
 var NotificationBadge = ({ children, top = "-2px", right = "-2px", ...props }) => {
-  return /* @__PURE__ */ import_react26.default.createElement("div", { ...props, className: "Aquarium-Badge.Notification relative inline-flex text-default" }, children, /* @__PURE__ */ import_react26.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-intense" }));
+  return /* @__PURE__ */ import_react26.default.createElement("div", { ...props, className: "Aquarium-Badge.Notification relative inline-flex text-default" }, children, /* @__PURE__ */ import_react26.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
 };
 var DotBadge = ({ dense = false, ...props }) => {
   return /* @__PURE__ */ import_react26.default.createElement(
@@ -7707,7 +7731,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 = ({
@@ -8048,7 +8072,7 @@ var checkboxClasses = (0, import_tailwind_variants10.tv)({
       },
       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"
       }
     }
@@ -8077,7 +8101,7 @@ var Checkbox = import_react35.default.forwardRef(
 var import_react36 = __toESM(require("react"));
 var import_tailwind_variants11 = require("tailwind-variants");
 var radioButtonClasses = (0, import_tailwind_variants11.tv)({
-  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",
@@ -10528,7 +10552,7 @@ var dropdownMenuGroupStyles = (0, import_tailwind_variants16.tv)({
   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"
   }
@@ -10634,7 +10658,7 @@ var fieldBorder = (0, import_tailwind_variants17.tv)({
       true: "border-danger-default"
     },
     isDisabled: {
-      true: "bg-default cursor-not-allowed text-inactive"
+      true: "bg-medium cursor-not-allowed text-inactive"
     }
   }
 });
@@ -11732,8 +11756,8 @@ var cellStyles = (0, import_tailwind_variants20.tv)({
   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"
@@ -14419,7 +14443,7 @@ var import_tailwind_variants22 = require("tailwind-variants");
 var cellContainer = (0, import_tailwind_variants22.tv)({
   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"
   ]
@@ -14429,15 +14453,15 @@ var cell = (0, import_tailwind_variants22.tv)({
   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-invalid:group-pressed:bg-danger-intense"
+        "group-pressed:bg-primary-inverse",
+        "group-invalid:group-pressed:bg-danger-graphic"
       ],
-      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"
@@ -14645,7 +14669,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
         headerImage: "object-cover"
       },
       false: {
-        headerImage: "bg-default"
+        headerImage: "bg-medium"
       }
     }
   },
@@ -15296,7 +15320,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__ */ import_react100.default.createElement(InlineIcon2, { icon: import_cross6.default })
   )
@@ -15354,7 +15378,7 @@ var InputChip = import_react105.default.forwardRef(
           {
             "bg-status-danger": invalid,
             "bg-muted": !invalid && !disabled,
-            "bg-default": disabled
+            "bg-medium": disabled
           }
         )
       },
@@ -15852,7 +15876,7 @@ var NativeSelectBase = import_react108.default.forwardRef(
         className: (0, import_clsx36.clsx)(
           "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
@@ -15931,9 +15955,9 @@ var navigationClasses = (0, import_tailwind_variants25.tv)({
     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]"
   },
@@ -16174,10 +16198,10 @@ var progressBarIndicatorClasses = (0, import_tailwind_variants27.tv)({
   base: "h-2 rounded-full transition-all ease-in-out delay-150",
   variants: {
     status: {
-      info: "bg-info-default",
-      warning: "bg-warning-default",
-      success: "bg-success-default",
-      error: "bg-danger-intense"
+      info: "bg-info-graphic",
+      warning: "bg-warning-graphic",
+      success: "bg-success-graphic",
+      error: "bg-danger-graphic"
     }
   }
 });
@@ -16341,15 +16365,15 @@ var switchStyles = (0, import_tailwind_variants28.tv)({
   slots: {
     wrapper: "relative inline-flex justify-center items-center self-center group",
     input: "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300 outline-none focusable cursor-pointer disabled:cursor-not-allowed",
-    thumb: "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-inactive peer-checked/switch:text-primary-muted"
+    thumb: "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-inactive peer-checked/switch:text-primary-graphic"
   },
   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"
       }
     }
@@ -16489,7 +16513,7 @@ var connectorStyles = (0, import_tailwind_variants30.tv)({
   },
   variants: {
     completed: {
-      true: { connector: "bg-success-default" },
+      true: { connector: "bg-success-graphic" },
       false: { connector: "bg-intense" }
     },
     dense: {
@@ -16538,7 +16562,7 @@ var stepStyles = (0, import_tailwind_variants30.tv)({
       slots: ["indicator"],
       dense: false,
       state: "completed",
-      class: "border-2 text-white bg-success-default border-success-intense"
+      class: "border-2 text-white bg-success-graphic border-success-intense"
     },
     // Dense variants
     {
@@ -16721,7 +16745,7 @@ var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.defau
 var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("pb-6", className) });
 var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("flex items-center justify-center h-5 w-5", className) });
 var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("w-1 bg-default h-full justify-self-center", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("w-1 bg-medium h-full justify-self-center", className) });
 var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx44.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;