amis-ui 3.5.2 → 3.5.3

package/scss/components/form/_location.scss

@@ -44,7 +44,7 @@
 
     .#{$ns}LocationPicker-toggler {
       svg {
-        top: 0.125rem;
+        top: px2rem(2px);
       }
     }
   }
@@ -132,6 +132,13 @@
   max-width: 100%;
   margin-top: -1px;
   border-color: var(--Form-input-onFocused-borderColor);
+
+  &.#{$ns}PopOver--v-top {
+    margin-top: px2rem(4px);
+  }
+  &.#{$ns}PopOver--v-bottom {
+    margin-bottom: px2rem(4px);
+  }
 }
 
 .#{$ns}MapPicker {

package/scss/components/form/_nested-select.scss

@@ -4,7 +4,7 @@
   .#{$ns}NestedSelect-menu {
     padding-top: px2rem(4px);
     padding-bottom: px2rem(4px);
-    box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
+    box-shadow: var(--Form-select-outer-boxShadow);
   }
 }
 
@@ -18,8 +18,6 @@
 
   &-optionArrowRight {
     display: inline-block;
-    padding-right: var(--Form-select-icon-rigin);
-
     svg {
       width: px2rem(10px);
       height: px2rem(10px);
@@ -29,6 +27,12 @@
     }
   }
 
+  &-optionArrowRight.is-disabled {
+    svg {
+      color: var(--text--muted-color);
+    }
+  }
+
   &-menuOuter {
     display: flex;
   }
@@ -56,19 +60,23 @@
     max-height: px2rem(175px);
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
-    border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+    border-radius: var(--borderRadius);
     box-shadow: var(--Form-select-outer-boxShadow);
     overflow-y: auto;
     overflow-x: hidden;
-
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
     &:not(:first-child) {
       border-left: 0;
+      margin-left: px2rem(4px);
     }
 
     .#{$ns}NestedSelect-option {
       position: relative;
-      padding-left: var(--gap-md);
+      padding: var(--select-base-default-option-paddingTop)
+        var(--select-base-default-option-paddingRight)
+        var(--select-base-default-option-paddingBottom)
+        var(--select-base-default-option-paddingLeft);
       min-height: var(--select-base-default-option-line-height);
       line-height: var(--select-base-default-option-line-height);
       cursor: pointer;
@@ -122,3 +130,8 @@
     height: px2rem(340px);
   }
 }
+
+.#{$ns}NestedSelect-popover {
+  border: none;
+  box-shadow: none;
+}

package/scss/components/form/_picker.scss

@@ -105,7 +105,7 @@
     padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 
     > input {
-      width: 1rem;
+      width: px2rem(16px);
       display: inline-block;
     }
   }

package/scss/components/form/_range.scss

@@ -206,10 +206,10 @@
   }
 
   &-track--background {
-    left: 0.5rem;
+    left: px2rem(8px);
     margin-top: calc(-0.5 * var(--InputRange-track-height));
     position: absolute;
-    right: 0.5rem;
+    right: px2rem(8px);
     top: 50%;
   }
 

package/scss/components/form/_select.scss

@@ -584,26 +584,15 @@
 }
 
 .#{$ns}Select-popover {
-  margin-top: calc(var(--Form-select-outer-borderWidth) * -1);
-
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
   border: var(--Form-select-outer-borderWidth) solid
     var(--Form-input-onFocused-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   // min-width: px2rem(100px);
 
   // PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
   // z-index: 10;
-
-  &.#{$ns}PopOver--leftTopLeftBottom {
-    margin-top: calc(
-      (var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)) *
-        -1
-    );
-  }
 }
 
 .#{$ns}SelectControl {

package/scss/components/form/_selection.scss

@@ -444,7 +444,7 @@
 .#{$ns}DropDownSelection {
   position: relative;
   display: inline-block;
-  margin: 0.1875rem;
+  margin: px2rem(3px);
   vertical-align: middle;
 
   &-caret {

package/scss/components/form/_text.scss

@@ -319,7 +319,10 @@
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
     border-radius: px2rem(2px);
-    box-shadow: var(--menu-box-shadow);
+    box-shadow: var(--Form-select-outer-boxShadow);
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
+    padding: px2rem(4px) 0;
   }
 
   &-sugs {
@@ -328,13 +331,11 @@
   }
 
   &-sugItem {
-    padding: calc(
-        (
-            var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize) - #{px2rem(2px)}
-          ) / 2
-      )
-      px2rem(12px);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
+    line-height: var(--select-base-default-option-line-height);
 
     svg {
       width: px2rem(16px);

package/scss/components/form/_textarea.scss

@@ -48,6 +48,10 @@
     color: var(--input-count-multi-color);
     font-size: var(--input-count-multi-fontSize);
 
+    > i {
+      font-style: normal;
+    }
+
     &.is-empty {
       color: var(--input-count-multi-color);
     }

package/scss/components/form/_transfer.scss

@@ -39,6 +39,42 @@
     }
   }
 
+  &-footer {
+    border-top: 1px solid var(--transfer-base-footer-border-color);
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    padding: var(--gap-sm);
+
+    /* 底部空间较小，让Pagination紧凑一些 */
+    &-pagination {
+      & > ul {
+        &.#{$ns}Pagination-item {
+          margin-left: 0;
+        }
+
+        & > li {
+          --Pagination-minWidth: #{px2rem(22px)};
+          --Pagination-height: #{px2rem(22px)};
+          --Pagination-padding: 0 #{px2rem(6px)};
+        }
+      }
+
+      .#{$ns}Pagination-perpage {
+        --select-base-default-paddingTop: 0;
+        --select-base-default-paddingBottom: 0;
+        --select-base-default-paddingLeft: #{px2rem(6px)};
+        --select-base-default-paddingRight: #{px2rem(6px)};
+
+        margin-left: 0;
+
+        .#{$ns}Select-valueWrap {
+          line-height: #{px2rem(22px)};
+        }
+      }
+    }
+  }
+
   &-select,
   &-result {
     overflow: hidden;
@@ -64,6 +100,10 @@
       var(--transfer-base-top-right-border-radius)
       var(--transfer-base-bottom-right-border-radius)
       var(--transfer-base-bottom-left-border-radius);
+
+    &--pagination {
+      max-height: px2rem(475px);
+    }
   }
 
   &-select > &-selection,

package/scss/themes/_ang-variables.scss

@@ -150,64 +150,64 @@ $ns: 'a-';
   --borders-radius-7: 50%;
   --sizes-size-0: 0rem;
   --sizes-size-1: auto;
-  --sizes-size-2: 0.125rem;
-  --sizes-size-3: 0.25rem;
-  --sizes-size-4: 0.375rem;
-  --sizes-size-5: 0.5rem;
-  --sizes-size-6: 0.625rem;
-  --sizes-size-7: 0.75rem;
-  --sizes-size-8: 0.875rem;
-  --sizes-size-9: 1rem;
-  --sizes-base-1: 0.125rem;
-  --sizes-base-2: 0.25rem;
-  --sizes-base-3: 0.375rem;
-  --sizes-base-4: 0.5rem;
-  --sizes-base-5: 0.625rem;
-  --sizes-base-6: 0.75rem;
-  --sizes-base-7: 0.875rem;
-  --sizes-base-8: 1rem;
-  --sizes-base-9: 1.125rem;
-  --sizes-base-10: 1.25rem;
-  --sizes-base-11: 1.375rem;
-  --sizes-base-12: 1.5rem;
-  --sizes-base-13: 1.625rem;
-  --sizes-base-14: 1.75rem;
-  --sizes-base-15: 1.875rem;
-  --sizes-base-16: 2rem;
-  --sizes-base-17: 2.125rem;
-  --sizes-base-18: 2.25rem;
-  --sizes-base-19: 2.375rem;
-  --sizes-base-20: 2.5rem;
-  --sizes-base-21: 2.625rem;
-  --sizes-base-22: 2.75rem;
-  --sizes-base-23: 2.875rem;
-  --sizes-base-24: 3rem;
-  --sizes-base-25: 3.125rem;
-  --sizes-base-26: 3.25rem;
-  --sizes-base-27: 3.375rem;
-  --sizes-base-28: 3.5rem;
-  --sizes-base-29: 3.625rem;
-  --sizes-base-30: 3.75rem;
-  --sizes-base-31: 3.875rem;
-  --sizes-base-32: 4rem;
-  --sizes-base-33: 4.125rem;
-  --sizes-base-34: 4.25rem;
-  --sizes-base-35: 4.375rem;
-  --sizes-base-36: 4.5rem;
-  --sizes-base-37: 4.625rem;
-  --sizes-base-38: 4.75rem;
-  --sizes-base-39: 4.875rem;
-  --sizes-base-40: 5rem;
-  --sizes-base-41: 5.125rem;
-  --sizes-base-42: 5.25rem;
-  --sizes-base-43: 5.375rem;
-  --sizes-base-44: 5.5rem;
-  --sizes-base-45: 5.625rem;
-  --sizes-base-46: 5.75rem;
-  --sizes-base-47: 5.875rem;
-  --sizes-base-48: 6rem;
-  --sizes-base-49: 6.125rem;
-  --sizes-base-50: 6.25rem;
+  --sizes-size-2: #{px2rem(2px)};
+  --sizes-size-3: #{px2rem(4px)};
+  --sizes-size-4: #{px2rem(6px)};
+  --sizes-size-5: #{px2rem(8px)};
+  --sizes-size-6: #{px2rem(10px)};
+  --sizes-size-7: #{px2rem(12px)};
+  --sizes-size-8: #{px2rem(14px)};
+  --sizes-size-9: #{px2rem(16px)};
+  --sizes-base-1: #{px2rem(2px)};
+  --sizes-base-2: #{px2rem(4px)};
+  --sizes-base-3: #{px2rem(6px)};
+  --sizes-base-4: #{px2rem(8px)};
+  --sizes-base-5: #{px2rem(10px)};
+  --sizes-base-6: #{px2rem(12px)};
+  --sizes-base-7: #{px2rem(14px)};
+  --sizes-base-8: #{px2rem(16px)};
+  --sizes-base-9: #{px2rem(18px)};
+  --sizes-base-10: #{px2rem(20px)};
+  --sizes-base-11: #{px2rem(22px)};
+  --sizes-base-12: #{px2rem(24px)};
+  --sizes-base-13: #{px2rem(26px)};
+  --sizes-base-14: #{px2rem(28px)};
+  --sizes-base-15: #{px2rem(30px)};
+  --sizes-base-16: #{px2rem(32px)};
+  --sizes-base-17: #{px2rem(34px)};
+  --sizes-base-18: #{px2rem(36px)};
+  --sizes-base-19: #{px2rem(38px)};
+  --sizes-base-20: #{px2rem(40px)};
+  --sizes-base-21: #{px2rem(42px)};
+  --sizes-base-22: #{px2rem(44px)};
+  --sizes-base-23: #{px2rem(46px)};
+  --sizes-base-24: #{px2rem(48px)};
+  --sizes-base-25: #{px2rem(50px)};
+  --sizes-base-26: #{px2rem(52px)};
+  --sizes-base-27: #{px2rem(54px)};
+  --sizes-base-28: #{px2rem(56px)};
+  --sizes-base-29: #{px2rem(58px)};
+  --sizes-base-30: #{px2rem(60px)};
+  --sizes-base-31: #{px2rem(62px)};
+  --sizes-base-32: #{px2rem(64px)};
+  --sizes-base-33: #{px2rem(66px)};
+  --sizes-base-34: #{px2rem(68px)};
+  --sizes-base-35: #{px2rem(70px)};
+  --sizes-base-36: #{px2rem(72px)};
+  --sizes-base-37: #{px2rem(74px)};
+  --sizes-base-38: #{px2rem(76px)};
+  --sizes-base-39: #{px2rem(78px)};
+  --sizes-base-40: #{px2rem(80px)};
+  --sizes-base-41: #{px2rem(82px)};
+  --sizes-base-42: #{px2rem(84px)};
+  --sizes-base-43: #{px2rem(86px)};
+  --sizes-base-44: #{px2rem(88px)};
+  --sizes-base-45: #{px2rem(90px)};
+  --sizes-base-46: #{px2rem(92px)};
+  --sizes-base-47: #{px2rem(94px)};
+  --sizes-base-48: #{px2rem(96px)};
+  --sizes-base-49: #{px2rem(98px)};
+  --sizes-base-50: #{px2rem(100px)};
   --shadows-shadow-none: 0px 0px 0px 0px transparent;
   --shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

package/scss/themes/_antd-variables.scss

@@ -150,64 +150,64 @@ $ns: 'antd-';
   --borders-radius-7: 50%;
   --sizes-size-0: 0rem;
   --sizes-size-1: auto;
-  --sizes-size-2: 0.125rem;
-  --sizes-size-3: 4px;
-  --sizes-size-4: 0.375rem;
-  --sizes-size-5: 0.5rem;
-  --sizes-size-6: 0.625rem;
-  --sizes-size-7: 15px;
-  --sizes-size-8: 0.875rem;
-  --sizes-size-9: 1rem;
-  --sizes-base-1: 0.125rem;
-  --sizes-base-2: 0.25rem;
-  --sizes-base-3: 0.375rem;
-  --sizes-base-4: 0.5rem;
-  --sizes-base-5: 0.625rem;
-  --sizes-base-6: 0.75rem;
-  --sizes-base-7: 0.875rem;
-  --sizes-base-8: 1rem;
-  --sizes-base-9: 1.125rem;
-  --sizes-base-10: 1.25rem;
-  --sizes-base-11: 1.375rem;
-  --sizes-base-12: 1.5rem;
-  --sizes-base-13: 1.625rem;
-  --sizes-base-14: 1.75rem;
-  --sizes-base-15: 1.875rem;
-  --sizes-base-16: 2rem;
-  --sizes-base-17: 2.125rem;
-  --sizes-base-18: 2.25rem;
-  --sizes-base-19: 2.375rem;
-  --sizes-base-20: 2.5rem;
-  --sizes-base-21: 2.625rem;
-  --sizes-base-22: 2.75rem;
-  --sizes-base-23: 2.875rem;
-  --sizes-base-24: 3rem;
-  --sizes-base-25: 3.125rem;
-  --sizes-base-26: 3.25rem;
-  --sizes-base-27: 3.375rem;
-  --sizes-base-28: 3.5rem;
-  --sizes-base-29: 3.625rem;
-  --sizes-base-30: 3.75rem;
-  --sizes-base-31: 3.875rem;
-  --sizes-base-32: 4rem;
-  --sizes-base-33: 4.125rem;
-  --sizes-base-34: 4.25rem;
-  --sizes-base-35: 4.375rem;
-  --sizes-base-36: 4.5rem;
-  --sizes-base-37: 4.625rem;
-  --sizes-base-38: 4.75rem;
-  --sizes-base-39: 4.875rem;
-  --sizes-base-40: 5rem;
-  --sizes-base-41: 5.125rem;
-  --sizes-base-42: 5.25rem;
-  --sizes-base-43: 5.375rem;
-  --sizes-base-44: 5.5rem;
-  --sizes-base-45: 5.625rem;
-  --sizes-base-46: 5.75rem;
-  --sizes-base-47: 5.875rem;
-  --sizes-base-48: 6rem;
-  --sizes-base-49: 6.125rem;
-  --sizes-base-50: 6.25rem;
+  --sizes-size-2: #{px2rem(2px)};
+  --sizes-size-3: #{px2rem(4px)};
+  --sizes-size-4: #{px2rem(6px)};
+  --sizes-size-5: #{px2rem(8px)};
+  --sizes-size-6: #{px2rem(10px)};
+  --sizes-size-7: #{px2rem(12px)};
+  --sizes-size-8: #{px2rem(14px)};
+  --sizes-size-9: #{px2rem(16px)};
+  --sizes-base-1: #{px2rem(2px)};
+  --sizes-base-2: #{px2rem(4px)};
+  --sizes-base-3: #{px2rem(6px)};
+  --sizes-base-4: #{px2rem(8px)};
+  --sizes-base-5: #{px2rem(10px)};
+  --sizes-base-6: #{px2rem(12px)};
+  --sizes-base-7: #{px2rem(14px)};
+  --sizes-base-8: #{px2rem(16px)};
+  --sizes-base-9: #{px2rem(18px)};
+  --sizes-base-10: #{px2rem(20px)};
+  --sizes-base-11: #{px2rem(22px)};
+  --sizes-base-12: #{px2rem(24px)};
+  --sizes-base-13: #{px2rem(26px)};
+  --sizes-base-14: #{px2rem(28px)};
+  --sizes-base-15: #{px2rem(30px)};
+  --sizes-base-16: #{px2rem(32px)};
+  --sizes-base-17: #{px2rem(34px)};
+  --sizes-base-18: #{px2rem(36px)};
+  --sizes-base-19: #{px2rem(38px)};
+  --sizes-base-20: #{px2rem(40px)};
+  --sizes-base-21: #{px2rem(42px)};
+  --sizes-base-22: #{px2rem(44px)};
+  --sizes-base-23: #{px2rem(46px)};
+  --sizes-base-24: #{px2rem(48px)};
+  --sizes-base-25: #{px2rem(50px)};
+  --sizes-base-26: #{px2rem(52px)};
+  --sizes-base-27: #{px2rem(54px)};
+  --sizes-base-28: #{px2rem(56px)};
+  --sizes-base-29: #{px2rem(58px)};
+  --sizes-base-30: #{px2rem(60px)};
+  --sizes-base-31: #{px2rem(62px)};
+  --sizes-base-32: #{px2rem(64px)};
+  --sizes-base-33: #{px2rem(66px)};
+  --sizes-base-34: #{px2rem(68px)};
+  --sizes-base-35: #{px2rem(70px)};
+  --sizes-base-36: #{px2rem(72px)};
+  --sizes-base-37: #{px2rem(74px)};
+  --sizes-base-38: #{px2rem(76px)};
+  --sizes-base-39: #{px2rem(78px)};
+  --sizes-base-40: #{px2rem(80px)};
+  --sizes-base-41: #{px2rem(82px)};
+  --sizes-base-42: #{px2rem(84px)};
+  --sizes-base-43: #{px2rem(86px)};
+  --sizes-base-44: #{px2rem(88px)};
+  --sizes-base-45: #{px2rem(90px)};
+  --sizes-base-46: #{px2rem(92px)};
+  --sizes-base-47: #{px2rem(94px)};
+  --sizes-base-48: #{px2rem(96px)};
+  --sizes-base-49: #{px2rem(98px)};
+  --sizes-base-50: #{px2rem(100px)};
   --shadows-shadow-none: 0px 0px 0px 0px transparent;
   --shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

package/scss/themes/_cxd-variables.scss

@@ -147,64 +147,64 @@ $ns: 'cxd-';
   --borders-radius-7: 50%;
   --sizes-size-0: 0rem;
   --sizes-size-1: auto;
-  --sizes-size-2: 0.125rem;
-  --sizes-size-3: 0.25rem;
-  --sizes-size-4: 0.375rem;
-  --sizes-size-5: 0.5rem;
-  --sizes-size-6: 0.625rem;
-  --sizes-size-7: 0.75rem;
-  --sizes-size-8: 0.875rem;
-  --sizes-size-9: 1rem;
-  --sizes-base-1: 0.125rem;
-  --sizes-base-2: 0.25rem;
-  --sizes-base-3: 0.375rem;
-  --sizes-base-4: 0.5rem;
-  --sizes-base-5: 0.625rem;
-  --sizes-base-6: 0.75rem;
-  --sizes-base-7: 0.875rem;
-  --sizes-base-8: 1rem;
-  --sizes-base-9: 1.125rem;
-  --sizes-base-10: 1.25rem;
-  --sizes-base-11: 1.375rem;
-  --sizes-base-12: 1.5rem;
-  --sizes-base-13: 1.625rem;
-  --sizes-base-14: 1.75rem;
-  --sizes-base-15: 1.875rem;
-  --sizes-base-16: 2rem;
-  --sizes-base-17: 2.125rem;
-  --sizes-base-18: 2.25rem;
-  --sizes-base-19: 2.375rem;
-  --sizes-base-20: 2.5rem;
-  --sizes-base-21: 2.625rem;
-  --sizes-base-22: 2.75rem;
-  --sizes-base-23: 2.875rem;
-  --sizes-base-24: 3rem;
-  --sizes-base-25: 3.125rem;
-  --sizes-base-26: 3.25rem;
-  --sizes-base-27: 3.375rem;
-  --sizes-base-28: 3.5rem;
-  --sizes-base-29: 3.625rem;
-  --sizes-base-30: 3.75rem;
-  --sizes-base-31: 3.875rem;
-  --sizes-base-32: 4rem;
-  --sizes-base-33: 4.125rem;
-  --sizes-base-34: 4.25rem;
-  --sizes-base-35: 4.375rem;
-  --sizes-base-36: 4.5rem;
-  --sizes-base-37: 4.625rem;
-  --sizes-base-38: 4.75rem;
-  --sizes-base-39: 4.875rem;
-  --sizes-base-40: 5rem;
-  --sizes-base-41: 5.125rem;
-  --sizes-base-42: 5.25rem;
-  --sizes-base-43: 5.375rem;
-  --sizes-base-44: 5.5rem;
-  --sizes-base-45: 5.625rem;
-  --sizes-base-46: 5.75rem;
-  --sizes-base-47: 5.875rem;
-  --sizes-base-48: 6rem;
-  --sizes-base-49: 6.125rem;
-  --sizes-base-50: 6.25rem;
+  --sizes-size-2: #{px2rem(2px)};
+  --sizes-size-3: #{px2rem(4px)};
+  --sizes-size-4: #{px2rem(6px)};
+  --sizes-size-5: #{px2rem(8px)};
+  --sizes-size-6: #{px2rem(10px)};
+  --sizes-size-7: #{px2rem(12px)};
+  --sizes-size-8: #{px2rem(14px)};
+  --sizes-size-9: #{px2rem(16px)};
+  --sizes-base-1: #{px2rem(2px)};
+  --sizes-base-2: #{px2rem(4px)};
+  --sizes-base-3: #{px2rem(6px)};
+  --sizes-base-4: #{px2rem(8px)};
+  --sizes-base-5: #{px2rem(10px)};
+  --sizes-base-6: #{px2rem(12px)};
+  --sizes-base-7: #{px2rem(14px)};
+  --sizes-base-8: #{px2rem(16px)};
+  --sizes-base-9: #{px2rem(18px)};
+  --sizes-base-10: #{px2rem(20px)};
+  --sizes-base-11: #{px2rem(22px)};
+  --sizes-base-12: #{px2rem(24px)};
+  --sizes-base-13: #{px2rem(26px)};
+  --sizes-base-14: #{px2rem(28px)};
+  --sizes-base-15: #{px2rem(30px)};
+  --sizes-base-16: #{px2rem(32px)};
+  --sizes-base-17: #{px2rem(34px)};
+  --sizes-base-18: #{px2rem(36px)};
+  --sizes-base-19: #{px2rem(38px)};
+  --sizes-base-20: #{px2rem(40px)};
+  --sizes-base-21: #{px2rem(42px)};
+  --sizes-base-22: #{px2rem(44px)};
+  --sizes-base-23: #{px2rem(46px)};
+  --sizes-base-24: #{px2rem(48px)};
+  --sizes-base-25: #{px2rem(50px)};
+  --sizes-base-26: #{px2rem(52px)};
+  --sizes-base-27: #{px2rem(54px)};
+  --sizes-base-28: #{px2rem(56px)};
+  --sizes-base-29: #{px2rem(58px)};
+  --sizes-base-30: #{px2rem(60px)};
+  --sizes-base-31: #{px2rem(62px)};
+  --sizes-base-32: #{px2rem(64px)};
+  --sizes-base-33: #{px2rem(66px)};
+  --sizes-base-34: #{px2rem(68px)};
+  --sizes-base-35: #{px2rem(70px)};
+  --sizes-base-36: #{px2rem(72px)};
+  --sizes-base-37: #{px2rem(74px)};
+  --sizes-base-38: #{px2rem(76px)};
+  --sizes-base-39: #{px2rem(78px)};
+  --sizes-base-40: #{px2rem(80px)};
+  --sizes-base-41: #{px2rem(82px)};
+  --sizes-base-42: #{px2rem(84px)};
+  --sizes-base-43: #{px2rem(86px)};
+  --sizes-base-44: #{px2rem(88px)};
+  --sizes-base-45: #{px2rem(90px)};
+  --sizes-base-46: #{px2rem(92px)};
+  --sizes-base-47: #{px2rem(94px)};
+  --sizes-base-48: #{px2rem(96px)};
+  --sizes-base-49: #{px2rem(98px)};
+  --sizes-base-50: #{px2rem(100px)};
   --shadows-shadow-none: 0px 0px 0px 0px transparent;
   --shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),