@axis-ds/agentic-ui 1.2.0 → 1.3.0

package/dist/feedback-buttons/index.js

@@ -82,7 +82,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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" }) })
           }
@@ -96,7 +96,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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/feedback-buttons/index.mjs

@@ -1,6 +1,6 @@
 import {
   FeedbackButtons
-} from "../chunk-ETFET3LT.mjs";
+} from "../chunk-R4CMHIRO.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   FeedbackButtons

package/dist/index.js

@@ -115,10 +115,10 @@ var PLAN_STATUS_LABELS = {
 // src/run-progress/index.tsx
 var import_jsx_runtime = require("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,
@@ -152,7 +152,7 @@ function RunProgress({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-            status === "running" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
+            status === "running" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-status-running)] animate-pulse" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
               status === "idle" && "\uB300\uAE30 \uC911",
               status === "running" && "\uC2E4\uD589 \uC911",
@@ -177,7 +177,7 @@ function RunProgress({
             children: /* @__PURE__ */ (0, import_jsx_runtime.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}%` }
               }
             )
@@ -197,7 +197,7 @@ function RunProgress({
                 "div",
                 {
                   className: (0, import_ui_react.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",
@@ -229,7 +229,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"
             }
           )
@@ -283,13 +283,13 @@ function StepTimeline({
                 "aria-hidden": "true",
                 className: (0, import_ui_react2.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__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_ui_react2.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [
@@ -362,18 +362,18 @@ var import_ui_react4 = require("@axis-ds/ui-react");
 var import_jsx_runtime4 = 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)]"
   }
 };
@@ -383,10 +383,10 @@ var severityIcons = {
   error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.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,
@@ -597,22 +597,22 @@ var import_ui_react7 = require("@axis-ds/ui-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var statusConfig = {
   pending: {
-    color: "text-[var(--axis-color-gray-400)]",
+    color: "text-[var(--axis-status-neutral)]",
     icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
   }
 };
@@ -713,7 +713,7 @@ function SurfaceRenderer({
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
       case "code":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { role: "table", className: "w-full text-sm", children: [
           surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { className: "sr-only", children: surface.title }),
@@ -742,6 +742,7 @@ function SurfaceRenderer({
             i
           )) })
         ] }) });
+      }
       case "chart":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
           "[\uCC28\uD2B8: ",
@@ -797,7 +798,7 @@ function RecoveryBanner({
     {
       className: (0, import_ui_react9.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",
@@ -807,7 +808,7 @@ function RecoveryBanner({
         /* @__PURE__ */ (0, import_jsx_runtime9.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",
@@ -832,7 +833,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"
               }
             ),
@@ -861,14 +862,14 @@ var sizeStyles2 = {
   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,
@@ -904,7 +905,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: (0, import_ui_react10.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)]",
               sizeStyles2[size],
               typeColors[type]
             ),
@@ -933,7 +934,7 @@ var import_jsx_runtime11 = require("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",
@@ -1067,7 +1068,7 @@ function FeedbackButtons({
             className: (0, import_ui_react12.cn)(
               "rounded-md transition-colors",
               sizeStyles3[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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.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" }) })
           }
@@ -1081,7 +1082,7 @@ function FeedbackButtons({
             className: (0, import_ui_react12.cn)(
               "rounded-md transition-colors",
               sizeStyles3[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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.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" }) })
           }
@@ -1136,7 +1137,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_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\uBCF5\uC0AC\uB428" })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.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" }) }),
@@ -1206,13 +1207,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 = {
@@ -1246,11 +1247,11 @@ function DiffViewer({
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
             filename && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-color-green-500)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
               "+",
               addedCount
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-color-red-500)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
               "-",
               removedCount
             ] })
@@ -1329,39 +1330,39 @@ var import_ui_react15 = require("@axis-ds/ui-react");
 var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
-  running: /* @__PURE__ */ (0, import_jsx_runtime15.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__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
+  running: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  complete: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-red-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-  skipped: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
+  complete: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  skipped: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
 };
 function PlanCard({
   title,
@@ -1382,7 +1383,7 @@ function PlanCard({
       role: "region",
       "aria-labelledby": titleId,
       className: (0, import_ui_react15.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
@@ -1406,7 +1407,7 @@ function PlanCard({
             steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime15.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"
               }
@@ -1441,7 +1442,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"
             }
           ),
@@ -1457,7 +1458,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"
             }
           )
@@ -1581,13 +1582,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);
@@ -1685,7 +1686,7 @@ function AttachmentCard({
       className: (0, import_ui_react18.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: [
@@ -1728,7 +1729,7 @@ function AttachmentCard({
           status === "uploading" && progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.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/index.mjs

@@ -3,55 +3,55 @@ import {
 } from "./chunk-FYAMA32G.mjs";
 import {
   TokenUsageIndicator
-} from "./chunk-H6VXOP7U.mjs";
+} from "./chunk-QS6GQNSE.mjs";
 import {
   ToolCallCard
-} from "./chunk-FAJF5RCY.mjs";
+} from "./chunk-WFYQINWD.mjs";
 import {
   MessageBubble
-} from "./chunk-657RY6MM.mjs";
+} from "./chunk-J4FIMXXG.mjs";
 import {
   PlanCard
-} from "./chunk-PWKN5UHT.mjs";
+} from "./chunk-OYQX3SL4.mjs";
 import {
   RecoveryBanner
-} from "./chunk-7UGSLEYG.mjs";
+} from "./chunk-UDL4M5RP.mjs";
 import {
   RunProgress
-} from "./chunk-LZKOCELQ.mjs";
+} from "./chunk-SCXUEQLI.mjs";
 import {
   SourcePanel
 } from "./chunk-DPLGRVNQ.mjs";
 import {
   StepTimeline
-} from "./chunk-RGPKTWK4.mjs";
+} from "./chunk-4V4BWBRC.mjs";
 import {
   StreamingText
 } from "./chunk-GQYOOLDL.mjs";
 import {
   SurfaceRenderer
-} from "./chunk-MVBXXDZB.mjs";
+} from "./chunk-ZW4Z27AB.mjs";
 import {
   AgentAvatar
-} from "./chunk-KH4OXDEV.mjs";
+} from "./chunk-JY7MTMMB.mjs";
 import {
   ApprovalCard
-} from "./chunk-ENIWC4WX.mjs";
-import {
-  CodeBlock
-} from "./chunk-RGBY6EEU.mjs";
+} from "./chunk-7HTVJ6MK.mjs";
 import {
   AttachmentCard
-} from "./chunk-FPOHPDZ2.mjs";
+} from "./chunk-42KEAZ2Y.mjs";
+import {
+  CodeBlock
+} from "./chunk-4CMUEGLK.mjs";
 import {
   ContextPanel
 } from "./chunk-KJVPVBET.mjs";
 import {
   DiffViewer
-} from "./chunk-NRBIHROX.mjs";
+} from "./chunk-IOF4OET6.mjs";
 import {
   FeedbackButtons
-} from "./chunk-ETFET3LT.mjs";
+} from "./chunk-R4CMHIRO.mjs";
 import "./chunk-SCZ4BQ2G.mjs";
 export {
   AgentAvatar,

package/dist/message-bubble/index.js

@@ -37,7 +37,7 @@ var import_jsx_runtime = require("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/message-bubble/index.mjs

@@ -1,6 +1,6 @@
 import {
   MessageBubble
-} from "../chunk-657RY6MM.mjs";
+} from "../chunk-J4FIMXXG.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   MessageBubble