From 53ac1726ed579b0d97507571fa8c854d2b55c06f Mon Sep 17 00:00:00 2001 From: Jan Librowski Date: Tue, 15 Sep 2026 10:57:24 +0200 Subject: [PATCH] chore(tokens): adopt the 15.09 export (design system 1.1.9 to 1.1.11) 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. --- .changeset/node-body-roles.md | 5 + .changeset/tokens-export-2026-09-15.md | 10 + .../src/components/execution/highlighting.css | 18 +- .../node-wrapper-info.module.css | 8 +- .../connectable-item-width.decision-log.md | 7 + .../connectable-item.module.css | 9 +- .../node-section/node-section.module.css | 9 +- packages/tokens/tokens.json | 334 +++++++++++------- .../button/styles/variant.module.css | 6 +- .../node/node-panel/node-panel.module.css | 6 +- 10 files changed, 252 insertions(+), 160 deletions(-) create mode 100644 .changeset/node-body-roles.md create mode 100644 .changeset/tokens-export-2026-09-15.md diff --git a/.changeset/node-body-roles.md b/.changeset/node-body-roles.md new file mode 100644 index 000000000..67ff423f1 --- /dev/null +++ b/.changeset/node-body-roles.md @@ -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. diff --git a/.changeset/tokens-export-2026-09-15.md b/.changeset/tokens-export-2026-09-15.md new file mode 100644 index 000000000..20c85cf4f --- /dev/null +++ b/.changeset/tokens-export-2026-09-15.md @@ -0,0 +1,10 @@ +--- +'@workflowbuilder/ui': minor +--- + +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. diff --git a/apps/ai-studio/src/components/execution/highlighting.css b/apps/ai-studio/src/components/execution/highlighting.css index a326d84d4..f70b08095 100644 --- a/apps/ai-studio/src/components/execution/highlighting.css +++ b/apps/ai-studio/src/components/execution/highlighting.css @@ -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); } diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css index 7b6ca6447..7d4b2521a 100644 --- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css +++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css @@ -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); diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md index 06ee96f1a..c976e372a 100644 --- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md +++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md @@ -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. diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css index 01ed83b15..394c50596 100644 --- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css +++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css @@ -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; } @@ -42,5 +43,5 @@ } .connectable-item--right { - gap: var(--wb-sdk-connectable-item-horizontal-padding); + gap: var(--wb-sdk-connectable-item-gap); } diff --git a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css index 4f39b6f9e..ef31a7a86 100644 --- a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css +++ b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css @@ -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; } @@ -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); diff --git a/packages/tokens/tokens.json b/packages/tokens/tokens.json index 2e56fc120..5f2dbe973 100644 --- a/packages/tokens/tokens.json +++ b/packages/tokens/tokens.json @@ -78,22 +78,6 @@ "value": "#16a34a", "type": "color" }, - "orange-100": { - "value": "#fef3c7", - "type": "color" - }, - "orange-200": { - "value": "#fde68a", - "type": "color" - }, - "orange-300": { - "value": "#fcd34d", - "type": "color" - }, - "orange-400": { - "value": "#f59e0b", - "type": "color" - }, "red-100": { "value": "#fee2e2", "type": "color" @@ -130,10 +114,6 @@ "value": "rgba(22, 163, 74, 0.1)", "type": "color" }, - "orange-400-10": { - "value": "rgba(245, 158, 11, 0.1)", - "type": "color" - }, "red-400-10": { "value": "rgba(224, 32, 32, 0.1)", "type": "color" @@ -214,18 +194,6 @@ "value": "rgba(22, 163, 74, 0.5)", "type": "color" }, - "orange-400-20": { - "value": "rgba(245, 158, 11, 0.2)", - "type": "color" - }, - "orange-400-30": { - "value": "rgba(245, 158, 11, 0.3)", - "type": "color" - }, - "orange-400-50": { - "value": "rgba(245, 158, 11, 0.5)", - "type": "color" - }, "gray-100-10": { "value": "rgba(255, 255, 255, 0.1)", "type": "color" @@ -666,34 +634,6 @@ "value": "#051a0c", "type": "color" }, - "orange-50": { - "value": "#fffbeb", - "type": "color" - }, - "orange-500": { - "value": "#d97706", - "type": "color" - }, - "orange-600": { - "value": "#c07c00", - "type": "color" - }, - "orange-700": { - "value": "#955f00", - "type": "color" - }, - "orange-800": { - "value": "#6b4300", - "type": "color" - }, - "orange-900": { - "value": "#3d2800", - "type": "color" - }, - "orange-950": { - "value": "#221700", - "type": "color" - }, "red-50": { "value": "#fff5f5", "type": "color" @@ -786,13 +726,73 @@ "value": "rgba(22, 163, 74, 0.4)", "type": "color" }, - "orange-400-40": { - "value": "rgba(245, 158, 11, 0.4)", - "type": "color" - }, "transparent": { "value": "rgba(0, 0, 0, 0)", "type": "color" + }, + "orange-50": { + "value": "#fff9f2", + "type": "color" + }, + "orange-100": { + "value": "#fff2e1", + "type": "color" + }, + "orange-200": { + "value": "#fee3c0", + "type": "color" + }, + "orange-300": { + "value": "#ffd195", + "type": "color" + }, + "orange-400": { + "value": "#ffc26e", + "type": "color" + }, + "orange-500": { + "value": "#fdac1b", + "type": "color" + }, + "orange-600": { + "value": "#d68e04", + "type": "color" + }, + "orange-700": { + "value": "#b07303", + "type": "color" + }, + "orange-800": { + "value": "#855509", + "type": "color" + }, + "orange-900": { + "value": "#553505", + "type": "color" + }, + "orange-950": { + "value": "#3c2403", + "type": "color" + }, + "orange-500-10": { + "value": "rgba(253, 172, 27, 0.1)", + "type": "color" + }, + "orange-500-20": { + "value": "rgba(253, 172, 27, 0.2)", + "type": "color" + }, + "orange-500-30": { + "value": "rgba(253, 172, 27, 0.3)", + "type": "color" + }, + "orange-500-40": { + "value": "rgba(253, 172, 27, 0.4)", + "type": "color" + }, + "orange-500-50": { + "value": "rgba(253, 172, 27, 0.5)", + "type": "color" } }, "space": { @@ -1206,6 +1206,10 @@ "loading": { "value": "{wb.colors.orange-500}", "type": "color" + }, + "text": { + "value": "{wb.colors.gray-900}", + "type": "color" } } }, @@ -1238,6 +1242,10 @@ "stroke-default": { "value": "{wb.colors.red-400}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.red-600}", + "type": "color" } }, "primary": { @@ -1268,6 +1276,10 @@ "stroke-default": { "value": "{wb.ui.brand.border}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.acc1-700}", + "type": "color" } }, "success": { @@ -1298,35 +1310,43 @@ "stroke-default": { "value": "{wb.colors.green-400}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.green-600}", + "type": "color" } }, "warning": { "default": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "hover": { - "value": "{wb.colors.orange-400-20}", + "value": "{wb.colors.orange-500-20}", "type": "color" }, "active": { - "value": "{wb.colors.orange-400-30}", + "value": "{wb.colors.orange-500-30}", "type": "color" }, "focus": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "loading": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "disabled": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "stroke-default": { - "value": "{wb.colors.orange-400}", + "value": "{wb.colors.orange-700}", + "type": "color" + }, + "text-default": { + "value": "{wb.colors.orange-800}", "type": "color" } } @@ -1426,7 +1446,7 @@ "type": "color" }, "bg-warning": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "bg-success": { @@ -1688,7 +1708,7 @@ "type": "color" }, "warning-default": { - "value": "{wb.colors.orange-400}", + "value": "{wb.colors.orange-800}", "type": "color" }, "tooltip-default": { @@ -1716,7 +1736,7 @@ "type": "color" }, "warning-disabled": { - "value": "{wb.colors.orange-400-50}", + "value": "{wb.colors.orange-500-50}", "type": "color" } }, @@ -1726,7 +1746,7 @@ }, "icon": { "warning-default": { - "value": "{wb.colors.orange-400}", + "value": "{wb.colors.orange-700}", "type": "color" }, "critical-default": { @@ -1808,7 +1828,7 @@ "type": "color" }, "focus-warning": { - "value": "{wb.colors.orange-400-40}", + "value": "{wb.colors.orange-500-40}", "type": "color" }, "focus-critical": { @@ -1900,7 +1920,7 @@ }, "badge-notify": { "warning-bg-default": { - "value": "{wb.colors.orange-500}", + "value": "{wb.colors.orange-700}", "type": "color" }, "critical-icon": { @@ -1964,7 +1984,7 @@ "type": "color" }, "stroke-warning": { - "value": "{wb.colors.orange-500}", + "value": "{wb.colors.orange-700}", "type": "color" }, "stroke-success": { @@ -2092,6 +2112,10 @@ "loading": { "value": "{wb.colors.orange-500}", "type": "color" + }, + "text": { + "value": "{wb.colors.gray-900}", + "type": "color" } } }, @@ -2124,6 +2148,10 @@ "stroke-default": { "value": "{wb.colors.red-400}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.red-100}", + "type": "color" } }, "primary": { @@ -2154,6 +2182,10 @@ "stroke-default": { "value": "{wb.ui.brand.border}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.acc1-100}", + "type": "color" } }, "success": { @@ -2184,35 +2216,43 @@ "stroke-default": { "value": "{wb.colors.green-400}", "type": "color" + }, + "text-default": { + "value": "{wb.colors.green-200}", + "type": "color" } }, "warning": { "default": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "hover": { - "value": "{wb.colors.orange-400-20}", + "value": "{wb.colors.orange-500-20}", "type": "color" }, "active": { - "value": "{wb.colors.orange-400-30}", + "value": "{wb.colors.orange-500-20}", "type": "color" }, "focus": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "loading": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "disabled": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "stroke-default": { - "value": "{wb.colors.orange-400}", + "value": "{wb.colors.orange-500}", + "type": "color" + }, + "text-default": { + "value": "{wb.colors.orange-300}", "type": "color" } } @@ -2312,7 +2352,7 @@ "type": "color" }, "bg-warning": { - "value": "{wb.colors.orange-400-10}", + "value": "{wb.colors.orange-500-10}", "type": "color" }, "bg-success": { @@ -2332,7 +2372,7 @@ "type": "color" }, "stroke-warning": { - "value": "{wb.colors.orange-300}", + "value": "{wb.colors.orange-500}", "type": "color" }, "stroke-success": { @@ -2520,7 +2560,7 @@ "type": "color" }, "warning": { - "value": "{wb.colors.orange-100}", + "value": "{wb.colors.orange-300}", "type": "color" }, "info": { @@ -2574,7 +2614,7 @@ "type": "color" }, "warning-default": { - "value": "{wb.colors.orange-100}", + "value": "{wb.colors.orange-300}", "type": "color" }, "tooltip-default": { @@ -2602,7 +2642,7 @@ "type": "color" }, "warning-disabled": { - "value": "{wb.colors.orange-400-20}", + "value": "{wb.colors.orange-500-20}", "type": "color" } }, @@ -2612,7 +2652,7 @@ }, "icon": { "warning-default": { - "value": "{wb.colors.orange-100}", + "value": "{wb.colors.orange-300}", "type": "color" }, "critical-default": { @@ -2694,7 +2734,7 @@ "type": "color" }, "focus-warning": { - "value": "{wb.colors.orange-400-40}", + "value": "{wb.colors.orange-500-40}", "type": "color" }, "focus-critical": { @@ -2786,7 +2826,7 @@ }, "badge-notify": { "warning-bg-default": { - "value": "{wb.colors.orange-500}", + "value": "{wb.colors.orange-700}", "type": "color" }, "critical-icon": { @@ -2877,14 +2917,6 @@ "value": "{wb.space.600}", "type": "dimension" }, - "inset": { - "value": "{wb.space.200}", - "type": "dimension" - }, - "gap-inner": { - "value": "{wb.space.150}", - "type": "dimension" - }, "head-h-pad": { "value": "{wb.space.100}", "type": "dimension" @@ -2928,6 +2960,38 @@ "content-radius": { "value": "{wb.radius.100}", "type": "dimension" + }, + "body-h-pad": { + "value": "{wb.space.100}", + "type": "dimension" + }, + "body-gap": { + "value": "{wb.space.100}", + "type": "dimension" + }, + "body-radius": { + "value": "{wb.radius.100}", + "type": "dimension" + }, + "row-h-pad": { + "value": "{wb.space.100}", + "type": "dimension" + }, + "row-radius": { + "value": "{wb.radius.50}", + "type": "dimension" + }, + "row-gap": { + "value": "{wb.space.100}", + "type": "dimension" + }, + "body-v-pad": { + "value": "{wb.space.100}", + "type": "dimension" + }, + "row-v-pad": { + "value": "{wb.space.100}", + "type": "dimension" } }, "port": { @@ -3225,22 +3289,24 @@ } }, "canvas": { - "focus-node": { - "x": { - "value": "0px", - "type": "dimension" - }, - "y": { - "value": "0px", - "type": "dimension" - }, - "blur": { - "value": "0px", - "type": "dimension" - }, - "spread": { - "value": "4px", - "type": "dimension" + "focus-ring": { + "node": { + "x": { + "value": "0px", + "type": "dimension" + }, + "y": { + "value": "0px", + "type": "dimension" + }, + "blur": { + "value": "0px", + "type": "dimension" + }, + "spread": { + "value": "4px", + "type": "dimension" + } } } } @@ -3369,22 +3435,24 @@ } }, "canvas": { - "focus-node": { - "x": { - "value": "0px", - "type": "dimension" - }, - "y": { - "value": "0px", - "type": "dimension" - }, - "blur": { - "value": "0px", - "type": "dimension" - }, - "spread": { - "value": "4px", - "type": "dimension" + "focus-ring": { + "node": { + "x": { + "value": "0px", + "type": "dimension" + }, + "y": { + "value": "0px", + "type": "dimension" + }, + "blur": { + "value": "0px", + "type": "dimension" + }, + "spread": { + "value": "4px", + "type": "dimension" + } } } } diff --git a/packages/ui/src/components/button/styles/variant.module.css b/packages/ui/src/components/button/styles/variant.module.css index 80a868b9e..72c591c2e 100644 --- a/packages/ui/src/components/button/styles/variant.module.css +++ b/packages/ui/src/components/button/styles/variant.module.css @@ -39,7 +39,7 @@ --wb-public-button-ghost-primary-background-color-focus: var(--wb-ds-components-button-ghost-primary-focus); --wb-public-button-ghost-primary-background-color-disabled: var(--wb-ds-components-button-ghost-primary-disabled); --wb-public-button-ghost-primary-border-color: var(--wb-ds-components-button-ghost-primary-stroke-default); - --wb-public-button-ghost-primary-color: var(--wb-ds-ui-text-action-default); + --wb-public-button-ghost-primary-color: var(--wb-ds-components-button-ghost-primary-text-default); --wb-public-button-ghost-primary-color-disabled: var(--wb-ds-ui-text-action-disabled); --wb-public-button-ghost-secondary-background-color: var(--wb-ds-colors-transparent); @@ -61,7 +61,7 @@ --wb-public-button-ghost-critical-background-color-focus: var(--wb-ds-components-button-ghost-critical-focus); --wb-public-button-ghost-critical-background-color-disabled: var(--wb-ds-components-button-ghost-critical-disabled); --wb-public-button-ghost-critical-border-color: var(--wb-ds-components-button-ghost-critical-stroke-default); - --wb-public-button-ghost-critical-color: var(--wb-ds-ui-text-critical-default); + --wb-public-button-ghost-critical-color: var(--wb-ds-components-button-ghost-critical-text-default); --wb-public-button-ghost-critical-color-disabled: var(--wb-ds-ui-text-critical-disabled); --wb-public-button-ghost-success-background-color: var(--wb-ds-components-button-ghost-success-default); @@ -70,7 +70,7 @@ --wb-public-button-ghost-success-background-color-focus: var(--wb-ds-components-button-ghost-success-focus); --wb-public-button-ghost-success-background-color-disabled: var(--wb-ds-components-button-ghost-success-disabled); --wb-public-button-ghost-success-border-color: var(--wb-ds-components-button-ghost-success-stroke-default); - --wb-public-button-ghost-success-color: var(--wb-ds-ui-text-success-default); + --wb-public-button-ghost-success-color: var(--wb-ds-components-button-ghost-success-text-default); --wb-public-button-ghost-success-color-disabled: var(--wb-ds-ui-text-success-disabled); } diff --git a/packages/ui/src/components/node/node-panel/node-panel.module.css b/packages/ui/src/components/node/node-panel/node-panel.module.css index cffac5194..de7c28f9b 100644 --- a/packages/ui/src/components/node/node-panel/node-panel.module.css +++ b/packages/ui/src/components/node/node-panel/node-panel.module.css @@ -15,9 +15,9 @@ --wb-public-node-background-color-disabled: var(--wb-ds-canvas-node-bg-primary-disabled); --wb-public-node-border-color-selected: var(--wb-ds-canvas-node-stroke-hover); - --wb-public-node-box-shadow-selected: 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(--wb-ds-canvas-node-focus-active); + --wb-public-node-box-shadow-selected: 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(--wb-ds-canvas-node-focus-active); } @layer ui.component {