style: rem 改成 px2rem 以便于编译 remFactor 为非 16px 的场景 (#8625)

This commit is contained in:
liaoxuezhi 2023-11-06 11:17:25 +08:00 committed by GitHub
parent 7687203811
commit 7efea102f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 262 additions and 262 deletions

View File

@ -1659,8 +1659,8 @@
--Form--horizontal-label-widthBase: var(--sizes-base-49);
--Form--horizontal-label-widthXs: var(--sizes-base-25);
--Form--horizontal-label-widthSm: var(--sizes-base-35);
--Form--horizontal-label-widthMd: 8.5rem;
--Form--horizontal-label-widthLg: 12.5rem;
--Form--horizontal-label-widthMd: #{px2rem(136px)};
--Form--horizontal-label-widthLg: #{px2rem(200px)};
--Form--horizontal-value-marginTop: var(--sizes-size-0);
--Form--horizontal-value-marginBottom: var(--sizes-size-0);
--Form--horizontal-value-marginLeft: var(--sizes-size-5);
@ -1682,7 +1682,7 @@
--InputRange-handle-mobile-width: var(--sizes-base-10);
--InputRange-handle-bg: var(--colors-neutral-fill-11);
--InputRange-handle-top-border-color: var(--colors-brand-5);
--InputRange-handle-top-border-width: 0.0625rem;
--InputRange-handle-top-border-width: #{px2rem(1px)};
--InputRange-handle-top-border-style: var(--borders-style-2);
--InputRange-handle-top-right-border-radius: var(--borders-radius-7);
--InputRange-handle-border: var(--InputRange-handle-top-border-width)
@ -1773,9 +1773,9 @@
--dialog-content-color: var(--colors-neutral-text-2);
--dialog-footer-height: var(--sizes-size-1);
--dialog-footer-margin-left: var(--sizes-size-5);
--dialog-size-sm-width: 21.875rem;
--dialog-size-normal-width: 31.25rem;
--dialog-size-lg-width: 68.75rem;
--dialog-size-sm-width: #{px2rem(350px)};
--dialog-size-normal-width: #{px2rem(500px)};
--dialog-size-lg-width: #{px2rem(1100px)};
--dialog-size-xl-width: 90%;
--Modal-bg: var(--background);
@ -1828,10 +1828,10 @@
--drawer-content-paddingRight: var(--sizes-base-12);
--drawer-footer-height: var(--sizes-size-1);
--drawer-footer-margin-left: var(--sizes-size-9);
--drawer-size-xs-width: 12.5rem;
--drawer-size-sm-width: 18.75rem;
--drawer-size-md-width: 31.25rem;
--drawer-size-lg-width: 50rem;
--drawer-size-xs-width: #{px2rem(200px)};
--drawer-size-sm-width: #{px2rem(300px)};
--drawer-size-md-width: #{px2rem(500px)};
--drawer-size-lg-width: #{px2rem(800px)};
--drawer-size-xl-width: 90%;
--Drawer-bg: var(--background);
@ -2394,7 +2394,7 @@
--Tabs--vertical-paddingLeft: var(--sizes-size-7);
--Tabs--vertical-paddingRight: var(--sizes-size-7);
--Tabs--vertical-bg: var(--colors-neutral-fill-10);
--Tabs--vertical-width: 8.75rem;
--Tabs--vertical-width: #{px2rem(140px)};
--Tabs--vertical-active-color: var(--colors-brand-5);
--Tabs--vertical-active-fontSize: var(--fonts-size-7);
--Tabs--vertical-active-fontWeight: var(--fonts-weight-6);
@ -3319,7 +3319,7 @@
--image-images-item-marginBottom: var(--sizes-size-3);
--image-images-item-marginLeft: var(--sizes-size-3);
--image-images-item-marginRight: var(--sizes-size-3);
--image-images-item-size: 3rem;
--image-images-item-size: #{px2rem(48px)};
--image-images-item-color: var(--colors-neutral-text-5);
--image-images-preview-radius: var(--sizes-size-3);
--image-images-preview-bgColor: var(--colors-neutral-text-11);

View File

@ -708,9 +708,9 @@ $Table-strip-bg: transparent;
--Tooltip--attr-transition: all var(--animation-duration) ease-in-out;
--Tooltip-arrow-color: var(--Tooltip-bg);
--Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
--Tooltip-arrow-height: 0.25rem;
--Tooltip-arrow-height: #{px2rem(4px)};
--Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
--Tooltip-arrow-width: 0.5rem;
--Tooltip-arrow-width: #{px2rem(8px)};
--Tooltip-bg: var(--background);
--Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
--Tooltip-body-color: var(--text-color);

View File

@ -238,7 +238,7 @@
margin: 0 var(--gap-sm) !important;
}
&-secondary {
max-width: 12.5rem;
max-width: px2rem(200px);
color: var(--Card-secondary-color);
padding: 0 var(--gap-md);
font-size: var(--fontSizeMd);

View File

@ -71,18 +71,18 @@
&-asideResizor {
position: absolute;
right: -0.375rem;
right: px2rem(-6px);
top: 50%;
cursor: ew-resize;
writing-mode: vertical-lr;
width: 0.75rem;
height: 1.5rem;
margin-top: -0.75rem;
width: px2rem(12px);
height: px2rem(24px);
margin-top: px2rem(-12px);
border: 0.0625rem solid #dee2e6;
background-color: #fff;
border-radius: 0.142rem;
border-radius: px2rem(2px);
font-size: 12px;
line-height: 0.625rem;
line-height: px2rem(10px);
text-align: center;
user-select: none;
color: #666;

View File

@ -65,7 +65,7 @@
transparent 75%,
transparent
);
background-size: 2rem 2rem;
background-size: px2rem(32px) px2rem(32px);
}
&--animate {

View File

@ -206,7 +206,7 @@
content: '';
position: absolute;
display: inline-block;
top: 1rem;
top: px2rem(16px);
height: 1px;
left: px2rem(130px);
width: calc(100% - 55px);

View File

@ -9,11 +9,11 @@
}
&-container > p {
font-size: 1rem;
font-size: px2rem(16px);
}
&-container > em {
font-size: 0.8rem;
font-size: px2rem(12px);
}
&-dropzone {

View File

@ -44,7 +44,7 @@
.#{$ns}LocationPicker-toggler {
svg {
top: 0.125rem;
top: px2rem(2px);
}
}
}

View File

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

View File

@ -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%;
}

View File

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

View File

@ -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),

View File

@ -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),

View File

@ -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),

View File

@ -158,64 +158,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),