vdesign-ui 0.2.0 → 0.2.2

package/dist/components/button/style.less

@@ -2,17 +2,16 @@
 
 .@{prefix} {
   // 抽离 css valuable 适应 1px 边框，如：wireframe
-  --btn-border-radius: calc(var(--radius-button-m) * 1px);
+  --btn-border-radius: var(--radius-button-m);
   --btn-border-color: transparent;
-  --btn-line-height: calc(var(--height-button-m) * 1px);
-  // start-btn-css-vars
-  height: calc(var(--height-button-m) * 1px);
-  padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
-  padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
   border-radius: var(--btn-border-radius);
   border: 0 solid var(--btn-border-color);
-  // font-family: var(--en-single-f-c-s-fontFamily);
-  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  /* font-family: var(--en-single-f-c-s-fontFamily); */
+  font-size: var(--en-single-f-c-s-fontSize);  
   font-weight: var(--en-single-f-c-s-fontWeight);
   line-height: var(--btn-line-height);
   background-color: var(--color-button-primary-bg-default);
@@ -45,7 +44,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
+    gap: var(--spacing-button-m_icon-margin_y);
     // gap: 4px;
     // --spacing-button-l_icon-margin_y
     // --spacing-button-m_icon-margin_y
@@ -99,12 +98,12 @@
     border-color: transparent;
     background-color: transparent;
     color: var(--color-button-border-text-default);
-    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    font-size: var(--en-single-f-b-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
     line-height: 1;
     padding: 0;
-    min-width: calc(var(--height-button-m) * 1px);
-    height: calc(var(--height-button-m) * 1px);
+    min-width: var(--height-button-m);
+    height: var(--height-button-m);
 
     &:active {
       border-color: transparent;
@@ -120,45 +119,45 @@
 
     .@{prefix}-inner {
       flex-direction: column;
-      gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+      gap: var(--spacing-button-icon_m_text-margin_top);
     }
 
     &.@{prefix}-small {
-      font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      font-size: var(--en-single-f-a-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
       padding: 0;
-      min-width: calc(var(--height-button-s) * 1px);
-      height: calc(var(--height-button-s) * 1px);
+      min-width: var(--height-button-s);
+      height: var(--height-button-s);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_s_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_s_text-margin_top);
       }
     }
 
     &.@{prefix}-medium {
-      font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+      font-size: var(--en-single-f-b-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
       padding: 0;
-      min-width: calc(var(--height-button-m) * 1px);
-      height: calc(var(--height-button-m) * 1px);
+      min-width: var(--height-button-m);
+      height: var(--height-button-m);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_m_text-margin_top);
       }
     }
 
     &.@{prefix}-large {
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
       padding: 0;
-      min-width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
+      min-width: var(--height-button-l);
+      height: var(--height-button-l);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_l_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_l_text-margin_top);
       }
     }
-  }
+}
 
   &-primary {
     background-color: var(--color-button-primary-bg-default);
@@ -347,24 +346,24 @@
     }
 
     .@{prefix}-inner {
-      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
     }
 
     .@{prefix}-small {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5);
       }
     }
 
     .@{prefix}-medium {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
       }
     }
 
     .@{prefix}-large {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5);
       }
     }
   }
@@ -378,47 +377,45 @@
   // Button Sizes
   //
   &-small {
-    --btn-border-radius: calc(var(--radius-button-s) * 1px);
-    --btn-line-height: calc(var(--height-button-s) * 1px);
-    height: calc(var(--height-button-s) * 1px);
-    padding-inline-start: calc(var(--spacing-button-s-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-s-padding_right) * 1px);
-    // font-family: var(--en-single-f-c-r-fontFamily);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-s_icon-margin_y) * 1px);
-    }
+  --btn-border-radius: var(--radius-button-s);
+  --btn-line-height: var(--height-button-s);
+  height: var(--height-button-s);
+  padding-inline-start: var(--spacing-button-s-padding_left);
+  padding-inline-end: var(--spacing-button-s-padding_right);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  .@{prefix}-inner {
+      gap: var(--spacing-button-s_icon-margin_y);
   }
+}
 
-  &-medium {
-    --btn-border-radius: calc(var(--radius-button-m) * 1px);
-    --btn-line-height: calc(var(--height-button-m) * 1px);
-    height: calc(var(--height-button-m) * 1px);
-    padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
-    // font-family: var(--en-single-f-c-s-fontFamily);
-    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+&-medium {
+  --btn-border-radius: var(--radius-button-m);
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
+  font-size: var(--en-single-f-c-s-fontSize);
 
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
-    }
+  .@{prefix}-inner {
+      gap: var(--spacing-button-m_icon-margin_y);
   }
+}
 
-  &-large {
-    --btn-border-radius: calc(var(--radius-button-l) * 1px);
-    --btn-line-height: calc(var(--height-button-l) * 1px);
-    height: calc(var(--height-button-l) * 1px);
-    padding-inline-start: calc(var(--spacing-button-l-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-l-padding_right) * 1px);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+&-large {
+  --btn-border-radius: var(--radius-button-l);
+  --btn-line-height: var(--height-button-l);
+  height: var(--height-button-l);
+  padding-inline-start: var(--spacing-button-l-padding_left);
+  padding-inline-end: var(--spacing-button-l-padding_right);
+  font-size: var(--en-single-f-d-s-fontSize);
 
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-l_icon-margin_y) * 1px);
-    }
+  .@{prefix}-inner {
+      gap: var(--spacing-button-l_icon-margin_y);
   }
+}
+
 
   //
   // Button Business
@@ -427,21 +424,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(var(--height-button-l) * 3px);
-    height: calc(var(--height-button-l) * 1px);
+    width: calc(var(--height-button-l) * 3);
+    height:var(--height-button-l);
     background-color: var(--color-button-sell-bg-default);
-    border-radius: calc(var(--radius-button-m) * 1px);
+    border-radius: var(--radius-button-m);
     color: var(--color-button-sell-text-default);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
 
     &::after {
       content: '';
       position: absolute;
       inset-inline-end: -9px;
-      width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
-      border-radius: calc(var(--radius-button-m) * 1px);
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
       background-color: var(--color-button-sell-bg-default);
       transform: skewX(-21deg);
       z-index: 0;
@@ -470,21 +466,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(var(--height-button-l) * 3px);
-    height: calc(var(--height-button-l) * 1px);
+    width: calc(var(--height-button-l) * 3);
+    height: var(--height-button-l);
     background-color: var(--color-button-buy-bg-default);
-    border-radius: calc(var(--radius-button-m) * 1px);
+    border-radius: var(--radius-button-m);
     color: var(--color-button-buy-text-default);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
 
     &::after {
       content: '';
       position: absolute;
       inset-inline-start: -9px;
-      width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
-      border-radius: calc(var(--radius-button-m) * 1px);
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
       background-color: var(--color-button-buy-bg-default);
       transform: skewX(-21deg);
       z-index: 0;
@@ -533,21 +528,21 @@
   &-round {
     --btn-border-radius: 999em;
     padding-inline: 0;
-    width: calc(var(--height-button-m) * 1px);
+    width: var(--height-button-m);
 
     &.@{prefix}-small {
-      width: calc(var(--height-button-s) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-s);
+        padding-inline: 0;
     }
 
     &.@{prefix}-medium {
-      width: calc(var(--height-button-m) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-m);
+        padding-inline: 0;
     }
 
     &.@{prefix}-large {
-      width: calc(var(--height-button-l) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-l);
+        padding-inline: 0;
     }
   }
 }

package/dist/components/calendar/index.vue

@@ -42,7 +42,7 @@ export default {
   inheritAttrs: false, // 确保 $attrs 不绑定到根元素
 
   mounted() {
-    console.log(Locale);
+    // console.log(Locale);
   }
 };
 </script>

package/dist/components/calendar/style.less

@@ -3,41 +3,38 @@
 }
 
 .van-calendar__header-subtitle {
-    height: calc(var(--height-datepicker-title-month_year) * 1px);
-    line-height: calc(var(--height-datepicker-title-month_year) * 1px);
+    height: var(--height-datepicker-title-month_year);
+    line-height: var(--height-datepicker-title-month_year);
     color: var(--color-datepicker-title-month_year);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
     font-weight: var(--en-single-f-d-s-fontWeight);
 }
 
 .van-calendar__weekdays {
     padding: 0 20px;
-    height: calc(var(--height-datepicker-week) * 1px);
+    height: var(--height-datepicker-week);
     color: var(--color-datepicker-text-week);
 }
 
 .van-calendar__weekday {
-    line-height: calc(var(--height-datepicker-week) * 1px);
-    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    line-height: var(--height-datepicker-week);
+    font-size: var(--en-single-f-b-r-fontSize);
     font-weight: var(--en-single-f-b-r-fontWeight);
 }
 
 .van-calendar__days {
     display: flex;
-    // grid-template-columns: repeat(7,1fr);
-    // grid-column-gap: calc(var(--spacing-datepicker-date-margin_y) * 1px);
     padding: 0 20px;
 }
 
 .van-calendar__day {
-    // width: calc(var(--height-datepicker-date) * 1px);
-    height: calc(var(--height-datepicker-date) * 1px);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    height: var(--height-datepicker-date);
+    font-size: var(--en-single-f-d-s-fontSize);
     font-weight: var(--en-single-f-d-s-fontWeight);
     color: var(--color-datepicker-date-text-default);
     background-color: var(--color-datepicker-date-bg-default);
-    margin-block-start: calc(var(--spacing-datepicker-date-margin_top) * 1px);
-    margin-block-end: calc(var(--spacing-datepicker-date-margin_bottom) * 1px);
+    margin-block-start: var(--spacing-datepicker-date-margin_top);
+    margin-block-end: var(--spacing-datepicker-date-margin_bottom);
 
     &--disabled {
         color: var(--color-datepicker-date-text-disable);
@@ -45,44 +42,20 @@
     }
 
     &--start {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         color: var(--color-datepicker-date-text-active);
-        // background-color: var(--color-datepicker-date-bg-active);
-        // border-radius: calc(var(--height-datepicker-date) * 0.5px) 0 0 calc(var(--height-datepicker-date) * 0.5px);
         border-radius: 0;
-        // background:  url(./start.png) center center no-repeat;
         background-image: url(./start.png) !important;
         background-position: center center !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
-        // &::after{
-        //     content: '';
-        //     position: absolute;
-        //     right: 0;
-        //     top: 0;
-        //     bottom: 0;
-        //     background-color: #1BC47D;
-        // }
     }
 
     &--middle {
         color: var(--color-datepicker-date-text-default) !important;
         background-color: var(--color-datepicker-date_mask-bg-active);
 
-        // &::after,&::before{
-        //     content: "";
-        //     display: block;
-        //     position: absolute;
-        //     top: 0;
-        //     width: 4px;
-        //     height: 100%;
-        //     background-color: var(--color-datepicker-date_mask-bg-active);
-        //     opacity: 1;
-        // }
-        // &::before{
-        //     left: 0;
-        // }
         &::after {
             background-color: transparent;
             opacity: 1;
@@ -90,11 +63,10 @@
     }
 
     &--end {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         color: var(--color-datepicker-date-text-active);
         background-color: var(--color-datepicker-date-bg-active);
-        // border-radius:0 calc(var(--height-datepicker-date) * 0.5px) calc(var(--height-datepicker-date) * 0.5px) 0;
         border-radius: 0;
         background-image: url(./end.png) !important;
         background-position: center center !important;
@@ -121,17 +93,16 @@
     font-size: 18px;
 }
 
-
 .vd-calendar-input {
-    padding-block-start: calc(var(--spacing-datepicker-range_picker-margin_top) * 1px);
-    padding-block-end: calc(var(--spacing-datepicker-range_picker-margin_bottom) * 1px);
-    padding-inline-start: calc(var(--spacing-datepicker-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-datepicker-padding_y) * 1px);
+    padding-block-start: var(--spacing-datepicker-range_picker-margin_top);
+    padding-block-end: var(--spacing-datepicker-range_picker-margin_bottom);
+    padding-inline-start: var(--spacing-datepicker-padding_y);
+    padding-inline-end: var(--spacing-datepicker-padding_y);
 
     &-inner {
         display: flex;
         align-items: center;
-        border-radius: calc(var(--radius-datepicker-range_picker_bg) * 1px);
+        border-radius: var(--radius-datepicker-range_picker_bg);
         background-color: var(--color-datepicker-range_picker-bg);
     }
 
@@ -139,9 +110,9 @@
         width: 100%;
         text-align: center;
         background-color: transparent;
-        height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        line-height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        height: var(--height-datepicker-range_picker_bg);
+        line-height: var(--height-datepicker-range_picker_bg);
+        font-size: var(--en-single-f-d-r-fontSize);
         font-weight: var(--en-single-f-d-r-fontWeight);
         color: var(--color-datepicker-range_picker-text-active);
 
@@ -151,8 +122,8 @@
     }
 
     &__line {
-        width: calc(var(--width-datepicker-range_picker_divider) * 1px);
-        height: calc(var(--height-datepicker-range_picker_divider) * 1px);
+        width: var(--width-datepicker-range_picker_divider);
+        height: var(--height-datepicker-range_picker_divider);
         background-color: var(--color-datepicker-range_picker_divider);
     }
 }
@@ -162,6 +133,6 @@
 }
 
 .van-picker__frame {
-    left: calc(var(--spacing-datepicker-padding_y) * 1px);
-    right: calc(var(--spacing-datepicker-padding_y) * 1px);
+    left: var(--spacing-datepicker-padding_y);
+    right: var(--spacing-datepicker-padding_y);
 }

package/dist/components/checkbox/index.vue

@@ -44,11 +44,15 @@
   </label>
 </template>
 <script>
-import { findComponentUpward } from "./assist";
+import { findComponentUpward } from "../utils/assist";
+import VdIcon from '../icon';
 const prefixCls = "vd-checkbox";
 
 export default {
   name: "vd-checkbox",
+  components: {
+    VdIcon
+  },
   props: {
     value: [String, Number, Boolean], // 复选框的当前值
     checkboxButton: Boolean, // 是否为复选框按钮

package/dist/components/checkbox/style.less

@@ -12,35 +12,36 @@
     // 普通状态
     .@{checkbox-prefix-cls} {
 
-        &__input{
+        &__input {
             position: relative;
-            margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
+            margin-inline-end: var(--spacing-check_radio-icon-margin_right);
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
         }
 
         &__text {
             color: var(--color-check_radio-text-default);
-            font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+            font-size: var(--en-single-f-d-r-fontSize);
             font-weight: var(--en-single-f-d-r-fontWeight);
         }
 
         &__description {
             line-height: 1;
-            margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
+            margin-top: var(--spacing-check_radio-text-margin_top);
             color: var(--color-check_radio-text_describe-default);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+            font-size: var(--en-single-f-b-r-fontSize);
             font-weight: var(--en-single-f-b-r-fontWeight);
         }
 
         .@{checkbox-icon-prefix-cls} {
             display: block;
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
             position: relative;
             top: 0;
             left: 0;
-            &::before{
+
+            &::before {
                 position: absolute;
                 box-sizing: border-box;
                 content: ' ';
@@ -49,10 +50,9 @@
                 right: -50%;
                 bottom: -50%;
                 left: -50%;
-                border: 0 solid var(--color-check_radio-default);
+                border: 3px solid var(--color-check_radio-default);
                 -webkit-transform: scale(0.5);
                 transform: scale(0.5);
-                border-width: 3px;
             }
         }
 
@@ -68,16 +68,16 @@
             cursor: pointer;
             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
             opacity: 0;
-
         }
     }
 
+
     // 选中状态
     .@{checkbox-prefix-cls}--checked {
 
         .@{checkbox-prefix-cls} {
             &__text {
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                font-size: var(--en-single-f-d-s-fontSize);
                 font-weight: var(--en-single-f-d-s-fontWeight);
             }
         }
@@ -139,7 +139,7 @@
 
         & + .@{checkbox-prefix-cls}__label {
             .@{checkbox-prefix-cls}__text {
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                font-size: var(--en-single-f-d-s-fontSize);
                 font-weight: var(--en-single-f-d-s-fontWeight);
             }
         }
@@ -183,54 +183,52 @@
         background-color: var(--color-check_radio-check_bg-default);
 
         &--large {
-            height: calc(var(--height-check_radio-check_button_l) * 1px);
-            border-radius: calc(var(--radius-check_radio-check_l) * 1px);
+            height: var(--height-check_radio-check_button_l);
+            border-radius: var(--radius-check_radio-check_l);
 
             .@{checkbox-button-prefix-cls}__text {
-                margin-block-start: calc(var(--spacing-check_radio-check_icon-margin_bottom) * 1px);
+                margin-block-start: var(--spacing-check_radio-check_icon-margin_bottom);
                 font-size: 12px;
-                // color: rgba(0, 0, 0, 0.85);
                 color: var(--color-check_radio-radio_button_text-default);
             }
             
         }
 
         &--medium {
-            height: calc(var(--height-check_radio-check_button_m) * 1px);
-            border-radius: calc(var(--radius-check_radio-m) * 1px);
+            height: var(--height-check_radio-check_button_m);
+            border-radius: var(--radius-check_radio-m);
 
             .@{checkbox-button-prefix-cls}{
                 &__description {
-                    margin-block-start: calc(var(--spacing-check_radio-check_describe-margin_top) * 1px);
+                    margin-block-start: var(--spacing-check_radio-check_describe-margin_top);
                     font-size: 11px;
-                    // color: rgba(0, 0, 0, 0.3);
                     color: var(--color-check_radio-check_button_text_describe-default);
                 }
             }
         }
 
-        &--small {
-            height: calc(var(--height-check_radio-check_button_s) * 1px);
-            border-radius: calc(var(--radius-check_radio-s) * 1px);
+        &--small {            
             display: flex;
             flex-direction: row;
+            height: var(--height-check_radio-check_button_s);
+            border-radius: var(--radius-check_radio-s);
         }
 
 
         &__icon--large {
             color: var(--color-check_radio-check_button_icon-default);
-            font-size: calc(var(--icon-check_radio-check_l) * 1px);
+            font-size: var(--icon-check_radio-check_l);
         }
 
         &__icon--small {
-            font-size: calc(var(--icon-check_radio-check_s) * 1px);
+            font-size: var(--icon-check_radio-check_s);
             color: var(--text-color-h2);
-            margin-inline-end: calc(var(--spacing-check_radio-check_icon-margin_right) * 1px);
+            margin-inline-end: var(--spacing-check_radio-check_icon-margin_right);
         }
 
         &__text {
             color: var(--color-check_radio-radio_button_text-default);
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-size: var(--en-single-f-c-r-fontSize);
             font-weight: var(--en-single-f-c-r-fontWeight);
         }
 
@@ -240,7 +238,7 @@
 
             .@{checkbox-button-prefix-cls}__text {
                 color: var(--color-check_radio-radio_button_text-active);
-                font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+                font-size: var(--en-single-f-c-s-fontSize);
                 font-weight: var(--en-single-f-c-s-fontWeight);
             }
 
@@ -276,7 +274,7 @@
     .@{checkbox-prefix-cls}-group {
         display: flex;
         flex-direction: column;
-        gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+        gap: var(--spacing-check_radio-group-margin_x);
 		
 		&__card{
 			display: flex;

package/dist/components/checkbox-group/index.js

@@ -0,0 +1,7 @@
+import CheckboxGroup from './index.vue';
+
+CheckboxGroup.install = function (Vue) {
+  Vue.component(CheckboxGroup.name, CheckboxGroup);
+};
+
+export default CheckboxGroup;