Skip to content

[DS 2.0] Adopt the 15.09 and 16.09 token exports: node body and row roles, focus ring rename, ghost label roles, rebuilt orange - #149

Merged
librowski merged 1 commit into
ds2-palette-node-statesfrom
ds2-tokens-refresh-0915
Sep 16, 2026
Merged

librowski merged 1 commit into
ds2-palette-node-statesfrom
ds2-tokens-refresh-0915

Conversation

@librowski

@librowski librowski commented Sep 15, 2026

Copy link
Copy Markdown
Collaborator

Export

Tokens Studio export from the design system file after the 15.09 publish (changelog entries 1.1.9, 1.1.10, 1.1.11), compared with the 14.09 export by name and value:

Count
Tokens 789 → 805
Added 31
Removed 15
Changed values 40 (all in the warning / orange family)

Added: canvas/node/body-{h-pad,v-pad,gap,radius} and canvas/node/row-{h-pad,v-pad,gap,radius}; shadow/canvas/focus-ring/node/{x,y,blur,spread}; components/button/ghost/{primary,critical,success,warning}/text-default and components/button/solid/warning/text; colors/orange-500-{10..50}.
Removed: shadow/canvas/focus-node/* (renamed), colors/orange-400-{10..50} (replaced), canvas/node/inset and gap-inner (orphans confirmed by design).
Changed: the whole colors/orange-* scale (rebuilt in OKLCH around #FDAC1B) and every warning alias that follows it.

Code

  • Focus ring: node-panel.module.css and AI Studio highlighting.css use --wb-ds-shadow-canvas-focus-ring-node-*.
  • Ghost labels: --wb-public-button-ghost-{primary,critical,success}-color bind to the new component roles (light: acc1-700, red-600, green-600; dark unchanged). The shared ui/text/*-default roles are untouched, so field labels, destructive menu items, the Select button and AI Studio statuses keep their colours.
  • Node body and rows (follow-up of [DS 2.0] Apply the design body spacing to node sections and rows #136): node-section, AI Agent node-info-wrapper and connectable-item bind padding, gap and radius to the body and row roles; the row gap gets its own variable; the last missing token markers in the node body are gone. Values unchanged, rows stay 205px. Decision log updated (connectable-item-design-width follow-up closed by 1.1.9).
  • Nothing in the repo referenced the removed orange tints or the orphan node roles.

Changesets: @workflowbuilder/ui minor with a Breaking changes note for the renamed ring variables and the replaced orange tints; @workflowbuilder/sdk patch.

Verification

pnpm -F @workflowbuilder/ui-tokens build, pnpm -F @workflowbuilder/ui build with check:built-css, stylelint on ui, sdk and ai-studio (every --wb-ds-* reference resolves), ui and sdk unit tests, typecheck on ui, sdk and ai-studio, geometry parity against the Figma masters (9/9).

Review follow-ups (16.09)

  • Changeset bumped to major: the export removes --wb-ds-shadow-canvas-focus-node-*, --wb-ds-colors-orange-400-{10..50} and two node roles, and --wb-ds-* is a documented override surface.
  • The Status "invalid" badge and the properties-panel indicator dot no longer sit on the raw orange-400 primitive (rebuilt to a pastel in this export): they bind to --wb-ds-canvas-badge-notify-warning-{bg-default,icon} and --wb-ds-ui-icon-warning-default. Two missing token markers gone.

Export of 16.09 (design system 1.1.12)

  • The four node focus colour roles are renamed: --wb-ds-canvas-node-focus-{active,critical,success,warning} become --wb-ds-canvas-node-focus-ring-*, same values (design answer of 16.09; the ring now has one name across colours, shadows and docs). Only node-panel.module.css used one of them. Diff against the 15.09 export: 8 renamed entries, nothing else. Listed in the changeset's Breaking changes next to the shadow rename.

@librowski
librowski added this pull request to stack #151 September 15, 2026 10:24
@librowski
librowski marked this pull request as ready for review September 15, 2026 11:12
Comment thread .changeset/tokens-export-2026-09-15.md Outdated
Comment thread .changeset/tokens-export-2026-09-15.md
@librowski
librowski force-pushed the ds2-tokens-refresh-0915 branch from 53ac172 to 160bb56 Compare September 16, 2026 11:37
… to 1.1.12)

Node body and row roles, focus ring rename (shadow and the four colour
roles), ghost label roles, rebuilt orange scale. The Status invalid badge
and the indicator dot move from the orange-400 primitive to the warning
roles so they stay visible on the rebuilt scale.
@librowski
librowski force-pushed the ds2-tokens-refresh-0915 branch from 160bb56 to d0b1e85 Compare September 16, 2026 11:47
@librowski librowski changed the title [DS 2.0] Adopt the 15.09 token export: node body and row roles, focus ring rename, ghost label roles, rebuilt orange [DS 2.0] Adopt the 15.09 and 16.09 token exports: node body and row roles, focus ring rename, ghost label roles, rebuilt orange Sep 16, 2026
@librowski
librowski merged commit 6fa16ea into design-system-2.0 Sep 16, 2026
6 checks passed
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.

2 participants