Reactive styling

A style block maps a visual property to an expression. The expression is re-evaluated whenever state, selection, or structure changes.

Node styles#

style node {
background: node.on ? chili : node.parent.on ? bamboo : cream
border: node.selected ? chili : border
opacity: node.hidden ? 0 : node.dimmed ? 0.25 : 1
pulse: node.status == "running"
shape: node.type == "database" ? database : rounded
}

Supported node properties: background, border, text, opacity, pulse, icon, and shape (one of rounded, circle, database, diamond).

Edge styles#

style edge {
color: edge.active ? chili : bamboo
width: edge.active ? 3 : 1
opacity: edge.dimmed ? 0.2 : 1
}

Theme tokens#

Colors are written as bare theme tokens that resolve to the Mantou palette: chili, cream, scallion, bamboo, soy, danger, border, muted. Raw CSS colors work too.