revert: restore px-based calc 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_calc(var(--spacing)*0.5)_rgba(255,38,5,0.06)]':
+                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
                     isInValid,
                 }"
                 v-bind="createComponentProps(slotProps)"

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

@@ -548,8 +548,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       <div
         :class="[
           {
-            'shadow-[0_calc(var(--spacing)*4)_calc(var(--spacing)*6)_hsl(var(--background))]':
+            'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
-              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)-calc(var(--spacing)*5))]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
           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)-calc(var(--spacing)*0.25))] py-0 transition-opacity duration-150"
+              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] 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%-calc(var(--spacing)*1.5))] rounded-md ml-2 border border-border  transition-all',
+        'h-[calc(100%-6px)] rounded-md ml-2 border border-border  transition-all',
     },
     plain: {
       content: