eoss-ui 0.3.97

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

@@ -0,0 +1,1516 @@
+/* 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: #1890ff !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) !default;
+$--font-color-primary: rgba(0, 0, 0, 0.75) !default;
+$--font-color-secondary: rgba(0, 0, 0, 0.45) !default;
+$--font-color-disable: rgba(0, 0, 0, 0.56) !default;
+$--font-color-border: rgba(0, 0, 0, 0.12) !default;
+$--font-color-dividers: rgba(0, 0, 0, 0.06) !default;
+$--font-color-background: rgba(0, 0, 0, 0.04) !default;
+$--font-color-table-header: rgba(0, 0, 0, 0.02) !default;
+
+/// 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-4 !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;
+
+/* 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-disable !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
+-------------------------- */
+/// height
+$--cascader-height: 274px !default;
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+$--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;
+
+/* 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: #e1e1e1 !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: $--color-primary-light-1 !default;
+$--table-current-row-background-color: $--color-primary-light-3 !default;
+/// color||Color|0
+$--table-header-background-color: #f8f8f8 !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
+$--table-page-background-color: $--table-header-background-color !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;
+
+/* 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;