amis-ui 3.5.2 → 3.6.0

package/scss/themes/_ang-variables.scss

@@ -109,9 +109,11 @@ $ns: 'a-';
   --colors-neutral-line-9: #f3f2f5;
   --colors-neutral-line-10: #f8f7fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;
@@ -150,64 +152,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

@@ -109,9 +109,11 @@ $ns: 'antd-';
   --colors-neutral-line-9: #f2f4f5;
   --colors-neutral-line-10: #f7f9fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;
@@ -150,64 +152,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

@@ -106,9 +106,12 @@ $ns: 'cxd-';
   --colors-neutral-line-9: #f2f3f5;
   --colors-neutral-line-10: #f7f8fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  // 参考 https://zenozeng.github.io/fonts.css/
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;
@@ -147,64 +150,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),

package/scss/themes/_dark-variables.scss

@@ -117,9 +117,11 @@ $ns: 'dark-';
   --colors-neutral-line-9: #f2f4f5;
   --colors-neutral-line-10: #f7f9fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;
@@ -158,64 +160,64 @@ $ns: 'dark-';
   --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),