@gamecp/ui 0.1.19 → 0.1.21

package/dist/index.mjs

@@ -8,28 +8,27 @@ import { Tooltip } from 'react-tooltip';
 
 // src/Badge.tsx
 var badgeVariants = {
-  default: "bg-gray-100 text-foreground border-border",
+  default: "bg-muted text-foreground border-border",
   primary: "bg-primary-100 text-primary-800 border-primary-200",
-  secondary: "bg-gray-100 text-foreground border-border",
+  secondary: "bg-muted text-foreground border-border",
   success: "bg-success text-success-dark border-success-light",
-  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  error: "bg-red-100 text-red-800 border-red-200",
+  warning: "bg-amber/20 text-yellow-800 border-amber/30",
+  error: "bg-danger/20 text-danger border-danger/30",
   info: "bg-muted text-muted-foreground border-ring",
-  gray: "bg-gray-100 text-foreground border-border",
+  gray: "bg-muted text-foreground border-border",
   purple: "bg-purple-100 text-purple-800 border-purple-200",
-  pink: "bg-pink-100 text-pink-800 border-pink-200",
-  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
-  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  orange: "bg-orange-100 text-orange-800 border-orange-200",
+  pink: "bg-pink/20 text-pink border-pink-200",
+  indigo: "bg-indigo/20 text-indigo border-indigo-200",
+  orange: "bg-orange/20 text-orange-800 border-orange/30",
   teal: "bg-teal-100 text-teal-800 border-teal-200",
-  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
+  cyan: "bg-cyan/20 text-cyan-800 border-cyan-200",
   lime: "bg-lime-100 text-lime-800 border-lime-200",
-  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  emerald: "bg-emerald/20 text-emerald-800 border-emerald-200",
   rose: "bg-rose-100 text-rose-800 border-rose-200",
   sky: "bg-sky-100 text-sky-800 border-sky-200",
   violet: "bg-violet-100 text-violet-800 border-violet-200",
   fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
-  amber: "bg-amber-100 text-amber-800 border-amber-200"
+  amber: "bg-amber/20 text-amber-800 border-amber/30"
 };
 var badgeSizes = {
   sm: "px-2 py-0.5 text-xs",
@@ -64,7 +63,7 @@ var variantClasses = {
   primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
   destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent",
-  danger: "bg-red-600 text-white hover:bg-red-700 border-transparent",
+  danger: "bg-danger text-white hover:bg-danger border-transparent",
   ghost: "bg-transparent hover:bg-muted hover:text-foreground border-transparent",
   link: "bg-transparent text-primary underline-offset-4 hover:underline border-transparent p-0",
   outline: "bg-transparent border-border hover:bg-muted hover:text-foreground"
@@ -184,13 +183,13 @@ var paddingClasses = {
 };
 var borderAccentClasses = {
   none: "",
-  green: "border-l-4 border-l-green-500",
-  blue: "border-l-4 border-l-ring",
-  red: "border-l-4 border-l-red-500",
-  yellow: "border-l-4 border-l-yellow-500",
-  purple: "border-l-4 border-l-purple-500",
-  orange: "border-l-4 border-l-orange-500",
-  gray: "border-l-4 border-l-gray-500"
+  success: "border-l-4 border-l-success",
+  info: "border-l-4 border-l-info",
+  danger: "border-l-4 border-l-danger",
+  amber: "border-l-4 border-l-amber",
+  purple: "border-l-4 border-l-purple",
+  orange: "border-l-4 border-l-orange",
+  gray: "border-l-4 border-l-gray"
 };
 var variantClasses2 = {
   default: "card",
@@ -199,15 +198,15 @@ var variantClasses2 = {
   filled: "bg-muted rounded-lg border border-border"
 };
 var iconColorClasses = {
-  green: "text-success",
-  blue: "text-primary",
-  red: "text-destructive",
-  yellow: "text-yellow-600",
-  purple: "text-purple-600",
-  orange: "text-orange-600",
+  success: "text-success",
+  info: "text-info",
+  danger: "text-danger",
+  amber: "text-amber",
+  purple: "text-purple",
+  orange: "text-orange",
   gray: "text-muted-foreground",
-  indigo: "text-indigo-600",
-  pink: "text-pink-600"
+  indigo: "text-indigo",
+  pink: "text-pink"
 };
 var iconSizeClasses = {
   sm: "w-4 h-4",
@@ -215,10 +214,10 @@ var iconSizeClasses = {
   lg: "w-8 h-8"
 };
 var statusClasses = {
-  success: "bg-success-light border-success-light",
-  warning: "bg-yellow-50 border-yellow-200",
-  error: "bg-destructive border-destructive",
-  info: "bg-primary border-primary",
+  success: "bg-success/10 border-success",
+  warning: "bg-amber/10 border-amber",
+  error: "bg-danger/10 border-danger",
+  info: "bg-info/10 border-info",
   neutral: "bg-muted border-border"
 };
 function Card({
@@ -238,7 +237,7 @@ function Card({
   subtitle,
   description,
   icon: Icon,
-  iconColor = "blue",
+  iconColor = "info",
   iconSize = "md",
   actionButton,
   headerClassName = "",
@@ -249,14 +248,42 @@ function Card({
   status,
   statusIcon,
   statusText,
+  headerBorder,
+  headerBg,
+  headerStatus,
   id
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const getHeaderStatusClasses = (status2) => {
+    switch (status2) {
+      case "online":
+      case "success":
+        return { border: "bg-success", bg: "status-running-bg-50" };
+      case "offline":
+      case "error":
+        return { border: "bg-destructive", bg: "status-error-bg-50" };
+      case "maintenance":
+      case "starting":
+      case "info":
+        return { border: "bg-warning", bg: "status-starting-bg-50" };
+      case "restarting":
+      case "updating":
+        return { border: "bg-orange", bg: "status-restarting-bg-50" };
+      case "unknown":
+        return { border: "bg-muted-foreground/30", bg: "bg-muted/10" };
+      default:
+        return { border: headerBorder, bg: headerBg };
+    }
+  };
+  const statusClassesMapped = getHeaderStatusClasses(headerStatus);
+  const activeHeaderBorder = statusClassesMapped?.border || headerBorder;
+  const activeHeaderBg = statusClassesMapped?.bg || headerBg;
   const baseClasses = [
     variantClasses2[variant],
     paddingClasses[padding],
     borderAccentClasses[borderAccent],
-    overflow !== "visible" ? `overflow-${overflow}` : "",
+    overflow !== "visible" || activeHeaderBorder ? `overflow-${overflow === "visible" && activeHeaderBorder ? "hidden" : overflow}` : "",
+    activeHeaderBorder ? "relative" : "",
     hover ? "hover:shadow-md transition-shadow" : "",
     clickable || onClick ? "cursor-pointer" : "",
     disabled ? "opacity-50 cursor-not-allowed" : "",
@@ -284,7 +311,8 @@ function Card({
       style,
       onClick: clickable || onClick ? handleClick : void 0,
       children: [
-        (title || subtitle || description || Icon || actionButton || status) && /* @__PURE__ */ jsx("div", { className: `${headerClassName}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        activeHeaderBorder && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center z-10 pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: `h-1.5 w-24 ${activeHeaderBorder} rounded-b-xl shadow-sm` }) }),
+        (title || subtitle || description || Icon || actionButton || status) && /* @__PURE__ */ jsx("div", { className: `${activeHeaderBg ? activeHeaderBg + " " : ""}${headerClassName}${activeHeaderBorder ? " pt-6 pb-4 px-4" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
             Icon && /* @__PURE__ */ jsx("div", { className: `${iconColorClasses[iconColor]} flex-shrink-0`, children: /* @__PURE__ */ jsx(Icon, { className: iconSizeClasses[iconSize] }) }),
             statusIcon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusIcon }),
@@ -492,7 +520,7 @@ function Modal({
       /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
         motion.div,
         {
-          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-50 m-0 ${fullScreen ? "p-0" : "p-4"}`,
           variants: backdropVariants,
           initial: "hidden",
           animate: isOpen ? "visible" : "hidden",
@@ -507,7 +535,7 @@ function Modal({
               "aria-labelledby": title ? "modal-title-plain" : void 0,
               "aria-describedby": ariaDescribedBy || "modal-content-plain",
               tabIndex: -1,
-              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
+              className: `w-full flex flex-col overflow-hidden relative ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
               variants: modalVariants,
               initial: "hidden",
               animate: isOpen ? "visible" : "exit",
@@ -534,7 +562,7 @@ function Modal({
     /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-50 m-0 ${fullScreen ? "p-0" : "p-4"}`,
         variants: backdropVariants,
         initial: "hidden",
         animate: isOpen ? "visible" : "hidden",
@@ -549,7 +577,7 @@ function Modal({
             "aria-labelledby": title ? "modal-title" : void 0,
             "aria-describedby": ariaDescribedBy || "modal-content",
             tabIndex: -1,
-            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
+            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
             variants: modalVariants,
             initial: "hidden",
             animate: isOpen ? "visible" : "exit",
@@ -609,14 +637,14 @@ function Modal({
   );
 }
 function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
-  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "blue" } = options;
+  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "info" } = options;
   const getConfirmVariant = () => {
     switch (confirmButtonColor) {
-      case "red":
+      case "danger":
         return "danger";
-      case "green":
+      case "success":
         return "primary";
-      case "blue":
+      case "info":
       default:
         return "primary";
     }
@@ -1885,7 +1913,7 @@ function SkeletonGamesTable({
     "div",
     {
       className: `overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg ${className}`,
-      children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-300", children: [
+      children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-border", children: [
         /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Game" }),
           /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Type" }),
@@ -2072,7 +2100,7 @@ function FormInput({
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
           label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx("span", { className: "text-danger ml-1", children: "*" })
         ] }),
         description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
         /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
@@ -2090,7 +2118,7 @@ function FormInput({
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
           label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx("span", { className: "text-danger ml-1", children: "*" })
         ] }),
         description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
@@ -2102,7 +2130,7 @@ function FormInput({
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
         label,
-        required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger ml-1", children: "*" })
       ] }),
       description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -2372,7 +2400,7 @@ function FormInput({
           className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
           "aria-label": `Copy ${label}`,
           title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2438,7 +2466,7 @@ function FormInput({
           className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
           "aria-label": `Copy ${label}`,
           title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(
@@ -2503,15 +2531,15 @@ function Grid({
 }
 var variantStyles = {
   default: "bg-accent border-border text-muted-foreground",
-  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300",
-  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300",
-  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"
+  warning: "bg-amber/10 border-amber text-amber",
+  info: "bg-info/10 border-info text-info",
+  success: "bg-success/10 border-success text-success"
 };
 var titleStyles = {
   default: "text-foreground",
-  warning: "text-yellow-800 dark:text-yellow-200",
-  info: "text-blue-800 dark:text-blue-200",
-  success: "text-green-800 dark:text-green-200"
+  warning: "text-amber",
+  info: "text-info",
+  success: "text-success"
 };
 function InfoBox({
   title,
@@ -2715,7 +2743,7 @@ var Spinner = ({
   };
   const colorClasses2 = {
     primary: "border-primary-600",
-    blue: "border-ring",
+    info: "border-info",
     white: "border-white",
     current: "border-current"
   };
@@ -2869,8 +2897,8 @@ function StatusBadge({
   const variantClasses5 = {
     default: "bg-muted text-muted-foreground",
     success: "bg-success text-success-dark",
-    warning: "bg-yellow-100 text-yellow-800",
-    error: "bg-red-100 text-red-800",
+    warning: "bg-amber/20 text-yellow-800",
+    error: "bg-danger/20 text-danger",
     info: "bg-primary-100 text-primary-800"
   };
   return /* @__PURE__ */ jsx("span", { className: `badge ${variantClasses5[variant]}`, children: status });
@@ -2935,9 +2963,9 @@ function CountBadge({
   const variantClasses5 = {
     primary: "bg-ring ",
     secondary: "bg-muted0 ",
-    success: "bg-green-500 ",
-    warning: "bg-yellow-500 ",
-    error: "bg-red-500 "
+    success: "bg-success ",
+    warning: "bg-amber ",
+    error: "bg-danger "
   };
   if (count <= 0) return null;
   return /* @__PURE__ */ jsx(
@@ -2968,8 +2996,8 @@ function ClearButton({
     lg: "w-5 h-5"
   };
   const variantClasses5 = {
-    overlay: "absolute -top-1 -right-1 bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors cursor-pointer",
-    inline: "bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors",
+    overlay: "absolute -top-1 -right-1 bg-danger  rounded-full flex items-center justify-center hover:bg-danger transition-colors cursor-pointer",
+    inline: "bg-danger  rounded-full flex items-center justify-center hover:bg-danger transition-colors",
     ghost: "text-muted-foreground hover:text-muted-foreground transition-colors"
   };
   const baseProps = {
@@ -3080,86 +3108,73 @@ function ActionButton({
     lg: terminalMode ? "" : "btn-lg"
   };
   const paddingClasses3 = iconOnly ? terminalMode ? "" : "p-2" : "px-3 py-1.5";
-  const t = {
-    edit: "Edit",
-    delete: "Delete",
-    deactivate: "Deactivate",
-    activate: "Activate",
-    view: "View",
-    metrics: "Metrics",
-    start: "Start",
-    stop: "Stop",
-    restart: "Restart",
-    pause: "Pause",
-    clone: "Clone"
-  };
   const getVariantConfig = () => {
     switch (variant) {
       case "edit":
         return {
           icon: fill ? RiEditFill : RiEditLine,
-          label: t.edit,
+          label: "Edit",
           className: "btn-secondary"
         };
       case "delete":
         return {
           icon: fill ? RiDeleteBinFill : RiDeleteBinLine,
-          label: t.delete,
+          label: "Delete",
           className: "btn-danger"
         };
       case "deactivate":
         return {
           icon: fill ? RiStopCircleFill : RiStopCircleLine,
-          label: t.deactivate,
+          label: "Deactivate",
           className: "bg-slate-50  text-slate-600 hover:bg-slate-100 hover:text-slate-700 border border-slate-200 transition-all duration-300 ease-in-out"
         };
       case "activate":
         return {
           icon: fill ? RiPlayCircleFill : RiPlayCircleLine,
-          label: t.activate,
-          className: "bg-emerald-50  text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
+          label: "Activate",
+          className: "bg-emerald/10  text-emerald hover:bg-emerald/20 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
         };
       case "view":
         return {
           icon: fill ? RiEyeFill : RiEyeLine,
-          label: t.view,
-          className: "bg-muted  text-muted-foreground hover:bg-gray-100 hover:text-foreground border border-border transition-all duration-300 ease-in-out"
+          label: "View",
+          className: "bg-muted  text-muted-foreground hover:bg-muted hover:text-foreground border border-border transition-all duration-300 ease-in-out"
         };
       case "metrics":
         return {
           icon: fill ? RiBarChartFill : RiBarChartLine,
-          label: t.metrics,
-          className: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+          label: "Metrics",
+          className: "bg-purple/10  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
         };
       case "start":
         return {
           icon: fill ? RiPlayFill : RiPlayLine,
-          label: t.start,
-          className: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out"
+          label: "Start",
+          className: "bg-success/10 text-success hover:bg-success/20 hover:text-success border border-success transition-all duration-300 ease-in-out"
         };
       case "stop":
         return {
           icon: fill ? RiStopFill : RiStopLine,
-          label: t.stop,
-          className: "bg-red-50  text-red-600 hover:bg-red-100 hover:text-red-700 border border-red-200 transition-all duration-300 ease-in-out"
+          label: "Stop",
+          className: "bg-danger/10 text-danger hover:bg-danger/20 hover:text-danger border border-danger transition-all duration-300 ease-in-out"
         };
       case "restart":
         return {
           icon: fill ? RiRestartFill : RiRestartLine,
-          label: t.restart,
-          className: "bg-orange-50  text-orange-600 hover:bg-orange-100 hover:text-orange-700 border border-orange-200 transition-all duration-300 ease-in-out"
+          label: "Restart",
+          className: "bg-orange/10  text-orange hover:bg-orange/20 hover:text-orange-700 border border-orange/30 transition-all duration-300 ease-in-out"
         };
       case "pause":
         return {
           icon: fill ? RiPauseFill : RiPauseLine,
-          label: t.pause,
-          className: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out"
+          label: "Pause",
+          className: "bg-amber/10 text-amber hover:bg-amber/20 hover:text-amber border border-amber transition-all duration-300 ease-in-out"
         };
       case "clone":
         return {
           icon: fill ? RiFileCopyFill : RiFileCopyLine,
-          label: t.clone,
-          className: "bg-indigo-50  text-indigo-600 hover:bg-indigo-100 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
+          label: "Clone",
+          className: "bg-indigo/10  text-indigo hover:bg-indigo/20 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
         };
       default:
         return null;
@@ -3170,10 +3185,10 @@ function ActionButton({
     primary: "btn-primary",
     secondary: "btn-secondary",
     danger: "btn-danger",
-    success: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out",
-    warning: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out",
+    success: "bg-success/10 text-success hover:bg-success/20 hover:text-success border border-success transition-all duration-300 ease-in-out",
+    warning: "bg-amber/10 text-amber hover:bg-amber/20 hover:text-amber border border-amber transition-all duration-300 ease-in-out",
     info: "bg-muted  text-muted-foreground hover:bg-primary hover:text-primary-foreground border border-ring transition-all duration-300 ease-in-out",
-    metrics: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+    metrics: "bg-purple/10  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
   };
   let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
   if (terminalMode && variantClass) {