Repository navigation
fix(vscode): use theme colours for canvas edges - #3359
Merged
Merged
Conversation
Each edge draws its own arrowheads in the colour of its line, so they follow the VS Code theme and turn the link colour on hover. A hovered edge is drawn again in the edge label layer, so edges that end at the same point no longer cover its arrowhead. TooltipEdge again keeps a stroke set in the edge style, and the unused #94a3b8 strokes are removed.
… canvas The connection line while dragging a new edge and the CSS edge hover fallback used a fixed #60a5fa, which has low contrast in light themes. They now use --calm-link, the colour of a hovered edge.
This was referenced Oct 14, 2026
rocketstack-matt
requested changes
Oct 15, 2026
rocketstack-matt
left a comment
rocketstack-matt
left a comment
Member
There was a problem hiding this comment.
One regression inline.
React Flow passes an edge end with no marker as url('#'), which is truthy, so every edge got arrowheads at both ends.
rocketstack-matt
approved these changes
Oct 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Follow-up to #3076 and #3331. Fixes edge colour issues left in the CALM Canvas after #3331.
#b1b1b7and do not change on hoverTooltipEdgeignores astrokein the edge style#94a3b8strokes are removed#60a5fa(2.5:1 contrast on white)--calm-link, the colour of a hovered edgeTechnical notes:
coloron React Flow's markers does not work with theme variables. React Flow puts the colour in the marker id, and avar(..., #888888)value breaks theurl('#…')reference. A shared marker also cannot follow the hover state of one edge.widthandheightin themarkerEndobjects no longer have an effect. The arrowhead size is fixed at 15 inArrowMarker, which is the value that all call sites use.zIndex: 1, so a hovered line goes under them.Type of Change
Affected Components
cli/)calm/)calm-ai/)calm-hub/)calm-hub-ui/)calm-server/)calm-widgets/)docs/)shared/)calm-plugins/vscode/)Commit Message Format ✅
Testing
Unit tests cover the marker ids, the marker colour and the stroke order. The hover overlay needs a running canvas, so I checked it visually in the webview, with several edges ending at one point.
Checklist