@axis-ds/agentic-ui 1.2.0 → 1.3.0

package/dist/agent-avatar/index.js

@@ -41,14 +41,14 @@ var sizeStyles = {
   xl: "w-12 h-12 text-lg"
 };
 var statusStyles = {
-  online: "bg-[var(--axis-color-green-500)]",
-  busy: "bg-[var(--axis-color-yellow-500)]",
-  offline: "bg-[var(--axis-color-gray-400)]"
+  online: "bg-[var(--axis-status-success)]",
+  busy: "bg-[var(--axis-status-warning)]",
+  offline: "bg-[var(--axis-status-neutral)]"
 };
 var typeColors = {
-  assistant: "bg-[var(--axis-color-purple-500)]",
-  tool: "bg-[var(--axis-color-blue-500)]",
-  system: "bg-[var(--axis-color-gray-600)]"
+  assistant: "bg-[var(--axis-agent-avatar-assistant)]",
+  tool: "bg-[var(--axis-agent-avatar-tool)]",
+  system: "bg-[var(--axis-agent-avatar-system)]"
 };
 function AgentAvatar({
   name,
@@ -84,7 +84,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: (0, import_ui_react.cn)(
-              "rounded-full flex items-center justify-center font-medium text-white",
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
               sizeStyles[size],
               typeColors[type]
             ),

package/dist/agent-avatar/index.mjs

@@ -1,6 +1,6 @@
 import {
   AgentAvatar
-} from "../chunk-KH4OXDEV.mjs";
+} from "../chunk-JY7MTMMB.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   AgentAvatar

package/dist/approval-card/index.js

@@ -47,18 +47,18 @@ var SEVERITY_LABELS = {
 var import_jsx_runtime = require("react/jsx-runtime");
 var severityStyles = {
   info: {
-    border: "border-l-[var(--axis-color-blue-500)]",
-    icon: "text-[var(--axis-color-blue-500)]",
+    border: "border-l-[var(--axis-status-info)]",
+    icon: "text-[var(--axis-status-info)]",
     bg: "bg-[var(--axis-surface-info)]"
   },
   warning: {
-    border: "border-l-[var(--axis-color-yellow-500)]",
-    icon: "text-[var(--axis-color-yellow-500)]",
+    border: "border-l-[var(--axis-status-warning)]",
+    icon: "text-[var(--axis-status-warning)]",
     bg: "bg-[var(--axis-surface-warning)]"
   },
   error: {
-    border: "border-l-[var(--axis-color-red-500)]",
-    icon: "text-[var(--axis-color-red-500)]",
+    border: "border-l-[var(--axis-status-error)]",
+    icon: "text-[var(--axis-status-error)]",
     bg: "bg-[var(--axis-surface-error)]"
   }
 };
@@ -68,10 +68,10 @@ var severityIcons = {
   error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
 };
 var actionVariantStyles = {
-  default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
+  default: "bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
   secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
   ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
-  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
+  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)]"
 };
 function ApprovalCard({
   id,

package/dist/approval-card/index.mjs

@@ -1,6 +1,6 @@
 import {
   ApprovalCard
-} from "../chunk-ENIWC4WX.mjs";
+} from "../chunk-7HTVJ6MK.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   ApprovalCard

package/dist/attachment-card/index.js

@@ -68,7 +68,7 @@ function AttachmentCard({
       className: (0, import_ui_react.cn)(
         "flex items-center gap-3 rounded-lg border p-3",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-        status === "error" && "border-[var(--axis-color-red-500)]/30",
+        status === "error" && "border-[var(--axis-status-error-border)]",
         className
       ),
       children: [
@@ -111,7 +111,7 @@ function AttachmentCard({
           status === "uploading" && progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
-              className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all",
+              className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all",
               style: { width: `${progress}%` },
               role: "progressbar",
               "aria-valuenow": progress,

package/dist/attachment-card/index.mjs

@@ -1,6 +1,6 @@
 import {
   AttachmentCard
-} from "../chunk-FPOHPDZ2.mjs";
+} from "../chunk-42KEAZ2Y.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   AttachmentCard

package/dist/{chunk-FPOHPDZ2.mjs → chunk-42KEAZ2Y.mjs}

@@ -37,7 +37,7 @@ function AttachmentCard({
       className: cn(
         "flex items-center gap-3 rounded-lg border p-3",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-        status === "error" && "border-[var(--axis-color-red-500)]/30",
+        status === "error" && "border-[var(--axis-status-error-border)]",
         className
       ),
       children: [
@@ -80,7 +80,7 @@ function AttachmentCard({
           status === "uploading" && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all",
+              className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all",
               style: { width: `${progress}%` },
               role: "progressbar",
               "aria-valuenow": progress,

package/dist/{chunk-RGBY6EEU.mjs → chunk-4CMUEGLK.mjs}

@@ -43,7 +43,7 @@ function CodeBlock({
               "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
               className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
               children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
                 /* @__PURE__ */ jsx("span", { children: "\uBCF5\uC0AC\uB428" })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),

package/dist/{chunk-RGPKTWK4.mjs → chunk-4V4BWBRC.mjs}

@@ -46,13 +46,13 @@ function StepTimeline({
                 "aria-hidden": "true",
                 className: cn(
                   "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
-                  step.status === "complete" && "bg-[var(--axis-color-green-500)]",
-                  step.status === "running" && "bg-[var(--axis-color-blue-500)] animate-pulse",
-                  step.status === "error" && "bg-[var(--axis-color-red-500)]",
-                  step.status === "skipped" && "bg-[var(--axis-color-gray-300)]",
-                  step.status === "pending" && "bg-[var(--axis-color-gray-300)]"
+                  step.status === "complete" && "bg-[var(--axis-status-success)]",
+                  step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse",
+                  step.status === "error" && "bg-[var(--axis-status-error)]",
+                  step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
+                  step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
                 ),
-                children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: cn(isVertical ? "flex-1" : "text-center mt-2"), children: [

package/dist/{chunk-ENIWC4WX.mjs → chunk-7HTVJ6MK.mjs}

@@ -8,18 +8,18 @@ import { cn } from "@axis-ds/ui-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var severityStyles = {
   info: {
-    border: "border-l-[var(--axis-color-blue-500)]",
-    icon: "text-[var(--axis-color-blue-500)]",
+    border: "border-l-[var(--axis-status-info)]",
+    icon: "text-[var(--axis-status-info)]",
     bg: "bg-[var(--axis-surface-info)]"
   },
   warning: {
-    border: "border-l-[var(--axis-color-yellow-500)]",
-    icon: "text-[var(--axis-color-yellow-500)]",
+    border: "border-l-[var(--axis-status-warning)]",
+    icon: "text-[var(--axis-status-warning)]",
     bg: "bg-[var(--axis-surface-warning)]"
   },
   error: {
-    border: "border-l-[var(--axis-color-red-500)]",
-    icon: "text-[var(--axis-color-red-500)]",
+    border: "border-l-[var(--axis-status-error)]",
+    icon: "text-[var(--axis-status-error)]",
     bg: "bg-[var(--axis-surface-error)]"
   }
 };
@@ -29,10 +29,10 @@ var severityIcons = {
   error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
 };
 var actionVariantStyles = {
-  default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
+  default: "bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
   secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
   ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
-  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
+  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)]"
 };
 function ApprovalCard({
   id,

package/dist/{chunk-NRBIHROX.mjs → chunk-IOF4OET6.mjs}

@@ -40,13 +40,13 @@ function computeDiff(before, after) {
   return result;
 }
 var lineTypeStyles = {
-  added: "bg-[var(--axis-color-green-500)]/10",
-  removed: "bg-[var(--axis-color-red-500)]/10",
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
   unchanged: ""
 };
 var lineTypeTextStyles = {
-  added: "text-[var(--axis-color-green-600)]",
-  removed: "text-[var(--axis-color-red-600)]",
+  added: "text-[var(--axis-diff-added-text)]",
+  removed: "text-[var(--axis-diff-removed-text)]",
   unchanged: "text-[var(--axis-text-primary)]"
 };
 var lineTypeSymbols = {
@@ -80,11 +80,11 @@ function DiffViewer({
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
             filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-color-green-500)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
               "+",
               addedCount
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-color-red-500)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
               "-",
               removedCount
             ] })

package/dist/{chunk-657RY6MM.mjs → chunk-J4FIMXXG.mjs}

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var roleStyles = {
   user: {
     container: "flex-row-reverse",
-    bubble: "bg-[var(--axis-color-blue-500)] text-white rounded-br-sm"
+    bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
   },
   assistant: {
     container: "flex-row",

package/dist/{chunk-KH4OXDEV.mjs → chunk-JY7MTMMB.mjs}

@@ -12,14 +12,14 @@ var sizeStyles = {
   xl: "w-12 h-12 text-lg"
 };
 var statusStyles = {
-  online: "bg-[var(--axis-color-green-500)]",
-  busy: "bg-[var(--axis-color-yellow-500)]",
-  offline: "bg-[var(--axis-color-gray-400)]"
+  online: "bg-[var(--axis-status-success)]",
+  busy: "bg-[var(--axis-status-warning)]",
+  offline: "bg-[var(--axis-status-neutral)]"
 };
 var typeColors = {
-  assistant: "bg-[var(--axis-color-purple-500)]",
-  tool: "bg-[var(--axis-color-blue-500)]",
-  system: "bg-[var(--axis-color-gray-600)]"
+  assistant: "bg-[var(--axis-agent-avatar-assistant)]",
+  tool: "bg-[var(--axis-agent-avatar-tool)]",
+  system: "bg-[var(--axis-agent-avatar-system)]"
 };
 function AgentAvatar({
   name,
@@ -55,7 +55,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: cn(
-              "rounded-full flex items-center justify-center font-medium text-white",
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
               sizeStyles[size],
               typeColors[type]
             ),

package/dist/{chunk-PWKN5UHT.mjs → chunk-OYQX3SL4.mjs}

@@ -9,39 +9,39 @@ import { cn } from "@axis-ds/ui-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var planStatusStyles = {
   draft: {
-    border: "border-l-[var(--axis-color-gray-400)]",
-    badge: "bg-[var(--axis-color-gray-100)] text-[var(--axis-color-gray-600)]"
+    border: "border-l-[var(--axis-status-neutral)]",
+    badge: "bg-[var(--axis-status-neutral-bg)] text-[var(--axis-status-neutral-strong)]"
   },
   pending: {
-    border: "border-l-[var(--axis-color-yellow-500)]",
-    badge: "bg-[var(--axis-color-yellow-500)]/10 text-[var(--axis-color-yellow-600)]"
+    border: "border-l-[var(--axis-status-warning)]",
+    badge: "bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]"
   },
   approved: {
-    border: "border-l-[var(--axis-color-green-500)]",
-    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+    border: "border-l-[var(--axis-status-success)]",
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   },
   rejected: {
-    border: "border-l-[var(--axis-color-red-500)]",
-    badge: "bg-[var(--axis-color-red-500)]/10 text-[var(--axis-color-red-600)]"
+    border: "border-l-[var(--axis-status-error)]",
+    badge: "bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]"
   },
   executing: {
-    border: "border-l-[var(--axis-color-blue-500)]",
-    badge: "bg-[var(--axis-color-blue-500)]/10 text-[var(--axis-color-blue-600)]"
+    border: "border-l-[var(--axis-status-running)]",
+    badge: "bg-[var(--axis-badge-info-bg)] text-[var(--axis-badge-info-text)]"
   },
   completed: {
-    border: "border-l-[var(--axis-color-green-500)]",
-    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+    border: "border-l-[var(--axis-status-success)]",
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   }
 };
 var stepStatusIcons = {
-  pending: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
-  running: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[var(--axis-color-blue-500)] animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+  pending: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
+  running: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
     /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  complete: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-color-red-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-  skipped: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
+  complete: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  skipped: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
 };
 function PlanCard({
   title,
@@ -62,7 +62,7 @@ function PlanCard({
       role: "region",
       "aria-labelledby": titleId,
       className: cn(
-        "rounded-lg border border-l-4 overflow-hidden",
+        "rounded-lg border border-l-[length:var(--axis-plan-card-accent-width)] overflow-hidden",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
         styles.border,
         className
@@ -86,7 +86,7 @@ function PlanCard({
             steps.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: "h-full rounded-full bg-[var(--axis-color-green-500)] transition-all",
+                className: "h-full rounded-full bg-[var(--axis-status-success)] transition-all",
                 style: { width: `${completedCount / steps.length * 100}%` },
                 "aria-hidden": "true"
               }
@@ -121,7 +121,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-color-green-500)] text-white hover:bg-[var(--axis-color-green-600)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-status-success-strong)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),
@@ -137,7 +137,7 @@ function PlanCard({
             "button",
             {
               onClick: onReject,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-color-red-500)] hover:bg-[var(--axis-color-red-500)]/10 transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:text-[var(--axis-plan-card-reject-hover-text)] hover:bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)] transition-colors",
               children: "\uAC70\uC808"
             }
           )

package/dist/{chunk-H6VXOP7U.mjs → chunk-QS6GQNSE.mjs}

@@ -12,13 +12,13 @@ function TokenUsageIndicator({
   const ratio = max > 0 ? current / max : 0;
   const percentage = Math.min(Math.round(ratio * 100), 100);
   const getColor = () => {
-    if (ratio >= 1) return "bg-[var(--axis-color-red-500)]";
-    if (ratio >= warningThreshold) return "bg-[var(--axis-color-yellow-500)]";
-    return "bg-[var(--axis-color-green-500)]";
+    if (ratio >= 1) return "bg-[var(--axis-status-error)]";
+    if (ratio >= warningThreshold) return "bg-[var(--axis-status-warning)]";
+    return "bg-[var(--axis-status-success)]";
   };
   const getTextColor = () => {
-    if (ratio >= 1) return "text-[var(--axis-color-red-500)]";
-    if (ratio >= warningThreshold) return "text-[var(--axis-color-yellow-500)]";
+    if (ratio >= 1) return "text-[var(--axis-status-error)]";
+    if (ratio >= warningThreshold) return "text-[var(--axis-status-warning)]";
     return "text-[var(--axis-text-secondary)]";
   };
   const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);

package/dist/{chunk-ETFET3LT.mjs → chunk-R4CMHIRO.mjs}

@@ -43,7 +43,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "like" ? "text-[var(--axis-color-green-500)] bg-[var(--axis-color-green-500)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
           }
@@ -57,7 +57,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "dislike" ? "text-[var(--axis-color-red-500)] bg-[var(--axis-color-red-500)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
           }

package/dist/{chunk-LZKOCELQ.mjs → chunk-SCXUEQLI.mjs}

@@ -7,10 +7,10 @@ import * as React from "react";
 import { cn } from "@axis-ds/ui-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var statusColors = {
-  pending: "bg-[var(--axis-color-gray-300)]",
-  running: "bg-[var(--axis-color-blue-500)] animate-pulse",
-  complete: "bg-[var(--axis-color-green-500)]",
-  error: "bg-[var(--axis-color-red-500)]"
+  pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
+  running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
+  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 var statusIcons = {
   pending: null,
@@ -44,7 +44,7 @@ function RunProgress({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
+            status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-status-running)] animate-pulse" }),
             /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
               status === "idle" && "\uB300\uAE30 \uC911",
               status === "running" && "\uC2E4\uD589 \uC911",
@@ -69,7 +69,7 @@ function RunProgress({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
+                className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all duration-300",
                 style: { width: `${progressPercent}%` }
               }
             )
@@ -89,7 +89,7 @@ function RunProgress({
                 "div",
                 {
                   className: cn(
-                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    "w-5 h-5 rounded-full flex items-center justify-center text-xs",
                     statusColors[step.status]
                   ),
                   "aria-hidden": "true",
@@ -121,7 +121,7 @@ function RunProgress({
             "button",
             {
               onClick: onRetry,
-              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-color-blue-500)] text-white hover:bg-[var(--axis-color-blue-600)]",
+              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
               children: "\uC7AC\uC2DC\uB3C4"
             }
           )

package/dist/{chunk-7UGSLEYG.mjs → chunk-UDL4M5RP.mjs}

@@ -16,7 +16,7 @@ function RecoveryBanner({
     {
       className: cn(
         "flex items-start gap-3 p-4 rounded-lg border",
-        "bg-[var(--axis-surface-error)] border-[var(--axis-color-red-200)]",
+        "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
         className
       ),
       role: "alert",
@@ -26,7 +26,7 @@ function RecoveryBanner({
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "w-5 h-5 text-[var(--axis-color-red-500)] flex-shrink-0 mt-0.5",
+            className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -51,7 +51,7 @@ function RecoveryBanner({
               {
                 onClick: onRetry,
                 "aria-describedby": descId,
-                className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-color-red-500)] text-white hover:bg-[var(--axis-color-red-600)] transition-colors",
+                className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)] transition-colors",
                 children: "\uC7AC\uC2DC\uB3C4"
               }
             ),

package/dist/{chunk-FAJF5RCY.mjs → chunk-WFYQINWD.mjs}

@@ -8,22 +8,22 @@ import { cn } from "@axis-ds/ui-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
-    color: "text-[var(--axis-color-gray-400)]",
+    color: "text-[var(--axis-status-neutral)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
   },
   running: {
-    color: "text-[var(--axis-color-blue-500)]",
+    color: "text-[var(--axis-status-running)]",
     icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
       /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
     ] })
   },
   success: {
-    color: "text-[var(--axis-color-green-500)]",
+    color: "text-[var(--axis-status-success)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
   },
   error: {
-    color: "text-[var(--axis-color-red-500)]",
+    color: "text-[var(--axis-status-error)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
   }
 };

package/dist/{chunk-MVBXXDZB.mjs → chunk-ZW4Z27AB.mjs}

@@ -12,7 +12,7 @@ function SurfaceRenderer({
         return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
       case "code":
         return /* @__PURE__ */ jsx("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
-      case "table":
+      case "table": {
         const tableData = surface.content;
         return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { role: "table", className: "w-full text-sm", children: [
           surface.title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: surface.title }),
@@ -41,6 +41,7 @@ function SurfaceRenderer({
             i
           )) })
         ] }) });
+      }
       case "chart":
         return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
           "[\uCC28\uD2B8: ",

package/dist/code-block/index.js

@@ -77,7 +77,7 @@ function CodeBlock({
               "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
               className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\uBCF5\uC0AC\uB428" })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),

package/dist/code-block/index.mjs

@@ -1,6 +1,6 @@
 import {
   CodeBlock
-} from "../chunk-RGBY6EEU.mjs";
+} from "../chunk-4CMUEGLK.mjs";
 export {
   CodeBlock
 };

package/dist/diff-viewer/index.js

@@ -79,13 +79,13 @@ function computeDiff(before, after) {
   return result;
 }
 var lineTypeStyles = {
-  added: "bg-[var(--axis-color-green-500)]/10",
-  removed: "bg-[var(--axis-color-red-500)]/10",
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
   unchanged: ""
 };
 var lineTypeTextStyles = {
-  added: "text-[var(--axis-color-green-600)]",
-  removed: "text-[var(--axis-color-red-600)]",
+  added: "text-[var(--axis-diff-added-text)]",
+  removed: "text-[var(--axis-diff-removed-text)]",
   unchanged: "text-[var(--axis-text-primary)]"
 };
 var lineTypeSymbols = {
@@ -119,11 +119,11 @@ function DiffViewer({
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
             filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-color-green-500)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
               "+",
               addedCount
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-color-red-500)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
               "-",
               removedCount
             ] })

package/dist/diff-viewer/index.mjs

@@ -1,6 +1,6 @@
 import {
   DiffViewer
-} from "../chunk-NRBIHROX.mjs";
+} from "../chunk-IOF4OET6.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   DiffViewer