[DS 2.0] Adopt the 15.09 token export: node body and row roles, focus ring rename, ghost label roles, rebuilt orange - #149
Conversation
Export from the WB 2.0 design system after the 15.09 publish. New roles for the node body and rows (canvas/node/body-*, row-*), the node focus ring geometry renamed to shadow/canvas/focus-ring/node/*, ghost button label roles per family (two steps darker in light for WCAG AA), a rebuilt orange scale with orange-500 tints replacing orange-400 tints, and the orphan canvas/node/inset and gap-inner removed. Code follows the export: the node shell and AI Studio highlighting use the renamed ring variables, ghost primary/critical/success labels bind to the component roles, and sections and rows bind to the body and row roles instead of raw primitives, which retires the last provisional markers in the node body.
| @@ -0,0 +1,10 @@ | |||
| --- | |||
| '@workflowbuilder/ui': minor | |||
There was a problem hiding this comment.
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).
| 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. |
There was a problem hiding this comment.
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?
2 participants
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:
Added:
canvas/node/body-{h-pad,v-pad,gap,radius}andcanvas/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-defaultandcomponents/button/solid/warning/text;colors/orange-500-{10..50}.Removed:
shadow/canvas/focus-node/*(renamed),colors/orange-400-{10..50}(replaced),canvas/node/insetandgap-inner(orphans confirmed by design).Changed: the whole
colors/orange-*scale (rebuilt in OKLCH around #FDAC1B) and every warning alias that follows it.Code
node-panel.module.cssand AI Studiohighlighting.cssuse--wb-ds-shadow-canvas-focus-ring-node-*.--wb-public-button-ghost-{primary,critical,success}-colorbind to the new component roles (light: acc1-700, red-600, green-600; dark unchanged). The sharedui/text/*-defaultroles are untouched, so field labels, destructive menu items, the Select button and AI Studio statuses keep their colours.node-section, AI Agentnode-info-wrapperandconnectable-itembind padding, gap and radius to the body and row roles; the row gap gets its own variable; the lastmissing tokenmarkers in the node body are gone. Values unchanged, rows stay 205px. Decision log updated (connectable-item-design-widthfollow-up closed by 1.1.9).Changesets:
@workflowbuilder/uiminor with aBreaking changesnote for the renamed ring variables and the replaced orange tints;@workflowbuilder/sdkpatch.Verification
pnpm -F @workflowbuilder/ui-tokens build,pnpm -F @workflowbuilder/ui buildwithcheck: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).