@burdenoff/fluidgrids-fe-sdk 2026.1022.2 → 2026.1022.4

package/dist/{ExecutionDetailPage-NFZVCUCA.js → ExecutionDetailPage-GXP7V43B.js}

@@ -1,5 +1,5 @@
-export { ExecutionDetailPage } from './chunk-6LMWVUD7.js';
-import './chunk-3XEIMQNT.js';
+export { ExecutionDetailPage } from './chunk-P3R3RFAC.js';
+import './chunk-HIXQIM22.js';
 import './chunk-QBFAJNUC.js';
 import './chunk-ONVGFVNH.js';
 import './chunk-JL7CASN5.js';

package/dist/{ExecutionsListPage-KSOHJU4T.js → ExecutionsListPage-7AZRFJJT.js}

@@ -1,5 +1,5 @@
-export { ExecutionsListPage } from './chunk-YPF7LVUZ.js';
-import './chunk-3XEIMQNT.js';
+export { ExecutionsListPage } from './chunk-5QUAOGY7.js';
+import './chunk-HIXQIM22.js';
 import './chunk-QBFAJNUC.js';
 import './chunk-HP3A6BPK.js';
 import './chunk-D3UWK7GY.js';

package/dist/{MissingNodesInstallModal-ODVBW4X4.js → MissingNodesInstallModal-OSAJLIBE.js}

@@ -1,5 +1,5 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-7LSGGJ7D.js';
-import { Badge, Button } from './chunk-GDAFKRQO.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-YXMFRQYV.js';
+import { Badge, Button } from './chunk-BQXVT32O.js';
 import './chunk-JL7CASN5.js';
 import './chunk-UULVIT25.js';
 import { Puzzle, Download, CheckCircle2, AlertTriangle, ShoppingCart, ExternalLink, Loader2 } from 'lucide-react';
@@ -47,7 +47,7 @@ function MissingNodesInstallModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-green-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-status-success-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -63,7 +63,7 @@ function MissingNodesInstallModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(Download, { className: "size-4 text-blue-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(Download, { className: "size-4 text-status-info-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -73,7 +73,7 @@ function MissingNodesInstallModal({
                       Badge,
                       {
                         variant: "outline",
-                        className: "text-xs ml-auto border-blue-500/30 text-blue-500",
+                        className: "text-xs ml-auto border-status-info-border text-status-info-text",
                         children: "Not installed"
                       }
                     )
@@ -102,7 +102,7 @@ function MissingNodesInstallModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4 text-amber-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4 text-status-warning-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -112,7 +112,7 @@ function MissingNodesInstallModal({
                       Badge,
                       {
                         variant: "outline",
-                        className: "text-xs ml-auto border-amber-500/30 text-amber-500",
+                        className: "text-xs ml-auto border-status-warning-border text-status-warning-text",
                         children: "Purchase required"
                       }
                     )
@@ -139,7 +139,7 @@ function MissingNodesInstallModal({
               /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: "These nodes are not published to the store, so they cannot be installed from here. Open the workflow to review the steps that use them." })
             ] })
           ] }),
-          hasPaidBlockers && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-amber-500/10 border border-amber-500/30 p-3 text-sm text-amber-700 dark:text-amber-400 flex items-start gap-2", children: [
+          hasPaidBlockers && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-status-warning-bg-subtle border border-status-warning-border p-3 text-sm text-status-warning-text flex items-start gap-2", children: [
             /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 mt-0.5 shrink-0" }),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Purchase required before installing" }),
@@ -149,7 +149,7 @@ function MissingNodesInstallModal({
                 {
                   variant: "link",
                   size: "sm",
-                  className: "mt-1 h-auto p-0 text-xs text-amber-700 dark:text-amber-400 underline",
+                  className: "mt-1 h-auto p-0 text-xs text-status-warning-text underline",
                   onClick: () => window.open("/store", "_blank"),
                   children: [
                     /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 mr-1" }),

package/dist/{TemplateConfigurationModal-HUHXIL3K.js → TemplateConfigurationModal-SILENYXX.js}

@@ -1,7 +1,7 @@
 import { Label } from './chunk-VTQVPNUQ.js';
 import { Input } from './chunk-IEVSFCFS.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-7LSGGJ7D.js';
-import { Badge, Button } from './chunk-GDAFKRQO.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-YXMFRQYV.js';
+import { Badge, Button } from './chunk-BQXVT32O.js';
 import './chunk-JL7CASN5.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { useState, useEffect, useMemo } from 'react';
@@ -155,7 +155,7 @@ function TemplateConfigurationModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-green-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-status-success-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -174,7 +174,7 @@ function TemplateConfigurationModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(Download, { className: "size-4 text-blue-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(Download, { className: "size-4 text-status-info-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -184,7 +184,7 @@ function TemplateConfigurationModal({
                       Badge,
                       {
                         variant: "outline",
-                        className: "text-xs ml-auto border-blue-500/30 text-blue-500",
+                        className: "text-xs ml-auto border-status-info-border text-status-info-text",
                         children: tr(
                           "fluidgrids.builder.templateConfigModal.willInstallBadge",
                           "Will install"
@@ -200,7 +200,7 @@ function TemplateConfigurationModal({
                 {
                   className: "flex items-center gap-2 text-sm",
                   children: [
-                    /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4 text-amber-500 shrink-0" }),
+                    /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4 text-status-warning-text shrink-0" }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       node.displayName || node.nodeType,
                       " v",
@@ -210,7 +210,7 @@ function TemplateConfigurationModal({
                       Badge,
                       {
                         variant: "outline",
-                        className: "text-xs ml-auto border-amber-500/30 text-amber-500",
+                        className: "text-xs ml-auto border-status-warning-border text-status-warning-text",
                         children: tr(
                           "fluidgrids.builder.templateConfigModal.purchaseRequiredBadge",
                           "Purchase required"
@@ -245,7 +245,7 @@ function TemplateConfigurationModal({
             /* @__PURE__ */ jsx("strong", { children: "DRAFT" }),
             ". You can review and edit it in the builder before activating."
           ] }) }),
-          hasPaidBlockers && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-amber-500/10 border border-amber-500/30 p-3 text-sm text-amber-700 dark:text-amber-400 flex items-start gap-2", children: [
+          hasPaidBlockers && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-status-warning-bg-subtle border border-status-warning-border p-3 text-sm text-status-warning-text flex items-start gap-2", children: [
             /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 mt-0.5 shrink-0" }),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "font-medium", children: tr(
@@ -261,7 +261,7 @@ function TemplateConfigurationModal({
                 {
                   variant: "link",
                   size: "sm",
-                  className: "mt-1 h-auto p-0 text-xs text-amber-700 dark:text-amber-400 underline",
+                  className: "mt-1 h-auto p-0 text-xs text-status-warning-text underline",
                   onClick: () => window.open("/store", "_blank"),
                   children: [
                     /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 mr-1" }),

package/dist/{TemplateDetailPanel-RZDJEXGG.js → TemplateDetailPanel-PP42MUM2.js}

@@ -1,4 +1,4 @@
-import { Button, Badge } from './chunk-GDAFKRQO.js';
+import { Button, Badge } from './chunk-BQXVT32O.js';
 import './chunk-JL7CASN5.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { X, Sparkles, Star, Download, Eye, User, Calendar, Tag, ExternalLink } from 'lucide-react';
@@ -63,14 +63,14 @@ function TemplateDetailPanel({
           Badge,
           {
             variant: "secondary",
-            className: "bg-green-500 text-white border-0",
+            className: "bg-status-success-bg text-action-primary-text border-0",
             children: tr("fluidgrids.builder.templateDetailPanel.freeBadge", "Free")
           }
         ) : /* @__PURE__ */ jsxs(
           Badge,
           {
             variant: "default",
-            className: "bg-blue-500 text-white border-0",
+            className: "bg-status-info-bg text-action-primary-text border-0",
             children: [
               "$",
               template.price?.toString() || "0"
@@ -81,9 +81,9 @@ function TemplateDetailPanel({
           Badge,
           {
             variant: "default",
-            className: "bg-gradient-to-r from-yellow-500 to-orange-500 text-white border-0 shadow-lg",
+            className: "bg-status-warning-bg-subtle text-status-warning-text border border-status-warning-border shadow-lg",
             children: [
-              /* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-white" }),
+              /* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-current" }),
               tr(
                 "fluidgrids.builder.templateDetailPanel.featuredBadge",
                 "Featured"
@@ -101,7 +101,7 @@ function TemplateDetailPanel({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
         template.rating && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Star, { className: "size-4 fill-yellow-400 text-yellow-400" }),
+          /* @__PURE__ */ jsx(Star, { className: "size-4 fill-status-warning-bg text-status-warning-text" }),
           /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: template.rating.toFixed(1) }),
           /* @__PURE__ */ jsxs("span", { children: [
             "(",

package/dist/{WorkflowBuilder-FR3TUJ33.js → WorkflowBuilder-36X3QZTC.js}

@@ -1,10 +1,10 @@
-export { WorkflowBuilder } from './chunk-EU5ANGO4.js';
+export { WorkflowBuilder } from './chunk-M7FOQBCR.js';
 import './chunk-6N27YGMB.js';
-import './chunk-2HUSQTUK.js';
+import './chunk-T3UCFY7J.js';
 import './chunk-GEMNVFPK.js';
 import './chunk-IEVSFCFS.js';
-import './chunk-7LSGGJ7D.js';
-import './chunk-GDAFKRQO.js';
+import './chunk-YXMFRQYV.js';
+import './chunk-BQXVT32O.js';
 import './chunk-SYVLFHWV.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-WBH2XEWO.js';
@@ -13,7 +13,7 @@ import './chunk-JL7CASN5.js';
 import './chunk-HP3A6BPK.js';
 import './chunk-UZG3ZIQM.js';
 import './chunk-5TW5JP5R.js';
-import './chunk-EGYJKHAL.js';
+import './chunk-VI2RFS65.js';
 import './chunk-SAZVBFMO.js';
 import './chunk-4UAWCWS7.js';
 import './chunk-UULVIT25.js';

package/dist/{WorkflowsList-BAYEP7TU.js → WorkflowsList-O3DFQM6S.js}

@@ -1,4 +1,4 @@
-export { WorkflowsList } from './chunk-FJHERSHE.js';
+export { WorkflowsList } from './chunk-QP62LB3V.js';
 import './chunk-6N27YGMB.js';
 import './chunk-SYVLFHWV.js';
 import './chunk-ONVGFVNH.js';
@@ -7,7 +7,7 @@ import './chunk-HP3A6BPK.js';
 import './chunk-D3UWK7GY.js';
 import './chunk-UZG3ZIQM.js';
 import './chunk-PJAWNFJV.js';
-import './chunk-EGYJKHAL.js';
+import './chunk-VI2RFS65.js';
 import './chunk-SAZVBFMO.js';
 import './chunk-4UAWCWS7.js';
 import './chunk-UULVIT25.js';

package/dist/{chunk-JG65547T.js → chunk-3FI4DCIY.js}

@@ -1,13 +1,14 @@
-import { FluidGridsProvider, Card, FluidGridsMark } from './chunk-2HUSQTUK.js';
+import { FluidGridsProvider, Card, FluidGridsMark } from './chunk-T3UCFY7J.js';
 import { Input } from './chunk-IEVSFCFS.js';
-import { Button } from './chunk-GDAFKRQO.js';
+import { Button } from './chunk-BQXVT32O.js';
 import { cn } from './chunk-JL7CASN5.js';
 import { useWorkflowDefinition } from './chunk-HP3A6BPK.js';
-import { useFlowStore } from './chunk-EGYJKHAL.js';
+import { useFlowStore } from './chunk-VI2RFS65.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { MarkerType, ReactFlowProvider, useReactFlow, ReactFlow, Background, Controls, MiniMap, Handle, Position } from '@xyflow/react';
 import { useShallow } from 'zustand/shallow';
+import { edgeColor, nodeCategoryColor } from '@burdenoff/fe-libs/shared/utils';
 import '@xyflow/react/dist/style.css';
 import { ArrowLeft, Save, Play, Trash2 } from 'lucide-react';
 import { useTheme } from '@burdenoff/fe-libs/shared/hooks/shell';
@@ -43,41 +44,40 @@ var defaultEdgeOptions = {
     height: 21
   },
   style: {
-    stroke: "#888"
+    stroke: edgeColor("default")
   }
 };
 var handleStyle = {
   width: 10,
   height: 10,
-  background: "#3b82f6",
-  // blue-500
-  border: "2px solid white"
+  background: "var(--color-node-handle-connected)",
+  border: "2px solid var(--color-node-bg)"
 };
 var baseNodeStyle = {
   padding: "8px 16px",
   borderRadius: "8px",
   fontWeight: 500,
-  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  boxShadow: "var(--shadow-elevation-2)",
   position: "relative",
-  color: "white"
+  // Text on a solid node-category fill (white in every theme).
+  color: "var(--color-action-primary-text)"
 };
-var NODE_COLORS = {
-  "trigger:api": "#22c55e",
-  end: "#ef4444",
-  "internal:if": "#8b5cf6",
-  "internal:switch": "#8b5cf6",
-  "internal:loop": "#f59e0b",
-  "internal:merge": "#6366f1",
-  "internal:set": "#3b82f6",
-  "internal:filter": "#06b6d4",
-  "internal:aggregate": "#0891b2",
-  "internal:wait": "#64748b",
-  "internal:noop": "#94a3b8",
-  "internal:http": "#f97316",
-  default: "#3b82f6"
+var NODE_CATEGORY_BY_TYPE = {
+  "trigger:api": "trigger",
+  end: "end",
+  "internal:if": "logic",
+  "internal:switch": "logic",
+  "internal:loop": "loop",
+  "internal:merge": "utility",
+  "internal:set": "data",
+  "internal:filter": "data",
+  "internal:aggregate": "data",
+  "internal:wait": "utility",
+  "internal:noop": "utility",
+  "internal:http": "integration"
 };
 function getNodeColor(type) {
-  return NODE_COLORS[type] ?? NODE_COLORS.default;
+  return nodeCategoryColor(NODE_CATEGORY_BY_TYPE[type] ?? "default");
 }
 function TriggerNode({ data }) {
   const tr = useTr();

package/dist/{chunk-YPF7LVUZ.js → chunk-5QUAOGY7.js}

@@ -1,4 +1,4 @@
-import { useExecutionsWithStore, useExecutionStats, useExecutionActions, useAutoRefresh, ExecutionStats, ExecutionFilters, ExecutionTable, ExecutionCards, ExecutionTimeline, Pagination } from './chunk-3XEIMQNT.js';
+import { useExecutionsWithStore, useExecutionStats, useExecutionActions, useAutoRefresh, ExecutionStats, ExecutionFilters, ExecutionTable, ExecutionCards, ExecutionTimeline, Pagination } from './chunk-HIXQIM22.js';
 import { useWorkflowDefinitions } from './chunk-HP3A6BPK.js';
 import { useExecutionsStore } from './chunk-UZG3ZIQM.js';
 import { useTr } from './chunk-UULVIT25.js';

package/dist/{chunk-TWIORNPU.js → chunk-6CVZQJKW.js}

@@ -203,27 +203,27 @@ var NODE_CATEGORIES = [
 ];
 var STATUS_STYLES = {
   AVAILABLE: {
-    className: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+    className: "bg-status-success-bg-subtle text-status-success-text border-status-success-border",
     label: "Available",
     icon: "mdi:check-circle"
   },
   DEPRECATED: {
-    className: "bg-amber-500/15 text-amber-400 border-amber-500/30",
+    className: "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border",
     label: "Deprecated",
     icon: "mdi:alert"
   },
   DISABLED: {
-    className: "bg-zinc-500/15 text-zinc-400 border-zinc-500/30",
+    className: "bg-bg-sunken text-text-muted border-border-strong",
     label: "Disabled",
     icon: "mdi:close-circle"
   }
 };
 var CATEGORY_COLORS = {
-  integration: "bg-violet-500/15 text-violet-400 border-violet-500/30",
-  data: "bg-blue-500/15 text-blue-400 border-blue-500/30",
-  logic: "bg-cyan-500/15 text-cyan-400 border-cyan-500/30",
-  "ai-ml": "bg-amber-500/15 text-amber-400 border-amber-500/30",
-  communication: "bg-rose-500/15 text-rose-400 border-rose-500/30"
+  integration: "bg-chart-3/10 text-chart-3 border-chart-3/30",
+  data: "bg-status-info-bg-subtle text-status-info-text border-status-info-border",
+  logic: "bg-status-info-bg-subtle text-status-info-text border-status-info-border",
+  "ai-ml": "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border",
+  communication: "bg-status-error-bg-subtle text-status-error-text border-status-error-border"
 };
 function inferNodeCategory(node) {
   const text = [
@@ -297,7 +297,7 @@ function ErrorState({
 function NodeCard({ node, category }) {
   const tr = useTr();
   const status = STATUS_STYLES[node.status] ?? STATUS_STYLES.AVAILABLE;
-  const catColor = CATEGORY_COLORS[category] ?? "bg-zinc-500/15 text-zinc-400 border-zinc-500/30";
+  const catColor = CATEGORY_COLORS[category] ?? "bg-bg-sunken text-text-muted border-border-strong";
   const catLabel = NODE_CATEGORIES.find((c) => c.value === category)?.label ?? tr("fluidgrids.nodes.nodeCard.categoryFallback", "Node");
   return /* @__PURE__ */ jsxs(Card, { className: "border border-border-secondary bg-background-secondary hover:border-border-primary transition-all duration-200 flex flex-col", children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex-1 pb-3", children: [
@@ -432,19 +432,26 @@ function NodesPage() {
             {
               icon: "mdi:check-circle",
               width: 18,
-              className: "text-emerald-400"
+              className: "text-status-success-text"
             }
           ),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr("fluidgrids.nodes.nodesPage.statActive", "Active") })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-emerald-400 mt-1", children: loading ? "\u2014" : stats.active })
+        /* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-status-success-text mt-1", children: loading ? "\u2014" : stats.active })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "p-3 rounded-lg bg-background-secondary border border-border-secondary", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: "mdi:alert", width: 18, className: "text-amber-400" }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "mdi:alert",
+              width: 18,
+              className: "text-status-warning-text"
+            }
+          ),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr("fluidgrids.nodes.nodesPage.statDeprecated", "Deprecated") })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-amber-400 mt-1", children: loading ? "\u2014" : stats.deprecated })
+        /* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-status-warning-text mt-1", children: loading ? "\u2014" : stats.deprecated })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative max-w-md mb-6", children: [

package/dist/{chunk-GDAFKRQO.js → chunk-BQXVT32O.js}

@@ -9,7 +9,7 @@ var buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90",
+        destructive: "bg-action-danger-bg text-action-danger-text hover:bg-action-danger-bgHover",
         outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -59,9 +59,9 @@ var badgeVariants = cva(
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
-        success: "border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
-        warning: "border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100",
-        info: "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
+        success: "border-transparent bg-status-success-bg-subtle text-status-success-text",
+        warning: "border-transparent bg-status-warning-bg-subtle text-status-warning-text",
+        info: "border-transparent bg-status-info-bg-subtle text-status-info-text"
       }
     },
     defaultVariants: {