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

package/src/components/Typography/Link.tsx

@@ -26,37 +26,31 @@ export type LinkCustomProps<TElement extends ElementType = 'a'> =
  * still clear the contrast bar. Asserting only the second half is a test that
  * passes while the component points somewhere else entirely — which is how the
  * dark hover regressed with a green suite.
+ *
+ * 5.0: every entry is a flipping semantic role — `fg.link` / `fg.linkHover` /
+ * `danger.fg` each already resolve to the right hex in light and dark — so a
+ * ramp step is one token, not the 4.x `{ base, _dark }` pair of hand-picked
+ * steps. There is no darker danger token than `danger.fg` today, so the error
+ * link does not change colour on hover (only its underline thickens).
  */
 export const LINK_RAMP = {
-  default: { base: 'primary.main', _dark: 'primary.dark' },
-  error: { base: 'danger.main', _dark: 'danger.dark' },
-  defaultHover: { base: 'primary.dark', _dark: 'primary.darker' },
-  errorHover: { base: 'danger.dark', _dark: 'danger.darker' },
+  default: 'fg.link',
+  error: 'danger.fg',
+  defaultHover: 'fg.linkHover',
+  errorHover: 'danger.fg',
 } as const;
 
 const LinkImpl = forwardRef<HTMLAnchorElement, LinkOwnProps>(
   ({ color, variant, ...rest }, ref) => {
-    // Theme-aware, because `.main` is tuned against a WHITE page. On the dark
-    // canvas (#181A20) `primary.main` measures 4.19:1 and `danger.main` 4.26:1
-    // — both under the 4.5:1 that KWCAG 2.1 5.1.3.3 (명도 대비) asks of body
-    // text, and every link in a consuming app inherits it. The `.dark` end of
-    // each ramp is the far side from the PAGE rather than a fixed lightness, so
-    // in dark mode it resolves lighter: 6.68:1 and 6.38:1.
+    // `fg.link` / `danger.fg` are flipping semantic roles, tuned against their
+    // own canvas in both modes — unlike the 4.x `primary.*` ramp, there is no
+    // light/dark arm to hand-pick here. KWCAG 2.1 5.1.3.3 (명도 대비) still
+    // applies to every state a user can put the link in: the default link's
+    // hover has its own token (`fg.linkHover`); the error link's hover keeps
+    // `danger.fg` (no darker danger token exists), so for it the thicker
+    // underline is the only hover cue.
     const defaultColor = LINK_RAMP.default;
     const errorColor = LINK_RAMP.error;
-    // The hover has to move AWAY from the page in BOTH modes, and `.main` is
-    // the wrong end of the ramp to move toward in dark. Mirroring the light
-    // step ("one darker") instead of reflecting it sent the dark hover back
-    // toward the background: resting 6.68:1 → hovering **4.19:1**, under the
-    // same 4.5:1 the resting colour above was just fixed to clear. KWCAG
-    // 5.3.3 applies to text in every state a user can put it in, and hover is
-    // a state a mouse user is IN while reading the link.
-    //
-    // `.darker` is the step past `.dark` at both ends, so one token is correct
-    // in both modes with no special-casing: light 11.98:1 (unchanged from
-    // before), dark 10.68:1. Error the same: 10.83:1 and 10.34:1.
-    //
-    // No axe rule would have caught this — it measures the resting state only.
     const defaultHoverColor = LINK_RAMP.defaultHover;
     const errorHoverColor = LINK_RAMP.errorHover;
 
@@ -75,16 +69,20 @@ const LinkImpl = forwardRef<HTMLAnchorElement, LinkOwnProps>(
     return (
       <ChakraLink
         ref={ref}
-        // Inherit the surrounding text weight so an inline link reads as part of
-        // its sentence (extrabold inside an H1, body weight inside a paragraph)
-        // rather than a fixed-semibold patch. Color + underline carry the link
-        // affordance. Override with an explicit `fontWeight` when needed.
-        fontWeight="inherit"
+        // 5.0: links carry their own weight (500) instead of inheriting the
+        // surrounding text's, because colour alone (`fg.link`) no longer
+        // reads as an affordance against every body-text colour in the fg.*
+        // scale the way `primary.main` used to. `{...rest}` below still lets
+        // a call site override it.
+        fontWeight={500}
         wordBreak="keep-all"
         color={linkColor}
+        textDecoration="underline"
+        textDecorationThickness="1px"
+        textUnderlineOffset="3px"
         _hover={{
           color: hoverColor,
-          textDecor: 'none',
+          textDecorationThickness: '2px',
         }}
         {...rest}
       />

package/src/components/Typography/Overline.tsx

@@ -12,7 +12,7 @@ import { TypographyOwnProps } from './Typography.types';
  * Part of the typography scale alongside `Subtext` — it shares the subtext size
  * but adds the baked-in overline styling (`textStyle="overline"`: uppercase,
  * wider tracking, medium weight). Every aspect stays one Chakra prop away, so
- * brand/status variants are a single override (e.g. `color="primary.main"`,
+ * brand/status variants are a single override (e.g. `color="fg.default"`,
  * `fontWeight="extrabold"`).
  */
 const OverlineImpl = forwardRef<HTMLParagraphElement, TypographyOwnProps>(
@@ -25,7 +25,7 @@ const OverlineImpl = forwardRef<HTMLParagraphElement, TypographyOwnProps>(
         // If fontSize is provided, disable textStyle to allow the override
         textStyle={fontSize ? undefined : 'overline'}
         fontSize={fontSize}
-        color="slate.800"
+        color="fg.muted"
         wordBreak="keep-all"
         {...rest}
       />

package/src/components/Workflow/README.md

@@ -8,7 +8,7 @@ domain by registering node types, and you wire up the surrounding chrome
 (persistence, validation, an inspector) however your app wants.
 
 > Mental model: this is to a workflow editor what React Flow is to a canvas —
-> batteries for the editor, but *you bring the nodes* (and decide what clicking
+> batteries for the editor, but _you bring the nodes_ (and decide what clicking
 > one does).
 
 - [Quick start](#quick-start)
@@ -52,7 +52,7 @@ const messageNode = defineNodeType<MessageConfig>({
   icon: Sparkles,
   defaultConfig: () => ({ text: '' }),
   handles: () => ({ inputs: [{ id: 'in' }], outputs: [{ id: 'out' }] }),
-  getMetaChips: config => (config.text ? [config.text] : []),
+  getMetaChips: (config) => (config.text ? [config.text] : []),
   // Optional: the body shown in the inspector drawer when this node is selected.
   renderDrawer: ({ config, onChange, readOnly }) => (
     <FormControl>
@@ -60,7 +60,7 @@ const messageNode = defineNodeType<MessageConfig>({
       <Input
         value={config.text}
         disabled={readOnly}
-        onChange={e => onChange({ ...config, text: e.target.value })}
+        onChange={(e) => onChange({ ...config, text: e.target.value })}
       />
     </FormControl>
   ),
@@ -92,24 +92,24 @@ A node type is a plain object created with `defineNodeType<TConfig>(...)`, where
 `TConfig` is the shape of that node's `config`. The framework knows nothing about
 your kinds — it just renders what the registry describes.
 
-| Field | Required | Purpose |
-| --- | --- | --- |
-| `kind` | ✓ | Stable id for the type (e.g. `'message'`). Used in `node.kind` and id generation. Keep it English/snake-ish. |
-| `label` | ✓ | Short operational noun shown on the card and in the palette. Intentionally **not** translated (matches n8n/Make/Dify). |
-| `category` | ✓ | One of `trigger` · `ai` · `logic` · `safety` · `output` · `note`. Drives the icon-tile color. Color attaches to **category**, not kind. |
-| `icon` | ✓ | A `CreatedIcon` (wrap any icon with `createIcon` from this package, or use one of the exported icons). |
-| `defaultConfig` | ✓ | Value or factory `() => TConfig` for a freshly-dropped node. Prefer the factory for nested/mutable defaults. |
-| `handles` | ✓ | `(config) => ({ inputs, outputs })`. Can depend on config (e.g. a classifier emitting one output per category). |
-| `renderDrawer` | – | The inspector body for this kind. Omit and clicking the node is a no-op for editing. |
-| `renderNode` | – | Escape hatch to fully replace the card body (e.g. a sticky Note). Most types use `getInstanceTitle` + `getMetaChips` instead. |
-| `getInstanceTitle` | – | `(config) => string` for the snake_case identifier line. Defaults to the node id. |
-| `getMetaChips` | – | `(config) => (string \| { text, tone })[]` — small chips under the title. `tone: 'danger' \| 'warning'` tints a value. |
-| `descriptionKey` / `description` | – | Palette description. Prefer `descriptionKey` (resolved through your `translate`). |
-| `placement` | – | Declarative constraints read by the palette/canvas: `minCount`, `maxCount`, `pinned` (can't delete), `role: 'start' \| 'end'`, `mustFollow(Directly)`. |
-| `canConnect` | – | `(ctx) => boolean \| string` to reject a connection (return a reason string to explain). |
-| `outputSchema` | – | `(config) => JSONSchema \| undefined` for variable-resolution features. |
-| `getGraphIssues` | – | FE, graph-aware advisories merged into the node's canvas chrome (e.g. an unconnected required exit). Pure + cheap; runs every render. |
-| `localizeDefaults` / `hostDefaults` | – | Overlay defaults at creation time using the translator / the `hostBridge` (e.g. seed a node's model from the tenant's live list). |
+| Field                               | Required | Purpose                                                                                                                                                |
+| ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `kind`                              | ✓        | Stable id for the type (e.g. `'message'`). Used in `node.kind` and id generation. Keep it English/snake-ish.                                           |
+| `label`                             | ✓        | Short operational noun shown on the card and in the palette. Intentionally **not** translated (matches n8n/Make/Dify).                                 |
+| `category`                          | ✓        | One of `trigger` · `ai` · `logic` · `safety` · `output` · `note`. Drives the icon-tile color. Color attaches to **category**, not kind.                |
+| `icon`                              | ✓        | A `CreatedIcon` (wrap any icon with `createIcon` from this package, or use one of the exported icons).                                                 |
+| `defaultConfig`                     | ✓        | Value or factory `() => TConfig` for a freshly-dropped node. Prefer the factory for nested/mutable defaults.                                           |
+| `handles`                           | ✓        | `(config) => ({ inputs, outputs })`. Can depend on config (e.g. a classifier emitting one output per category).                                        |
+| `renderDrawer`                      | –        | The inspector body for this kind. Omit and clicking the node is a no-op for editing.                                                                   |
+| `renderNode`                        | –        | Escape hatch to fully replace the card body (e.g. a sticky Note). Most types use `getInstanceTitle` + `getMetaChips` instead.                          |
+| `getInstanceTitle`                  | –        | `(config) => string` for the snake_case identifier line. Defaults to the node id.                                                                      |
+| `getMetaChips`                      | –        | `(config) => (string \| { text, tone })[]` — small chips under the title. `tone: 'danger' \| 'warning'` tints a value.                                 |
+| `descriptionKey` / `description`    | –        | Palette description. Prefer `descriptionKey` (resolved through your `translate`).                                                                      |
+| `placement`                         | –        | Declarative constraints read by the palette/canvas: `minCount`, `maxCount`, `pinned` (can't delete), `role: 'start' \| 'end'`, `mustFollow(Directly)`. |
+| `canConnect`                        | –        | `(ctx) => boolean \| string` to reject a connection (return a reason string to explain).                                                               |
+| `outputSchema`                      | –        | `(config) => JSONSchema \| undefined` for variable-resolution features.                                                                                |
+| `getGraphIssues`                    | –        | FE, graph-aware advisories merged into the node's canvas chrome (e.g. an unconnected required exit). Pure + cheap; runs every render.                  |
+| `localizeDefaults` / `hostDefaults` | –        | Overlay defaults at creation time using the translator / the `hostBridge` (e.g. seed a node's model from the tenant's live list).                      |
 
 `resolveDefaultConfig(def)` is exported if you need to materialize a default
 config yourself.
@@ -138,7 +138,7 @@ each node type's `renderDrawer` — that's where domain-specific UI lives (model
 pickers, validators, even modals). The framework never sees it.
 
 **3. Fully custom — drive your own UI.** Omit `<NodeInspector>` entirely and render
-your own panel *anywhere in your app* from the selection signal. See below.
+your own panel _anywhere in your app_ from the selection signal. See below.
 
 ---
 
@@ -248,7 +248,7 @@ function AddAgentButton() {
 ## Controlled vs uncontrolled graph
 
 - **Controlled:** pass `graph` and `onGraphChange`. You own the source of truth.
-  Pass a *stable* reference and update it from `onGraphChange`.
+  Pass a _stable_ reference and update it from `onGraphChange`.
 - **Uncontrolled:** pass `defaultGraph` (or nothing) and read changes via
   `onGraphChange` if you like. The component keeps its own state.
 
@@ -283,7 +283,7 @@ reload.
 
 ## Validation & issues
 
-Validation is **not** built in — the editor *renders* issues you supply, it does
+Validation is **not** built in — the editor _renders_ issues you supply, it does
 not compute them. This keeps the source of truth wherever it belongs (usually
 your backend).
 
@@ -291,7 +291,7 @@ your backend).
 <Workflow
   nodeTypes={NODE_TYPES}
   graph={graph}
-  issues={issues}            // Issue[] you own — render-only
+  issues={issues} // Issue[] you own — render-only
   validating={isRevalidating} // show a "rechecking" affordance, keep prior issues
 />
 ```
@@ -300,10 +300,10 @@ your backend).
 type Issue = {
   severity: 'error' | 'warning';
   code: string;
-  message: string;              // English fallback
-  nodeId?: string;             // attaches to a node
-  edgeId?: string;             // attaches to an edge
-  fieldKey?: string;           // renders inline under a specific field
+  message: string; // English fallback
+  nodeId?: string; // attaches to a node
+  edgeId?: string; // attaches to an edge
+  fieldKey?: string; // renders inline under a specific field
   messageVars?: Record<string, string | number>;
 };
 ```
@@ -371,7 +371,13 @@ depends on it.
 
 ```tsx
 // Static, read-only thumbnail.
-<Workflow nodeTypes={NODE_TYPES} graph={graph} readOnly showPalette={false} minHeight={0} />
+<Workflow
+  nodeTypes={NODE_TYPES}
+  graph={graph}
+  readOnly
+  showPalette={false}
+  minHeight={0}
+/>
 ```
 
 Advanced: `useWorkflow()` (inside the tree) exposes the graph, `dispatch`,
@@ -382,28 +388,28 @@ surfaces.
 
 ## Props reference
 
-| Prop | Type | Notes |
-| --- | --- | --- |
-| `nodeTypes` | `NodeTypeDef[]` | **Required.** Your registered kinds. |
-| `graph` | `Graph` | Controlled graph (pair with `onGraphChange`). |
-| `onGraphChange` | `(g: Graph) => void` | Fired on every edit. |
-| `defaultGraph` | `Graph` | Uncontrolled initial graph. |
-| `translate` | `(key, vars?) => ReactNode` | Chrome + `descriptionKey` translator. |
-| `issues` | `Issue[]` | Render-only validation (pass a stable ref). |
-| `validating` | `boolean` | Show "rechecking" while issues are stale/in-flight. |
-| `readOnly` | `boolean` | Disable editing; palette hidden. |
-| `showPalette` | `boolean` | Default `true`. |
-| `onSelectionChange` | `(sel \| null) => void` | Selection changed (node/edge/deselect). |
-| `onNodeClick` / `onEdgeClick` | `(node) / (edge) => void` | Raw click convenience. |
-| `onArrange` | `(g: Graph) => void` | After one-click auto-arrange. |
-| `onHistoryNavigate` | `(g: Graph) => void` | After undo/redo. |
-| `children` | `ReactNode` | Canvas overlay slot (mount `<NodeInspector>` here). |
-| `renderSelectedNodeToolbar` | `(node) => ReactNode` | Content beside the selected node (e.g. a "+"). |
-| `footer` | `ReactNode` | Slot below the canvas. |
-| `categoryTokens` | `CategoryTokenMap` | Override category → color tokens. |
-| `hostBridge` | `unknown` | Opaque host data for inspectors. |
-| `minHeight` | `string \| number` | Default `'500px'`. |
-| `onIssuesChange` | `(issues) => void` | Notified when the issues ref changes. |
+| Prop                          | Type                        | Notes                                               |
+| ----------------------------- | --------------------------- | --------------------------------------------------- |
+| `nodeTypes`                   | `NodeTypeDef[]`             | **Required.** Your registered kinds.                |
+| `graph`                       | `Graph`                     | Controlled graph (pair with `onGraphChange`).       |
+| `onGraphChange`               | `(g: Graph) => void`        | Fired on every edit.                                |
+| `defaultGraph`                | `Graph`                     | Uncontrolled initial graph.                         |
+| `translate`                   | `(key, vars?) => ReactNode` | Chrome + `descriptionKey` translator.               |
+| `issues`                      | `Issue[]`                   | Render-only validation (pass a stable ref).         |
+| `validating`                  | `boolean`                   | Show "rechecking" while issues are stale/in-flight. |
+| `readOnly`                    | `boolean`                   | Disable editing; palette hidden.                    |
+| `showPalette`                 | `boolean`                   | Default `true`.                                     |
+| `onSelectionChange`           | `(sel \| null) => void`     | Selection changed (node/edge/deselect).             |
+| `onNodeClick` / `onEdgeClick` | `(node) / (edge) => void`   | Raw click convenience.                              |
+| `onArrange`                   | `(g: Graph) => void`        | After one-click auto-arrange.                       |
+| `onHistoryNavigate`           | `(g: Graph) => void`        | After undo/redo.                                    |
+| `children`                    | `ReactNode`                 | Canvas overlay slot (mount `<NodeInspector>` here). |
+| `renderSelectedNodeToolbar`   | `(node) => ReactNode`       | Content beside the selected node (e.g. a "+").      |
+| `footer`                      | `ReactNode`                 | Slot below the canvas.                              |
+| `categoryTokens`              | `CategoryTokenMap`          | Override category → color tokens.                   |
+| `hostBridge`                  | `unknown`                   | Opaque host data for inspectors.                    |
+| `minHeight`                   | `string \| number`          | Default `'500px'`.                                  |
+| `onIssuesChange`              | `(issues) => void`          | Notified when the issues ref changes.               |
 
 `<NodeInspector>`: `dock?: 'left' | 'right'`, `renderEdgeDrawer?: ComponentType<EdgeDrawerRenderProps>`.
 

package/src/components/Workflow/Workflow.translations.json

@@ -109,4 +109,4 @@
     "en": "Create node",
     "ja": "ノードを追加"
   }
-}
+}

package/src/components/Workflow/Workflow.tsx

@@ -177,7 +177,7 @@ export function Workflow({
         {footer ? (
           <Box
             borderTop="1px solid"
-            borderColor="slate.200"
+            borderColor="border.default"
             bg="bg.surface"
             px={4}
             py={2}

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

@@ -51,12 +51,13 @@ export function BranchLabelBadge({
       boxShadow="sm"
       _dark={{
         boxShadow: '0 0 0 1px {colors.border.strong}',
-        // slate.300, not the semantically-equivalent bg.emphasized: Chakra
-        // resolves `bg.*` tokens referenced inside a nested condition to their
-        // BASE value (rendering the light-gray light-mode fill in dark mode);
-        // the slate ramp resolves correctly here. No upstream issue filed —
-        // verified via rendered-DOM probe, 2026-06-12.
-        bgColor: badgeVariant === 'neutral' ? 'slate.300' : undefined,
+        // neutral.5 (the 5.0 step the 4.x slate.300 aliases to), not the
+        // semantically-equivalent bg.emphasized: Chakra resolves `bg.*`
+        // tokens referenced inside a nested condition to their BASE value
+        // (rendering the light-gray light-mode fill in dark mode); the step
+        // scale resolves correctly here. No upstream issue filed — verified
+        // via rendered-DOM probe, 2026-06-12.
+        bgColor: badgeVariant === 'neutral' ? 'neutral.5' : undefined,
       }}
       cursor={onClick ? 'pointer' : 'default'}
       onClick={onClick}

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

@@ -657,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',
       }}
     >
@@ -749,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 ? (

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

@@ -181,8 +181,8 @@ 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"
                 >

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

@@ -67,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"
         >
@@ -79,9 +79,9 @@ 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 ? (
-              <AlertCircleIcon boxSize="xs" color="danger.main" />
+              <AlertCircleIcon boxSize="xs" color="danger.fg" />
             ) : expanded ? (
               <ChevronUpIcon boxSize="xs" />
             ) : (

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

@@ -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,7 +81,6 @@ export function DrawerHeader({
                 aria-label={translate('workflow_node_overflow_label') as string}
                 size="xs"
                 variant="ghost"
-                colorPalette="neutral"
               >
                 <DotsHorizontalIcon boxSize="xs" />
               </IconButton>
@@ -93,7 +92,6 @@ export function DrawerHeader({
           aria-label={translate('workflow_node_close') as string}
           size="xs"
           variant="ghost"
-          colorPalette="neutral"
           onClick={onClose}
         >
           <CloseIcon boxSize="xs" aria-hidden />

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

@@ -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.
  */
@@ -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

@@ -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,11 +390,11 @@ 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}
           >

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

@@ -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}
@@ -111,7 +111,7 @@ export function FieldWrapper({
           <Subtext color={toneColor}>{resolveIssueMessage(issue)}</Subtext>
         </HStack>
       ) : helperText ? (
-        <Subtext color="slate.900">{helperText}</Subtext>
+        <Subtext color="fg.muted">{helperText}</Subtext>
       ) : null}
     </Stack>
   );