[DS 2.0] Repoint the remaining controls, overlays and effects

.changeset/token-set-2.md

@@ -3,4 +3,8 @@
 '@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).
+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: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. Consumers who overrode `--ax-*` design tokens must move those overrides to the corresponding `--wb-*` properties.
+
+The `--ax-public-*` per-component override surface changes as well. Public button variables migrate the `gray`, `error`, and `ghost-destructive` families to `secondary`, `critical`, and `ghost-critical`, and their size suffixes move to `-xl`...`-xs`. Input and TextArea replace their `-error` variables with `-critical` variables and add public variables for success, hover, disabled backgrounds, icons, placeholders, field composition, and letter-sized control metrics. Every remaining `--ax-public-*` variable keeps its name and now defaults to the refreshed tokens.
+
+Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).

apps/ai-studio/src/components/execution/node-markers.module.css

@@ -1,6 +1,6 @@
 .container {
   position: absolute;
-  top: calc(100% + 0.5rem);
+  top: calc(100% + var(--wb-space-100));
   left: 0;
   font-weight: 500;
   padding: var(--ax-public-node-padding);
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--wb-space-100);
 
   &,
   * {

packages/sdk/src/features/diagram/diagram.tsx

@@ -208,7 +208,7 @@ function DiagramContainerComponent({ edgeTypes = {} }: DiagramContainerProps) {
         nodesDraggable={!isReadOnlyMode}
         isValidConnection={isValidConnection}
       >
-        <Background />
+        <Background color="var(--wb-ui-bg-canvas-dots)" bgColor="var(--wb-background-color)" />
       </ReactFlow>
     </div>
   );

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

@@ -111,7 +111,7 @@
   border: 1px solid var(--wb-variable-text-suggestion-border);
   border-radius: var(--ax-public-input-border-radius-medium);
   background: var(--wb-variable-text-suggestion-bg);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+  box-shadow: 0 4px 12px var(--wb-shadow-ui-color);
 }
 
 .suggestionsContainer {

packages/sdk/src/index.css

@@ -18,11 +18,11 @@
 @layer ui.base {
   :root {
     --wb-transition: 0.1s ease-in;
-    --wb-background-color: var(--wb-ui-bg-inset);
+    --wb-background-color: var(--wb-ui-bg-canvas);
     --wb-scroll-width: 0.375rem;
-    --wb-scroll-radius: 0.625rem;
+    --wb-scroll-radius: var(--wb-radius-125);
     --wb-scroll-thumb-color: var(--wb-components-scrollbar-bg-default);
-    --wb-scroll-track-color: transparent;
+    --wb-scroll-track-color: var(--wb-colors-transparent);
     /* Candidate for removal at the 3.0.0 close-out: the wb-text-* classes
        carry their own families, so this variable loses reach as components
        adopt them — decide then between removing it and narrowing it to

packages/ui/src/components/checkbox/checkbox.module.css

@@ -1,30 +1,30 @@
 :root {
   --ax-public-checkbox-size-medium: 1.25rem;
   --ax-public-checkbox-size-small: 1.125rem;
-  --ax-public-checkbox-size-extra-small: 1rem;
+  --ax-public-checkbox-size-extra-small: var(--wb-size-200);
 
   --ax-public-checkbox-icon-size-medium: 0.875rem;
-  --ax-public-checkbox-icon-size-small: 0.75rem;
+  --ax-public-checkbox-icon-size-small: var(--wb-size-150);
   --ax-public-checkbox-icon-size-extra-small: 0.625rem;
 
   --ax-public-checkbox-border-radius-medium: var(--wb-radius-50);
   --ax-public-checkbox-border-radius-small: var(--wb-radius-50);
   --ax-public-checkbox-border-radius-extra-small: var(--wb-radius-50);
 
-  --ax-public-checkbox-border-width: 0.0625rem;
+  --ax-public-checkbox-border-width: var(--wb-size-12);
 
   --ax-public-checkbox-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-checkbox-bg: var(--wb-ui-bg-base);
-  --ax-public-checkbox-icon-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-checkbox-icon-color: var(--wb-ui-text-onaccent-default);
 
   --ax-public-checkbox-checked-bg: var(--wb-components-selector-fill-checked);
 
   --ax-public-checkbox-focus-border-color: var(--wb-ui-stroke-subtle);
-  --ax-public-checkbox-focus-border-shadow: var(--wb-ui-text-default);
+  --ax-public-checkbox-focus-border-shadow: var(--wb-shadow-ui-focus);
 
   --ax-public-checkbox-disabled-bg: var(--wb-ui-bg-inset);
   --ax-public-checkbox-disabled-border-color: var(--wb-ui-stroke-subtle);
-  --ax-public-checkbox-disabled-icon-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-checkbox-disabled-icon-color: var(--wb-ui-icon-disabled);
 }
 
 @layer ui.component {
@@ -71,7 +71,7 @@
     position: relative;
     margin: 0;
     border: var(--ax-public-checkbox-border-width) solid var(--ax-public-checkbox-border-color);
-    background-color: white;
+    background-color: var(--ax-public-checkbox-bg);
     cursor: pointer;
     vertical-align: middle;
     transition: all var(--ax-public-transition);
@@ -104,7 +104,9 @@
     }
 
     &:focus-visible {
-      box-shadow: 0px 0px 0px 2px var(--ax-public-checkbox-focus-border-shadow);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-checkbox-focus-border-shadow);
       border-color: var(--ax-public-checkbox-border-color);
       outline: none;
     }

packages/ui/src/components/chip/chip.module.css

@@ -1,3 +1,7 @@
+:root {
+  --ax-public-chip-focus-ring-color: var(--wb-shadow-ui-focus);
+}
+
 @layer ui.component {
   .chip {
     display: inline-flex;
@@ -62,7 +66,9 @@
     cursor: pointer;
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--wb-ui-focus-ring);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-chip-focus-ring-color);
       outline: none;
     }
   }

packages/ui/src/components/date-picker/date-picker.module.css

@@ -29,8 +29,8 @@
 
   .calendar {
     background: var(--ax-public-date-picker-dropdown-background);
-    border: 0.0625rem solid var(--ax-public-date-picker-dropdown-border-color);
-    border-radius: 0.5rem;
+    border: var(--wb-size-12) solid var(--ax-public-date-picker-dropdown-border-color);
+    border-radius: var(--wb-radius-100);
     box-shadow: var(--ax-public-date-picker-dropdown-box-shadow);
     color: var(--ax-public-date-picker-color);
   }
@@ -42,7 +42,7 @@
    * `.calendar` is the Popover popup that wraps the calendar.
    */
   .calendar :global(.rdp-root) {
-    --rdp-day_button-border-radius: 0.375rem;
+    --rdp-day_button-border-radius: var(--wb-radius-75);
     --rdp-selected-border: none;
     --rdp-today-color: var(--ax-public-date-picker-date-today-color);
     /* retheme react-day-picker's accent (range

packages/ui/src/components/date-picker/variables.css

@@ -6,15 +6,15 @@
 :root {
   --ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base);
   --ax-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default);
-  --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);
+  --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px var(--wb-shadow-ui-color);
 
   --ax-public-date-picker-color: var(--wb-ui-text-subtle-default);
   --ax-public-date-picker-header-background: var(--wb-ui-bg-elevated);
   --ax-public-date-picker-date-header-color: var(--wb-ui-text-muted-default);
   --ax-public-date-picker-nav-color: var(--wb-ui-text-subtle-default);
   --ax-public-date-picker-date-outside-color: var(--wb-ui-text-ghost-default);
-  --ax-public-date-picker-date-hover-background-color: var(--wb-ui-bg-elevated);
-  --ax-public-date-picker-date-selected-background-color: var(--wb-components-selector-fill-checked);
+  --ax-public-date-picker-date-hover-background-color: var(--wb-components-datepicker-bg-secondary);
+  --ax-public-date-picker-date-selected-background-color: var(--wb-components-datepicker-bg-primary);
   --ax-public-date-picker-date-selected-color: var(--wb-ui-text-default);
   --ax-public-date-picker-date-today-color: var(--wb-ui-stroke-highlight);
 }

packages/ui/src/components/modal/modal.module.css

@@ -3,28 +3,27 @@
   --ax-public-modal-border-radius: var(--wb-radius-200);
   --ax-public-modal-padding: var(--wb-space-200);
 
-  --ax-public-modal-description-size: 0.625rem;
+  --ax-public-modal-description-size: var(--wb-font-size-125);
   --ax-public-modal-description-line-height: 140%;
 
   --ax-public-modal-icon-padding: var(--wb-space-112);
   --ax-public-modal-content-padding: var(--wb-space-300) var(--wb-space-200);
-  --ax-public-modal-footer-padding: 0px var(--wb-space-200) var(--wb-space-200) var(--wb-space-200);
+  --ax-public-modal-footer-padding: var(--wb-space-0) var(--wb-space-200) var(--wb-space-200) var(--wb-space-200);
 
   --ax-public-modal-background: var(--wb-ui-bg-base);
   --ax-public-modal-backdrop-background: var(--wb-colors-gray-900);
-  --ax-public-modal-close-button-color: var(--wb-components-nav-button-icon-primary-default);
   --ax-public-modal-header-background: var(--wb-ui-bg-elevated);
   --ax-public-modal-header-border-color: var(--wb-ui-stroke-default);
   --ax-public-modal-title-color: var(--wb-ui-text-default);
   --ax-public-modal-description-color: var(--wb-ui-text-subtle-default);
-  --ax-public-modal-icon-background: var(--wb-components-button-solid-primary-default);
+  --ax-public-modal-icon-background: var(--wb-ui-brand-fill);
   --ax-public-modal-icon-color: var(--wb-ui-text-onaccent-default);
   --ax-public-modal-content-background: var(--wb-ui-bg-base);
   --ax-public-modal-footer-border-color: var(--wb-ui-stroke-default);
 
   --ax-public-modal-large-width: 30rem;
   --ax-public-modal-large-padding: var(--wb-space-300);
-  --ax-public-modal-large-title-size: 1.125rem;
+  --ax-public-modal-large-title-size: var(--wb-font-size-225);
   --ax-public-modal-large-title-line-height: 130%;
   --ax-public-modal-large-icon-padding: var(--wb-space-137);
 
@@ -37,7 +36,7 @@
   --ax-public-modal-icon-border-radius: var(--wb-radius-75);
   --ax-public-modal-icon-border-radius-large: var(--wb-radius-100);
 
-  --ax-public-modal-content-gap: 0.25rem;
+  --ax-public-modal-content-gap: var(--wb-space-50);
 }
 
 @layer ui.component {
@@ -70,7 +69,7 @@
     z-index: 1001;
     display: flex;
     flex-direction: column;
-    max-height: calc(100dvh - 3rem);
+    max-height: calc(100dvh - var(--wb-space-600));
     background-color: var(--ax-public-modal-background);
     border-radius: var(--ax-public-modal-border-radius);
     width: var(--ax-public-modal-width);
@@ -95,7 +94,7 @@
     justify-content: space-between;
     align-items: center;
     border-radius: var(--ax-public-modal-border-radius) var(--ax-public-modal-border-radius) 0 0;
-    border-bottom: 1px solid var(--ax-public-modal-header-border-color);
+    border-bottom: var(--wb-size-12) solid var(--ax-public-modal-header-border-color);
     background: var(--ax-public-modal-header-background);
   }
 
@@ -158,7 +157,7 @@
     align-self: stretch;
 
     &.separated {
-      border-top: 1px solid var(--ax-public-modal-footer-border-color);
+      border-top: var(--wb-size-12) solid var(--ax-public-modal-footer-border-color);
     }
   }
 

packages/ui/src/components/radio-button/radio-size.module.css

@@ -1,11 +1,11 @@
 :root {
-  --ax-public-radio-size-medium: 1.25rem /* missing token */;
-  --ax-public-radio-size-small: 1.125rem /* missing token */;
-  --ax-public-radio-size-extra-small: 1rem /* missing token */;
+  --ax-public-radio-size-medium: 1.25rem;
+  --ax-public-radio-size-small: 1.125rem;
+  --ax-public-radio-size-extra-small: var(--wb-size-200);
 
-  --ax-public-radio-dot-size-medium: 0.625rem /* missing token */;
-  --ax-public-radio-dot-size-small: 0.5rem /* missing token */;
-  --ax-public-radio-dot-size-extra-small: 0.5rem /* missing token */;
+  --ax-public-radio-dot-size-medium: 0.625rem;
+  --ax-public-radio-dot-size-small: var(--wb-size-100);
+  --ax-public-radio-dot-size-extra-small: var(--wb-size-100);
 }
 
 @layer ui.component {

packages/ui/src/components/radio-button/radio.module.css

@@ -2,13 +2,13 @@
   --ax-public-radio-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-radio-bg: var(--wb-ui-bg-base);
   --ax-public-radio-checked-bg: var(--wb-components-selector-fill-checked);
-  --ax-public-radio-dot-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-radio-dot-color: var(--wb-ui-text-onaccent-default);
 
-  --ax-public-radio-focus-border-color: var(--wb-ui-text-default);
+  --ax-public-radio-focus-border-color: var(--wb-shadow-ui-focus);
 
   --ax-public-radio-disabled-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-radio-disabled-bg: var(--wb-ui-bg-inset);
-  --ax-public-radio-disabled-dot-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-radio-disabled-dot-color: var(--wb-ui-icon-disabled);
   --ax-public-radio-border-radius: var(--wb-radius-full);
 }
 
@@ -23,7 +23,7 @@
     appearance: none;
     position: relative;
     margin: 0;
-    border: 0.0625rem solid var(--ax-public-radio-border-color);
+    border: var(--wb-size-12) solid var(--ax-public-radio-border-color);
     border-radius: var(--ax-public-radio-border-radius);
     background-color: var(--ax-public-radio-bg);
     cursor: pointer;
@@ -36,9 +36,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: var(--ax-public-radio-dot-size-small);
-      height: var(--ax-public-radio-dot-size-small);
-      border-radius: 50%;
+      border-radius: var(--wb-radius-full);
       background-color: var(--ax-public-radio-dot-color);
       opacity: 0;
     }
@@ -54,7 +52,9 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--ax-public-radio-focus-border-color);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-radio-focus-border-color);
     }
 
     &:disabled {

packages/ui/src/components/select/select-button/select-button.module.css

@@ -1,8 +1,9 @@
 :root {
-  --ax-public-select-border-size: 0.0625rem;
+  --ax-public-select-border-size: var(--wb-size-12);
   --ax-public-select-button-color: var(--wb-ui-text-default);
   --ax-public-select-button-border-color: var(--wb-components-text-field-stroke-default);
   --ax-public-select-button-border-color-focus: var(--wb-components-text-field-stroke-focus);
+  --ax-public-select-button-focus-ring-color: var(--wb-shadow-ui-focus);
   --ax-public-select-button-color-disabled: var(--wb-components-text-field-stroke-default);
 
   --ax-public-select-button-background-color-error: var(--wb-components-text-field-bg-primary-critical);
@@ -44,6 +45,9 @@
     &:focus-visible {
       border-color: var(--ax-public-select-button-border-color-focus);
       outline: none;
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-select-button-focus-ring-color);
     }
 
     &:disabled {

packages/ui/src/components/snackbar/components/action-buttons.module.css

@@ -2,7 +2,7 @@
   .container {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--wb-space-100);
     margin-left: auto;
   }
 }

packages/ui/src/components/snackbar/components/icon.module.css

@@ -1,7 +1,7 @@
 @layer ui.component {
   .container {
     display: flex;
-    padding-top: 0.125rem;
+    padding-top: var(--wb-space-25);
 
     &.center {
       align-self: center;