amis-ui 2.3.2-beta.1 → 2.4.0

package/scss/themes/_antd-variables.scss

@@ -1,40 +1,1096 @@
-@import './antd-colors';
 @import '../functions';
 
 $remFactor: 16px;
 
 $ns: 'antd-';
 
-$primary: $blue-6;
-$info: $primary;
-$success: $green-6;
-$warning: $gold-6;
-$danger: $red-5;
-$light: #d9d9d9;
-$white: #fff;
-$black: #000;
-
-$info-bg: #eaf6fe;
-$success-bg: #f1fdeb;
-$warning-bg: #fcf7f1;
-$danger-bg: #fff5f5;
+@import '../variables';
+@import '../properties';
 
-// Border color
-$border-color-base: #d9d9d9; // base border outline a component
-$border-color-split: #5d5d5d; // split border inside a component
-$border-color-inverse: $white;
-$border-width-base: 1px; // width of the border for a component
-$border-style-base: solid; // style of a components border
+:root {
+  --colors-brand-1: #002766;
+  --colors-brand-2: #003a8c;
+  --colors-brand-3: #0050b3;
+  --colors-brand-4: #096dd9;
+  --colors-brand-5: #1890ff;
+  --colors-brand-6: #45a8ff;
+  --colors-brand-7: #74c0ff;
+  --colors-brand-8: #a2d7ff;
+  --colors-brand-9: #d1ecff;
+  --colors-brand-10: #e6f5ff;
+  --colors-neutral-text-1: #070e14;
+  --colors-neutral-text-2: #151e26;
+  --colors-neutral-text-3: #303840;
+  --colors-neutral-text-4: #5c6166;
+  --colors-neutral-text-5: #84888c;
+  --colors-neutral-text-6: #b8bcbf;
+  --colors-neutral-text-7: #d4d7d9;
+  --colors-neutral-text-8: #e8e9eb;
+  --colors-neutral-text-9: #f2f4f5;
+  --colors-neutral-text-10: #f7f9fa;
+  --colors-neutral-text-11: #ffffff;
+  --colors-neutral-fill-none: transparent;
+  --colors-neutral-fill-1: #070e14;
+  --colors-neutral-fill-2: #151e26;
+  --colors-neutral-fill-3: #303840;
+  --colors-neutral-fill-4: #5c6166;
+  --colors-neutral-fill-5: #84888c;
+  --colors-neutral-fill-6: #b8bcbf;
+  --colors-neutral-fill-7: #d4d7d9;
+  --colors-neutral-fill-8: #e8e9eb;
+  --colors-neutral-fill-9: #f2f4f5;
+  --colors-neutral-fill-10: #f7f9fa;
+  --colors-neutral-fill-11: #ffffff;
+  --colors-neutral-line-1: #070e14;
+  --colors-neutral-line-2: #151e26;
+  --colors-neutral-line-3: #303840;
+  --colors-neutral-line-4: #5c6166;
+  --colors-neutral-line-5: #84888c;
+  --colors-neutral-line-6: #b8bcbf;
+  --colors-neutral-line-7: #d4d7d9;
+  --colors-neutral-line-8: #e8e9eb;
+  --colors-neutral-line-9: #f2f4f5;
+  --colors-neutral-line-10: #f7f9fa;
+  --colors-neutral-line-11: #ffffff;
+  --colors-error-1: #660a18;
+  --colors-error-2: #8c1523;
+  --colors-error-3: #b32430;
+  --colors-error-4: #d9363e;
+  --colors-error-5: #ff4d4f;
+  --colors-error-6: #ff7070;
+  --colors-error-7: #ff9694;
+  --colors-error-8: #ffbab8;
+  --colors-error-9: #ffdddb;
+  --colors-error-10: #ffe7e6;
+  --colors-warning-1: #613400;
+  --colors-warning-2: #874d00;
+  --colors-warning-3: #ad6800;
+  --colors-warning-4: #d48806;
+  --colors-warning-5: #faad14;
+  --colors-warning-6: #ffc443;
+  --colors-warning-7: #ffd572;
+  --colors-warning-8: #ffe4a1;
+  --colors-warning-9: #fff2d0;
+  --colors-warning-10: #fff9e6;
+  --colors-success-1: #092b00;
+  --colors-success-2: #135200;
+  --colors-success-3: #237804;
+  --colors-success-4: #389e0d;
+  --colors-success-5: #52c41a;
+  --colors-success-6: #73d140;
+  --colors-success-7: #95de6a;
+  --colors-success-8: #b8eb99;
+  --colors-success-9: #def7cc;
+  --colors-success-10: #f0ffe6;
+  --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;
 
-$text-color: rgba(0, 0, 0, 0.85);
+  --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%;
 
-$text--muted-color: #6c6c6c;
-$text--loud-color: lighten($text-color, 10%);
+  --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;
 
-$link-color: $info;
+  --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);
 
-@import '../variables';
-@import '../properties';
+  --button-default-default-shadow: 0px 0px 0px 0px transparent;
+  --button-default-default-font-color: #151e26;
+  --button-default-default-bg-color: #ffffff;
+  --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: #1890ff;
+  --button-default-hover-bg-color: #ffffff;
+  --button-default-hover-top-border-color: #1890ff;
+  --button-default-hover-top-border-style: solid;
+  --button-default-hover-top-border-width: 1px;
+  --button-default-hover-right-border-color: #1890ff;
+  --button-default-hover-right-border-style: solid;
+  --button-default-hover-right-border-width: 1px;
+  --button-default-hover-bottom-border-color: #1890ff;
+  --button-default-hover-bottom-border-style: solid;
+  --button-default-hover-bottom-border-width: 1px;
+  --button-default-hover-left-border-color: #1890ff;
+  --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: #096dd9;
+  --button-default-active-bg-color: #ffffff;
+  --button-default-active-top-border-color: #096dd9;
+  --button-default-active-top-border-style: solid;
+  --button-default-active-top-border-width: 1px;
+  --button-default-active-right-border-color: #096dd9;
+  --button-default-active-right-border-style: solid;
+  --button-default-active-right-border-width: 1px;
+  --button-default-active-bottom-border-color: #096dd9;
+  --button-default-active-bottom-border-style: solid;
+  --button-default-active-bottom-border-width: 1px;
+  --button-default-active-left-border-color: #096dd9;
+  --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: #b8bcbf;
+  --button-default-disabled-bg-color: #f7f9fa;
+  --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: #1890ff;
+  --button-primary-default-top-border-color: #1890ff;
+  --button-primary-default-top-border-style: solid;
+  --button-primary-default-top-border-width: 1px;
+  --button-primary-default-right-border-color: #1890ff;
+  --button-primary-default-right-border-style: solid;
+  --button-primary-default-right-border-width: 1px;
+  --button-primary-default-bottom-border-color: #1890ff;
+  --button-primary-default-bottom-border-style: solid;
+  --button-primary-default-bottom-border-width: 1px;
+  --button-primary-default-left-border-color: #1890ff;
+  --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: #45a8ff;
+  --button-primary-hover-top-border-color: #45a8ff;
+  --button-primary-hover-top-border-style: solid;
+  --button-primary-hover-top-border-width: 1px;
+  --button-primary-hover-right-border-color: #45a8ff;
+  --button-primary-hover-right-border-style: solid;
+  --button-primary-hover-right-border-width: 1px;
+  --button-primary-hover-bottom-border-color: #45a8ff;
+  --button-primary-hover-bottom-border-style: solid;
+  --button-primary-hover-bottom-border-width: 1px;
+  --button-primary-hover-left-border-color: #45a8ff;
+  --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: #096dd9;
+  --button-primary-active-top-border-color: #096dd9;
+  --button-primary-active-top-border-style: solid;
+  --button-primary-active-top-border-width: 1px;
+  --button-primary-active-right-border-color: #096dd9;
+  --button-primary-active-right-border-style: solid;
+  --button-primary-active-right-border-width: 1px;
+  --button-primary-active-bottom-border-color: #096dd9;
+  --button-primary-active-bottom-border-style: solid;
+  --button-primary-active-bottom-border-width: 1px;
+  --button-primary-active-left-border-color: #096dd9;
+  --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: #b8bcbf;
+  --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: #b8bcbf;
+  --button-secondary-default-top-border-color: #b8bcbf;
+  --button-secondary-default-top-border-style: solid;
+  --button-secondary-default-top-border-width: 1px;
+  --button-secondary-default-right-border-color: #b8bcbf;
+  --button-secondary-default-right-border-style: solid;
+  --button-secondary-default-right-border-width: 1px;
+  --button-secondary-default-bottom-border-color: #b8bcbf;
+  --button-secondary-default-bottom-border-style: solid;
+  --button-secondary-default-bottom-border-width: 1px;
+  --button-secondary-default-left-border-color: #b8bcbf;
+  --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: #84888c;
+  --button-secondary-hover-top-border-color: #84888c;
+  --button-secondary-hover-top-border-style: solid;
+  --button-secondary-hover-top-border-width: 1px;
+  --button-secondary-hover-right-border-color: #84888c;
+  --button-secondary-hover-right-border-style: solid;
+  --button-secondary-hover-right-border-width: 1px;
+  --button-secondary-hover-bottom-border-color: #84888c;
+  --button-secondary-hover-bottom-border-style: solid;
+  --button-secondary-hover-bottom-border-width: 1px;
+  --button-secondary-hover-left-border-color: #84888c;
+  --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: #5c6166;
+  --button-secondary-active-top-border-color: #5c6166;
+  --button-secondary-active-top-border-style: solid;
+  --button-secondary-active-top-border-width: 1px;
+  --button-secondary-active-right-border-color: #5c6166;
+  --button-secondary-active-right-border-style: solid;
+  --button-secondary-active-right-border-width: 1px;
+  --button-secondary-active-bottom-border-color: #5c6166;
+  --button-secondary-active-bottom-border-style: solid;
+  --button-secondary-active-bottom-border-width: 1px;
+  --button-secondary-active-left-border-color: #5c6166;
+  --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: #b8bcbf;
+  --button-secondary-disabled-bg-color: #f7f9fa;
+  --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: #1890ff;
+  --button-enhance-default-bg-color: #ffffff;
+  --button-enhance-default-top-border-color: #1890ff;
+  --button-enhance-default-top-border-style: solid;
+  --button-enhance-default-top-border-width: 1px;
+  --button-enhance-default-right-border-color: #1890ff;
+  --button-enhance-default-right-border-style: solid;
+  --button-enhance-default-right-border-width: 1px;
+  --button-enhance-default-bottom-border-color: #1890ff;
+  --button-enhance-default-bottom-border-style: solid;
+  --button-enhance-default-bottom-border-width: 1px;
+  --button-enhance-default-left-border-color: #1890ff;
+  --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: #45abff;
+  --button-enhance-hover-bg-color: #ffffff;
+  --button-enhance-hover-top-border-color: #45abff;
+  --button-enhance-hover-top-border-style: solid;
+  --button-enhance-hover-top-border-width: 1px;
+  --button-enhance-hover-right-border-color: #45abff;
+  --button-enhance-hover-right-border-style: solid;
+  --button-enhance-hover-right-border-width: 1px;
+  --button-enhance-hover-bottom-border-color: #45abff;
+  --button-enhance-hover-bottom-border-style: solid;
+  --button-enhance-hover-bottom-border-width: 1px;
+  --button-enhance-hover-left-border-color: #45abff;
+  --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: #096dd9;
+  --button-enhance-active-bg-color: #ffffff;
+  --button-enhance-active-top-border-color: #096dd9;
+  --button-enhance-active-top-border-style: solid;
+  --button-enhance-active-top-border-width: 1px;
+  --button-enhance-active-right-border-color: #096dd9;
+  --button-enhance-active-right-border-style: solid;
+  --button-enhance-active-right-border-width: 1px;
+  --button-enhance-active-bottom-border-color: #096dd9;
+  --button-enhance-active-bottom-border-style: solid;
+  --button-enhance-active-bottom-border-width: 1px;
+  --button-enhance-active-left-border-color: #096dd9;
+  --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: #b8bcbf;
+  --button-enhance-disabled-bg-color: #f7f9fa;
+  --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: #1890ff;
+  --button-info-default-top-border-color: #1890ff;
+  --button-info-default-top-border-style: solid;
+  --button-info-default-top-border-width: 1px;
+  --button-info-default-right-border-color: #1890ff;
+  --button-info-default-right-border-style: solid;
+  --button-info-default-right-border-width: 1px;
+  --button-info-default-bottom-border-color: #1890ff;
+  --button-info-default-bottom-border-style: solid;
+  --button-info-default-bottom-border-width: 1px;
+  --button-info-default-left-border-color: #1890ff;
+  --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: #45a8ff;
+  --button-info-hover-top-border-color: #45a8ff;
+  --button-info-hover-top-border-style: solid;
+  --button-info-hover-top-border-width: 1px;
+  --button-info-hover-right-border-color: #45a8ff;
+  --button-info-hover-right-border-style: solid;
+  --button-info-hover-right-border-width: 1px;
+  --button-info-hover-bottom-border-color: #45a8ff;
+  --button-info-hover-bottom-border-style: solid;
+  --button-info-hover-bottom-border-width: 1px;
+  --button-info-hover-left-border-color: #45a8ff;
+  --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: #096dd9;
+  --button-info-active-top-border-color: #096dd9;
+  --button-info-active-top-border-style: solid;
+  --button-info-active-top-border-width: 1px;
+  --button-info-active-right-border-color: #096dd9;
+  --button-info-active-right-border-style: solid;
+  --button-info-active-right-border-width: 1px;
+  --button-info-active-bottom-border-color: #096dd9;
+  --button-info-active-bottom-border-style: solid;
+  --button-info-active-bottom-border-width: 1px;
+  --button-info-active-left-border-color: #096dd9;
+  --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: #b8bcbf;
+  --button-info-disabled-bg-color: #f7f9fa;
+  --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: #52c41a;
+  --button-success-default-top-border-color: #52c41a;
+  --button-success-default-top-border-style: solid;
+  --button-success-default-top-border-width: 1px;
+  --button-success-default-right-border-color: #52c41a;
+  --button-success-default-right-border-style: solid;
+  --button-success-default-right-border-width: 1px;
+  --button-success-default-bottom-border-color: #52c41a;
+  --button-success-default-bottom-border-style: solid;
+  --button-success-default-bottom-border-width: 1px;
+  --button-success-default-left-border-color: #52c41a;
+  --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: #73d140;
+  --button-success-hover-top-border-color: #73d140;
+  --button-success-hover-top-border-style: solid;
+  --button-success-hover-top-border-width: 1px;
+  --button-success-hover-right-border-color: #73d140;
+  --button-success-hover-right-border-style: solid;
+  --button-success-hover-right-border-width: 1px;
+  --button-success-hover-bottom-border-color: #73d140;
+  --button-success-hover-bottom-border-style: solid;
+  --button-success-hover-bottom-border-width: 1px;
+  --button-success-hover-left-border-color: #73d140;
+  --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: #389e0d;
+  --button-success-active-top-border-color: #389e0d;
+  --button-success-active-top-border-style: solid;
+  --button-success-active-top-border-width: 1px;
+  --button-success-active-right-border-color: #389e0d;
+  --button-success-active-right-border-style: solid;
+  --button-success-active-right-border-width: 1px;
+  --button-success-active-bottom-border-color: #389e0d;
+  --button-success-active-bottom-border-style: solid;
+  --button-success-active-bottom-border-width: 1px;
+  --button-success-active-left-border-color: #389e0d;
+  --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: #b8bcbf;
+  --button-success-disabled-bg-color: #f7f9fa;
+  --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: #faad14;
+  --button-warning-default-top-border-color: #faad14;
+  --button-warning-default-top-border-style: solid;
+  --button-warning-default-top-border-width: 1px;
+  --button-warning-default-right-border-color: #faad14;
+  --button-warning-default-right-border-style: solid;
+  --button-warning-default-right-border-width: 1px;
+  --button-warning-default-bottom-border-color: #faad14;
+  --button-warning-default-bottom-border-style: solid;
+  --button-warning-default-bottom-border-width: 1px;
+  --button-warning-default-left-border-color: #faad14;
+  --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: #ffc443;
+  --button-warning-hover-top-border-color: #ffc443;
+  --button-warning-hover-top-border-style: solid;
+  --button-warning-hover-top-border-width: 1px;
+  --button-warning-hover-right-border-color: #ffc443;
+  --button-warning-hover-right-border-style: solid;
+  --button-warning-hover-right-border-width: 1px;
+  --button-warning-hover-bottom-border-color: #ffc443;
+  --button-warning-hover-bottom-border-style: solid;
+  --button-warning-hover-bottom-border-width: 1px;
+  --button-warning-hover-left-border-color: #ffc443;
+  --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: #d48806;
+  --button-warning-active-top-border-color: #d48806;
+  --button-warning-active-top-border-style: solid;
+  --button-warning-active-top-border-width: 1px;
+  --button-warning-active-right-border-color: #d48806;
+  --button-warning-active-right-border-style: solid;
+  --button-warning-active-right-border-width: 1px;
+  --button-warning-active-bottom-border-color: #d48806;
+  --button-warning-active-bottom-border-style: solid;
+  --button-warning-active-bottom-border-width: 1px;
+  --button-warning-active-left-border-color: #d48806;
+  --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: #b8bcbf;
+  --button-warning-disabled-bg-color: #f7f9fa;
+  --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: #ff4d4f;
+  --button-danger-default-top-border-color: #ff4d4f;
+  --button-danger-default-top-border-style: none;
+  --button-danger-default-top-border-width: 0px;
+  --button-danger-default-right-border-color: #ff4d4f;
+  --button-danger-default-right-border-style: none;
+  --button-danger-default-right-border-width: 0px;
+  --button-danger-default-bottom-border-color: #ff4d4f;
+  --button-danger-default-bottom-border-style: none;
+  --button-danger-default-bottom-border-width: 0px;
+  --button-danger-default-left-border-color: #ff4d4f;
+  --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: #ff7070;
+  --button-danger-hover-top-border-color: #ff7070;
+  --button-danger-hover-top-border-style: none;
+  --button-danger-hover-top-border-width: 0px;
+  --button-danger-hover-right-border-color: #ff7070;
+  --button-danger-hover-right-border-style: none;
+  --button-danger-hover-right-border-width: 0px;
+  --button-danger-hover-bottom-border-color: #ff7070;
+  --button-danger-hover-bottom-border-style: none;
+  --button-danger-hover-bottom-border-width: 0px;
+  --button-danger-hover-left-border-color: #ff7070;
+  --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: #d9363e;
+  --button-danger-active-top-border-color: #d9363e;
+  --button-danger-active-top-border-style: none;
+  --button-danger-active-top-border-width: 0px;
+  --button-danger-active-right-border-color: #d9363e;
+  --button-danger-active-right-border-style: none;
+  --button-danger-active-right-border-width: 0px;
+  --button-danger-active-bottom-border-color: #d9363e;
+  --button-danger-active-bottom-border-style: none;
+  --button-danger-active-bottom-border-width: 0px;
+  --button-danger-active-left-border-color: #d9363e;
+  --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: #b8bcbf;
+  --button-danger-disabled-bg-color: #f7f9fa;
+  --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: #151e26;
+  --button-light-default-bg-color: #e6f5ff;
+  --button-light-default-top-border-color: #e6f5ff;
+  --button-light-default-top-border-style: solid;
+  --button-light-default-top-border-width: 1px;
+  --button-light-default-right-border-color: #e6f5ff;
+  --button-light-default-right-border-style: solid;
+  --button-light-default-right-border-width: 1px;
+  --button-light-default-bottom-border-color: #e6f5ff;
+  --button-light-default-bottom-border-style: solid;
+  --button-light-default-bottom-border-width: 1px;
+  --button-light-default-left-border-color: #e6f5ff;
+  --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: #151e26;
+  --button-light-hover-bg-color: #d1ecff;
+  --button-light-hover-top-border-color: #d1ecff;
+  --button-light-hover-top-border-style: solid;
+  --button-light-hover-top-border-width: 1px;
+  --button-light-hover-right-border-color: #d1ecff;
+  --button-light-hover-right-border-style: solid;
+  --button-light-hover-right-border-width: 1px;
+  --button-light-hover-bottom-border-color: #d1ecff;
+  --button-light-hover-bottom-border-style: solid;
+  --button-light-hover-bottom-border-width: 1px;
+  --button-light-hover-left-border-color: #d1ecff;
+  --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: #151e26;
+  --button-light-active-bg-color: #a2d7ff;
+  --button-light-active-top-border-color: #a2d7ff;
+  --button-light-active-top-border-style: solid;
+  --button-light-active-top-border-width: 1px;
+  --button-light-active-right-border-color: #a2d7ff;
+  --button-light-active-right-border-style: solid;
+  --button-light-active-right-border-width: 1px;
+  --button-light-active-bottom-border-color: #a2d7ff;
+  --button-light-active-bottom-border-style: solid;
+  --button-light-active-bottom-border-width: 1px;
+  --button-light-active-left-border-color: #a2d7ff;
+  --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: #b8bcbf;
+  --button-light-disabled-bg-color: #f7f9fa;
+  --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: #303840;
+  --button-dark-default-top-border-color: #303840;
+  --button-dark-default-top-border-style: solid;
+  --button-dark-default-top-border-width: 1px;
+  --button-dark-default-right-border-color: #303840;
+  --button-dark-default-right-border-style: solid;
+  --button-dark-default-right-border-width: 1px;
+  --button-dark-default-bottom-border-color: #303840;
+  --button-dark-default-bottom-border-style: solid;
+  --button-dark-default-bottom-border-width: 1px;
+  --button-dark-default-left-border-color: #303840;
+  --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: #5c6166;
+  --button-dark-hover-top-border-color: #5c6166;
+  --button-dark-hover-top-border-style: solid;
+  --button-dark-hover-top-border-width: 1px;
+  --button-dark-hover-right-border-color: #5c6166;
+  --button-dark-hover-right-border-style: solid;
+  --button-dark-hover-right-border-width: 1px;
+  --button-dark-hover-bottom-border-color: #5c6166;
+  --button-dark-hover-bottom-border-style: solid;
+  --button-dark-hover-bottom-border-width: 1px;
+  --button-dark-hover-left-border-color: #5c6166;
+  --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: #84888c;
+  --button-dark-active-top-border-color: #84888c;
+  --button-dark-active-top-border-style: solid;
+  --button-dark-active-top-border-width: 1px;
+  --button-dark-active-right-border-color: #84888c;
+  --button-dark-active-right-border-style: solid;
+  --button-dark-active-right-border-width: 1px;
+  --button-dark-active-bottom-border-color: #84888c;
+  --button-dark-active-bottom-border-style: solid;
+  --button-dark-active-bottom-border-width: 1px;
+  --button-dark-active-left-border-color: #84888c;
+  --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: #b8bcbf;
+  --button-dark-disabled-bg-color: #f7f9fa;
+  --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: #1890ff;
+  --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: #45a8ff;
+  --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: #096dd9;
+  --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: #b8bcbf;
+  --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: 0px;
+  --button-size-default-top-left-border-radius: 0px;
+  --button-size-default-bottom-right-border-radius: 0px;
+  --button-size-default-bottom-left-border-radius: 0px;
+  --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: 0px;
+  --button-size-md-top-left-border-radius: 0px;
+  --button-size-md-bottom-right-border-radius: 0px;
+  --button-size-md-bottom-left-border-radius: 0px;
+  --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: 0px;
+  --button-size-lg-top-left-border-radius: 0px;
+  --button-size-lg-bottom-right-border-radius: 0px;
+  --button-size-lg-bottom-left-border-radius: 0px;
+  --transfer-base-title-bg: #f7f9fa;
+  --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: #151e26;
+  --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: #151e26;
+  --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-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: #151e26;
+  --transfer-search-placeholder-font-color: #b8bcbf;
+  --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: #096dd9;
+  --transfer-search-border-active-color: #096dd9;
+  --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: #84888c;
+  --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: var(--colors-neutral-fill-11);
+  --transfer-tree-bg-active-color: var(--colors-neutral-fill-11);
+  --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;
+}
 
 /* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
 $Table-strip-bg: transparent;
@@ -47,7 +1103,7 @@ $Table-strip-bg: transparent;
   --lineHeightBase: 1.57;
 
   --borderColor: #d9d9d9;
-  --text-color: #{$text-color};
+  --text-color: var(--colors-neutral-text-1);
 
   --text--muted-color: #999;
   --text--loud-color: #333;
@@ -67,21 +1123,21 @@ $Table-strip-bg: transparent;
   --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   // --Button-textShadow: 0 -1px 0 rgb(0 0 0 / 12%);
   --Button--default-border: #d9d9d9;
-  --Button--default-onHover-border: #{$blue-5};
+  --Button--default-onHover-border: var(--colors-brand-6);
   --Button--default-onHover-bg: #fff;
-  --Button--default-onHover-color: #{$blue-5};
+  --Button--default-onHover-color: var(--colors-brand-6);
   --Button--default-onActive-bg: #fff;
-  --Button--default-onActive-border: #{$blue-7};
-  --Button--default-onActive-color: #{$blue-7};
+  --Button--default-onActive-border: var(--colors-brand-4);
+  --Button--default-onActive-color: var(--colors-brand-4);
   --Button-onDisabled-borderColor: #d9d9d9;
 
-  --Button--primary-onHover-bg: #{$blue-5};
-  --Button--primary-onHover-border: #{$blue-5};
+  --Button--primary-onHover-bg: var(--colors-brand-6);
+  --Button--primary-onHover-border: var(--colors-brand-6);
 
-  --Card-onChecked-bg: #{$blue-1};
+  --Card-onChecked-bg: var(--colors-brand-10);
   --Card-onChecked-color: var(--body-color);
   --Card-onChecked-fieldLabel-color: var(--text--muted-color);
-  --Card-onChecked-borderColor: #{$blue-5};
+  --Card-onChecked-borderColor: var(--colors-brand-6);
 
   --Calendar-btnCancel-bg: #fff;
   --Calendar-btnCancel-border: var(--Button--default-border);
@@ -108,25 +1164,29 @@ $Table-strip-bg: transparent;
   --ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
   --ListControl-item-onHover-borderColor: var(--primary);
 
-  --ListItem-onChecked-bg: #{$blue-1};
+  --ListItem-onChecked-bg: var(--colors-brand-10);
   --ListItem--strip-bg: #fff;
 
   --Nav-item-onActive-borderLeft: 0;
 
   --Modal-header-bg: #fff;
   --Modal-title-fontWeight: 500;
+  --Modal-body-paddingY: var(--sizes-size-0);
+  --Modal-body-paddingX: var(--sizes-size-0);
+  --Modal-body-borderTop: 1px var(--colors-neutral-line-7) solid;
+  --Modal-body-borderBottom: 1px var(--colors-neutral-line-7) solid;
 
   --Form-item-fontSize: var(--fontSizeBase);
   --Form-item-fontColor: var(--body-color);
-  --Form-input-onFocused-borderColor: #{$blue-5};
-  --Form-input-borderColor: #{$border-color-base};
+  --Form-input-onFocused-borderColor: var(--colors-brand-6);
+  --Form-input-borderColor: var(--colors-neutral-line-8);
   --Form-input-boxShadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   --Form-select-borderWidth: #{px2rem(1px)};
   --Form-select-borderRadius: 0;
-  --Form-select-borderColor: #{$border-color-base};
+  --Form-select-borderColor: var(--colors-neutral-line-8);
   --Form-select-bg: var(--white);
   --Form-select-onHover-bg: var(--white);
-  --Form-select-onHover-borderColor: #{$blue-5};
+  --Form-select-onHover-borderColor: var(--colors-brand-6);
   --Form-select-placeholderColor: #999;
   --Form-select-color: #000;
   --Form-select-caret-iconColor: #999;
@@ -165,7 +1225,7 @@ $Table-strip-bg: transparent;
   --Table-thead-bg: #fafafa;
   --Table-onHover-bg: rgb(250, 250, 250);
   --Table-onHover-borderColor: var(--Table-borderColor);
-  --Table-onChecked-bg: #{$blue-1};
+  --Table-onChecked-bg: var(--colors-brand-10);
   --Table-onChecked-color: var(--Table-color);
   --Table-onChecked-borderColor: var(--Table-borderColor);
 
@@ -176,4 +1236,10 @@ $Table-strip-bg: transparent;
   --Tree-item-onChekced-bg-borderRadius: #{px2rem(2px)};
   --Tree-itemHeight: #{px2rem(24px)};
   --Tree-icon-gap: var(--gap-sm);
+
+  // steps
+  --Steps-line-bg: var(--colors-neutral-text-7);
+
+  // Avatar
+  --Avatar-bg: var(--colors-neutral-fill-7);
 }