@keboola/design 4.3.0 → 4.3.2

package/dist/index.js

@@ -1402,7 +1402,7 @@ var variants = cva(
     "tw-tracking-[1px]",
     "tw-uppercase",
     // border
-    "tw-rounded",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     "tw-border",
     "tw-border-transparent",
     // styling
@@ -1556,7 +1556,7 @@ var argoVariants = cva(
     // border
     "tw-border",
     "tw-border-transparent",
-    "tw-rounded-lg",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     // text
     "tw-font-medium",
     "tw-select-none",
@@ -1618,6 +1618,9 @@ var argoVariants = cva(
         outline: [
           "!tw-border-input",
           "tw-bg-background",
+          // Semantic base text color so the label/icon flips in dark mode
+          // (matches `invisible`); previously unset → inherited a fixed dark color.
+          "tw-text-foreground",
           "hover:not-disabled:tw-bg-accent",
           "hover:not-disabled:tw-text-accent-foreground",
           "hover:active:tw-bg-background",
@@ -2276,7 +2279,10 @@ var DropdownMenuRadioItem = ({
         "data-[state=checked]:tw-cursor-default",
         {
           "data-[state=checked]:tw-bg-neutral-100": indicator === "none",
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-sky-100": indicator === "check"
+          // Semantic brand tint (flips under `[data-theme='dark']`) instead of a
+          // hardcoded `tw-bg-sky-100`, which stayed light in dark mode and left the
+          // checked item's text near-invisible.
+          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary/10": indicator === "check"
         },
         className
       ),
@@ -2866,10 +2872,10 @@ var AlertModalIcon = ({ variant, icon }) => {
           "div",
           {
             className: cn("tw-relative", "tw-rounded-full", "tw-size-12", {
-              "tw-bg-secondary-500": variant === "info",
+              "tw-bg-blue-500": variant === "info",
               "tw-bg-warning-500": variant === "warning",
               "tw-bg-error-500": variant === "danger",
-              "tw-bg-primary-500": variant === "success"
+              "tw-bg-green-500": variant === "success"
             }),
             children: /* @__PURE__ */ jsx(
               "span",
@@ -2909,10 +2915,10 @@ var AlertModalIcon = ({ variant, icon }) => {
           "tw-size-8",
           '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           {
-            "tw-bg-secondary-100 tw-text-secondary-600": variant === "info",
+            "tw-bg-blue-100 tw-text-blue-600": variant === "info",
             "tw-bg-warning-100 tw-text-warning-500": variant === "warning",
             "tw-bg-error-100 tw-text-error-500": variant === "danger",
-            "tw-bg-primary-100 tw-text-primary-900": variant === "success"
+            "tw-bg-green-100 tw-text-green-900": variant === "success"
           }
         ),
         children: glyph
@@ -3407,8 +3413,8 @@ var ModalIcon = (props) => {
         {
           className: cn("tw-relative", "tw-rounded-full", "tw-size-12", {
             "tw-bg-warning-500": props.color === "orange",
-            "tw-bg-secondary-500": props.color === "blue",
-            "tw-bg-primary-500": props.color === "green",
+            "tw-bg-blue-500": props.color === "blue",
+            "tw-bg-green-500": props.color === "green",
             "tw-bg-error-500": props.color === "red",
             "tw-bg-neutral-150": props.color === "gray",
             "tw-bg-purple-100": props.color === "violet"
@@ -8695,7 +8701,7 @@ var inputGroupVariants = cva(
     "tw-flex",
     "tw-items-center",
     // base
-    "tw-rounded",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     "tw-border",
     "tw-border-solid",
     "tw-border-neutral-200",
@@ -8816,7 +8822,6 @@ var inputGroupVariants = cva(
           // muted filled input surface — gray, distinct from white containers; not the app-background token
           "tw-bg-muted",
           "tw-border-input",
-          "tw-rounded-lg",
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
@@ -9322,198 +9327,6 @@ var TextInput = ({
     }
   );
 };
-var TimePickerButton = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  "button",
-  {
-    ...rest,
-    ref,
-    type: "button",
-    className: cn(
-      "tailwindcss-preflight",
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "tw-size-10",
-      "tw-rounded",
-      "tw-transition-colors",
-      "tw-select-none",
-      "hover:tw-bg-accent",
-      "focus-visible:tw-outline",
-      "focus-visible:tw-outline-2",
-      "focus-visible:tw-outline-primary",
-      "aria-selected:tw-bg-primary",
-      "aria-selected:tw-text-primary-foreground",
-      className
-    ),
-    children
-  }
-);
-
-// src/components/TimePicker/utils.ts
-var pad = (n) => n.toString().padStart(2, "0");
-var parseTime = (time) => {
-  if (!time) return { hour: null, minute: null };
-  const match2 = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
-  if (!match2) return { hour: null, minute: null };
-  const hour = Number(match2[1]);
-  const minute = Number(match2[2]);
-  if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59)
-    return { hour: null, minute: null };
-  return { hour, minute };
-};
-var scrollToSelected = (viewport) => {
-  if (!viewport) return;
-  requestAnimationFrame(() => {
-    const selected = viewport.querySelector('[aria-selected="true"]');
-    selected?.scrollIntoView({ block: "center" });
-  });
-};
-var HOURS = Array.from({ length: 24 }, (_, i) => i);
-var MINUTES = Array.from({ length: 60 }, (_, i) => i);
-var TimePicker = ({
-  align = "end",
-  alignOffset = -18,
-  children,
-  defaultOpen,
-  defaultSelected,
-  onOpenChange,
-  onSelect,
-  open,
-  selected,
-  sideOffset = 12
-}) => {
-  const [internalSelected, setInternalSelected] = useState(defaultSelected ?? null);
-  const isControlled = selected !== void 0;
-  const currentValue = isControlled ? selected : internalSelected;
-  const parsed = parseTime(currentValue);
-  const hour = parsed.hour ?? null;
-  const minute = parsed.minute ?? null;
-  const handleSelect = (time) => {
-    if (!isControlled) {
-      setInternalSelected(time);
-    }
-    onSelect?.(time);
-  };
-  const handleHourSelect = (h) => {
-    const m = minute ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-  const handleMinuteSelect = (m) => {
-    const h = hour ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-  return /* @__PURE__ */ jsxs(Popover, { defaultOpen, onOpenChange, open, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs(
-      Popover.Content,
-      {
-        align,
-        alignOffset,
-        sideOffset,
-        className: "tw-flex tw-flex-row",
-        children: [
-          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: HOURS.map((value) => /* @__PURE__ */ jsx(
-            TimePickerButton,
-            {
-              onClick: () => handleHourSelect(value),
-              "aria-selected": value === hour,
-              children: pad(value)
-            },
-            value
-          )) }),
-          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: MINUTES.map((value) => /* @__PURE__ */ jsx(
-            TimePickerButton,
-            {
-              onClick: () => handleMinuteSelect(value),
-              "aria-selected": value === minute,
-              children: pad(value)
-            },
-            value
-          )) })
-        ]
-      }
-    )
-  ] });
-};
-var TimeInput = ({
-  ref,
-  defaultValue,
-  disabled,
-  onBlur,
-  onChange,
-  onValueBlur,
-  onValueChange,
-  placeholder = "Select time",
-  readOnly,
-  value,
-  variant,
-  className,
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
-  const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : internalValue;
-  const handleChange = (event) => {
-    const newValue = event.target.value || null;
-    onChange?.(event);
-    onValueChange?.(newValue);
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-  const handleBlur = (event) => {
-    const newValue = event.target.value || null;
-    onBlur?.(event);
-    onValueBlur?.(newValue);
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-  const handleTimePickerSelect = (time) => {
-    if (!isControlled) setInternalValue(time);
-    onValueChange?.(time);
-  };
-  const handleClear = () => {
-    if (!isControlled) setInternalValue(null);
-    onValueChange?.(null);
-  };
-  const handleOpenChange = (open) => {
-    setIsOpen(open);
-  };
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ...props,
-      ref,
-      type: "time",
-      disabled,
-      readOnly,
-      placeholder,
-      className: cn("[&_input::-webkit-calendar-picker-indicator]:tw-hidden", className),
-      value: currentValue,
-      variant,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      onClear: currentValue ? handleClear : void 0,
-      rightSuffix: !disabled && !readOnly ? /* @__PURE__ */ jsx(
-        TimePicker,
-        {
-          open: isOpen,
-          onOpenChange: handleOpenChange,
-          onSelect: handleTimePickerSelect,
-          selected: currentValue,
-          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Time", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsx(icons_exports.Clock, { className: "tw-size-4" }) })
-        }
-      ) : void 0
-    }
-  );
-};
 var CommandInput = ({
   ref,
   className,
@@ -9772,6 +9585,97 @@ var DateRangePicker = ({
   ] }) })
 ] });
 DateRangePicker.displayName = "DateRangePicker";
+
+// src/components/TimePicker/utils.ts
+var pad = (n) => n.toString().padStart(2, "0");
+var parseTime = (time) => {
+  if (!time) return { hour: null, minute: null };
+  const match2 = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
+  if (!match2) return { hour: null, minute: null };
+  const hour = Number(match2[1]);
+  const minute = Number(match2[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59)
+    return { hour: null, minute: null };
+  return { hour, minute };
+};
+var scrollToSelected = (viewport) => {
+  if (!viewport) return;
+  requestAnimationFrame(() => {
+    const selected = viewport.querySelector('[aria-pressed="true"]');
+    selected?.scrollIntoView({ block: "center" });
+  });
+};
+var HOURS = Array.from({ length: 24 }, (_, i) => i);
+var MINUTES = Array.from({ length: 60 }, (_, i) => i);
+var TimePicker = ({
+  align = "end",
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  defaultSelected,
+  onOpenChange,
+  onSelect,
+  open,
+  selected,
+  sideOffset = 12
+}) => {
+  const [internalSelected, setInternalSelected] = useState(defaultSelected ?? null);
+  const isControlled = selected !== void 0;
+  const currentValue = isControlled ? selected : internalSelected;
+  const parsed = parseTime(currentValue);
+  const hour = parsed.hour ?? null;
+  const minute = parsed.minute ?? null;
+  const handleSelect = (time) => {
+    if (!isControlled) {
+      setInternalSelected(time);
+    }
+    onSelect?.(time);
+  };
+  const handleHourSelect = (h) => {
+    const m = minute ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+  const handleMinuteSelect = (m) => {
+    const h = hour ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { defaultOpen, onOpenChange, open, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align,
+        alignOffset,
+        sideOffset,
+        className: "tw-flex tw-flex-row",
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-p-3", children: HOURS.map((value) => /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw-size-10 tw-p-0",
+              pressed: value === hour,
+              onPressedChange: () => handleHourSelect(value),
+              children: pad(value)
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-p-3", children: MINUTES.map((value) => /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw-size-10 tw-p-0",
+              pressed: value === minute,
+              onPressedChange: () => handleMinuteSelect(value),
+              children: pad(value)
+            },
+            value
+          )) })
+        ]
+      }
+    )
+  ] });
+};
 var Optional = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsx(
@@ -11093,10 +10997,10 @@ var variants4 = cva(
         ]
       },
       sizing: {
-        // border-inclusive heights: 40 / 36 / 34 px
+        // border-inclusive heights: 40 / 36 / 32 px (small matches Button small)
         default: ["tw-px-4", "tw-py-2.5", "tw-text-sm/[18px]", "tw-h-10", "tw-min-h-10"],
         medium: ["tw-px-4", "tw-py-2", "tw-text-sm/[18px]", "tw-h-9", "tw-min-h-9"],
-        small: ["tw-px-4", "tw-py-2", "tw-text-sm/[16px]", "tw-h-[34px]", "tw-min-h-[34px]"]
+        small: ["tw-px-4", "tw-py-2", "tw-text-sm/[16px]", "tw-h-8", "tw-min-h-8"]
       },
       state: {
         default: [
@@ -11316,7 +11220,7 @@ function Checkbox({
     description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })
   ] });
   if (!tooltip) return rendered;
-  return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: true, children: rendered });
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: !!children, children: rendered });
 }
 var addonVariants2 = cva(
   [
@@ -12395,7 +12299,7 @@ var AutoSaveTextarea = ({
                   " Saving"
                 ] }),
                 !isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  /* @__PURE__ */ jsx(icons_exports.CircleCheck, { className: "tw-size-4 tw-text-primary-500" }),
+                  /* @__PURE__ */ jsx(icons_exports.CircleCheck, { className: "tw-size-4 tw-text-green-500" }),
                   " Saved"
                 ] })
               ] })
@@ -12819,6 +12723,107 @@ var PasswordInput = ({
     }
   );
 };
+var TimeInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  allowClear = false,
+  // input props
+  disabled,
+  readOnly,
+  placeholder = "Select time",
+  ...restInputProps
+}) => {
+  const inputRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp ?? null : internalValue;
+  const setValue = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const canClear = allowClear && !!value && !disabled && !readOnly;
+  const showPicker2 = !disabled && !readOnly;
+  const handleChange = (event) => {
+    setValue(event.target.value || null);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    const newValue = event.target.value || null;
+    if (!isControlled) setInternalValue(newValue);
+    onValueBlur?.(newValue);
+    onBlur?.(event);
+  };
+  const handleTimePickerSelect = (time) => {
+    setValue(time);
+  };
+  const handleClear = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setValue(null);
+    onChange?.(createChangeInputEvent(inputRef.current));
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...restInputProps,
+            ref: mergeRefs(ref ?? null, inputRef),
+            type: "time",
+            className: "[&::-webkit-calendar-picker-indicator]:tw-hidden [&::-webkit-datetime-edit-fields-wrapper]:tw-py-0",
+            value: value ?? "",
+            placeholder,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            disabled,
+            readOnly
+          }
+        ),
+        (canClear || showPicker2) && /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          canClear && /* @__PURE__ */ jsx(
+            InputGroup.Button,
+            {
+              "aria-label": "Clear time",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(icons_exports.X, { className: "tw-size-4" })
+            }
+          ),
+          showPicker2 && /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              open: isOpen,
+              onOpenChange: setIsOpen,
+              onSelect: handleTimePickerSelect,
+              selected: value,
+              children: /* @__PURE__ */ jsx(InputGroup.Button, { "aria-label": "Select time", children: /* @__PURE__ */ jsx(icons_exports.Clock, { className: "tw-size-4" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var InputOtpVariantContext = createContext({
   sizing: "md",
   state: "default"
@@ -16163,7 +16168,7 @@ var ThinkingIndicator = ({ label = "Thinking..." }) => {
 // src/blocks/AIKit/usageStatsHelpers.ts
 var clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 var UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
-  const radius = Math.max(0, (size - strokeWidth) / 2);
+  const radius = Math.max(0, (size - strokeWidth) / 2 - 1);
   const circumference = 2 * Math.PI * radius;
   const offset = circumference * (1 - clampPercentage(value) / 100);
   return /* @__PURE__ */ jsxs(
@@ -16291,10 +16296,10 @@ var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, { placemen
       "tw-size-5",
       "tw-text-neutral-400",
       "group-data-[state=open]/alert:tw-rotate-180",
-      "group-data-[variant=info]/alert:group-hover:tw-text-secondary-600",
+      "group-data-[variant=info]/alert:group-hover:tw-text-blue-600",
       "group-data-[variant=warning]/alert:group-hover:tw-text-warning-600",
       "group-data-[variant=error]/alert:group-hover:tw-text-error-600",
-      "group-data-[variant=success]/alert:group-hover:tw-text-primary-600"
+      "group-data-[variant=success]/alert:group-hover:tw-text-green-600"
     )
   }
 ) });
@@ -16342,10 +16347,10 @@ var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsx(
       "tw-self-start",
       "tw-p-0.5",
       '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      "group-data-[variant=info]/alert:tw-text-secondary-500",
+      "group-data-[variant=info]/alert:tw-text-blue-500",
       "group-data-[variant=warning]/alert:tw-text-warning-500",
       "group-data-[variant=error]/alert:tw-text-error-500",
-      "group-data-[variant=success]/alert:tw-text-primary-500",
+      "group-data-[variant=success]/alert:tw-text-green-500",
       className
     ),
     children: icon ?? VARIANT_ICONS2[variant]
@@ -16384,19 +16389,18 @@ var AlertRoot = ({
         "tw-text-left",
         "tw-p-4",
         // border
-        "tw-rounded",
-        "data-[argo=true]:tw-rounded-lg",
+        "tw-rounded-[var(--radius-lg,0.25rem)]",
         "tw-border",
         "tw-border-solid",
         // border variants
-        "data-[variant=info]:tw-bg-secondary-100",
-        "data-[variant=info]:tw-border-secondary-200",
+        "data-[variant=info]:tw-bg-blue-100",
+        "data-[variant=info]:tw-border-blue-200",
         "data-[variant=warning]:tw-bg-warning-100",
         "data-[variant=warning]:tw-border-warning-300",
         "data-[variant=error]:tw-bg-error-100",
         "data-[variant=error]:tw-border-error-200",
-        "data-[variant=success]:tw-bg-primary-100",
-        "data-[variant=success]:tw-border-primary-200",
+        "data-[variant=success]:tw-bg-green-100",
+        "data-[variant=success]:tw-border-green-200",
         className
       ),
       children
@@ -16656,8 +16660,8 @@ var variants6 = cva(
       variant: {
         default: "tw-border tw-border-border tw-bg-popover",
         error: "tw-bg-error-550",
-        info: "tw-bg-secondary-600",
-        success: "tw-bg-primary-700",
+        info: "tw-bg-blue-600",
+        success: "tw-bg-green-700",
         warning: "tw-bg-warning-550"
       }
     }
@@ -17466,7 +17470,7 @@ var ThemeProvider = ({
   }, [brand, resolvedMode]);
   return /* @__PURE__ */ jsxs(ThemeContext, { value: { brand, setBrand, colorScheme, resolvedMode }, children: [
     isRoot && /* @__PURE__ */ jsx(AIGradientsSvg, {}),
-    children
+    isRoot ? /* @__PURE__ */ jsx(TooltipProvider, { children }) : children
   ] });
 };
 var useTheme = () => {
@@ -20340,7 +20344,9 @@ var Table = ({
         "table",
         {
           className: cn(
-            "tw-w-full tw-caption-bottom tw-text-sm",
+            // `tw-text-foreground` (a semantic token) so header + cell text flips
+            // under `[data-theme='dark']` instead of inheriting a fixed dark color.
+            "tw-w-full tw-caption-bottom tw-text-sm tw-text-foreground",
             borderCollapsed ? "tw-border-collapse" : "tw-border-separate tw-border-spacing-y-1",
             className
           ),
@@ -21112,7 +21118,7 @@ var PaneHeader = ({ label, sublabel }) => /* @__PURE__ */ jsxs("div", { children
 var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) => {
   const hasConflicts = remainingConflicts > 0;
   const allDone = !hasConflicts && remainingSafeChanges === 0;
-  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-primary-500" : "tw-text-muted-foreground";
+  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-green-500" : "tw-text-muted-foreground";
   const parts = [];
   if (hasConflicts) {
     parts.push(`${remainingConflicts} conflict${remainingConflicts !== 1 ? "s" : ""}`);