beyond-webui 1.0.98 → 1.1.1

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

@@ -14,29 +14,29 @@ $types: primary, success, warning, danger, error, info;
 // Color
 $colors: () !default;
 $colors: map.deep-merge(
-  (
-    'white': #ffffff,
-    'black': #000000,
-    'primary': (
-      'base': #ff761f,
-    ),
-    'success': (
-      'base': #4aa626,
-    ),
-    'warning': (
-      'base': #e6a23c,
-    ),
-    'danger': (
-      'base': #db2807,
-    ),
-    'error': (
-      'base': #e0450e,
-    ),
-    'info': (
-      'base': #909399,
+    (
+      'white': #ffffff,
+      'black': #000000,
+      'primary': (
+        'base': #ff5b05,
+      ),
+      'success': (
+        'base': #4aa626,
+      ),
+      'warning': (
+        'base': #e6a23c,
+      ),
+      'danger': (
+        'base': #db2807,
+      ),
+      'error': (
+        'base': #e0450e,
+      ),
+      'info': (
+        'base': #909399,
+      ),
     ),
-  ),
-  $colors
+    $colors
 );
 
 $color-white: map.get($colors, 'white') !default;
@@ -57,17 +57,17 @@ $color-info: map.get($colors, 'info', 'base') !default;
   $mix-color: $color-white
 ) {
   $colors: map.deep-merge(
-    (
-      $type: (
-        '#{$mode}-#{$number}':
+      (
+        $type: (
+          '#{$mode}-#{$number}':
           mix(
-            $mix-color,
-            map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
+              $mix-color,
+              map.get($colors, $type, 'base'),
+              math.percentage(math.div($number, 10))
           ),
+        ),
       ),
-    ),
-    $colors
+      $colors
   ) !global;
 }
 
@@ -95,53 +95,53 @@ $color-info: map.get($colors, 'info', 'base') !default;
 
 $text-color: () !default;
 $text-color: map.merge(
-  (
-    'primary': #000,
-    'custom': #1a1f36,
-    'regular': #4f566b,
-    'secondary': #909399,
-    'placeholder': #a8abb2,
-    'disabled': #c0c4cc,
-  ),
-  $text-color
+    (
+      'primary': #000,
+      'custom': #1c2b36,
+      'regular': #4f566b,
+      'secondary': #909399,
+      'placeholder': #a8abb2,
+      'disabled': #c0c4cc,
+    ),
+    $text-color
 );
 
 $border-color: () !default;
 $border-color: map.merge(
-  (
-    '': #dcdfe6,
-    'light': #c7c7c7,
-    'lighter': #dfe7f1,
-    'extra-light': #f2f6fc,
-    'dark': #d4d7de,
-    'darker': #cdd0d6,
-  ),
-  $border-color
+    (
+      '': #c1ccd6,
+      'light': #c7c7c7,
+      'lighter': #dfe7f1,
+      'extra-light': #f2f6fc,
+      'dark': #d4d7de,
+      'darker': #cdd0d6,
+    ),
+    $border-color
 );
 
 $fill-color: () !default;
 $fill-color: map.merge(
-  (
-    '': #f0f2f5,
-    'light': #f5f7fa,
-    'lighter': #fafafa,
-    'extra-light': #fafcff,
-    'dark': #ebedf0,
-    'darker': #e6e8eb,
-    'blank': #ffffff,
-  ),
-  $fill-color
+    (
+      '': #f0f2f5,
+      'light': #f5f7fa,
+      'lighter': #fafafa,
+      'extra-light': #fafcff,
+      'dark': #ebedf0,
+      'darker': #e6e8eb,
+      'blank': #ffffff,
+    ),
+    $fill-color
 );
 
 // Background
 $bg-color: () !default;
 $bg-color: map.merge(
-  (
-    '': #ffffff,
-    'page': #f2f3f5,
-    'overlay': #ffffff,
-  ),
-  $bg-color
+    (
+      '': #ffffff,
+      'page': #f2f3f5,
+      'overlay': #ffffff,
+    ),
+    $bg-color
 );
 
 // Border
@@ -151,114 +151,114 @@ $border-color-hover: getCssVar('text-color', 'disabled') !default;
 
 $border-radius: () !default;
 $border-radius: map.merge(
-  (
-    'base': 4px,
-    'custom':10px,
-    'small': 2px,
-    'round': 20px,
-    'circle': 100%,
-  ),
-  $border-radius
+    (
+      'base': 4px,
+      'custom':8px,
+      'small': 2px,
+      'round': 20px,
+      'circle': 100%,
+    ),
+    $border-radius
 );
 
 // Box-shadow
 $box-shadow: () !default;
 $box-shadow: map.merge(
-  (
-    '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
-      0px 8px 20px rgba(0, 0, 0, 0.08),
-    ),
-    'light': (
-      0 2px 5px rgba(0, 0, 0, 0.35),
-    ),
-    'lighter': (
-      0 1px 10px rgba(0, 0, 0, 0.08), 0 1px 30px rgba(0, 0, 0, 0.05),
-    ),
-    'dark': (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
-      0px 12px 32px rgba(0, 0, 0, 0.12),
-      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
+    (
+      '': (
+        0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+        0px 8px 20px rgba(0, 0, 0, 0.08),
+      ),
+      'light': (
+        0 2px 5px rgba(0, 0, 0, 0.35),
+      ),
+      'lighter': (
+        0 1px 10px rgba(0, 0, 0, 0.08), 0 1px 30px rgba(0, 0, 0, 0.05),
+      ),
+      'dark': (
+        0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+        0px 12px 32px rgba(0, 0, 0, 0.12),
+        0px 8px 16px -8px rgba(0, 0, 0, 0.16),
+      ),
     ),
-  ),
-  $box-shadow
+    $box-shadow
 );
 
 // Typography
 $font-family: () !default;
 $font-family: map.merge(
-  (
-    // default family
-    '':
+    (
+      // default family
+      '':
       "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
-  ),
-  $font-family
+    ),
+    $font-family
 );
 
 $font-size: () !default;
 $font-size: map.merge(
-  (
-    'extra-large': 20px,
-    'large': 18px,
-    'medium': 16px,
-    'base': 14px,
-    'small': 13px,
-    'extra-small': 12px,
-  ),
-  $font-size
+    (
+      'extra-large': 20px,
+      'large': 18px,
+      'medium': 16px,
+      'base': 12px,
+      'small': 12px,
+      'extra-small': 12px,
+    ),
+    $font-size
 );
 
 // zIndex
 $z-index: () !default;
 $z-index: map.merge(
-  (
-    'normal': 1,
-    'top': 1000,
-    'popper': 2000,
-  ),
-  $z-index
+    (
+      'normal': 1,
+      'top': 1000,
+      'popper': 2000,
+    ),
+    $z-index
 );
 
 // Disable default
 $disabled: () !default;
 $disabled: map.merge(
-  (
-    'bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color', 'placeholder'),
-    'border-color': getCssVar('border-color', 'light'),
-  ),
-  $disabled
+    (
+      'bg-color': getCssVar('fill-color', 'light'),
+      'text-color': getCssVar('text-color', 'placeholder'),
+      'border-color': getCssVar('border-color', 'light'),
+    ),
+    $disabled
 );
 
 $common-component-size: () !default;
 $common-component-size: map.merge(
-  (
-    'large': 40px,
-    'default': 32px,
-    'small': 24px,
-  ),
-  $common-component-size
+    (
+      'large': 40px,
+      'default': 32px,
+      'small': 24px,
+    ),
+    $common-component-size
 );
 
 // overlay
 $overlay-color: () !default;
 $overlay-color: map.merge(
-  (
-    '': rgba(0, 0, 0, 0.8),
-    'light': rgba(0, 0, 0, 0.7),
-    'lighter': rgba(0, 0, 0, 0.5),
-  ),
-  $overlay-color
+    (
+      '': rgba(0, 0, 0, 0.8),
+      'light': rgba(0, 0, 0, 0.7),
+      'lighter': rgba(0, 0, 0, 0.5),
+    ),
+    $overlay-color
 );
 
 // mask
 $mask-color: () !default;
 $mask-color: map.merge(
-  (
-    '': rgba(255, 255, 255, 0.9),
-    'extra-light': rgba(255, 255, 255, 0.3),
-  ),
-  $mask-color
+    (
+      '': rgba(255, 255, 255, 0.9),
+      'extra-light': rgba(255, 255, 255, 0.3),
+    ),
+    $mask-color
 );
 
 // Components
@@ -267,77 +267,77 @@ $mask-color: map.merge(
 // css3 var in packages/theme-chalk/src/checkbox.scss
 $checkbox: () !default;
 $checkbox: map.merge(
-  (
-    'font-size': 14px,
-    'font-weight': getCssVar('font-weight-primary'),
-    'text-color': #1a1f36,
-    'input-height': 14px,
-    'input-width': 14px,
-    'border-radius': getCssVar('border-radius-base'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'input-border':  1px solid #1a1f36,
-    'disabled-border-color': getCssVar('border-color'),
-    'disabled-input-fill': getCssVar('fill-color', 'light'),
-    'disabled-icon-color': getCssVar('text-color-placeholder'),
-    'disabled-checked-input-fill': #dfe7f1,
-    'disabled-checked-input-border-color': #dfe7f1,
-    'disabled-checked-icon-color': #fff,
-    'checked-text-color': #1a1f36,
-    'checked-input-border-color': #1a1f36,
-    'checked-bg-color': #1a1f36,
-    'checked-icon-color': getCssVar('color', 'white'),
-    'input-border-color-hover': getCssVar('color-primary'),
-  ),
-  $checkbox
+    (
+      'font-size': 14px,
+      'font-weight': getCssVar('font-weight-primary'),
+      'text-color': #1c2b36,
+      'input-height': 14px,
+      'input-width': 14px,
+      'border-radius': getCssVar('border-radius-base'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'input-border': 1px solid #1c2b36,
+      'disabled-border-color': getCssVar('border-color'),
+      'disabled-input-fill': getCssVar('fill-color', 'light'),
+      'disabled-icon-color': getCssVar('text-color-placeholder'),
+      'disabled-checked-input-fill': #dfe7f1,
+      'disabled-checked-input-border-color': #dfe7f1,
+      'disabled-checked-icon-color': #fff,
+      'checked-text-color': #1c2b36,
+      'checked-input-border-color': #1c2b36,
+      'checked-bg-color': #1c2b36,
+      'checked-icon-color': getCssVar('color', 'white'),
+      'input-border-color-hover': getCssVar('color-primary'),
+    ),
+    $checkbox
 );
 
 $checkbox-button: () !default;
 $checkbox-button: map.merge(
-  (
-    'checked-bg-color': getCssVar('color-primary'),
-    'checked-text-color': getCssVar('color-white'),
-    'checked-border-color': getCssVar('color-primary'),
-  ),
-  $checkbox-button
+    (
+      'checked-bg-color': getCssVar('color-primary'),
+      'checked-text-color': getCssVar('color-white'),
+      'checked-border-color': getCssVar('color-primary'),
+    ),
+    $checkbox-button
 );
 
 $checkbox-bordered-padding-left: () !default;
 $checkbox-bordered-padding-left: map.merge(
-  (
-    'large': 12px,
-    'default': 10px,
-    'small': 8px,
-  ),
-  $checkbox-bordered-padding-left
+    (
+      'large': 12px,
+      'default': 10px,
+      'small': 8px,
+    ),
+    $checkbox-bordered-padding-left
 );
 
 $checkbox-bordered-padding-right: () !default;
 $checkbox-bordered-padding-right: map.merge(
-  (
-    'large': 20px,
-    'default': 16px,
-    'small': 12px,
-  ),
-  $checkbox-bordered-padding-right
+    (
+      'large': 20px,
+      'default': 16px,
+      'small': 12px,
+    ),
+    $checkbox-bordered-padding-right
 );
 
 // Radio
 /// fontSize||Font|1
 $radio: () !default;
 $radio: map.merge(
-  (
-    'font-size': getCssVar('font-size-base'),
-    'text-color': getCssVar('text-color-regular'),
-    'font-weight': getCssVar('font-weight-primary'),
-    'input-height': 14px,
-    'input-width': 14px,
-    'input-border-radius': getCssVar('border-radius-circle'),
-    'input-bg-color': getCssVar('fill-color', 'blank'),
-    'input-border': getCssVar('border'),
-    'input-border-color': getCssVar('border-color'),
-    'input-border-color-hover': getCssVar('color-primary'),
-  ),
-  $radio
+    (
+      'font-size': getCssVar('font-size-base'),
+      'text-color': getCssVar('text-color-regular'),
+      'font-weight': getCssVar('font-weight-primary'),
+      'input-height': 14px,
+      'input-width': 14px,
+      'input-border-radius': getCssVar('border-radius-circle'),
+      'input-bg-color': getCssVar('fill-color', 'blank'),
+      'input-border': getCssVar('border'),
+      'input-border-color': getCssVar('border-color'),
+      'input-border-color-hover': getCssVar('color-primary'),
+    ),
+    $radio
 );
 
 $radio-height: () !default;
@@ -345,238 +345,238 @@ $radio-height: map.merge($common-component-size, $radio-height);
 
 $radio-button: () !default;
 $radio-button: map.merge(
-  (
-    'checked-bg-color': getCssVar('color-primary'),
-    'checked-text-color': getCssVar('color-white'),
-    'checked-border-color': getCssVar('color-primary'),
-    'disabled-checked-fill': getCssVar('border-color-extra-light'),
-  ),
-  $radio-button
+    (
+      'checked-bg-color': getCssVar('color-primary'),
+      'checked-text-color': getCssVar('color-white'),
+      'checked-border-color': getCssVar('color-primary'),
+      'disabled-checked-fill': getCssVar('border-color-extra-light'),
+    ),
+    $radio-button
 );
 
 $radio-disabled: () !default;
 $radio-disabled: map.merge(
-  (
-    'input-border-color': getCssVar('disabled-border-color'),
-    'input-fill': getCssVar('disabled-bg-color'),
-    'icon-color': getCssVar('disabled-bg-color'),
-    'checked-input-border-color': getCssVar('disabled-border-color'),
-    'checked-input-fill': getCssVar('disabled-bg-color'),
-    'checked-icon-color': getCssVar('text-color-placeholder'),
-  ),
-  $radio-disabled
+    (
+      'input-border-color': getCssVar('disabled-border-color'),
+      'input-fill': getCssVar('disabled-bg-color'),
+      'icon-color': getCssVar('disabled-bg-color'),
+      'checked-input-border-color': getCssVar('disabled-border-color'),
+      'checked-input-fill': getCssVar('disabled-bg-color'),
+      'checked-icon-color': getCssVar('text-color-placeholder'),
+    ),
+    $radio-disabled
 );
 
 $radio-checked: () !default;
 $radio-checked: map.merge(
-  (
-    'text-color': getCssVar('color-primary'),
-    'input-border-color': getCssVar('color-primary'),
-    'icon-color': getCssVar('color-primary'),
-  ),
-  $radio-checked
+    (
+      'text-color': getCssVar('color-primary'),
+      'input-border-color': getCssVar('color-primary'),
+      'icon-color': getCssVar('color-primary'),
+    ),
+    $radio-checked
 );
 
 $radio-bordered-input-height: () !default;
 $radio-bordered-input-height: map.merge(
-  (
-    'large': 14px,
-    'default': 12px,
-    'small': 12px,
-  ),
-  $radio-bordered-input-height
+    (
+      'large': 14px,
+      'default': 12px,
+      'small': 12px,
+    ),
+    $radio-bordered-input-height
 );
 
 $radio-bordered-input-width: () !default;
 $radio-bordered-input-width: map.merge(
-  (
-    'large': 14px,
-    'default': 12px,
-    'small': 12px,
-  ),
-  $radio-bordered-input-width
+    (
+      'large': 14px,
+      'default': 12px,
+      'small': 12px,
+    ),
+    $radio-bordered-input-width
 );
 
 // Select
 $select: () !default;
 $select: map.merge(
-  (
-    'border-color-hover': getCssVar('border-color-hover'),
-    'disabled-border': getCssVar('disabled-border-color'),
-    'font-size': getCssVar('font-size-base'),
-    'close-hover-color': getCssVar('text-color-secondary'),
-    'input-color': getCssVar('text-color-placeholder'),
-    'multiple-input-color': getCssVar('text-color-regular'),
-    'input-focus-border-color': getCssVar('color-primary'),
-    'input-font-size': 14px,
-  ),
-  $select
+    (
+      'border-color-hover': getCssVar('border-color-hover'),
+      'disabled-border': getCssVar('disabled-border-color'),
+      'font-size': getCssVar('font-size-base'),
+      'close-hover-color': getCssVar('text-color-secondary'),
+      'input-color': getCssVar('text-color-placeholder'),
+      'multiple-input-color': getCssVar('text-color-regular'),
+      'input-focus-border-color': getCssVar('color-primary'),
+      'input-font-size': 14px,
+    ),
+    $select
 );
 
 $select-option: () !default;
 $select-option: map.merge(
-  (
-    'text-color': getCssVar('text-color-regular'),
-    'disabled-color': getCssVar('text-color-placeholder'),
-    'height': 34px,
-    'hover-background': getCssVar('fill-color', 'light'),
-    'selected-text-color': getCssVar('color-primary'),
-  ),
-  $select-option
+    (
+      'text-color': getCssVar('text-color-regular'),
+      'disabled-color': getCssVar('text-color-placeholder'),
+      'height': 34px,
+      'hover-background': getCssVar('fill-color', 'light'),
+      'selected-text-color': getCssVar('color-primary'),
+    ),
+    $select-option
 );
 
 $select-group: () !default;
 $select-group: map.merge(
-  (
-    'text-color': getCssVar('color-info'),
-    'height': 30px,
-    'font-size': 12px,
-  ),
-  $select-group
+    (
+      'text-color': getCssVar('color-info'),
+      'height': 30px,
+      'font-size': 12px,
+    ),
+    $select-group
 );
 
 $select-dropdown: () !default;
 $select-dropdown: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'shadow': getCssVar('box-shadow-light'),
-    'empty-color': getCssVar('text-color-secondary'),
-    'max-height': 274px,
-    'padding': 6px 0,
-    'empty-padding': 10px 0,
-    'border': 1px solid getCssVar('border-color-light'),
-  ),
-  $select-dropdown
+    (
+      'bg-color': getCssVar('bg-color', 'overlay'),
+      'shadow': getCssVar('box-shadow-light'),
+      'empty-color': getCssVar('text-color-secondary'),
+      'max-height': 274px,
+      'padding': 6px 0,
+      'empty-padding': 10px 0,
+      'border': 1px solid getCssVar('border-color-light'),
+    ),
+    $select-dropdown
 );
 
 $select-tags-prefix-padding: () !default;
 $select-tags-prefix-padding: map.merge(
-  (
-    'large': 8px,
-    'default': 6px,
-    'small': 4px,
-  ),
-  $select-tags-prefix-padding
+    (
+      'large': 8px,
+      'default': 6px,
+      'small': 4px,
+    ),
+    $select-tags-prefix-padding
 );
 
 // Alert
 // css3 var in packages/theme-chalk/src/alert.scss
 $alert: () !default;
 $alert: map.merge(
-  (
-    'padding': 8px 16px,
-    'border-radius-base': getCssVar('border-radius-base'),
-    'title-font-size': 13px,
-    'description-font-size': 12px,
-    'close-font-size': 12px,
-    'close-customed-font-size': 13px,
-    'icon-size': 16px,
-    'icon-large-size': 28px,
-  ),
-  $alert
+    (
+      'padding': 8px 16px,
+      'border-radius-base': getCssVar('border-radius-base'),
+      'title-font-size': 13px,
+      'description-font-size': 12px,
+      'close-font-size': 12px,
+      'close-customed-font-size': 13px,
+      'icon-size': 16px,
+      'icon-large-size': 28px,
+    ),
+    $alert
 );
 
 // MessageBox
 // css3 var in packages/theme-chalk/src/message-box.scss
 $messagebox: () !default;
 $messagebox: map.merge(
-  (
-    'title-color': getCssVar('text-color-primary'),
-    'width': 420px,
-    'border-radius': 16px,
-    'font-size': getCssVar('font-size-extra-large'),
-    'content-font-size': getCssVar('font-size-medium'),
-    'content-color': getCssVar('text-color-regular'),
-    'error-font-size': 12px,
-    'padding-primary': 15px,
-  ),
-  $messagebox
+    (
+      'title-color': getCssVar('text-color-primary'),
+      'width': 420px,
+      'border-radius': 16px,
+      'font-size': getCssVar('font-size-extra-large'),
+      'content-font-size': getCssVar('font-size-medium'),
+      'content-color': getCssVar('text-color-regular'),
+      'error-font-size': 12px,
+      'padding-primary': 15px,
+    ),
+    $messagebox
 );
 
 // Message
 // css3 var in packages/theme-chalk/src/message.scss
 $message: () !default;
 $message: map.merge(
-  (
-    'bg-color': getCssVar('color', 'info', 'light-9'),
-    'border-color': getCssVar('border-color-lighter'),
-    'padding': 16px,
-    'close-size': 16px,
-    'close-icon-color': getCssVar('text-color-placeholder'),
-    'close-hover-color': getCssVar('text-color-secondary'),
-  ),
-  $message
+    (
+      'bg-color': getCssVar('color', 'info', 'light-9'),
+      'border-color': getCssVar('border-color-lighter'),
+      'padding': 16px,
+      'close-size': 16px,
+      'close-icon-color': getCssVar('text-color-placeholder'),
+      'close-hover-color': getCssVar('text-color-secondary'),
+    ),
+    $message
 );
 
 // Notification
 // css3 var in packages/theme-chalk/src/notification.scss
 $notification: () !default;
 $notification: map.merge(
-  (
-    'width': 330px,
-    'padding': 14px 26px 14px 13px,
-    'radius': 8px,
-    'shadow': getCssVar('box-shadow-light'),
-    'border-color': getCssVar('border-color-lighter'),
-    'icon-size': 24px,
-    'close-font-size':
+    (
+      'width': 330px,
+      'padding': 14px 26px 14px 13px,
+      'radius': 8px,
+      'shadow': getCssVar('box-shadow-light'),
+      'border-color': getCssVar('border-color-lighter'),
+      'icon-size': 24px,
+      'close-font-size':
       var(
-        #{getCssVarName('message-close-size')},
-        map.get($message, 'close-size')
+          #{getCssVarName('message-close-size')},
+          map.get($message, 'close-size')
       ),
-    'group-margin-left': 13px,
-    'group-margin-right': 8px,
-    'content-font-size': getCssVar('font-size-base'),
-    'content-color': getCssVar('text-color-regular'),
-    'title-font-size': 16px,
-    'title-color': getCssVar('text-color-primary'),
-    'close-color': getCssVar('text-color-secondary'),
-    'close-hover-color': getCssVar('text-color-regular'),
-  ),
-  $notification
+      'group-margin-left': 13px,
+      'group-margin-right': 8px,
+      'content-font-size': getCssVar('font-size-base'),
+      'content-color': getCssVar('text-color-regular'),
+      'title-font-size': 16px,
+      'title-color': getCssVar('text-color-primary'),
+      'close-color': getCssVar('text-color-secondary'),
+      'close-hover-color': getCssVar('text-color-regular'),
+    ),
+    $notification
 );
 
 // Input
 // css3 var in packages/theme-chalk/src/input.scss
 $input: () !default;
 $input: map.merge(
-  (
-    'text-color': getCssVar('text-color-custom'),
-    'border': 1px solid #dfe7f1,
-    'hover-border': getCssVar('border-color-hover'),
-    'focus-border': getCssVar('color-primary'),
-    'transparent-border': 0 0 0 1px transparent inset,
-    'border-color': getCssVar('border-color-lighter'),
-    'border-radius': getCssVar('border-radius-base'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'icon-color': #4f566b,
-    'placeholder-color': #697386,
-    'hover-border-color': getCssVar('border-color-hover'),
-    'clear-hover-color': getCssVar('text-color-secondary'),
-    'focus-border-color': getCssVar('color-primary'),
-  ),
-  $input
+    (
+      'text-color': getCssVar('text-color-custom'),
+      'border': 1px solid #dfe7f1,
+      'hover-border': getCssVar('border-color-hover'),
+      'focus-border': getCssVar('color-primary'),
+      'transparent-border': 0 0 0 1px transparent inset,
+      'border-color': getCssVar('border-color-lighter'),
+      'border-radius': getCssVar('border-radius-base'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'icon-color': #4f566b,
+      'placeholder-color': #697386,
+      'hover-border-color': getCssVar('border-color-hover'),
+      'clear-hover-color': getCssVar('text-color-secondary'),
+      'focus-border-color': getCssVar('color-primary'),
+    ),
+    $input
 );
 
 $input-disabled: () !default;
 $input-disabled: map.merge(
-  (
-    'fill': getCssVar('disabled-bg-color'),
-    'border': getCssVar('disabled-border-color'),
-    'text-color': getCssVar('disabled-text-color'),
-    'placeholder-color': getCssVar('text-color-placeholder'),
-  ),
-  $input-disabled
+    (
+      'fill': getCssVar('disabled-bg-color'),
+      'border': getCssVar('disabled-border-color'),
+      'text-color': getCssVar('disabled-text-color'),
+      'placeholder-color': getCssVar('text-color-placeholder'),
+    ),
+    $input-disabled
 );
 
 $input-font-size: () !default;
 $input-font-size: map.merge(
-  (
-    'large': 14px,
-    'default': 14px,
-    'small': 12px,
-  ),
-  $input-font-size
+    (
+      'large': 14px,
+      'default': 14px,
+      'small': 12px,
+    ),
+    $input-font-size
 );
 
 $input-height: () !default;
@@ -587,81 +587,82 @@ $input-line-height: map.merge($common-component-size, $input-line-height);
 
 $input-number-width: () !default;
 $input-number-width: map.merge(
-  (
-    'large': 180px,
-    'default': 150px,
-    'small': 120px,
-  ),
-  $input-number-width
+    (
+      'large': 180px,
+      'default': 150px,
+      'small': 120px,
+    ),
+    $input-number-width
 );
 
 $input-padding-horizontal: () !default;
 $input-padding-horizontal: map.merge(
-  (
-    'large': 16px,
-    'default': 12px,
-    'small': 8px,
-  ),
-  $input-padding-horizontal
+    (
+      'large': 16px,
+      'default': 12px,
+      'small': 8px,
+    ),
+    $input-padding-horizontal
 );
 
 // Cascader
 // css3 var in packages/theme-chalk/src/cascader.scss
 $cascader: () !default;
 $cascader: map.merge(
-  (
-    'menu-text-color': getCssVar('text-color-regular'),
-    'menu-selected-text-color': getCssVar('color-primary'),
-    'menu-fill': getCssVar('bg-color', 'overlay'),
-    'menu-font-size': getCssVar('font-size-base'),
-    'menu-radius': getCssVar('border-radius-base'),
-    'menu-border': solid 1px getCssVar('border-color-light'),
-    'menu-shadow': getCssVar('box-shadow-light'),
-    'node-background-hover': getCssVar('fill-color', 'light'),
-    'node-color-disabled': getCssVar('text-color-placeholder'),
-    'color-empty': getCssVar('text-color-placeholder'),
-    'tag-background': getCssVar('fill-color'),
-  ),
-  $cascader
+    (
+      'menu-text-color': getCssVar('text-color-regular'),
+      'menu-selected-text-color': getCssVar('color-primary'),
+      'menu-fill': getCssVar('bg-color', 'overlay'),
+      'menu-font-size': getCssVar('font-size-base'),
+      'menu-radius': getCssVar('border-radius-base'),
+      'menu-border': solid 1px getCssVar('border-color-light'),
+      'menu-shadow': getCssVar('box-shadow-light'),
+      'node-background-hover': getCssVar('fill-color', 'light'),
+      'node-color-disabled': getCssVar('text-color-placeholder'),
+      'color-empty': getCssVar('text-color-placeholder'),
+      'tag-background': getCssVar('fill-color'),
+    ),
+    $cascader
 );
 //statistic
 // css3 var in packages/theme-chalk/src/statistic.scss
 $statistic: () !default;
 $statistic: map.merge(
-  (
-    'title-font-weight': 400,
-    'title-font-size': getCssVar('font-size', 'extra-small'),
-    'title-color': getCssVar('text-color', 'regular'),
-    'content-font-weight': 400,
-    'content-font-size': getCssVar('font-size', 'extra-large'),
-    'content-color': getCssVar('text-color', 'primary'),
-  ),
-  $statistic
+    (
+      'title-font-weight': 400,
+      'title-font-size': getCssVar('font-size', 'extra-small'),
+      'title-color': getCssVar('text-color', 'regular'),
+      'content-font-weight': 400,
+      'content-font-size': getCssVar('font-size', 'extra-large'),
+      'content-color': getCssVar('text-color', 'primary'),
+    ),
+    $statistic
 );
 // Button
 // css3 var in packages/theme-chalk/src/button.scss
 $button: () !default;
 $button: map.merge(
-  (
-    'font-weight': getCssVar('font-weight-primary'),
-    'border-color': getCssVar('border-color'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('text-color', 'custom'),
-    'disabled-text-color': getCssVar('disabled-text-color'),
-    'disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'disabled-border-color': getCssVar('border-color-light'),
-    'divide-border-color': rgba($color-white, 0.5),
-    'hover-text-color': getCssVar('color-primary'),
-    'hover-bg-color': getCssVar('color-primary', 'light-9'),
-    'hover-border-color': getCssVar('color-primary-light-7'),
-    'active-text-color': getCssVar('button-hover-text-color'),
-    'active-border-color': getCssVar('color-primary'),
-    'active-bg-color': getCssVar('button', 'hover-bg-color'),
-    'outline-color': getCssVar('color-primary', 'light-5'),
-    'hover-link-text-color': getCssVar('color-info'),
-    'active-color': getCssVar('text-color', 'primary'),
-  ),
-  $button
+    (
+      'font-weight': getCssVar('font-weight-primary'),
+      'border-color': getCssVar('border-color'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'text-color': getCssVar('text-color', 'custom'),
+      'disabled-text-color': rgba(91, 114, 130, 0.38),
+      'disabled-bg-color': getCssVar('fill-color', 'blank'),
+      'disabled-border-color': rgba(211, 221, 222, 0.38),
+      'divide-border-color': rgba($color-white, 0.5),
+      'hover-text-color': getCssVar('color-primary'),
+      'hover-bg-color': #f2f5f7,
+      'hover-border-color': getCssVar('color-primary-light-7'),
+      'active-text-color': getCssVar('button-hover-text-color'),
+      'active-border-color': getCssVar('color-primary'),
+      'active-bg-color': #e7ecef,
+      'outline-color': getCssVar('color-primary', 'light-5'),
+      'hover-link-text-color': getCssVar('color-info'),
+      'active-color': getCssVar('text-color', 'primary'),
+      'primary-hover-color': #EB5100,
+    ),
+    $button
 );
 
 $button-border-width: $border-width !default;
@@ -676,559 +677,559 @@ $button-text-color: () !default;
 
 @each $type in $types {
   $button-border-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $button-border-color
+      (
+        $type: map.get($colors, $type, 'base'),
+      ),
+      $button-border-color
   ) !global;
 
   $button-bg-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $button-bg-color
+      (
+        $type: map.get($colors, $type, 'base'),
+      ),
+      $button-bg-color
   ) !global;
 }
 
 $button-font-size: () !default;
 $button-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'base'),
-    'default': getCssVar('font-size', 'base'),
-    'small': 12px,
-  ),
-  $button-font-size
+    (
+      'large': getCssVar('font-size', 'base'),
+      'default': getCssVar('font-size', 'base'),
+      'small': 12px,
+    ),
+    $button-font-size
 );
 
 $button-border-radius: () !default;
 $button-border-radius: map.merge(
-  (
-    'large': getCssVar('border-radius', 'custom'),
-    'default': getCssVar('border-radius', 'base'),
-    'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
-  ),
-  $button-border-radius
+    (
+      'large': getCssVar('border-radius', 'custom'),
+      'default': getCssVar('border-radius', 'custom'),
+      'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
+    ),
+    $button-border-radius
 );
 
 $button-padding-vertical: () !default;
 $button-padding-vertical: map.merge(
-  (
-    'large': 13px,
-    'default': 9px,
-    'small': 6px,
-  ),
-  $button-padding-vertical
+    (
+      'large': 12px,
+      'default': 9px,
+      'small': 6px,
+    ),
+    $button-padding-vertical
 );
 
 $button-padding-horizontal: () !default;
 $button-padding-horizontal: map.merge(
-  (
-    'large': 13px,
-    'default': 16px,
-    'small': 12px,
-  ),
-  $button-padding-horizontal
+    (
+      'large': 15px,
+      'default': 13px,
+      'small': 12px,
+    ),
+    $button-padding-horizontal
 );
 
 // Switch
 // css3 var in packages/theme-chalk/src/switch.scss
 $switch: () !default;
 $switch: map.merge(
-  (
-    'on-color': getCssVar('color-primary'),
-    'off-color': getCssVar('border-color'),
-  ),
-  $switch
+    (
+      'on-color': getCssVar('color-primary'),
+      'off-color': getCssVar('border-color'),
+    ),
+    $switch
 );
 
 // Dialog
 // css3 var in packages/theme-chalk/src/dialog.scss
 $dialog: () !default;
 $dialog: map.merge(
-  (
-    'width': 50%,
-    'margin-top': 15vh,
-    'bg-color': getCssVar('bg-color'),
-    'box-shadow': getCssVar('box-shadow'),
-    'title-font-size': getCssVar('font-size-large'),
-    'content-font-size': 14px,
-    'font-line-height': getCssVar('font-line-height-primary'),
-    'padding-primary': 20px,
-    'border-radius':16px,
-  ),
-  $dialog
+    (
+      'width': 50%,
+      'margin-top': 15vh,
+      'bg-color': getCssVar('bg-color'),
+      'box-shadow': getCssVar('box-shadow'),
+      'title-font-size': getCssVar('font-size-large'),
+      'content-font-size': 14px,
+      'font-line-height': getCssVar('font-line-height-primary'),
+      'padding-primary': 20px,
+      'border-radius':16px,
+    ),
+    $dialog
 );
 
 // Table
 // css3 var in packages/theme-chalk/src/table.scss
 $table: () !default;
 $table: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'border': 1px solid getCssVar('table-border-color'),
-    'text-color': getCssVar('text-color-regular'),
-    'header-text-color': getCssVar('text-color-secondary'),
-    'row-hover-bg-color': getCssVar('fill-color', 'light'),
-    'current-row-bg-color': getCssVar('color-primary-light-9'),
-    'header-bg-color': getCssVar('bg-color'),
-    'fixed-box-shadow': getCssVar('box-shadow', 'light'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'tr-bg-color': getCssVar('fill-color', 'blank'),
-    'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
-    'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
-    'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
-  ),
-  $table
+    (
+      'border-color': 1px solid getCssVar('table-border-color'),
+      'border': 1px solid #BBCDD8,
+      'text-color': getCssVar('text-color-regular'),
+      'header-text-color': getCssVar('text-color-secondary'),
+      'row-hover-bg-color': getCssVar('fill-color', 'light'),
+      'current-row-bg-color': getCssVar('color-primary-light-9'),
+      'header-bg-color': getCssVar('bg-color'),
+      'fixed-box-shadow': getCssVar('box-shadow', 'light'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'tr-bg-color': getCssVar('fill-color', 'blank'),
+      'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
+      'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
+      'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
+    ),
+    $table
 );
 
 $table-font-size: () !default;
 $table-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'base'),
-    'default': 14px,
-    'small': 12px,
-  ),
-  $table-font-size
+    (
+      'large': getCssVar('font-size', 'base'),
+      'default': 14px,
+      'small': 12px,
+    ),
+    $table-font-size
 );
 
 $table-padding: () !default;
 $table-padding: map.merge(
-  (
-    'large': 12px 0,
-    'default': 8px 0,
-    'small': 4px 0,
-  ),
-  $table-padding
+    (
+      'large': 12px 0,
+      'default': 8px 0,
+      'small': 4px 0,
+    ),
+    $table-padding
 );
 
 $table-cell-padding: () !default;
 $table-cell-padding: map.merge(
-  (
-    'large': 0 16px,
-    'default': 0 12px,
-    'small': 0 8px,
-  ),
-  $table-cell-padding
+    (
+      'large': 0 16px,
+      'default': 0 12px,
+      'small': 0 8px,
+    ),
+    $table-cell-padding
 );
 
 // Pagination
 // css3 var in packages/theme-chalk/src/pagination.scss
 $pagination: () !default;
 $pagination: map.merge(
-  (
-    'font-size': 14px,
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('text-color-primary'),
-    'border-radius': 2px,
-    'button-color': getCssVar('text-color-primary'),
-    'button-width': 32px,
-    'button-height': 32px,
-    'button-disabled-color': getCssVar('text-color-placeholder'),
-    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'button-bg-color': getCssVar('fill-color'),
-    'hover-color': getCssVar('color-primary'),
-    'font-size-small': 12px,
-    'button-width-small': 24px,
-    'button-height-small': 24px,
-    'item-gap': 16px,
-  ),
-  $pagination
+    (
+      'font-size': 12px,
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'text-color': getCssVar('text-color-primary'),
+      'border-radius': 2px,
+      'button-color': #1c2b36,
+      'button-width': 32px,
+      'button-height': 32px,
+      'button-disabled-color': #2a3f4d61,
+      'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
+      'button-bg-color': getCssVar('fill-color'),
+      'hover-color': getCssVar('color-primary'),
+      'font-size-small': 12px,
+      'button-width-small': 24px,
+      'button-height-small': 24px,
+      'item-gap': 40px,
+    ),
+    $pagination
 );
 
 // Popup
 // css3 var in packages/theme-chalk/src/popup.scss
 $popup: () !default;
 $popup: map.merge(
-  (
-    'modal-bg-color': getCssVar('color-black'),
-    'modal-opacity': 0.5,
-  ),
-  $popup
+    (
+      'modal-bg-color': getCssVar('color-black'),
+      'modal-opacity': 0.5,
+    ),
+    $popup
 );
 
 // Popover
 // css3 var in packages/theme-chalk/src/popover.scss
 $popover: () !default;
 $popover: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'font-size': getCssVar('font-size-base'),
-    'border-color': getCssVar('border-color-lighter'),
-    'padding': 8px,
-    'padding-large': 18px 20px,
-    'title-font-size': 16px,
-    'title-text-color': getCssVar('text-color-primary'),
-    'border-radius': 8px,
-  ),
-  $popover
+    (
+      'bg-color': getCssVar('bg-color', 'overlay'),
+      'font-size': getCssVar('font-size-base'),
+      'border-color': getCssVar('border-color-lighter'),
+      'padding': 8px,
+      'padding-large': 18px 20px,
+      'title-font-size': 16px,
+      'title-text-color': getCssVar('text-color-primary'),
+      'border-radius': 8px,
+    ),
+    $popover
 );
 
 // popper
 // Pay attention to the difference between 'popper' and 'popover'
 $popper: () !default;
 $popper: map.merge(
-  (
-    'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
-  ),
-  $popper
+    (
+      'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
+    ),
+    $popper
 );
 
 // skeleton
 $skeleton: () !default;
 $skeleton: map.merge(
-  (
-    'color': getCssVar('fill-color'),
-    'to-color': getCssVar('fill-color', 'darker'),
-  ),
-  $skeleton
+    (
+      'color': getCssVar('fill-color'),
+      'to-color': getCssVar('fill-color', 'darker'),
+    ),
+    $skeleton
 );
 
 // Tag
 // css3 var in packages/theme-chalk/src/tag.scss
 $tag: () !default;
 $tag: map.merge(
-  (
-    'font-size': 12px,
-    'border-radius': 4px,
-    'border-radius-rounded': 9999px,
-  ),
-  $tag
+    (
+      'font-size': 12px,
+      'border-radius': 4px,
+      'border-radius-rounded': 9999px,
+    ),
+    $tag
 );
 
 $tag-height: () !default;
 $tag-height: map.merge(
-  (
-    'large': 32px,
-    'default': 24px,
-    'small': 20px,
-  ),
-  $tag-height
+    (
+      'large': 32px,
+      'default': 24px,
+      'small': 20px,
+    ),
+    $tag-height
 );
 
 $tag-padding: () !default;
 $tag-padding: map.merge(
-  (
-    'large': 12px,
-    'default': 10px,
-    'small': 8px,
-  ),
-  $tag-padding
+    (
+      'large': 12px,
+      'default': 10px,
+      'small': 8px,
+    ),
+    $tag-padding
 );
 
 $tag-icon-size: () !default;
 $tag-icon-size: map.merge(
-  (
-    'large': 16px,
-    'default': 14px,
-    'small': 12px,
-  ),
-  $tag-icon-size
+    (
+      'large': 16px,
+      'default': 14px,
+      'small': 12px,
+    ),
+    $tag-icon-size
 );
 
 // Text
 // css3 var in packages/theme-chalk/src/text.scss
 $text: () !default;
 $text: map.merge(
-  (
-    'font-size': getCssVar('font-size', 'base'),
-    'color': getCssVar('text-color', 'regular'),
-  ),
-  $text
+    (
+      'font-size': getCssVar('font-size', 'base'),
+      'color': getCssVar('text-color', 'regular'),
+    ),
+    $text
 );
 
 $text-font-size: () !default;
 $text-font-size: map.merge(
-  (
-    'large': getCssVar('font-size', 'medium'),
-    'default': getCssVar('font-size', 'base'),
-    'small': getCssVar('font-size', 'extra-small'),
-  ),
-  $text-font-size
+    (
+      'large': getCssVar('font-size', 'medium'),
+      'default': getCssVar('font-size', 'base'),
+      'small': getCssVar('font-size', 'extra-small'),
+    ),
+    $text-font-size
 );
 
 // Tree
 // css3 var in packages/theme-chalk/src/tree.scss
 $tree: () !default;
 $tree: map.merge(
-  (
-    'node-hover-bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color-regular'),
-    'expand-icon-color': getCssVar('text-color-placeholder'),
-  ),
-  $tree
+    (
+      'node-hover-bg-color': getCssVar('fill-color', 'light'),
+      'text-color': getCssVar('text-color-regular'),
+      'expand-icon-color': getCssVar('text-color-placeholder'),
+    ),
+    $tree
 );
 
 // Dropdown
 $dropdown: () !default;
 $dropdown: map.merge(
-  (
-    'menu-box-shadow': getCssVar('box-shadow-light'),
-    'menuItem-hover-fill': getCssVar('color-primary-light-9'),
-    'menuItem-hover-color': getCssVar('color-primary'),
-    'menu-index': 10,
-  ),
-  $dropdown
+    (
+      'menu-box-shadow': getCssVar('box-shadow-light'),
+      'menuItem-hover-fill': getCssVar('color-primary-light-9'),
+      'menuItem-hover-color': getCssVar('color-primary'),
+      'menu-index': 10,
+    ),
+    $dropdown
 );
 
 // drawer
 $drawer: () !default;
 $drawer: map.merge(
-  (
-    'bg-color':
+    (
+      'bg-color':
       var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
-    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 0),
-  ),
-  $drawer
+      'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 0),
+    ),
+    $drawer
 );
 
 // Badge
 // css3 var in packages/theme-chalk/src/badge.scss
 $badge: () !default;
 $badge: map.merge(
-  (
-    'bg-color': getCssVar('color-danger'),
-    'radius': 10px,
-    'font-size': 12px,
-    'padding': 6px,
-    'size': 18px,
-  ),
-  $badge
+    (
+      'bg-color': getCssVar('color-danger'),
+      'radius': 10px,
+      'font-size': 12px,
+      'padding': 6px,
+      'size': 18px,
+    ),
+    $badge
 );
 
 // Card
 $card: () !default;
 $card: map.merge(
-  (
-    'border-color': getCssVar('border-color', 'light'),
-    'border-radius': 4px,
-    'padding': 20px,
-    'bg-color': getCssVar('fill-color', 'blank'),
-  ),
-  $card
+    (
+      'border-color': getCssVar('border-color', 'light'),
+      'border-radius': 4px,
+      'padding': 20px,
+      'bg-color': getCssVar('fill-color', 'blank'),
+    ),
+    $card
 );
 
 // Slider
 // css3 var in packages/theme-chalk/src/slider.scss
 $slider: () !default;
 $slider: map.merge(
-  (
-    'main-bg-color': getCssVar('color-primary'),
-    'runway-bg-color': getCssVar('border-color-light'),
-    'stop-bg-color': getCssVar('color-white'),
-    'disabled-color': getCssVar('text-color-placeholder'),
-    'border-radius': 3px,
-    'height': 6px,
-    'button-size': 20px,
-    'button-wrapper-size': 36px,
-    'button-wrapper-offset': -15px,
-  ),
-  $slider
+    (
+      'main-bg-color': getCssVar('color-primary'),
+      'runway-bg-color': getCssVar('border-color-light'),
+      'stop-bg-color': getCssVar('color-white'),
+      'disabled-color': getCssVar('text-color-placeholder'),
+      'border-radius': 3px,
+      'height': 6px,
+      'button-size': 20px,
+      'button-wrapper-size': 36px,
+      'button-wrapper-offset': -15px,
+    ),
+    $slider
 );
 
 // Menu
 // css3 var in packages/theme-chalk/src/menu.scss
 $menu: () !default;
 $menu: map.merge(
-  (
-    'active-color': getCssVar('color-primary'),
-    'text-color': getCssVar('text-color-primary'),
-    'hover-text-color': getCssVar('color-primary'),
-    'bg-color': getCssVar('fill-color', 'blank'),
-    'hover-bg-color': getCssVar('color-primary-light-9'),
-    'item-height': 56px,
-    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
-    'horizontal-sub-item-height': 36px,
-    'item-font-size': getCssVar('font-size-base'),
-    'item-hover-fill': getCssVar('color-primary-light-9'),
-    'border-color': getCssVar('border-color'),
-    'base-level-padding': 20px,
-    'level-padding': 20px,
-    'icon-width': 24px,
-  ),
-  $menu
+    (
+      'active-color': getCssVar('color-primary'),
+      'text-color': getCssVar('text-color-primary'),
+      'hover-text-color': getCssVar('color-primary'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'hover-bg-color': getCssVar('color-primary-light-9'),
+      'item-height': 56px,
+      'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
+      'horizontal-sub-item-height': 36px,
+      'item-font-size': getCssVar('font-size-base'),
+      'item-hover-fill': getCssVar('color-primary-light-9'),
+      'border-color': getCssVar('border-color'),
+      'base-level-padding': 20px,
+      'level-padding': 20px,
+      'icon-width': 24px,
+    ),
+    $menu
 );
 
 // Rate
 $rate: () !default;
 $rate: map.merge(
-  (
-    'height': 20px,
-    'font-size': getCssVar('font-size-base'),
-    'icon-size': 18px,
-    'icon-margin': 6px,
-    // seems not be used, to be removed
-    // 'icon-color': getCssVar('text-color-placeholder),
-    'void-color': getCssVar('border-color', 'darker'),
-    'fill-color': #f7ba2a,
-    'disabled-void-color': getCssVar('fill-color'),
-    'text-color': getCssVar('text-color', 'primary'),
-  ),
-  $rate
+    (
+      'height': 20px,
+      'font-size': getCssVar('font-size-base'),
+      'icon-size': 18px,
+      'icon-margin': 6px,
+      // seems not be used, to be removed
+      // 'icon-color': getCssVar('text-color-placeholder),
+      'void-color': getCssVar('border-color', 'darker'),
+      'fill-color': #f7ba2a,
+      'disabled-void-color': getCssVar('fill-color'),
+      'text-color': getCssVar('text-color', 'primary'),
+    ),
+    $rate
 );
 
 // DatePicker
 // css3 var packages/theme-chalk/src/date-picker/var.scss
 $datepicker: () !default;
 $datepicker: map.merge(
-  (
-    'text-color': getCssVar('text-color-regular'),
-    'off-text-color': getCssVar('text-color-placeholder'),
-    'header-text-color': getCssVar('text-color-regular'),
-    'icon-color': getCssVar('text-color-primary'),
-    'border-color': getCssVar('disabled-border-color'),
-    'inner-border-color': getCssVar('border-color-light'),
-    'inrange-bg-color': getCssVar('border-color-extra-light'),
-    'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
-    'active-color': getCssVar('color-primary'),
-    'hover-text-color': getCssVar('color-primary'),
-  ),
-  $datepicker
+    (
+      'text-color': getCssVar('text-color-regular'),
+      'off-text-color': getCssVar('text-color-placeholder'),
+      'header-text-color': getCssVar('text-color-regular'),
+      'icon-color': getCssVar('text-color-primary'),
+      'border-color': getCssVar('disabled-border-color'),
+      'inner-border-color': getCssVar('border-color-light'),
+      'inrange-bg-color': getCssVar('border-color-extra-light'),
+      'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
+      'active-color': getCssVar('color-primary'),
+      'hover-text-color': getCssVar('color-primary'),
+    ),
+    $datepicker
 );
 
 $date-editor: () !default;
 $date-editor: map.merge(
-  (
-    'width': 220px,
-    'monthrange-width': 300px,
-    'daterange-width': 350px,
-    'datetimerange-width': 400px,
-  ),
-  $date-editor
+    (
+      'width': 220px,
+      'monthrange-width': 300px,
+      'daterange-width': 350px,
+      'datetimerange-width': 400px,
+    ),
+    $date-editor
 );
 
 // Loading
 // css3 var in packages/theme-chalk/src/loading.scss
 $loading: () !default;
 $loading: map.merge(
-  (
-    'spinner-size': 42px,
-    'fullscreen-spinner-size': 50px,
-  ),
-  $loading
+    (
+      'spinner-size': 42px,
+      'fullscreen-spinner-size': 50px,
+    ),
+    $loading
 );
 
 // Scrollbar
 // css3 var in packages/theme-chalk/src/scrollbar.scss
 $scrollbar: () !default;
 $scrollbar: map.merge(
-  (
-    'opacity': 0.3,
-    'bg-color': getCssVar('text-color-secondary'),
-    'hover-opacity': 0.5,
-    'hover-bg-color': getCssVar('text-color-secondary'),
-  ),
-  $scrollbar
+    (
+      'opacity': 0.3,
+      'bg-color': getCssVar('text-color-secondary'),
+      'hover-opacity': 0.5,
+      'hover-bg-color': getCssVar('text-color-secondary'),
+    ),
+    $scrollbar
 );
 
 // Carousel
 // css3 var in packages/theme-chalk/src/carousel.scss
 $carousel: () !default;
 $carousel: map.merge(
-  (
-    'arrow-font-size': 12px,
-    'arrow-size': 36px,
-    'arrow-background': rgba(31, 45, 61, 0.11),
-    'arrow-hover-background': rgba(31, 45, 61, 0.23),
-    'indicator-width': 30px,
-    'indicator-height': 2px,
-    'indicator-padding-horizontal': 4px,
-    'indicator-padding-vertical': 12px,
-    'indicator-out-color': getCssVar('border-color-hover'),
-  ),
-  $carousel
+    (
+      'arrow-font-size': 12px,
+      'arrow-size': 36px,
+      'arrow-background': rgba(31, 45, 61, 0.11),
+      'arrow-hover-background': rgba(31, 45, 61, 0.23),
+      'indicator-width': 30px,
+      'indicator-height': 2px,
+      'indicator-padding-horizontal': 4px,
+      'indicator-padding-vertical': 12px,
+      'indicator-out-color': getCssVar('border-color-hover'),
+    ),
+    $carousel
 );
 
 // Collapse
 // css3 var in packages/theme-chalk/src/collapse.scss
 $collapse: () !default;
 $collapse: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'header-height': 48px,
-    'header-bg-color': getCssVar('fill-color', 'blank'),
-    'header-text-color': getCssVar('text-color-primary'),
-    'header-font-size': 13px,
-    'content-bg-color': getCssVar('fill-color', 'blank'),
-    'content-font-size': 13px,
-    'content-text-color': getCssVar('text-color-primary'),
-  ),
-  $collapse
+    (
+      'border-color': getCssVar('border-color-lighter'),
+      'header-height': 48px,
+      'header-bg-color': getCssVar('fill-color', 'blank'),
+      'header-text-color': getCssVar('text-color-primary'),
+      'header-font-size': 13px,
+      'content-bg-color': getCssVar('fill-color', 'blank'),
+      'content-font-size': 13px,
+      'content-text-color': getCssVar('text-color-primary'),
+    ),
+    $collapse
 );
 
 // Transfer
 // css3 var in packages/theme-chalk/src/transfer.scss
 $transfer: () !default;
 $transfer: map.merge(
-  (
-    'border-color': getCssVar('border-color-lighter'),
-    'border-radius': getCssVar('border-radius-base'),
-    'panel-width': 200px,
-    'panel-header-height': 40px,
-    'panel-header-bg-color': getCssVar('fill-color', 'light'),
-    'panel-footer-height': 40px,
-    'panel-body-height': 278px,
-    'item-height': 30px,
-    'filter-height': 32px,
-  ),
-  $transfer
+    (
+      'border-color': getCssVar('border-color-lighter'),
+      'border-radius': getCssVar('border-radius-base'),
+      'panel-width': 200px,
+      'panel-header-height': 40px,
+      'panel-header-bg-color': getCssVar('fill-color', 'light'),
+      'panel-footer-height': 40px,
+      'panel-body-height': 278px,
+      'item-height': 30px,
+      'filter-height': 32px,
+    ),
+    $transfer
 );
 
 // Timeline
 // css3 var in packages/theme-chalk/src/timeline-item.scss
 $timeline: () !default;
 $timeline: map.merge(
-  (
-    'node-size-normal': 12px,
-    'node-size-large': 14px,
-    'node-color': getCssVar('border-color-light'),
-  ),
-  $timeline
+    (
+      'node-size-normal': 12px,
+      'node-size-large': 14px,
+      'node-color': getCssVar('border-color-light'),
+    ),
+    $timeline
 );
 
 // Tabs
 // css3 var in packages/theme-chalk/src/tabs.scss
 $tabs: () !default;
 $tabs: map.merge(
-  (
-    'header-height': 40px,
-  ),
-  $tabs
+    (
+      'header-height': 40px,
+    ),
+    $tabs
 );
 
 // Backtop
 // css3 var in packages/theme-chalk/src/backtop.scss
 $backtop: () !default;
 $backtop: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-    'text-color': getCssVar('color-primary'),
-    'hover-bg-color': getCssVar('border-color-extra-light'),
-  ),
-  $backtop
+    (
+      'bg-color': getCssVar('bg-color', 'overlay'),
+      'text-color': getCssVar('color-primary'),
+      'hover-bg-color': getCssVar('border-color-extra-light'),
+    ),
+    $backtop
 );
 
 // Link
 // css3 var in packages/theme-chalk/src/link.scss
 $link: () !default;
 $link: map.merge(
-  (
-    'font-size': getCssVar('font-size-base'),
-    'font-weight': 400,
-    'text-color': getCssVar('text-color-primary'),
-    'hover-text-color': getCssVar('color-primary'),
-    'disabled-text-color': getCssVar('text-color-placeholder'),
-  ),
-  $link
+    (
+      'font-size': getCssVar('font-size-base'),
+      'font-weight': 400,
+      'text-color': getCssVar('text-color-primary'),
+      'hover-text-color': getCssVar('color-primary'),
+      'disabled-text-color': getCssVar('text-color-placeholder'),
+    ),
+    $link
 );
 
 $link-text-color: () !default;
 
 @each $type in $types {
   $link-text-color: map.merge(
-    $link-text-color,
-    (
-      $type: map.get($colors, $type, 'base'),
-    )
+      $link-text-color,
+      (
+        $type: map.get($colors, $type, 'base'),
+      )
   ) !global;
 }
 
@@ -1236,181 +1237,174 @@ $link-text-color: () !default;
 // css3 var in packages/theme-chalk/src/calendar.scss
 $calendar: () !default;
 $calendar: map.merge(
-  (
-    'border':
+    (
+      'border':
       var(
-        #{getCssVarName('table-border')},
-        1px solid #{getCssVar('border-color-lighter')}
+          #{getCssVarName('table-border')},
+          1px solid #{getCssVar('border-color-lighter')}
       ),
-    'header-border-bottom': getCssVar('calendar-border'),
-    'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
-    'cell-width': 85px,
-  ),
-  $calendar
+      'header-border-bottom': getCssVar('calendar-border'),
+      'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
+      'cell-width': 85px,
+    ),
+    $calendar
 );
 
 // Form
 // css3 var in packages/theme-chalk/src/form.scss
 $form: () !default;
 $form: map.merge(
-  (
-    'label-font-size': getCssVar('font-size-base'),
-  ),
-  $form
+    (
+      'label-font-size': getCssVar('font-size-base'),
+    ),
+    $form
 );
 
 // Avatar
 // css3 var in packages/theme-chalk/src/avatar.scss
 $avatar: () !default;
 $avatar: map.merge(
-  (
-    'text-color': getCssVar('color-white'),
-    'bg-color': getCssVar('text-color', 'disabled'),
-    'text-size': 14px,
-    'icon-size': 18px,
-    'border-radius': getCssVar('border-radius-base'),
-  ),
-  $avatar
+    (
+      'text-color': getCssVar('color-white'),
+      'bg-color': getCssVar('text-color', 'disabled'),
+      'text-size': 14px,
+      'icon-size': 18px,
+      'border-radius': getCssVar('border-radius-base'),
+    ),
+    $avatar
 );
 
 $avatar-size: () !default;
 $avatar-size: map.merge(
-  (
-    'large': 56px,
-    'default': 40px,
-    'small': 24px,
-  ),
-  $avatar-size
+    (
+      'large': 56px,
+      'default': 40px,
+      'small': 24px,
+    ),
+    $avatar-size
 );
 
 // Empty
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
 $empty: map.merge(
-  (
-    'padding': 40px 0,
-    'image-width': 160px,
-    'description-margin-top': 20px,
-    'bottom-margin-top': 20px,
-    'fill-color-0': getCssVar('color-white'),
-    'fill-color-1': #fcfcfd,
-    'fill-color-2': #f8f9fb,
-    'fill-color-3': #f7f8fc,
-    'fill-color-4': #eeeff3,
-    'fill-color-5': #edeef2,
-    'fill-color-6': #e9ebef,
-    'fill-color-7': #e5e7e9,
-    'fill-color-8': #e0e3e9,
-    'fill-color-9': #d5d7de,
-  ),
-  $empty
+    (
+      'padding': 40px 0,
+      'image-width': 160px,
+      'description-margin-top': 20px,
+      'bottom-margin-top': 20px,
+      'fill-color-0': getCssVar('color-white'),
+      'fill-color-1': #fcfcfd,
+      'fill-color-2': #f8f9fb,
+      'fill-color-3': #f7f8fc,
+      'fill-color-4': #eeeff3,
+      'fill-color-5': #edeef2,
+      'fill-color-6': #e9ebef,
+      'fill-color-7': #e5e7e9,
+      'fill-color-8': #e0e3e9,
+      'fill-color-9': #d5d7de,
+    ),
+    $empty
 );
 
 // Descriptions
 // css3 var in packages/theme-chalk/src/descriptions.scss
 $descriptions: () !default;
 $descriptions: map.merge(
-  (
-    'table-border': 1px solid getCssVar('border-color-lighter'),
-    'item-bordered-label-background': getCssVar('fill-color', 'light'),
-  ),
-  $descriptions
+    (
+      'table-border': 1px solid getCssVar('border-color-lighter'),
+      'item-bordered-label-background': getCssVar('fill-color', 'light'),
+    ),
+    $descriptions
 );
 
 // Result
 // css3 var in packages/theme-chalk/src/result.scss
 $result: () !default;
 $result: map.merge(
-  (
-    'padding': 40px 30px,
-    'icon-font-size': 64px,
-    'title-font-size': 20px,
-    'title-margin-top': 20px,
-    'subtitle-margin-top': 10px,
-    'extra-margin-top': 30px,
-  ),
-  $result
+    (
+      'padding': 40px 30px,
+      'icon-font-size': 64px,
+      'title-font-size': 20px,
+      'title-margin-top': 20px,
+      'subtitle-margin-top': 10px,
+      'extra-margin-top': 30px,
+    ),
+    $result
 );
 
 // Upload
 // css3 var in packages/theme-chalk/src/upload.scss
 $upload: () !default;
 $upload: map.merge(
-  (
-    'dragger-padding-horizontal': 40px,
-    'dragger-padding-vertical': 10px,
-  ),
-  $upload
+    (
+      'dragger-padding-horizontal': 40px,
+      'dragger-padding-vertical': 10px,
+    ),
+    $upload
 );
 
 // transition
 $transition: () !default;
 $transition: map.merge(
-  (
-    'all': all getCssVar('transition-duration')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'fade': opacity getCssVar('transition-duration')
-      getCssVar('transition-function-fast-bezier'),
-    'md-fade': (
-      transform getCssVar('transition-duration')
-        getCssVar('transition-function-fast-bezier'),
-      opacity getCssVar('transition-duration')
-        getCssVar('transition-function-fast-bezier'),
-    ),
-    'fade-linear': opacity getCssVar('transition-duration-fast') linear,
-    'border': border-color getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'box-shadow': box-shadow getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-    'color': color getCssVar('transition-duration-fast')
-      getCssVar('transition-function-ease-in-out-bezier'),
-  ),
-  $transition
+    (
+      'all': all getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
+      'fade': opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
+      'md-fade': (
+        transform getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
+        opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
+      ),
+      'fade-linear': opacity getCssVar('transition-duration-fast') linear,
+      'border': border-color getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
+      'box-shadow': box-shadow getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
+      'color': color getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
+    ),
+    $transition
 );
 
 $transition-duration: () !default;
 $transition-duration: map.merge(
-  (
-    '': 0.3s,
-    'fast': 0.2s,
-  ),
-  $transition-duration
+    (
+      '': 0.3s,
+      'fast': 0.2s,
+    ),
+    $transition-duration
 );
 
 $transition-function: () !default;
 $transition-function: map.merge(
-  (
-    'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
-    'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
-  ),
-  $transition-function
+    (
+      'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
+      'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
+    ),
+    $transition-function
 );
 
 // header
 $header: () !default;
 $header: map.merge(
-  (
-    'padding': 0 20px,
-    'height': 60px,
-  ),
-  $header
+    (
+      'padding': 0 20px,
+      'height': 60px,
+    ),
+    $header
 );
 // main
 $main: () !default;
 $main: map.merge(
-  (
-    'padding': 20px,
-  ),
-  $main
+    (
+      'padding': 20px,
+    ),
+    $main
 );
 // footer
 $footer: () !default;
 $footer: map.merge(
-  (
-    'padding': 0 20px,
-    'height': 60px,
-  ),
-  $footer
+    (
+      'padding': 0 20px,
+      'height': 60px,
+    ),
+    $footer
 );
 
 // Break-point