graph.css
Node graph. See src/ov-graph.js.
Nodes are DOM and the wires are one SVG overlay, so the whole thing is reachable from the tokens: corner treatment, bezel weight, case, tracking and every colour arrive from the same control surface the panels use. A canvas graph would have to implement all of that a second time, and that is the reason this aesthetic's signature surface is the worst possible place to reach for a canvas.
src/graph.css · 2 blocks · blocks that belong to a custom element are on that element's page
.ov-sock
A required input announces itself before anything is connected to it, so the reason a node will refuse is visible in the node rather than only in the message it produces afterwards.
| selector | kind |
|---|---|
.ov-sock | block |
.ov-sock__name | part |
.ov-sock__pin | part |
.ov-sock__type | part |
Written into markup by src/ov-graph.js, so an element sets it for you.
.ov-wire
A conversion is a QUALIFIER: the link is real and carries a real value, and the value is not the type the socket it lands on would suggest. Marked, in the second lit hue rather than the alarm, because nothing is wrong.
| selector | kind |
|---|---|
.ov-wire | block |
.ov-wire__note | part |
.ov-wire--converted | modifier |
.ov-wire--pending | modifier |
.ov-wire--refused | modifier |
Written into markup by src/ov-graph.js, so an element sets it for you.