Skip to content

feat: node icons take an accent color - #203

Draft
jimmeryn wants to merge 5 commits into
mainfrom
feat/node-icon-accent
Draft

jimmeryn wants to merge 5 commits into
mainfrom
feat/node-icon-accent

Conversation

@jimmeryn

@jimmeryn jimmeryn commented Oct 5, 2026

Copy link
Copy Markdown
Contributor

What

  • Node definitions take an optional accent: blue, green, orange, violet, gray, violet-gradient, or a custom name. It colors the icon on the canvas and in the palette, is resolved by node type and is never saved into the diagram. The AI Agent defaults to violet-gradient.
  • A custom name reads --wb-public-node-icon-color-<name> and --wb-public-node-icon-container-background-color-<name>, so an app adds an accent with CSS alone. Names outside [a-z0-9-] are ignored, because the name is spliced into a variable name.
  • The icon is 36px with an 18px glyph (46px / 24px before), as in the design. The node width, padding and title stay as they are. --wb-public-node-icon-padding stays (now 8px), and --wb-public-node-icon-glyph-size is new. Icon gains size="inherit".
  • Node definitions resolve when WorkflowBuilder.Root mounts, no longer when the Palette mounts, so a layout without a Palette still shows accents and the Properties form. getNodeDefinition looks types up in a map.
  • Changesets: sdk minor x2, ui minor.
  • Checked in the demo in light and dark: the built-in accents and a custom teal.

Open questions

  • Should both changesets be minor but list "Breaking changes" (custom templates must render the icon in em / size="inherit")?

@jimmeryn jimmeryn changed the title Feat/node icon accent feat: node icons take an accent color Oct 5, 2026
@jimmeryn
jimmeryn added this pull request to stack #209 October 7, 2026 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant