@moduix/react 2.0.0 → 2.1.0

package/dist/components/tabs/Tabs.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .ostTjG_root {
     box-sizing: border-box;
-    gap: var(--tabs-gap, .75rem);
+    gap: var(--tabs-gap, var(--spacing-3));
     min-width: 0;
     color: var(--tabs-color, var(--color-foreground));
     flex-direction: column;
@@ -17,11 +17,11 @@
     box-sizing: border-box;
     z-index: 0;
     align-items: stretch;
-    gap: var(--tabs-list-gap, .25rem);
+    gap: var(--tabs-list-gap, var(--spacing-1));
     width: fit-content;
     max-width: 100%;
-    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, .25rem))
-      var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem));
+    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, var(--spacing-1)))
+      var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1)));
     border: var(--tabs-list-border-width, var(--border-width-sm)) solid
       var(--tabs-list-border-color, var(--color-border));
     border-radius: var(--tabs-radius, var(--radius-lg));
@@ -54,11 +54,11 @@
     z-index: 1;
     justify-content: center;
     align-items: center;
-    gap: var(--tabs-tab-content-gap, .5rem);
-    height: var(--tabs-tab-height, 2rem);
+    gap: var(--tabs-tab-content-gap, var(--spacing-2));
+    height: var(--tabs-tab-height, var(--size-sm));
     appearance: none;
     border-radius: var(--tabs-tab-radius, var(--radius-md));
-    padding-inline: var(--tabs-tab-padding-x, .625rem);
+    padding-inline: var(--tabs-tab-padding-x, var(--spacing-2-5));
     color: var(--tabs-tab-color, var(--color-muted-foreground));
     font: inherit;
     font-size: var(--tabs-tab-font-size, var(--text-sm));
@@ -91,8 +91,8 @@
       &:before {
         content: "";
         border-radius: inherit;
-        outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
-          var(--tabs-focus-ring-color, var(--color-ring));
+        outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+          solid var(--tabs-focus-ring-color, var(--color-ring));
         outline-offset: var(--tabs-focus-ring-offset, 0);
         position: absolute;
         inset: 0;
@@ -106,8 +106,8 @@
     }
 
     & > svg {
-      width: var(--tabs-tab-icon-size, 1rem);
-      height: var(--tabs-tab-icon-size, 1rem);
+      width: var(--tabs-tab-icon-size, var(--spacing-4));
+      height: var(--tabs-tab-icon-size, var(--spacing-4));
       color: var(--tabs-tab-icon-color, currentColor);
       flex-shrink: 0;
     }
@@ -118,7 +118,7 @@
     top: 50%;
     left: var(--left, 0);
     width: var(--width, 0);
-    height: var(--tabs-indicator-size, 2rem);
+    height: var(--tabs-indicator-size, var(--spacing-8));
     border-radius: var(--tabs-indicator-radius, var(--radius-md));
     background-color: var(--tabs-indicator-bg, var(--color-background));
     box-shadow: var(--tabs-indicator-shadow, var(--shadow-sm));
@@ -130,7 +130,7 @@
     translate: 0 -50%;
 
     .ostTjG_root[data-variant="line"] & {
-      height: var(--tabs-line-indicator-size, 2px);
+      height: var(--tabs-line-indicator-size, var(--spacing-0-5));
       border-radius: var(--tabs-line-indicator-radius, var(--radius-full));
       background-color: var(--tabs-line-indicator-bg, var(--tabs-tab-color-active, var(--color-foreground)));
       box-shadow: none;
@@ -145,13 +145,13 @@
 
     &[data-orientation="vertical"] {
       top: var(--top, 0);
-      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem)) * 2));
+      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1))) * 2));
       height: var(--height, 0);
       left: 50%;
       translate: -50%;
 
       .ostTjG_root[data-variant="line"] & {
-        width: var(--tabs-line-indicator-size, 2px);
+        width: var(--tabs-line-indicator-size, var(--spacing-0-5));
         bottom: auto;
         left: 0;
         translate: none;
@@ -166,7 +166,7 @@
     border-radius: var(--tabs-radius, var(--radius-lg));
     background-color: var(--tabs-bg, var(--color-background));
     min-width: 0;
-    padding: var(--tabs-panel-padding, 1rem);
+    padding: var(--tabs-panel-padding, var(--spacing-4));
     color: var(--tabs-panel-color, var(--tabs-color, var(--color-foreground)));
     font-size: var(--tabs-panel-font-size, var(--text-sm));
     line-height: var(--tabs-panel-line-height, var(--line-height-text-sm));
@@ -175,9 +175,9 @@
     margin: 0;
 
     &:focus-visible {
-      outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
-        var(--tabs-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tabs-panel-focus-ring-offset, -1px);
+      outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tabs-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tabs-panel-focus-ring-offset, var(--focus-ring-inset-offset));
       border-radius: inherit;
     }
 

package/dist/components/tag/Tag.css

@@ -2,7 +2,7 @@
   .mVOnGG_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--tag-gap, .375rem);
+    gap: var(--tag-gap, var(--spacing-1-5));
     border: var(--tag-border-width, var(--border-width-sm)) solid
       var(--tag-border-color, transparent);
     border-radius: var(--tag-radius, var(--radius-full));
@@ -14,9 +14,9 @@
     font-size: var(--tag-font-size, var(--text-xs));
     font-weight: var(--tag-font-weight, var(--weight-medium));
     line-height: var(--tag-line-height, var(--line-height-text-xs));
-    min-height: var(--tag-height-md, 1.5rem);
-    padding-block: var(--tag-padding-y-md, .125rem);
-    padding-inline: var(--tag-padding-x-md, .5rem);
+    min-height: var(--tag-height-md, var(--size-xs));
+    padding-block: var(--tag-padding-y-md, var(--spacing-0-5));
+    padding-inline: var(--tag-padding-x-md, var(--spacing-2));
     white-space: nowrap;
     vertical-align: middle;
     transition: color var(--tag-transition, var(--transition-default)),
@@ -25,17 +25,17 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--tag-icon-size, var(--spacing-3));
+      height: var(--tag-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
 
     &[data-size="sm"] {
-      gap: var(--tag-gap-sm, .25rem);
+      gap: var(--tag-gap-sm, var(--spacing-1));
       min-height: var(--tag-height-sm, 1.25rem);
       padding-block: var(--tag-padding-y-sm, 0);
-      padding-inline: var(--tag-padding-x-sm, .375rem);
+      padding-inline: var(--tag-padding-x-sm, var(--spacing-1-5));
     }
 
     &[data-variant="secondary"] {
@@ -56,7 +56,7 @@
     &[data-variant="destructive"] {
       background-color: var(--tag-bg, var(--color-destructive));
       border-color: var(--tag-border-color, transparent);
-      color: var(--tag-color, var(--color-primary-foreground));
+      color: var(--tag-color, var(--color-destructive-foreground));
     }
   }
 
@@ -74,23 +74,23 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--tag-icon-size, var(--spacing-3));
+      height: var(--tag-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
   }
 
   .mVOnGG_closeTrigger {
-    --close-button-size: var(--tag-close-trigger-size, 1rem);
+    --close-button-size: var(--tag-close-trigger-size, var(--spacing-4));
     --close-button-radius: var(--tag-close-trigger-radius, var(--radius-full));
-    --close-button-icon-size: var(--tag-close-trigger-icon-size, .625rem);
+    --close-button-icon-size: var(--tag-close-trigger-icon-size, var(--spacing-2-5));
     --close-button-bg: var(--tag-close-trigger-bg, transparent);
     --close-button-bg-hover: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
     --close-button-color: inherit;
     --close-button-color-hover: inherit;
     --close-button-disabled-opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
-    --close-button-focus-ring-width: var(--tag-close-trigger-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-width: var(--tag-close-trigger-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)));
     --close-button-focus-ring-color: var(--tag-close-trigger-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-offset: var(--tag-close-trigger-focus-ring-offset, 0);
     --close-button-transition: var(--tag-transition, var(--transition-default));

package/dist/components/tags-input/TagsInput.css

@@ -29,7 +29,7 @@
 
   ._0zrPYG_control {
     box-sizing: border-box;
-    min-height: var(--tags-input-min-height, var(--input-height, var(--size-lg)));
+    min-height: var(--tags-input-min-height, var(--input-height, var(--size-md)));
     align-items: center;
     gap: var(--tags-input-control-gap, var(--spacing-1));
     border: var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm)))
@@ -37,10 +37,10 @@
       var(--tags-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--tags-input-radius, var(--input-radius, var(--radius-md)));
     width: 100%;
-    padding: var(--tags-input-padding-y, .3125rem) var(--tags-input-padding-x, .5rem);
+    padding: var(--tags-input-padding-y, .3125rem) var(--tags-input-padding-x, var(--spacing-2));
     background-color: var(--tags-input-bg, var(--input-bg, var(--color-background)));
     color: var(--tags-input-color, var(--input-color, var(--color-foreground)));
-    outline: var(--tags-input-focus-ring-width, var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))))
+    outline: var(--tags-input-focus-ring-width, var(--input-focus-ring-width, var(--tags-input-border-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))))
       solid transparent;
     outline-offset: var(--tags-input-focus-ring-offset, var(--input-focus-ring-offset, calc(0px - var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm))))));
     transition: border-color var(--tags-input-transition, var(--input-transition, var(--transition-default))),
@@ -83,12 +83,12 @@
     gap: var(--tags-input-item-gap, var(--spacing-1));
     min-width: 0;
     max-width: 100%;
-    min-height: var(--tags-input-item-height, 1.5rem);
+    min-height: var(--tags-input-item-height, var(--size-xs));
     border: var(--tags-input-item-border-width, var(--border-width-sm)) solid
       var(--tags-input-item-border-color, transparent);
     border-radius: var(--tags-input-item-radius, var(--radius-full));
-    padding-block: var(--tags-input-item-padding-y, .125rem);
-    padding-inline: var(--tags-input-item-padding-x, .5rem);
+    padding-block: var(--tags-input-item-padding-y, var(--spacing-0-5));
+    padding-inline: var(--tags-input-item-padding-x, var(--spacing-2));
     background-color: var(--tags-input-item-bg, var(--color-secondary));
     color: var(--tags-input-item-color, var(--color-secondary-foreground));
     font-size: var(--tags-input-item-font-size, var(--text-xs));
@@ -121,8 +121,8 @@
     box-sizing: border-box;
     flex: 1 1 var(--tags-input-input-min-width, 7rem);
     min-width: var(--tags-input-input-min-width, 7rem);
-    height: var(--tags-input-input-height, 1.5rem);
-    padding: 0 var(--tags-input-input-padding-x, .25rem);
+    height: var(--tags-input-input-height, var(--size-xs));
+    padding: 0 var(--tags-input-input-padding-x, var(--spacing-1));
     color: inherit;
     font: inherit;
     font-size: var(--tags-input-input-font-size, var(--input-font-size, var(--text-sm)));
@@ -146,8 +146,8 @@
   }
 
   ._0zrPYG_itemDeleteTrigger {
-    width: var(--tags-input-trigger-size, 1rem);
-    height: var(--tags-input-trigger-size, 1rem);
+    width: var(--tags-input-trigger-size, var(--spacing-4));
+    height: var(--tags-input-trigger-size, var(--spacing-4));
     border-radius: var(--tags-input-trigger-radius, var(--radius-full));
     background-color: var(--tags-input-trigger-bg, transparent);
     color: var(--tags-input-trigger-color, currentColor);
@@ -165,8 +165,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tags-input-trigger-icon-size, .625rem);
-      height: var(--tags-input-trigger-icon-size, .625rem);
+      width: var(--tags-input-trigger-icon-size, var(--spacing-2-5));
+      height: var(--tags-input-trigger-icon-size, var(--spacing-2-5));
       pointer-events: none;
       flex: none;
     }
@@ -176,7 +176,8 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--tags-input-trigger-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--tags-input-trigger-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--tags-input-trigger-focus-ring-color, var(--color-ring));
     }
 
@@ -188,8 +189,8 @@
   }
 
   ._0zrPYG_clearTrigger {
-    --close-button-size: var(--tags-input-clear-trigger-size, 1.5rem);
-    --close-button-icon-size: var(--tags-input-clear-trigger-icon-size, .75rem);
+    --close-button-size: var(--tags-input-clear-trigger-size, var(--size-xs));
+    --close-button-icon-size: var(--tags-input-clear-trigger-icon-size, var(--spacing-3));
     --close-button-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
     --close-button-bg: var(--tags-input-clear-trigger-bg, transparent);
     --close-button-bg-hover: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
@@ -197,7 +198,7 @@
     --close-button-color-hover: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
     --close-button-focus-ring-color: var(--tags-input-trigger-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-width: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm));
-    --close-button-focus-ring-offset: var(--tags-input-trigger-focus-ring-offset, 2px);
+    --close-button-focus-ring-offset: var(--tags-input-trigger-focus-ring-offset, var(--focus-ring-offset));
     --close-button-transition: var(--tags-input-transition, var(--transition-default));
     --close-button-disabled-opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
     flex: none;

package/dist/components/textarea/Textarea.css

@@ -7,15 +7,16 @@
     border: var(--textarea-border-width, var(--border-width-sm)) var(--textarea-border-style, solid)
       var(--textarea-border-color, var(--color-border));
     border-radius: var(--textarea-radius, var(--radius-md));
-    padding: var(--textarea-padding-y, .5rem) var(--textarea-padding-x, .875rem);
+    padding: var(--textarea-padding-y, var(--spacing-2))
+      var(--textarea-padding-x, var(--spacing-3-5));
     background-color: var(--textarea-bg, var(--color-background));
     color: var(--textarea-color, var(--color-foreground));
     font: inherit;
     font-size: var(--textarea-font-size, var(--text-md));
     line-height: var(--textarea-line-height, var(--line-height-text-md));
-    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--border-width-sm)))
+    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--textarea-focus-ring-offset, -1px);
+    outline-offset: var(--textarea-focus-ring-offset, var(--focus-ring-inset-offset));
     resize: var(--textarea-resize, vertical);
     transition: border-color var(--textarea-transition, var(--transition-default)),
       outline-color var(--textarea-transition, var(--transition-default)),

package/dist/components/timer/Timer.css

@@ -45,8 +45,8 @@
     border: var(--timer-action-trigger-border-width, var(--border-width-sm)) solid
       var(--timer-action-trigger-border-color, var(--color-border));
     border-radius: var(--timer-action-trigger-radius, var(--radius-md));
-    padding-block: var(--timer-action-trigger-padding-y, .375rem);
-    padding-inline: var(--timer-action-trigger-padding-x, .75rem);
+    padding-block: var(--timer-action-trigger-padding-y, var(--spacing-1-5));
+    padding-inline: var(--timer-action-trigger-padding-x, var(--spacing-3));
     background-color: var(--timer-action-trigger-bg, var(--color-background));
     color: var(--timer-action-trigger-color, var(--color-foreground));
     appearance: none;
@@ -71,9 +71,9 @@
     }
 
     &:focus-visible {
-      outline: var(--timer-action-trigger-focus-ring-width, var(--border-width-md)) solid
-        var(--timer-action-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--timer-action-trigger-focus-ring-offset, -1px);
+      outline: var(--timer-action-trigger-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--timer-action-trigger-focus-ring-color, var(--color-ring));
+      outline-offset: var(--timer-action-trigger-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &:is(:disabled, [aria-disabled="true"]) {
@@ -87,8 +87,8 @@
     }
 
     & :where(svg) {
-      width: var(--timer-action-trigger-icon-size, 1rem);
-      height: var(--timer-action-trigger-icon-size, 1rem);
+      width: var(--timer-action-trigger-icon-size, var(--spacing-4));
+      height: var(--timer-action-trigger-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }

package/dist/components/toast/Toast.css

@@ -11,17 +11,17 @@
     --toast-trigger-focus-ring-color-default: var(--color-ring);
     box-sizing: border-box;
     width: var(--toast-width, 20rem);
-    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
+    max-width: calc(100vw - (var(--toast-viewport-inset, var(--spacing-4)) * 2));
     min-height: var(--toast-min-height, 0);
     align-items: start;
-    gap: var(--toast-content-gap, .25rem);
+    gap: var(--toast-content-gap, var(--spacing-1));
     border: var(--toast-border-width, var(--border-width-sm)) solid
       var(--toast-border-color, var(--toast-border-color-default, var(--color-border)));
     border-radius: var(--toast-radius, var(--radius-lg));
     background-color: var(--toast-bg, var(--toast-bg-default, var(--color-popover)));
     color: var(--toast-color, var(--toast-color-default, var(--color-popover-foreground)));
     box-shadow: var(--toast-shadow, var(--shadow-lg));
-    padding: var(--toast-padding, 1rem);
+    padding: var(--toast-padding, var(--spacing-4));
     pointer-events: auto;
     user-select: none;
     translate: var(--x) var(--y);
@@ -36,7 +36,7 @@
       height var(--toast-transition, var(--duration-slow)),
       box-shadow var(--transition-fast);
     background-clip: padding-box;
-    padding-inline-end: calc(var(--toast-padding, 1rem) + var(--toast-close-size, 28px));
+    padding-inline-end: calc(var(--toast-padding, var(--spacing-4)) + var(--toast-close-size, var(--spacing-7)));
     transition-timing-function: cubic-bezier(.21, 1.02, .73, 1);
     display: grid;
 
@@ -71,7 +71,7 @@
 
   .o69bxG_title {
     align-items: center;
-    gap: var(--toast-title-gap, .5rem);
+    gap: var(--toast-title-gap, var(--spacing-2));
     color: inherit;
     font-size: var(--toast-title-font-size, var(--text-sm));
     font-weight: var(--toast-title-font-weight, var(--weight-semibold));
@@ -93,13 +93,14 @@
     gap: var(--toast-action-gap, var(--spacing-2));
     width: max-content;
     min-height: var(--toast-action-min-height, var(--size-xs));
-    margin-top: var(--toast-action-margin-top, .5rem);
+    margin-top: var(--toast-action-margin-top, var(--spacing-2));
     border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
       solid var(--toast-action-border-color, var(--toast-trigger-border-color-default));
     border-radius: var(--toast-action-radius, var(--radius-sm));
     background: var(--toast-action-bg, var(--toast-trigger-bg-default));
     color: var(--toast-action-color, var(--toast-trigger-color-default));
-    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    padding: var(--toast-action-padding-y, var(--spacing-1))
+      var(--toast-action-padding-x, var(--spacing-2));
     font: inherit;
     font-size: var(--toast-action-font-size, var(--text-xs));
     font-weight: var(--toast-action-font-weight, var(--weight-medium));
@@ -117,27 +118,27 @@
     }
 
     &:focus-visible {
-      outline: var(--toast-focus-ring-width, var(--border-width-sm)) solid
-        var(--toast-focus-ring-color, var(--toast-trigger-focus-ring-color-default));
+      outline: var(--toast-focus-ring-width, var(--toast-action-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
+        solid var(--toast-focus-ring-color, var(--toast-trigger-focus-ring-color-default));
       outline-offset: var(--toast-focus-ring-offset, 0);
     }
   }
 
   .o69bxG_closeTrigger {
-    --close-button-size: var(--toast-close-size, 28px);
-    --close-button-icon-size: var(--toast-close-icon-size, 12px);
+    --close-button-size: var(--toast-close-size, var(--spacing-7));
+    --close-button-icon-size: var(--toast-close-icon-size, var(--spacing-3));
     --close-button-radius: var(--toast-close-radius, var(--radius-sm));
     --close-button-bg: var(--toast-close-bg, transparent);
     --close-button-bg-hover: var(--toast-close-bg-hover, var(--color-muted));
     --close-button-color: var(--toast-close-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--toast-close-color-hover, var(--color-foreground));
     --close-button-focus-ring-color: var(--toast-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: var(--toast-close-focus-ring-offset, 2px);
-    --close-button-focus-ring-width: var(--toast-close-focus-ring-width, var(--border-width-md));
+    --close-button-focus-ring-offset: var(--toast-close-focus-ring-offset, var(--focus-ring-offset));
+    --close-button-focus-ring-width: var(--toast-close-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
     --close-button-transition: var(--toast-close-transition, var(--transition-default));
     position: absolute;
-    inset-block-start: var(--toast-close-offset-top, .5rem);
-    inset-inline-end: var(--toast-close-offset-right, .5rem);
+    inset-block-start: var(--toast-close-offset-top, var(--spacing-2));
+    inset-inline-end: var(--toast-close-offset-right, var(--spacing-2));
   }
 
   @media (width <= 40rem) {

package/dist/components/toggle/Toggle.css

@@ -4,12 +4,12 @@
     justify-content: center;
     align-items: center;
     gap: var(--toggle-content-gap, var(--spacing-2));
-    min-height: var(--toggle-size-md, var(--size-lg));
+    min-height: var(--toggle-size-md, var(--size-md));
     border-style: solid;
     border-width: var(--toggle-border-width, var(--border-width-sm));
     border-radius: var(--toggle-radius, var(--radius-md));
-    padding-block: var(--toggle-padding-y-md, .5rem);
-    padding-inline: var(--toggle-padding-x-md, 1rem);
+    padding-block: var(--toggle-padding-y-md, var(--spacing-1));
+    padding-inline: var(--toggle-padding-x-md, var(--spacing-4));
     color: var(--toggle-color, var(--color-foreground));
     appearance: none;
     font: inherit;
@@ -29,9 +29,9 @@
     display: inline-flex;
 
     &:focus-visible {
-      outline: var(--toggle-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--toggle-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
         var(--toggle-focus-ring-color, var(--color-ring));
-      outline-offset: var(--toggle-focus-ring-offset, -1px);
+      outline-offset: var(--toggle-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &[data-disabled] {
@@ -41,8 +41,8 @@
     }
 
     & :where(svg) {
-      width: var(--toggle-icon-size, 1rem);
-      height: var(--toggle-icon-size, 1rem);
+      width: var(--toggle-icon-size, var(--spacing-4));
+      height: var(--toggle-icon-size, var(--spacing-4));
       flex-shrink: 0;
       display: block;
     }
@@ -114,22 +114,22 @@
 
     &[data-size="xs"] {
       min-height: var(--toggle-size-xs, var(--size-xs));
-      padding-block: var(--toggle-padding-y-xs, .25rem);
-      padding-inline: var(--toggle-padding-x-xs, .625rem);
+      padding-block: var(--toggle-padding-y-xs, var(--spacing-0-5));
+      padding-inline: var(--toggle-padding-x-xs, var(--spacing-2-5));
       font-size: var(--toggle-font-size-xs, var(--text-xs));
       line-height: var(--toggle-line-height-xs, var(--line-height-text-xs));
     }
 
     &[data-size="sm"] {
       min-height: var(--toggle-size-sm, var(--size-sm));
-      padding-block: var(--toggle-padding-y-sm, .375rem);
-      padding-inline: var(--toggle-padding-x-sm, .75rem);
+      padding-block: var(--toggle-padding-y-sm, var(--spacing-1));
+      padding-inline: var(--toggle-padding-x-sm, var(--spacing-3));
     }
 
     &[data-size="lg"] {
-      min-height: var(--toggle-size-lg, var(--size-xl));
-      padding-block: var(--toggle-padding-y-lg, .625rem);
-      padding-inline: var(--toggle-padding-x-lg, 1.25rem);
+      min-height: var(--toggle-size-lg, var(--size-lg));
+      padding-block: var(--toggle-padding-y-lg, var(--spacing-1-5));
+      padding-inline: var(--toggle-padding-x-lg, var(--spacing-5));
       font-size: var(--toggle-font-size-lg, var(--text-md));
       line-height: var(--toggle-line-height-lg, var(--line-height-text-md));
     }
@@ -146,15 +146,15 @@
     }
 
     &[data-size="icon-md"] {
-      width: var(--toggle-size-icon-md, var(--size-lg));
-      min-width: var(--toggle-size-icon-md, var(--size-lg));
-      height: var(--toggle-size-icon-md, var(--size-lg));
+      width: var(--toggle-size-icon-md, var(--size-md));
+      min-width: var(--toggle-size-icon-md, var(--size-md));
+      height: var(--toggle-size-icon-md, var(--size-md));
     }
 
     &[data-size="icon-lg"] {
-      width: var(--toggle-size-icon-lg, var(--size-xl));
-      min-width: var(--toggle-size-icon-lg, var(--size-xl));
-      height: var(--toggle-size-icon-lg, var(--size-xl));
+      width: var(--toggle-size-icon-lg, var(--size-lg));
+      min-width: var(--toggle-size-icon-lg, var(--size-lg));
+      height: var(--toggle-size-icon-lg, var(--size-lg));
     }
   }
 

package/dist/components/tooltip/Tooltip.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._7levaW_trigger {
     box-sizing: border-box;
-    min-height: var(--tooltip-trigger-height, var(--size-lg));
-    padding: var(--tooltip-trigger-padding-y, .5rem) var(--tooltip-trigger-padding-x, .875rem);
+    min-height: var(--tooltip-trigger-height, var(--size-md));
+    padding: var(--tooltip-trigger-padding-y, var(--spacing-1))
+      var(--tooltip-trigger-padding-x, var(--spacing-3-5));
     border: var(--tooltip-trigger-border-width, var(--border-width-sm)) solid
       var(--tooltip-trigger-border-color, var(--color-border));
     border-radius: var(--tooltip-trigger-radius, var(--radius-md));
@@ -33,9 +34,9 @@
     }
 
     &:focus-visible {
-      outline: var(--tooltip-focus-ring-width, var(--border-width-sm)) solid
-        var(--tooltip-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tooltip-focus-ring-offset, -1px);
+      outline: var(--tooltip-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tooltip-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tooltip-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &[data-disabled], &[disabled] {
@@ -52,12 +53,12 @@
 
   ._7levaW_content {
     --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-size: var(--tooltip-arrow-size, var(--spacing-2-5));
     box-sizing: border-box;
     z-index: var(--tooltip-z-index, var(--z-popup));
     max-width: min(var(--tooltip-max-width, 20rem), var(--available-width));
     max-height: min(var(--tooltip-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--tooltip-padding-y, .25rem) var(--tooltip-padding-x, .5rem);
+    padding: var(--tooltip-padding-y, var(--spacing-1)) var(--tooltip-padding-x, var(--spacing-2));
     border: var(--tooltip-border-width, var(--border-width-sm)) solid
       var(--tooltip-border-color, var(--color-border));
     border-radius: var(--tooltip-radius, var(--radius-md));
@@ -89,7 +90,7 @@
 
   ._7levaW_arrow {
     --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-size: var(--tooltip-arrow-size, var(--spacing-2-5));
   }
 
   ._7levaW_arrowTip {