Repoint the remaining controls, overlays and effects

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

@@ -1,17 +1,17 @@
 .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);
-  border-radius: var(--ax-public-node-border-radius);
-  border: var(--ax-public-node-border-size) solid var(--ax-public-node-border-color);
-  background: var(--ax-public-node-background-color);
-  color: var(--ax-public-node-title-subtitle);
+  padding: var(--wb-space-100);
+  border-radius: var(--wb-canvas-node-head-radius);
+  border: var(--wb-size-12) solid var(--wb-canvas-node-stroke-default);
+  background: var(--wb-canvas-node-bg-primary-default);
+  color: var(--wb-canvas-node-text-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--wb-space-100);
 
   &,
   * {
@@ -34,7 +34,7 @@
 }
 
 .icon--completed {
-  color: var(--ax-public-node-title-color);
+  color: var(--wb-canvas-node-text);
 }
 
 .icon--failed {

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-ui-bg-canvas)" />
       </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/chips/chips.module.css

@@ -62,7 +62,8 @@
     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(--wb-shadow-ui-focus);
       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,28 @@
   --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-background: var(--wb-ui-bg-elevated);
   --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-close-button-color: var(--wb-ui-text-subtle-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-content-background: var(--wb-ui-bg-elevated);
   --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 +37,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 +70,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 +95,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 +158,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(--ax-public-radio-border-radius);
       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

@@ -44,6 +44,8 @@
     &: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(--wb-shadow-ui-focus);
     }
 
     &: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;

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

@@ -1,5 +1,5 @@
 :root {
-  --ax-public-snackbar-border-size: 0.0625rem;
+  --ax-public-snackbar-border-size: var(--wb-size-12);
   --ax-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200);
   --ax-public-snackbar-border-radius: var(--wb-radius-100);
   --ax-public-snackbar-content-gap: var(--wb-space-150);
@@ -9,34 +9,32 @@
   --ax-public-snackbar-subtitle-color: var(--wb-ui-text-subtle-default);
   --ax-public-snackbar-close-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-default-border: var(--wb-ui-stroke-subtle);
+  --ax-public-snackbar-default-border: var(--wb-components-snackbar-stroke-default);
   --ax-public-snackbar-default-background: var(--wb-ui-bg-base);
   --ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-success-border: var(--wb-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success);
   --ax-public-snackbar-success-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-success) 0%, var(--wb-components-snackbar-bg-success) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-success), var(--wb-components-snackbar-bg-success)),
     var(--wb-ui-bg-base);
-  --ax-public-snackbar-success-icon-color: var(--wb-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-icon-color: var(--wb-components-snackbar-stroke-success);
 
-  --ax-public-snackbar-error-border: var(--wb-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical);
   --ax-public-snackbar-error-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-critical) 0%, var(--wb-components-snackbar-bg-critical) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-critical), var(--wb-components-snackbar-bg-critical)),
     var(--wb-ui-bg-base);
-  --ax-public-snackbar-error-icon-color: var(--wb-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-icon-color: var(--wb-components-snackbar-stroke-critical);
 
-  --ax-public-snackbar-warning-border: var(--wb-colors-orange-300); /* missing token */
+  --ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning);
   --ax-public-snackbar-warning-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-warning) 0%, var(--wb-components-snackbar-bg-warning) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-warning), var(--wb-components-snackbar-bg-warning)),
     var(--wb-ui-bg-base);
+  --ax-public-snackbar-warning-icon-color: var(--wb-components-snackbar-stroke-warning);
 
-  --ax-public-snackbar-warning-icon-color: var(--wb-colors-orange-300); /* missing token */
-
-  --ax-public-snackbar-info-border: var(--wb-components-selector-fill-checked);
+  --ax-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info);
   --ax-public-snackbar-info-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-info) 0%, var(--wb-components-snackbar-bg-info) 100%),
-    var(--wb-ui-bg-base);
-  --ax-public-snackbar-info-icon-color: var(--wb-colors-blue-400);
+    linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info)), var(--wb-ui-bg-base);
+  --ax-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info);
 }
 
 @layer ui.component {