eoss-mobiles 0.4.0 → 0.4.2

package/packages/theme-chalk/src/common/var.scss

@@ -1,1525 +1,1525 @@
-/* Element Chalk Variables */
-
-// Special comment for theme configurator
-// type|skipAutoTranslation|Category|Order
-// skipAutoTranslation 1
-// rgb 颜色转 hex
-@function rgbToHex($rgbColor) {
-  $ieHexStr: ie-hex-str($rgbColor);
-  @return unquote('\##{str-slice($ieHexStr,4)}');
-}
-// rgba 颜色转 hex ,该函数是根据背景颜色来计算的。默认背景色是白色
-@function rgbaToHex($rgbaColor, $background: rgb(255, 255, 255)) {
-  @if ($rgbaColor) {
-    $bgR: red($background);
-    $bgG: green($background);
-    $bgB: blue($background);
-
-    $colorRed: red($rgbaColor);
-    $colorGreen: green($rgbaColor);
-    $colorBlue: blue($rgbaColor);
-    $colorAlpha: alpha($rgbaColor);
-
-    $rgbColor: rgb(
-      (1 - $colorAlpha) * $bgR + $colorAlpha * $colorRed,
-      (1 - $colorAlpha) * $bgG + $colorAlpha * $colorGreen,
-      (1 - $colorAlpha) * $bgB + $colorAlpha * $colorBlue
-    );
-    @return rgbToHex($rgbColor);
-  }
-  @return $rgbaColor;
-}
-@import '../mixins/color.scss';
-/* Transition
--------------------------- */
-// 基本动画
-$--all-transition-base: all 0.2s linear;
-$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-// opacity淡出动画
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-// opacity线性淡出
-$--fade-linear-transition: opacity 200ms linear !default;
-// 动画淡出动画
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-// 边框过度动画
-$--border-transition-base: border-color 0.2s
-  cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-// color颜色过渡动画
-$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-
-/* Color
--------------------------- */
-
-$--blue-Base: #1890ff;
-$--blue-1: getColor($--blue-Base, 1);
-$--blue-2: getColor($--blue-Base, 2);
-$--blue-3: getColor($--blue-Base, 3);
-$--blue-4: getColor($--blue-Base, 4);
-$--blue-5: getColor($--blue-Base, 5);
-$--blue-6: $--blue-Base;
-$--blue-7: getColor($--blue-Base, 7);
-$--blue-8: getColor($--blue-Base, 8);
-$--blue-9: getColor($--blue-Base, 9);
-$--blue-10: getColor($--blue-Base, 10);
-
-$--purple-base: #722ed1;
-$--purple-1: getColor($--purple-base, 1);
-$--purple-2: getColor($--purple-base, 2);
-$--purple-3: getColor($--purple-base, 3);
-$--purple-4: getColor($--purple-base, 4);
-$--purple-5: getColor($--purple-base, 5);
-$--purple-6: $--purple-base;
-$--purple-7: getColor($--purple-base, 7);
-$--purple-8: getColor($--purple-base, 8);
-$--purple-9: getColor($--purple-base, 9);
-$--purple-10: getColor($--purple-base, 10);
-
-$--cyan-base: #13c2c2;
-$--cyan-1: getColor($--cyan-base, 1);
-$--cyan-2: getColor($--cyan-base, 2);
-$--cyan-3: getColor($--cyan-base, 3);
-$--cyan-4: getColor($--cyan-base, 4);
-$--cyan-5: getColor($--cyan-base, 5);
-$--cyan-6: $--cyan-base;
-$--cyan-7: getColor($--cyan-base, 7);
-$--cyan-8: getColor($--cyan-base, 8);
-$--cyan-9: getColor($--cyan-base, 9);
-$--cyan-10: getColor($--cyan-base, 10);
-
-$--green-base: #52c41a;
-$--green-1: getColor($--green-base, 1);
-$--green-2: getColor($--green-base, 2);
-$--green-3: getColor($--green-base, 3);
-$--green-4: getColor($--green-base, 4);
-$--green-5: getColor($--green-base, 5);
-$--green-6: $--green-base;
-$--green-7: getColor($--green-base, 7);
-$--green-8: getColor($--green-base, 8);
-$--green-9: getColor($--green-base, 9);
-$--green-10: getColor($--green-base, 10);
-
-$--magenta-base: #eb2f96;
-$--magenta-1: getColor($--magenta-base, 1);
-$--magenta-2: getColor($--magenta-base, 2);
-$--magenta-3: getColor($--magenta-base, 3);
-$--magenta-4: getColor($--magenta-base, 4);
-$--magenta-5: getColor($--magenta-base, 5);
-$--magenta-6: $--magenta-base;
-$--magenta-7: getColor($--magenta-base, 7);
-$--magenta-8: getColor($--magenta-base, 8);
-$--magenta-9: getColor($--magenta-base, 9);
-$--magenta-10: getColor($--magenta-base, 10);
-
-$--red-base: #f5222d;
-$--red-1: getColor($--red-base, 1);
-$--red-2: getColor($--red-base, 2);
-$--red-3: getColor($--red-base, 3);
-$--red-4: getColor($--red-base, 4);
-$--red-5: getColor($--red-base, 5);
-$--red-6: $--red-base;
-$--red-7: getColor($--red-base, 7);
-$--red-8: getColor($--red-base, 8);
-$--red-9: getColor($--red-base, 9);
-$--red-10: getColor($--red-base, 10);
-
-$--orange-base: #fa8c16;
-$--orange-1: getColor($--orange-base, 1);
-$--orange-2: getColor($--orange-base, 2);
-$--orange-3: getColor($--orange-base, 3);
-$--orange-4: getColor($--orange-base, 4);
-$--orange-5: getColor($--orange-base, 5);
-$--orange-6: $--orange-base;
-$--orange-7: getColor($--orange-base, 7);
-$--orange-8: getColor($--orange-base, 8);
-$--orange-9: getColor($--orange-base, 9);
-$--orange-10: getColor($--orange-base, 10);
-
-$--yellow-base: #fadb14;
-$--yellow-1: getColor($--yellow-base, 1);
-$--yellow-2: getColor($--yellow-base, 2);
-$--yellow-3: getColor($--yellow-base, 3);
-$--yellow-4: getColor($--yellow-base, 4);
-$--yellow-5: getColor($--yellow-base, 5);
-$--yellow-6: $--yellow-base;
-$--yellow-7: getColor($--yellow-base, 7);
-$--yellow-8: getColor($--yellow-base, 8);
-$--yellow-9: getColor($--yellow-base, 9);
-$--yellow-10: getColor($--yellow-base, 10);
-
-$--volcano-base: #fa541c;
-$--volcano-1: getColor($--volcano-base, 1);
-$--volcano-2: getColor($--volcano-base, 2);
-$--volcano-3: getColor($--volcano-base, 3);
-$--volcano-4: getColor($--volcano-base, 4);
-$--volcano-5: getColor($--volcano-base, 5);
-$--volcano-6: $--volcano-base;
-$--volcano-7: getColor($--volcano-base, 7);
-$--volcano-8: getColor($--volcano-base, 8);
-$--volcano-9: getColor($--volcano-base, 9);
-$--volcano-10: getColor($--volcano-base, 10);
-
-$--geekblue-base: #2f54eb;
-$--geekblue-1: getColor($--geekblue-base, 1);
-$--geekblue-2: getColor($--geekblue-base, 2);
-$--geekblue-3: getColor($--geekblue-base, 3);
-$--geekblue-4: getColor($--geekblue-base, 4);
-$--geekblue-5: getColor($--geekblue-base, 5);
-$--geekblue-6: $--geekblue-base;
-$--geekblue-7: getColor($--geekblue-base, 7);
-$--geekblue-8: getColor($--geekblue-base, 8);
-$--geekblue-9: getColor($--geekblue-base, 9);
-$--geekblue-10: getColor($--geekblue-base, 10);
-
-$--lime-base: #a0d911;
-$--lime-1: getColor($--lime-base, 1);
-$--lime-2: getColor($--lime-base, 2);
-$--lime-3: getColor($--lime-base, 3);
-$--lime-4: getColor($--lime-base, 4);
-$--lime-5: getColor($--lime-base, 5);
-$--lime-6: $--lime-base;
-$--lime-7: getColor($--lime-base, 7);
-$--lime-8: getColor($--lime-base, 8);
-$--lime-9: getColor($--lime-base, 9);
-$--lime-10: getColor($--lime-base, 10);
-
-$--gold-base: #faad14;
-$--gold-1: getColor($--gold-base, 1);
-$--gold-2: getColor($--gold-base, 2);
-$--gold-3: getColor($--gold-base, 3);
-$--gold-4: getColor($--gold-base, 4);
-$--gold-5: getColor($--gold-base, 5);
-$--gold-6: $--gold-base;
-$--gold-7: getColor($--gold-base, 7);
-$--gold-8: getColor($--gold-base, 8);
-$--gold-9: getColor($--gold-base, 9);
-$--gold-10: getColor($--gold-base, 10);
-
-$--gray-1: #ffffff;
-$--gray-2: #fafafa;
-$--gray-3: #f5f5f5;
-$--gray-4: #f0f0f0;
-$--gray-5: #d9d9d9;
-$--gray-6: #bfbfbf;
-$--gray-7: #8c8c8c;
-$--gray-8: #595959;
-$--gray-9: #434343;
-$--gray-10: #262626;
-$--gray-11: #1f1f1f;
-$--gray-12: #141414;
-$--gray-13: #000000;
-/// color|1|Brand Color|0
-$--color-primary: #12278B !default;
-/// color|1|Background Color|4
-$--color-white: #ffffff !default;
-/// color|1|Background Color|4
-$--color-black: #000000 !default;
-$--color-primary-light-1: getColor($--color-primary, 1) !default; /* 53a8ff */
-$--color-primary-light-2: getColor($--color-primary, 2) !default; /* 66b1ff */
-$--color-primary-light-3: getColor($--color-primary, 3) !default; /* 79bbff */
-$--color-primary-light-4: getColor($--color-primary, 4) !default; /* 8cc5ff */
-$--color-primary-light-5: getColor($--color-primary, 5) !default; /* a0cfff */
-$--color-primary-light-6: $--color-primary !default; /* a0cfff */
-$--color-primary-light-7: getColor($--color-primary, 7) !default; /* b3d8ff */
-$--color-primary-light-8: getColor($--color-primary, 8) !default; /* c6e2ff */
-$--color-primary-light-9: getColor($--color-primary, 9) !default; /* d9ecff */
-$--color-primary-light-10: getColor($--color-primary, 10) !default; /* ecf5ff */
-
-/// 成功色
-$--color-success: $--green-6 !default;
-$--color-success-hover: $--green-4 !default;
-// 禁用
-$--color-disabled: $--gray-8 !default;
-$--color-disabled-hover: $--gray-7 !default;
-/// 警告色
-$--color-warning: $--gold-6 !default;
-$--color-warning-hover: $--gold-5 !default;
-// 错误色
-$--color-danger: $--red-6 !default;
-$--color-danger-hover: $--red-4 !default;
-/// 信息
-$--color-info: $--gray-7 !default;
-$--color-info-hover: $--gray-6 !default;
-
-// 辅助色边框
-$--color-success-light: $--green-2 !default;
-$--color-warning-light: $--gold-2 !default;
-$--color-danger-light: $--red-2 !default;
-$--color-info-light: $--gray-2 !default;
-
-// 辅助色背景
-$--color-success-lighter: $--green-1 !default;
-$--color-warning-lighter: $--gold-1 !default;
-$--color-danger-lighter: $--red-1 !default;
-$--color-info-lighter: $--gray-3 !default;
-
-// 各类辅助色在色板中起始位置
-$--type--index: (
-  primary: 6,
-  danger: 5,
-  success: 6,
-  warning: 6,
-  info: 6
-);
-
-// 文字默认颜色
-$--font-color-title: rgba(0, 0, 0, 0.85);
-$--font-color-primary: rgba(0, 0, 0, 0.75);
-$--font-color-secondary: rgba(0, 0, 0, 0.45);
-$--font-color-disable: rgba(0, 0, 0, 0.25);
-$--font-color-border: rgba(0, 0, 0, 0.15);
-$--font-color-dividers: rgba(0, 0, 0, 0.06);
-$--font-color-background: rgba(0, 0, 0, 0.04);
-$--font-color-table-header: rgba(0, 0, 0, 0.02);
-
-/// color|1|Font Color|2
-$--color-text-primary: $--font-color-primary !default;
-/// color|1|Font Color|2
-$--color-text-regular: $--font-color-primary !default;
-$--color-text-black: $--font-color-title !default;
-/// color|1|Font Color|2
-$--color-text-secondary: $--font-color-secondary !default;
-/// color|1|Font Color|2
-$--color-text-placeholder: rgba(0, 0, 0, 0.25) !default;
-/// color|1|Border Color|3
-$--border-color-base: $--gray-5 !default;
-/// color|1|Border Color|3
-$--border-color-light: $--font-color-border !default;
-/// color|1|Border Color|3
-$--border-color-lighter: $--gray-5 !default;
-/// color|1|Border Color|3
-$--border-color-extra-light: $--gray-3 !default;
-
-// Background
-/// color|1|Background Color|4
-$--background-color-base: $--gray-2 !default;
-
-/* Link
--------------------------- */
-$--link-color: $--color-primary-light-2 !default;
-$--link-hover-color: $--color-primary !default;
-
-/* Border
--------------------------- */
-$--border-width-base: 1px !default;
-$--border-style-base: solid !default;
-$--border-color-hover: $--color-text-placeholder !default;
-$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
-/// borderRadius|1|Radius|0
-$--border-radius-base: 3px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-small: 3px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-circle: 100% !default;
-/// borderRadius|1|Radius|0
-$--border-radius-zero: 0 !default;
-/// borderRadius|1|Radius|0
-$--border-radius-large: 6px !default;
-
-// Box-shadow
-/// boxShadow|基础层
-// 阴影颜色变量，因为rgba本身也是sass色彩函数，所以sass会将带有透明度的rgba直接转成色彩关键词，失去css的rgba的色彩
-$--box-shadow-rgba4: rgba(0, 0, 0, 0.04) !default;
-$--box-shadow-rgba5: rgba(0, 0, 0, 0.05) !default;
-$--box-shadow-rgba6: rgba(0, 0, 0, 0.06) !default;
-$--box-shadow-rgba8: rgba(0, 0, 0, 0.08) !default;
-$--box-shadow-rgba10: rgba(0, 0, 0, 0.1) !default;
-$--box-shadow-rgba12: rgba(0, 0, 0, 0.12) !default;
-// 三层box-shadow
-// 组件 hover 状态使用，例如表格和树拖动
-$--box-shadow-base: 0 1px 10px $--box-shadow-rgba5,
-  0 4px 5px $--box-shadow-rgba8, 0 2px 4px -1px $--box-shadow-rgba12 !default;
-// boxShadow|中层｜下拉组件使用，例如下拉菜单 / 气泡确认框 / 选择器 等
-$--box-shadow-dark: 0 3px 14px 2px $--box-shadow-rgba5,
-  0 8px 10px 1px $--box-shadow-rgba6, 0 5px 5px -3px $--box-shadow-rgba10 !default;
-/// boxShadow|上层｜警示或弹窗组件使用，例如全局提示 / 消息通知等
-$--box-shadow-light: 0 6px 30px 5px $--box-shadow-rgba5,
-  0 16px 24px 2px $--box-shadow-rgba4, 0 8px 10px -5px $--box-shadow-rgba8 !default;
-
-/* Fill
--------------------------- */
-$--fill-base: $--color-white !default;
-
-/* ------初始值------*/
-$--base: 4px;
-
-/* Typography
--------------------------- */
-$--eoss-font-path: 'fonts' !default;
-$--es-font-path: $--eoss-font-path !default;
-$--font-display: 'auto' !default;
-// 字体大小
-/// display1 报告标题、关键数据展示
-$--font-size-title-large: 36px !default;
-/// display2 数字面额
-$--font-size-number-large: 32px !default;
-/// display3 数字面额
-$--font-size-number-extra-large: 24px !default;
-/// display4 主标题
-$--font-size-extra-large: 20px !default;
-/// display5 标题
-$--font-size-large: 18px !default;
-/// display6 小标题
-$--font-size-medium: 16px !default;
-/// display7 正文
-$--font-size-base: 14px !default;
-/// fontSize|1|Font Size|0
-$--font-size-small: 12px !default;
-/// display8 辅助文字
-$--font-size-extra-small: 12px !default;
-
-// 字重
-/// 默认、字重 400 等于 Windows 和 macOS 系统下的 Regular 显示效果
-$--font-weight-primary: 400 !default;
-/// 次要、字重 600 等于 Windows 系统下的 Bold 显示效果和 macOS 系统下的 Semibold 显示效果。
-$--font-weight-semibold: 600 !default;
-/// 默认行高
-$--font-line-height-primary: 24px !default;
-/// 次要行高
-$--font-line-height-secondary: 16px !default;
-// 禁用文字颜色
-$--font-color-disabled-base: #bbb !default;
-// 字体和行高的计算基准值
-$--font-height-var: 8px;
-/* Size
--------------------------- */
-$--size-base: 14px !default;
-
-/* z-index
--------------------------- */
-$--index-normal: 1 !default;
-$--index-top: 1000 !default;
-$--index-popper: 2000 !default;
-
-/* Disable base
--------------------------- */
-$--disabled-fill-base: $--background-color-base !default;
-$--disabled-color-base: $--color-text-placeholder !default;
-$--disabled-border-base: $--border-color-light !default;
-
-/* Icon
--------------------------- */
-$--icon-color: #666 !default;
-$--icon-color-base: $--color-info !default;
-
-/* Checkbox
--------------------------- */
-/// fontSize||Font|1
-$--checkbox-font-size: 14px !default;
-/// fontWeight||Font|1
-$--checkbox-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--checkbox-font-color: $--font-color-primary !default;
-$--checkbox-input-height: 14px !default;
-$--checkbox-input-width: 14px !default;
-/// borderRadius||Border|2
-$--checkbox-border-radius: $--border-radius-small !default;
-/// color||Color|0
-$--checkbox-background-color: $--color-white !default;
-$--checkbox-input-border: $--border-base !default;
-
-/// color||Color|0
-$--checkbox-disabled-border-color: $--border-color-base !default;
-$--checkbox-disabled-input-fill: $--border-color-extra-light !default;
-$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
-
-$--checkbox-disabled-checked-input-fill: rgba(192, 196, 204, 0.6);
-$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
-$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
-$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
-
-/// color||Color|0
-$--checkbox-checked-font-color: $--font-color-title !default;
-$--checkbox-checked-input-border-color: $--color-primary !default;
-/// color||Color|0
-$--checkbox-checked-background-color: $--color-primary !default;
-$--checkbox-checked-icon-color: $--fill-base !default;
-
-$--checkbox-input-border-color-hover: $--color-primary !default;
-/// height||Other|4
-$--checkbox-bordered-height: 40px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-padding: 8px 20px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-large-padding: 8px 20px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-medium-padding: 4px 12px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-small-padding: 3px 8px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-mini-padding: 2px 8px !default;
-$--checkbox-bordered-medium-input-height: 14px !default;
-$--checkbox-bordered-medium-input-width: 14px !default;
-/// height||Other|4
-$--checkbox-bordered-medium-height: 36px !default;
-$--checkbox-bordered-small-input-height: 12px !default;
-$--checkbox-bordered-small-input-width: 12px !default;
-/// height||Other|4
-$--checkbox-bordered-small-height: 32px !default;
-$--checkbox-bordered-mini-input-height: 12px !default;
-$--checkbox-bordered-mini-input-width: 12px !default;
-/// height||Other|4
-$--checkbox-bordered-mini-height: 28px !default;
-
-/// color||Color|0
-$--checkbox-button-checked-background-color: $--color-primary !default;
-/// color||Color|0
-$--checkbox-button-checked-font-color: $--color-white !default;
-/// color||Color|0
-$--checkbox-button-checked-border-color: $--color-primary !default;
-
-/* 按钮选中且被禁用*/
-/// color||Color|0
-$--checkbox-disabled-button-checked-background-color: $--font-color-disable !default;
-/// color||Color|0
-$--checkbox-disabled-button-checked-font-color: $--font-color-disable !default;
-/// color||Color|0
-$--checkbox-disabled-button-checked-border-color: $--font-color-disable !default;
-
-/* Radio
--------------------------- */
-/// fontSize||Font|1
-$--radio-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--radio-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--radio-font-color: $--font-color-primary !default;
-$--radio-input-height: 14px !default;
-$--radio-input-width: 14px !default;
-/// borderRadius||Border|2
-$--radio-input-border-radius: $--border-radius-circle !default;
-/// color||Color|0
-$--radio-input-background-color: $--color-white !default;
-$--radio-input-border: $--border-base !default;
-/// color||Color|0
-$--radio-input-border-color: $--border-color-base !default;
-/// color||Color|0
-$--radio-icon-color: $--color-white !default;
-
-$--radio-disabled-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-icon-color: $--disabled-fill-base !default;
-
-$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
-
-/// color||Color|0
-$--radio-checked-font-color: $--font-color-title !default;
-/// color||Color|0
-$--radio-checked-input-border-color: $--color-primary !default;
-/// color||Color|0
-$--radio-checked-input-background-color: $--color-white !default;
-/// color||Color|0
-$--radio-checked-icon-color: $--color-primary !default;
-
-$--radio-input-border-color-hover: $--color-primary !default;
-
-$--radio-bordered-height: 40px !default;
-// 默认radio padding
-$--radio-bordered-padding: 8px 20px !default;
-// 大型radio padding
-$--radio-bordered-large-padding: 8px 20px !default;
-// 中型radio padding
-$--radio-bordered-medium-padding: 4px 12px !default;
-// 小型radio padding
-$--radio-bordered-small-padding: 3px 8px !default;
-// 迷你radio padding
-$--radio-bordered-mini-padding: 2px 8px !default;
-
-$--radio-bordered-large-input-height: 14px !default;
-$--radio-bordered-large-input-width: 14px !default;
-$--radio-bordered-medium-input-height: 14px !default;
-$--radio-bordered-medium-input-width: 14px !default;
-$--radio-bordered-medium-height: 36px !default;
-$--radio-bordered-small-input-height: 12px !default;
-$--radio-bordered-small-input-width: 12px !default;
-$--radio-bordered-small-height: 32px !default;
-$--radio-bordered-mini-input-height: 12px !default;
-$--radio-bordered-mini-input-width: 12px !default;
-$--radio-bordered-mini-height: 28px !default;
-
-/// fontSize||Font|1
-$--radio-button-font-size: $--font-size-base !default;
-/// color||Color|0
-$--radio-button-checked-background-color: $--color-primary !default;
-/// color||Color|0
-$--radio-button-checked-font-color: $--color-white !default;
-/// color||Color|0
-$--radio-button-checked-border-color: $--color-primary !default;
-$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
-
-/* Select
--------------------------- */
-$--select-border-color-hover: $--color-primary !default;
-$--select-disabled-border: $--disabled-border-base !default;
-/// fontSize||Font|1
-$--select-font-size: $--font-size-base !default;
-$--select-close-hover-color: $--color-text-secondary !default;
-
-$--select-input-color: $--color-text-placeholder !default;
-$--select-multiple-input-color: #666 !default;
-/// color||Color|0
-$--select-input-focus-border-color: $--color-primary !default;
-/// fontSize||Font|1
-$--select-input-font-size: 14px !default;
-
-$--select-option-color: $--color-text-regular !default;
-$--select-option-disabled-color: $--color-text-placeholder !default;
-$--select-option-disabled-background: $--color-white !default;
-/// height||Other|4
-$--select-option-height: 34px !default;
-$--select-option-hover-background: $--background-color-base !default;
-/// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
-
-$--select-group-color: $--color-info !default;
-$--select-group-height: 30px !default;
-$--select-group-font-size: 12px !default;
-
-$--select-dropdown-background: $--color-white !default;
-$--select-dropdown-shadow: $--box-shadow-dark !default;
-$--select-dropdown-empty-color: #999 !default;
-/// height||Other|4
-$--select-dropdown-max-height: 274px !default;
-$--select-dropdown-padding: 6px 0 !default;
-$--select-dropdown-empty-padding: 10px 0 !default;
-$--select-dropdown-border: solid 1px $--border-color-light !default;
-
-/* Alert
--------------------------- */
-$--alert-padding: 8px 16px !default;
-/// alert边框圆角
-$--alert-border-radius: $--border-radius-base !default;
-/// alert标题字体大小
-$--alert-title-font-size: 14px !default;
-/// alert内容字体大小
-$--alert-description-font-size: 12px !default;
-/// alert关闭图标大小
-$--alert-close-font-size: 12px !default;
-/// alert关闭文字大小
-$--alert-close-customed-font-size: 14px !default;
-
-// 成功背景色
-$--alert-success-color: $--color-success-lighter !default;
-// 信息背景色
-$--alert-info-color: $--color-info-lighter !default;
-// 警告背景色
-$--alert-warning-color: $--color-warning-lighter !default;
-// 错误背景色
-$--alert-danger-color: $--color-danger-lighter !default;
-
-/// height||Other|4
-$--alert-icon-size: 16px !default;
-/// height||Other|4
-$--alert-icon-large-size: 28px !default;
-
-/* MessageBox
--------------------------- */
-/// color||Color|0
-/// 弹出框标题颜色
-$--messagebox-title-color: $--color-text-primary !default;
-// 弹出框宽度
-$--msgbox-width: 420px !default;
-// 弹出框圆角
-$--msgbox-border-radius: 3px !default;
-/// 弹出框字体大小
-$--messagebox-font-size: $--font-size-large !default;
-/// 内容字体大小
-$--messagebox-content-font-size: $--font-size-base !default;
-/// 内容文字颜色
-$--messagebox-content-color: $--color-text-regular !default;
-/// 错误字体大小
-$--messagebox-error-font-size: 12px !default;
-// 常规padding距离
-$--msgbox-padding-primary: 15px !default;
-/// 成功文字颜色
-$--messagebox-success-color: $--color-success !default;
-/// 信息文字颜色
-$--messagebox-info-color: $--color-info !default;
-/// 警告文字颜色
-$--messagebox-warning-color: $--color-warning !default;
-/// 错误文字颜色
-$--messagebox-danger-color: $--color-danger !default;
-
-/* Message
--------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: $--gray-2 !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// 关闭按钮颜色
-$--message-close-icon-color: $--gray-7 !default;
-/// 关闭按钮大小
-$--message-close-size: 16px !default;
-/// 关闭按钮hover颜色
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// 成功提示颜色
-$--message-success-font-color: $--color-success !default;
-$--message-success-hover-font-color: $--color-success-hover !default;
-/// 信息提示颜色
-$--message-info-font-color: $--color-info !default;
-$--message-info-hover-font-color: $--color-info-hover !default;
-/// 警告提示颜色
-$--message-warning-font-color: $--color-warning !default;
-$--message-warning-hover-font-color: $--color-warning-hover !default;
-/// 错误提示颜色
-$--message-danger-font-color: $--color-danger !default;
-$--message-danger-hover-font-color: $--color-danger-hover !default;
-
-/* Notification
--------------------------- */
-// 宽度
-$--notification-width: 330px !default;
-/// padding
-$--notification-padding: 12px 26px 12px 12px !default;
-// 圆角
-$--notification-radius: $--border-radius-large !default;
-// 阴影
-$--notification-shadow: $--box-shadow-light !default;
-/// 边框颜色
-$--notification-border-color: $--border-color-lighter !default;
-// 图标大小
-$--notification-icon-size: 24px !default;
-// 关闭按钮大小
-$--notification-close-font-size: $--message-close-size !default;
-// 内容容器margin-left
-$--notification-group-margin-left: 12px !default;
-// 内容容器margin-right
-$--notification-group-margin-right: 8px !default;
-/// 内容文字大小
-$--notification-content-font-size: $--font-size-base !default;
-/// 内容文字颜色
-$--notification-content-color: $--color-text-secondary !default;
-/// 标题文字大小
-$--notification-title-font-size: $--font-size-medium !default;
-/// 标题文字颜色
-$--notification-title-color: $--color-text-black !default;
-
-/// 关闭按钮颜色
-$--notification-close-color: $--color-text-secondary !default;
-/// 关闭按钮hover颜色
-$--notification-close-hover-color: $--color-text-regular !default;
-
-/// 成功图标颜色
-$--notification-success-icon-color: $--color-success !default;
-/// 详情图标颜色
-$--notification-info-icon-color: $--color-info !default;
-/// 警告图标颜色
-$--notification-warning-icon-color: $--color-warning !default;
-/// 错误图标颜色
-$--notification-danger-icon-color: $--color-danger !default;
-
-/* Input
--------------------------- */
-$--input-font-size: $--font-size-base !default;
-/// color||Color|0
-$--input-font-color: $--color-text-regular !default;
-/// height||Other|4
-$--input-width: 140px !default;
-/// height||Other|4
-$--input-height: 40px !default;
-
-$--input-border: $--border-base !default;
-$--input-border-color: $--border-color-base !default;
-/// borderRadius||Border|2
-$--input-border-radius: $--border-radius-base !default;
-$--input-border-color-hover: $--border-color-hover !default;
-/// color||Color|0
-$--input-background-color: $--color-white !default;
-$--input-fill-disabled: $--disabled-fill-base !default;
-$--input-color-disabled: $--font-color-disabled-base !default;
-/// color||Color|0
-$--input-icon-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--input-placeholder-color: $--color-text-placeholder !default;
-$--input-max-width: 314px !default;
-
-$--input-hover-border: $--color-primary !default;
-$--input-clear-hover-color: $--color-text-secondary !default;
-
-$--input-focus-border: $--color-primary !default;
-$--input-focus-fill: $--color-white !default;
-$--input-focus-color: $--color-black !default;
-
-$--input-disabled-fill: $--font-color-background !default;
-$--input-disabled-border: $--disabled-border-base !default;
-$--input-disabled-color: $--font-color-background !default;
-$--input-disabled-placeholder-color: $--color-text-placeholder !default;
-
-/// fontSize||Font|1
-$--input-large-font-size: 14px !default;
-/// height||Other|4
-$--input-large-height: 40px !default;
-/// fontSize||Font|1
-$--input-medium-font-size: 14px !default;
-/// height||Other|4
-$--input-medium-height: 32px !default;
-/// fontSize||Font|1
-$--input-small-font-size: 12px !default;
-/// height||Other|4
-$--input-small-height: 30px !default;
-/// fontSize||Font|1
-$--input-mini-font-size: 12px !default;
-/// height||Other|4
-$--input-mini-height: 26px !default;
-
-/* Cascader
--------------------------- */
-/// color||Color|0
-$--cascader-menu-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--cascader-menu-selected-font-color: $--color-primary !default;
-$--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-font-size: $--font-size-base !default;
-$--cascader-menu-radius: $--border-radius-base !default;
-$--cascader-menu-border: solid 1px transparent !default;
-$--cascader-menu-shadow: $--box-shadow-light !default;
-$--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled: $--color-text-placeholder !default;
-$--cascader-color-empty: $--color-text-placeholder !default;
-$--cascader-tag-background: #f0f2f5;
-
-/* Group
--------------------------- */
-$--group-option-flex: 0 0 (1 * 0.2) * 100% !default;
-$--group-option-offset-bottom: 12px !default;
-$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
-$--group-title-color: $--color-black !default;
-$--group-title-font-size: $--font-size-base !default;
-$--group-title-width: 66px !default;
-
-/* Tab
--------------------------- */
-$--tab-font-size: $--font-size-base !default;
-$--tab-border-line: 1px solid #e4e4e4 !default;
-$--tab-header-color-active: $--color-text-secondary !default;
-$--tab-header-color-hover: $--color-text-regular !default;
-$--tab-header-color: $--color-text-regular !default;
-$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
-$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
-$--tab-vertical-header-width: 90px !default;
-$--tab-vertical-header-count-color: $--color-white !default;
-$--tab-vertical-header-count-fill: $--color-text-secondary !default;
-
-/* Button
--------------------------- */
-// 默认按钮
-$--button-height: 40px !default;
-// 文字行高
-$--button-font-height: 22px !default;
-/// fontSize||Font|1
-$--button-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--button-font-weight: $--font-weight-primary !default;
-/// borderRadius||Border|2
-$--button-border-radius: $--border-radius-small !default;
-/// padding||Spacing|3
-$--button-padding-vertical: 8px !default;
-/// padding||Spacing|3
-$--button-padding-horizontal: 20px !default;
-
-// 中等按钮
-$--button-medium-height: 32px !default;
-// 文字行高
-$--button-medium-font-height: 22px !default;
-/// fontSize||Font|1
-$--button-medium-font-size: $--font-size-base !default;
-/// borderRadius||Border|2
-$--button-medium-border-radius: $--border-radius-small !default;
-/// borderRadius||Border|2
-$--button-medium-border-radius: $--border-radius-small !default;
-/// padding||Spacing|3
-$--button-medium-padding-vertical: 4px !default;
-/// padding||Spacing|3
-$--button-medium-padding-horizontal: 12px !default;
-
-// 小按钮
-$--button-small-height: 28px;
-// 文字杭高
-$--button-small-font-height: 18px;
-/// fontSize||Font|1
-$--button-small-font-size: 12px !default;
-$--button-small-border-radius: $--border-radius-small !default;
-/// padding||Spacing|3
-$--button-small-padding-vertical: 4px !default;
-/// padding||Spacing|3
-$--button-small-padding-horizontal: 8px !default;
-
-// 超小按钮
-$--button-mini-height: 24px;
-// 文字杭高
-$--button-mini-font-height: 18px;
-/// fontSize||Font|1
-$--button-mini-font-size: 12px !default;
-$--button-mini-border-radius: $--border-radius-small !default;
-/// padding||Spacing|3
-$--button-mini-padding-vertical: 2px !default;
-/// padding||Spacing|3
-$--button-mini-padding-horizontal: 8px !default;
-
-/// color||Color|0
-$--button-default-font-color: $--color-text-black !default;
-/// color||Color|0
-$--button-default-background-color: $--color-white !default;
-/// color||Color|0
-$--button-default-border-color: $--border-color-base !default;
-
-// 按钮禁用
-/// color||Color|0
-$--button-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--button-disabled-border-color: $--border-color-lighter !default;
-
-// 默认按钮
-$--primary-button-colors: (
-  $--color-primary-light-1,
-  $--color-primary-light-2,
-  $--color-primary-light-3,
-  $--color-primary-light-4,
-  $--color-primary-light-5,
-  $--color-primary-light-6,
-  $--color-primary-light-7,
-  $--color-primary-light-8,
-  $--color-primary-light-9,
-  $--color-primary-light-10
-);
-/// color||Color|0
-$--button-primary-border-color: nth($--primary-button-colors, 6) !default;
-/// color||Color|0
-$--button-primary-font-color: $--color-white !default;
-/// color||Color|0
-$--button-primary-background-color: nth($--primary-button-colors, 6) !default;
-/// color||Color|0
-$--button-primary-hover: nth($--primary-button-colors, 3) !default;
-/// color||Color|0
-$--button-primary-active: nth($--primary-button-colors, 7) !default;
-
-// 初始按钮
-$--initial-button-colors: (
-  $--blue-1,
-  $--blue-2,
-  $--blue-3,
-  $--blue-4,
-  $--blue-5,
-  $--blue-6,
-  $--blue-7,
-  $--blue-8,
-  $--blue-9,
-  $--blue-10
-);
-/// color||Color|0
-$--button-initial-border-color: nth($--initial-button-colors, 6) !default;
-/// color||Color|0
-$--button-initial-font-color: $--color-white !default;
-/// color||Color|0
-$--button-initial-background-color: nth($--initial-button-colors, 6) !default;
-/// color||Color|0
-$--button-initial-hover: nth($--primary-button-colors, 3) !default;
-/// color||Color|0
-$--button-initial-active: nth($--primary-button-colors, 7) !default;
-
-// 成功按钮
-$--success-button-colors: (
-  $--green-1,
-  $--green-2,
-  $--green-3,
-  $--green-4,
-  $--green-5,
-  $--green-6,
-  $--green-7,
-  $--green-8,
-  $--green-9,
-  $--green-10
-);
-/// color||Color|0
-$--button-success-border-color: nth($--success-button-colors, 5) !default;
-/// color||Color|0
-$--button-success-font-color: $--color-white !default;
-/// color||Color|0
-$--button-success-background-color: nth($--success-button-colors, 5) !default;
-/// color||Color|0
-$--button-success-hover: nth($--success-button-colors, 3) !default;
-/// color||Color|0
-$--button-success-active: nth($--success-button-colors, 7) !default;
-
-// 警告按钮
-$--warning-button-colors: (
-  $--gold-1,
-  $--gold-2,
-  $--gold-3,
-  $--gold-4,
-  $--gold-5,
-  $--gold-6,
-  $--gold-7,
-  $--gold-8,
-  $--gold-9,
-  $--gold-10
-);
-/// color||Color|0
-$--button-warning-border-color: nth($--warning-button-colors, 6) !default;
-/// color||Color|0
-$--button-warning-font-color: $--color-white !default;
-/// color||Color|0
-$--button-warning-background-color: nth($--warning-button-colors, 6) !default;
-/// color||Color|0
-$--button-warning-hover: nth($--warning-button-colors, 3) !default;
-/// color||Color|0
-$--button-warning-active: nth($--warning-button-colors, 7) !default;
-
-// 危险按钮
-$--danger-button-colors: (
-  $--red-1,
-  $--red-2,
-  $--red-3,
-  $--red-4,
-  $--red-5,
-  $--red-6,
-  $--red-7,
-  $--red-8,
-  $--red-9,
-  $--red-10
-);
-/// color||Color|0
-$--button-danger-border-color: nth($--danger-button-colors, 5) !default;
-/// color||Color|0
-$--button-danger-font-color: $--color-white !default;
-/// color||Color|0
-$--button-danger-background-color: nth($--danger-button-colors, 5) !default;
-/// color||Color|0
-$--button-danger-hover: nth($--danger-button-colors, 3) !default;
-/// color||Color|0
-$--button-danger-active: nth($--danger-button-colors, 7) !default;
-
-//  信息按钮
-$--info-button-colors: (
-  $--gray-1,
-  $--gray-2,
-  $--gray-3,
-  $--gray-4,
-  $--gray-5,
-  $--gray-6,
-  $--gray-7,
-  $--gray-8,
-  $--gray-9,
-  $--gray-10,
-  $--gray-11,
-  $--gray-12
-);
-/// color||Color|0
-$--button-info-border-color: nth($--info-button-colors, 7) !default;
-/// color||Color|0
-$--button-info-font-color: $--color-white !default;
-/// color||Color|0
-$--button-info-background-color: nth($--info-button-colors, 7) !default;
-/// color||Color|0
-$--button-info-hover: nth($--primary-button-colors, 3) !default;
-/// color||Color|0
-$--button-info-active: nth($--primary-button-colors, 7) !default;
-
-// hover和action的混合值
-$--button-hover-tint-percent: 20% !default;
-$--button-active-shade-percent: 10% !default;
-$--button-hover: $--color-primary-light-5 !default;
-$--button-active: $--color-primary-light-4 !default;
-/* cascader
--------------------------- */
-$--cascader-height: 200px !default;
-
-/* Switch
--------------------------- */
-/// color||Color|0
-$--switch-on-color: $--color-primary !default;
-/// color||Color|0
-$--switch-off-color: $--border-color-base !default;
-/// fontSize||Font|1
-$--switch-font-size: $--font-size-base !default;
-$--switch-core-border-radius: 10px !default;
-// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
-$--switch-width: 40px !default;
-// height||Other|4
-$--switch-height: 20px !default;
-// height||Other|4
-$--switch-button-size: 16px !default;
-$--switch-background-color-disabled: $--color-disabled !default;
-
-/* Dialog
--------------------------- */
-$--dialog-background-color: $--color-white !default;
-$--dialog-box-shadow: $--box-shadow-light !default;
-/// fontSize||Font|1
-$--dialog-title-font-size: $--font-size-large !default;
-/// fontSize||Font|1
-$--dialog-content-font-size: 14px !default;
-/// fontLineHeight||LineHeight|2
-$--dialog-font-line-height: $--font-line-height-primary !default;
-/// padding||Spacing|3
-$--dialog-padding-base: 10px !default;
-$--dialog-padding-primary: 10px 20px !default;
-$--dialog-header-background-color: #eeeeee !default;
-
-/* Table
--------------------------- */
-/// color||Color|0
-/// 因为rgba是透明的，after和td边框叠加会颜色加深
-$--table-border-color: rgbaToHex($--font-color-dividers) !default;
-$--table-border: 1px solid $--table-border-color !default;
-/// color||Color|0
-$--table-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--table-header-font-color: $--color-text-black !default;
-/// color||Color|0
-$--table-row-hover-background-color: $--background-color-base !default;
-$--table-current-row-background-color: $--color-primary-light-9 !default;
-/// color||Color|0
-$--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
-$--table-page-background-color: $--color-white !default;
-
-/* Pagination
--------------------------- */
-/// fontSize||Font|1
-$--pagination-font-size: $--font-size-base !default;
-/// color||Color|0
-$--pagination-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-font-color: $--color-text-primary !default;
-$--pagination-border-radius: 3px !default;
-/// color||Color|0
-$--pagination-button-color: $--color-text-primary !default;
-/// height||Other|4
-$--pagination-button-width: 35.5px !default;
-/// height||Other|4
-$--pagination-button-height: 28px !default;
-/// color||Color|0
-$--pagination-button-disabled-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--pagination-button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-hover-color: $--color-primary !default;
-
-/* Popup
--------------------------- */
-/// color||Color|0
-$--popup-modal-background-color: $--color-black !default;
-/// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
-
-/* Popover
--------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: $--font-size-base !default;
-/// color||Color|0
-$--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
-
-/* Tooltip
--------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
-
-/* Tag
--------------------------- */
-/// color||Color|0
-$--tag-info-color: $--color-info !default;
-/// color||Color|0
-$--tag-primary-color: $--color-primary !default;
-/// color||Color|0
-$--tag-success-color: $--color-success !default;
-/// color||Color|0
-$--tag-warning-color: $--color-warning !default;
-/// color||Color|0
-$--tag-danger-color: $--color-danger !default;
-/// fontSize||Font|1
-$--tag-font-size: $--font-size-extra-small !default;
-$--tag-border-radius: $--border-radius-base !default;
-$--tag-padding: 0 10px !default;
-$--tag-background-color: $--color-primary-light-1 !default;
-$--tag-border-color: $--color-primary-light-2 !default;
-$--tag-color: $--tag-primary-color !default;
-$--tag-hover-color: $--tag-primary-color !default;
-
-$--tag-dark-background-color: $--tag-primary-color !default;
-$--tag-dark-border-color: $--tag-primary-color !default;
-$--tag-dark-color: $--color-white !default;
-$--tag-dark-hover-color: $--color-primary-light-4 !default;
-
-$--tag-plain-background-color: $--color-white !default;
-$--tag-plain-border-color: $--color-primary-light-3 !default;
-$--tag-plain-color: $--tag-primary-color !default;
-$--tag-plain-hover-color: $--tag-primary-color !default;
-
-/* Tree
--------------------------- */
-/// color||Color|0
-$--tree-node-hover-background-color: $--font-color-background !default;
-/// color||Color|0
-$--tree-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--tree-expand-icon-color: $--border-color-light !default;
-
-$--tree-highlight-background-color: $--color-primary-light-1 !default;
-/* Dropdown
--------------------------- */
-$--dropdown-menu-box-shadow: $--box-shadow-dark !default;
-$--dropdown-menuItem-hover-fill: $--font-color-background !default;
-$--dropdown-menuItem-hover-color: $--link-color !default;
-
-/* Badge
--------------------------- */
-/// color||Color|0
-$--badge-background-color: $--color-danger !default;
-$--badge-radius: 10px !default;
-/// fontSize||Font|1
-$--badge-font-size: 12px !default;
-/// padding||Spacing|3
-$--badge-padding: 6px !default;
-/// height||Other|4
-$--badge-size: 18px !default;
-
-/* Card
---------------------------*/
-/// color||Color|0
-$--card-border-color: $--border-color-lighter !default;
-$--card-border-radius: $--border-radius-large !default;
-/// padding||Spacing|3
-$--card-padding: 20px !default;
-
-/* Slider
---------------------------*/
-/// color||Color|0
-$--slider-main-background-color: $--color-primary !default;
-/// color||Color|0
-$--slider-runway-background-color: $--font-color-background !default;
-$--slider-button-hover-color: $--color-primary-light-7 !default;
-$--slider-stop-background-color: $--color-white !default;
-$--slider-disable-color: $--font-color-disable !default;
-$--slider-margin: 16px 0 !default;
-$--slider-border-radius: 3px !default;
-/// height|1|Other|4
-$--slider-height: 6px !default;
-/// height||Other|4
-$--slider-button-size: 16px !default;
-$--slider-button-wrapper-size: 36px !default;
-$--slider-button-wrapper-offset: -15px !default;
-
-/* Steps
---------------------------*/
-$--steps-border-color: $--disabled-border-base !default;
-$--steps-border-radius: 4px !default;
-$--steps-padding: 20px !default;
-
-/* Menu
---------------------------*/
-/// fontSize||Font|1
-$--menu-item-font-size: $--font-size-base !default;
-/// color||Color|0
-$--menu-item-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--menu-background-color: $--color-white !default;
-$--menu-item-hover-fill: $--color-primary-light-1 !default;
-
-/* Rate
---------------------------*/
-$--rate-height: 20px !default;
-/// fontSize||Font|1
-$--rate-font-size: $--font-size-base !default;
-/// height||Other|3
-$--rate-icon-size: 18px !default;
-/// margin||Spacing|2
-$--rate-icon-margin: 6px !default;
-$--rate-icon-color: $--color-text-placeholder !default;
-
-/* DatePicker
---------------------------*/
-$--datepicker-font-size: $--font-size-base !default;
-$--datepicker-font-color: $--font-color-disable !default;
-/// color|1|Color|0
-$--datepicker-off-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--datepicker-header-font-color: $--font-color-title !default;
-$--datepicker-icon-color: $--color-text-primary !default;
-$--datepicker-border-color: $--disabled-border-base !default;
-$--datepicker-inner-border-color: #e4e4e4 !default;
-/// color||Color|0
-$--datepicker-inrange-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-active-color: $--color-primary !default;
-/// color||Color|0
-$--datepicker-hover-font-color: $--color-primary !default;
-$--datepicker-cell-hover-color: #fff !default;
-
-/* Loading
---------------------------*/
-/// height||Other|4
-$--loading-spinner-size: 42px !default;
-/// height||Other|4
-$--loading-fullscreen-spinner-size: 50px !default;
-
-/* Scrollbar
---------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
-$--scrollbar-hover-background-color: rgba(
-  $--color-text-secondary,
-  0.5
-) !default;
-
-/* Carousel
---------------------------*/
-/// fontSize||Font|1
-$--carousel-arrow-font-size: 12px !default;
-$--carousel-arrow-size: 36px !default;
-$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
-$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
-/// width||Other|4
-$--carousel-indicator-width: 30px !default;
-/// height||Other|4
-$--carousel-indicator-height: 2px !default;
-$--carousel-indicator-padding-horizontal: 4px !default;
-$--carousel-indicator-padding-vertical: 12px !default;
-$--carousel-indicator-out-color: $--border-color-hover !default;
-
-/* Collapse
---------------------------*/
-/// color||Color|0
-$--collapse-border-color: $--border-color-lighter !default;
-/// height||Other|4
-$--collapse-header-height: 48px !default;
-/// color||Color|0
-$--collapse-header-background-color: $--color-white !default;
-/// color||Color|0
-$--collapse-header-font-color: $--color-text-primary !default;
-/// fontSize||Font|1
-$--collapse-header-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--collapse-content-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-font-color: $--color-text-primary !default;
-
-/* Transfer
---------------------------*/
-$--transfer-border-color: $--border-color-lighter !default;
-$--transfer-border-radius: $--border-radius-base !default;
-/// height||Other|4
-$--transfer-panel-width: 200px !default;
-/// height||Other|4
-$--transfer-panel-header-height: 40px !default;
-/// color||Color|0
-$--transfer-panel-header-background-color: $--background-color-base !default;
-/// height||Other|4
-$--transfer-panel-footer-height: 40px !default;
-/// height||Other|4
-$--transfer-panel-body-height: 246px !default;
-/// height||Other|4
-$--transfer-item-height: 30px !default;
-/// height||Other|4
-$--transfer-filter-height: 32px !default;
-
-/* Header
-  --------------------------*/
-$--header-padding: 0 20px !default;
-
-/* Footer
---------------------------*/
-$--footer-padding: 0 20px !default;
-
-/* Main
---------------------------*/
-$--main-padding: $--base * 4 !default;
-
-/* Timeline
---------------------------*/
-$--timeline-node-size-normal: 12px !default;
-$--timeline-node-size-large: 14px !default;
-$--timeline-node-color: rgbaToHex($--font-color-disable) !default;
-
-/* Backtop
---------------------------*/
-/// color||Color|0
-$--backtop-background-color: $--color-white !default;
-/// color||Color|0
-$--backtop-font-color: $--color-primary !default;
-/// color||Color|0
-$--backtop-hover-background-color: $--border-color-extra-light !default;
-
-/* Link
---------------------------*/
-/// fontSize||Font|1
-$--link-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--link-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--link-default-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--link-default-active-color: $--color-primary !default;
-/// color||Color|0
-$--link-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--link-primary-font-color: $--color-primary !default;
-/// color||Color|0
-$--link-success-font-color: $--color-success !default;
-/// color||Color|0
-$--link-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--link-danger-font-color: $--color-danger !default;
-/// color||Color|0
-$--link-info-font-color: $--color-info !default;
-/* Calendar
---------------------------*/
-/// border||Other|4
-$--calendar-border: $--table-border !default;
-/// color||Other|4
-$--calendar-selected-background-color: #f2f8fe !default;
-$--calendar-cell-width: 85px !default;
-
-/* Form
--------------------------- */
-/// fontSize||Font|1
-$--form-label-font-size: $--font-size-base !default;
-$--form-label-background-color: #fafafa !default;
-
-/* Avatar
---------------------------*/
-/// color||Color|0
-$--avatar-font-color: #fff !default;
-/// color||Color|0
-$--avatar-background-color: $--color-primary !default;
-/// fontSize||Font Size|1
-$--avatar-text-font-size: 14px !default;
-/// fontSize||Font Size|1
-$--avatar-icon-font-size: 18px !default;
-/// borderRadius||Border|2
-$--avatar-border-radius: $--border-radius-base !default;
-/// size|1|Avatar Size|3
-$--avatar-large-size: 40px !default;
-/// size|1|Avatar Size|3
-$--avatar-medium-size: 36px !default;
-/// size|1|Avatar Size|3
-$--avatar-small-size: 28px !default;
-
-/* Empty
--------------------------- */
-$--empty-padding: 40px 0 !default;
-$--empty-image-width: 160px !default;
-$--empty-description-margin-top: 20px !default;
-$--empty-bottom-margin-top: 20px !default;
-
-/* Descriptions
--------------------------- */
-$--descriptions-header-margin-bottom: 20px !default;
-$--descriptions-title-font-size: 16px !default;
-$--descriptions-table-border: 1px solid $--font-color-dividers !default;
-$--descriptions-item-bordered-label-background: #fafafa !default;
-
-/* Skeleton 
---------------------------*/
-$--skeleton-color: $--font-color-dividers !default;
-$--skeleton-to-color: #e6e6e6 !default;
-
-/* Svg
---------------- */
-$--svg-monochrome-grey: #dcdde0 !default;
-
-/* Result
--------------------------- */
-$--result-padding: 40px 30px !default;
-$--result-icon-font-size: 64px !default;
-$--result-title-font-size: 20px !default;
-$--result-title-margin-top: 20px !default;
-$--result-subtitle-margin-top: 10px !default;
-$--result-extra-margin-top: 30px !default;
-$--result-info-color: $--color-info !default;
-$--result-success-color: $--color-success !default;
-$--result-warning-color: $--color-warning !default;
-$--result-danger-color: $--color-danger !default;
-
-/* Break-point
---------------------------*/
-$--sm: 768px !default;
-$--md: 992px !default;
-$--lg: 1200px !default;
-$--xl: 1920px !default;
-
-$--breakpoints: (
-  'xs': (
-    max-width: $--sm - 1
-  ),
-  'sm': (
-    min-width: $--sm
-  ),
-  'md': (
-    min-width: $--md
-  ),
-  'lg': (
-    min-width: $--lg
-  ),
-  'xl': (
-    min-width: $--xl
-  )
-);
-
-$--breakpoints-spec: (
-  'xs-only': (
-    max-width: $--sm - 1
-  ),
-  'sm-and-up': (
-    min-width: $--sm
-  ),
-  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
-  'sm-and-down': (
-    max-width: $--md - 1
-  ),
-  'md-and-up': (
-    min-width: $--md
-  ),
-  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
-  'md-and-down': (
-    max-width: $--lg - 1
-  ),
-  'lg-and-up': (
-    min-width: $--lg
-  ),
-  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
-  'lg-and-down': (
-    max-width: $--xl - 1
-  ),
-  'xl-only': (
-    min-width: $--xl
-  )
-);
-
-/// color||Color|0
-$--form-label-color: #666 !default;
-$--form-label-size: $--font-size-base !default;
-$--form-label-padding: 8px 0 !default;
-$--form-label-width: 88px !default;
-
-//main
-//header
-$--main-header-height: 60px !default;
+/* Element Chalk Variables */
+
+// Special comment for theme configurator
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
+// rgb 颜色转 hex
+@function rgbToHex($rgbColor) {
+  $ieHexStr: ie-hex-str($rgbColor);
+  @return unquote('\##{str-slice($ieHexStr,4)}');
+}
+// rgba 颜色转 hex ,该函数是根据背景颜色来计算的。默认背景色是白色
+@function rgbaToHex($rgbaColor, $background: rgb(255, 255, 255)) {
+  @if ($rgbaColor) {
+    $bgR: red($background);
+    $bgG: green($background);
+    $bgB: blue($background);
+
+    $colorRed: red($rgbaColor);
+    $colorGreen: green($rgbaColor);
+    $colorBlue: blue($rgbaColor);
+    $colorAlpha: alpha($rgbaColor);
+
+    $rgbColor: rgb(
+      (1 - $colorAlpha) * $bgR + $colorAlpha * $colorRed,
+      (1 - $colorAlpha) * $bgG + $colorAlpha * $colorGreen,
+      (1 - $colorAlpha) * $bgB + $colorAlpha * $colorBlue
+    );
+    @return rgbToHex($rgbColor);
+  }
+  @return $rgbaColor;
+}
+@import '../mixins/color.scss';
+/* Transition
+-------------------------- */
+// 基本动画
+$--all-transition-base: all 0.2s linear;
+$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+// opacity淡出动画
+$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+// opacity线性淡出
+$--fade-linear-transition: opacity 200ms linear !default;
+// 动画淡出动画
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+// 边框过度动画
+$--border-transition-base: border-color 0.2s
+  cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+// color颜色过渡动画
+$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+
+/* Color
+-------------------------- */
+
+$--blue-Base: #1890ff;
+$--blue-1: getColor($--blue-Base, 1);
+$--blue-2: getColor($--blue-Base, 2);
+$--blue-3: getColor($--blue-Base, 3);
+$--blue-4: getColor($--blue-Base, 4);
+$--blue-5: getColor($--blue-Base, 5);
+$--blue-6: $--blue-Base;
+$--blue-7: getColor($--blue-Base, 7);
+$--blue-8: getColor($--blue-Base, 8);
+$--blue-9: getColor($--blue-Base, 9);
+$--blue-10: getColor($--blue-Base, 10);
+
+$--purple-base: #722ed1;
+$--purple-1: getColor($--purple-base, 1);
+$--purple-2: getColor($--purple-base, 2);
+$--purple-3: getColor($--purple-base, 3);
+$--purple-4: getColor($--purple-base, 4);
+$--purple-5: getColor($--purple-base, 5);
+$--purple-6: $--purple-base;
+$--purple-7: getColor($--purple-base, 7);
+$--purple-8: getColor($--purple-base, 8);
+$--purple-9: getColor($--purple-base, 9);
+$--purple-10: getColor($--purple-base, 10);
+
+$--cyan-base: #13c2c2;
+$--cyan-1: getColor($--cyan-base, 1);
+$--cyan-2: getColor($--cyan-base, 2);
+$--cyan-3: getColor($--cyan-base, 3);
+$--cyan-4: getColor($--cyan-base, 4);
+$--cyan-5: getColor($--cyan-base, 5);
+$--cyan-6: $--cyan-base;
+$--cyan-7: getColor($--cyan-base, 7);
+$--cyan-8: getColor($--cyan-base, 8);
+$--cyan-9: getColor($--cyan-base, 9);
+$--cyan-10: getColor($--cyan-base, 10);
+
+$--green-base: #52c41a;
+$--green-1: getColor($--green-base, 1);
+$--green-2: getColor($--green-base, 2);
+$--green-3: getColor($--green-base, 3);
+$--green-4: getColor($--green-base, 4);
+$--green-5: getColor($--green-base, 5);
+$--green-6: $--green-base;
+$--green-7: getColor($--green-base, 7);
+$--green-8: getColor($--green-base, 8);
+$--green-9: getColor($--green-base, 9);
+$--green-10: getColor($--green-base, 10);
+
+$--magenta-base: #eb2f96;
+$--magenta-1: getColor($--magenta-base, 1);
+$--magenta-2: getColor($--magenta-base, 2);
+$--magenta-3: getColor($--magenta-base, 3);
+$--magenta-4: getColor($--magenta-base, 4);
+$--magenta-5: getColor($--magenta-base, 5);
+$--magenta-6: $--magenta-base;
+$--magenta-7: getColor($--magenta-base, 7);
+$--magenta-8: getColor($--magenta-base, 8);
+$--magenta-9: getColor($--magenta-base, 9);
+$--magenta-10: getColor($--magenta-base, 10);
+
+$--red-base: #f5222d;
+$--red-1: getColor($--red-base, 1);
+$--red-2: getColor($--red-base, 2);
+$--red-3: getColor($--red-base, 3);
+$--red-4: getColor($--red-base, 4);
+$--red-5: getColor($--red-base, 5);
+$--red-6: $--red-base;
+$--red-7: getColor($--red-base, 7);
+$--red-8: getColor($--red-base, 8);
+$--red-9: getColor($--red-base, 9);
+$--red-10: getColor($--red-base, 10);
+
+$--orange-base: #fa8c16;
+$--orange-1: getColor($--orange-base, 1);
+$--orange-2: getColor($--orange-base, 2);
+$--orange-3: getColor($--orange-base, 3);
+$--orange-4: getColor($--orange-base, 4);
+$--orange-5: getColor($--orange-base, 5);
+$--orange-6: $--orange-base;
+$--orange-7: getColor($--orange-base, 7);
+$--orange-8: getColor($--orange-base, 8);
+$--orange-9: getColor($--orange-base, 9);
+$--orange-10: getColor($--orange-base, 10);
+
+$--yellow-base: #fadb14;
+$--yellow-1: getColor($--yellow-base, 1);
+$--yellow-2: getColor($--yellow-base, 2);
+$--yellow-3: getColor($--yellow-base, 3);
+$--yellow-4: getColor($--yellow-base, 4);
+$--yellow-5: getColor($--yellow-base, 5);
+$--yellow-6: $--yellow-base;
+$--yellow-7: getColor($--yellow-base, 7);
+$--yellow-8: getColor($--yellow-base, 8);
+$--yellow-9: getColor($--yellow-base, 9);
+$--yellow-10: getColor($--yellow-base, 10);
+
+$--volcano-base: #fa541c;
+$--volcano-1: getColor($--volcano-base, 1);
+$--volcano-2: getColor($--volcano-base, 2);
+$--volcano-3: getColor($--volcano-base, 3);
+$--volcano-4: getColor($--volcano-base, 4);
+$--volcano-5: getColor($--volcano-base, 5);
+$--volcano-6: $--volcano-base;
+$--volcano-7: getColor($--volcano-base, 7);
+$--volcano-8: getColor($--volcano-base, 8);
+$--volcano-9: getColor($--volcano-base, 9);
+$--volcano-10: getColor($--volcano-base, 10);
+
+$--geekblue-base: #2f54eb;
+$--geekblue-1: getColor($--geekblue-base, 1);
+$--geekblue-2: getColor($--geekblue-base, 2);
+$--geekblue-3: getColor($--geekblue-base, 3);
+$--geekblue-4: getColor($--geekblue-base, 4);
+$--geekblue-5: getColor($--geekblue-base, 5);
+$--geekblue-6: $--geekblue-base;
+$--geekblue-7: getColor($--geekblue-base, 7);
+$--geekblue-8: getColor($--geekblue-base, 8);
+$--geekblue-9: getColor($--geekblue-base, 9);
+$--geekblue-10: getColor($--geekblue-base, 10);
+
+$--lime-base: #a0d911;
+$--lime-1: getColor($--lime-base, 1);
+$--lime-2: getColor($--lime-base, 2);
+$--lime-3: getColor($--lime-base, 3);
+$--lime-4: getColor($--lime-base, 4);
+$--lime-5: getColor($--lime-base, 5);
+$--lime-6: $--lime-base;
+$--lime-7: getColor($--lime-base, 7);
+$--lime-8: getColor($--lime-base, 8);
+$--lime-9: getColor($--lime-base, 9);
+$--lime-10: getColor($--lime-base, 10);
+
+$--gold-base: #faad14;
+$--gold-1: getColor($--gold-base, 1);
+$--gold-2: getColor($--gold-base, 2);
+$--gold-3: getColor($--gold-base, 3);
+$--gold-4: getColor($--gold-base, 4);
+$--gold-5: getColor($--gold-base, 5);
+$--gold-6: $--gold-base;
+$--gold-7: getColor($--gold-base, 7);
+$--gold-8: getColor($--gold-base, 8);
+$--gold-9: getColor($--gold-base, 9);
+$--gold-10: getColor($--gold-base, 10);
+
+$--gray-1: #ffffff;
+$--gray-2: #fafafa;
+$--gray-3: #f5f5f5;
+$--gray-4: #f0f0f0;
+$--gray-5: #d9d9d9;
+$--gray-6: #bfbfbf;
+$--gray-7: #8c8c8c;
+$--gray-8: #595959;
+$--gray-9: #434343;
+$--gray-10: #262626;
+$--gray-11: #1f1f1f;
+$--gray-12: #141414;
+$--gray-13: #000000;
+/// color|1|Brand Color|0
+$--color-primary: #12278B !default;
+/// color|1|Background Color|4
+$--color-white: #ffffff !default;
+/// color|1|Background Color|4
+$--color-black: #000000 !default;
+$--color-primary-light-1: getColor($--color-primary, 1) !default; /* 53a8ff */
+$--color-primary-light-2: getColor($--color-primary, 2) !default; /* 66b1ff */
+$--color-primary-light-3: getColor($--color-primary, 3) !default; /* 79bbff */
+$--color-primary-light-4: getColor($--color-primary, 4) !default; /* 8cc5ff */
+$--color-primary-light-5: getColor($--color-primary, 5) !default; /* a0cfff */
+$--color-primary-light-6: $--color-primary !default; /* a0cfff */
+$--color-primary-light-7: getColor($--color-primary, 7) !default; /* b3d8ff */
+$--color-primary-light-8: getColor($--color-primary, 8) !default; /* c6e2ff */
+$--color-primary-light-9: getColor($--color-primary, 9) !default; /* d9ecff */
+$--color-primary-light-10: getColor($--color-primary, 10) !default; /* ecf5ff */
+
+/// 成功色
+$--color-success: $--green-6 !default;
+$--color-success-hover: $--green-4 !default;
+// 禁用
+$--color-disabled: $--gray-8 !default;
+$--color-disabled-hover: $--gray-7 !default;
+/// 警告色
+$--color-warning: $--gold-6 !default;
+$--color-warning-hover: $--gold-5 !default;
+// 错误色
+$--color-danger: $--red-6 !default;
+$--color-danger-hover: $--red-4 !default;
+/// 信息
+$--color-info: $--gray-7 !default;
+$--color-info-hover: $--gray-6 !default;
+
+// 辅助色边框
+$--color-success-light: $--green-2 !default;
+$--color-warning-light: $--gold-2 !default;
+$--color-danger-light: $--red-2 !default;
+$--color-info-light: $--gray-2 !default;
+
+// 辅助色背景
+$--color-success-lighter: $--green-1 !default;
+$--color-warning-lighter: $--gold-1 !default;
+$--color-danger-lighter: $--red-1 !default;
+$--color-info-lighter: $--gray-3 !default;
+
+// 各类辅助色在色板中起始位置
+$--type--index: (
+  primary: 6,
+  danger: 5,
+  success: 6,
+  warning: 6,
+  info: 6
+);
+
+// 文字默认颜色
+$--font-color-title: rgba(0, 0, 0, 0.85);
+$--font-color-primary: rgba(0, 0, 0, 0.75);
+$--font-color-secondary: rgba(0, 0, 0, 0.45);
+$--font-color-disable: rgba(0, 0, 0, 0.25);
+$--font-color-border: rgba(0, 0, 0, 0.15);
+$--font-color-dividers: rgba(0, 0, 0, 0.06);
+$--font-color-background: rgba(0, 0, 0, 0.04);
+$--font-color-table-header: rgba(0, 0, 0, 0.02);
+
+/// color|1|Font Color|2
+$--color-text-primary: $--font-color-primary !default;
+/// color|1|Font Color|2
+$--color-text-regular: $--font-color-primary !default;
+$--color-text-black: $--font-color-title !default;
+/// color|1|Font Color|2
+$--color-text-secondary: $--font-color-secondary !default;
+/// color|1|Font Color|2
+$--color-text-placeholder: rgba(0, 0, 0, 0.25) !default;
+/// color|1|Border Color|3
+$--border-color-base: $--gray-5 !default;
+/// color|1|Border Color|3
+$--border-color-light: $--font-color-border !default;
+/// color|1|Border Color|3
+$--border-color-lighter: $--gray-5 !default;
+/// color|1|Border Color|3
+$--border-color-extra-light: $--gray-3 !default;
+
+// Background
+/// color|1|Background Color|4
+$--background-color-base: $--gray-2 !default;
+
+/* Link
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+/// borderRadius|1|Radius|0
+$--border-radius-base: 3px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-small: 3px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-circle: 100% !default;
+/// borderRadius|1|Radius|0
+$--border-radius-zero: 0 !default;
+/// borderRadius|1|Radius|0
+$--border-radius-large: 6px !default;
+
+// Box-shadow
+/// boxShadow|基础层
+// 阴影颜色变量，因为rgba本身也是sass色彩函数，所以sass会将带有透明度的rgba直接转成色彩关键词，失去css的rgba的色彩
+$--box-shadow-rgba4: rgba(0, 0, 0, 0.04) !default;
+$--box-shadow-rgba5: rgba(0, 0, 0, 0.05) !default;
+$--box-shadow-rgba6: rgba(0, 0, 0, 0.06) !default;
+$--box-shadow-rgba8: rgba(0, 0, 0, 0.08) !default;
+$--box-shadow-rgba10: rgba(0, 0, 0, 0.1) !default;
+$--box-shadow-rgba12: rgba(0, 0, 0, 0.12) !default;
+// 三层box-shadow
+// 组件 hover 状态使用，例如表格和树拖动
+$--box-shadow-base: 0 1px 10px $--box-shadow-rgba5,
+  0 4px 5px $--box-shadow-rgba8, 0 2px 4px -1px $--box-shadow-rgba12 !default;
+// boxShadow|中层｜下拉组件使用，例如下拉菜单 / 气泡确认框 / 选择器 等
+$--box-shadow-dark: 0 3px 14px 2px $--box-shadow-rgba5,
+  0 8px 10px 1px $--box-shadow-rgba6, 0 5px 5px -3px $--box-shadow-rgba10 !default;
+/// boxShadow|上层｜警示或弹窗组件使用，例如全局提示 / 消息通知等
+$--box-shadow-light: 0 6px 30px 5px $--box-shadow-rgba5,
+  0 16px 24px 2px $--box-shadow-rgba4, 0 8px 10px -5px $--box-shadow-rgba8 !default;
+
+/* Fill
+-------------------------- */
+$--fill-base: $--color-white !default;
+
+/* ------初始值------*/
+$--base: 4px;
+
+/* Typography
+-------------------------- */
+$--eoss-font-path: 'fonts' !default;
+$--es-font-path: $--eoss-font-path !default;
+$--font-display: 'auto' !default;
+// 字体大小
+/// display1 报告标题、关键数据展示
+$--font-size-title-large: 36px !default;
+/// display2 数字面额
+$--font-size-number-large: 32px !default;
+/// display3 数字面额
+$--font-size-number-extra-large: 24px !default;
+/// display4 主标题
+$--font-size-extra-large: 20px !default;
+/// display5 标题
+$--font-size-large: 18px !default;
+/// display6 小标题
+$--font-size-medium: 16px !default;
+/// display7 正文
+$--font-size-base: 14px !default;
+/// fontSize|1|Font Size|0
+$--font-size-small: 12px !default;
+/// display8 辅助文字
+$--font-size-extra-small: 12px !default;
+
+// 字重
+/// 默认、字重 400 等于 Windows 和 macOS 系统下的 Regular 显示效果
+$--font-weight-primary: 400 !default;
+/// 次要、字重 600 等于 Windows 系统下的 Bold 显示效果和 macOS 系统下的 Semibold 显示效果。
+$--font-weight-semibold: 600 !default;
+/// 默认行高
+$--font-line-height-primary: 24px !default;
+/// 次要行高
+$--font-line-height-secondary: 16px !default;
+// 禁用文字颜色
+$--font-color-disabled-base: #bbb !default;
+// 字体和行高的计算基准值
+$--font-height-var: 8px;
+/* Size
+-------------------------- */
+$--size-base: 14px !default;
+
+/* z-index
+-------------------------- */
+$--index-normal: 1 !default;
+$--index-top: 1000 !default;
+$--index-popper: 2000 !default;
+
+/* Disable base
+-------------------------- */
+$--disabled-fill-base: $--background-color-base !default;
+$--disabled-color-base: $--color-text-placeholder !default;
+$--disabled-border-base: $--border-color-light !default;
+
+/* Icon
+-------------------------- */
+$--icon-color: #666 !default;
+$--icon-color-base: $--color-info !default;
+
+/* Checkbox
+-------------------------- */
+/// fontSize||Font|1
+$--checkbox-font-size: 14px !default;
+/// fontWeight||Font|1
+$--checkbox-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--checkbox-font-color: $--font-color-primary !default;
+$--checkbox-input-height: 14px !default;
+$--checkbox-input-width: 14px !default;
+/// borderRadius||Border|2
+$--checkbox-border-radius: $--border-radius-small !default;
+/// color||Color|0
+$--checkbox-background-color: $--color-white !default;
+$--checkbox-input-border: $--border-base !default;
+
+/// color||Color|0
+$--checkbox-disabled-border-color: $--border-color-base !default;
+$--checkbox-disabled-input-fill: $--border-color-extra-light !default;
+$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-disabled-checked-input-fill: rgba(192, 196, 204, 0.6);
+$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
+$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
+$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+/// color||Color|0
+$--checkbox-checked-font-color: $--font-color-title !default;
+$--checkbox-checked-input-border-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-background-color: $--color-primary !default;
+$--checkbox-checked-icon-color: $--fill-base !default;
+
+$--checkbox-input-border-color-hover: $--color-primary !default;
+/// height||Other|4
+$--checkbox-bordered-height: 40px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-padding: 8px 20px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-large-padding: 8px 20px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-medium-padding: 4px 12px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-small-padding: 3px 8px !default;
+/// padding||Spacing|3
+$--checkbox-bordered-mini-padding: 2px 8px !default;
+$--checkbox-bordered-medium-input-height: 14px !default;
+$--checkbox-bordered-medium-input-width: 14px !default;
+/// height||Other|4
+$--checkbox-bordered-medium-height: 36px !default;
+$--checkbox-bordered-small-input-height: 12px !default;
+$--checkbox-bordered-small-input-width: 12px !default;
+/// height||Other|4
+$--checkbox-bordered-small-height: 32px !default;
+$--checkbox-bordered-mini-input-height: 12px !default;
+$--checkbox-bordered-mini-input-width: 12px !default;
+/// height||Other|4
+$--checkbox-bordered-mini-height: 28px !default;
+
+/// color||Color|0
+$--checkbox-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-button-checked-font-color: $--color-white !default;
+/// color||Color|0
+$--checkbox-button-checked-border-color: $--color-primary !default;
+
+/* 按钮选中且被禁用*/
+/// color||Color|0
+$--checkbox-disabled-button-checked-background-color: $--font-color-disable !default;
+/// color||Color|0
+$--checkbox-disabled-button-checked-font-color: $--font-color-disable !default;
+/// color||Color|0
+$--checkbox-disabled-button-checked-border-color: $--font-color-disable !default;
+
+/* Radio
+-------------------------- */
+/// fontSize||Font|1
+$--radio-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--radio-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--radio-font-color: $--font-color-primary !default;
+$--radio-input-height: 14px !default;
+$--radio-input-width: 14px !default;
+/// borderRadius||Border|2
+$--radio-input-border-radius: $--border-radius-circle !default;
+/// color||Color|0
+$--radio-input-background-color: $--color-white !default;
+$--radio-input-border: $--border-base !default;
+/// color||Color|0
+$--radio-input-border-color: $--border-color-base !default;
+/// color||Color|0
+$--radio-icon-color: $--color-white !default;
+
+$--radio-disabled-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-icon-color: $--disabled-fill-base !default;
+
+$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+/// color||Color|0
+$--radio-checked-font-color: $--font-color-title !default;
+/// color||Color|0
+$--radio-checked-input-border-color: $--color-primary !default;
+/// color||Color|0
+$--radio-checked-input-background-color: $--color-white !default;
+/// color||Color|0
+$--radio-checked-icon-color: $--color-primary !default;
+
+$--radio-input-border-color-hover: $--color-primary !default;
+
+$--radio-bordered-height: 40px !default;
+// 默认radio padding
+$--radio-bordered-padding: 8px 20px !default;
+// 大型radio padding
+$--radio-bordered-large-padding: 8px 20px !default;
+// 中型radio padding
+$--radio-bordered-medium-padding: 4px 12px !default;
+// 小型radio padding
+$--radio-bordered-small-padding: 3px 8px !default;
+// 迷你radio padding
+$--radio-bordered-mini-padding: 2px 8px !default;
+
+$--radio-bordered-large-input-height: 14px !default;
+$--radio-bordered-large-input-width: 14px !default;
+$--radio-bordered-medium-input-height: 14px !default;
+$--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
+$--radio-bordered-small-input-height: 12px !default;
+$--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
+$--radio-bordered-mini-input-height: 12px !default;
+$--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
+
+/// fontSize||Font|1
+$--radio-button-font-size: $--font-size-base !default;
+/// color||Color|0
+$--radio-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--radio-button-checked-font-color: $--color-white !default;
+/// color||Color|0
+$--radio-button-checked-border-color: $--color-primary !default;
+$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
+
+/* Select
+-------------------------- */
+$--select-border-color-hover: $--color-primary !default;
+$--select-disabled-border: $--disabled-border-base !default;
+/// fontSize||Font|1
+$--select-font-size: $--font-size-base !default;
+$--select-close-hover-color: $--color-text-secondary !default;
+
+$--select-input-color: $--color-text-placeholder !default;
+$--select-multiple-input-color: #666 !default;
+/// color||Color|0
+$--select-input-focus-border-color: $--color-primary !default;
+/// fontSize||Font|1
+$--select-input-font-size: 14px !default;
+
+$--select-option-color: $--color-text-regular !default;
+$--select-option-disabled-color: $--color-text-placeholder !default;
+$--select-option-disabled-background: $--color-white !default;
+/// height||Other|4
+$--select-option-height: 34px !default;
+$--select-option-hover-background: $--background-color-base !default;
+/// color||Color|0
+$--select-option-selected-font-color: $--color-primary !default;
+$--select-option-selected-hover: $--background-color-base !default;
+
+$--select-group-color: $--color-info !default;
+$--select-group-height: 30px !default;
+$--select-group-font-size: 12px !default;
+
+$--select-dropdown-background: $--color-white !default;
+$--select-dropdown-shadow: $--box-shadow-dark !default;
+$--select-dropdown-empty-color: #999 !default;
+/// height||Other|4
+$--select-dropdown-max-height: 274px !default;
+$--select-dropdown-padding: 6px 0 !default;
+$--select-dropdown-empty-padding: 10px 0 !default;
+$--select-dropdown-border: solid 1px $--border-color-light !default;
+
+/* Alert
+-------------------------- */
+$--alert-padding: 8px 16px !default;
+/// alert边框圆角
+$--alert-border-radius: $--border-radius-base !default;
+/// alert标题字体大小
+$--alert-title-font-size: 14px !default;
+/// alert内容字体大小
+$--alert-description-font-size: 12px !default;
+/// alert关闭图标大小
+$--alert-close-font-size: 12px !default;
+/// alert关闭文字大小
+$--alert-close-customed-font-size: 14px !default;
+
+// 成功背景色
+$--alert-success-color: $--color-success-lighter !default;
+// 信息背景色
+$--alert-info-color: $--color-info-lighter !default;
+// 警告背景色
+$--alert-warning-color: $--color-warning-lighter !default;
+// 错误背景色
+$--alert-danger-color: $--color-danger-lighter !default;
+
+/// height||Other|4
+$--alert-icon-size: 16px !default;
+/// height||Other|4
+$--alert-icon-large-size: 28px !default;
+
+/* MessageBox
+-------------------------- */
+/// color||Color|0
+/// 弹出框标题颜色
+$--messagebox-title-color: $--color-text-primary !default;
+// 弹出框宽度
+$--msgbox-width: 420px !default;
+// 弹出框圆角
+$--msgbox-border-radius: 3px !default;
+/// 弹出框字体大小
+$--messagebox-font-size: $--font-size-large !default;
+/// 内容字体大小
+$--messagebox-content-font-size: $--font-size-base !default;
+/// 内容文字颜色
+$--messagebox-content-color: $--color-text-regular !default;
+/// 错误字体大小
+$--messagebox-error-font-size: 12px !default;
+// 常规padding距离
+$--msgbox-padding-primary: 15px !default;
+/// 成功文字颜色
+$--messagebox-success-color: $--color-success !default;
+/// 信息文字颜色
+$--messagebox-info-color: $--color-info !default;
+/// 警告文字颜色
+$--messagebox-warning-color: $--color-warning !default;
+/// 错误文字颜色
+$--messagebox-danger-color: $--color-danger !default;
+
+/* Message
+-------------------------- */
+$--message-shadow: $--box-shadow-base !default;
+$--message-min-width: 380px !default;
+$--message-background-color: $--gray-2 !default;
+$--message-padding: 15px 15px 15px 20px !default;
+/// 关闭按钮颜色
+$--message-close-icon-color: $--gray-7 !default;
+/// 关闭按钮大小
+$--message-close-size: 16px !default;
+/// 关闭按钮hover颜色
+$--message-close-hover-color: $--color-text-secondary !default;
+
+/// 成功提示颜色
+$--message-success-font-color: $--color-success !default;
+$--message-success-hover-font-color: $--color-success-hover !default;
+/// 信息提示颜色
+$--message-info-font-color: $--color-info !default;
+$--message-info-hover-font-color: $--color-info-hover !default;
+/// 警告提示颜色
+$--message-warning-font-color: $--color-warning !default;
+$--message-warning-hover-font-color: $--color-warning-hover !default;
+/// 错误提示颜色
+$--message-danger-font-color: $--color-danger !default;
+$--message-danger-hover-font-color: $--color-danger-hover !default;
+
+/* Notification
+-------------------------- */
+// 宽度
+$--notification-width: 330px !default;
+/// padding
+$--notification-padding: 12px 26px 12px 12px !default;
+// 圆角
+$--notification-radius: $--border-radius-large !default;
+// 阴影
+$--notification-shadow: $--box-shadow-light !default;
+/// 边框颜色
+$--notification-border-color: $--border-color-lighter !default;
+// 图标大小
+$--notification-icon-size: 24px !default;
+// 关闭按钮大小
+$--notification-close-font-size: $--message-close-size !default;
+// 内容容器margin-left
+$--notification-group-margin-left: 12px !default;
+// 内容容器margin-right
+$--notification-group-margin-right: 8px !default;
+/// 内容文字大小
+$--notification-content-font-size: $--font-size-base !default;
+/// 内容文字颜色
+$--notification-content-color: $--color-text-secondary !default;
+/// 标题文字大小
+$--notification-title-font-size: $--font-size-medium !default;
+/// 标题文字颜色
+$--notification-title-color: $--color-text-black !default;
+
+/// 关闭按钮颜色
+$--notification-close-color: $--color-text-secondary !default;
+/// 关闭按钮hover颜色
+$--notification-close-hover-color: $--color-text-regular !default;
+
+/// 成功图标颜色
+$--notification-success-icon-color: $--color-success !default;
+/// 详情图标颜色
+$--notification-info-icon-color: $--color-info !default;
+/// 警告图标颜色
+$--notification-warning-icon-color: $--color-warning !default;
+/// 错误图标颜色
+$--notification-danger-icon-color: $--color-danger !default;
+
+/* Input
+-------------------------- */
+$--input-font-size: $--font-size-base !default;
+/// color||Color|0
+$--input-font-color: $--color-text-regular !default;
+/// height||Other|4
+$--input-width: 140px !default;
+/// height||Other|4
+$--input-height: 40px !default;
+
+$--input-border: $--border-base !default;
+$--input-border-color: $--border-color-base !default;
+/// borderRadius||Border|2
+$--input-border-radius: $--border-radius-base !default;
+$--input-border-color-hover: $--border-color-hover !default;
+/// color||Color|0
+$--input-background-color: $--color-white !default;
+$--input-fill-disabled: $--disabled-fill-base !default;
+$--input-color-disabled: $--font-color-disabled-base !default;
+/// color||Color|0
+$--input-icon-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--input-placeholder-color: $--color-text-placeholder !default;
+$--input-max-width: 314px !default;
+
+$--input-hover-border: $--color-primary !default;
+$--input-clear-hover-color: $--color-text-secondary !default;
+
+$--input-focus-border: $--color-primary !default;
+$--input-focus-fill: $--color-white !default;
+$--input-focus-color: $--color-black !default;
+
+$--input-disabled-fill: $--font-color-background !default;
+$--input-disabled-border: $--disabled-border-base !default;
+$--input-disabled-color: $--font-color-background !default;
+$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+
+/// fontSize||Font|1
+$--input-large-font-size: 14px !default;
+/// height||Other|4
+$--input-large-height: 40px !default;
+/// fontSize||Font|1
+$--input-medium-font-size: 14px !default;
+/// height||Other|4
+$--input-medium-height: 32px !default;
+/// fontSize||Font|1
+$--input-small-font-size: 12px !default;
+/// height||Other|4
+$--input-small-height: 30px !default;
+/// fontSize||Font|1
+$--input-mini-font-size: 12px !default;
+/// height||Other|4
+$--input-mini-height: 26px !default;
+
+/* Cascader
+-------------------------- */
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--cascader-menu-selected-font-color: $--color-primary !default;
+$--cascader-menu-fill: $--fill-base !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: solid 1px transparent !default;
+$--cascader-menu-shadow: $--box-shadow-light !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled: $--color-text-placeholder !default;
+$--cascader-color-empty: $--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
+
+/* Group
+-------------------------- */
+$--group-option-flex: 0 0 (1 * 0.2) * 100% !default;
+$--group-option-offset-bottom: 12px !default;
+$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
+$--group-title-color: $--color-black !default;
+$--group-title-font-size: $--font-size-base !default;
+$--group-title-width: 66px !default;
+
+/* Tab
+-------------------------- */
+$--tab-font-size: $--font-size-base !default;
+$--tab-border-line: 1px solid #e4e4e4 !default;
+$--tab-header-color-active: $--color-text-secondary !default;
+$--tab-header-color-hover: $--color-text-regular !default;
+$--tab-header-color: $--color-text-regular !default;
+$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
+$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
+$--tab-vertical-header-width: 90px !default;
+$--tab-vertical-header-count-color: $--color-white !default;
+$--tab-vertical-header-count-fill: $--color-text-secondary !default;
+
+/* Button
+-------------------------- */
+// 默认按钮
+$--button-height: 40px !default;
+// 文字行高
+$--button-font-height: 22px !default;
+/// fontSize||Font|1
+$--button-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--button-font-weight: $--font-weight-primary !default;
+/// borderRadius||Border|2
+$--button-border-radius: $--border-radius-small !default;
+/// padding||Spacing|3
+$--button-padding-vertical: 8px !default;
+/// padding||Spacing|3
+$--button-padding-horizontal: 20px !default;
+
+// 中等按钮
+$--button-medium-height: 32px !default;
+// 文字行高
+$--button-medium-font-height: 22px !default;
+/// fontSize||Font|1
+$--button-medium-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
+$--button-medium-border-radius: $--border-radius-small !default;
+/// borderRadius||Border|2
+$--button-medium-border-radius: $--border-radius-small !default;
+/// padding||Spacing|3
+$--button-medium-padding-vertical: 4px !default;
+/// padding||Spacing|3
+$--button-medium-padding-horizontal: 12px !default;
+
+// 小按钮
+$--button-small-height: 28px;
+// 文字杭高
+$--button-small-font-height: 18px;
+/// fontSize||Font|1
+$--button-small-font-size: 12px !default;
+$--button-small-border-radius: $--border-radius-small !default;
+/// padding||Spacing|3
+$--button-small-padding-vertical: 4px !default;
+/// padding||Spacing|3
+$--button-small-padding-horizontal: 8px !default;
+
+// 超小按钮
+$--button-mini-height: 24px;
+// 文字杭高
+$--button-mini-font-height: 18px;
+/// fontSize||Font|1
+$--button-mini-font-size: 12px !default;
+$--button-mini-border-radius: $--border-radius-small !default;
+/// padding||Spacing|3
+$--button-mini-padding-vertical: 2px !default;
+/// padding||Spacing|3
+$--button-mini-padding-horizontal: 8px !default;
+
+/// color||Color|0
+$--button-default-font-color: $--color-text-black !default;
+/// color||Color|0
+$--button-default-background-color: $--color-white !default;
+/// color||Color|0
+$--button-default-border-color: $--border-color-base !default;
+
+// 按钮禁用
+/// color||Color|0
+$--button-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--button-disabled-border-color: $--border-color-lighter !default;
+
+// 默认按钮
+$--primary-button-colors: (
+  $--color-primary-light-1,
+  $--color-primary-light-2,
+  $--color-primary-light-3,
+  $--color-primary-light-4,
+  $--color-primary-light-5,
+  $--color-primary-light-6,
+  $--color-primary-light-7,
+  $--color-primary-light-8,
+  $--color-primary-light-9,
+  $--color-primary-light-10
+);
+/// color||Color|0
+$--button-primary-border-color: nth($--primary-button-colors, 6) !default;
+/// color||Color|0
+$--button-primary-font-color: $--color-white !default;
+/// color||Color|0
+$--button-primary-background-color: nth($--primary-button-colors, 6) !default;
+/// color||Color|0
+$--button-primary-hover: nth($--primary-button-colors, 3) !default;
+/// color||Color|0
+$--button-primary-active: nth($--primary-button-colors, 7) !default;
+
+// 初始按钮
+$--initial-button-colors: (
+  $--blue-1,
+  $--blue-2,
+  $--blue-3,
+  $--blue-4,
+  $--blue-5,
+  $--blue-6,
+  $--blue-7,
+  $--blue-8,
+  $--blue-9,
+  $--blue-10
+);
+/// color||Color|0
+$--button-initial-border-color: nth($--initial-button-colors, 6) !default;
+/// color||Color|0
+$--button-initial-font-color: $--color-white !default;
+/// color||Color|0
+$--button-initial-background-color: nth($--initial-button-colors, 6) !default;
+/// color||Color|0
+$--button-initial-hover: nth($--primary-button-colors, 3) !default;
+/// color||Color|0
+$--button-initial-active: nth($--primary-button-colors, 7) !default;
+
+// 成功按钮
+$--success-button-colors: (
+  $--green-1,
+  $--green-2,
+  $--green-3,
+  $--green-4,
+  $--green-5,
+  $--green-6,
+  $--green-7,
+  $--green-8,
+  $--green-9,
+  $--green-10
+);
+/// color||Color|0
+$--button-success-border-color: nth($--success-button-colors, 5) !default;
+/// color||Color|0
+$--button-success-font-color: $--color-white !default;
+/// color||Color|0
+$--button-success-background-color: nth($--success-button-colors, 5) !default;
+/// color||Color|0
+$--button-success-hover: nth($--success-button-colors, 3) !default;
+/// color||Color|0
+$--button-success-active: nth($--success-button-colors, 7) !default;
+
+// 警告按钮
+$--warning-button-colors: (
+  $--gold-1,
+  $--gold-2,
+  $--gold-3,
+  $--gold-4,
+  $--gold-5,
+  $--gold-6,
+  $--gold-7,
+  $--gold-8,
+  $--gold-9,
+  $--gold-10
+);
+/// color||Color|0
+$--button-warning-border-color: nth($--warning-button-colors, 6) !default;
+/// color||Color|0
+$--button-warning-font-color: $--color-white !default;
+/// color||Color|0
+$--button-warning-background-color: nth($--warning-button-colors, 6) !default;
+/// color||Color|0
+$--button-warning-hover: nth($--warning-button-colors, 3) !default;
+/// color||Color|0
+$--button-warning-active: nth($--warning-button-colors, 7) !default;
+
+// 危险按钮
+$--danger-button-colors: (
+  $--red-1,
+  $--red-2,
+  $--red-3,
+  $--red-4,
+  $--red-5,
+  $--red-6,
+  $--red-7,
+  $--red-8,
+  $--red-9,
+  $--red-10
+);
+/// color||Color|0
+$--button-danger-border-color: nth($--danger-button-colors, 5) !default;
+/// color||Color|0
+$--button-danger-font-color: $--color-white !default;
+/// color||Color|0
+$--button-danger-background-color: nth($--danger-button-colors, 5) !default;
+/// color||Color|0
+$--button-danger-hover: nth($--danger-button-colors, 3) !default;
+/// color||Color|0
+$--button-danger-active: nth($--danger-button-colors, 7) !default;
+
+//  信息按钮
+$--info-button-colors: (
+  $--gray-1,
+  $--gray-2,
+  $--gray-3,
+  $--gray-4,
+  $--gray-5,
+  $--gray-6,
+  $--gray-7,
+  $--gray-8,
+  $--gray-9,
+  $--gray-10,
+  $--gray-11,
+  $--gray-12
+);
+/// color||Color|0
+$--button-info-border-color: nth($--info-button-colors, 7) !default;
+/// color||Color|0
+$--button-info-font-color: $--color-white !default;
+/// color||Color|0
+$--button-info-background-color: nth($--info-button-colors, 7) !default;
+/// color||Color|0
+$--button-info-hover: nth($--primary-button-colors, 3) !default;
+/// color||Color|0
+$--button-info-active: nth($--primary-button-colors, 7) !default;
+
+// hover和action的混合值
+$--button-hover-tint-percent: 20% !default;
+$--button-active-shade-percent: 10% !default;
+$--button-hover: $--color-primary-light-5 !default;
+$--button-active: $--color-primary-light-4 !default;
+/* cascader
+-------------------------- */
+$--cascader-height: 200px !default;
+
+/* Switch
+-------------------------- */
+/// color||Color|0
+$--switch-on-color: $--color-primary !default;
+/// color||Color|0
+$--switch-off-color: $--border-color-base !default;
+/// fontSize||Font|1
+$--switch-font-size: $--font-size-base !default;
+$--switch-core-border-radius: 10px !default;
+// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
+$--switch-width: 40px !default;
+// height||Other|4
+$--switch-height: 20px !default;
+// height||Other|4
+$--switch-button-size: 16px !default;
+$--switch-background-color-disabled: $--color-disabled !default;
+
+/* Dialog
+-------------------------- */
+$--dialog-background-color: $--color-white !default;
+$--dialog-box-shadow: $--box-shadow-light !default;
+/// fontSize||Font|1
+$--dialog-title-font-size: $--font-size-large !default;
+/// fontSize||Font|1
+$--dialog-content-font-size: 14px !default;
+/// fontLineHeight||LineHeight|2
+$--dialog-font-line-height: $--font-line-height-primary !default;
+/// padding||Spacing|3
+$--dialog-padding-base: 10px !default;
+$--dialog-padding-primary: 10px 20px !default;
+$--dialog-header-background-color: #eeeeee !default;
+
+/* Table
+-------------------------- */
+/// color||Color|0
+/// 因为rgba是透明的，after和td边框叠加会颜色加深
+$--table-border-color: rgbaToHex($--font-color-dividers) !default;
+$--table-border: 1px solid $--table-border-color !default;
+/// color||Color|0
+$--table-font-color: $--color-text-primary !default;
+/// color||Color|0
+$--table-header-font-color: $--color-text-black !default;
+/// color||Color|0
+$--table-row-hover-background-color: $--background-color-base !default;
+$--table-current-row-background-color: $--color-primary-light-9 !default;
+/// color||Color|0
+$--table-header-background-color: $--color-white !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
+$--table-page-background-color: $--color-white !default;
+
+/* Pagination
+-------------------------- */
+/// fontSize||Font|1
+$--pagination-font-size: $--font-size-base !default;
+/// color||Color|0
+$--pagination-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-font-color: $--color-text-primary !default;
+$--pagination-border-radius: 3px !default;
+/// color||Color|0
+$--pagination-button-color: $--color-text-primary !default;
+/// height||Other|4
+$--pagination-button-width: 35.5px !default;
+/// height||Other|4
+$--pagination-button-height: 28px !default;
+/// color||Color|0
+$--pagination-button-disabled-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--pagination-button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-hover-color: $--color-primary !default;
+
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: $--color-black !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;
+
+/* Popover
+-------------------------- */
+/// color||Color|0
+$--popover-background-color: $--color-white !default;
+/// fontSize||Font|1
+$--popover-font-size: $--font-size-base !default;
+/// color||Color|0
+$--popover-border-color: $--border-color-lighter !default;
+$--popover-arrow-size: 6px !default;
+/// padding||Spacing|3
+$--popover-padding: 12px !default;
+$--popover-padding-large: 18px 20px !default;
+/// fontSize||Font|1
+$--popover-title-font-size: 16px !default;
+/// color||Color|0
+$--popover-title-font-color: $--color-text-primary !default;
+
+/* Tooltip
+-------------------------- */
+/// color|1|Color|0
+$--tooltip-fill: $--color-text-primary !default;
+/// color|1|Color|0
+$--tooltip-color: $--color-white !default;
+/// fontSize||Font|1
+$--tooltip-font-size: 12px !default;
+/// color||Color|0
+$--tooltip-border-color: $--color-text-primary !default;
+$--tooltip-arrow-size: 6px !default;
+/// padding||Spacing|3
+$--tooltip-padding: 10px !default;
+
+/* Tag
+-------------------------- */
+/// color||Color|0
+$--tag-info-color: $--color-info !default;
+/// color||Color|0
+$--tag-primary-color: $--color-primary !default;
+/// color||Color|0
+$--tag-success-color: $--color-success !default;
+/// color||Color|0
+$--tag-warning-color: $--color-warning !default;
+/// color||Color|0
+$--tag-danger-color: $--color-danger !default;
+/// fontSize||Font|1
+$--tag-font-size: $--font-size-extra-small !default;
+$--tag-border-radius: $--border-radius-base !default;
+$--tag-padding: 0 10px !default;
+$--tag-background-color: $--color-primary-light-1 !default;
+$--tag-border-color: $--color-primary-light-2 !default;
+$--tag-color: $--tag-primary-color !default;
+$--tag-hover-color: $--tag-primary-color !default;
+
+$--tag-dark-background-color: $--tag-primary-color !default;
+$--tag-dark-border-color: $--tag-primary-color !default;
+$--tag-dark-color: $--color-white !default;
+$--tag-dark-hover-color: $--color-primary-light-4 !default;
+
+$--tag-plain-background-color: $--color-white !default;
+$--tag-plain-border-color: $--color-primary-light-3 !default;
+$--tag-plain-color: $--tag-primary-color !default;
+$--tag-plain-hover-color: $--tag-primary-color !default;
+
+/* Tree
+-------------------------- */
+/// color||Color|0
+$--tree-node-hover-background-color: $--font-color-background !default;
+/// color||Color|0
+$--tree-font-color: $--color-text-primary !default;
+/// color||Color|0
+$--tree-expand-icon-color: $--border-color-light !default;
+
+$--tree-highlight-background-color: $--color-primary-light-1 !default;
+/* Dropdown
+-------------------------- */
+$--dropdown-menu-box-shadow: $--box-shadow-dark !default;
+$--dropdown-menuItem-hover-fill: $--font-color-background !default;
+$--dropdown-menuItem-hover-color: $--link-color !default;
+
+/* Badge
+-------------------------- */
+/// color||Color|0
+$--badge-background-color: $--color-danger !default;
+$--badge-radius: 10px !default;
+/// fontSize||Font|1
+$--badge-font-size: 12px !default;
+/// padding||Spacing|3
+$--badge-padding: 6px !default;
+/// height||Other|4
+$--badge-size: 18px !default;
+
+/* Card
+--------------------------*/
+/// color||Color|0
+$--card-border-color: $--border-color-lighter !default;
+$--card-border-radius: $--border-radius-large !default;
+/// padding||Spacing|3
+$--card-padding: 20px !default;
+
+/* Slider
+--------------------------*/
+/// color||Color|0
+$--slider-main-background-color: $--color-primary !default;
+/// color||Color|0
+$--slider-runway-background-color: $--font-color-background !default;
+$--slider-button-hover-color: $--color-primary-light-7 !default;
+$--slider-stop-background-color: $--color-white !default;
+$--slider-disable-color: $--font-color-disable !default;
+$--slider-margin: 16px 0 !default;
+$--slider-border-radius: 3px !default;
+/// height|1|Other|4
+$--slider-height: 6px !default;
+/// height||Other|4
+$--slider-button-size: 16px !default;
+$--slider-button-wrapper-size: 36px !default;
+$--slider-button-wrapper-offset: -15px !default;
+
+/* Steps
+--------------------------*/
+$--steps-border-color: $--disabled-border-base !default;
+$--steps-border-radius: 4px !default;
+$--steps-padding: 20px !default;
+
+/* Menu
+--------------------------*/
+/// fontSize||Font|1
+$--menu-item-font-size: $--font-size-base !default;
+/// color||Color|0
+$--menu-item-font-color: $--color-text-primary !default;
+/// color||Color|0
+$--menu-background-color: $--color-white !default;
+$--menu-item-hover-fill: $--color-primary-light-1 !default;
+
+/* Rate
+--------------------------*/
+$--rate-height: 20px !default;
+/// fontSize||Font|1
+$--rate-font-size: $--font-size-base !default;
+/// height||Other|3
+$--rate-icon-size: 18px !default;
+/// margin||Spacing|2
+$--rate-icon-margin: 6px !default;
+$--rate-icon-color: $--color-text-placeholder !default;
+
+/* DatePicker
+--------------------------*/
+$--datepicker-font-size: $--font-size-base !default;
+$--datepicker-font-color: $--font-color-disable !default;
+/// color|1|Color|0
+$--datepicker-off-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--datepicker-header-font-color: $--font-color-title !default;
+$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-border-color: $--disabled-border-base !default;
+$--datepicker-inner-border-color: #e4e4e4 !default;
+/// color||Color|0
+$--datepicker-inrange-background-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-active-color: $--color-primary !default;
+/// color||Color|0
+$--datepicker-hover-font-color: $--color-primary !default;
+$--datepicker-cell-hover-color: #fff !default;
+
+/* Loading
+--------------------------*/
+/// height||Other|4
+$--loading-spinner-size: 42px !default;
+/// height||Other|4
+$--loading-fullscreen-spinner-size: 50px !default;
+
+/* Scrollbar
+--------------------------*/
+$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
+$--scrollbar-hover-background-color: rgba(
+  $--color-text-secondary,
+  0.5
+) !default;
+
+/* Carousel
+--------------------------*/
+/// fontSize||Font|1
+$--carousel-arrow-font-size: 12px !default;
+$--carousel-arrow-size: 36px !default;
+$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
+$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
+/// width||Other|4
+$--carousel-indicator-width: 30px !default;
+/// height||Other|4
+$--carousel-indicator-height: 2px !default;
+$--carousel-indicator-padding-horizontal: 4px !default;
+$--carousel-indicator-padding-vertical: 12px !default;
+$--carousel-indicator-out-color: $--border-color-hover !default;
+
+/* Collapse
+--------------------------*/
+/// color||Color|0
+$--collapse-border-color: $--border-color-lighter !default;
+/// height||Other|4
+$--collapse-header-height: 48px !default;
+/// color||Color|0
+$--collapse-header-background-color: $--color-white !default;
+/// color||Color|0
+$--collapse-header-font-color: $--color-text-primary !default;
+/// fontSize||Font|1
+$--collapse-header-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-background-color: $--color-white !default;
+/// fontSize||Font|1
+$--collapse-content-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-font-color: $--color-text-primary !default;
+
+/* Transfer
+--------------------------*/
+$--transfer-border-color: $--border-color-lighter !default;
+$--transfer-border-radius: $--border-radius-base !default;
+/// height||Other|4
+$--transfer-panel-width: 200px !default;
+/// height||Other|4
+$--transfer-panel-header-height: 40px !default;
+/// color||Color|0
+$--transfer-panel-header-background-color: $--background-color-base !default;
+/// height||Other|4
+$--transfer-panel-footer-height: 40px !default;
+/// height||Other|4
+$--transfer-panel-body-height: 246px !default;
+/// height||Other|4
+$--transfer-item-height: 30px !default;
+/// height||Other|4
+$--transfer-filter-height: 32px !default;
+
+/* Header
+  --------------------------*/
+$--header-padding: 0 20px !default;
+
+/* Footer
+--------------------------*/
+$--footer-padding: 0 20px !default;
+
+/* Main
+--------------------------*/
+$--main-padding: $--base * 4 !default;
+
+/* Timeline
+--------------------------*/
+$--timeline-node-size-normal: 12px !default;
+$--timeline-node-size-large: 14px !default;
+$--timeline-node-color: rgbaToHex($--font-color-disable) !default;
+
+/* Backtop
+--------------------------*/
+/// color||Color|0
+$--backtop-background-color: $--color-white !default;
+/// color||Color|0
+$--backtop-font-color: $--color-primary !default;
+/// color||Color|0
+$--backtop-hover-background-color: $--border-color-extra-light !default;
+
+/* Link
+--------------------------*/
+/// fontSize||Font|1
+$--link-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--link-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--link-default-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--link-default-active-color: $--color-primary !default;
+/// color||Color|0
+$--link-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--link-primary-font-color: $--color-primary !default;
+/// color||Color|0
+$--link-success-font-color: $--color-success !default;
+/// color||Color|0
+$--link-warning-font-color: $--color-warning !default;
+/// color||Color|0
+$--link-danger-font-color: $--color-danger !default;
+/// color||Color|0
+$--link-info-font-color: $--color-info !default;
+/* Calendar
+--------------------------*/
+/// border||Other|4
+$--calendar-border: $--table-border !default;
+/// color||Other|4
+$--calendar-selected-background-color: #f2f8fe !default;
+$--calendar-cell-width: 85px !default;
+
+/* Form
+-------------------------- */
+/// fontSize||Font|1
+$--form-label-font-size: $--font-size-base !default;
+$--form-label-background-color: #fafafa !default;
+
+/* Avatar
+--------------------------*/
+/// color||Color|0
+$--avatar-font-color: #fff !default;
+/// color||Color|0
+$--avatar-background-color: $--color-primary !default;
+/// fontSize||Font Size|1
+$--avatar-text-font-size: 14px !default;
+/// fontSize||Font Size|1
+$--avatar-icon-font-size: 18px !default;
+/// borderRadius||Border|2
+$--avatar-border-radius: $--border-radius-base !default;
+/// size|1|Avatar Size|3
+$--avatar-large-size: 40px !default;
+/// size|1|Avatar Size|3
+$--avatar-medium-size: 36px !default;
+/// size|1|Avatar Size|3
+$--avatar-small-size: 28px !default;
+
+/* Empty
+-------------------------- */
+$--empty-padding: 40px 0 !default;
+$--empty-image-width: 160px !default;
+$--empty-description-margin-top: 20px !default;
+$--empty-bottom-margin-top: 20px !default;
+
+/* Descriptions
+-------------------------- */
+$--descriptions-header-margin-bottom: 20px !default;
+$--descriptions-title-font-size: 16px !default;
+$--descriptions-table-border: 1px solid $--font-color-dividers !default;
+$--descriptions-item-bordered-label-background: #fafafa !default;
+
+/* Skeleton 
+--------------------------*/
+$--skeleton-color: $--font-color-dividers !default;
+$--skeleton-to-color: #e6e6e6 !default;
+
+/* Svg
+--------------- */
+$--svg-monochrome-grey: #dcdde0 !default;
+
+/* Result
+-------------------------- */
+$--result-padding: 40px 30px !default;
+$--result-icon-font-size: 64px !default;
+$--result-title-font-size: 20px !default;
+$--result-title-margin-top: 20px !default;
+$--result-subtitle-margin-top: 10px !default;
+$--result-extra-margin-top: 30px !default;
+$--result-info-color: $--color-info !default;
+$--result-success-color: $--color-success !default;
+$--result-warning-color: $--color-warning !default;
+$--result-danger-color: $--color-danger !default;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$--breakpoints: (
+  'xs': (
+    max-width: $--sm - 1
+  ),
+  'sm': (
+    min-width: $--sm
+  ),
+  'md': (
+    min-width: $--md
+  ),
+  'lg': (
+    min-width: $--lg
+  ),
+  'xl': (
+    min-width: $--xl
+  )
+);
+
+$--breakpoints-spec: (
+  'xs-only': (
+    max-width: $--sm - 1
+  ),
+  'sm-and-up': (
+    min-width: $--sm
+  ),
+  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
+  'sm-and-down': (
+    max-width: $--md - 1
+  ),
+  'md-and-up': (
+    min-width: $--md
+  ),
+  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
+  'md-and-down': (
+    max-width: $--lg - 1
+  ),
+  'lg-and-up': (
+    min-width: $--lg
+  ),
+  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
+  'lg-and-down': (
+    max-width: $--xl - 1
+  ),
+  'xl-only': (
+    min-width: $--xl
+  )
+);
+
+/// color||Color|0
+$--form-label-color: #666 !default;
+$--form-label-size: $--font-size-base !default;
+$--form-label-padding: 8px 0 !default;
+$--form-label-width: 88px !default;
+
+//main
+//header
+$--main-header-height: 60px !default;