From 3faa0f537f36a819e0cf93d5bee4fbcbabf597ff Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 10:49:12 +0200
Subject: [PATCH 1/3] style(ui): bind focus rings, elevation and control
 metrics to the token set

Focusable controls draw the ring the design system defines: the
focus-element geometry with the focus colour, replacing the hardcoded
offsets each component carried. Elevation comes from the shadow ramp
with its own colour token, so dark mode no longer needs a second rule.

Selector, snackbar, tooltip and date-picker surfaces bind their
component tokens, and the sizes that were literal rem values now take
the size scale.
---
 .../components/checkbox/checkbox.module.css   | 26 ++++----
 .../ui/src/components/chips/chips.module.css  |  3 +-
 .../date-picker/date-picker.module.css        |  6 +-
 .../src/components/date-picker/variables.css  |  8 +--
 .../ui/src/components/modal/modal.module.css  | 22 +++----
 .../radio-button/radio-size.module.css        | 12 ++--
 .../components/radio-button/radio.module.css  | 14 +++--
 .../select-button/select-button.module.css    |  2 +
 .../components/action-buttons.module.css      |  2 +-
 .../snackbar/components/icon.module.css       |  2 +-
 .../components/snackbar/snackbar.module.css   | 60 ++++++++++---------
 .../switch/icon-switch/icon-switch.module.css | 10 ++--
 .../components/switch/switch-size.module.css  | 20 +++----
 .../src/components/switch/switch.module.css   | 20 ++++---
 .../src/components/tooltip/tooltip.module.css |  2 +-
 .../ui/src/shared/styles/list-item.module.css |  9 ++-
 16 files changed, 116 insertions(+), 102 deletions(-)

diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
index 86ae2297f..2fa88f0c8 100644
--- a/packages/ui/src/components/checkbox/checkbox.module.css
+++ b/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-medium: var(--wb-size-300);
+  --ax-public-checkbox-size-small: var(--wb-size-200);
+  --ax-public-checkbox-size-extra-small: var(--wb-size-150);
 
-  --ax-public-checkbox-icon-size-medium: 0.875rem;
-  --ax-public-checkbox-icon-size-small: 0.75rem;
-  --ax-public-checkbox-icon-size-extra-small: 0.625rem;
+  --ax-public-checkbox-icon-size-medium: var(--wb-size-200);
+  --ax-public-checkbox-icon-size-small: var(--wb-size-150);
+  --ax-public-checkbox-icon-size-extra-small: var(--wb-size-100);
 
   --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;
     }
diff --git a/packages/ui/src/components/chips/chips.module.css b/packages/ui/src/components/chips/chips.module.css
index f3473f18e..a22c8271d 100644
--- a/packages/ui/src/components/chips/chips.module.css
+++ b/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;
     }
   }
diff --git a/packages/ui/src/components/date-picker/date-picker.module.css b/packages/ui/src/components/date-picker/date-picker.module.css
index 701b66a61..f8829b5d0 100644
--- a/packages/ui/src/components/date-picker/date-picker.module.css
+++ b/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
diff --git a/packages/ui/src/components/date-picker/variables.css b/packages/ui/src/components/date-picker/variables.css
index dc10180e1..1b779f3a3 100644
--- a/packages/ui/src/components/date-picker/variables.css
+++ b/packages/ui/src/components/date-picker/variables.css
@@ -4,17 +4,17 @@
 @import 'react-day-picker/style.css' layer(ui.base);
 
 :root {
-  --ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base);
+  --ax-public-date-picker-dropdown-background: var(--wb-components-datepicker-bg-secondary);
   --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);
 }
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index a57ac1199..3d2c5b12d 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/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);
     }
   }
 
diff --git a/packages/ui/src/components/radio-button/radio-size.module.css b/packages/ui/src/components/radio-button/radio-size.module.css
index 02ad89204..31d6520a0 100644
--- a/packages/ui/src/components/radio-button/radio-size.module.css
+++ b/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: var(--wb-size-300);
+  --ax-public-radio-size-small: var(--wb-size-200);
+  --ax-public-radio-size-extra-small: var(--wb-size-150);
 
-  --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: var(--wb-size-150);
+  --ax-public-radio-dot-size-small: var(--wb-size-100);
+  --ax-public-radio-dot-size-extra-small: var(--wb-size-50);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css
index 461cf4d8d..9c6727a77 100644
--- a/packages/ui/src/components/radio-button/radio.module.css
+++ b/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;
@@ -38,7 +38,7 @@
       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 +54,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 {
diff --git a/packages/ui/src/components/select/select-button/select-button.module.css b/packages/ui/src/components/select/select-button/select-button.module.css
index 0699e6cad..3869d380a 100644
--- a/packages/ui/src/components/select/select-button/select-button.module.css
+++ b/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 {
diff --git a/packages/ui/src/components/snackbar/components/action-buttons.module.css b/packages/ui/src/components/snackbar/components/action-buttons.module.css
index 4e32c0171..4426a57ae 100644
--- a/packages/ui/src/components/snackbar/components/action-buttons.module.css
+++ b/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;
   }
 }
diff --git a/packages/ui/src/components/snackbar/components/icon.module.css b/packages/ui/src/components/snackbar/components/icon.module.css
index d969ca01e..1171ab12f 100644
--- a/packages/ui/src/components/snackbar/components/icon.module.css
+++ b/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;
diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css
index 77f338eae..8e3b9471f 100644
--- a/packages/ui/src/components/snackbar/snackbar.module.css
+++ b/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,25 @@
   --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-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-success) 0%, var(--wb-components-snackbar-bg-success) 100%),
-    var(--wb-ui-bg-base);
-  --ax-public-snackbar-success-icon-color: var(--wb-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success);
+  --ax-public-snackbar-success-background: var(--wb-ui-bg-base);
+  --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-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-critical) 0%, var(--wb-components-snackbar-bg-critical) 100%),
-    var(--wb-ui-bg-base);
-  --ax-public-snackbar-error-icon-color: var(--wb-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical);
+  --ax-public-snackbar-error-background: var(--wb-ui-bg-base);
+  --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-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-warning) 0%, var(--wb-components-snackbar-bg-warning) 100%),
-    var(--wb-ui-bg-base);
+  --ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning);
+  --ax-public-snackbar-warning-background: 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-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);
+  --ax-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info);
+  --ax-public-snackbar-info-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info);
 }
 
 @layer ui.component {
@@ -45,7 +36,7 @@
     width: calc(var(--ax-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--ax-public-snackbar-border-size));
     border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-default-border);
     border-radius: var(--ax-public-snackbar-border-radius);
-    background: var(--ax-public-snackbar-default-background);
+    background-color: var(--ax-public-snackbar-default-background);
     padding: var(--ax-public-snackbar-padding);
 
     .content {
@@ -56,22 +47,35 @@
     }
 
     &.success {
-      background: var(--ax-public-snackbar-success-background);
+      background-color: var(--ax-public-snackbar-success-background);
+      background-image: linear-gradient(
+        var(--wb-components-snackbar-bg-success),
+        var(--wb-components-snackbar-bg-success)
+      );
       border-color: var(--ax-public-snackbar-success-border);
     }
 
     &.error {
-      background: var(--ax-public-snackbar-error-background);
+      background-color: var(--ax-public-snackbar-error-background);
+      background-image: linear-gradient(
+        var(--wb-components-snackbar-bg-critical),
+        var(--wb-components-snackbar-bg-critical)
+      );
       border-color: var(--ax-public-snackbar-error-border);
     }
 
     &.warning {
-      background: var(--ax-public-snackbar-warning-background);
+      background-color: var(--ax-public-snackbar-warning-background);
+      background-image: linear-gradient(
+        var(--wb-components-snackbar-bg-warning),
+        var(--wb-components-snackbar-bg-warning)
+      );
       border-color: var(--ax-public-snackbar-warning-border);
     }
 
     &.info {
-      background: var(--ax-public-snackbar-info-background);
+      background-color: var(--ax-public-snackbar-info-background);
+      background-image: linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info));
       border-color: var(--ax-public-snackbar-info-border);
     }
   }
diff --git a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
index 168b3d6e4..081437cde 100644
--- a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
+++ b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
@@ -2,10 +2,10 @@
   --ax-public-icon-switch-width: 4.125rem;
   --ax-public-icon-switch-height: 2.125rem;
   --ax-public-icon-switch-thumb-size: 1.75rem;
-  --ax-public-icon-switch-thumb-offset: 0.1875rem;
-  --ax-public-icon-switch-translate: 2rem;
-  --ax-public-icon-switch-padding: 0.5rem;
-  --ax-public-icon-switch-icon-size: 1rem;
+  --ax-public-icon-switch-thumb-offset: var(--wb-size-37);
+  --ax-public-icon-switch-translate: var(--wb-size-400);
+  --ax-public-icon-switch-padding: var(--wb-space-100);
+  --ax-public-icon-switch-icon-size: var(--wb-size-200);
 
   --ax-public-icon-switch-track-bg: var(--wb-ui-bg-inset);
   --ax-public-icon-switch-thumb-bg-primary: var(--wb-components-selector-fill-checked);
@@ -49,7 +49,7 @@
     left: var(--ax-public-icon-switch-thumb-offset);
     width: var(--ax-public-icon-switch-thumb-size);
     height: var(--ax-public-icon-switch-thumb-size);
-    border-radius: 50%;
+    border-radius: var(--wb-radius-full);
     transition: transform 0.1s ease-in-out;
     display: flex;
     align-items: center;
diff --git a/packages/ui/src/components/switch/switch-size.module.css b/packages/ui/src/components/switch/switch-size.module.css
index 1305dda2f..ebe9b06c7 100644
--- a/packages/ui/src/components/switch/switch-size.module.css
+++ b/packages/ui/src/components/switch/switch-size.module.css
@@ -1,19 +1,17 @@
-/* public variables */
 :root {
-  --ax-public-switch-width-medium: 1.875rem;
-  --ax-public-switch-height-medium: 1.25rem;
-  --ax-public-switch-thumb-padding-medium: 0.1875rem;
+  --ax-public-switch-width-medium: var(--wb-size-500);
+  --ax-public-switch-height-medium: var(--wb-size-300);
+  --ax-public-switch-thumb-padding-medium: var(--wb-size-25);
 
-  --ax-public-switch-width-small: 1.75rem;
-  --ax-public-switch-height-small: 1.125rem;
-  --ax-public-switch-thumb-padding-small: 0.1875rem;
+  --ax-public-switch-width-small: var(--wb-size-400);
+  --ax-public-switch-height-small: var(--wb-size-200);
+  --ax-public-switch-thumb-padding-small: var(--wb-size-25);
 
-  --ax-public-switch-width-extra-small: 1.625rem;
-  --ax-public-switch-height-extra-small: 1rem;
-  --ax-public-switch-thumb-padding-extra-small: 0.1875rem;
+  --ax-public-switch-width-extra-small: var(--wb-size-300);
+  --ax-public-switch-height-extra-small: var(--wb-size-150);
+  --ax-public-switch-thumb-padding-extra-small: var(--wb-size-25);
 }
 
-/* private calculations */
 :root {
   --ax-switch-thumb-size-medium: calc(
     var(--ax-public-switch-height-medium) - 2 * var(--ax-public-switch-thumb-padding-medium)
diff --git a/packages/ui/src/components/switch/switch.module.css b/packages/ui/src/components/switch/switch.module.css
index 28d0f7950..c23ea4f28 100644
--- a/packages/ui/src/components/switch/switch.module.css
+++ b/packages/ui/src/components/switch/switch.module.css
@@ -6,12 +6,12 @@
   --ax-public-switch-disabled-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-track-no-selected-color: var(--wb-ui-bg-base);
   --ax-public-track-selected-color: var(--wb-components-selector-fill-checked);
-  --ax-public-thumb-no-selected-color: var(--wb-components-nav-button-icon-primary-default);
-  --ax-public-thumb-disabled-color: var(--wb-components-nav-button-icon-primary-disabled);
-  --ax-public-thumb-selected-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-thumb-no-selected-color: var(--wb-ui-text-subtle-default);
+  --ax-public-thumb-disabled-color: var(--wb-ui-icon-disabled);
+  --ax-public-thumb-selected-color: var(--wb-ui-text-onaccent-default);
 
-  --ax-public-switch-focus-border-color: var(--wb-ui-text-default);
-  --ax-public-switch-border-size: 0.0625rem;
+  --ax-public-switch-focus-border-color: var(--wb-shadow-ui-focus);
+  --ax-public-switch-border-size: var(--wb-size-12);
 }
 
 @layer ui.base {
@@ -22,7 +22,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    border-radius: 100px;
+    border-radius: var(--wb-radius-full);
     border: var(--ax-public-switch-border-size) solid var(--ax-public-switch-outline-color);
 
     &:not(:hover) {
@@ -31,7 +31,7 @@
 
     .thumb {
       position: absolute;
-      border-radius: 100px;
+      border-radius: var(--wb-radius-full);
       background-color: var(--ax-public-thumb-no-selected-color);
       transition: transform var(--ax-public-transition);
     }
@@ -40,7 +40,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      border-radius: 100px;
+      border-radius: var(--wb-radius-full);
     }
 
     .thumb-contents {
@@ -49,7 +49,9 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--ax-public-switch-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-switch-focus-border-color);
     }
 
     &[data-checked] {
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index 4cc184bd8..110a7783e 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -28,7 +28,7 @@
 
   .arrow {
     width: 10px;
-    height: 4px;
+    height: var(--wb-size-50);
     background-color: var(--tooltip-background);
     clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
diff --git a/packages/ui/src/shared/styles/list-item.module.css b/packages/ui/src/shared/styles/list-item.module.css
index b6e77d0ca..fca7c2075 100644
--- a/packages/ui/src/shared/styles/list-item.module.css
+++ b/packages/ui/src/shared/styles/list-item.module.css
@@ -5,8 +5,8 @@
   --ax-public-list-item-color: var(--wb-ui-text-default);
 
   --ax-public-list-item-background-color-focus: var(--wb-ui-bg-fill-hover);
-  --ax-public-list-item-outline-color-focus: var(--wb-ui-stroke-focus);
-  --ax-public-list-item-outline-size: 0.0625rem;
+  --ax-public-list-item-outline-color-focus: var(--wb-shadow-ui-focus);
+  --ax-public-list-item-outline-size: var(--wb-shadow-ui-focus-element-spread);
 
   --ax-public-list-item-color-destructive: var(--wb-ui-text-critical-default);
   --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-10);
@@ -40,7 +40,10 @@
 
     &:focus-visible,
     &[data-highlighted] {
-      outline: var(--ax-public-list-item-outline-size) solid var(--ax-public-list-item-outline-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(--ax-public-list-item-outline-size)
+        var(--ax-public-list-item-outline-color-focus);
       background-color: var(--ax-public-list-item-background-color-focus);
     }
 

From c6d56dae20342f66f1e6a8da390fbe2b16bc0ff2 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 10:49:14 +0200
Subject: [PATCH 2/3] style(sdk,ai-studio): repoint the remaining design-token
 usage

The SDK global stylesheet, the diagram surface and the execution
markers bind canvas and ui tokens; app-scoped variables stay app-scoped.
---
 .../components/execution/node-markers.module.css | 16 ++++++++--------
 packages/sdk/src/features/diagram/diagram.tsx    |  2 +-
 .../variable-text/variable-text.module.css       |  2 +-
 packages/sdk/src/index.css                       |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/ai-studio/src/components/execution/node-markers.module.css b/apps/ai-studio/src/components/execution/node-markers.module.css
index 158f88ef2..11ca5035a 100644
--- a/apps/ai-studio/src/components/execution/node-markers.module.css
+++ b/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 {
diff --git a/packages/sdk/src/features/diagram/diagram.tsx b/packages/sdk/src/features/diagram/diagram.tsx
index 466cd50bd..d1ab28a9e 100644
--- a/packages/sdk/src/features/diagram/diagram.tsx
+++ b/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>
   );
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
index e0cab7521..0f6da5900 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
+++ b/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 {
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index 3d48d6a52..bd3caf3c6 100644
--- a/packages/sdk/src/index.css
+++ b/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

From 21ef3dea33352342e35b184dfa95c0bfd730879a Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 12:21:53 +0200
Subject: [PATCH 3/3] fix(ui): restore the contracts and metrics the repoint
 changed

The public snackbar background variables carry the complete layered
value again - a status tint over the surface, consumed as one
background - because two SDK surfaces read them directly and lost
their tint when the tint moved into a private rule.

Selector and switch dimensions go back to the values they had. The
size scale has no step for most of them, so snapping to the nearest
one silently resized every checkbox, radio and switch; a token is
bound only where it resolves to the same value.

The date-picker popup takes the base surface again, so hovering a day
is visible, and the generic radio dot rule no longer overrides the
size classes that follow it.
---
 .../components/checkbox/checkbox.module.css   | 10 ++---
 .../src/components/date-picker/variables.css  |  2 +-
 .../radio-button/radio-size.module.css        | 10 ++---
 .../components/radio-button/radio.module.css  |  2 -
 .../components/snackbar/snackbar.module.css   | 38 ++++++++-----------
 .../components/switch/switch-size.module.css  | 18 ++++-----
 6 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
index 2fa88f0c8..5d95b95d1 100644
--- a/packages/ui/src/components/checkbox/checkbox.module.css
+++ b/packages/ui/src/components/checkbox/checkbox.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-checkbox-size-medium: var(--wb-size-300);
-  --ax-public-checkbox-size-small: var(--wb-size-200);
-  --ax-public-checkbox-size-extra-small: var(--wb-size-150);
+  --ax-public-checkbox-size-medium: 1.25rem;
+  --ax-public-checkbox-size-small: 1.125rem;
+  --ax-public-checkbox-size-extra-small: var(--wb-size-200);
 
-  --ax-public-checkbox-icon-size-medium: var(--wb-size-200);
+  --ax-public-checkbox-icon-size-medium: 0.875rem;
   --ax-public-checkbox-icon-size-small: var(--wb-size-150);
-  --ax-public-checkbox-icon-size-extra-small: var(--wb-size-100);
+  --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);
diff --git a/packages/ui/src/components/date-picker/variables.css b/packages/ui/src/components/date-picker/variables.css
index 1b779f3a3..9cfa8e79f 100644
--- a/packages/ui/src/components/date-picker/variables.css
+++ b/packages/ui/src/components/date-picker/variables.css
@@ -4,7 +4,7 @@
 @import 'react-day-picker/style.css' layer(ui.base);
 
 :root {
-  --ax-public-date-picker-dropdown-background: var(--wb-components-datepicker-bg-secondary);
+  --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 var(--wb-shadow-ui-color);
 
diff --git a/packages/ui/src/components/radio-button/radio-size.module.css b/packages/ui/src/components/radio-button/radio-size.module.css
index 31d6520a0..6d3b007e2 100644
--- a/packages/ui/src/components/radio-button/radio-size.module.css
+++ b/packages/ui/src/components/radio-button/radio-size.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-radio-size-medium: var(--wb-size-300);
-  --ax-public-radio-size-small: var(--wb-size-200);
-  --ax-public-radio-size-extra-small: var(--wb-size-150);
+  --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: var(--wb-size-150);
+  --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-50);
+  --ax-public-radio-dot-size-extra-small: var(--wb-size-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css
index 9c6727a77..85dd4cdba 100644
--- a/packages/ui/src/components/radio-button/radio.module.css
+++ b/packages/ui/src/components/radio-button/radio.module.css
@@ -36,8 +36,6 @@
       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: var(--ax-public-radio-border-radius);
       background-color: var(--ax-public-radio-dot-color);
       opacity: 0;
diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css
index 8e3b9471f..cc58da979 100644
--- a/packages/ui/src/components/snackbar/snackbar.module.css
+++ b/packages/ui/src/components/snackbar/snackbar.module.css
@@ -14,19 +14,26 @@
   --ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default);
 
   --ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success);
-  --ax-public-snackbar-success-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-success-background:
+    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-components-snackbar-stroke-success);
 
   --ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical);
-  --ax-public-snackbar-error-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-error-background:
+    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-components-snackbar-stroke-critical);
 
   --ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning);
-  --ax-public-snackbar-warning-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-warning-background:
+    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-info-border: var(--wb-components-snackbar-stroke-info);
-  --ax-public-snackbar-info-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-info-background:
+    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);
 }
 
@@ -36,7 +43,7 @@
     width: calc(var(--ax-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--ax-public-snackbar-border-size));
     border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-default-border);
     border-radius: var(--ax-public-snackbar-border-radius);
-    background-color: var(--ax-public-snackbar-default-background);
+    background: var(--ax-public-snackbar-default-background);
     padding: var(--ax-public-snackbar-padding);
 
     .content {
@@ -47,35 +54,22 @@
     }
 
     &.success {
-      background-color: var(--ax-public-snackbar-success-background);
-      background-image: linear-gradient(
-        var(--wb-components-snackbar-bg-success),
-        var(--wb-components-snackbar-bg-success)
-      );
+      background: var(--ax-public-snackbar-success-background);
       border-color: var(--ax-public-snackbar-success-border);
     }
 
     &.error {
-      background-color: var(--ax-public-snackbar-error-background);
-      background-image: linear-gradient(
-        var(--wb-components-snackbar-bg-critical),
-        var(--wb-components-snackbar-bg-critical)
-      );
+      background: var(--ax-public-snackbar-error-background);
       border-color: var(--ax-public-snackbar-error-border);
     }
 
     &.warning {
-      background-color: var(--ax-public-snackbar-warning-background);
-      background-image: linear-gradient(
-        var(--wb-components-snackbar-bg-warning),
-        var(--wb-components-snackbar-bg-warning)
-      );
+      background: var(--ax-public-snackbar-warning-background);
       border-color: var(--ax-public-snackbar-warning-border);
     }
 
     &.info {
-      background-color: var(--ax-public-snackbar-info-background);
-      background-image: linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info));
+      background: var(--ax-public-snackbar-info-background);
       border-color: var(--ax-public-snackbar-info-border);
     }
   }
diff --git a/packages/ui/src/components/switch/switch-size.module.css b/packages/ui/src/components/switch/switch-size.module.css
index ebe9b06c7..9543fe743 100644
--- a/packages/ui/src/components/switch/switch-size.module.css
+++ b/packages/ui/src/components/switch/switch-size.module.css
@@ -1,15 +1,15 @@
 :root {
-  --ax-public-switch-width-medium: var(--wb-size-500);
-  --ax-public-switch-height-medium: var(--wb-size-300);
-  --ax-public-switch-thumb-padding-medium: var(--wb-size-25);
+  --ax-public-switch-width-medium: 1.875rem;
+  --ax-public-switch-height-medium: 1.25rem;
+  --ax-public-switch-thumb-padding-medium: var(--wb-size-37);
 
-  --ax-public-switch-width-small: var(--wb-size-400);
-  --ax-public-switch-height-small: var(--wb-size-200);
-  --ax-public-switch-thumb-padding-small: var(--wb-size-25);
+  --ax-public-switch-width-small: 1.75rem;
+  --ax-public-switch-height-small: 1.125rem;
+  --ax-public-switch-thumb-padding-small: var(--wb-size-37);
 
-  --ax-public-switch-width-extra-small: var(--wb-size-300);
-  --ax-public-switch-height-extra-small: var(--wb-size-150);
-  --ax-public-switch-thumb-padding-extra-small: var(--wb-size-25);
+  --ax-public-switch-width-extra-small: 1.625rem;
+  --ax-public-switch-height-extra-small: var(--wb-size-200);
+  --ax-public-switch-thumb-padding-extra-small: var(--wb-size-37);
 }
 
 :root {