refactor: replace px calc spacing utilities

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -347,7 +347,7 @@ onUnmounted(() => {
                 :is="FieldComponent"
                 ref="fieldComponentRef"
                 :class="{
-                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_calc(var(--spacing)*0.5)_rgba(255,38,5,0.06)]':
                     isInValid,
                 }"
                 v-bind="createComponentProps(slotProps)"

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -548,7 +548,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       <div
         :class="[
           {
-            'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+            'shadow-[0_calc(var(--spacing)*4)_calc(var(--spacing)*6)_hsl(var(--background))]':
+              scrollY > 20,
           },
           SCROLL_FIXED_CLASS,
         ]"

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -209,7 +209,7 @@ onBeforeUnmount(() => {
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
           'overflow-auto',
-          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-calc(var(--spacing)*5))]',
           mode === 'horizontal' ? 'is-horizontal' : '',
         ]"
         :content-props="contentProps"

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -113,7 +113,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
             ></div>
             <!-- background -->
             <div
-              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
+              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-calc(var(--spacing)*0.25))] py-0 transition-opacity duration-150"
             >
               <div
                 class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 group-[.is-active]:dark:bg-accent"

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -34,7 +34,7 @@ const typeWithClass = computed(() => {
     },
     card: {
       content:
-        'h-[calc(100%-6px)] rounded-md ml-2 border border-border  transition-all',
+        'h-[calc(100%-calc(var(--spacing)*1.5))] rounded-md ml-2 border border-border  transition-all',
     },
     plain: {
       content:

packages/effects/common-ui/src/components/cropper/cropper.vue

@@ -921,19 +921,19 @@ defineExpose({ getCropImage });
 }
 
 .cropper-line-e {
-  @apply top-0 right-[-3px] h-full w-1;
+  @apply top-0 -right-0.75 h-full w-1;
 }
 
 .cropper-line-n {
-  @apply top-[-3px] left-0 h-1 w-full;
+  @apply -top-0.75 left-0 h-1 w-full;
 }
 
 .cropper-line-w {
-  @apply top-0 left-[-3px] h-full w-1;
+  @apply top-0 -left-0.75 h-full w-1;
 }
 
 .cropper-line-s {
-  @apply bottom-[-3px] left-0 h-1 w-full;
+  @apply -bottom-0.75 left-0 h-1 w-full;
 }
 
 /* 拖拽点 */
@@ -947,35 +947,35 @@ defineExpose({ getCropImage });
 
 /* 边角拖拽点位置和光标 */
 .cropper-point-ne {
-  @apply top-[-5px] right-[-5px] cursor-ne-resize;
+  @apply -top-1.25 -right-1.25 cursor-ne-resize;
 }
 
 .cropper-point-nw {
-  @apply top-[-5px] left-[-5px] cursor-nw-resize;
+  @apply -top-1.25 -left-1.25 cursor-nw-resize;
 }
 
 .cropper-point-sw {
-  @apply bottom-[-5px] left-[-5px] cursor-sw-resize;
+  @apply -bottom-1.25 -left-1.25 cursor-sw-resize;
 }
 
 .cropper-point-se {
-  @apply right-[-5px] bottom-[-5px] cursor-se-resize;
+  @apply -right-1.25 -bottom-1.25 cursor-se-resize;
 }
 
 /* 边中点拖拽点位置和光标 */
 .cropper-point-e {
-  @apply top-1/2 right-[-5px] -mt-1 cursor-e-resize;
+  @apply top-1/2 -right-1.25 -mt-1 cursor-e-resize;
 }
 
 .cropper-point-n {
-  @apply top-[-5px] left-1/2 -ml-1 cursor-n-resize;
+  @apply -top-1.25 left-1/2 -ml-1 cursor-n-resize;
 }
 
 .cropper-point-w {
-  @apply top-1/2 left-[-5px] -mt-1 cursor-w-resize;
+  @apply top-1/2 -left-1.25 -mt-1 cursor-w-resize;
 }
 
 .cropper-point-s {
-  @apply bottom-[-5px] left-1/2 -ml-1 cursor-s-resize;
+  @apply -bottom-1.25 left-1/2 -ml-1 cursor-s-resize;
 }
 </style>