amis-ui 2.3.1 → 2.4.0

package/scss/themes/_cxd-variables.scss

@@ -1,102 +1,1134 @@
 @import '../functions';
-@import './cxd-colors';
-
 $remFactor: 16px;
 
 $ns: 'cxd-';
 
-$info: $B6;
-$primary: $B6;
-$success: $S6;
-$warning: $W6;
-$danger: $E6;
-$light: #eaf6fe;
-$white: #fff;
-$secondary: $G6;
-
-$info-bg: $B1;
-$success-bg: $S1;
-$warning-bg: $W1;
-$danger-bg: $E1;
-
-$text-color: #151a26;
-
-$Number-handler-mode: 'horizontal';
-// css 变量似乎没法用 !important，所以这里用 sass 变量
-$Wizard-steps-liAfterBorder: none !important;
-
 @import '../variables';
 @import '../properties';
 
-/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
-$Table-strip-bg: transparent;
-
-// yunshe4.0 font-size
-$T1: 10px;
-$T2: 12px;
-$T3: 14px;
-$T4: 16px;
-$T5: 18px;
-$T6: 20px;
-$T7: 22px;
-$T8: 24px;
-$T9: 28px;
-$T10: 30px;
-$T11: 32px;
-$T12: 34px;
-$T13: 36px;
-$T14: 40px;
-
-// yunshe4.0 font-weight
-$W1: 200;
-$W2: 400;
-$W3: 500;
-$W4: 600;
-
-// yunshe4.0 间距
-$H1: 4px;
-$H2: 8px;
-$H3: 16px;
-$H5: 24px;
-$H6: 32px;
-$H7: 40px;
-$H8: 48px;
-$H9: 56px;
-$H10: 80px;
-
-// yunshe4.0 border-radius
-$R1: 0;
-$R2: px2rem(2px);
-$R3: px2rem(4px);
-$R4: px2rem(6px);
-$R5: px2rem(8px);
-$R6: px2rem(10px);
-$R7: px2rem(16px);
-$R8: 50%;
-
 // yunshe4.0 box-shadow
 $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
+// css 变量似乎没法用 !important，所以这里用 sass 变量
+$Wizard-steps-liAfterBorder: none !important;
+
+:root {
+  --colors-brand-1: #001259;
+  --colors-brand-2: #001e80;
+  --colors-brand-3: #0832a6;
+  --colors-brand-4: #144bcc;
+  --colors-brand-5: #2468f2;
+  --colors-brand-6: #528eff;
+  --colors-brand-7: #7dadff;
+  --colors-brand-8: #a8caff;
+  --colors-brand-9: #d4e5ff;
+  --colors-brand-10: #e6f0ff;
+
+  --colors-neutral-text-1: #070c14;
+  --colors-neutral-text-2: #151b26;
+  --colors-neutral-text-3: #303540;
+  --colors-neutral-text-4: #5c5f66;
+  --colors-neutral-text-5: #84878c;
+  --colors-neutral-text-6: #b8babf;
+  --colors-neutral-text-7: #d4d6d9;
+  --colors-neutral-text-8: #e8e9eb;
+  --colors-neutral-text-9: #f2f3f5;
+  --colors-neutral-text-10: #f7f7f9;
+  --colors-neutral-text-11: #ffffff;
+  --colors-neutral-fill-none: transparent;
+  --colors-neutral-fill-1: #070c14;
+  --colors-neutral-fill-2: #151b26;
+  --colors-neutral-fill-3: #303540;
+  --colors-neutral-fill-4: #5c5f66;
+  --colors-neutral-fill-5: #84878c;
+  --colors-neutral-fill-6: #b8babf;
+  --colors-neutral-fill-7: #d4d6d9;
+  --colors-neutral-fill-8: #e8e9eb;
+  --colors-neutral-fill-9: #f2f3f5;
+  --colors-neutral-fill-10: #f7f7f9;
+  --colors-neutral-fill-11: #ffffff;
+  --colors-neutral-line-1: #070c14;
+  --colors-neutral-line-2: #151b26;
+  --colors-neutral-line-3: #303540;
+  --colors-neutral-line-4: #5c5f66;
+  --colors-neutral-line-5: #84878c;
+  --colors-neutral-line-6: #b8babf;
+  --colors-neutral-line-7: #d4d6d9;
+  --colors-neutral-line-8: #e8e9eb;
+  --colors-neutral-line-9: #f2f3f5;
+  --colors-neutral-line-10: #f7f7f9;
+  --colors-neutral-line-11: #ffffff;
+
+  --colors-error-1: #590410;
+  --colors-error-2: #800d18;
+  --colors-error-3: #a61922;
+  --colors-error-4: #cc292e;
+  --colors-error-5: #f23d3d;
+  --colors-error-6: #ff6966;
+  --colors-error-7: #ff908c;
+  --colors-error-8: #ffb6b3;
+  --colors-error-9: #ffdbd9;
+  --colors-error-10: #ffe8e6;
+
+  --colors-warning-1: #662500;
+  --colors-warning-2: #8c3800;
+  --colors-warning-3: #b35209;
+  --colors-warning-4: #d97116;
+  --colors-warning-5: #ff9326;
+  --colors-warning-6: #ffab52;
+  --colors-warning-7: #ffc27d;
+  --colors-warning-8: #ffd8a8;
+  --colors-warning-9: #ffecd4;
+  --colors-warning-10: #fff4e6;
+
+  --colors-success-1: #012600;
+  --colors-success-2: #054d00;
+  --colors-success-3: #0b7300;
+  --colors-success-4: #1b9908;
+  --colors-success-5: #30bf13;
+  --colors-success-6: #54cc39;
+  --colors-success-7: #7bd964;
+  --colors-success-8: #a5e693;
+  --colors-success-9: #d1f2c7;
+  --colors-success-10: #ecffe6;
+
+  --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-size-1: 48px;
+  --fonts-size-2: 40px;
+  --fonts-size-3: 32px;
+  --fonts-size-4: 24px;
+  --fonts-size-5: 20px;
+  --fonts-size-6: 16px;
+  --fonts-size-7: 14px;
+  --fonts-size-8: 12px;
+  --fonts-size-9: 12px;
+  --fonts-lineHeight-1: 1.3;
+  --fonts-lineHeight-2: 1.5;
+  --fonts-lineHeight-3: 1.7;
+  --fonts-weight-1: 900;
+  --fonts-weight-2: 800;
+  --fonts-weight-3: 700;
+  --fonts-weight-4: 600;
+  --fonts-weight-5: 500;
+  --fonts-weight-6: 400;
+  --fonts-weight-7: 300;
+  --fonts-weight-8: 200;
+  --fonts-weight-9: 100;
+
+  --borders-width-1: 0px;
+  --borders-width-2: 1px;
+  --borders-width-3: 2px;
+  --borders-width-4: 3px;
+  --borders-style-1: none;
+  --borders-style-2: solid;
+  --borders-style-3: dashed;
+  --borders-style-4: dotted;
+  --borders-radius-1: 0px;
+  --borders-radius-2: 2px;
+  --borders-radius-3: 4px;
+  --borders-radius-4: 6px;
+  --borders-radius-5: 8px;
+  --borders-radius-6: 10px;
+  --borders-radius-7: 50%;
+
+  --sizes-size-0: 0px;
+  --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-size-10: 1.125rem;
+  --sizes-size-11: 1.25rem;
+  --sizes-size-12: 1.375rem;
+  --sizes-size-13: 1.5rem;
+  --sizes-size-14: 1.625rem;
+  --sizes-size-15: 1.75rem;
+  --sizes-size-16: 1.875rem;
+  --sizes-size-17: 2rem;
+  --sizes-size-18: 2.125rem;
+  --sizes-size-19: 2.25rem;
+  --sizes-size-20: 2.375rem;
+  --sizes-size-21: 2.5rem;
+
+  --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),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  --shadows-shadow-md: 0px 4px -1px 0px rgba(0, 0, 0, 0.1),
+    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadows-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  --Button--sm-paddingX: #{px2rem(8px)};
+  --button-default-default-shadow: 0px 0px 0px 0px transparent;
+  --button-default-default-font-color: #151b26;
+  --button-default-default-bg-color: transparent;
+  --button-default-default-top-border-color: #e8e9eb;
+  --button-default-default-top-border-style: solid;
+  --button-default-default-top-border-width: 1px;
+  --button-default-default-right-border-color: #e8e9eb;
+  --button-default-default-right-border-style: solid;
+  --button-default-default-right-border-width: 1px;
+  --button-default-default-bottom-border-color: #e8e9eb;
+  --button-default-default-bottom-border-style: solid;
+  --button-default-default-bottom-border-width: 1px;
+  --button-default-default-left-border-color: #e8e9eb;
+  --button-default-default-left-border-style: solid;
+  --button-default-default-left-border-width: 1px;
+  --button-default-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-default-hover-font-color: #2468f2;
+  --button-default-hover-bg-color: transparent;
+  --button-default-hover-top-border-color: #2468f2;
+  --button-default-hover-top-border-style: solid;
+  --button-default-hover-top-border-width: 1px;
+  --button-default-hover-right-border-color: #2468f2;
+  --button-default-hover-right-border-style: solid;
+  --button-default-hover-right-border-width: 1px;
+  --button-default-hover-bottom-border-color: #2468f2;
+  --button-default-hover-bottom-border-style: solid;
+  --button-default-hover-bottom-border-width: 1px;
+  --button-default-hover-left-border-color: #2468f2;
+  --button-default-hover-left-border-style: solid;
+  --button-default-hover-left-border-width: 1px;
+  --button-default-active-shadow: 0px 0px 0px 0px transparent;
+  --button-default-active-font-color: #144bcc;
+  --button-default-active-bg-color: transparent;
+  --button-default-active-top-border-color: #144bcc;
+  --button-default-active-top-border-style: solid;
+  --button-default-active-top-border-width: 1px;
+  --button-default-active-right-border-color: #144bcc;
+  --button-default-active-right-border-style: solid;
+  --button-default-active-right-border-width: 1px;
+  --button-default-active-bottom-border-color: #144bcc;
+  --button-default-active-bottom-border-style: solid;
+  --button-default-active-bottom-border-width: 1px;
+  --button-default-active-left-border-color: #144bcc;
+  --button-default-active-left-border-style: solid;
+  --button-default-active-left-border-width: 1px;
+  --button-default-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-default-disabled-font-color: #b8babf;
+  --button-default-disabled-bg-color: #f7f8fa;
+  --button-default-disabled-top-border-color: #e8e9eb;
+  --button-default-disabled-top-border-style: solid;
+  --button-default-disabled-top-border-width: 1px;
+  --button-default-disabled-right-border-color: #e8e9eb;
+  --button-default-disabled-right-border-style: solid;
+  --button-default-disabled-right-border-width: 1px;
+  --button-default-disabled-bottom-border-color: #e8e9eb;
+  --button-default-disabled-bottom-border-style: solid;
+  --button-default-disabled-bottom-border-width: 1px;
+  --button-default-disabled-left-border-color: #e8e9eb;
+  --button-default-disabled-left-border-style: solid;
+  --button-default-disabled-left-border-width: 1px;
+  --button-primary-default-shadow: 0px 0px 0px 0px transparent;
+  --button-primary-default-font-color: #ffffff;
+  --button-primary-default-bg-color: #2468f2;
+  --button-primary-default-top-border-color: #2468f2;
+  --button-primary-default-top-border-style: solid;
+  --button-primary-default-top-border-width: 1px;
+  --button-primary-default-right-border-color: #2468f2;
+  --button-primary-default-right-border-style: solid;
+  --button-primary-default-right-border-width: 1px;
+  --button-primary-default-bottom-border-color: #2468f2;
+  --button-primary-default-bottom-border-style: solid;
+  --button-primary-default-bottom-border-width: 1px;
+  --button-primary-default-left-border-color: #2468f2;
+  --button-primary-default-left-border-style: solid;
+  --button-primary-default-left-border-width: 1px;
+  --button-primary-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-primary-hover-font-color: #ffffff;
+  --button-primary-hover-bg-color: #528eff;
+  --button-primary-hover-top-border-color: #528eff;
+  --button-primary-hover-top-border-style: solid;
+  --button-primary-hover-top-border-width: 1px;
+  --button-primary-hover-right-border-color: #528eff;
+  --button-primary-hover-right-border-style: solid;
+  --button-primary-hover-right-border-width: 1px;
+  --button-primary-hover-bottom-border-color: #528eff;
+  --button-primary-hover-bottom-border-style: solid;
+  --button-primary-hover-bottom-border-width: 1px;
+  --button-primary-hover-left-border-color: #528eff;
+  --button-primary-hover-left-border-style: solid;
+  --button-primary-hover-left-border-width: 1px;
+  --button-primary-active-shadow: 0px 0px 0px 0px transparent;
+  --button-primary-active-font-color: #ffffff;
+  --button-primary-active-bg-color: #144bcc;
+  --button-primary-active-top-border-color: #144bcc;
+  --button-primary-active-top-border-style: solid;
+  --button-primary-active-top-border-width: 1px;
+  --button-primary-active-right-border-color: #144bcc;
+  --button-primary-active-right-border-style: solid;
+  --button-primary-active-right-border-width: 1px;
+  --button-primary-active-bottom-border-color: #144bcc;
+  --button-primary-active-bottom-border-style: solid;
+  --button-primary-active-bottom-border-width: 1px;
+  --button-primary-active-left-border-color: #144bcc;
+  --button-primary-active-left-border-style: solid;
+  --button-primary-active-left-border-width: 1px;
+  --button-primary-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-primary-disabled-font-color: #b8babf;
+  --button-primary-disabled-bg-color: var(--colors-neutral-fill-10);
+  --button-primary-disabled-top-border-color: #e8e9eb;
+  --button-primary-disabled-top-border-style: solid;
+  --button-primary-disabled-top-border-width: 1px;
+  --button-primary-disabled-right-border-color: #e8e9eb;
+  --button-primary-disabled-right-border-style: solid;
+  --button-primary-disabled-right-border-width: 1px;
+  --button-primary-disabled-bottom-border-color: #e8e9eb;
+  --button-primary-disabled-bottom-border-style: solid;
+  --button-primary-disabled-bottom-border-width: 1px;
+  --button-primary-disabled-left-border-color: #e8e9eb;
+  --button-primary-disabled-left-border-style: solid;
+  --button-primary-disabled-left-border-width: 1px;
+  --button-secondary-default-shadow: 0px 0px 0px 0px transparent;
+  --button-secondary-default-font-color: #ffffff;
+  --button-secondary-default-bg-color: #b8babf;
+  --button-secondary-default-top-border-color: #b8babf;
+  --button-secondary-default-top-border-style: solid;
+  --button-secondary-default-top-border-width: 1px;
+  --button-secondary-default-right-border-color: #b8babf;
+  --button-secondary-default-right-border-style: solid;
+  --button-secondary-default-right-border-width: 1px;
+  --button-secondary-default-bottom-border-color: #b8babf;
+  --button-secondary-default-bottom-border-style: solid;
+  --button-secondary-default-bottom-border-width: 1px;
+  --button-secondary-default-left-border-color: #b8babf;
+  --button-secondary-default-left-border-style: solid;
+  --button-secondary-default-left-border-width: 1px;
+  --button-secondary-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-secondary-hover-font-color: #ffffff;
+  --button-secondary-hover-bg-color: #84878c;
+  --button-secondary-hover-top-border-color: #84878c;
+  --button-secondary-hover-top-border-style: solid;
+  --button-secondary-hover-top-border-width: 1px;
+  --button-secondary-hover-right-border-color: #84878c;
+  --button-secondary-hover-right-border-style: solid;
+  --button-secondary-hover-right-border-width: 1px;
+  --button-secondary-hover-bottom-border-color: #84878c;
+  --button-secondary-hover-bottom-border-style: solid;
+  --button-secondary-hover-bottom-border-width: 1px;
+  --button-secondary-hover-left-border-color: #84878c;
+  --button-secondary-hover-left-border-style: solid;
+  --button-secondary-hover-left-border-width: 1px;
+  --button-secondary-active-shadow: 0px 0px 0px 0px transparent;
+  --button-secondary-active-font-color: #ffffff;
+  --button-secondary-active-bg-color: #5c5f66;
+  --button-secondary-active-top-border-color: #5c5f66;
+  --button-secondary-active-top-border-style: solid;
+  --button-secondary-active-top-border-width: 1px;
+  --button-secondary-active-right-border-color: #5c5f66;
+  --button-secondary-active-right-border-style: solid;
+  --button-secondary-active-right-border-width: 1px;
+  --button-secondary-active-bottom-border-color: #5c5f66;
+  --button-secondary-active-bottom-border-style: solid;
+  --button-secondary-active-bottom-border-width: 1px;
+  --button-secondary-active-left-border-color: #5c5f66;
+  --button-secondary-active-left-border-style: solid;
+  --button-secondary-active-left-border-width: 1px;
+  --button-secondary-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-secondary-disabled-font-color: #b8babf;
+  --button-secondary-disabled-bg-color: #f7f8fa;
+  --button-secondary-disabled-top-border-color: #e8e9eb;
+  --button-secondary-disabled-top-border-style: solid;
+  --button-secondary-disabled-top-border-width: 1px;
+  --button-secondary-disabled-right-border-color: #e8e9eb;
+  --button-secondary-disabled-right-border-style: solid;
+  --button-secondary-disabled-right-border-width: 1px;
+  --button-secondary-disabled-bottom-border-color: #e8e9eb;
+  --button-secondary-disabled-bottom-border-style: solid;
+  --button-secondary-disabled-bottom-border-width: 1px;
+  --button-secondary-disabled-left-border-color: #e8e9eb;
+  --button-secondary-disabled-left-border-style: solid;
+  --button-secondary-disabled-left-border-width: 1px;
+  --button-enhance-default-shadow: 0px 0px 0px 0px transparent;
+  --button-enhance-default-font-color: #2468f2;
+  --button-enhance-default-bg-color: #ffffff;
+  --button-enhance-default-top-border-color: #2468f2;
+  --button-enhance-default-top-border-style: solid;
+  --button-enhance-default-top-border-width: 1px;
+  --button-enhance-default-right-border-color: #2468f2;
+  --button-enhance-default-right-border-style: solid;
+  --button-enhance-default-right-border-width: 1px;
+  --button-enhance-default-bottom-border-color: #2468f2;
+  --button-enhance-default-bottom-border-style: solid;
+  --button-enhance-default-bottom-border-width: 1px;
+  --button-enhance-default-left-border-color: #2468f2;
+  --button-enhance-default-left-border-style: solid;
+  --button-enhance-default-left-border-width: 1px;
+  --button-enhance-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-enhance-hover-font-color: #528eff;
+  --button-enhance-hover-bg-color: #ffffff;
+  --button-enhance-hover-top-border-color: #528eff;
+  --button-enhance-hover-top-border-style: solid;
+  --button-enhance-hover-top-border-width: 1px;
+  --button-enhance-hover-right-border-color: #528eff;
+  --button-enhance-hover-right-border-style: solid;
+  --button-enhance-hover-right-border-width: 1px;
+  --button-enhance-hover-bottom-border-color: #528eff;
+  --button-enhance-hover-bottom-border-style: solid;
+  --button-enhance-hover-bottom-border-width: 1px;
+  --button-enhance-hover-left-border-color: #528eff;
+  --button-enhance-hover-left-border-style: solid;
+  --button-enhance-hover-left-border-width: 1px;
+  --button-enhance-active-shadow: 0px 0px 0px 0px transparent;
+  --button-enhance-active-font-color: #144bcc;
+  --button-enhance-active-bg-color: #ffffff;
+  --button-enhance-active-top-border-color: #144bcc;
+  --button-enhance-active-top-border-style: solid;
+  --button-enhance-active-top-border-width: 1px;
+  --button-enhance-active-right-border-color: #144bcc;
+  --button-enhance-active-right-border-style: solid;
+  --button-enhance-active-right-border-width: 1px;
+  --button-enhance-active-bottom-border-color: #144bcc;
+  --button-enhance-active-bottom-border-style: solid;
+  --button-enhance-active-bottom-border-width: 1px;
+  --button-enhance-active-left-border-color: #144bcc;
+  --button-enhance-active-left-border-style: solid;
+  --button-enhance-active-left-border-width: 1px;
+  --button-enhance-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-enhance-disabled-font-color: #b8babf;
+  --button-enhance-disabled-bg-color: var(--colors-neutral-fill-10);
+  --button-enhance-disabled-top-border-color: #e8e9eb;
+  --button-enhance-disabled-top-border-style: solid;
+  --button-enhance-disabled-top-border-width: 1px;
+  --button-enhance-disabled-right-border-color: #e8e9eb;
+  --button-enhance-disabled-right-border-style: solid;
+  --button-enhance-disabled-right-border-width: 1px;
+  --button-enhance-disabled-bottom-border-color: #e8e9eb;
+  --button-enhance-disabled-bottom-border-style: solid;
+  --button-enhance-disabled-bottom-border-width: 1px;
+  --button-enhance-disabled-left-border-color: #e8e9eb;
+  --button-enhance-disabled-left-border-style: solid;
+  --button-enhance-disabled-left-border-width: 1px;
+  --button-info-default-shadow: 0px 0px 0px 0px transparent;
+  --button-info-default-font-color: #ffffff;
+  --button-info-default-bg-color: #2468f2;
+  --button-info-default-top-border-color: #2468f2;
+  --button-info-default-top-border-style: solid;
+  --button-info-default-top-border-width: 1px;
+  --button-info-default-right-border-color: #2468f2;
+  --button-info-default-right-border-style: solid;
+  --button-info-default-right-border-width: 1px;
+  --button-info-default-bottom-border-color: #2468f2;
+  --button-info-default-bottom-border-style: solid;
+  --button-info-default-bottom-border-width: 1px;
+  --button-info-default-left-border-color: #2468f2;
+  --button-info-default-left-border-style: solid;
+  --button-info-default-left-border-width: 1px;
+  --button-info-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-info-hover-font-color: #ffffff;
+  --button-info-hover-bg-color: #528eff;
+  --button-info-hover-top-border-color: #528eff;
+  --button-info-hover-top-border-style: solid;
+  --button-info-hover-top-border-width: 1px;
+  --button-info-hover-right-border-color: #528eff;
+  --button-info-hover-right-border-style: solid;
+  --button-info-hover-right-border-width: 1px;
+  --button-info-hover-bottom-border-color: #528eff;
+  --button-info-hover-bottom-border-style: solid;
+  --button-info-hover-bottom-border-width: 1px;
+  --button-info-hover-left-border-color: #528eff;
+  --button-info-hover-left-border-style: solid;
+  --button-info-hover-left-border-width: 1px;
+  --button-info-active-shadow: 0px 0px 0px 0px transparent;
+  --button-info-active-font-color: #ffffff;
+  --button-info-active-bg-color: #144bcc;
+  --button-info-active-top-border-color: #144bcc;
+  --button-info-active-top-border-style: solid;
+  --button-info-active-top-border-width: 1px;
+  --button-info-active-right-border-color: #144bcc;
+  --button-info-active-right-border-style: solid;
+  --button-info-active-right-border-width: 1px;
+  --button-info-active-bottom-border-color: #144bcc;
+  --button-info-active-bottom-border-style: solid;
+  --button-info-active-bottom-border-width: 1px;
+  --button-info-active-left-border-color: #144bcc;
+  --button-info-active-left-border-style: solid;
+  --button-info-active-left-border-width: 1px;
+  --button-info-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-info-disabled-font-color: #b8babf;
+  --button-info-disabled-bg-color: #f7f8fa;
+  --button-info-disabled-top-border-color: #e8e9eb;
+  --button-info-disabled-top-border-style: solid;
+  --button-info-disabled-top-border-width: 1px;
+  --button-info-disabled-right-border-color: #e8e9eb;
+  --button-info-disabled-right-border-style: solid;
+  --button-info-disabled-right-border-width: 1px;
+  --button-info-disabled-bottom-border-color: #e8e9eb;
+  --button-info-disabled-bottom-border-style: solid;
+  --button-info-disabled-bottom-border-width: 1px;
+  --button-info-disabled-left-border-color: #e8e9eb;
+  --button-info-disabled-left-border-style: solid;
+  --button-info-disabled-left-border-width: 1px;
+  --button-success-default-shadow: 0px 0px 0px 0px transparent;
+  --button-success-default-font-color: #ffffff;
+  --button-success-default-bg-color: #30bf13;
+  --button-success-default-top-border-color: #30bf13;
+  --button-success-default-top-border-style: solid;
+  --button-success-default-top-border-width: 1px;
+  --button-success-default-right-border-color: #30bf13;
+  --button-success-default-right-border-style: solid;
+  --button-success-default-right-border-width: 1px;
+  --button-success-default-bottom-border-color: #30bf13;
+  --button-success-default-bottom-border-style: solid;
+  --button-success-default-bottom-border-width: 1px;
+  --button-success-default-left-border-color: #30bf13;
+  --button-success-default-left-border-style: solid;
+  --button-success-default-left-border-width: 1px;
+  --button-success-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-success-hover-font-color: #ffffff;
+  --button-success-hover-bg-color: #54cc39;
+  --button-success-hover-top-border-color: #54cc39;
+  --button-success-hover-top-border-style: solid;
+  --button-success-hover-top-border-width: 1px;
+  --button-success-hover-right-border-color: #54cc39;
+  --button-success-hover-right-border-style: solid;
+  --button-success-hover-right-border-width: 1px;
+  --button-success-hover-bottom-border-color: #54cc39;
+  --button-success-hover-bottom-border-style: solid;
+  --button-success-hover-bottom-border-width: 1px;
+  --button-success-hover-left-border-color: #54cc39;
+  --button-success-hover-left-border-style: solid;
+  --button-success-hover-left-border-width: 1px;
+  --button-success-active-shadow: 0px 0px 0px 0px transparent;
+  --button-success-active-font-color: #ffffff;
+  --button-success-active-bg-color: #1b9908;
+  --button-success-active-top-border-color: #1b9908;
+  --button-success-active-top-border-style: solid;
+  --button-success-active-top-border-width: 1px;
+  --button-success-active-right-border-color: #1b9908;
+  --button-success-active-right-border-style: solid;
+  --button-success-active-right-border-width: 1px;
+  --button-success-active-bottom-border-color: #1b9908;
+  --button-success-active-bottom-border-style: solid;
+  --button-success-active-bottom-border-width: 1px;
+  --button-success-active-left-border-color: #1b9908;
+  --button-success-active-left-border-style: solid;
+  --button-success-active-left-border-width: 1px;
+  --button-success-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-success-disabled-font-color: #b8babf;
+  --button-success-disabled-bg-color: #f7f8fa;
+  --button-success-disabled-top-border-color: #e8e9eb;
+  --button-success-disabled-top-border-style: solid;
+  --button-success-disabled-top-border-width: 1px;
+  --button-success-disabled-right-border-color: #e8e9eb;
+  --button-success-disabled-right-border-style: solid;
+  --button-success-disabled-right-border-width: 1px;
+  --button-success-disabled-bottom-border-color: #e8e9eb;
+  --button-success-disabled-bottom-border-style: solid;
+  --button-success-disabled-bottom-border-width: 1px;
+  --button-success-disabled-left-border-color: #e8e9eb;
+  --button-success-disabled-left-border-style: solid;
+  --button-success-disabled-left-border-width: 1px;
+  --button-warning-default-shadow: 0px 0px 0px 0px transparent;
+  --button-warning-default-font-color: #ffffff;
+  --button-warning-default-bg-color: #ff9326;
+  --button-warning-default-top-border-color: #ff9326;
+  --button-warning-default-top-border-style: solid;
+  --button-warning-default-top-border-width: 1px;
+  --button-warning-default-right-border-color: #ff9326;
+  --button-warning-default-right-border-style: solid;
+  --button-warning-default-right-border-width: 1px;
+  --button-warning-default-bottom-border-color: #ff9326;
+  --button-warning-default-bottom-border-style: solid;
+  --button-warning-default-bottom-border-width: 1px;
+  --button-warning-default-left-border-color: #ff9326;
+  --button-warning-default-left-border-style: solid;
+  --button-warning-default-left-border-width: 1px;
+  --button-warning-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-warning-hover-font-color: #ffffff;
+  --button-warning-hover-bg-color: #ffab52;
+  --button-warning-hover-top-border-color: #ffab52;
+  --button-warning-hover-top-border-style: solid;
+  --button-warning-hover-top-border-width: 1px;
+  --button-warning-hover-right-border-color: #ffab52;
+  --button-warning-hover-right-border-style: solid;
+  --button-warning-hover-right-border-width: 1px;
+  --button-warning-hover-bottom-border-color: #ffab52;
+  --button-warning-hover-bottom-border-style: solid;
+  --button-warning-hover-bottom-border-width: 1px;
+  --button-warning-hover-left-border-color: #ffab52;
+  --button-warning-hover-left-border-style: solid;
+  --button-warning-hover-left-border-width: 1px;
+  --button-warning-active-shadow: 0px 0px 0px 0px transparent;
+  --button-warning-active-font-color: #ffffff;
+  --button-warning-active-bg-color: #d97116;
+  --button-warning-active-top-border-color: #d97116;
+  --button-warning-active-top-border-style: solid;
+  --button-warning-active-top-border-width: 1px;
+  --button-warning-active-right-border-color: #d97116;
+  --button-warning-active-right-border-style: solid;
+  --button-warning-active-right-border-width: 1px;
+  --button-warning-active-bottom-border-color: #d97116;
+  --button-warning-active-bottom-border-style: solid;
+  --button-warning-active-bottom-border-width: 1px;
+  --button-warning-active-left-border-color: #d97116;
+  --button-warning-active-left-border-style: solid;
+  --button-warning-active-left-border-width: 1px;
+  --button-warning-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-warning-disabled-font-color: #b8babf;
+  --button-warning-disabled-bg-color: #f7f8fa;
+  --button-warning-disabled-top-border-color: #e8e9eb;
+  --button-warning-disabled-top-border-style: solid;
+  --button-warning-disabled-top-border-width: 1px;
+  --button-warning-disabled-right-border-color: #e8e9eb;
+  --button-warning-disabled-right-border-style: solid;
+  --button-warning-disabled-right-border-width: 1px;
+  --button-warning-disabled-bottom-border-color: #e8e9eb;
+  --button-warning-disabled-bottom-border-style: solid;
+  --button-warning-disabled-bottom-border-width: 1px;
+  --button-warning-disabled-left-border-color: #e8e9eb;
+  --button-warning-disabled-left-border-style: solid;
+  --button-warning-disabled-left-border-width: 1px;
+  --button-danger-default-shadow: 0px 0px 0px 0px transparent;
+  --button-danger-default-font-color: #ffffff;
+  --button-danger-default-bg-color: #f23d3d;
+  --button-danger-default-top-border-color: #f23d3d;
+  --button-danger-default-top-border-style: none;
+  --button-danger-default-top-border-width: 0px;
+  --button-danger-default-right-border-color: #f23d3d;
+  --button-danger-default-right-border-style: none;
+  --button-danger-default-right-border-width: 0px;
+  --button-danger-default-bottom-border-color: #f23d3d;
+  --button-danger-default-bottom-border-style: none;
+  --button-danger-default-bottom-border-width: 0px;
+  --button-danger-default-left-border-color: #f23d3d;
+  --button-danger-default-left-border-style: none;
+  --button-danger-default-left-border-width: 0px;
+  --button-danger-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-danger-hover-font-color: #ffffff;
+  --button-danger-hover-bg-color: #ff6966;
+  --button-danger-hover-top-border-color: #ff6966;
+  --button-danger-hover-top-border-style: none;
+  --button-danger-hover-top-border-width: 0px;
+  --button-danger-hover-right-border-color: #ff6966;
+  --button-danger-hover-right-border-style: none;
+  --button-danger-hover-right-border-width: 0px;
+  --button-danger-hover-bottom-border-color: #ff6966;
+  --button-danger-hover-bottom-border-style: none;
+  --button-danger-hover-bottom-border-width: 0px;
+  --button-danger-hover-left-border-color: #ff6966;
+  --button-danger-hover-left-border-style: none;
+  --button-danger-hover-left-border-width: 0px;
+  --button-danger-active-shadow: 0px 0px 0px 0px transparent;
+  --button-danger-active-font-color: #ffffff;
+  --button-danger-active-bg-color: #cc292e;
+  --button-danger-active-top-border-color: #cc292e;
+  --button-danger-active-top-border-style: none;
+  --button-danger-active-top-border-width: 0px;
+  --button-danger-active-right-border-color: #cc292e;
+  --button-danger-active-right-border-style: none;
+  --button-danger-active-right-border-width: 0px;
+  --button-danger-active-bottom-border-color: #cc292e;
+  --button-danger-active-bottom-border-style: none;
+  --button-danger-active-bottom-border-width: 0px;
+  --button-danger-active-left-border-color: #cc292e;
+  --button-danger-active-left-border-style: none;
+  --button-danger-active-left-border-width: 0px;
+  --button-danger-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-danger-disabled-font-color: #b8babf;
+  --button-danger-disabled-bg-color: #f7f8fa;
+  --button-danger-disabled-top-border-color: #e8e9eb;
+  --button-danger-disabled-top-border-style: solid;
+  --button-danger-disabled-top-border-width: 1px;
+  --button-danger-disabled-right-border-color: #e8e9eb;
+  --button-danger-disabled-right-border-style: solid;
+  --button-danger-disabled-right-border-width: 1px;
+  --button-danger-disabled-bottom-border-color: #e8e9eb;
+  --button-danger-disabled-bottom-border-style: solid;
+  --button-danger-disabled-bottom-border-width: 1px;
+  --button-danger-disabled-left-border-color: #e8e9eb;
+  --button-danger-disabled-left-border-style: solid;
+  --button-danger-disabled-left-border-width: 1px;
+  --button-light-default-shadow: 0px 0px 0px 0px transparent;
+  --button-light-default-font-color: #151b26;
+  --button-light-default-bg-color: #e6f0ff;
+  --button-light-default-top-border-color: #e6f0ff;
+  --button-light-default-top-border-style: solid;
+  --button-light-default-top-border-width: 1px;
+  --button-light-default-right-border-color: #e6f0ff;
+  --button-light-default-right-border-style: solid;
+  --button-light-default-right-border-width: 1px;
+  --button-light-default-bottom-border-color: #e6f0ff;
+  --button-light-default-bottom-border-style: solid;
+  --button-light-default-bottom-border-width: 1px;
+  --button-light-default-left-border-color: #e6f0ff;
+  --button-light-default-left-border-style: solid;
+  --button-light-default-left-border-width: 1px;
+  --button-light-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-light-hover-font-color: #151b26;
+  --button-light-hover-bg-color: #d4e5ff;
+  --button-light-hover-top-border-color: #d4e5ff;
+  --button-light-hover-top-border-style: solid;
+  --button-light-hover-top-border-width: 1px;
+  --button-light-hover-right-border-color: #d4e5ff;
+  --button-light-hover-right-border-style: solid;
+  --button-light-hover-right-border-width: 1px;
+  --button-light-hover-bottom-border-color: #d4e5ff;
+  --button-light-hover-bottom-border-style: solid;
+  --button-light-hover-bottom-border-width: 1px;
+  --button-light-hover-left-border-color: #d4e5ff;
+  --button-light-hover-left-border-style: solid;
+  --button-light-hover-left-border-width: 1px;
+  --button-light-active-shadow: 0px 0px 0px 0px transparent;
+  --button-light-active-font-color: #151b26;
+  --button-light-active-bg-color: #a8caff;
+  --button-light-active-top-border-color: #a8caff;
+  --button-light-active-top-border-style: solid;
+  --button-light-active-top-border-width: 1px;
+  --button-light-active-right-border-color: #a8caff;
+  --button-light-active-right-border-style: solid;
+  --button-light-active-right-border-width: 1px;
+  --button-light-active-bottom-border-color: #a8caff;
+  --button-light-active-bottom-border-style: solid;
+  --button-light-active-bottom-border-width: 1px;
+  --button-light-active-left-border-color: #a8caff;
+  --button-light-active-left-border-style: solid;
+  --button-light-active-left-border-width: 1px;
+  --button-light-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-light-disabled-font-color: #b8babf;
+  --button-light-disabled-bg-color: #f7f8fa;
+  --button-light-disabled-top-border-color: #e8e9eb;
+  --button-light-disabled-top-border-style: solid;
+  --button-light-disabled-top-border-width: 1px;
+  --button-light-disabled-right-border-color: #e8e9eb;
+  --button-light-disabled-right-border-style: solid;
+  --button-light-disabled-right-border-width: 1px;
+  --button-light-disabled-bottom-border-color: #e8e9eb;
+  --button-light-disabled-bottom-border-style: solid;
+  --button-light-disabled-bottom-border-width: 1px;
+  --button-light-disabled-left-border-color: #e8e9eb;
+  --button-light-disabled-left-border-style: solid;
+  --button-light-disabled-left-border-width: 1px;
+  --button-dark-default-shadow: 0px 0px 0px 0px transparent;
+  --button-dark-default-font-color: #ffffff;
+  --button-dark-default-bg-color: #303540;
+  --button-dark-default-top-border-color: #303540;
+  --button-dark-default-top-border-style: solid;
+  --button-dark-default-top-border-width: 1px;
+  --button-dark-default-right-border-color: #303540;
+  --button-dark-default-right-border-style: solid;
+  --button-dark-default-right-border-width: 1px;
+  --button-dark-default-bottom-border-color: #303540;
+  --button-dark-default-bottom-border-style: solid;
+  --button-dark-default-bottom-border-width: 1px;
+  --button-dark-default-left-border-color: #303540;
+  --button-dark-default-left-border-style: solid;
+  --button-dark-default-left-border-width: 1px;
+  --button-dark-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-dark-hover-font-color: #ffffff;
+  --button-dark-hover-bg-color: #5c5f66;
+  --button-dark-hover-top-border-color: #5c5f66;
+  --button-dark-hover-top-border-style: solid;
+  --button-dark-hover-top-border-width: 1px;
+  --button-dark-hover-right-border-color: #5c5f66;
+  --button-dark-hover-right-border-style: solid;
+  --button-dark-hover-right-border-width: 1px;
+  --button-dark-hover-bottom-border-color: #5c5f66;
+  --button-dark-hover-bottom-border-style: solid;
+  --button-dark-hover-bottom-border-width: 1px;
+  --button-dark-hover-left-border-color: #5c5f66;
+  --button-dark-hover-left-border-style: solid;
+  --button-dark-hover-left-border-width: 1px;
+  --button-dark-active-shadow: 0px 0px 0px 0px transparent;
+  --button-dark-active-font-color: #ffffff;
+  --button-dark-active-bg-color: #84878c;
+  --button-dark-active-top-border-color: #84878c;
+  --button-dark-active-top-border-style: solid;
+  --button-dark-active-top-border-width: 1px;
+  --button-dark-active-right-border-color: #84878c;
+  --button-dark-active-right-border-style: solid;
+  --button-dark-active-right-border-width: 1px;
+  --button-dark-active-bottom-border-color: #84878c;
+  --button-dark-active-bottom-border-style: solid;
+  --button-dark-active-bottom-border-width: 1px;
+  --button-dark-active-left-border-color: #84878c;
+  --button-dark-active-left-border-style: solid;
+  --button-dark-active-left-border-width: 1px;
+  --button-dark-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-dark-disabled-font-color: #b8babf;
+  --button-dark-disabled-bg-color: #f7f8fa;
+  --button-dark-disabled-top-border-color: #e8e9eb;
+  --button-dark-disabled-top-border-style: solid;
+  --button-dark-disabled-top-border-width: 1px;
+  --button-dark-disabled-right-border-color: #e8e9eb;
+  --button-dark-disabled-right-border-style: solid;
+  --button-dark-disabled-right-border-width: 1px;
+  --button-dark-disabled-bottom-border-color: #e8e9eb;
+  --button-dark-disabled-bottom-border-style: solid;
+  --button-dark-disabled-bottom-border-width: 1px;
+  --button-dark-disabled-left-border-color: #e8e9eb;
+  --button-dark-disabled-left-border-style: solid;
+  --button-dark-disabled-left-border-width: 1px;
+  --button-link-default-shadow: 0px 0px 0px 0px transparent;
+  --button-link-default-font-color: #2468f2;
+  --button-link-default-bg-color: transparent;
+  --button-link-default-top-border-color: transparent;
+  --button-link-default-top-border-style: none;
+  --button-link-default-top-border-width: 0px;
+  --button-link-default-right-border-color: transparent;
+  --button-link-default-right-border-style: none;
+  --button-link-default-right-border-width: 0px;
+  --button-link-default-bottom-border-color: transparent;
+  --button-link-default-bottom-border-style: none;
+  --button-link-default-bottom-border-width: 0px;
+  --button-link-default-left-border-color: transparent;
+  --button-link-default-left-border-style: none;
+  --button-link-default-left-border-width: 0px;
+  --button-link-hover-shadow: 0px 0px 0px 0px transparent;
+  --button-link-hover-font-color: #528eff;
+  --button-link-hover-bg-color: transparent;
+  --button-link-hover-top-border-color: transparent;
+  --button-link-hover-top-border-style: none;
+  --button-link-hover-top-border-width: 0px;
+  --button-link-hover-right-border-color: transparent;
+  --button-link-hover-right-border-style: none;
+  --button-link-hover-right-border-width: 0px;
+  --button-link-hover-bottom-border-color: transparent;
+  --button-link-hover-bottom-border-style: none;
+  --button-link-hover-bottom-border-width: 0px;
+  --button-link-hover-left-border-color: transparent;
+  --button-link-hover-left-border-style: none;
+  --button-link-hover-left-border-width: 0px;
+  --button-link-active-shadow: 0px 0px 0px 0px transparent;
+  --button-link-active-font-color: #144bcc;
+  --button-link-active-bg-color: transparent;
+  --button-link-active-top-border-color: transparent;
+  --button-link-active-top-border-style: none;
+  --button-link-active-top-border-width: 0px;
+  --button-link-active-right-border-color: transparent;
+  --button-link-active-right-border-style: none;
+  --button-link-active-right-border-width: 0px;
+  --button-link-active-bottom-border-color: transparent;
+  --button-link-active-bottom-border-style: none;
+  --button-link-active-bottom-border-width: 0px;
+  --button-link-active-left-border-color: transparent;
+  --button-link-active-left-border-style: none;
+  --button-link-active-left-border-width: 0px;
+  --button-link-disabled-shadow: 0px 0px 0px 0px transparent;
+  --button-link-disabled-font-color: #b8babf;
+  --button-link-disabled-bg-color: transparent;
+  --button-link-disabled-top-border-color: transparent;
+  --button-link-disabled-top-border-style: none;
+  --button-link-disabled-top-border-width: 0px;
+  --button-link-disabled-right-border-color: transparent;
+  --button-link-disabled-right-border-style: none;
+  --button-link-disabled-right-border-width: 0px;
+  --button-link-disabled-bottom-border-color: transparent;
+  --button-link-disabled-bottom-border-style: none;
+  --button-link-disabled-bottom-border-width: 0px;
+  --button-link-disabled-left-border-color: transparent;
+  --button-link-disabled-left-border-style: none;
+  --button-link-disabled-left-border-width: 0px;
+  --button-size-default-height: 32px;
+  --button-size-default-minWidth: auto;
+  --button-size-default-paddingTop: 4px;
+  --button-size-default-paddingBottom: 4px;
+  --button-size-default-paddingLeft: 12px;
+  --button-size-default-paddingRight: 12px;
+  --button-size-default-marginTop: 0px;
+  --button-size-default-marginBottom: 0px;
+  --button-size-default-marginLeft: 0px;
+  --button-size-default-marginRight: 0px;
+  --button-size-default-icon-size: 14px;
+  --button-size-default-icon-margin: 4px;
+  --button-size-default-font-size: 14px;
+  --button-size-default-font-weight: 400;
+  --button-size-default-font-lineHeight: 1;
+  --button-size-default-font-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;
+  --button-size-default-top-right-border-radius: 4px;
+  --button-size-default-top-left-border-radius: 4px;
+  --button-size-default-bottom-right-border-radius: 4px;
+  --button-size-default-bottom-left-border-radius: 4px;
+  --button-size-xs-height: 22px;
+  --button-size-xs-minWidth: auto;
+  --button-size-xs-paddingTop: 2px;
+  --button-size-xs-paddingBottom: 2px;
+  --button-size-xs-paddingLeft: 4px;
+  --button-size-xs-paddingRight: 4px;
+  --button-size-xs-marginTop: 0px;
+  --button-size-xs-marginBottom: 0px;
+  --button-size-xs-marginLeft: 0px;
+  --button-size-xs-marginRight: 0px;
+  --button-size-xs-icon-size: 14px;
+  --button-size-xs-icon-margin: 4px;
+  --button-size-xs-font-size: 12px;
+  --button-size-xs-font-weight: 400;
+  --button-size-xs-font-lineHeight: 1.5;
+  --button-size-xs-font-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;
+  --button-size-xs-top-right-border-radius: 4px;
+  --button-size-xs-top-left-border-radius: 4px;
+  --button-size-xs-bottom-right-border-radius: 4px;
+  --button-size-xs-bottom-left-border-radius: 4px;
+  --button-size-sm-height: 30px;
+  --button-size-sm-minWidth: auto;
+  --button-size-sm-paddingTop: 4px;
+  --button-size-sm-paddingBottom: 4px;
+  --button-size-sm-paddingLeft: 8px;
+  --button-size-sm-paddingRight: 8px;
+  --button-size-sm-marginTop: 0px;
+  --button-size-sm-marginBottom: 0px;
+  --button-size-sm-marginLeft: 0px;
+  --button-size-sm-marginRight: 0px;
+  --button-size-sm-icon-size: 14px;
+  --button-size-sm-icon-margin: 4px;
+  --button-size-sm-font-size: 12px;
+  --button-size-sm-font-weight: 400;
+  --button-size-sm-font-lineHeight: 1.5;
+  --button-size-sm-font-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;
+  --button-size-sm-top-right-border-radius: 4px;
+  --button-size-sm-top-left-border-radius: 4px;
+  --button-size-sm-bottom-right-border-radius: 4px;
+  --button-size-sm-bottom-left-border-radius: 4px;
+  --button-size-md-height: 32px;
+  --button-size-md-minWidth: auto;
+  --button-size-md-paddingTop: 4px;
+  --button-size-md-paddingBottom: 4px;
+  --button-size-md-paddingLeft: 12px;
+  --button-size-md-paddingRight: 12px;
+  --button-size-md-marginTop: 0px;
+  --button-size-md-marginBottom: 0px;
+  --button-size-md-marginLeft: 0px;
+  --button-size-md-marginRight: 0px;
+  --button-size-md-icon-size: 14px;
+  --button-size-md-icon-margin: 4px;
+  --button-size-md-font-size: 14px;
+  --button-size-md-font-weight: 400;
+  --button-size-md-font-lineHeight: 1;
+  --button-size-md-font-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;
+  --button-size-md-top-right-border-radius: 4px;
+  --button-size-md-top-left-border-radius: 4px;
+  --button-size-md-bottom-right-border-radius: 4px;
+  --button-size-md-bottom-left-border-radius: 4px;
+  --button-size-lg-height: 38px;
+  --button-size-lg-minWidth: auto;
+  --button-size-lg-paddingTop: 8px;
+  --button-size-lg-paddingBottom: 8px;
+  --button-size-lg-paddingLeft: 16px;
+  --button-size-lg-paddingRight: 16px;
+  --button-size-lg-marginTop: 0px;
+  --button-size-lg-marginBottom: 0px;
+  --button-size-lg-marginLeft: 0px;
+  --button-size-lg-marginRight: 0px;
+  --button-size-lg-icon-size: 14px;
+  --button-size-lg-icon-margin: 4px;
+  --button-size-lg-font-size: 14px;
+  --button-size-lg-font-weight: 400;
+  --button-size-lg-font-lineHeight: 1;
+  --button-size-lg-font-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;
+  --button-size-lg-top-right-border-radius: 4px;
+  --button-size-lg-top-left-border-radius: 4px;
+  --button-size-lg-bottom-right-border-radius: 4px;
+  --button-size-lg-bottom-left-border-radius: 4px;
+  --transfer-base-title-bg: #f7f8fa;
+  --transfer-base-title-font-size: 14px;
+  --transfer-base-title-font-weight: 400;
+  --transfer-base-title-font-lineHeight: 1.5;
+  --transfer-base-title-font-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;
+  --transfer-base-title-font-color: #151b26;
+  --transfer-base-content-font-size: 14px;
+  --transfer-base-content-font-weight: 400;
+  --transfer-base-content-font-lineHeight: 1.5;
+  --transfer-base-content-font-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;
+  --transfer-base-content-font-color: #151b26;
+  --transfer-base-top-border-color: #e8e9eb;
+  --transfer-base-top-border-style: solid;
+  --transfer-base-top-border-width: 1px;
+  --transfer-base-right-border-color: #e8e9eb;
+  --transfer-base-right-border-style: solid;
+  --transfer-base-right-border-width: 1px;
+  --transfer-base-bottom-border-color: #e8e9eb;
+  --transfer-base-bottom-border-style: solid;
+  --transfer-base-bottom-border-width: 1px;
+  --transfer-base-left-border-color: #e8e9eb;
+  --transfer-base-left-border-style: solid;
+  --transfer-base-left-border-width: 1px;
+  --transfer-base-top-right-border-radius: 4px;
+  --transfer-base-top-left-border-radius: 4px;
+  --transfer-base-bottom-right-border-radius: 2px;
+  --transfer-base-bottom-left-border-radius: 2px;
+  --transfer-base-header-paddingTop: 6px;
+  --transfer-base-header-paddingBottom: 6px;
+  --transfer-base-header-paddingLeft: 12px;
+  --transfer-base-header-paddingRight: 12px;
+  --transfer-base-header-marginTop: 0px;
+  --transfer-base-header-marginBottom: 0px;
+  --transfer-base-header-marginLeft: 0px;
+  --transfer-base-header-marginRight: 0px;
+  --transfer-base-content-font-size: 14px;
+  --transfer-base-content-font-weight: 400;
+  --transfer-base-content-font-lineHeight: 1.5;
+  --transfer-base-content-font-family: inherit;
+  --transfer-base-content-font-color: #151b26;
+  --transfer-base-body-paddingTop: 0px;
+  --transfer-base-body-paddingBottom: 0px;
+  --transfer-base-body-paddingLeft: 0px;
+  --transfer-base-body-paddingRight: 0px;
+  --transfer-base-body-marginTop: 0px;
+  --transfer-base-body-marginBottom: 0px;
+  --transfer-base-body-marginLeft: 0px;
+  --transfer-base-body-marginRight: 0px;
+  --transfer-base-option-paddingTop: 6px;
+  --transfer-base-option-paddingBottom: 6px;
+  --transfer-base-option-paddingLeft: 12px;
+  --transfer-base-option-paddingRight: 12px;
+  --transfer-base-option-marginTop: 0px;
+  --transfer-base-option-marginBottom: 0px;
+  --transfer-base-option-marginLeft: 0px;
+  --transfer-base-option-marginRight: 0px;
+  --transfer-base-shadow: 0px 0px 0px 0px transparent;
+  --transfer-search-font-size: 14px;
+  --transfer-search-font-weight: 400;
+  --transfer-search-font-lineHeight: 1.5;
+  --transfer-search-font-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;
+  --transfer-search-font-color: #151b26;
+  --transfer-search-placeholder-font-color: #b8babf;
+  --transfer-search-top-border-color: #e8e9eb;
+  --transfer-search-top-border-style: solid;
+  --transfer-search-top-border-width: 1px;
+  --transfer-search-right-border-color: #e8e9eb;
+  --transfer-search-right-border-style: solid;
+  --transfer-search-right-border-width: 1px;
+  --transfer-search-bottom-border-color: #e8e9eb;
+  --transfer-search-bottom-border-style: solid;
+  --transfer-search-bottom-border-width: 1px;
+  --transfer-search-left-border-color: #e8e9eb;
+  --transfer-search-left-border-style: solid;
+  --transfer-search-left-border-width: 1px;
+  --transfer-search-top-right-border-radius: 4px;
+  --transfer-search-top-left-border-radius: 4px;
+  --transfer-search-bottom-right-border-radius: 4px;
+  --transfer-search-bottom-left-border-radius: 4px;
+  --transfer-search-border-hover-color: #144bcc;
+  --transfer-search-border-active-color: #144bcc;
+  --transfer-search-paddingTop: 8px;
+  --transfer-search-paddingBottom: 8px;
+  --transfer-search-paddingLeft: 8px;
+  --transfer-search-paddingRight: 8px;
+  --transfer-search-marginTop: 0px;
+  --transfer-search-marginBottom: 0px;
+  --transfer-search-marginLeft: 0px;
+  --transfer-search-marginRight: 0px;
+  --transfer-search-input-paddingTop: 4px;
+  --transfer-search-input-paddingBottom: 4px;
+  --transfer-search-input-paddingLeft: 10px;
+  --transfer-search-input-paddingRight: 10px;
+  --transfer-search-input-marginTop: 0px;
+  --transfer-search-input-marginBottom: 0px;
+  --transfer-search-input-marginLeft: 0px;
+  --transfer-search-input-marginRight: 0px;
+  --transfer-search-shadow: 0px 0px 0px 0px transparent;
+  --transfer-group-font-size: 14px;
+  --transfer-group-font-weight: 400;
+  --transfer-group-font-lineHeight: 1.5;
+  --transfer-group-font-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;
+  --transfer-group-font-color: #84878c;
+  --transfer-table-header-paddingTop: 6px;
+  --transfer-table-header-paddingBottom: 6px;
+  --transfer-table-header-paddingLeft: 10px;
+  --transfer-table-header-paddingRight: 10px;
+  --transfer-table-header-marginTop: 0px;
+  --transfer-table-header-marginBottom: 0px;
+  --transfer-table-header-marginLeft: 0px;
+  --transfer-table-header-marginRight: 0px;
+  --transfer-table-option-paddingTop: 4px;
+  --transfer-table-option-paddingBottom: 6px;
+  --transfer-table-option-paddingLeft: 10px;
+  --transfer-table-option-paddingRight: 10px;
+  --transfer-table-option-marginTop: 0px;
+  --transfer-table-option-marginBottom: auto;
+  --transfer-table-option-marginLeft: 0px;
+  --transfer-table-option-marginRight: 0px;
+  --transfer-table-last-paddingRight: 16px;
+  --transfer-tree-bg-hover-color: #f7f8fa;
+  --transfer-tree-bg-active-color: #e6f0ff;
+  --transfer-tree-top-right-border-radius: 2px;
+  --transfer-tree-top-left-border-radius: 2px;
+  --transfer-tree-bottom-right-border-radius: 2px;
+  --transfer-tree-bottom-left-border-radius: 2px;
+  --transfer-tree-paddingTop: 2px;
+  --transfer-tree-paddingBottom: 2px;
+  --transfer-tree-paddingLeft: 10px;
+  --transfer-tree-paddingRight: 10px;
+  --transfer-tree-marginTop: 0px;
+  --transfer-tree-marginBottom: auto;
+  --transfer-tree-marginLeft: 0px;
+  --transfer-tree-marginRight: 0px;
+  --transfer-tree-option-paddingTop: 0px;
+  --transfer-tree-option-paddingBottom: 0px;
+  --transfer-tree-option-paddingLeft: 8px;
+  --transfer-tree-option-paddingRight: 0px;
+  --transfer-tree-option-marginTop: 0px;
+  --transfer-tree-option-marginBottom: 4px;
+  --transfer-tree-option-marginLeft: 0px;
+  --transfer-tree-option-marginRight: 0px;
+  --transfer-chained-paddingTop: 6px;
+  --transfer-chained-paddingBottom: 6px;
+  --transfer-chained-paddingLeft: 8px;
+  --transfer-chained-paddingRight: 8px;
+  --transfer-chained-marginTop: 0px;
+  --transfer-chained-marginBottom: 0px;
+  --transfer-chained-marginLeft: 0px;
+  --transfer-chained-marginRight: 0px;
+}
 
 :root {
-  --fontSizeXs: #{$T1};
-  --fontSizeSm: #{$T2};
-  --fontSizeMd: #{$T3};
-  --fontSizeLg: #{$T4};
-  --fontSizeXl: #{$T5};
-  --fontSizeBase: var(--fontSizeMd);
-
-  --borderColor: #{$G8};
-  --borderRadius: #{$R3};
-  --body-bg: #ffffff;
-  --text-color: #151b26;
-
-  --text--muted-color: #{$G6};
-  --text--loud-color: #333;
+  --fontSizeXs: var(--fonts-size-8);
+  --fontSizeSm: var(--fonts-size-8);
+  --fontSizeMd: var(--fonts-size-7);
+  --fontSizeLg: var(--fonts-size-6);
+  --fontSizeXl: var(--fonts-size-5);
+  --fontSizeBase: var(--fonts-size-7);
+
+  --borderColor: var(--colors-neutral-line-8);
+  --borderRadius: var(--borders-radius-3);
+  --body-bg: var(--colors-neutral-fill-11);
+  --text-color: var(--colors-neutral-text-2);
+
+  --text--muted-color: var(--colors-neutral-text-6);
+
+  --text--loud-color: var(--colors-neutral-text-2);
   --link-onHover-decoration: none;
 
-  --icon-color: #999;
-  --icon-onHover-color: var(--primary);
+  --icon-color: var(--colors-neutral-text-5);
+  --icon-onHover-color: var(--colors-brand-6);
+  --icon-onDisabled-color: var(--colors-neutral-text-10);
 
   --Layout-header-boxShadow: none;
   --Layout-header-bg: #f5f5f5;
@@ -104,50 +1136,52 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Layout-aside-bg: #1e1e28;
   --Layout-aside-subList-bg: #1e1e28;
   --Layout-brand-bg: #0f1012;
-  --Layout-brand-color: #fff;
+  --Layout-brand-color: var(--colors-neutral-text-11);
   --Layout-asideLink-iconColor: rgba(255, 255, 255, 0.6);
-  --Layout-asideLink-color: #fff;
-  --Layout-asideLink-onHover-color: var(--primary);
-  --Layout-asideLink-onActive-color: var(--primary);
+  --Layout-asideLink-color: var(--colors-neutral-text-11);
+  --Layout-asideLink-onHover-color: var(--colors-brand-6);
+  --Layout-asideLink-onActive-color: var(--colors-brand-4);
   --Layout-asideLink-onHover-iconSize: #{px2rem(16px)};
-  --Layout-asideLink-onHover-iconColor: var(--primary);
-  --Layout-asideLink-fontSize: #{px2rem(12px)};
-  --Layout-asideLink-arrowFontSize: #{px2rem(12px)};
+  --Layout-asideLink-onHover-iconColor: var(--colors-brand-6);
+  --Layout-asideLink-fontSize: var(--fonts-size-8);
+  --Layout-asideLink-arrowFontSize: var(--fonts-size-8);
   --Layout-asideLink-arrowColor: #8d99b0;
-  --Layout-asideLink-onHover-arrowColor: #fff;
+  --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
   --Layout-headerBar-borderBottom: 0 none;
   --Layout-asideDivider-margin: 0 #{px2rem(10px)};
   --Layout-asideDivider-bg: #3c3c4d;
-  --Layout-nav--folded-height: #{px2rem(40px)};
+  --Layout-nav--folded-height: var(--sizes-size-21);
 
-  --Page-aside-bg: #ffffff;
+  --Page-aside-bg: var(--colors-neutral-fill-11);
   --Page-aside-width: #{px2rem(160px)};
-  --Page-content-paddingY: 0;
-  --Page-content-paddingX: 0;
-  --Page-main-bg: #fff;
-  --Page-title-color: #000;
-  --Page-header-paddingX: var(--gap-md);
-  --Page-header-paddingY: #{px2rem(10px)};
+  --Page-content-paddingY: var(--sizes-size-0);
+  --Page-content-paddingX: var(--sizes-size-0);
+  --Page-main-bg: var(--colors-neutral-fill-11);
+  --Page-title-color: var(--colors-neutral-text-2);
+  --Page-header-paddingX: var(--sizes-size-9);
+  --Page-header-paddingY: var(--sizes-size-6);
   --Form-item-fontSize: var(--fontSizeBase);
-  --Form-input-marginBottom: #{px2rem(4px)};
-  --Form-item-fontColor: #{$G4};
-  --Form-item-gap: var(--gap-xl);
-  --Form-input-bg: #{$G11};
-  --Form-input-color: #{$G2};
-  --Form-input-height: #{px2rem(32px)};
+  --Form-input-marginBottom: var(--sizes-size-3);
+  --Form-item-fontColor: var(--colors-neutral-text-4);
+  --Form-item-gap: var(--sizes-size-13);
+  --Form-input-bg: var(--colors-neutral-fill-11);
+  --Form-input-color: var(--colors-neutral-text-2);
+  --Form-input-height: var(--sizes-size-17);
   // --Form-input-lineHeight: #{px2rem(32px)};
   --Form-input-borderColor: var(--borderColor);
-  --Form-input-borderRadius: #{$R3};
-  --Form-input-onHover-borderColor: #{$B6};
-  --Form-input-onFocused-bg: #{$G11};
-  --Form-input-onFocused-borderColor: #{$B7};
-  --Form-input-onError-borderColor: #{$E6};
-  --Form-input-onError-bg: #{$G11};
-  --Form-input-onDisabled-bg: #{$G10};
-  --Form-input-onDisabled-borderColor: #{$G8};
-  --Form-input-onDisabled-color: #{$G5};
-  --Form-input-iconColor: #{$G5};
-  --Form-input-paddingX: var(--gap-base);
+
+  --Form-input-borderRadius: var(--borders-radius-3);
+  --Form-input-onHover-borderColor: var(--colors-brand-5);
+  --Form-input-onFocused-bg: var(--colors-neutral-fill-11);
+  --Form-input-onFocused-borderColor: var(--colors-brand-4);
+  --Form-input-onError-borderColor: var(--colors-error-5);
+  --Form-input-onError-bg: var(--colors-neutral-fill-11);
+  --Form-input-onDisabled-bg: var(--colors-neutral-fill-10);
+  --Form-input-onDisabled-borderColor: var(--colors-neutral-line-8);
+  --Form-input-onDisabled-color: var(--colors-neutral-text-5);
+  --Form-input-iconColor: var(--colors-neutral-text-5);
+  --Form-input-paddingX: var(--sizes-size-6);
+
   --Form-description-color: #999;
   --Form--horizontal-label-whiteSpace: normal;
   --Form--horizontal-label-widthXs: #{px2rem(50px)};
@@ -155,248 +1189,176 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form--horizontal-label-widthBase: #{px2rem(100px)};
   --Form--horizontal-label-widthMd: #{px2rem(140px)};
   --Form--horizontal-label-widthLg: #{px2rem(190px)};
-  --Form-input-addOnBg: var(--white);
+  --Form-input-addOnBg: var(--colors-neutral-fill-11);
   --Form-input-addOnColor: #666;
-  --Form-input-onFocus-addOnColor: var(--primary);
-  --Form-input-addOnDividerBorderWidth: 0;
-  --Form-input-clearBtn-color: #{$G7};
-  --Form-input-clearBtn-color-onHover: #{$G4};
-  --Form-input-clearBtn-color-onActive: #{$G3};
-
-  --Form-select-borderWidth: #{px2rem(1px)};
-  --Form-select-borderRadius: #{$R3};
-  --Form-select-bg: var(--white);
-  --Form-select-onHover-bg: var(--white);
-  --Form-select-onHover-borderColor: var(--primary);
+  --Form-input-onFocus-addOnColor: var(--colors-brand-5);
+  --Form-input-addOnDividerBorderWidth: var(--borders-radius-1);
+  --Form-input-clearBtn-color: var(--colors-neutral-text-7);
+  --Form-input-clearBtn-color-onHover: var(--colors-neutral-text-4);
+  --Form-input-clearBtn-color-onActive: var(--colors-neutral-text-3);
+  --Form-input-password-icon-size: var(--sizes-size-9);
+  --Form-input-password-icon-color: var(--colors-neutral-text-5);
+
+  --Form-select-borderWidth: var(--borders-width-2);
+  --Form-select-borderRadius: var(--borders-radius-3);
+  --Form-select-bg: var(--colors-neutral-fill-11);
+  --Form-select-onHover-bg: var(--colors-neutral-fill-11);
+  --Form-select-onHover-borderColor: var(--colors-brand-5);
   --Form-select-placeholderColor: #999;
-  --Form-select-color: #000;
-  --Form-select-caret-iconColor: #{$G5};
-  --Form-select-caret-onHover-iconColor: #{$G5};
-  --Form-select-caret-fontSize: #{px2rem(12px)};
-  --Form-select-outer-borderWidth: 0;
-  --Form-select-outer-top: #{px2rem(32px)};
+  --Form-select-color: var(--colors-neutral-text-2);
+  --Form-select-caret-iconColor: var(--colors-neutral-text-5);
+  --Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
+  --Form-select-caret-fontSize: var(--fonts-size-8);
+  --Form-select-outer-borderWidth: var(--borders-width-1);
+  --Form-select-outer-top: var(--sizes-size-17);
   --Form-select-outer-boxShadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
-  --Form-select-menu-color: #{$G2};
-  --Form-select-menu-onHover-color: #{$G2};
-  --Form-select-menu-onHover-bg: #{$B1};
-  --Form-select-menu-onActive-color: #{$B6};
-  --Form-select-menu-height: #{px2rem(24px)};
-  --Form-select-popoverGap: #{$R3};
-  --Form-select-search-height: #{px2rem(30px)};
-  --Form-selectValue-color: var(--primary);
-  --Form-select-value-borderColor: #{$G9};
-  --Form-select-valueIcon-color: #{$G4};
-  --Form-select-valueIcon-color--dark: #{$G8};
-  --Form-select-multiple-bgColor: #{$G10};
-  --Form-select-value-bgColor--dark: #{$G4};
-  --Form-selectValue-onDisabled-color: #{$G6};
-
-  --InputGroup-select-borderWidth: #{px2rem(1px)};
+  --Form-select-menu-color: var(--colors-neutral-text-2);
+  --Form-select-menu-onHover-color: var(--colors-neutral-text-2);
+  --Form-select-menu-onHover-bg: var(--colors-brand-10);
+  --Form-select-menu-onActive-color: var(--colors-brand-5);
+  --Form-select-menu-height: var(--sizes-size-13);
+  --Form-select-popoverGap: var(--borders-radius-3);
+  --Form-select-search-height: var(--sizes-size-16);
+  --Form-selectValue-color: var(--colors-brand-5);
+  --Form-select-value-borderColor: var(--colors-neutral-line-9);
+  --Form-select-valueIcon-color: var(--colors-neutral-text-4);
+  --Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
+  --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
+  --Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
+
+  --InputGroup-select-borderWidth: var(--borders-width-2);
   --InputGroup-select-onFocused-bg: #eaf6fe;
   --InputGroup-select-color: #333;
-  --InputGroup-select-onFocused-color: var(--primary);
+  --InputGroup-select-onFocused-color: var(--colors-brand-5);
   --InputGroup-select-arrowColor: #999;
-  --InputGroup-select-onFocused-arrowColor: var(--primary);
-  --InputGroup-button-borderWidth: #{px2rem(1px)};
-  --InputGroup-button-borderRadius: #{$R3};
+  --InputGroup-select-onFocused-arrowColor: var(--colors-brand-5);
+  --InputGroup-button-borderWidth: var(--borders-width-2);
+  --InputGroup-button-borderRadius: var(--borders-radius-3);
 
   // $Number-bg: #eaf6fe;
-  --Number-borderWidth: #{px2rem(1px)};
+  --Number-borderWidth: var(--borders-width-2);
 
-  --Number-handler-borderBottom: 0;
-  --Number-handler-width: var(--gap-xl);
-  --Number-borderColor: #{$G7};
+  --Number-handler-borderBottom: var(--borders-width-1);
+  --Number-handler-width: var(--sizes-size-13);
+  --Number-borderColor: var(--colors-neutral-line-7);
   --Number-handler-color: #666;
   --Number-handler-onDisabled-color: #999;
   // $Number-handler-bg: var(--info);
-  --Number-handler-onHover-bg: var(--white);
-  --Number-handler-onHover-color: var(--primary);
+  --Number-handler-onHover-bg: var(--colors-neutral-fill-11);
+  --Number-handler-onHover-color: var(--colors-brand-5);
   --Number-handler-onActive-bg: #f3f9fe;
   --Number-handler-onDisabled-bg: #f5f5f5;
   --Number-handler-fontFamily: 'iconfont';
-  --Number-handler-fontSize: #{px2rem(12px)};
+  --Number-handler-fontSize: var(--fonts-size-8);
   --Number-handler--up-content: '\e6dd';
   --Number-handler--up-transform: rotate(180deg);
   --Number-handler--down-content: '\e6dd';
 
   --Checkbox-onDisabled-bg: #f7f7f9;
-  --Checkbox-onDisabled-color: #b8babf;
+  --Checkbox-onDisabled-color: var(--colors-neutral-text-6);
 
-  --Checkbox-inner-size: #{px2rem(8px)};
-  --Checkbox--full-inner-size: #{px2rem(8px)};
-  --Checkbox--sm-size: #{px2rem(14px)};
-  --Checkbox--sm-inner-size: #{px2rem(8px)};
-  --Checkbox--sm--full-inner-size: #{px2rem(8px)};
-  --Radio-size: #{px2rem(16px)};
-  --Radio-inner-size: #{px2rem(8px)};
+  --Checkbox-inner-size: var(--sizes-size-5);
+  --Checkbox--full-inner-size: var(--sizes-size-5);
+  --Checkbox--sm-size: var(--sizes-size-8);
+  --Checkbox--sm-inner-size: var(--sizes-size-5);
+  --Checkbox--sm--full-inner-size: var(--sizes-size-5);
+  --Radio-size: var(--sizes-size-9);
+  --Radio-inner-size: var(--sizes-size-5);
 
-  --Switch-height: #{px2rem(20px)};
+  --Switch-height: var(--sizes-size-11);
   --Switch-width: #{px2rem(44px)};
-  --Switch-valueColor: #{$G11};
-  --Switch-bgColor: #{$G7};
-  --Switch-onActive-bgColor: var(--primary);
-  --Switch-onHover-bgColor: #{$G6};
-  --Switch-checked-onHover-bgColor: #{$B7};
-  --Switch-checked-onActive-bgColor: #{$B7};
-  --Switch-onDisabled-bgColor: #{$B2};
-  --Switch-onDisabled-color: #{$G11};
-  // --Switch-onDisabled-circle-BackgroundColor: #fff;
-  --Switch-slider-margin: #{px2rem(2px)};
-  --Switch-slider-width: calc(
-    var(--Switch-height) - var(--Switch-slider-margin) * 2
-  );
-  --Switch-slider-transition: all 0.5s ease;
-  --Switch-text-margin: 0 px2rem(8px) 0 px2rem(25px);
+  --Switch-valueColor: var(--colors-neutral-text-11);
+  --Switch-bgColor: var(--colors-neutral-fill-7);
+  --Switch-onActive-bgColor: var(--colors-brand-5);
+  --Switch-onHover-bgColor: var(--colors-neutral-fill-6);
+  --Switch-checked-bgColor: var(--colors-brand-5);
+  --Switch-checked-onHover-bgColor: var(--colors-brand-4);
+  --Switch-checked-onActive-bgColor: var(--colors-brand-4);
+  --Switch-onDisabled-bgColor: var(--colors-brand-9);
+  --Switch-onDisabled-color: var(--colors-neutral-text-11);
+  // --Switch-onDisabled-circle-BackgroundColor: var(--colors-neutral-text-11);
 
   --Calendar-icon-bottom: #{px2rem(-4px)};
-  --Calendar-icon-width: #{px2rem(10px)};
-  --Calendar-icon-height: #{px2rem(10px)};
-  --Calendar-borderWidth: #{px2rem(1px)};
+  --Calendar-icon-width: var(--sizes-size-6);
+  --Calendar-icon-height: var(--sizes-size-6);
+  --Calendar-borderWidth: var(--borders-width-2);
+  --Calendar-borderColor: var(--colors-brand-5);
   --Calendar-rdt-day: #{px2rem(100px)};
-  --Calendar-schedule-content-padding: 0 #{px2rem(4px)};
-  --Calendar-schedule-content-height: #{px2rem(20px)};
-  --Calendar-schedule-content-color: #{$white};
-
-  --ColorPicker-borderWidth: #{px2rem(1px)};
-  --ColorPicker-borderRadius: #{$R3};
-  --ColorPicker-bg: var(--white);
-  --ColorPicker-onHover-bg: var(--white);
-  --ColorPicker-onHover-borderColor: var(--primary);
-  --ColorPicker-color: #000;
+  --Calendar-schedule-content-padding: 0 var(--sizes-size-3);
+  --Calendar-schedule-content-height: var(--sizes-size-11);
+  --Calendar-schedule-content-color: var(--colors-neutral-text-11);
+
+  --ColorPicker-borderWidth: var(--borders-width-2);
+  --ColorPicker-borderRadius: var(--borders-radius-3);
+  --ColorPicker-bg: var(--colors-neutral-fill-11);
+  --ColorPicker-onHover-bg: var(--colors-neutral-fill-11);
+  --ColorPicker-onHover-borderColor: var(--colors-brand-5);
+  --ColorPicker-color: var(--colors-neutral-text-2);
   --ColorPicker-placeholderColor: #999;
   --ColorPicker-onDisabled-bg: #f5f5f5;
   --ColorPicker-onDisabled-color: #999;
   --ColorPicker-boxShadow: #{$L1};
 
-  --Collapse-border: #{px2rem(1px)} solid #{$G8};
-  --Collapse-border-color: #{$G8};
-  --Collapse-header-fontSize: #{$T3};
-  --Collapse-header-fontWeight: #{$W2};
-  --Collapse-header-padding: #{px2rem(16px)};
-  --Collapse-header-bg: #{$G10};
-  --Collapse-header-onHover-bg: #{$G9};
-  --Collapse-header-bg-disabled-color: #{$G10};
+  --Collapse-border: var(--borders-width-2) solid var(--colors-neutral-line-8);
+  --Collapse-border-color: var(--colors-neutral-line-8);
+  --Collapse-header-fontSize: var(--fonts-size-7);
+  --Collapse-header-fontWeight: var(--fonts-weight-6);
+  --Collapse-header-padding: var(--sizes-size-9);
+  --Collapse-header-bg: var(--colors-neutral-fill-10);
+  --Collapse-header-onHover-bg: var(--colors-neutral-fill-9);
+  --Collapse-header-bg-disabled-color: var(--colors-neutral-fill-6);
   --Collapse-header-collapsed-borderBottom: none;
   --Collapse-header-wrapper-direction: row-reverse;
-  --Collapse-content-padding: #{px2rem(16px)};
-  --Collapse-content-color: #{$G4};
-  --Collapse-content-fontSize: #{$T2};
-  --Collapse-content-fontWeight: #{$W2};
-
-  --DatePicker-borderWidth: #{px2rem(1px)};
-  --DatePicker-borderRadius: #{$R3};
-  --DatePicker-bg: var(--white);
-  --DatePicker-onHover-bg: var(--white);
-  --DatePicker-color: #000;
+  --Collapse-content-padding: var(--sizes-size-9);
+  --Collapse-content-color: var(--colors-neutral-text-4);
+  --Collapse-content-fontSize: var(--fonts-size-8);
+  --Collapse-content-fontWeight: var(--fonts-weight-6);
+
+  --DatePicker-borderWidth: var(--borders-width-2);
+  --DatePicker-borderRadius: var(--borders-radius-3);
+  --DatePicker-bg: var(--colors-neutral-fill-11);
+  --DatePicker-onHover-bg: var(--colors-neutral-fill-11);
+  --DatePicker-onFocused-borderColor: var(--colors-brand-4);
+  --DatePicker-color: var(--colors-neutral-text-2);
   --DatePicker-placeholderColor: #999;
   --DatePicker-onDisabled-bg: #f5f5f5;
   --DatePicker-onDisabled-color: #999;
   --DatePicker-iconColor: #666;
-  --DatePicker-onHover-iconColor: var(--primary);
-  --DatePicker-onHover-borderColor: var(--primary);
+  --DatePicker-onHover-iconColor: var(--colors-brand-5);
+  --DatePicker-onHover-borderColor: var(--colors-brand-5);
 
-  --LocationPicker-borderRadius: #{$R3};
+  --LocationPicker-borderRadius: var(--borders-radius-3);
 
-  --Calendar-input-borderRadius: 0;
-  --Calendar-input-borderRadius: #{$R3};
+  --Calendar-input-borderRadius: var(--borders-radius-1);
+  --Calendar-input-borderRadius: var(--borders-radius-3);
   --Calendar-shortcuts-bg: #f5f5f5;
-  --Calendar-shortcuts-height: #{px2rem(30px)};
-
-  // button
-  --Button-borderWidth: #{px2rem(1px)};
-  --Button-boxShadow: none;
-  --Button-onActive-boxShadow: none;
-
-  --Button-borderRadius: #{$R3};
-
-  --Button-paddingX: #{px2rem(12px)};
-  --Button-icon-rightMargin: #{px2rem(4px)};
-
-  --Button--lg-height: #{px2rem(40px)};
-  --Button--lg-fontSize: #{px2rem(14px)};
-  --Button--lg-lineHeight: 30 / 20;
-  --Button--lg-paddingX: #{px2rem(16px)};
-
-  --Button--default-bg: #{$G11};
-  --Button--default-color: #{$G2};
-  --Button--default-onHover-bg: #{$G11};
-  --Button--default-onHover-border: var(--primary);
-  --Button--default-onHover-color: var(--primary);
-  --Button--default-onActive-bg: #{$G11};
-  --Button--default-onActive-border: #{$B7};
-  --Button--default-onActive-color: #{$B7};
-
-  --Button--emphasize-bg: #{$G11};
-  --Button--emphasize-color: var(--primary);
-  --Button--emphasize-onHover-bg: #{$G11};
-  --Button--emphasize-onHover-border: var(--primary);
-  --Button--emphasize-onHover-color: #{$B5};
-  --Button--emphasize-onActive-bg: #{$G11};
-  --Button--emphasize-onActive-border: #{$B7};
-  --Button--emphasize-onActive-color: #{$B7};
-
-  --Button--primary-bg: var(--primary);
-  --Button--primary-border: var(--primary);
-  --Button--primary-onHover-bg: #{$B5};
-  --Button--primary-onHover-border: #{$B5};
-  --Button--primary-onHover-color: #{$G11};
-  --Button--primary-onActive-bg: #{$B7};
-  --Button--primary-onActive-border: #{$B7};
-  --Button--primary-onActive-color: #{$G11};
-
-  --Button--light-border: var(--light);
-  --Button--light-color: var(--text-color);
-
-  --Button-onDisabled-borderColor: #{$G9};
-  --Button-onDisabled-opacity: 0.65;
-  --Button-onDisabled-bg: #{$G9};
-
-  // 这个颜色太奇怪了，先不用
-  // --Button--danger-bg: #{$E6};
-  // --Button--danger-onHover-bg: #{$E5};
-  // --Button--danger-onHover-border: #{$E5};
-  // --Button--danger-onActive-bg: #{$E7};
-  // --Button--danger-onActive-border: #{$E7};
-
-  --Button--danger-bg: #ea2e2e;
-  --Button--danger-onHover-bg: #f64545;
-  --Button--danger-onHover-border: #f64545;
-  --Button--danger-onActive-bg: #d72b2b;
-  --Button--danger-onActive-border: #d72b2b;
-
-  --ButtonGroup-divider-width: #{px2rem(1px)};
-  --ButtonGroup-divider-color: #fff;
-  --ButtonGroup--primary-isActive-color: var(--primary);
-  --ButtonGroup--primary-isActive-bg: #{$G11};
-
-  --Button--link-color: var(--primary);
-  --Button--link-onHover-color: #209bfd;
-
-  --Breadcrumb-item-default-color: #{$G5};
-  --Breadcrumb-item-hover-color: #{$B6};
-  --Breadcrumb-item-active-color: #{$B7};
-  --Breadcrumb-item-disabled-color: #{$G6};
-  --BreadcrumbDropdown-item-default-color: #{$G2};
-  --BreadcrumbDropdown-item-default-bg: #{$G11};
-  --BreadcrumbDropdown-item-hover-bg: #{$B1};
+  --Calendar-shortcuts-height: var(--sizes-size-9);
+
+  --Breadcrumb-item-default-color: var(--colors-neutral-text-5);
+  --Breadcrumb-item-hover-color: var(--colors-brand-5);
+  --Breadcrumb-item-active-color: var(--colors-brand-4);
+  --Breadcrumb-item-disabled-color: var(---colors-neutral-text-6);
+  --BreadcrumbDropdown-item-default-color: var(--colors-neutral-text-2);
+  --BreadcrumbDropdown-item-default-bg: var(--colors-neutral-text-11);
+  --BreadcrumbDropdown-item-hover-bg: var(--colors-brand-10);
 
   --Spinner-bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
 
-  --Crud-toolbar-gap: #{px2rem(10px)};
+  --Crud-toolbar-gap: var(--sizes-size-6);
 
   // Table
-  --Table-bg: #fff;
-  --Table-fontSize: #{px2rem(12px)};
+  --Table-bg: var(--colors-neutral-fill-11);
+  --Table-fontSize: var(--fonts-size-8);
   --Table-color: #333;
   --Table-thead-color: #333;
-  --Table-lineHeight: 20 / 12;
-  --Table-borderColor: #{$G8};
+  --Table-lineHeight: var(--fonts-lineHeight-2);
+  --Table-borderColor: var(--colors-neutral-line-8);
   --Table-tree-borderColor: #{darken(#f5f5f5, 10%)};
-  --Table-thead-bg: #{$G10};
-  --Table-thead-borderColor: #fff;
+  --Table-thead-bg: var(--colors-neutral-fill-10);
+  --Table-thead-borderColor: var(--colors-neutral-line-11);
   --Table-thead-iconColor: #999;
-  --Table-strip-bg: #{$Table-strip-bg};
-  --Table-onHover-bg: #{$B1};
+  --Table-strip-bg: var(--colors-neutral-fill-none);
+  --Table-onHover-bg: var(--colors-brand-10);
   --Table-onHover-bg-rgb: 245, 251, 255;
   --Table-onHover-borderColor: #eceff8;
   --Table-onChecked-bg: #f0faff;
@@ -405,290 +1367,307 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Table-onChecked-onHover-bg: #f5f5f5;
   --Table-onChecked-onHover-borderColor: #eceff8;
   --Table-onChecked-onHover-color: #666;
-  --Table-expandBtn-color: #{$G5};
-  --TableCell-paddingX: #{px2rem(10px)};
+  --Table-expandBtn-color: var(--colors-neutral-text-5);
+  --TableCell-paddingX: var(--sizes-size-6);
 
   --TableCell-sortBtn-width: #{px2rem(14px)};
 
-  --TableCell-filterPopOver-dropDownItem-height: #{px2rem(30px)};
-  --TableCell-filterPopOver-dropDownItem-padding: 0 #{px2rem(10px)};
+  --TableCell-filterPopOver-dropDownItem-height: var(--sizes-size-16);
+  --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0)
+    var(--sizes-size-6);
 
-  --TableRow-onDisabled-bg: #{$G10};
-  --TableRow-onDisabled-color: #{$G6};
+  --TableRow-onDisabled-bg: var(--colors-neutral-fill-10);
+  --TableRow-onDisabled-color: var(--colors-neutral-text-6);
 
   // listControl
-  --ListControl-item-borderWidth: #{px2rem(1px)};
-  --ListControl-item-borderRadius: #{$R3};
-  --ListControl-item-paddingX: #{px2rem(10px)};
+  --ListControl-item-borderWidth: var(--borders-width-2);
+  --ListControl-item-borderRadius: var(--borders-radius-3);
+  --ListControl-item-paddingX: var(--sizes-size-6);
   --ListControl-item-bg: var(--Button--default-bg);
   --ListControl-item-color: var(--Button--default-color);
 
-  --ListControl-item-onHover-color: var(--primary);
+  --ListControl-item-onHover-color: var(--colors-brand-5);
   --ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
-  --ListControl-item-onHover-borderColor: var(--primary);
+  --ListControl-item-onHover-borderColor: var(--colors-brand-5);
 
-  --ListControl-item-onActive-bg: #{$G11};
-  --ListControl-item-onActive-onHover-bg: #{$G11};
-  --ListControl-item-onActive-color: #{$B7};
-  --ListControl-item-onActive-borderColor: #{$B7};
-  --ListControl-item-onActive-before-bg: #{$B7};
-  --ListControl-item-onActive-after-borderColor: #{$G11};
+  --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
+  --ListControl-item-onActive-onHover-bg: var(--colors-neutral-fill-11);
+  --ListControl-item-onActive-color: var(--colors-brand-4);
+  --ListControl-item-onActive-borderColor: var(--colors-brand-4);
+  --ListControl-item-onActive-before-bg: var(--colors-brand-4);
+  --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
 
   --ListControl-item-onDisabled-opacity: 1;
-  --ListControl-item-onDisabled-bg: #{$G9};
-  --ListControl-item-onDisabled-color: #{$G6};
-  --ListControl-item-onDisabled-borderColor: #{$G9};
+  --ListControl-item-onDisabled-bg: var(--colors-neutral-fill-9);
+  --ListControl-item-onDisabled-color: var(--colors-neutral-text-6);
+  --ListControl-item-onDisabled-borderColor: var(--colors-neutral-line-9);
 
   // 图片上传
-  --ImageControl-addBtn-bg: #fff;
+  --ImageControl-addBtn-bg: var(--colors-neutral-fill-11);
   --ImageControl-addBtn-border: #dbdbdb;
-  --ImageControl-addBtn-borderRadius: #{$R3};
+  --ImageControl-addBtn-borderRadius: var(--borders-radius-3);
   --ImageControl-addBtn-color: #84868c;
   --ImageControl-addBtn-onHover-bg: var(--ImageControl-addBtn-bg);
-  --ImageControl-addBtn-onHover-border: var(--primary);
-  --ImageControl-addBtn-onHover-color: var(--primary);
+  --ImageControl-addBtn-onHover-border: var(--colors-brand-5);
+  --ImageControl-addBtn-onHover-color: var(--colors-brand-5);
   --ImageControl-addBtn-onActive-bg: #f3f9fe;
-  --ImageControl-addBtn-onActive-border: var(--primary);
-  --ImageControl-addBtn-onActive-color: var(--primary);
+  --ImageControl-addBtn-onActive-border: var(--colors-brand-5);
+  --ImageControl-addBtn-onActive-color: var(--colors-brand-5);
   --ImageControl-addBtn-onDisabled-bg: #f5f5f5;
   --ImageControl-addBtn-onDisabled-border: #ebebeb;
   --ImageControl-addBtn-onDisabled-color: #ccc;
-  --ImageControl-progress-borderRadius: #{$R2};
+  --ImageControl-progress-borderRadius: var(--borders-radius-2);
 
   // 文件上传
-  --FileControl-danger-color: #{$E6};
-  --FileControl-drag-color: #{$G3};
-  --FileControl-icon-onHover-color: #{$G4};
-  --FileControl-icon-color: #{$G5};
-  --FileControl-onDisabled-color: #{$G6};
-  --FileControl-border-color: #{$G8};
-  --FileControl-onHover-bg: #{$G9};
-  --FileControl-onDisabled-bg: #{$G10};
-  --FileControl-progress-borderRadius: #{$R2};
+  --FileControl-danger-color: var(--colors-error-5);
+  --FileControl-drag-color: var(--colors-neutral-text-3);
+  --FileControl-icon-onHover-color: var(--colors-neutral-text-4);
+  --FileControl-icon-color: var(--colors-neutral-text-5);
+  --FileControl-onDisabled-color: var(--colors-neutral-text-6);
+  --FileControl-border-color: var(--colors-neutral-line-8);
+  --FileControl-onHover-bg: var(--colors-neutral-fill-9);
+  --FileControl-onDisabled-bg: var(--colors-neutral-fill-10);
+  --FileControl-progress-borderRadius: var(--borders-radius-2);
 
   // Modal
-  --Modal-title-fontSize: #{$T3};
-  --Modal-title-color: #{$W3};
-  --Modal-title-fontWeight: #{$W3};
+  --Modal-title-fontSize: var(--fonts-size-7);
+  --Modal-title-color: var(--colors-neutral-text-2);
+  --Modal-title-fontWeight: 500;
   --Modal-overlay-bg: rgba(0, 0, 0, 0.7);
-  --Modal-content-borderWidth: 0;
-  --Modal-content-borderRadius: 0;
+  --Modal-content-borderWidth: var(--borders-width-1);
+  --Modal-content-borderRadius: var(--borders-radius-4);
   --Modal-content-minHeight: #{px2rem(193px)};
-  --Modal-header-bg: #fff;
-  --Modal-header-paddingY: 0;
-  --Modal-header-paddingX: 0;
+  --Modal-header-bg: var(--colors-neutral-fill-11);
+  --Modal-header-paddingY: var(--sizes-size-0);
+  --Modal-header-paddingX: var(--sizes-size-0);
   --Modal-title-color: #333;
-  --Modal-body-paddingY: var(--gap-md);
-  --Modal-body-paddingX: var(--gap-md);
-  --Modal-body-borderTop: none;
-  --Modal-body-borderBottom: none;
-  --Modal-footer-marginX: 0;
-  --Modal-footer-marginY: 0;
-  --Modal-footer-padding: 0;
+  --Modal-body-paddingY: var(--sizes-size-13);
+  --Modal-body-paddingX: var(--sizes-size-0);
+  --Modal-body-borderTop: var(--borders-style-1);
+  --Modal-body-borderBottom: var(--borders-style-1);
+  --Modal-footer-marginX: var(--sizes-size-0);
+  --Modal-footer-marginY: var(--sizes-size-0);
+  --Modal-footer-padding: var(--sizes-size-0);
 
   // Drawer
-  --Drawer-header-padding: #{px2rem(16px)} #{px2rem(24px)};
+  --Drawer-header-padding: var(--sizes-size-9) var(--sizes-size-13);
   --Drawer-widthBase: #{px2rem(400px)};
-  --Drawer-header-bg: #fff;
-  --Drawer-body-padding: #{px2rem(24px)};
+  --Drawer-header-bg: var(--colors-neutral-fill-11);
+  --Drawer-body-padding: var(--sizes-size-13);
+  --Drawer-footer-margin: var(--sizes-size-9);
 
   // Remark
-  --Remark-icon-fontSize: #{px2rem(12px)};
+  --Remark-icon-fontSize: var(--fonts-size-8);
   --Remark-iconColor: #999;
-  --Remark-onHover-iconColor: #fff;
-  --Remark-bg: #fff;
+  --Remark-onHover-iconColor: var(--colors-neutral-text-11);
+  --Remark-bg: var(--colors-neutral-fill-11);
   --Remark-onHover-bg: #f38900;
-  --Remark-borderWidth: #{px2rem(1px)};
+  --Remark-borderWidth: var(--borders-width-2);
   --Remark-borderColor: #999;
   --Remark-onHover-borderColor: #f38900;
 
   // Wizard
-  --Wizard-steps-bg: #fff;
-  --Wizard-steps-borderWidth: 0;
+  --Wizard-steps-bg: var(--colors-neutral-fill-11);
+  --Wizard-steps-borderWidth: var(--borders-width-1);
   --Wizard-steps-textAlign: center;
   --Wizard-steps-ulDisplay: inline-block;
   --Wizard-steps-height: #{px2rem(60px)};
-  --Wizard-steps-padding: #{px2rem(10)} 0;
+  --Wizard-steps-padding: var(--sizes-size-6) var(--sizes-size-0);
   --Wizard-steps-liVender: 'iconfont';
   --Wizard-steps-liAfterContent: '\e6ee';
 
   --Wizard-steps-li-onActive-color: #333333;
-  --Wizard-steps-bg--isComplete: #fff;
-  --Wizard-badge-size: #{px2rem(26px)};
+  --Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11);
+  --Wizard-badge-size: var(--sizes-size-14);
   --Wizard-badge-color: #999999;
   --Wizard-badge-onActive-backgroundColor: #333333;
   --Wizard-badge-onComplete-backgroundColor: #333333;
-  --Wizard-badge-fontSize: #{px2rem(14px)};
-  --Wizard-badge-border: #{px2rem(1px)} solid #999999;
-  --Wizard-badge-borderRadius: 50%;
-  --Wizard-badge-bg: var(--white);
-  --Wizard-badge-marginRight: #{px2rem(6px)};
+  --Wizard-badge-fontSize: var(--fonts-size-7);
+  --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2) #999999;
+  --Wizard-badge-borderRadius: var(--borders-radius-7);
+  --Wizard-badge-bg: var(--colors-neutral-fill-11);
+  --Wizard-badge-marginRight: var(--sizes-size-4);
 
   // Tabs
-  --Tabs-linkFontSize: #{px2rem(14px)};
-  --Tabs-link-disabled-color: #{$G6};
-  --Tabs--card-onActive-borderColor: var(--white);
-  --Tabs--card-bg: var(--Table-thead-bg);
-  --Tabs--radio-bg: var(--white);
+  --Tabs-linkFontSize: var(--fonts-size-7);
+  --Tabs-link-disabled-color: var(--colors-neutral-text-6);
+  --Tabs--card-onActive-borderColor: var(--colors-neutral-line-11);
+  --Tabs--card-bg: var(--colors-neutral-fill-10);
+  --Tabs--radio-bg: var(--colors-neutral-fill-11);
   --Tabs--chrome-onHover-bg: #fcfcfc;
   --Tabs--chrome-bg: #f5f5f5;
-  --Tabs--simple-split-color: #{$G9};
-  --Tabs--simple-split-size: var(--gap-xs) var(--gap-md);
-  --Tabs--sidebar-iconColor: #{$B6};
+  --Tabs--simple-split-color: var(--colors-neutral-text-8);
+  --Tabs--simple-split-size: var(--sizes-size-3) var(--sizes-size-9);
+  --Tabs--sidebar-iconColor: var(--colors-brand-5);
 
   // Pagination
-  --Pagination-fontSize: #{px2rem(12px)};
-  --Pagination-onActive-backgroundColor: var(--white);
-  --Pagination-onActive-color: var(--primary);
-  --Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);
+  --Pagination-fontSize: var(--fonts-size-8);
+  --Pagination-onActive-backgroundColor: var(--colors-neutral-fill-11);
+  --Pagination-onActive-color: var(--colors-brand-5);
+  --Pagination-onActive-border: var(--borders-width-2) var(--borders-style-2)
+    var(--colors-brand-5);
 
   // Panel
-  --Panel-borderRadius: #{$R3};
+  --Panel-borderRadius: var(--borders-radius-3);
   --Panel-fixedBottom-boxShadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.05);
   --Panel--default-bg: #f5f5f5;
 
   // Nav
-  --Nav-item-fontSize: #{px2rem(16px)};
-  --Nav-item-borderRadius: 0;
+  --Nav-item-fontSize: var(--fonts-size-6);
+  --Nav-item-borderRadius: var(--borders-radius-1);
   --Nav-item-onActive-bg: #f6f7fb;
-  --Nav-item-onActive-color: var(--primary);
-  --Nav-item-onActive-borderLeft: #{px2rem(3px)} solid var(--primary);
-  --Nav-subItem-fontSize: #{px2rem(12px)};
-  --Nav-subItem-onActiveBeforeBg: var(--primary);
+  --Nav-item-onActive-color: var(--colors-brand-5);
+  --Nav-item-onActive-borderLeft: var(--borders-width-4) var(--borders-style-2)
+    var(--colors-brand-5);
+  --Nav-subItem-fontSize: var(--fonts-size-8);
+  --Nav-subItem-onActiveBeforeBg: var(--colors-brand-5);
 
   // TransferSelect
-  --TransferSelect--table-heading-bg: var(--white);
+  --TransferSelect--table-heading-bg: var(--colors-neutral-fill-11);
   --TransferSelect--normal-heading-bg: #f6f7fb;
-  --TransferSelect-heading-borderBottom: 0;
+  --TransferSelect-heading-borderBottom: var(--borders-width-1);
 
   // Alert
-  --Alert-fontColor: #{$G2};
-  --Alert-title-fontColor: #{$G2};
 
-  --Alert-height: #{px2rem(40px)};
-  --Alert-paddingX: #{px2rem(16px)};
-  --Alert-fontSize: #{$T2};
-  --Alert-borderRadius: #{$R3};
-  --Alert-marginBottom: var(--gap-md);
+  --Alert-fontColor: var(--colors-neutral-text-4);
+  --Alert-title-fontColor: var(--colors-neutral-text-2);
 
-  --Alert--danger-color: #{$G2};
-  --Alert--danger-bg: #{$danger-bg};
-  --Alert--danger-borderColor: transparent;
+  --Alert-height: var(--sizes-size-21);
+  --Alert-paddingX: var(--sizes-size-9);
+  --Alert-fontSize: var(--fonts-size-8);
+  --Alert-borderRadius: var(--borders-radius-3);
+  --Alert-marginBottom: var(--sizes-size-9);
 
-  --Alert--info-color: #{$G2};
-  --Alert--info-bg: #{$info-bg};
-  --Alert--info-borderColor: transparent;
+  --Alert--danger-color: var(--colors-neutral-text-2);
+  --Alert--danger-bg: var(--colors-error-10);
+  --Alert--danger-borderColor: var(--colors-neutral-fill-none);
 
-  --Alert--success-color: #{$G2};
-  --Alert--success-bg: #{$success-bg};
-  --Alert--success-borderColor: transparent;
+  --Alert--info-color: var(--colors-neutral-text-2);
+  --Alert--info-bg: var(--colors-brand-10);
+  --Alert--info-borderColor: var(--colors-neutral-fill-none);
 
-  --Alert--warning-color: #{$G2};
-  --Alert--warning-bg: #{$warning-bg};
-  --Alert--warning-borderColor: transparent;
+  --Alert--success-color: var(--colors-neutral-text-2);
+  --Alert--success-bg: var(--colors-success-10);
+  --Alert--success-borderColor: var(--colors-neutral-fill-none);
+
+  --Alert--warning-color: var(--colors-neutral-text-2);
+  --Alert--warning-bg: var(--colors-warning-10);
+  --Alert--warning-borderColor: var(--colors-neutral-fill-none);
 
   // Toast size
   --Toast-width: #{px2rem(400px)};
-  --Toast-borderRadius: #{$R3};
-  --Toast-paddingL: #{px2rem(26px)};
-  --Toast-paddingX: #{px2rem(16px)};
-  --Toast--info-paddingL: 0;
-  --Toast-border-width: #{px2rem(1px)};
+  --Toast-borderRadius: var(--borders-radius-3);
+  --Toast-paddingL: var(--sizes-size-14);
+  --Toast-paddingX: var(--sizes-size-9);
+  --Toast--info-paddingL: var(--sizes-size-0);
+  --Toast-border-width: var(--borders-width-2);
   --Toast-opacity: 1;
   --Toast-title-display: inline;
 
   // Toast color
-  --Toast-color: var(--white);
+  --Toast-color: var(--colors-neutral-text-11);
 
-  --Toast--danger-color: #{$G2};
-  --Toast--danger-bgColor: #{$G11};
-  --Toast--danger-borderColor: #{$G11};
+  --Toast--danger-color: var(--colors-neutral-text-2);
+  --Toast--danger-bgColor: var(--colors-neutral-fill-11);
+  --Toast--danger-borderColor: var(--colors-neutral-line-11);
 
-  --Toast--info-color: #{$G2};
-  --Toast--info-bgColor: #{$G11};
-  --Toast--info-borderColor: #{$G11};
+  --Toast--info-color: var(--colors-neutral-text-2);
+  --Toast--info-bgColor: var(--colors-neutral-fill-11);
+  --Toast--info-borderColor: var(--colors-neutral-line-11);
 
-  --Toast--success-color: #{$G2};
-  --Toast--success-bgColor: #{$G11};
-  --Toast--success-borderColor: #{$G11};
+  --Toast--success-color: var(--colors-neutral-text-2);
+  --Toast--success-bgColor: var(--colors-neutral-fill-11);
+  --Toast--success-borderColor: var(--colors-neutral-line-11);
 
-  --Toast--warning-color: #{$G2};
-  --Toast--warning-bgColor: #{$G11};
-  --Toast--warning-borderColor: #{$G11};
+  --Toast--warning-color: var(--colors-neutral-text-2);
+  --Toast--warning-bgColor: var(--colors-neutral-fill-11);
+  --Toast--warning-borderColor: var(--colors-neutral-line-11);
 
   --Toast-close-color: var(--icon-color);
   --Toast-close--onHover-color: var(--icon-onHover-color);
 
-  --TagControl-sugTip-color: var(--primary);
+  --TagControl-sugTip-color: var(--colors-brand-5);
 
   // Card
   --Card-actions-borderColor: #{lighten(#eceff8, 2.5%)};
-  --Card-onChecked-bg: var(--white);
-  --Card-onChecked-borderColor: var(--primary);
-  --Card-onChecked-color: var(--primary);
+  --Card-onChecked-bg: var(--colors-neutral-fill-11);
+  --Card-onChecked-borderColor: var(--colors-brand-5);
+  --Card-onChecked-color: var(--colors-brand-5);
 
   --Card-onModified-bg: #e8f0fe;
-  --Card-onModified-borderColor: var(--primary);
+  --Card-onModified-borderColor: var(--colors-brand-5);
   --Card-onModified-color: #4285f4;
 
-  --Card-actions-onHover-bg: white;
-  --Card-actions-onHover-color: var(--primary);
-  --Card-actions-onChecked-onHover-bg: var(--white);
+  --Card-actions-onHover-bg: var(--colors-neutral-fill-11);
+  --Card-actions-onHover-color: var(--colors-brand-5);
+  --Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11);
 
-  --Card-actions-fontSize: #{px2rem(12px)};
+  --Card-actions-fontSize: var(--fonts-size-8);
 
   // Combo
-  --Combo--horizontal-dragger-top: var(--gap-xs);
+  --Combo-addBtn-height: #{px2rem(26px)};
+  --Combo-addBtn-bg: var(--colors-brand-5);
+  --Combo--horizontal-dragger-top: var(--sizes-size-3);
+  --Combo-addBtn-fontSize: var(--fonts-size-8);
+  --Combo-addBtn-borderRadius: var(--borderRadius);
+  --Combo-addBtn-color: var(--colors-neutral-text-11);
+  --Combo-addBtn-paddingY: calc(
+    (
+        var(--Combo-addBtn-height) - var(--Button-borderWidth) * 2 -
+          var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize)
+      ) / 2
+  );
 
   // ListMenu
-  --ListMenu-borderWidth: 0;
-  --ListMenu-borderRadius: 0;
-  --ListMenu-item-height: #{px2rem(30px)};
+  --ListMenu-borderWidth: var(--borders-width-1);
+  --ListMenu-borderRadius: var(--borders-radius-1);
+  --ListMenu-item-height: var(--sizes-size-16);
   --ListMenu-item-color: #333;
-  --ListMenu-item--onHover-color: #000;
+  --ListMenu-item--onHover-color: var(--colors-neutral-text-2);
   --ListMenu-item--onHover-bg: #eaf6fe;
   --ListItem--strip-bg: #f6f6f6;
-  --ListItem-onChecked-color: #0052cc;
-  --ListItem-onChecked-bg: #f0f6ff;
-  --ListItem-onChecked-borderColor: #0052cc;
-  --ListItem-onChecked-fieldLabel-color: #0052cc;
+  --ListItem-onChecked-color: var(--colors-brand-4);
+  --ListItem-onChecked-bg: var(--colors-brand-10);
+  --ListItem-onChecked-borderColor: var(--colors-brand-4);
+  --ListItem-onChecked-fieldLabel-color: var(--colors-brand-4);
 
   --Transfer-title-bg: #f7f7f9;
 
-  --Satus-icon-width: #{px2rem(14px)};
+  --Satus-icon-width: var(--sizes-size-8);
 
-  --Progress-borderRadius: #{$R7};
+  --Progress-borderRadius: 16px;
 
-  --Rating-inactive-color: #{$G8};
-  --Rating-text-color: #{$G2};
+  --Rating-inactive-color: var(--colors-neutral-text-9);
+  --Rating-text-color: var(--colors-neutral-text-2);
 
   // tree
-  --Tree-item-onHover-bg-pure: #{$G10};
+  --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
+  --Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10);
   --Tree-item-onChekced-bg: var(--Form-select-menu-onHover-bg);
-  --Tree-item-onChekced-bg-borderRadius: #{px2rem(2px)};
-  --Tree-itemHeight: #{px2rem(24px)};
-  --Tree-icon-gap: var(--gap-sm);
+  --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
+  --Tree-itemHeight: var(--sizes-size-13);
+  --Tree-icon-gap: var(--sizes-size-5);
 
   // Formula
-  --InputFormula-code-bgColor: #{$G10};
+  --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
 
   // ResultBox
-  --ResultBox-value-bg: #{$G10};
-  --ResultBox-value-clear-bg: #{$G8};
-  --ResultBox-value-clear-hover-bg: #{$G9};
+  --ResultBox-value-bg: var(--colors-neutral-fill-10);
+  --ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
+  --ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
 
   // SearchBox
-  --SearchBox-hover-color: #{$B6};
-  --SearchBox-focus-color: #{$B7};
-  --SearchBox-search-icon-color: #{$G5};
-  --SearchBox-enhonce-icon-color: #{$G11};
-  --SearchBox-clearable-icon-color: #{$G7};
-  --SearchBox-clearable-icon-size: #{px2rem(16px)};
-  --SearchBox-height: #{px2rem(30px)};
-  --SearchBox-disabled-color: #{$G10};
-  --SearchBox-enhonce-disabled-color: #{$G9};
-  --SearchBox-enhonce-disabled-search-color: #{$G6};
-  --SearchBox-enhonce-clearable-gap: #{$R4};
+  --SearchBox-hover-color: var(--colors-brand-5);
+  --SearchBox-focus-color: var(--colors-brand-4);
+  --SearchBox-search-icon-color: var(--colors-neutral-text-5);
+  --SearchBox-enhonce-icon-color: var(--colors-neutral-text-11);
+  --SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
+  --SearchBox-clearable-icon-size: var(--sizes-size-9);
+  --SearchBox-height: var(--sizes-size-16);
+  --SearchBox-disabled-color: var(--colors-neutral-text-10);
+  --SearchBox-enhonce-disabled-color: var(--colors-neutral-text-9);
+  --SearchBox-enhonce-disabled-search-color: var(--colors-neutral-text-6);
+  --SearchBox-enhonce-clearable-gap: var(--borders-radius-4);
 }
 
 @media (max-width: 767px) {