@burdenoff/fe-libs 2026.1021.4 → 2026.1021.6

package/src/shared/styles/canvas-theme.css

@@ -0,0 +1,82 @@
+/**
+ * Canvas / node / edge / data-type token utilities (Tailwind v4).
+ *
+ * Maps the G19 builder tokens from tokens.css to utilities such as
+ * `bg-node-trigger`, `bg-node-logic-subtle`, `border-node-border-selected`,
+ * `ring-node-state-running`, `stroke-edge-default`, `fill-canvas-grid` and
+ * `text-datatype-string`. Imported by app-shell.css; a shell with its own
+ * @theme imports it directly:
+ *
+ *   @import "tailwindcss";
+ *   @import '@burdenoff/fe-libs/shared/tokens/tokens.css';
+ *   @import '@burdenoff/fe-libs/shared/styles/canvas-theme.css';
+ *
+ * For values outside Tailwind (React Flow props, SVG attributes, inline
+ * styles) use `var(--color-…)` directly, or the helpers in
+ * @burdenoff/fe-libs/shared/utils (nodeCategoryColor, edgeColor, …).
+ */
+@theme {
+  --color-canvas-bg: var(--color-canvas-bg);
+  --color-canvas-grid: var(--color-canvas-grid);
+  --color-canvas-selection: var(--color-canvas-selection);
+  --color-canvas-minimap-bg: var(--color-canvas-minimap-bg);
+  --color-canvas-minimap-node: var(--color-canvas-minimap-node);
+  --color-canvas-minimap-mask: var(--color-canvas-minimap-mask);
+  --color-canvas-control-bg: var(--color-canvas-control-bg);
+  --color-node-bg: var(--color-node-bg);
+  --color-node-bg-hover: var(--color-node-bg-hover);
+  --color-node-border: var(--color-node-border);
+  --color-node-border-hover: var(--color-node-border-hover);
+  --color-node-border-selected: var(--color-node-border-selected);
+  --color-node-text: var(--color-node-text);
+  --color-node-text-muted: var(--color-node-text-muted);
+  --color-node-handle: var(--color-node-handle);
+  --color-node-handle-connected: var(--color-node-handle-connected);
+  --color-node-trigger: var(--color-node-trigger);
+  --color-node-trigger-subtle: var(--color-node-trigger-subtle);
+  --color-node-action: var(--color-node-action);
+  --color-node-action-subtle: var(--color-node-action-subtle);
+  --color-node-logic: var(--color-node-logic);
+  --color-node-logic-subtle: var(--color-node-logic-subtle);
+  --color-node-loop: var(--color-node-loop);
+  --color-node-loop-subtle: var(--color-node-loop-subtle);
+  --color-node-data: var(--color-node-data);
+  --color-node-data-subtle: var(--color-node-data-subtle);
+  --color-node-integration: var(--color-node-integration);
+  --color-node-integration-subtle: var(--color-node-integration-subtle);
+  --color-node-ai: var(--color-node-ai);
+  --color-node-ai-subtle: var(--color-node-ai-subtle);
+  --color-node-human: var(--color-node-human);
+  --color-node-human-subtle: var(--color-node-human-subtle);
+  --color-node-utility: var(--color-node-utility);
+  --color-node-utility-subtle: var(--color-node-utility-subtle);
+  --color-node-end: var(--color-node-end);
+  --color-node-end-subtle: var(--color-node-end-subtle);
+  --color-node-default: var(--color-node-default);
+  --color-node-default-subtle: var(--color-node-default-subtle);
+  --color-node-state-idle: var(--color-node-state-idle);
+  --color-node-state-queued: var(--color-node-state-queued);
+  --color-node-state-running: var(--color-node-state-running);
+  --color-node-state-success: var(--color-node-state-success);
+  --color-node-state-warning: var(--color-node-state-warning);
+  --color-node-state-error: var(--color-node-state-error);
+  --color-node-state-skipped: var(--color-node-state-skipped);
+  --color-edge-default: var(--color-edge-default);
+  --color-edge-hover: var(--color-edge-hover);
+  --color-edge-selected: var(--color-edge-selected);
+  --color-edge-active: var(--color-edge-active);
+  --color-edge-success: var(--color-edge-success);
+  --color-edge-error: var(--color-edge-error);
+  --color-edge-compatible: var(--color-edge-compatible);
+  --color-edge-incompatible: var(--color-edge-incompatible);
+  --color-edge-label-bg: var(--color-edge-label-bg);
+  --color-edge-label-text: var(--color-edge-label-text);
+  --color-datatype-string: var(--color-datatype-string);
+  --color-datatype-number: var(--color-datatype-number);
+  --color-datatype-boolean: var(--color-datatype-boolean);
+  --color-datatype-object: var(--color-datatype-object);
+  --color-datatype-array: var(--color-datatype-array);
+  --color-datatype-date: var(--color-datatype-date);
+  --color-datatype-binary: var(--color-datatype-binary);
+  --color-datatype-any: var(--color-datatype-any);
+}

package/src/shared/tokens/build/semantic.css

@@ -506,6 +506,89 @@
   --color-focus-ring: var(--color-action-primary-bg);
 }
 
+/* G19: canvas, node-category, edge and data-type tokens (workflow builders,
+ * graphs, mappers). Every value ALIASES an existing chart-* / status-* /
+ * surface token — no new palette — so light, dark, every brand and the
+ * expressive / high-contrast themes come for free.
+ *
+ * Declared on each element that can carry a theme (not only :root) so a
+ * `.dark` subtree re-resolves the aliases against ITS chart/status values;
+ * a var() alias declared only on :root would inherit the light value. */
+:root,
+[data-theme],
+[data-brand],
+.dark {
+  /* Canvas */
+  --color-canvas-bg: var(--color-bg-canvas);
+  --color-canvas-grid: var(--color-chart-grid);
+  --color-canvas-selection: var(--color-bg-accentSubtle);
+  --color-canvas-minimap-bg: var(--color-bg-surface);
+  --color-canvas-minimap-node: var(--color-chart-axis);
+  --color-canvas-minimap-mask: var(--color-bg-overlay);
+  --color-canvas-control-bg: var(--color-bg-elevated);
+  /* Node surface */
+  --color-node-bg: var(--color-bg-surface);
+  --color-node-bg-hover: var(--color-bg-elevated);
+  --color-node-border: var(--color-border-default);
+  --color-node-border-hover: var(--color-border-strong);
+  --color-node-border-selected: var(--color-action-primary-bg);
+  --color-node-text: var(--color-text-primary);
+  --color-node-text-muted: var(--color-text-muted);
+  --color-node-handle: var(--color-border-strong);
+  --color-node-handle-connected: var(--color-action-primary-bg);
+  /* Node categories (solid accent + subtle tint for headers / icon wells) */
+  --color-node-trigger: var(--color-chart-7); /* starts a run: webhook, schedule, API, event */
+  --color-node-trigger-subtle: color-mix(in oklab, var(--color-node-trigger) 14%, transparent);
+  --color-node-action: var(--color-chart-1); /* does work: an app or service step */
+  --color-node-action-subtle: color-mix(in oklab, var(--color-node-action) 14%, transparent);
+  --color-node-logic: var(--color-chart-3); /* branches: if, switch, router */
+  --color-node-logic-subtle: color-mix(in oklab, var(--color-node-logic) 14%, transparent);
+  --color-node-loop: var(--color-chart-4); /* iterates: loop, batch, map */
+  --color-node-loop-subtle: color-mix(in oklab, var(--color-node-loop) 14%, transparent);
+  --color-node-data: var(--color-chart-2); /* shapes data: set, filter, aggregate, transform, code */
+  --color-node-data-subtle: color-mix(in oklab, var(--color-node-data) 14%, transparent);
+  --color-node-integration: var(--color-chart-12); /* talks to the outside: HTTP, database, connector */
+  --color-node-integration-subtle: color-mix(in oklab, var(--color-node-integration) 14%, transparent);
+  --color-node-ai: var(--color-chart-8); /* model, agent, embedding, assistant */
+  --color-node-ai-subtle: color-mix(in oklab, var(--color-node-ai) 14%, transparent);
+  --color-node-human: var(--color-chart-6); /* waits on a person: approval, form, review */
+  --color-node-human-subtle: color-mix(in oklab, var(--color-node-human) 14%, transparent);
+  --color-node-utility: var(--color-chart-axis); /* wait, no-op, note, merge */
+  --color-node-utility-subtle: color-mix(in oklab, var(--color-node-utility) 14%, transparent);
+  --color-node-end: var(--color-chart-5); /* stops a run: end, error, return */
+  --color-node-end-subtle: color-mix(in oklab, var(--color-node-end) 14%, transparent);
+  --color-node-default: var(--color-chart-1); /* a node with no known category */
+  --color-node-default-subtle: color-mix(in oklab, var(--color-node-default) 14%, transparent);
+  /* Node execution state (ring / badge) */
+  --color-node-state-idle: var(--color-border-default);
+  --color-node-state-queued: var(--color-chart-axis);
+  --color-node-state-running: var(--color-status-info-bg);
+  --color-node-state-success: var(--color-status-success-bg);
+  --color-node-state-warning: var(--color-status-warning-bg);
+  --color-node-state-error: var(--color-status-error-bg);
+  --color-node-state-skipped: var(--color-chart-axis);
+  /* Edges */
+  --color-edge-default: var(--color-chart-axis);
+  --color-edge-hover: var(--color-text-secondary);
+  --color-edge-selected: var(--color-action-primary-bg);
+  --color-edge-active: var(--color-status-info-bg);
+  --color-edge-success: var(--color-status-success-bg);
+  --color-edge-error: var(--color-status-error-bg);
+  --color-edge-compatible: var(--color-status-info-bg);
+  --color-edge-incompatible: var(--color-status-error-bg);
+  --color-edge-label-bg: var(--color-bg-elevated);
+  --color-edge-label-text: var(--color-text-secondary);
+  /* Port / mapper data types */
+  --color-datatype-string: var(--color-chart-3);
+  --color-datatype-number: var(--color-chart-10);
+  --color-datatype-boolean: var(--color-chart-2);
+  --color-datatype-object: var(--color-chart-12);
+  --color-datatype-array: var(--color-chart-4);
+  --color-datatype-date: var(--color-chart-6);
+  --color-datatype-binary: var(--color-chart-11);
+  --color-datatype-any: var(--color-chart-axis);
+}
+
 /* Large Typography Scale - Auto-generated */
 [data-typography="large"] {
   --font-size-body-sm: 16px;

package/src/shared/tokens/build/tailwind.preset.js

@@ -141,6 +141,71 @@ export default {
         'chart-axis': 'var(--color-chart-axis)',
         'chart-positive': 'var(--color-chart-positive)',
         'chart-negative': 'var(--color-chart-negative)',
+
+        // G19 — canvas / node / edge / data-type tokens
+        'canvas-bg': 'var(--color-canvas-bg)',
+        'canvas-grid': 'var(--color-canvas-grid)',
+        'canvas-selection': 'var(--color-canvas-selection)',
+        'canvas-minimap-bg': 'var(--color-canvas-minimap-bg)',
+        'canvas-minimap-node': 'var(--color-canvas-minimap-node)',
+        'canvas-minimap-mask': 'var(--color-canvas-minimap-mask)',
+        'canvas-control-bg': 'var(--color-canvas-control-bg)',
+        'node-bg': 'var(--color-node-bg)',
+        'node-bg-hover': 'var(--color-node-bg-hover)',
+        'node-border': 'var(--color-node-border)',
+        'node-border-hover': 'var(--color-node-border-hover)',
+        'node-border-selected': 'var(--color-node-border-selected)',
+        'node-text': 'var(--color-node-text)',
+        'node-text-muted': 'var(--color-node-text-muted)',
+        'node-handle': 'var(--color-node-handle)',
+        'node-handle-connected': 'var(--color-node-handle-connected)',
+        'node-trigger': 'var(--color-node-trigger)',
+        'node-trigger-subtle': 'var(--color-node-trigger-subtle)',
+        'node-action': 'var(--color-node-action)',
+        'node-action-subtle': 'var(--color-node-action-subtle)',
+        'node-logic': 'var(--color-node-logic)',
+        'node-logic-subtle': 'var(--color-node-logic-subtle)',
+        'node-loop': 'var(--color-node-loop)',
+        'node-loop-subtle': 'var(--color-node-loop-subtle)',
+        'node-data': 'var(--color-node-data)',
+        'node-data-subtle': 'var(--color-node-data-subtle)',
+        'node-integration': 'var(--color-node-integration)',
+        'node-integration-subtle': 'var(--color-node-integration-subtle)',
+        'node-ai': 'var(--color-node-ai)',
+        'node-ai-subtle': 'var(--color-node-ai-subtle)',
+        'node-human': 'var(--color-node-human)',
+        'node-human-subtle': 'var(--color-node-human-subtle)',
+        'node-utility': 'var(--color-node-utility)',
+        'node-utility-subtle': 'var(--color-node-utility-subtle)',
+        'node-end': 'var(--color-node-end)',
+        'node-end-subtle': 'var(--color-node-end-subtle)',
+        'node-default': 'var(--color-node-default)',
+        'node-default-subtle': 'var(--color-node-default-subtle)',
+        'node-state-idle': 'var(--color-node-state-idle)',
+        'node-state-queued': 'var(--color-node-state-queued)',
+        'node-state-running': 'var(--color-node-state-running)',
+        'node-state-success': 'var(--color-node-state-success)',
+        'node-state-warning': 'var(--color-node-state-warning)',
+        'node-state-error': 'var(--color-node-state-error)',
+        'node-state-skipped': 'var(--color-node-state-skipped)',
+        'edge-default': 'var(--color-edge-default)',
+        'edge-hover': 'var(--color-edge-hover)',
+        'edge-selected': 'var(--color-edge-selected)',
+        'edge-active': 'var(--color-edge-active)',
+        'edge-success': 'var(--color-edge-success)',
+        'edge-error': 'var(--color-edge-error)',
+        'edge-compatible': 'var(--color-edge-compatible)',
+        'edge-incompatible': 'var(--color-edge-incompatible)',
+        'edge-label-bg': 'var(--color-edge-label-bg)',
+        'edge-label-text': 'var(--color-edge-label-text)',
+        'datatype-string': 'var(--color-datatype-string)',
+        'datatype-number': 'var(--color-datatype-number)',
+        'datatype-boolean': 'var(--color-datatype-boolean)',
+        'datatype-object': 'var(--color-datatype-object)',
+        'datatype-array': 'var(--color-datatype-array)',
+        'datatype-date': 'var(--color-datatype-date)',
+        'datatype-binary': 'var(--color-datatype-binary)',
+        'datatype-any': 'var(--color-datatype-any)',
       },
       spacing: {
         'page-padding': 'var(--space-pagePadding)',