Rename public CSS variables to the wb namespace

.changeset/public-variable-namespace.md

@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': major
+'@workflowbuilder/sdk': major
+---
+
+Public component CSS variables move one-to-one from `--ax-public-*` to `--wb-public-*`, with no compatibility aliases. Replace that prefix in consumer overrides; the `.ax-public-*` typography classes are unchanged.

.changeset/textarea-disabled-background.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/ui': minor
 ---
 
-TextArea exposes `--ax-public-textarea-root-background-color-disabled` (defaults to `transparent`); a never-applied icon-switch thumb background declaration was removed.
+TextArea exposes `--wb-public-textarea-root-background-color-disabled` (defaults to `transparent`); a never-applied icon-switch thumb background declaration was removed.

.changeset/token-set-2.md

@@ -3,4 +3,4 @@
 '@workflowbuilder/sdk': minor
 ---
 
-The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. The `--ax-*` token names are gone from `tokens.css`; the `--ax-public-*` per-component override variables are unchanged. Consumers who overrode non-public `--ax-*` names directly must move those overrides to the `--wb-*` equivalents. Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).
+The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, new canvas and shadow sets, and the refreshed brand and status palette. Consumers who overrode non-public `--ax-*` names directly must move those overrides to the `--wb-*` equivalents.

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

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

apps/demo/src/app/components/dashed-edge/dashed-edge.tsx

@@ -21,7 +21,7 @@ import { type EdgeProps, getSmoothStepPath } from '@xyflow/react';
  * "Custom edges and selection".
  *
  * To diverge from the built-in selection look, add a `selected` branch to the
- * `style` below, or restyle every edge globally via the `--ax-public-edge-color-select`
+ * `style` below, or restyle every edge globally via the `--wb-public-edge-color-select`
  * CSS variable. See the SDK README, "Custom edges and selection".
  */
 export function DashedEdge({

apps/docs/scripts/generate-ui-api.mjs

@@ -328,7 +328,7 @@ function extractCssVariables(directory, cssSources, warnings, slug) {
   const variables = [];
   for (const file of files) {
     const css = readFileSync(file, 'utf8');
-    const re = /(--ax-public-[\w-]+)\s*:\s*([^;]*?)(?:\/\*\s*(.*?)\s*\*\/)?\s*;/g;
+    const re = /(--wb-public-[\w-]+)\s*:\s*([^;]*?)(?:\/\*\s*(.*?)\s*\*\/)?\s*;/g;
     let m;
     while ((m = re.exec(css))) {
       if (seen.has(m[1])) continue;

apps/docs/src/content/docs/get-started/theming.md

@@ -23,4 +23,4 @@ Provide the font yourself (via `@font-face`, `@fontsource/<font>`, etc.) — the
 
 ## Other tokens
 
-The SDK exposes its own `--wb-*` variables (background, scrollbar, transitions) plus the larger `--wb-*` design-token set re-exported from `@workflowbuilder/ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.
+The SDK exposes its own `--wb-*` variables (background, scrollbar, transitions), the generated design-token set from `@workflowbuilder/ui`, and `--wb-public-*` overrides for individual components. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.

apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx

@@ -31,6 +31,7 @@ Example token categories:
 - **Spacing:** `--wb-space-50`, `--wb-space-100`, ..., `--wb-space-400`
 - **Border radius:** `--wb-radius-50`, `--wb-radius-100`, ..., `--wb-radius-300`
 - **Shadows:** `--wb-shadow-ui-xs-*`, `--wb-shadow-ui-s-*`, ..., `--wb-shadow-ui-xl-*`
+- **Component overrides:** `--wb-public-*`, with component-local UI variables shown in generated component-page tables
 
 Theming is done by overriding CSS custom properties. Create a CSS file with your overrides and import it after the default theme:
 
@@ -42,7 +43,7 @@ Theming is done by overriding CSS custom properties. Create a CSS file with your
 }
 ```
 
-Both light and dark mode tokens are defined separately, so you can customize each theme independently.
+Both light and dark mode tokens are defined separately, so you can customize each theme independently. Use a component's `--wb-public-*` variables when a change should not affect the shared token system.
 
 ## Light and dark mode
 

apps/docs/src/content/docs/ui-library/design-tokens.mdx

@@ -3,10 +3,9 @@ title: Design tokens
 description: How @workflowbuilder/ui turns Figma design tokens into the --wb-* CSS custom properties that style every component.
 ---
 
-Every `@workflowbuilder/ui` component is styled with CSS custom properties
-(`--wb-*`) rather than hard-coded values. Those properties are generated from a
-single design-token source, so the visual language stays consistent and is
-retunable without touching component code.
+Every `@workflowbuilder/ui` component uses generated `--wb-*` design tokens for
+shared visual decisions. Components also expose hand-authored `--wb-public-*`
+variables whose defaults may reference tokens or component-specific values.
 
 ## The pipeline
 
@@ -64,10 +63,10 @@ There are three override levels, from broadest to most local:
 
 1. **Primitives** (`--wb-colors-*`, `--wb-space-*`, …) - retune the palette/scales globally.
 2. **Semantic tokens** (`--wb-ui-*`, `--wb-components-*`, …) - re-map meaning (e.g. make "primary" green).
-3. **Component variables** (`--ax-public-*`) - tweak a single component; see each component's CSS variables table.
+3. **Component variables** (`--wb-public-*`) - tweak a single component; component pages include generated tables for component-local variables.
 
 For the enterprise path you replace `tokens.json` with one generated from your
-own Figma design kit and rebuild; the `--wb-*` surface stays the same.
+own Figma design kit and rebuild; the generated design-token surface stays the same.
 
 ## Regenerating
 

apps/docs/src/content/docs/ui-library/overview.mdx

@@ -74,5 +74,4 @@ switch themes (this is also how these docs theme the live examples):
 <html data-theme="light"></html>
 ```
 
-Override any `--wb-*` design token to retune colors, spacing, or radii without touching
-component markup.
+Override a generated `--wb-*` design token to retune colors, spacing, or radii across the UI. For a single component, use a `--wb-public-*` override; component pages include generated tables for component-local variables.

docs/how-to-change-css-tokens.md

@@ -1,10 +1,10 @@
 # How to change CSS tokens?
 
-All colors, spacing, and radii resolve through `--wb-*` design-token custom properties
-defined in `@workflowbuilder/ui/tokens.css` (imported by the SDK's stylesheet).
-The shipped defaults live inside the `ui.base` cascade layer, so a plain
-unlayered override in your own stylesheet always wins - import order does not
-matter.
+`@workflowbuilder/ui` resolves colors, spacing, and radii through generated
+`--wb-*` design tokens defined in `@workflowbuilder/ui/tokens.css` and
+hand-authored `--wb-public-*` component overrides. Its shipped defaults live
+inside the `ui.base` cascade layer, so a plain unlayered override in your own
+stylesheet always wins - import order does not matter.
 
 ## Consuming from npm (SDK or UI package)
 
@@ -14,13 +14,15 @@ Override the variables you care about in any stylesheet of your app:
 :root {
   --wb-components-button-solid-primary-default: #0f62fe;
   --wb-ui-bg-inset: #f4f4f4;
+  --wb-public-date-picker-dropdown-background: #fff;
 }
 ```
 
-To discover variable names, inspect elements in devtools or browse
-`node_modules/@workflowbuilder/ui/dist/tokens.css`. Theme-specific values are
-keyed on `html[data-theme='light' | 'dark']`, so scope your overrides the same
-way when they should apply to one theme only.
+Discover design-token names in `node_modules/@workflowbuilder/ui/dist/tokens.css`
+and UI component overrides in `node_modules/@workflowbuilder/ui/dist/index.css`.
+UI component pages also include generated tables for component-local variables.
+Theme-specific values are keyed on `html[data-theme='light' | 'dark']`, so scope
+your overrides the same way when they should apply to one theme only.
 
 ## Working in this monorepo
 

packages/sdk/README.md

@@ -212,9 +212,9 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 
 Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`).
 
-Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--wb-*` design-token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
+Deeper color and spacing customization goes through the generated `--wb-*` design-token layer from `@workflowbuilder/ui`. Hand-authored overrides use `--wb-public-*`. The UI Library's component pages include generated CSS-variable tables for component-local UI overrides. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
-**Prefix ownership.** The `--wb-*` namespace is shared by two owners, split by convention: names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) belong to the design-token export; everything else under `--wb-*` (like the theming variables above) is defined by the SDK itself. The two sets do not collide because exported names always carry a domain segment. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`).
+**Prefix ownership.** The `--wb-*` namespace has three families. Names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) come from the design-token export. `--wb-public-*` variables are the hand-authored component override contract shared by `@workflowbuilder/ui` and `@workflowbuilder/sdk`; remaining top-level names such as the theming variables above belong to the SDK. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`).
 
 ## CSS — global resets
 

packages/sdk/src/components/button-submit/button-submit.module.css

@@ -11,7 +11,7 @@
 }
 
 .container--ghost-critical {
-  --spinner-color: var(--ax-public-button-ghost-critical-color);
+  --spinner-color: var(--wb-public-button-ghost-critical-color);
 }
 
 .container--pending button {

packages/sdk/src/components/form/label/label.module.css

@@ -1,15 +1,15 @@
 @layer ui.base, ui.component;
 
 :root {
-  --ax-public-form-label-color: var(--wb-ui-text-subtle-default);
-  --ax-public-form-label-asterisk-color: var(--wb-ui-text-critical-default);
+  --wb-public-form-label-color: var(--wb-ui-text-subtle-default);
+  --wb-public-form-label-asterisk-color: var(--wb-ui-text-critical-default);
 }
 
 @layer ui.component {
   .container {
     display: flex;
     gap: 0.25rem;
-    color: var(--ax-public-form-label-color);
+    color: var(--wb-public-form-label-color);
     align-items: center;
 
     .label {
@@ -24,7 +24,7 @@
       height: 0.625rem;
       min-width: 0.625rem;
 
-      color: var(--ax-public-form-label-asterisk-color);
+      color: var(--wb-public-form-label-asterisk-color);
     }
   }
 

packages/sdk/src/components/form/message/message.module.css

@@ -1,6 +1,6 @@
 :root {
-  --wb-message-control-error-color: var(--ax-public-snackbar-title-color);
-  --wb-message-control-error-background-color: var(--ax-public-snackbar-error-background);
+  --wb-message-control-error-color: var(--wb-public-snackbar-title-color);
+  --wb-message-control-error-background-color: var(--wb-public-snackbar-error-background);
   --wb-message-control-spacing: var(--wb-space-100);
   --wb-message-control-border-radius: var(--wb-radius-100);
   --wb-message-control-padding: var(--wb-space-100) var(--wb-space-200);

packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css

@@ -7,7 +7,7 @@
 }
 
 .root {
-  --ax-public-node-gap: 0;
+  --wb-public-node-gap: 0;
 }
 
 .content {

packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css

@@ -13,7 +13,7 @@
   position: relative;
   display: flex;
   max-width: calc(
-    var(--ax-public-node-width) - (6 * var(--ax-public-node-padding)) + 2 *
+    var(--wb-public-node-width) - (6 * var(--wb-public-node-padding)) + 2 *
       var(--wb-connectable-item-horizontal-padding) + 2 * var(--wb-connectable-item-border-width)
   );
   padding: var(--wb-connectable-item-vertical-padding) var(--wb-connectable-item-horizontal-padding);

packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.module.css

@@ -1,5 +1,5 @@
 .content {
-  --ax-public-node-gap: 0;
+  --wb-public-node-gap: 0;
 }
 
 .collapsible {

packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.module.css

@@ -1,5 +1,5 @@
 .content {
-  --ax-public-node-gap: 0;
+  --wb-public-node-gap: 0;
 }
 
 .collapsible {

packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css

@@ -1,8 +1,8 @@
 :root {
-  --wb-import-error-color: var(--ax-public-snackbar-title-color);
-  --wb-import-error-background-color: var(--ax-public-snackbar-error-background);
-  --wb-import-error-border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-error-border);
-  --wb-import-error-border-radius: var(--ax-public-snackbar-border-radius);
+  --wb-import-error-color: var(--wb-public-snackbar-title-color);
+  --wb-import-error-background-color: var(--wb-public-snackbar-error-background);
+  --wb-import-error-border: var(--wb-public-snackbar-border-size) solid var(--wb-public-snackbar-error-border);
+  --wb-import-error-border-radius: var(--wb-public-snackbar-border-radius);
 }
 
 .container {
@@ -17,7 +17,7 @@
 }
 
 .error {
-  padding: var(--ax-public-snackbar-padding);
+  padding: var(--wb-public-snackbar-padding);
   color: var(--wb-import-error-color);
   background: var(--wb-import-error-background-color);
   border: var(--wb-import-error-border);

packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css

@@ -1,7 +1,7 @@
 :root {
   --wb-conditions-form-border-color: var(--wb-ui-stroke-default); /* missing token */
   --wb-conditions-form-border-radius: 0.75rem; /* missing token */
-  --wb-conditions-form-header-color: var(--ax-public-form-label-color);
+  --wb-conditions-form-header-color: var(--wb-public-form-label-color);
 }
 
 .container {

packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css

@@ -1,10 +1,10 @@
 :root {
-  --ax-public-form-rich-text-color: var(--wb-ui-text-subtle-default);
+  --wb-public-form-rich-text-color: var(--wb-ui-text-subtle-default);
 }
 
 .container {
   composes: ax-public-p11 from global;
-  color: var(--ax-public-form-rich-text-color);
+  color: var(--wb-public-form-rich-text-color);
 
   a {
     color: inherit;

packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css

@@ -28,19 +28,19 @@ html[data-theme='dark'] {
 }
 
 .container {
-  padding: var(--ax-public-input-padding-medium);
+  padding: var(--wb-public-input-padding-medium);
   padding-right: 0;
-  border-radius: var(--ax-public-input-border-radius-medium);
-  border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
-  /* border-bottom: 1px solid var(--ax-public-textarea-root-border-color); */
-  /* transition: all var(--ax-public-transition); */
+  border-radius: var(--wb-public-input-border-radius-medium);
+  border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color);
+  /* border-bottom: 1px solid var(--wb-public-textarea-root-border-color); */
+  /* transition: all var(--wb-public-transition); */
 
   * {
     font-family: monospace !important;
   }
 
   :global(.ace_editor) {
-    padding: var(--ax-public-input-padding-medium);
+    padding: var(--wb-public-input-padding-medium);
     color: var(--wb-syntax-highlighter-color) !important;
     background-color: transparent;
   }

packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css

@@ -7,7 +7,7 @@
 
 .container--select {
   position: relative;
-  border-radius: var(--ax-public-input-border-radius-medium);
+  border-radius: var(--wb-public-input-border-radius-medium);
 
   > div > button {
     min-height: 2.5rem;
@@ -16,7 +16,7 @@
 }
 
 .date-picker {
-  border-radius: var(--ax-public-input-border-radius-medium);
+  border-radius: var(--wb-public-input-border-radius-medium);
   min-height: 2.5rem;
   text-align: left;
 }

packages/sdk/src/features/variables/components/variable-text/variable-text.module.css

@@ -7,30 +7,30 @@
   --wb-variable-text-suggestion-bg-error: var(--wb-ui-bg-base);
   --wb-txt-ghost-primary-default: #6b3bff;
 
-  --wb-variable-backdrop: color-mix(in srgb, var(--ax-public-modal-backdrop-background), transparent 50%);
+  --wb-variable-backdrop: color-mix(in srgb, var(--wb-public-modal-backdrop-background), transparent 50%);
 }
 
 .control {
   position: relative;
-  border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color);
-  border-radius: var(--ax-public-input-border-radius-medium);
-  color: var(--ax-public-input-root-color);
-  transition: all var(--ax-public-transition);
+  border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color);
+  border-radius: var(--wb-public-input-border-radius-medium);
+  color: var(--wb-public-input-root-color);
+  transition: all var(--wb-public-transition);
 
   &.control--error {
-    background-color: var(--ax-public-input-root-background-color-error);
-    border-color: var(--ax-public-input-root-border-color-error);
-    color: var(--ax-public-input-root-color-error);
+    background-color: var(--wb-public-input-root-background-color-error);
+    border-color: var(--wb-public-input-root-border-color-error);
+    color: var(--wb-public-input-root-color-error);
 
     .mention {
-      border: 1px solid color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%);
-      background-color: color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%);
+      border: 1px solid color-mix(in srgb, var(--wb-public-input-root-border-color-error), transparent 90%);
+      background-color: color-mix(in srgb, var(--wb-public-input-root-border-color-error), transparent 90%);
     }
   }
 }
 
 .control:focus-within {
-  border-color: var(--ax-public-input-root-border-color-focus);
+  border-color: var(--wb-public-input-root-border-color-focus);
 }
 
 .input {
@@ -39,7 +39,7 @@
   display: block;
   width: 100%;
   margin: 0;
-  padding: var(--ax-public-input-padding-medium);
+  padding: var(--wb-public-input-padding-medium);
   border: none;
   background: transparent;
   color: unset;
@@ -69,7 +69,7 @@
  * which have no effect without Tailwind — we must set them manually.
  */
 .highlighter {
-  padding: var(--ax-public-input-padding-medium);
+  padding: var(--wb-public-input-padding-medium);
   border: none;
   background: transparent;
   color: transparent;
@@ -109,7 +109,7 @@
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--wb-variable-text-suggestion-border);
-  border-radius: var(--ax-public-input-border-radius-medium);
+  border-radius: var(--wb-public-input-border-radius-medium);
   background: var(--wb-variable-text-suggestion-bg);
   box-shadow: 0 4px 12px var(--wb-shadow-ui-color);
 }

packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css

@@ -1,5 +1,5 @@
 :root {
-  --wb-settings-navigation-background: var(--ax-public-modal-header-background);
+  --wb-settings-navigation-background: var(--wb-public-modal-header-background);
 }
 
 .container {
@@ -36,7 +36,7 @@
 
   &:hover,
   &.button--active {
-    background: var(--ax-public-nav-button-background-color-hover);
+    background: var(--wb-public-nav-button-background-color-hover);
   }
 
   &.button--active {