[DS 2.0] Token pipeline 2.0: adopt the wb variable export

.changeset/token-set-2.md

@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': major
+'@workflowbuilder/sdk': major
+---
+
+The design-token theming surface exposed as `--ax-*` custom properties is removed from `tokens.css` and replaced by generated `--wb-*` properties from the refreshed Figma variables. Consumers who overrode `--ax-*` design tokens must move those overrides to the corresponding `--wb-*` properties; the `--ax-public-*` per-component override surface remains unchanged. The new set includes renamed and re-scaled primitives, semantic tokens per theme, new canvas and shadow (effects) sets, and the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).

.changeset/ui-layer-root-defaults.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/ui': minor
 ---
 
-Variable defaults (`--ax-public-*` component defaults and the `--ax-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --ax-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default.
+Variable defaults (`--ax-public-*` component defaults and the `--wb-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --ax-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default.

apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css

@@ -16,11 +16,11 @@
   max-width: 460px;
   padding: 2rem;
   font-family: var(--wb-font-family);
-  background: var(--ax-ui-bg-primary-default);
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  background: var(--wb-ui-bg-base);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   border-radius: var(--wb-app-bar-border-radius);
   box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.25);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .close {
@@ -35,13 +35,13 @@
   border: none;
   border-radius: 0.5rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   cursor: pointer;
 }
 
 .close:hover {
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-primary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-default);
 }
 
 .heading {
@@ -59,22 +59,22 @@
   height: 2.25rem;
   flex-shrink: 0;
   border-radius: 0.6rem;
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-colors-acc1-500);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-colors-acc1-500);
 }
 
 .title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .body {
   margin: 0 0 1.5rem;
   font-size: 0.92rem;
   line-height: 1.6;
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .body p {
@@ -86,7 +86,7 @@
 }
 
 .body strong {
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   font-weight: 600;
 }
 
@@ -98,7 +98,7 @@
   padding: 0.7rem 1rem;
   border: none;
   border-radius: 0.625rem;
-  background: var(--ax-colors-acc1-500);
+  background: var(--wb-colors-acc1-500);
   color: #ffffff;
   font-size: 0.95rem;
   font-weight: 600;
@@ -107,7 +107,7 @@
 }
 
 .cta:hover {
-  background: var(--ax-colors-acc1-600);
+  background: var(--wb-colors-acc1-600);
 }
 
 .reopen {
@@ -123,11 +123,11 @@
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: 50%;
   background: var(--wb-app-bar-background);
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .reopen:hover {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-colors-acc1-500);
 }

apps/ai-studio/src/components/execution/highlighting.css

@@ -1,31 +1,31 @@
 html[data-theme='light'] {
-  --ai-studio-edge-color--active: var(--ax-colors-green-400);
-  --ai-studio-status-color--completed: var(--ax-colors-green-400);
+  --ai-studio-edge-color--active: var(--wb-colors-green-400);
+  --ai-studio-status-color--completed: var(--wb-colors-green-400);
 }
 
 html[data-theme='dark'] {
-  --ai-studio-edge-color--active: var(--ax-colors-green-200);
-  --ai-studio-status-color--completed: var(--ax-colors-green-200);
+  --ai-studio-edge-color--active: var(--wb-colors-green-200);
+  --ai-studio-status-color--completed: var(--wb-colors-green-200);
 }
 
 :root {
-  --ai-studio-status-color--failed: var(--ax-txt-error-default);
+  --ai-studio-status-color--failed: var(--wb-ui-text-critical-default);
   --ai-studio-status-bg--completed: color-mix(in srgb, var(--ai-studio-status-color--completed), transparent 85%);
   --ai-studio-status-bg--failed: color-mix(in srgb, var(--ai-studio-status-color--failed), transparent 85%);
 
   --ai-studio-node-shadow-color--active: var(--ai-studio-edge-color--active);
   --ai-studio-node-shadow-color--completed: var(--ai-studio-edge-color--active);
-  --ai-studio-node-shadow-color--failed: var(--ax-colors-red-400);
+  --ai-studio-node-shadow-color--failed: var(--wb-colors-red-400);
 
-  --ai-studio-node-shadow--active: var(--ax-token-shadow-focus-node-active-x) var(--ax-token-shadow-focus-node-active-y)
-    var(--ax-token-shadow-focus-node-active-blur) var(--ax-token-shadow-focus-node-active-spread)
+  --ai-studio-node-shadow--active: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
     var(--ai-studio-node-shadow-color--active);
 
-  --ai-studio-node-shadow--completed: var(--ax-token-shadow-focus-node-active-x)
-    var(--ax-token-shadow-focus-node-active-y) var(--ax-token-shadow-focus-node-active-blur)
-    var(--ax-token-shadow-focus-node-active-spread) var(--ai-studio-node-shadow-color--completed);
+  --ai-studio-node-shadow--completed: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
+    var(--ai-studio-node-shadow-color--completed);
 
-  --ai-studio-node-shadow--failed: var(--ax-token-shadow-focus-node-active-x) var(--ax-token-shadow-focus-node-active-y)
-    var(--ax-token-shadow-focus-node-active-blur) var(--ax-token-shadow-focus-node-active-spread)
+  --ai-studio-node-shadow--failed: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
     var(--ai-studio-node-shadow-color--failed);
 }

apps/ai-studio/src/components/execution/log-panel.module.css

@@ -9,7 +9,7 @@
   background: var(--wb-app-bar-background);
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: var(--wb-app-bar-border-radius);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   display: flex;
   flex-direction: column;
   z-index: 10;
@@ -91,7 +91,7 @@
 }
 
 .badge--node_started {
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .badge--node_failed,
@@ -100,7 +100,7 @@
 }
 
 .badge--execution_cancelled {
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .node-id {
@@ -160,6 +160,6 @@
 }
 
 .event--highlighted {
-  background: color-mix(in srgb, var(--ax-colors-acc1-500), transparent 88%);
-  box-shadow: inset 0.1875rem 0 0 var(--ax-colors-acc1-500);
+  background: color-mix(in srgb, var(--wb-colors-acc1-500), transparent 88%);
+  box-shadow: inset 0.1875rem 0 0 var(--wb-colors-acc1-500);
 }

apps/ai-studio/src/components/visualize/renderers.module.css

@@ -1,7 +1,7 @@
 .markdown {
   font-size: 0.85rem;
   line-height: 1.6;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   overflow-wrap: anywhere;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .markdown a {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-ui-text-action-default);
   text-decoration: underline;
 }
 
@@ -51,15 +51,15 @@
 .markdown code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.82em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   padding: 0.1em 0.35em;
   border-radius: 0.25rem;
 }
 
 .markdown pre {
   margin: 0.6em 0;
   padding: 0.7em 0.85em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   border-radius: 0.5rem;
   overflow-x: auto;
 }
@@ -72,8 +72,8 @@
 .markdown blockquote {
   margin: 0.6em 0;
   padding-left: 0.85em;
-  border-left: 0.1875rem solid var(--ax-ui-stroke-primary-default);
-  color: var(--ax-txt-secondary-default);
+  border-left: 0.1875rem solid var(--wb-ui-stroke-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .rich p {
@@ -89,13 +89,13 @@
 .rich code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.85em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   padding: 0.05em 0.3em;
   border-radius: 0.2rem;
 }
 
 .rich a {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-ui-text-action-default);
   text-decoration: underline;
 }
 
@@ -108,7 +108,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.8rem;
   line-height: 1.55;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
@@ -117,7 +117,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.78rem;
   line-height: 1.5;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .json-row {
@@ -132,18 +132,18 @@
 
 .json-children {
   padding-left: 0.9rem;
-  border-left: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border-left: 0.0625rem solid var(--wb-ui-stroke-default);
   margin-left: 0.25rem;
 }
 
 .json-toggle {
   width: 0.7rem;
   flex-shrink: 0;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .json-key {
-  color: var(--ax-colors-acc1-600);
+  color: var(--wb-colors-acc1-600);
 }
 
 .json-string {
@@ -160,7 +160,7 @@
 }
 
 .json-bracket {
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .table {
@@ -171,14 +171,14 @@
 
 .table th,
 .table td {
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   padding: 0.3em 0.5em;
   text-align: left;
   vertical-align: top;
 }
 
 .table th {
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   font-weight: 600;
   position: sticky;
   top: 0;
@@ -192,15 +192,15 @@
 
 .stat-card {
   padding: 0.6rem 0.7rem;
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   border-radius: 0.5rem;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
 }
 
 .stat-value {
   font-size: 1.05rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   overflow-wrap: anywhere;
 }
 
@@ -209,13 +209,13 @@
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .fallback-note {
   margin-bottom: 0.4rem;
   font-size: 0.72rem;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .chart {