@moduix/react 2.0.0 → 2.1.0

package/dist/components/sidebar/Sidebar.css

@@ -11,7 +11,7 @@
     --splitter-panel-padding: 0;
     --splitter-panel-min-height: 0;
     --splitter-resize-trigger-line-color: var(--sidebar-border-color, var(--color-border));
-    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, .75rem);
+    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, var(--spacing-3));
     isolation: isolate;
   }
 
@@ -97,9 +97,9 @@
 
   ._3sukta_trigger {
     box-sizing: border-box;
-    width: var(--sidebar-trigger-size, 1.75rem);
-    min-width: var(--sidebar-trigger-size, 1.75rem);
-    height: var(--sidebar-trigger-size, 1.75rem);
+    width: var(--sidebar-trigger-size, var(--spacing-7));
+    min-width: var(--sidebar-trigger-size, var(--spacing-7));
+    height: var(--sidebar-trigger-size, var(--spacing-7));
     border-radius: var(--sidebar-trigger-radius, var(--radius-full));
     color: var(--sidebar-muted-color, var(--color-muted-foreground));
     appearance: none;
@@ -116,14 +116,14 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
-        var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
@@ -142,7 +142,7 @@
   ._3sukta_trigger {
     z-index: 4;
     margin-block-start: var(--sidebar-trigger-offset-y, var(--spacing-4));
-    margin-inline: calc(var(--sidebar-trigger-size, 1.75rem) * -.5);
+    margin-inline: calc(var(--sidebar-trigger-size, var(--spacing-7)) * -.5);
     border: var(--sidebar-trigger-border-width, var(--border-width-sm)) solid
       var(--sidebar-trigger-border-color, var(--color-border));
     border-radius: var(--sidebar-trigger-radius, var(--radius-full));
@@ -211,8 +211,8 @@
   }
 
   ._3sukta_groupAction {
-    width: var(--sidebar-group-action-size, 1.5rem);
-    height: var(--sidebar-group-action-size, 1.5rem);
+    width: var(--sidebar-group-action-size, var(--size-xs));
+    height: var(--sidebar-group-action-size, var(--size-xs));
     border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
     color: var(--sidebar-muted-color, var(--color-muted-foreground));
     appearance: none;
@@ -227,14 +227,14 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
-        var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     @media (hover: hover) {
@@ -307,8 +307,8 @@
     display: flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
       flex: none;
     }
 
@@ -324,9 +324,9 @@
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
-        var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
@@ -365,7 +365,7 @@
       min-height: var(--sidebar-menu-button-height-lg, var(--size-lg));
     }
 
-    & > [data-slot="collapsible-indicator"] {
+    & > [data-slot="collapsible-indicator"], & > [data-slot="menu-indicator"] {
       margin-inline-start: auto;
     }
   }
@@ -376,8 +376,8 @@
 
   ._3sukta_menuAction {
     z-index: 1;
-    width: var(--sidebar-menu-action-size, 1.5rem);
-    height: var(--sidebar-menu-action-size, 1.5rem);
+    width: var(--sidebar-menu-action-size, var(--size-xs));
+    height: var(--sidebar-menu-action-size, var(--size-xs));
     border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
     color: var(--sidebar-muted-color, var(--color-muted-foreground));
     appearance: none;
@@ -391,19 +391,20 @@
     padding: 0;
     display: inline-flex;
     position: absolute;
-    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) - var(--sidebar-menu-action-size, 1.5rem)) /
+    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) -
+          var(--sidebar-menu-action-size, var(--size-xs))) /
         2);
     inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
     }
 
     &:focus-visible {
-      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
-        var(--sidebar-focus-ring-color, var(--color-ring));
-      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     @media (hover: hover) {
@@ -436,7 +437,7 @@
   }
 
   ._3sukta_menuItem:has(._3sukta_menuAction) ._3sukta_menuButton, ._3sukta_menuItem:has(._3sukta_menuBadge) ._3sukta_menuButton {
-    padding-inline-end: calc(var(--sidebar-menu-action-size, 1.5rem) +
+    padding-inline-end: calc(var(--sidebar-menu-action-size, var(--size-xs)) +
         var(--sidebar-menu-button-padding-x, var(--spacing-2)) * 2);
   }
 

package/dist/components/signature-pad/SignaturePad.css

@@ -49,7 +49,8 @@
 
     &:focus-visible {
       border-color: var(--signature-pad-focus-border-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--signature-pad-focus-ring-width, var(--border-width-md))
+      box-shadow: 0 0 0
+        var(--signature-pad-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
         var(--signature-pad-focus-ring-color, var(--color-ring));
     }
   }
@@ -59,13 +60,13 @@
   }
 
   ._wse8a_guide {
-    right: var(--signature-pad-guide-inset-x, var(--spacing-6));
+    inset-inline-end: var(--signature-pad-guide-inset-x, var(--spacing-6));
     bottom: var(--signature-pad-guide-bottom, var(--spacing-8));
-    left: var(--signature-pad-guide-inset-x, var(--spacing-6));
     border-bottom: var(--signature-pad-guide-border-width, var(--border-width-sm)) dashed
       var(--signature-pad-guide-color, var(--color-border));
     pointer-events: none;
     position: absolute;
+    inset-inline-start: var(--signature-pad-guide-inset-x, var(--spacing-6));
 
     &[data-disabled] {
       opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
@@ -74,7 +75,6 @@
 
   ._wse8a_clearTrigger {
     top: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
-    right: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
     border: var(--signature-pad-clear-trigger-border-width, 0) solid
       var(--signature-pad-clear-trigger-border-color, transparent);
     --close-button-size: var(--signature-pad-clear-trigger-size, var(--size-md));
@@ -83,12 +83,13 @@
     --close-button-bg-hover: var(--signature-pad-clear-trigger-bg-hover, var(--color-accent));
     --close-button-color: var(--signature-pad-clear-trigger-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--signature-pad-clear-trigger-color-hover, var(--color-foreground));
-    --close-button-icon-size: var(--signature-pad-clear-trigger-icon-size, 1rem);
+    --close-button-icon-size: var(--signature-pad-clear-trigger-icon-size, var(--spacing-4));
     --close-button-transition: var(--signature-pad-transition, var(--transition-default));
-    --close-button-focus-ring-width: var(--signature-pad-clear-trigger-focus-ring-width, var(--border-width-md));
+    --close-button-focus-ring-width: var(--signature-pad-clear-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
     --close-button-focus-ring-color: var(--signature-pad-clear-trigger-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-offset: var(--signature-pad-clear-trigger-focus-ring-offset, var(--spacing-1));
     --close-button-disabled-opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
     position: absolute;
+    inset-inline-end: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
   }
 }

package/dist/components/skeleton/Skeleton.css

@@ -6,7 +6,7 @@
     overflow: hidden;
 
     &[data-state="loading"] {
-      height: 1rem;
+      height: var(--skeleton-height, var(--spacing-4));
       animation: var(--skeleton-animation, var(--animation-pulse));
       background: var(--skeleton-bg, color-mix(in oklab, var(--color-muted-foreground) 18%, var(--color-background)));
       color: #0000;

package/dist/components/slider/Slider.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .NN9-IW_root {
     box-sizing: border-box;
-    gap: var(--slider-gap, .5rem);
+    gap: var(--slider-gap, var(--spacing-2));
     width: var(--slider-width, 12rem);
     color: var(--slider-color, var(--color-foreground));
     flex-direction: column;
@@ -37,7 +37,7 @@
   .NN9-IW_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--slider-control-size, 1.25rem);
+    min-height: var(--slider-control-size, var(--spacing-5));
     touch-action: none;
     user-select: none;
     cursor: pointer;
@@ -46,7 +46,7 @@
     position: relative;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-control-size, 1.25rem);
+      width: var(--slider-control-size, var(--spacing-5));
       flex-direction: column;
       height: 100%;
       min-height: 0;
@@ -59,7 +59,7 @@
 
   .NN9-IW_track {
     width: 100%;
-    height: var(--slider-track-size, .375rem);
+    height: var(--slider-track-size, var(--spacing-1-5));
     border-radius: var(--slider-track-radius, var(--radius-full));
     background-color: var(--slider-track-bg, var(--color-muted));
     box-shadow: inset 0 0 0 var(--slider-track-border-width, var(--border-width-sm))
@@ -69,7 +69,7 @@
     overflow: hidden;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-track-size, .375rem);
+      width: var(--slider-track-size, var(--spacing-1-5));
       height: 100%;
     }
   }
@@ -86,8 +86,8 @@
 
   .NN9-IW_thumb {
     box-sizing: border-box;
-    width: var(--slider-thumb-size, 1rem);
-    height: var(--slider-thumb-size, 1rem);
+    width: var(--slider-thumb-size, var(--spacing-4));
+    height: var(--slider-thumb-size, var(--spacing-4));
     border: var(--slider-thumb-border-width, var(--border-width-sm)) solid
       var(--slider-thumb-border-color, var(--color-border));
     border-radius: var(--slider-thumb-radius, var(--radius-full));
@@ -104,13 +104,15 @@
 
     &[data-dragging] {
       border-color: var(--slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring)),
+      box-shadow: 0 0 0 var(--focus-ring-inset-width, var(--border-width-sm))
+          var(--slider-focus-ring-color, var(--color-ring)),
         var(--slider-thumb-shadow-dragging, var(--shadow-md));
     }
 
     &:focus-visible {
       border-color: var(--slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 var(--focus-ring-inset-width, var(--border-width-sm))
+        var(--slider-focus-ring-color, var(--color-ring));
     }
 
     &[data-disabled] {
@@ -151,8 +153,8 @@
     position: relative;
 
     &:before {
-      width: var(--slider-marker-dot-size, .25rem);
-      height: var(--slider-marker-dot-size, .25rem);
+      width: var(--slider-marker-dot-size, var(--spacing-1));
+      height: var(--slider-marker-dot-size, var(--spacing-1));
       border-radius: var(--radius-full);
       background-color: var(--slider-marker-dot-bg, var(--color-border));
       content: "";

package/dist/components/spinner/Spinner.css

@@ -1,6 +1,6 @@
 @layer ui.components {
   .nzbtuq_root, [data-scope="spinner"][data-part="root"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-md, 1.25rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-md, var(--spacing-5)));
     width: var(--_spinner-size);
     height: var(--_spinner-size);
     color: var(--spinner-color, currentColor);
@@ -37,19 +37,19 @@
   }
 
   .nzbtuq_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, .75rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, var(--spacing-3)));
   }
 
   .nzbtuq_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, 1rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, var(--spacing-4)));
   }
 
   .nzbtuq_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, 1.75rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, var(--spacing-7)));
   }
 
   .nzbtuq_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, 2.25rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, var(--size-md)));
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/split-button/SplitButton.css

@@ -11,22 +11,22 @@
 
   .iLFhoa_trigger {
     min-width: 0;
+    padding-inline: var(--split-button-trigger-padding-x-md, var(--spacing-3));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     margin-inline-start: calc(var(--button-border-width, var(--border-width-sm)) * -1);
-    padding-inline: .75rem;
     position: relative;
   }
 
   .iLFhoa_trigger:before {
     content: "";
-    opacity: .16;
+    inset-block: var(--split-button-separator-inset, var(--spacing-1-5));
+    width: var(--split-button-separator-width, var(--border-width-sm));
+    background-color: var(--split-button-separator-color, currentColor);
+    opacity: var(--split-button-separator-opacity, .16);
     pointer-events: none;
-    background-color: currentColor;
-    width: 1px;
     position: absolute;
-    inset-block: .375rem;
-    inset-inline-start: 0;
+    inset-inline-start: var(--split-button-separator-offset, 0);
   }
 
   .iLFhoa_trigger[data-variant="outline"]:before, .iLFhoa_trigger[data-variant="destructive-outline"]:before {
@@ -34,18 +34,18 @@
   }
 
   .iLFhoa_trigger[data-size="xs"] {
-    padding-inline: .5rem;
+    padding-inline: var(--split-button-trigger-padding-x-xs, var(--spacing-2));
   }
 
   .iLFhoa_trigger[data-size="sm"] {
-    padding-inline: .625rem;
+    padding-inline: var(--split-button-trigger-padding-x-sm, var(--spacing-2-5));
   }
 
   .iLFhoa_trigger[data-size="lg"] {
-    padding-inline: .875rem;
+    padding-inline: var(--split-button-trigger-padding-x-lg, var(--spacing-3-5));
   }
 
   .iLFhoa_trigger[data-size="xl"] {
-    padding-inline: 1rem;
+    padding-inline: var(--split-button-trigger-padding-x-xl, var(--spacing-4));
   }
 }

package/dist/components/splitter/Splitter.css

@@ -80,7 +80,7 @@
 
     &:after {
       z-index: 1;
-      width: var(--splitter-resize-trigger-size, .625rem);
+      width: var(--splitter-resize-trigger-size, var(--spacing-2-5));
       content: "";
       height: 100%;
       position: absolute;
@@ -100,7 +100,7 @@
 
       &:after {
         width: 100%;
-        height: var(--splitter-resize-trigger-size, .625rem);
+        height: var(--splitter-resize-trigger-size, var(--spacing-2-5));
       }
     }
 
@@ -131,8 +131,8 @@
   .qnjB1q_resizeTriggerIndicator {
     z-index: 2;
     box-sizing: border-box;
-    width: var(--splitter-resize-trigger-indicator-width, .375rem);
-    height: var(--splitter-resize-trigger-indicator-height, 1.5rem);
+    width: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
+    height: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
     border: var(--splitter-resize-trigger-indicator-border-width, var(--border-width-sm)) solid
       var(--splitter-resize-trigger-indicator-border-color, var(--color-border));
     border-radius: var(--splitter-resize-trigger-indicator-radius, var(--radius-full));
@@ -148,8 +148,8 @@
     transform: translate(-50%, -50%);
 
     &[data-orientation="vertical"] {
-      width: var(--splitter-resize-trigger-indicator-height, 1.5rem);
-      height: var(--splitter-resize-trigger-indicator-width, .375rem);
+      width: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
+      height: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
     }
   }
 

package/dist/components/steps/Steps.css

@@ -88,9 +88,9 @@
     }
 
     &:focus-visible ._1tbAxa_indicator {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, 2px);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-incomplete] {
@@ -107,8 +107,8 @@
 
   ._1tbAxa_indicator {
     box-sizing: border-box;
-    width: var(--steps-indicator-size, 2rem);
-    height: var(--steps-indicator-size, 2rem);
+    width: var(--steps-indicator-size, var(--spacing-8));
+    height: var(--steps-indicator-size, var(--spacing-8));
     border: var(--steps-indicator-border-width, var(--border-width-sm)) solid
       var(--steps-indicator-border-color, var(--color-border));
     border-radius: var(--steps-indicator-radius, var(--radius-full));
@@ -127,8 +127,8 @@
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--steps-indicator-icon-size, .875rem);
-      height: var(--steps-indicator-icon-size, .875rem);
+      width: var(--steps-indicator-icon-size, var(--spacing-3-5));
+      height: var(--steps-indicator-icon-size, var(--spacing-3-5));
     }
 
     &[data-current] {
@@ -147,7 +147,7 @@
   ._1tbAxa_separator {
     height: var(--steps-separator-thickness, var(--border-width-sm));
     min-width: var(--steps-separator-min-width, var(--spacing-8));
-    margin-inline: var(--steps-separator-inset, .5rem);
+    margin-inline: var(--steps-separator-inset, var(--spacing-2));
     background-color: var(--steps-separator-color, var(--color-border));
     pointer-events: none;
     flex: auto;
@@ -157,9 +157,10 @@
     }
 
     &[data-orientation="vertical"] {
-      top: calc(var(--steps-indicator-size, 2rem) + var(--steps-separator-inset, .5rem));
+      top: calc(var(--steps-indicator-size, var(--spacing-8)) +
+          var(--steps-separator-inset, var(--spacing-2)));
       bottom: calc(var(--steps-gap, var(--spacing-4)) * -1);
-      left: calc(var(--steps-indicator-size, 2rem) / 2);
+      left: calc(var(--steps-indicator-size, var(--spacing-8)) / 2);
       width: var(--steps-separator-thickness, var(--border-width-sm));
       min-width: 0;
       height: auto;
@@ -193,9 +194,9 @@
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--steps-focus-ring-offset, 2px) * -1);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--steps-focus-ring-offset, var(--focus-ring-offset)) * -1);
     }
   }
 
@@ -207,15 +208,15 @@
 
   ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
     box-sizing: border-box;
-    min-height: var(--steps-action-height, 2rem);
+    min-height: var(--steps-action-height, var(--size-sm));
     justify-content: center;
     align-items: center;
     gap: var(--steps-action-gap, var(--spacing-2));
     border: var(--steps-action-border-width, var(--border-width-sm)) solid
       var(--steps-action-border-color, var(--color-border));
     border-radius: var(--steps-action-radius, var(--radius-md));
-    padding-block: var(--steps-action-padding-y, .375rem);
-    padding-inline: var(--steps-action-padding-x, .75rem);
+    padding-block: var(--steps-action-padding-y, var(--spacing-1-5));
+    padding-inline: var(--steps-action-padding-x, var(--spacing-3));
     background-color: var(--steps-action-bg, var(--color-background));
     color: var(--steps-action-color, var(--color-foreground));
     font: inherit;
@@ -237,9 +238,9 @@
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, 2px);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {

package/dist/components/switch/Switch.css

@@ -19,14 +19,14 @@
   .PUgkqa_control {
     box-sizing: border-box;
     width: var(--switch-width, 3rem);
-    height: var(--switch-height, 1.5rem);
-    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, 1.25rem) -
-        (var(--switch-padding, .125rem) * 2) -
+    height: var(--switch-height, var(--size-xs));
+    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, var(--spacing-5)) -
+        (var(--switch-padding, var(--spacing-0-5)) * 2) -
         (var(--switch-border-width, var(--border-width-sm)) * 2));
     border: var(--switch-border-width, var(--border-width-sm)) solid
       var(--switch-border-color, var(--color-border));
     border-radius: var(--switch-radius, var(--radius-full));
-    padding: var(--switch-padding, .125rem);
+    padding: var(--switch-padding, var(--spacing-0-5));
     background-color: var(--switch-bg, var(--color-muted));
     user-select: none;
     transition: background-color var(--switch-transition, var(--transition-default)),
@@ -45,8 +45,8 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--switch-focus-ring-width, var(--border-width-sm)) solid
-        var(--switch-focus-ring-color, var(--color-ring));
+      outline: var(--switch-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--switch-focus-ring-color, var(--color-ring));
       outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -64,36 +64,36 @@
   .PUgkqa_root[data-size="xs"] .PUgkqa_control {
     --switch-width: var(--switch-width-xs, 1.75rem);
     --switch-height: var(--switch-height-xs, 1rem);
-    --switch-thumb-size: var(--switch-thumb-size-xs, .75rem);
+    --switch-thumb-size: var(--switch-thumb-size-xs, var(--spacing-3));
   }
 
   .PUgkqa_root[data-size="sm"] .PUgkqa_control {
     --switch-width: var(--switch-width-sm, 2.25rem);
     --switch-height: var(--switch-height-sm, 1.25rem);
-    --switch-thumb-size: var(--switch-thumb-size-sm, 1rem);
+    --switch-thumb-size: var(--switch-thumb-size-sm, var(--spacing-4));
   }
 
   .PUgkqa_root[data-size="md"] .PUgkqa_control {
     --switch-width: var(--switch-width-md, 2.75rem);
-    --switch-height: var(--switch-height-md, 1.5rem);
-    --switch-thumb-size: var(--switch-thumb-size-md, 1.25rem);
+    --switch-height: var(--switch-height-md, var(--size-xs));
+    --switch-thumb-size: var(--switch-thumb-size-md, var(--spacing-5));
   }
 
   .PUgkqa_root[data-size="lg"] .PUgkqa_control {
     --switch-width: var(--switch-width-lg, 3.25rem);
     --switch-height: var(--switch-height-lg, 1.75rem);
-    --switch-thumb-size: var(--switch-thumb-size-lg, 1.5rem);
+    --switch-thumb-size: var(--switch-thumb-size-lg, var(--size-xs));
   }
 
   .PUgkqa_root[data-size="xl"] .PUgkqa_control {
     --switch-width: var(--switch-width-xl, 3.75rem);
-    --switch-height: var(--switch-height-xl, 2rem);
-    --switch-thumb-size: var(--switch-thumb-size-xl, 1.75rem);
+    --switch-height: var(--switch-height-xl, var(--size-sm));
+    --switch-thumb-size: var(--switch-thumb-size-xl, var(--spacing-7));
   }
 
   .PUgkqa_thumb {
-    width: var(--switch-thumb-size, 1.25rem);
-    height: var(--switch-thumb-size, 1.25rem);
+    width: var(--switch-thumb-size, var(--spacing-5));
+    height: var(--switch-thumb-size, var(--spacing-5));
     border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
     border-radius: var(--switch-thumb-radius, var(--radius-full));
     background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));