@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/src/components/Workflow/canvas/Canvas/Canvas.styles.ts

@@ -1,8 +1,10 @@
 import { type DefaultEdgeOptions, MarkerType } from '@xyflow/react';
 
+import { CANVAS_STROKE_TOKEN, colorVar } from '../colorVar';
+
 /**
- * Edge defaults. Stroke comes from a theme token (slate.700) via CSS var
- * since React Flow takes SVG-style props, not Chakra ones. The label
+ * Edge defaults. Stroke comes from a theme token (`CANVAS_STROKE_TOKEN`,
+ * `fg.icon` — a non-text mark, so ≥ 3:1 on the canvas) via CSS var since React Flow takes SVG-style props, not Chakra ones. The label
  * itself is rendered through the `labeled` custom edge so its
  * typography uses the design system's semantic `Subtext` primitive —
  * see `LabeledEdge.tsx`. The arrowhead makes each edge's direction
@@ -11,12 +13,12 @@ import { type DefaultEdgeOptions, MarkerType } from '@xyflow/react';
 export const defaultEdgeOptions: DefaultEdgeOptions = {
   type: 'labeled',
   style: {
-    stroke: 'var(--chakra-colors-slate-700)',
+    stroke: colorVar(CANVAS_STROKE_TOKEN),
     strokeWidth: 1.5,
   },
   markerEnd: {
     type: MarkerType.ArrowClosed,
-    color: 'var(--chakra-colors-slate-700)',
+    color: colorVar(CANVAS_STROKE_TOKEN),
     width: 18,
     height: 18,
   },
@@ -41,13 +43,13 @@ export const canvasSelectionCss = {
   // before it's selected. Listed before the `.selected` rule (equal
   // specificity) so selection styling wins when an edge is both.
   '& .react-flow__edge:hover .react-flow__edge-path': {
-    stroke: 'var(--chakra-colors-slate-900)',
+    stroke: 'var(--chakra-colors-fg-default)',
     strokeWidth: 2,
   },
   '& .react-flow__edge.selected .react-flow__edge-path': {
     stroke: 'var(--chakra-colors-primary-main)',
     strokeWidth: 2.5,
-    filter: 'drop-shadow(0 0 4px var(--chakra-colors-primary-lighter))',
+    filter: 'drop-shadow(0 0 4px var(--chakra-colors-primary-wash-active))',
   },
   '& .react-flow__edge.selected .react-flow__edge-interaction': {
     stroke: 'var(--chakra-colors-primary-main)',
@@ -57,20 +59,20 @@ export const canvasSelectionCss = {
   // the stock look). A solid surface (rather than transparent buttons) keeps the
   // icons legible as the canvas pans content beneath the cluster, and matches the
   // minimap panel in the opposite corner. Frame it like the node cards — md
-  // radius + slate.200 border + shadow — so it reads as a deliberate floating
+  // radius + border.default border + shadow — so it reads as a deliberate floating
   // toolbar; the border carries the definition in dark mode where the stock
   // shadow is invisible on the dark canvas. `overflow: hidden` clips the stacked
   // buttons to the rounded corners (tooltips portal out, so they aren't clipped).
   '& .react-flow__controls': {
     '--xy-controls-button-background-color': 'var(--chakra-colors-bg-surface)',
     '--xy-controls-button-background-color-hover':
-      'var(--chakra-colors-slate-100)',
-    '--xy-controls-button-color': 'var(--chakra-colors-slate-1200)',
-    '--xy-controls-button-color-hover': 'var(--chakra-colors-slate-1500)',
-    '--xy-controls-button-border-color': 'var(--chakra-colors-slate-200)',
+      'var(--chakra-colors-neutral-2)',
+    '--xy-controls-button-color': 'var(--chakra-colors-fg-icon)',
+    '--xy-controls-button-color-hover': 'var(--chakra-colors-fg-default)',
+    '--xy-controls-button-border-color': 'var(--chakra-colors-border-default)',
     '--xy-controls-box-shadow': 'var(--chakra-shadows-sm)',
     borderRadius: 'var(--chakra-radii-md)',
-    border: '1px solid var(--chakra-colors-slate-200)',
+    border: '1px solid var(--chakra-colors-border-default)',
     overflow: 'hidden',
   },
   // Our control glyphs (lucide Plus/Minus + Tabler arrows/lock/maximize/sitemap)

package/src/components/Workflow/canvas/Canvas/Canvas.tsx

@@ -21,7 +21,9 @@ import {
   IsValidConnection,
   MiniMap,
   NodeChange,
+  NodeToolbar,
   NodeTypes,
+  Position as HandleSide,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
@@ -34,7 +36,11 @@ import {
   isValidConnection as isValidWorkflowConnection,
   soleEdgeToHandle,
 } from '../../connectionRules';
-import { genId } from '../../createNode';
+import {
+  createNodeFromType,
+  genId,
+  toDefaultsTranslate,
+} from '../../createNode';
 import {
   autoLayout,
   estimateLabelOverhang,
@@ -47,7 +53,6 @@ import type {
   GraphNode,
   Position,
 } from '../../Workflow.types';
-import { resolveDefaultConfig } from '../../Workflow.types';
 import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
 import type { WorkflowReactFlowNode } from '../GenericNode';
 import { GenericNode } from '../GenericNode';
@@ -107,17 +112,22 @@ function graphToReactFlow(
   };
 }
 
+type CanvasProps = {
+  showPalette?: boolean;
+  onNodeClick?: (node: GraphNode) => void;
+  onEdgeClick?: (edge: GraphEdge) => void;
+  /** See `WorkflowProps.renderSelectedNodeToolbar`. */
+  renderSelectedNodeToolbar?: (node: GraphNode) => ReactNode;
+  children?: ReactNode;
+};
+
 function CanvasInner({
-  showPalette,
+  showPalette = true,
   onNodeClick: onNodeClickHost,
   onEdgeClick: onEdgeClickHost,
+  renderSelectedNodeToolbar,
   children,
-}: {
-  showPalette: boolean;
-  onNodeClick?: (node: GraphNode) => void;
-  onEdgeClick?: (edge: GraphEdge) => void;
-  children?: ReactNode;
-}) {
+}: CanvasProps) {
   const {
     graph,
     dispatch,
@@ -144,13 +154,6 @@ function CanvasInner({
   const [isPaletteOpen, setIsPaletteOpen] = useState(true);
 
   const translate = useWorkflowTranslate();
-  // Tear off only the string lookup so `localizeDefaults` doesn't depend
-  // on the React-fragment interpolation path.
-  const t = useCallback(
-    (key: string, params?: Record<string, string>) =>
-      translate(key, params) as string,
-    [translate]
-  );
 
   useWorkflowKeyboard();
 
@@ -606,32 +609,37 @@ function CanvasInner({
       if (!kind) return;
       const def = getNodeType(kind);
       if (!def) return;
-      const position = screenToFlowPosition({ x: e.clientX, y: e.clientY });
-      const base = resolveDefaultConfig(def) as Record<string, unknown>;
-      const overlay = def.localizeDefaults?.(t) as
-        | Record<string, unknown>
-        | undefined;
-      // Host-data overlay (e.g. a starting LLM picked from the tenant's live
-      // model list) — applied last so it wins over any static placeholder in
-      // `defaultConfig`. Keyed on the opaque `hostBridge`; the node type narrows
-      // it. Absent on a generic host, leaving the static defaults in place.
-      const bridged = def.hostDefaults?.(hostBridge) as
-        | Record<string, unknown>
-        | undefined;
-      const node = {
-        id: genId(kind),
-        kind,
-        position,
-        config: { ...base, ...overlay, ...bridged },
-      };
+      // Same builder `useWorkflowActions().addNode` uses, so a drop and a
+      // programmatic add get the same `{kind}_{N}` id and starting config.
+      const node = createNodeFromType(def, {
+        position: screenToFlowPosition({ x: e.clientX, y: e.clientY }),
+        nodes: graph.nodes,
+        translate: toDefaultsTranslate(translate),
+        hostBridge,
+      });
 
       // Dropped nodes land unconnected — authors wire edges explicitly by
       // dragging from an exit point.
       dispatch({ type: 'addNode', node });
     },
-    [dispatch, getNodeType, screenToFlowPosition, t, hostBridge]
+    [
+      dispatch,
+      getNodeType,
+      screenToFlowPosition,
+      graph.nodes,
+      translate,
+      hostBridge,
+    ]
   );
 
+  const selectedNode = selectedNodeId
+    ? graph.nodes.find((n) => n.id === selectedNodeId)
+    : undefined;
+  const selectedNodeToolbar =
+    selectedNode && renderSelectedNodeToolbar
+      ? renderSelectedNodeToolbar(selectedNode)
+      : null;
+
   // Does the canvas top-left corner actually hold overlay chrome the zoom
   // controls should tuck under? The palette toggle docks there when the palette
   // is collapsed, and the error banner when the (editable) graph has issues. If
@@ -649,14 +657,14 @@ function CanvasInner({
       // Tint the whole canvas region — not just the React Flow column — so the
       // floating palette (left) and inspector (right) read as cards over a tinted
       // surface instead of white sidebars. Read-only (version preview) drops to a
-      // neutral gray so the mode reads as "not your live workspace".
-      // Dark mode uses bg.canvas for both: primary.lightest's _dark is blue.900
-      // (#04102A), a saturated navy that overpowers the desaturated dark palette
-      // as a full-canvas fill, and slate.100's _dark sits ABOVE bg.surface, which
-      // would invert the node cards' lift. bg.canvas keeps the cards lifted in
-      // both modes; read-only is still cued by the absent editor chrome.
+      // neutral gray (`bg.subtle`) so the mode reads as "not your live workspace".
+      // Dark mode uses bg.canvas for both: a saturated full-canvas tint would
+      // overpower the desaturated dark palette, and a light neutral wash would
+      // sit ABOVE bg.surface, which would invert the node cards' lift. bg.canvas
+      // keeps the cards lifted in both modes; read-only is still cued by the
+      // absent editor chrome.
       bgColor={{
-        base: readOnly ? 'slate.100' : 'primary.lightest',
+        base: readOnly ? 'bg.subtle' : 'primary.wash',
         _dark: 'bg.canvas',
       }}
     >
@@ -716,6 +724,18 @@ function CanvasInner({
           proOptions={{ hideAttribution: true }}
         >
           <Background />
+          {selectedNode && selectedNodeToolbar ? (
+            // Positioned in screen space beside the node's exit side, so the
+            // host's content keeps its size at any zoom.
+            <NodeToolbar
+              nodeId={selectedNode.id}
+              isVisible
+              position={HandleSide.Right}
+              offset={4}
+            >
+              {selectedNodeToolbar}
+            </NodeToolbar>
+          ) : null}
           <CanvasControls
             readOnly={readOnly}
             onAutoArrange={onAutoArrange}
@@ -729,8 +749,8 @@ function CanvasInner({
             pannable
             zoomable
             bgColor="var(--chakra-colors-bg-surface)"
-            nodeColor="var(--chakra-colors-slate-200)"
-            maskColor="color-mix(in srgb, var(--chakra-colors-slate-100) 60%, transparent)"
+            nodeColor="var(--chakra-colors-border-default)"
+            maskColor="color-mix(in srgb, var(--chakra-colors-bg-subtle) 60%, transparent)"
           />
         </ReactFlow>
         {showPalette && !isPaletteOpen ? (
@@ -748,26 +768,10 @@ function CanvasInner({
   );
 }
 
-export function Canvas({
-  showPalette = true,
-  onNodeClick,
-  onEdgeClick,
-  children,
-}: {
-  showPalette?: boolean;
-  onNodeClick?: (node: GraphNode) => void;
-  onEdgeClick?: (edge: GraphEdge) => void;
-  children?: ReactNode;
-}) {
+export function Canvas(props: CanvasProps) {
   return (
     <ReactFlowProvider>
-      <CanvasInner
-        showPalette={showPalette}
-        onNodeClick={onNodeClick}
-        onEdgeClick={onEdgeClick}
-      >
-        {children}
-      </CanvasInner>
+      <CanvasInner {...props} />
     </ReactFlowProvider>
   );
 }

package/src/components/Workflow/canvas/Canvas/CanvasControls.tsx

@@ -10,14 +10,14 @@ import {
 } from '@xyflow/react';
 
 import {
-  Minus,
-  Plus,
-  TbArrowBackUp,
-  TbArrowForwardUp,
-  TbLock,
-  TbLockOpen,
-  TbMaximize,
-  TbSitemap,
+  ArrowBackUpIcon,
+  ArrowForwardUpIcon,
+  LockIcon,
+  LockOpenIcon,
+  MaximizeIcon,
+  MinusIcon,
+  PlusIcon,
+  SitemapIcon,
 } from '@/components/Icon';
 import { Tooltip } from '@/components/Tooltip';
 
@@ -115,12 +115,12 @@ export function CanvasControls({
     >
       <Tooltip content={zoomInLabel} placement="right">
         <ControlButton onClick={() => zoomIn()} aria-label={zoomInLabel}>
-          <Plus />
+          <PlusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={zoomOutLabel} placement="right">
         <ControlButton onClick={() => zoomOut()} aria-label={zoomOutLabel}>
-          <Minus />
+          <MinusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={fitViewLabel} placement="right">
@@ -128,7 +128,7 @@ export function CanvasControls({
           onClick={() => fitView(fitViewOptions)}
           aria-label={fitViewLabel}
         >
-          <TbMaximize />
+          <MaximizeIcon />
         </ControlButton>
       </Tooltip>
       {/* Undo/redo, the interactivity lock and auto-arrange are authoring
@@ -141,7 +141,7 @@ export function CanvasControls({
             disabled={!canUndo}
             aria-label={undoLabel}
           >
-            <TbArrowBackUp />
+            <ArrowBackUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -152,7 +152,7 @@ export function CanvasControls({
             disabled={!canRedo}
             aria-label={redoLabel}
           >
-            <TbArrowForwardUp />
+            <ArrowForwardUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -162,14 +162,14 @@ export function CanvasControls({
             onClick={onToggleInteractivity}
             aria-label={interactivityLabel}
           >
-            {isInteractive ? <TbLockOpen /> : <TbLock />}
+            {isInteractive ? <LockOpenIcon /> : <LockIcon />}
           </ControlButton>
         </Tooltip>
       )}
       {readOnly ? null : (
         <Tooltip content={autoArrangeLabel} placement="right">
           <ControlButton onClick={onAutoArrange} aria-label={autoArrangeLabel}>
-            <TbSitemap />
+            <SitemapIcon />
           </ControlButton>
         </Tooltip>
       )}

package/src/components/Workflow/canvas/Canvas/LabeledEdge.tsx

@@ -16,7 +16,7 @@ import {
   getSmoothStepPath,
 } from '@xyflow/react';
 
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 
 import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
@@ -181,12 +181,12 @@ export function LabeledEdge({
                   aria-label={translate('workflow_edge_delete') as string}
                   onClick={onDelete}
                   size="xs"
-                  variant="outline"
-                  colorPalette="danger"
+                  variant="secondary"
+                  isDestructive
                   bg="bg.surface"
                   borderRadius="full"
                 >
-                  <TbX boxSize="xs" />
+                  <CloseIcon boxSize="xs" />
                 </IconButton>
               </Box>
             ) : null}

package/src/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.tsx

@@ -3,7 +3,11 @@
 import { ReactNode, useId, useState } from 'react';
 import { Box, HStack, Stack, type StackProps } from '@chakra-ui/react';
 
-import { TbAlertCircle, TbChevronDown, TbChevronUp } from '@/components/Icon';
+import {
+  AlertCircleIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 export type CollapsibleSectionProps = StackProps & {
@@ -63,11 +67,11 @@ export function CollapsibleSection({
         bg="transparent"
         border="none"
         textAlign="left"
-        _hover={{ bg: 'slate.50' }}
+        _hover={{ bg: 'primary.wash' }}
       >
         <Subtext
           fontWeight="bold"
-          color="slate.900"
+          color="fg.muted"
           textTransform="uppercase"
           letterSpacing="wider"
         >
@@ -75,13 +79,13 @@ export function CollapsibleSection({
         </Subtext>
         <HStack gap={1.5} onClick={(e) => e.stopPropagation()}>
           {headerAction}
-          <Box color="slate.900" display="flex" alignItems="center">
+          <Box color="fg.muted" display="flex" alignItems="center">
             {showErrorGlyph ? (
-              <TbAlertCircle boxSize="xs" color="danger.main" />
+              <AlertCircleIcon boxSize="xs" color="danger.fg" />
             ) : expanded ? (
-              <TbChevronUp boxSize="xs" />
+              <ChevronUpIcon boxSize="xs" />
             ) : (
-              <TbChevronDown boxSize="xs" />
+              <ChevronDownIcon boxSize="xs" />
             )}
           </Box>
         </HStack>

package/src/components/Workflow/canvas/DrawerShell/DrawerHeader.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode } from 'react';
 import { HStack } from '@chakra-ui/react';
 
-import { RxDotsHorizontal, TbX } from '@/components/Icon';
+import { CloseIcon, DotsHorizontalIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Menu } from '@/components/Menu';
 import { Subtext, Text } from '@/components/Typography';
@@ -60,7 +60,7 @@ export function DrawerHeader({
       px={4}
       py={3}
       borderBottom="1px solid"
-      borderColor="slate.200"
+      borderColor="border.default"
     >
       <HStack gap={2} minW={0} flex="1">
         {icon}
@@ -68,7 +68,7 @@ export function DrawerHeader({
           {title}
         </Text>
         {subtitle ? (
-          <Subtext color="slate.700" flexShrink={0}>
+          <Subtext color="fg.subtle" flexShrink={0}>
             {subtitle}
           </Subtext>
         ) : null}
@@ -81,9 +81,8 @@ export function DrawerHeader({
                 aria-label={translate('workflow_node_overflow_label') as string}
                 size="xs"
                 variant="ghost"
-                colorPalette="neutral"
               >
-                <RxDotsHorizontal boxSize="xs" />
+                <DotsHorizontalIcon boxSize="xs" />
               </IconButton>
             </Menu.Trigger>
             <Menu.List zIndex="popover">{menuItems}</Menu.List>
@@ -93,10 +92,9 @@ export function DrawerHeader({
           aria-label={translate('workflow_node_close') as string}
           size="xs"
           variant="ghost"
-          colorPalette="neutral"
           onClick={onClose}
         >
-          <TbX boxSize="xs" aria-hidden />
+          <CloseIcon boxSize="xs" aria-hidden />
         </IconButton>
       </HStack>
     </HStack>

package/src/components/Workflow/canvas/DrawerShell/DrawerIssues.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode, useMemo } from 'react';
 import { Box, HStack, VStack } from '@chakra-ui/react';
 
-import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { AlertCircleIcon, AlertTriangleIcon } from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
@@ -27,7 +27,7 @@ interface DrawerIssuesProps {
  * then the messages as a bulleted list beneath. Severities never mix in a box
  * so the icon, heading and tint stay meaningful.
  *
- * Markers use the severity's `dark` tone via `SeverityDot` — the CSS list
+ * Markers use the severity's `fg` tone via `SeverityDot` — the CSS list
  * `::marker` defaults to a muted grey that reads as an odd low-contrast dot on
  * the tinted background.
  */
@@ -43,7 +43,7 @@ function IssueCallout({
   resolveMessage: (issue: Issue) => string;
 }) {
   const { bg, color, borderColor } = severityCalloutStyle(severity);
-  const Icon = severity === 'error' ? TbAlertCircle : AlertTriangle;
+  const Icon = severity === 'error' ? AlertCircleIcon : AlertTriangleIcon;
   return (
     <Box
       border="1px solid"
@@ -63,7 +63,7 @@ function IssueCallout({
         <VStack align="stretch" gap={0.5} ps={1}>
           {issues.map((issue, i) => (
             <HStack key={`${issue.code}_${i}`} gap={2} align="flex-start">
-              <SeverityDot severity={severity} tone="dark" mt={1.5} />
+              <SeverityDot severity={severity} tone="fg" mt={1.5} />
               <Subtext color={color}>{resolveMessage(issue)}</Subtext>
             </HStack>
           ))}

package/src/components/Workflow/canvas/DrawerShell/DrawerShell.tsx

@@ -4,7 +4,7 @@ import { type ComponentType, type ReactNode, useEffect, useMemo } from 'react';
 import { Box, chakra } from '@chakra-ui/react';
 
 import { Button } from '@/components/Button';
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { Menu } from '@/components/Menu';
 import { Text } from '@/components/Typography';
 
@@ -244,7 +244,7 @@ function NodeDrawer({
   const header = (
     <DrawerHeader
       icon={
-        <Box color="slate.1200" display="flex" alignItems="center">
+        <Box color="fg.icon" display="flex" alignItems="center">
           <Icon boxSize="xs" />
         </Box>
       }
@@ -269,7 +269,7 @@ function NodeDrawer({
             </Menu.Item>
             <Menu.Item
               value="delete"
-              color="danger.main"
+              color="danger.fg"
               onClick={() => {
                 dispatch({ type: 'deleteNode', id: node.id });
                 setDrawerTarget(null);
@@ -298,7 +298,7 @@ function NodeDrawer({
             onChange={applyConfig}
           />
         ) : (
-          <Text color="slate.600" fontSize="sm" px={4} py={4}>
+          <Text color="fg.muted" fontSize="sm" px={4} py={4}>
             {translate('workflow_drawer_empty_settings')}
           </Text>
         )}
@@ -390,15 +390,15 @@ function EdgeDrawer({
       {/* Explicit delete affordance for the edge — outside the read-only
           fieldset, and hidden entirely in the version-history preview. */}
       {readOnly ? null : (
-        <Box borderTopWidth="1px" borderColor="slate.200" px={4} py={3}>
+        <Box borderTopWidth="1px" borderColor="border.default" px={4} py={3}>
           <Button
             size="sm"
-            variant="outline"
-            colorPalette="danger"
+            variant="secondary"
+            isDestructive
             width="100%"
             onClick={onDelete}
           >
-            <TbX boxSize="xs" />
+            <CloseIcon boxSize="xs" />
             {translate('workflow_edge_delete') as string}
           </Button>
         </Box>

package/src/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.tsx

@@ -84,7 +84,7 @@ export function BuiltInEdgeInspector({
         </FieldWrapper>
 
         <Stack gap={1.5}>
-          <Subtext fontWeight="semibold" color="slate.1300">
+          <Subtext fontWeight="semibold" color="fg.default">
             {translate('workflow_edge_endpoints_heading') as string}
           </Subtext>
           <Stack gap={2}>
@@ -127,9 +127,9 @@ function EndpointRow({
 }) {
   return (
     <Stack gap={0.5}>
-      <Subtext color="slate.900">{label}</Subtext>
-      <Subtext color="slate.1200">{title}</Subtext>
-      {portLabel ? <Subtext color="slate.700">{portLabel}</Subtext> : null}
+      <Subtext color="fg.muted">{label}</Subtext>
+      <Subtext color="fg.default">{title}</Subtext>
+      {portLabel ? <Subtext color="fg.subtle">{portLabel}</Subtext> : null}
     </Stack>
   );
 }

package/src/components/Workflow/canvas/FieldWrapper/FieldWrapper.tsx

@@ -3,7 +3,7 @@
 import { ReactNode, useMemo, useRef } from 'react';
 import { HStack, Stack } from '@chakra-ui/react';
 
-import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { AlertCircleIcon, AlertTriangleIcon } from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
@@ -93,7 +93,7 @@ export function FieldWrapper({
   return (
     <Stack ref={containerRef} gap={1.5}>
       <HStack justify="space-between" align="center" gap={2}>
-        <Subtext fontWeight="semibold" color="slate.1300">
+        <Subtext fontWeight="semibold" color="fg.default">
           {label}
         </Subtext>
         {labelAction ?? null}
@@ -103,15 +103,15 @@ export function FieldWrapper({
         <HStack gap={1} align="center">
           <Subtext color={toneColor} display="flex" alignItems="center">
             {tone === 'danger' ? (
-              <TbAlertCircle boxSize="xs" />
+              <AlertCircleIcon boxSize="xs" />
             ) : (
-              <AlertTriangle boxSize="xs" />
+              <AlertTriangleIcon boxSize="xs" />
             )}
           </Subtext>
           <Subtext color={toneColor}>{resolveIssueMessage(issue)}</Subtext>
         </HStack>
       ) : helperText ? (
-        <Subtext color="slate.900">{helperText}</Subtext>
+        <Subtext color="fg.muted">{helperText}</Subtext>
       ) : null}
     </Stack>
   );

package/src/components/Workflow/canvas/GenericNode/GenericNode.tsx

@@ -3,7 +3,7 @@
 import { memo, useMemo } from 'react';
 import type { NodeProps } from '@xyflow/react';
 
-import { AlertOctagon } from '@/components/Icon';
+import { AlertOctagonIcon } from '@/components/Icon';
 
 import type { GraphNode } from '../../Workflow.types';
 import { useWorkflow } from '../../WorkflowContext';
@@ -56,7 +56,7 @@ export const GenericNode = memo(function GenericNode(
         // safety category surfaces the broken-ness in the icon tile, not
         // only in the error ring chrome.
         category="safety"
-        icon={AlertOctagon}
+        icon={AlertOctagonIcon}
         selected={!!selected}
         runState="error"
         issues={[