FlowCanvas theming

Every cosmetic value FlowCanvas renders is a --rozie-flow-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

css

.rozie-flow-canvas {
  --rozie-flow-accent: #3b82f6;
  --rozie-flow-bg: #f7f8fa;
  --rozie-flow-node-bg: #ffffff;
  --rozie-flow-port-fg: #6b7280;
}

Tokens

accent — the shared selected/active color.

Token	Default
`--rozie-flow-accent`	`#3b82f6`

canvas surface

Token	Default
`--rozie-flow-bg`	`#f7f8fa`
`--rozie-flow-grid-dot-color`	`rgba(0, 0, 0, 0.08)`
`--rozie-flow-grid-size`	`20px`
`--rozie-flow-border-color`	`rgba(0, 0, 0, 0.1)`
`--rozie-flow-radius`	`8px`

node chrome

Token	Default
`--rozie-flow-node-bg`	`#ffffff`
`--rozie-flow-node-border`	`rgba(0, 0, 0, 0.16)`
`--rozie-flow-node-radius`	`8px`
`--rozie-flow-node-shadow`	`0 2px 6px rgba(0, 0, 0, 0.12)`
`--rozie-flow-node-title-fg`	`#1f2937`
`--rozie-flow-node-selected-border`	`var(--rozie-flow-accent)`
`--rozie-flow-node-selected-ring`	`rgba(59, 130, 246, 0.5)`

ports + sockets

Token	Default
`--rozie-flow-port-fg`	`#6b7280`
`--rozie-flow-socket-size`	`12px`
`--rozie-flow-socket-bg`	`#94a3b8`
`--rozie-flow-socket-border-color`	`#ffffff`
`--rozie-flow-socket-ring`	`rgba(0, 0, 0, 0.2)`
`--rozie-flow-socket-hover-bg`	`var(--rozie-flow-accent)`

connections

Token	Default
`--rozie-flow-connection-stroke`	`#64748b`
`--rozie-flow-connection-width`	`3px`
`--rozie-flow-connection-selected-stroke`	`var(--rozie-flow-accent)`
`--rozie-flow-connection-selected-width`	`4px`
`--rozie-flow-connection-label-fg`	`#334155`
`--rozie-flow-connection-label-halo`	`#ffffff`

built-in Controls overlay

Token	Default
`--rozie-flow-control-bg`	`#ffffff`
`--rozie-flow-control-fg`	`#334155`
`--rozie-flow-control-border`	`rgba(0, 0, 0, 0.16)`
`--rozie-flow-control-radius`	`6px`
`--rozie-flow-control-shadow`	`0 1px 3px rgba(0, 0, 0, 0.14)`
`--rozie-flow-control-hover-bg`	`#f1f5f9`
`--rozie-flow-control-active-bg`	`#e2e8f0`
`--rozie-flow-control-selected-bg`	`#dbeafe`
`--rozie-flow-control-selected-fg`	`#1d4ed8`
`--rozie-flow-control-selected-border`	`var(--rozie-flow-accent)`

marquee (mode:'select')

Token	Default
`--rozie-flow-marquee-bg`	`rgba(59, 130, 246, 0.12)`
`--rozie-flow-marquee-border`	`var(--rozie-flow-accent)`

MiniMap overlay

Token	Default
`--rozie-flow-minimap-bg`	`rgba(255, 255, 255, 0.82)`
`--rozie-flow-minimap-border`	`rgba(0, 0, 0, 0.16)`
`--rozie-flow-minimap-shadow`	`0 1px 3px rgba(0, 0, 0, 0.14)`

The two tokens below are read from JS via a getComputedStyle-backed flowToken() lookup at render time (canvas paint code, not a CSS var()) — declared here (and correctly base-only per the probe) so the public surface stays discoverable in one place.

Token	Default
`--rozie-flow-minimap-node-fill`	`#94a3b8`
`--rozie-flow-minimap-mask`	`rgba(15, 23, 42, 0.18)`

resize handle (the four corner drag affordances on the canvas)

Token	Default
`--rozie-flow-resize-handle-bg`	`#ffffff`
`--rozie-flow-resize-handle-border`	`var(--rozie-flow-accent, #3b82f6)`
`--rozie-flow-resize-handle-size`	`8px`

NodeToolbar overlay

Token	Default
`--rozie-flow-toolbar-bg`	`#ffffff`
`--rozie-flow-toolbar-border`	`rgba(0, 0, 0, 0.16)`
`--rozie-flow-toolbar-shadow`	`0 2px 8px rgba(0, 0, 0, 0.18)`
`--rozie-flow-toolbar-btn-bg`	`#f8fafc`
`--rozie-flow-toolbar-btn-fg`	`#334155`
`--rozie-flow-toolbar-btn-border`	`rgba(0, 0, 0, 0.14)`
`--rozie-flow-toolbar-btn-hover-bg`	`#eef2f7`
`--rozie-flow-toolbar-delete-fg`	`#b91c1c`

Design-system bridges

Each package ships token presets that map FlowCanvas's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/rete-react/themes/base.css';
import '@rozie-ui/rete-react/themes/bootstrap.css';
import '@rozie-ui/rete-react/themes/material.css';
import '@rozie-ui/rete-react/themes/shadcn.css';

FlowCanvas theming ​

Tokens ​

accent — the shared selected/active color. ​

canvas surface ​

node chrome ​

ports + sockets ​

connections ​

built-in Controls overlay ​

marquee (mode:'select') ​

MiniMap overlay ​

resize handle (the four corner drag affordances on the canvas) ​

NodeToolbar overlay ​

Design-system bridges ​

See also ​