Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/node-body-roles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@workflowbuilder/sdk': patch
---

Node sections and rows (Decision branches, AI tool rows) bind their padding, gap and radius to the design roles `canvas/node/body-*` and `canvas/node/row-*` instead of raw spacing primitives; rendered values are unchanged.
10 changes: 10 additions & 0 deletions .changeset/tokens-export-2026-09-15.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
'@workflowbuilder/ui': minor

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since --wb-ds-* is a documented override surface (ui README "Customization", sdk README "Prefix ownership") and this drops --wb-ds-shadow-canvas-focus-node-*, --wb-ds-colors-orange-400-{10..50} and two node roles, could we mark this major like #137 did for --wb-public-button-warning-*? The body already carries the Breaking changes: list, so only the header changes; it keeps the CHANGELOG grouping consistent (this is currently the only changeset in the repo with a breaking list under a non-major bump).

---

Design token export from 15.09.2026 (design system 1.1.9 to 1.1.11). New roles: `--wb-ds-canvas-node-body-*` and `--wb-ds-canvas-node-row-*` (padding, gap, radius of the node body and its rows), `--wb-ds-shadow-canvas-focus-ring-node-*` (renamed from `--wb-ds-shadow-canvas-focus-node-*`, which is removed), `--wb-ds-components-button-ghost-{primary,critical,success,warning}-text-default` and `--wb-ds-components-button-solid-warning-text`. Ghost button labels in the light theme now use these darker component roles (WCAG AA on every tint) instead of the shared text roles. The orange scale (`--wb-ds-colors-orange-*`) has new values and `--wb-ds-colors-orange-500-{10..50}` replace `--wb-ds-colors-orange-400-{10..50}`, so every warning surface renders in the rebuilt orange. Removed orphans: `--wb-ds-canvas-node-inset`, `--wb-ds-canvas-node-gap-inner`.

Breaking changes:

- Replace any reference to `--wb-ds-shadow-canvas-focus-node-{x,y,blur,spread}` with `--wb-ds-shadow-canvas-focus-ring-node-*`.
- Replace `--wb-ds-colors-orange-400-{10..50}` with `--wb-ds-colors-orange-500-{10..50}`; expect different orange hues everywhere `--wb-ds-colors-orange-*` is used.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rebuilt scale moves orange-400 from #f59e0b to a pastel #ffc26e. Two provisional bindings still sit on that primitive and nothing in the stack touches them: the Status invalid badge (packages/ui/src/components/status/status.module.css:5-6, icon-on-badge drops 1.93 -> 1.44:1, badge on white 2.15 -> 1.59:1) and the sidebar indicator dot (packages/sdk/src/features/json-form/components/indicator-dot/indicator-dot.module.css:4). Both were under the 3:1 floor before, but the pastel makes them near-invisible in light.

The export already has --wb-ds-canvas-badge-notify-warning-{bg-default,icon} and --wb-ds-ui-icon-warning-default. Want to rebind them here, or park a (follow-up: ...) slug so it lands before the 3.0 major?

18 changes: 9 additions & 9 deletions apps/ai-studio/src/components/execution/highlighting.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ html[data-theme='dark'] {
--ai-studio-node-shadow-color--completed: var(--ai-studio-edge-color--active);
--ai-studio-node-shadow-color--failed: var(--wb-ds-colors-red-400);

--ai-studio-node-shadow--active: var(--wb-ds-shadow-canvas-focus-node-x) var(--wb-ds-shadow-canvas-focus-node-y)
var(--wb-ds-shadow-canvas-focus-node-blur) var(--wb-ds-shadow-canvas-focus-node-spread)
var(--ai-studio-node-shadow-color--active);
--ai-studio-node-shadow--active: var(--wb-ds-shadow-canvas-focus-ring-node-x)
var(--wb-ds-shadow-canvas-focus-ring-node-y) var(--wb-ds-shadow-canvas-focus-ring-node-blur)
var(--wb-ds-shadow-canvas-focus-ring-node-spread) var(--ai-studio-node-shadow-color--active);

--ai-studio-node-shadow--completed: var(--wb-ds-shadow-canvas-focus-node-x) var(--wb-ds-shadow-canvas-focus-node-y)
var(--wb-ds-shadow-canvas-focus-node-blur) var(--wb-ds-shadow-canvas-focus-node-spread)
var(--ai-studio-node-shadow-color--completed);
--ai-studio-node-shadow--completed: var(--wb-ds-shadow-canvas-focus-ring-node-x)
var(--wb-ds-shadow-canvas-focus-ring-node-y) var(--wb-ds-shadow-canvas-focus-ring-node-blur)
var(--wb-ds-shadow-canvas-focus-ring-node-spread) var(--ai-studio-node-shadow-color--completed);

--ai-studio-node-shadow--failed: var(--wb-ds-shadow-canvas-focus-node-x) var(--wb-ds-shadow-canvas-focus-node-y)
var(--wb-ds-shadow-canvas-focus-node-blur) var(--wb-ds-shadow-canvas-focus-node-spread)
var(--ai-studio-node-shadow-color--failed);
--ai-studio-node-shadow--failed: var(--wb-ds-shadow-canvas-focus-ring-node-x)
var(--wb-ds-shadow-canvas-focus-ring-node-y) var(--wb-ds-shadow-canvas-focus-ring-node-blur)
var(--wb-ds-shadow-canvas-focus-ring-node-spread) var(--ai-studio-node-shadow-color--failed);
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.container {
--wb-sdk-connectable-item-inset: calc(var(--wb-ds-space-100) + 1px);
--wb-sdk-connectable-item-inset: calc(var(--wb-ds-canvas-node-body-h-pad) + 1px);

display: flex;
flex-direction: column;
gap: var(--wb-ds-space-100); /* missing token */
border-radius: var(--wb-ds-canvas-node-content-radius);
padding: var(--wb-ds-space-100); /* missing token */
gap: var(--wb-ds-canvas-node-body-gap);
border-radius: var(--wb-ds-canvas-node-body-radius);
padding: var(--wb-ds-canvas-node-body-v-pad) var(--wb-ds-canvas-node-body-h-pad);
border: 1px solid var(--wb-ds-ui-stroke-default);
color: var(--wb-ds-ui-text-default);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,10 @@ section radius 8px (`canvas/node/content-radius`). With the section inset now `8
is `241 - 2 x (8 + 1) - 2 x (8 + 1) = 205px` in both Decision and AI Agent. The formula is unchanged; only
the inset value moved. Row padding, row radius, section padding and gap bind to primitives
(`space/100`, `radius/50`) with `missing token` markers until design publishes the `node.body.*` roles.

## Update 15.09.2026

The export now carries the roles `canvas/node/body-{h-pad,v-pad,gap,radius}` and
`canvas/node/row-{h-pad,v-pad,gap,radius}` (design changelog 1.1.9). Sections and rows bind to them;
the provisional primitives and their markers are gone. Values are unchanged (8 / 8 / 8 / 8, row radius 4),
so the derived width stays 205px.
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
:root {
--wb-sdk-connectable-item-horizontal-padding: var(--wb-ds-space-100); /* missing token */
--wb-sdk-connectable-item-vertical-padding: var(--wb-ds-space-100); /* missing token */
--wb-sdk-connectable-item-horizontal-padding: var(--wb-ds-canvas-node-row-h-pad);
--wb-sdk-connectable-item-vertical-padding: var(--wb-ds-canvas-node-row-v-pad);
--wb-sdk-connectable-item-gap: var(--wb-ds-canvas-node-row-gap);
--wb-sdk-connectable-item-background: var(--wb-ds-ui-bg-inset);
--wb-sdk-connectable-item-border-width: 0.0625rem;
--wb-sdk-connectable-item-border-color: var(--wb-ds-components-text-field-stroke-default);
--wb-sdk-connectable-item-border-radius: var(--wb-ds-radius-50); /* missing token */
--wb-sdk-connectable-item-border-radius: var(--wb-ds-canvas-node-row-radius);
--wb-sdk-connectable-item-inset: 0rem;
}

Expand Down Expand Up @@ -42,5 +43,5 @@
}

.connectable-item--right {
gap: var(--wb-sdk-connectable-item-horizontal-padding);
gap: var(--wb-sdk-connectable-item-gap);
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
:root {
--wb-sdk-node-section-gap: var(--wb-ds-space-100); /* missing token */
--wb-sdk-node-section-padding: var(--wb-ds-space-100); /* missing token */
--wb-sdk-node-section-border-radius: var(--wb-ds-canvas-node-content-radius);
--wb-sdk-node-section-gap: var(--wb-ds-canvas-node-body-gap);
--wb-sdk-node-section-padding: var(--wb-ds-canvas-node-body-h-pad);
--wb-sdk-node-section-vertical-padding: var(--wb-ds-canvas-node-body-v-pad);
--wb-sdk-node-section-border-radius: var(--wb-ds-canvas-node-body-radius);
--wb-sdk-node-section-border-color: var(--wb-ds-ui-stroke-default);
--wb-sdk-node-section-border-width: 0.0625rem;
}
Expand All @@ -13,7 +14,7 @@
flex-direction: column;
gap: var(--wb-sdk-node-section-gap);
border-radius: var(--wb-sdk-node-section-border-radius);
padding: var(--wb-sdk-node-section-padding);
padding: var(--wb-sdk-node-section-vertical-padding) var(--wb-sdk-node-section-padding);
border: var(--wb-sdk-node-section-border-width) solid var(--wb-sdk-node-section-border-color);
color: var(--wb-ds-ui-text-default);

Expand Down
Loading
Loading