vft 0.0.142 → 0.0.144

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

@@ -1,8 +1,7 @@
-@use "sass:math";
-@use "sass:map";
-
-@use "../mixins/function.scss" as *;
-@forward "./icon.scss";
+@use 'sass:math';
+@use 'sass:map';
+@use '../mixins/function.scss' as *;
+@forward './icon.scss';
 
 // types
 $types: primary, success, warning, danger, error, info;
@@ -10,61 +9,58 @@ $types: primary, success, warning, danger, error, info;
 // Color
 $colors: () !default;
 $colors: map.deep-merge(
-    (
-      "white": #fff,
-      "black": #000,
-      "primary": (
-        "base": #2196f3,
-      ),
-      "success": (
-        "base": #3eaf7c,
-      ),
-      "warning": (
-        "base": #fb9b5f,
-      ),
-      "danger": (
-        "base": #f26d6d,
-      ),
-      "error": (
-        "base": #f26d6d,
-      ),
-      "info": (
-        "base": #909399,
-      ),
+  (
+    'white': #fff,
+    'black': #000,
+    'primary': (
+      'base': #2196f3,
     ),
-    $colors
+    'success': (
+      'base': #3eaf7c,
+    ),
+    'warning': (
+      'base': #fb9b5f,
+    ),
+    'danger': (
+      'base': #f26d6d,
+    ),
+    'error': (
+      'base': #f26d6d,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+  $colors
 );
-
-$color-white: map.get($colors, "white") !default;
-$color-black: map.get($colors, "black") !default;
-$primary-color: getCssVar("primary-color") !default;
-$success-color: getCssVar("success-color") !default;
-$warning-color: getCssVar("warning-color") !default;
-$danger-color: getCssVar("danger-color") !default;
-$error-color: getCssVar("error-color") !default;
-$info-color: getCssVar("info-color") !default;
-
-
+$color-white: map-get($colors, 'white') !default;
+$color-black: map-get($colors, 'black') !default;
+$primary-color: map-get($colors, 'primary', 'base') !default;
+$success-color: map-get($colors, 'success', 'base') !default;
+$warning-color: map-get($colors, 'warning', 'base') !default;
+$danger-color: map-get($colors, 'danger', 'base') !default;
+$error-color: map-get($colors, 'error', 'base') !default;
+$info-color: map-get($colors, 'info', 'base') !default;
 
 // 将颜色与黑白混合以生成明暗级别
 @mixin set-color-mix-level(
   $type,
   $number,
-  $mode: "light",
+  $mode: 'light',
   $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;
 }
 
@@ -81,1503 +77,1448 @@ $info-color: getCssVar("info-color") !default;
 // 90% ecf5ff
 @each $type in $types {
   @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, "light", $color-white);
+    @include set-color-mix-level($type, $i, 'light', $color-white);
   }
 }
 
 // --vft-primary-color-dark-2
 @each $type in $types {
-  @include set-color-mix-level($type, 2, "dark", $color-black);
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
 }
 
-$text-color: () !default;
-$text-color: map.merge(
-    (
-      "primary-color": #303133,
-      "regular-color": #606266,
-      "secondary-color": #909399,
-      "placeholder-color": #a8abb2,
-      "disabled-color": #c0c4cc,
-    ),
-    $text-color
+$text: () !default;
+$text: map-merge(
+  (
+    'primary-color': #303133,
+    'regular-color': #606266,
+    'secondary-color': #909399,
+    'placeholder-color': #a8abb2,
+    'disabled-color': #c0c4cc,
+  ),
+  $text
+);
+$text-dark: () !default;
+$text-dark: map-merge(
+  (
+    'primary-color': white,
+  ),
+  $text-dark
 );
-
-$text-color-dark: () !default;
-$text-color-dark: map.merge(
-    (
-      "primary-color": white,
-    ),
-    $text-color-dark
-);
-
 $border-color: () !default;
-$border-color: map.merge(
-    (
-      "": #dcdfe6,
-      "light": #e4e7ed,
-      "lighter": #ebeef5,
-      "extra-light": #f2f6fc,
-      "dark": #d4d7de,
-      "darker": #cdd0d6,
-    ),
-    $border-color
+$border-color: map-merge(
+  (
+    '': #dcdfe6,
+    'light': #e4e7ed,
+    'lighter': #ebeef5,
+    '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": #fff,
-    ),
-    $fill-color
+$fill-color: map-merge(
+  (
+    '': #f0f2f5,
+    'light': #f5f7fa,
+    'lighter': #fafafa,
+    'extra-light': #fafcff,
+    'dark': #ebedf0,
+    'darker': #e6e8eb,
+    'blank': #fff,
+  ),
+  $fill-color
 );
-
-// Background
 $bg-color: () !default;
-$bg-color: map.merge(
-    (
-      "": #fff,
-      "page": #f2f3f5,
-      "overlay": #fff,
-    ),
-    $bg-color
+$bg-color: map-merge(
+  (
+    '': #fff,
+    'page': #f2f3f5,
+    'overlay': #fff,
+  ),
+  $bg-color
 );
-
-// Border
 $border-width: 1px !default;
 $border-style: solid !default;
-$border-color-hover: getCssVar("text", "disabled-color") !default;
-
+$border-color-hover: getCssVar('text', 'disabled-color') !default;
 $border-radius: () !default;
-$border-radius: map.merge(
-    (
-      "base": 4px,
-      "small": 2px,
-      "round": 20px,
-      "circle": 100%,
-    ),
-    $border-radius
+$border-radius: map-merge(
+  (
+    'base': 4px,
+    '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": (
-        0px 0px 12px rgba(0, 0, 0, 0.12),
-      ),
-      "lighter": (
-        0px 0px 6px rgba(0, 0, 0, 0.12),
-      ),
-      "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: map-merge(
+  (
+    '': (
+      0 12px 32px 4px rgba(0, 0, 0, 0.04),
+      0 8px 20px rgba(0, 0, 0, 0.08),
+    ),
+    'light': (
+      0 0 12px rgba(0, 0, 0, 0.12),
+    ),
+    'lighter': (
+      0 0 6px rgba(0, 0, 0, 0.12),
     ),
-    $box-shadow
+    'dark': (
+      0 16px 48px 16px rgba(0, 0, 0, 0.08),
+      0 12px 32px rgba(0, 0, 0, 0.12),
+      0 8px 16px -8px rgba(0, 0, 0, 0.16),
+    ),
+  ),
+  $box-shadow
 );
-
-// Typography
 $font-family: () !default;
-$font-family: map.merge(
-    (
-      // default family
-      "":
-      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
-    ),
-    $font-family
+$font-family: map-merge(
+  (
+    '':
+      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
+  ),
+  $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
+$font-size: map-merge(
+  (
+    'extra-large': 20px,
+    'large': 18px,
+    'medium': 16px,
+    'base': 14px,
+    'small': 13px,
+    'extra-small': 12px,
+  ),
+  $font-size
 );
 
 // zIndex
 $z-index: () !default;
-$z-index: map.merge(
-    (
-      "normal": 1,
-      "top": 1000,
-      "popper": 2000,
-      'backtop': 3050,
-      'header-layout': 100
-    ),
-    $z-index
+$z-index: map-merge(
+  (
+    'normal': 1,
+    'top': 1000,
+    'popper': 2000,
+    'backtop': 3050,
+    'header-layout': 100,
+  ),
+  $z-index
 );
-
-// Disable default
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;
+$breakpoints: (
+  'xs': '(max-width: #{$sm})',
+  'sm': '(min-width: #{$sm})',
+  'md': '(min-width: #{$md})',
+  'lg': '(min-width: #{$lg})',
+  'xl': '(min-width: #{$xl})',
+) !default;
+$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})',
+) !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
+$disabled: map-merge(
+  (
+    'bg-color': getCssVar('fill-color', 'light'),
+    'text-color': getCssVar('text', 'placeholder-color'),
+    '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
+$common-component-size: map-merge(
+  (
+    '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
+$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
 );
 
 // mask
 $mask-color: () !default;
-$mask-color: map.merge(
-    (
-      "": rgba(255, 255, 255, 0.9),
-      "extra-light": rgba(255, 255, 255, 0.3),
-    ),
-    $mask-color
+$mask-color: map-merge(
+  (
+    '': rgba(255, 255, 255, 0.9),
+    'extra-light': rgba(255, 255, 255, 0.3),
+  ),
+  $mask-color
 );
 
 // 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"),
-      "bg-color": background-color getCssVar("transition-duration-fast") getCssVar("transition-function-ease-in-out-bezier"),
-    ),
-    $transition
+$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'),
+    'bg-color': background-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
+$transition-duration: map-merge(
+  (
+    '': 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
+$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
 );
-
 $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', 'regular-color'),
-      'disabled-text-color': getCssVar('text-disabled-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('primary-color'),
-      'hover-bg-color': getCssVar('primary-color', 'light-9'),
-      'hover-border-color': getCssVar('primary-color-light-7'),
-      'active-text-color': getCssVar('button-hover-text-color'),
-      'active-border-color': getCssVar('primary-color'),
-      'active-bg-color': getCssVar('button', 'hover-bg-color'),
-      'outline-color': getCssVar('primary-color', 'light-5'),
-      'hover-link-text-color': getCssVar('info-color'),
-      'active-color': getCssVar('text-primary-color'),
-    ),
-    $button
+$button: map-merge(
+  (
+    'font-weight': getCssVar('font-weight-primary'),
+    'border-color': getCssVar('border-color'),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'text-color': getCssVar('text', 'regular-color'),
+    'disabled-text-color': getCssVar('text', 'disabled-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('primary-color'),
+    'hover-bg-color': getCssVar('primary-color', 'light-9'),
+    'hover-border-color': getCssVar('primary-color', 'light-7'),
+    'active-text-color': getCssVar('button', 'hover-text-color'),
+    'active-border-color': getCssVar('primary-color'),
+    'active-bg-color': getCssVar('button', 'hover-bg-color'),
+    'outline-color': getCssVar('primary-color', 'light-5'),
+    'hover-link-text-color': getCssVar('info-color'),
+    'active-color': getCssVar('text', 'primary-color'),
+  ),
+  $button
 );
-
 $button-border-width: $border-width !default;
 
 // need mix, so do not use css var
 $button-hover-tint-percent: 20%;
 $button-active-shade-percent: 10%;
-
 $button-border-color: () !default;
 $button-bg-color: () !default;
 $button-text-color: () !default;
 
 @each $type in $types {
-  $button-border-color: map.merge(
-      (
-        $type: map.get($colors, $type, 'base'),
-      ),
-      $button-border-color
+  $button-border-color: map-merge(
+    (
+      $type: map-get($colors, $type, 'base'),
+    ),
+    $button-border-color
   ) !global;
-
-  $button-bg-color: map.merge(
-      (
-        $type: map.get($colors, $type, 'base'),
-      ),
-      $button-bg-color
+  $button-bg-color: map-merge(
+    (
+      $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
+$button-font-size: map-merge(
+  (
+    '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', 'base'),
-      'default': getCssVar('border-radius', 'base'),
-      'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
-    ),
-    $button-border-radius
+$button-border-radius: map-merge(
+  (
+    'large': getCssVar('border-radius', 'base'),
+    'default': getCssVar('border-radius', 'base'),
+    '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
+$button-padding-vertical: map-merge(
+  (
+    'large': 13px,
+    'default': 9px,
+    'small': 6px,
+  ),
+  $button-padding-vertical
 );
-
 $button-padding-horizontal: () !default;
-$button-padding-horizontal: map.merge(
-    (
-      'large': 20px,
-      'default': 16px,
-      'small': 12px,
-    ),
-    $button-padding-horizontal
+$button-padding-horizontal: map-merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $button-padding-horizontal
 );
-
 $checkbox: () !default;
-$checkbox: map.merge(
-    (
-      'font-size': 14px,
-      'font-weight': getCssVar('font-weight-primary'),
-      'text-color': getCssVar('text-regular-color'),
-      'input-height': 14px,
-      'input-width': 14px,
-      'border-radius': getCssVar('border-radius-small'),
-      'bg-color': getCssVar('fill-color', 'blank'),
-      'input-border': getCssVar('border'),
-      'disabled-border-color': getCssVar('border-color'),
-      'disabled-input-fill': getCssVar('fill-color', 'light'),
-      'disabled-icon-color': getCssVar('text-placeholder-color'),
-      'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
-      'disabled-checked-input-border-color': getCssVar('border-color'),
-      'disabled-checked-icon-color': getCssVar('text-placeholder-color'),
-      'checked-text-color': getCssVar('primary-color'),
-      'checked-input-border-color': getCssVar('primary-color'),
-      'checked-bg-color': getCssVar('primary-color'),
-      'checked-icon-color': getCssVar('color', 'white'),
-      'input-border-color-hover': getCssVar('primary-color'),
-    ),
-    $checkbox
+$checkbox: map-merge(
+  (
+    'font-size': 14px,
+    'font-weight': getCssVar('font-weight-primary'),
+    'text-color': getCssVar('text-regular-color'),
+    'input-height': 14px,
+    'input-width': 14px,
+    'border-radius': getCssVar('border-radius-small'),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'input-border': getCssVar('border'),
+    'disabled-border-color': getCssVar('border-color'),
+    'disabled-input-fill': getCssVar('fill-color', 'light'),
+    'disabled-icon-color': getCssVar('text-placeholder-color'),
+    'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
+    'disabled-checked-input-border-color': getCssVar('border-color'),
+    'disabled-checked-icon-color': getCssVar('text-placeholder-color'),
+    'checked-text-color': getCssVar('primary-color'),
+    'checked-input-border-color': getCssVar('primary-color'),
+    'checked-bg-color': getCssVar('primary-color'),
+    'checked-icon-color': getCssVar('color', 'white'),
+    'input-border-color-hover': getCssVar('primary-color'),
+  ),
+  $checkbox
 );
-
 $checkbox-button: () !default;
-$checkbox-button: map.merge(
-    (
-      'checked-bg-color': getCssVar('primary-color'),
-      'checked-text-color': getCssVar('color-white'),
-      'checked-border-color': getCssVar('primary-color'),
-    ),
-    $checkbox-button
+$checkbox-button: map-merge(
+  (
+    'checked-bg-color': getCssVar('primary-color'),
+    'checked-text-color': getCssVar('color-white'),
+    'checked-border-color': getCssVar('primary-color'),
+  ),
+  $checkbox-button
 );
-
 $checkbox-bordered-padding-left: () !default;
-$checkbox-bordered-padding-left: map.merge(
-    (
-      'large': 12px,
-      'default': 10px,
-      'small': 8px,
-    ),
-    $checkbox-bordered-padding-left
+$checkbox-bordered-padding-left: map-merge(
+  (
+    '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
+$checkbox-bordered-padding-right: map-merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $checkbox-bordered-padding-right
 );
-
-
 $radio: () !default;
-$radio: map.merge(
-    (
-      'font-size': getCssVar('font-size-base'),
-      'text-color': getCssVar('text-regular-color'),
-      '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('primary-color'),
-    ),
-    $radio
+$radio: map-merge(
+  (
+    'font-size': getCssVar('font-size-base'),
+    'text-color': getCssVar('text-regular-color'),
+    '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('primary-color'),
+  ),
+  $radio
 );
-
 $radio-height: () !default;
-$radio-height: map.merge($common-component-size, $radio-height);
-
+$radio-height: map-merge($common-component-size, $radio-height);
 $radio-button: () !default;
-$radio-button: map.merge(
-    (
-      'checked-bg-color': getCssVar('primary-color'),
-      'checked-text-color': getCssVar('color-white'),
-      'checked-border-color': getCssVar('primary-color'),
-      'disabled-checked-fill': getCssVar('border-color-extra-light'),
-    ),
-    $radio-button
+$radio-button: map-merge(
+  (
+    'checked-bg-color': getCssVar('primary-color'),
+    'checked-text-color': getCssVar('color-white'),
+    'checked-border-color': getCssVar('primary-color'),
+    '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-placeholder-color'),
-    ),
-    $radio-disabled
+$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-placeholder-color'),
+  ),
+  $radio-disabled
 );
-
 $radio-checked: () !default;
-$radio-checked: map.merge(
-    (
-      'text-color': getCssVar('primary-color'),
-      'input-border-color': getCssVar('primary-color'),
-      'icon-color': getCssVar('primary-color'),
-    ),
-    $radio-checked
+$radio-checked: map-merge(
+  (
+    'text-color': getCssVar('primary-color'),
+    'input-border-color': getCssVar('primary-color'),
+    'icon-color': getCssVar('primary-color'),
+  ),
+  $radio-checked
 );
-
 $radio-bordered-input-height: () !default;
-$radio-bordered-input-height: map.merge(
-    (
-      'large': 14px,
-      'default': 12px,
-      'small': 12px,
-    ),
-    $radio-bordered-input-height
+$radio-bordered-input-height: map-merge(
+  (
+    '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
+$radio-bordered-input-width: map-merge(
+  (
+    'large': 14px,
+    'default': 12px,
+    'small': 12px,
+  ),
+  $radio-bordered-input-width
 );
 
 // Switch
 // css3 var in packages/theme-chalk/src/switch.scss
 $switch: () !default;
-$switch: map.merge(
-    (
-      'on-color': getCssVar('primary-color'),
-      'off-color': getCssVar('border-color'),
-    ),
-    $switch
+$switch: map-merge(
+  (
+    'on-color': getCssVar('primary-color'),
+    'off-color': getCssVar('border-color'),
+  ),
+  $switch
 );
 
 // Dropdown
 $dropdown: () !default;
-$dropdown: map.merge(
-    (
-      'menu-box-shadow': getCssVar('box-shadow-light'),
-      'menuItem-hover-fill': getCssVar('primary-color-light-9'),
-      'menuItem-hover-color': getCssVar('primary-color'),
-      'menu-index': 10,
-    ),
-    $dropdown
+$dropdown: map-merge(
+  (
+    'menu-box-shadow': getCssVar('box-shadow-light'),
+    'menuItem-hover-fill': getCssVar('primary-color-light-9'),
+    'menuItem-hover-color': getCssVar('primary-color'),
+    'menu-index': 10,
+  ),
+  $dropdown
 );
-
 $header-layout: () !default;
 $header-layout: map-merge(
-    (
-      height: 70px,
-      top-height: 40px,
-      bg-color: #eff1f5,
-      left-min-width: 800px,
-      z-index: getCssVar('z-index-header-layout'),
-    ),
-    $header-layout
+  (
+    height: 70px,
+    top-height: 40px,
+    bg-color: #eff1f5,
+    left-min-width: 800px,
+    z-index: getCssVar('z-index-header-layout'),
+  ),
+  $header-layout
 );
-
 $footer-layout: () !default;
 $footer-layout: map-merge(
-    (
-      "bg-color": getCssVar('header-layout-bg-color'),
-      "border-top": getCssVar('border'),
-      "left": getCssVar("menu-width"),
-      "height": "30px",
-      "left-min-width": "auto",
-      "right-min-width": "auto",
-      'z-index': 10,
-    ),
-    $footer-layout
+  (
+    'bg-color': getCssVar('header-layout-bg-color'),
+    'border-top': getCssVar('border'),
+    'left': getCssVar('menu-width'),
+    'height': '30px',
+    'left-min-width': 'auto',
+    'right-min-width': 'auto',
+    'z-index': 10,
+  ),
+  $footer-layout
 );
-
 $name: side-menu;
 $side-menu: () !default;
 $side-menu: map-merge(
-    (
-      "border": getCssVar("menu-border-right"),
-      "scroll-mr": 0,
-      'bg-color': getCssVar('fill-color', 'blank')
-    ),
-    $side-menu
+  (
+    'border': getCssVar('menu-border-right'),
+    'scroll-mr': 0,
+    'bg-color': getCssVar('fill-color', 'blank'),
+  ),
+  $side-menu
 );
-
 $iframe-page: () !default;
 $iframe-page: map-merge(
-    (
-      "text-color": white,
-    ),
-    $iframe-page
+  (
+    'text-color': white,
+  ),
+  $iframe-page
 );
-
 $icon: () !default;
 $icon: map-merge(
-    (
-      "size": 14px,
-      "color": inherit,
-      "cursor": initial,
-      "animation": none,
-    ),
-    $icon
+  (
+    'size': 14px,
+    'color': inherit,
+    'cursor': initial,
+    'animation': none,
+  ),
+  $icon
 );
-
 $icon-text: () !default;
 $icon-text: map-merge(
-    (
-      "color": inherit,
-      "font-size": 12px,
-      "cursor": initial,
-    ),
-    $icon-text
+  (
+    'color': inherit,
+    'font-size': 12px,
+    'cursor': initial,
+  ),
+  $icon-text
 );
-
 $message: () !default;
 $message: map-merge(
-    (
-      "border-radius": 2px,
-      "border-width": 2px,
-      "border-color": red,
-      "padding": 15px 19px,
-      "bg-color": getCssVar("color", "info", "light-9"),
-    ),
-    $message
+  (
+    'border-radius': 2px,
+    'border-width': 2px,
+    'border-color': red,
+    'padding': 15px 19px,
+    'bg-color': getCssVar('color', 'info', 'light-9'),
+  ),
+  $message
 );
-
 $divider: () !default;
 $divider: map-merge(
-    (
-      "margin-y": "24px",
-      "margin-x": "8px",
-      "border-color": #dcdfe6,
-      "border-style": "solid",
-    ),
-    $divider
+  (
+    'margin-y': '24px',
+    'margin-x': '8px',
+    'border-color': #dcdfe6,
+    'border-style': 'solid',
+  ),
+  $divider
 );
-
 $tabs: () !default;
 $tabs: map-merge(
-    (
-      "padding": 0,
-      "font-size": 14px,
-      "font-weight": 400,
-      "font-weight-active": 500,
-      "header-height": 40px,
-      "border-bottom": 1px solid #eee,
-      "nav-color": #eee,
-      "header-margin": 0 0 15px,
-      "header-padding": 0,
-      "header-border-bottom": none,
-      "item-padding": 0 20px,
-      "item-max-width": 100%,
-      "item-bg-color": transparent,
-      "item-active-bg-color": transparent,
-      "item-hover-bg-color": transparent,
-      "item-color": black,
-      "item-active-color": inherit,
-      "item-hover-color": inherit,
-      "item-border": 0px solid #eee,
-      "item-active-border": 0px solid #eee,
-      "item-hover-border": 0px solid transparent,
-      "item-distance": 10px,
-      "item-border-radius": 5px 5px 0 0,
-      "close-icon-left": 5px,
-      "close-icon-hover-color": black,
-      "close-icon-hover-bg-color": #dfdfdf,
-      "add-icon-right": 30px,
-      "add-icon-padding-left": 20px,
-      "scroll-padding": 0 60px 0 20px,
-      "active-distance": 14px,
-      "show-border-bottom": block,
-    ),
-    $tabs
+  (
+    'padding': 0,
+    'font-size': 14px,
+    'font-weight': 400,
+    'font-weight-active': 500,
+    'header-height': 40px,
+    'border-bottom': 1px solid #eee,
+    'nav-color': #eee,
+    'header-margin': 0 0 15px,
+    'header-padding': 0,
+    'header-border-bottom': none,
+    'item-padding': 0 20px,
+    'item-max-width': 100%,
+    'item-bg-color': transparent,
+    'item-active-bg-color': transparent,
+    'item-hover-bg-color': transparent,
+    'item-color': black,
+    'item-active-color': inherit,
+    'item-hover-color': inherit,
+    'item-border': 0 solid #eee,
+    'item-active-border': 0 solid #eee,
+    'item-hover-border': 0 solid transparent,
+    'item-distance': 10px,
+    'item-border-radius': 5px 5px 0 0,
+    'close-icon-left': 5px,
+    'close-icon-hover-color': black,
+    'close-icon-hover-bg-color': #dfdfdf,
+    'add-icon-right': 30px,
+    'add-icon-padding-left': 20px,
+    'scroll-padding': 0 60px 0 20px,
+    'active-distance': 14px,
+    'show-border-bottom': block,
+  ),
+  $tabs
 );
-
 $multiple-tabs: () !default;
 $multiple-tabs: map-merge(
-    (
-      "bg-color": getCssVar('header-layout-bg-color'),
-      "height": 30px,
-    ),
-    $multiple-tabs
+  (
+    'bg-color': getCssVar('header-layout-bg-color'),
+    'height': 30px,
+  ),
+  $multiple-tabs
 );
-
 $menu: () !default;
 $menu: map-merge(
-    (
-      "bg-color": getCssVar('fill-color', 'blank'),
-      "popup-bg-color": getCssVar('fill-color', 'blank'),
-      "sub-menu-bg-color": getCssVar('fill-color', 'blank'),
-      "no-popup-active-bg-color": getCssVar('fill-color', 'blank'),
-      "active-color": getCssVar("primary-color"),
-      "text-color": getCssVar("text-primary-color"),
-      "hover-text-color": getCssVar("primary-color"),
-      "hover-bg-color": getCssVar("primary-color-light-9"),
-      "focus-text-color": getCssVar("primary-color"),
-      "focus-bg-color": getCssVar("primary-color-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("primary-color-light-9"),
-      "border-bottom": getCssVar("border"),
-      "base-level-padding": 20px,
-      "level-padding": 20px,
-      "icon-mr": 6px,
-      "icon-width": 14px,
-      "border": getCssVar("border"),
-      "border-right": getCssVar('border'),
-      'item-border-bottom': 2px solid transparent,
-      'item-active-border-bottom': 2px solid getCssVar('menu-active-color'),
-      "item-min-width": 200px,
-    ),
-    $menu
+  (
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'popup-bg-color': getCssVar('fill-color', 'blank'),
+    'sub-menu-bg-color': getCssVar('fill-color', 'blank'),
+    'no-popup-active-bg-color': getCssVar('fill-color', 'blank'),
+    'active-color': getCssVar('primary-color'),
+    'text-color': getCssVar('text-primary-color'),
+    'hover-text-color': getCssVar('primary-color'),
+    'hover-bg-color': getCssVar('primary-color-light-9'),
+    'focus-text-color': getCssVar('primary-color'),
+    'focus-bg-color': getCssVar('primary-color-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('primary-color-light-9'),
+    'border-bottom': getCssVar('border'),
+    'base-level-padding': 20px,
+    'level-padding': 20px,
+    'icon-mr': 6px,
+    'icon-width': 14px,
+    'border': getCssVar('border'),
+    'border-right': getCssVar('border'),
+    'item-border-bottom': 2px solid transparent,
+    'item-active-border-bottom': 2px solid getCssVar('menu-active-color'),
+    'item-min-width': 200px,
+  ),
+  $menu
 );
-
 $logo: () !default;
 $logo: map-merge(
-    (
-      img-width: 30px,
-      img-height: 30px,
-      color: $primary-color,
-      font-size: 16px,
-      font-weight: 400,
-      cursor: pointer,
-    ),
-    $logo
+  (
+    img-width: 30px,
+    img-height: 30px,
+    color: $primary-color,
+    font-size: 16px,
+    font-weight: 400,
+    cursor: pointer,
+  ),
+  $logo
 );
-
 $loading: () !default;
 $loading: map-merge(
-    (
-      "spinner-size": 20px,
-      "fullscreen-spinner-size": 50px,
-      "rotate-animation": loading-rotate 2s linear infinite,
-      "color": $primary-color,
-      "text-size": 14px,
-      "margin": 3px 0,
-    ),
-    $loading
+  (
+    'spinner-size': 20px,
+    'fullscreen-spinner-size': 50px,
+    'rotate-animation': loading-rotate 2s linear infinite,
+    'color': $primary-color,
+    'text-size': 14px,
+    'margin': 3px 0,
+  ),
+  $loading
 );
-
 $full-screen: () !default;
 $full-screen: map-merge(
-    (
-      "color": getCssVar('text-primary-color'),
-      "hover-color": $primary-color,
-      "font-size": 12px,
-    ),
-    $full-screen
+  (
+    'color': getCssVar('text-primary-color'),
+    'hover-color': $primary-color,
+    'font-size': 12px,
+  ),
+  $full-screen
 );
 
 // 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-secondary-color"),
-      "input-color": getCssVar("text-placeholder-color"),
-      "multiple-input-color": getCssVar("text-regular-color"),
-      "input-focus-border-color": getCssVar("primary-color"),
-      "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-secondary-color'),
+    'input-color': getCssVar('text-placeholder-color'),
+    'multiple-input-color': getCssVar('text-regular-color'),
+    'input-focus-border-color': getCssVar('primary-color'),
+    'input-font-size': 14px,
+  ),
+  $select
 );
-
 $select-option: () !default;
 $select-option: map-merge(
-    (
-      "text-color": getCssVar("text-regular-color"),
-      "disabled-color": getCssVar("text-placeholder-color"),
-      "height": 34px,
-      "hover-background": getCssVar("fill-color", "light"),
-      "selected-text-color": getCssVar("primary-color"),
-    ),
-    $select-option
+  (
+    'text-color': getCssVar('text-regular-color'),
+    'disabled-color': getCssVar('text-placeholder-color'),
+    'height': 34px,
+    'hover-background': getCssVar('fill-color', 'light'),
+    'selected-text-color': getCssVar('primary-color'),
+  ),
+  $select-option
 );
-
 $select-group: () !default;
 $select-group: map-merge(
-    (
-      "text-color": getCssVar("info-color"),
-      "height": 30px,
-      "font-size": 12px,
-    ),
-    $select-group
+  (
+    'text-color': getCssVar('info-color'),
+    '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-secondary-color"),
-      "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-secondary-color'),
+    '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
 );
-
 $input: () !default;
 $input: map-merge(
-    (
-      "width": "100%",
-      "text-color": getCssVar("text-regular-color"),
-      "border": getCssVar("border"),
-      "hover-border": getCssVar("border-color-hover"),
-      "focus-border": getCssVar("primary-color"),
-      "transparent-border": 0 0 0 1px transparent inset,
-      "border-color": getCssVar("border-color"),
-      "border-radius": getCssVar("border-radius-base"),
-      "bg-color": getCssVar("fill-color", "blank"),
-      "icon-color": getCssVar("text-placeholder-color"),
-      "placeholder-color": getCssVar("text-placeholder-color"),
-      "hover-border-color": getCssVar("border-color-hover"),
-      "clear-hover-color": getCssVar("text-secondary-color"),
-      "focus-border-color": getCssVar("primary-color"),
-    ),
-    $input
+  (
+    'width': '100%',
+    'text-color': getCssVar('text-regular-color'),
+    'border': getCssVar('border'),
+    'hover-border': getCssVar('border-color-hover'),
+    'focus-border': getCssVar('primary-color'),
+    'transparent-border': 0 0 0 1px transparent inset,
+    'border-color': getCssVar('border-color'),
+    'border-radius': getCssVar('border-radius-base'),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'icon-color': getCssVar('text-placeholder-color'),
+    'placeholder-color': getCssVar('text-placeholder-color'),
+    'hover-border-color': getCssVar('border-color-hover'),
+    'clear-hover-color': getCssVar('text-secondary-color'),
+    'focus-border-color': getCssVar('primary-color'),
+  ),
+  $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-placeholder-color"),
-    ),
-    $input-disabled
+  (
+    'fill': getCssVar('disabled-bg-color'),
+    'border': getCssVar('disabled-border-color'),
+    'text-color': getCssVar('disabled-text-color'),
+    'placeholder-color': getCssVar('text-placeholder-color'),
+  ),
+  $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;
 $input-height: map-merge($common-component-size, $input-height);
-
 $input-line-height: () !default;
 $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: () !default;
 $cascader: map-merge(
-    (
-      "menu-text-color": getCssVar("text-regular-color"),
-      "menu-selected-text-color": getCssVar("primary-color"),
-      "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-placeholder-color"),
-      "color-empty": getCssVar("text-placeholder-color"),
-      "tag-background": getCssVar("fill-color"),
-    ),
-    $cascader
+  (
+    'menu-text-color': getCssVar('text-regular-color'),
+    'menu-selected-text-color': getCssVar('primary-color'),
+    '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-placeholder-color'),
+    'color-empty': getCssVar('text-placeholder-color'),
+    'tag-background': getCssVar('fill-color'),
+  ),
+  $cascader
 );
-
 $scrollbar: () !default;
 $scrollbar: map-merge(
-    (
-      "opacity": 0.3,
-      "bg-color": getCssVar("text-secondary-color"),
-      "hover-opacity": 0.5,
-      "hover-bg-color": getCssVar("text-secondary-color"),
-    ),
-    $scrollbar
+  (
+    'opacity': 0.3,
+    'bg-color': getCssVar('text-secondary-color'),
+    'hover-opacity': 0.5,
+    'hover-bg-color': getCssVar('text-secondary-color'),
+  ),
+  $scrollbar
 );
-
 $popover: () !default;
 $popover: map-merge(
-    (
-      "bg-color": getCssVar("bg-color", "overlay"),
-      "font-size": getCssVar("font-size-base"),
-      "border-color": getCssVar("border-color-lighter"),
-      "padding": 12px,
-      "padding-large": 18px 20px,
-      "title-font-size": 16px,
-      "title-text-color": getCssVar("text-primary-color"),
-      "border-radius": 4px,
-    ),
-    $popover
+  (
+    'bg-color': getCssVar('bg-color', 'overlay'),
+    'font-size': getCssVar('font-size-base'),
+    'border-color': getCssVar('border-color-lighter'),
+    'padding': 12px,
+    'padding-large': 18px 20px,
+    'title-font-size': 16px,
+    'title-text-color': getCssVar('text-primary-color'),
+    'border-radius': 4px,
+  ),
+  $popover
 );
-
 $avatar: () !default;
 $avatar: map-merge(
-    (
-      "text-color": getCssVar("color-white"),
-      "bg-color": getCssVar("text", "disabled-color"),
-      "text-size": 14px,
-      "icon-size": 18px,
-      "border-radius": getCssVar("border-radius-base"),
-    ),
-    $avatar
+  (
+    'text-color': getCssVar('color-white'),
+    'bg-color': getCssVar('text', 'disabled-color'),
+    '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
 );
-
 $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
 );
-
 $md-container: () !default;
 $md-container: map-merge(
-    (
-      "primary-color": $primary-color,
-      "content-max-width": 800px,
-      "code-bg-color": #fff5f5,
-      "line-numbers-width": "2.5rem",
-      "icon-copy":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
-      "icon-copied":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
-      // info
-      info-title-color: #193c47,
-      info-bg-color: #eef9fd,
-      info-border-color: #4cb3d4,
-      info-code-bg-color: rgb(76 179 212 / 10%),
-      // note
-      note-title-color: #474748,
-      note-bg-color: #fdfdfe,
-      note-border-color: #ccc,
-      note-code-bg-color: rgb(212 213 216 / 20%),
-      // tip
-      tip-title-color: #003100,
-      tip-bg-color: #e6f6e6,
-      tip-border-color: #009400,
-      tip-code-bg-color: rgb(0 148 0 / 15%),
-      // warning
-      warning-title-color: #4d3800,
-      warning-bg-color: #fff8e6,
-      warning-border-color: #e6a700,
-      warning-code-bg-color: rgb(230 167 0 / 15%),
-      // danger
-      danger-title-color: #4b1113,
-      danger-bg-color: #ffebec,
-      danger-border-color: #e13238,
-      danger-code-bg-color: rgb(225 50 56 / 15%),
-      // detail
-      detail-bg-color: #eee,
-      detail-text-color: inherit,
-      detail-code-bg-color: rgb(127 127 127 / 15%),
-    ), $md-container
+  (
+    'primary-color': $primary-color,
+    'content-max-width': 800px,
+    'code-bg-color': #fff5f5,
+    'line-numbers-width': '2.5rem',
+    'icon-copy':
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
+    'icon-copied':
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
+    // info
+    info-title-color: #193c47,
+    info-bg-color: #eef9fd,
+    info-border-color: #4cb3d4,
+    info-code-bg-color: rgb(76 179 212 / 10%),
+    // note
+    note-title-color: #474748,
+    note-bg-color: #fdfdfe,
+    note-border-color: #ccc,
+    note-code-bg-color: rgb(212 213 216 / 20%),
+    // tip
+    tip-title-color: #003100,
+    tip-bg-color: #e6f6e6,
+    tip-border-color: #009400,
+    tip-code-bg-color: rgb(0 148 0 / 15%),
+    // warning
+    warning-title-color: #4d3800,
+    warning-bg-color: #fff8e6,
+    warning-border-color: #e6a700,
+    warning-code-bg-color: rgb(230 167 0 / 15%),
+    // danger
+    danger-title-color: #4b1113,
+    danger-bg-color: #ffebec,
+    danger-border-color: #e13238,
+    danger-code-bg-color: rgb(225 50 56 / 15%),
+    // detail
+    detail-bg-color: #eee,
+    detail-text-color: inherit,
+    detail-code-bg-color: rgb(127 127 127 / 15%),
+  ),
+  $md-container
 );
-
 $pagination: () !default;
 $pagination: map-merge(
-    (
-      "font-size": 14px,
-      "bg-color": getCssVar("fill-color", "blank"),
-      "text-color": getCssVar("text-primary-color"),
-      "border-radius": 2px,
-      "button-color": getCssVar("text-primary-color"),
-      "button-width": 32px,
-      "button-height": 32px,
-      "button-disabled-color": getCssVar("text-placeholder-color"),
-      "button-disabled-bg-color": getCssVar("fill-color", "blank"),
-      "button-bg-color": getCssVar("fill-color"),
-      "hover-color": getCssVar("primary-color"),
-      "font-size-small": 12px,
-      "button-width-small": 24px,
-      "button-height-small": 24px,
-      "item-gap": 16px,
-    ),
-    $pagination
+  (
+    'font-size': 14px,
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'text-color': getCssVar('text-primary-color'),
+    'border-radius': 2px,
+    'button-color': getCssVar('text-primary-color'),
+    'button-width': 32px,
+    'button-height': 32px,
+    'button-disabled-color': getCssVar('text-placeholder-color'),
+    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
+    'button-bg-color': getCssVar('fill-color'),
+    'hover-color': getCssVar('primary-color'),
+    'font-size-small': 12px,
+    'button-width-small': 24px,
+    'button-height-small': 24px,
+    'item-gap': 16px,
+  ),
+  $pagination
 );
-
 $tag: () !default;
 $tag: map-merge(
-    (
-      "font-size": 12px,
-      "border-radius": 4px,
-      "border-radius-rounded": 9999px,
-      "content-line-clamp-num": 1,
-      "content-max-width": 100%,
-    ),
-    $tag
+  (
+    'font-size': 12px,
+    'border-radius': 4px,
+    'border-radius-rounded': 9999px,
+    'content-line-clamp-num': 1,
+    'content-max-width': 100%,
+  ),
+  $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
 );
-
 $backtop: () !default;
 $backtop: map-merge(
-    (
-      "bg-color": getCssVar("bg-color-overlay"),
-      "text-color": getCssVar('text-primary-color'),
-      "hover-bg-color": getCssVar("border-color-extra-light"),
-    ),
-    $backtop
+  (
+    'bg-color': getCssVar('bg-color-overlay'),
+    'text-color': getCssVar('text-primary-color'),
+    'hover-bg-color': getCssVar('border-color-extra-light'),
+  ),
+  $backtop
 );
-
 $empty: () !default;
-$empty: map-merge((
-  'img-size': '160px',
-  'img-size-small': '80px',
-  'img-size-large': '240px',
-  'text-color': white,
-  'desc-top': '10px',
-  'desc-color': getCssVar('text-placeholder-color'),
-  'desc-size': 14px,
-), $empty);
-
+$empty: map-merge(
+  (
+    'img-size': '160px',
+    'img-size-small': '80px',
+    'img-size-large': '240px',
+    'text-color': white,
+    'desc-top': '10px',
+    'desc-color': getCssVar('text-placeholder-color'),
+    'desc-size': 14px,
+  ),
+  $empty
+);
 $result: () !default;
-$result: map-merge((
-  'padding': 40px 30px,
-  'icon-font-size': 64px,
-  'title-font-size': 20px,
-  'title-margin-top': 20px,
-  'sub-title-margin-top': 10px,
-  'extra-margin-top': 30px,
-), $result);
-
+$result: map-merge(
+  (
+    'padding': 40px 30px,
+    'icon-font-size': 64px,
+    'title-font-size': 20px,
+    'title-margin-top': 20px,
+    'sub-title-margin-top': 10px,
+    'extra-margin-top': 30px,
+  ),
+  $result
+);
 $popper: () !default;
-$popper: map-merge((
-  'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
-), $popper);
-
+$popper: map-merge(
+  (
+    'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
+  ),
+  $popper
+);
 $link: () !default;
-$link: map-merge((
-  'font-size': getCssVar('font-size-base'),
-  'font-weight': getCssVar('font-weight-primary'),
-  'text-color': getCssVar('text-regular-color'),
-  'hover-text-color': getCssVar('primary-color'),
-  'disabled-text-color': getCssVar('text-placeholder-color'),
-), $link);
-
+$link: map-merge(
+  (
+    'font-size': getCssVar('font-size-base'),
+    'font-weight': getCssVar('font-weight-primary'),
+    'text-color': getCssVar('text-regular-color'),
+    'hover-text-color': getCssVar('primary-color'),
+    'disabled-text-color': getCssVar('text-placeholder-color'),
+  ),
+  $link
+);
 $clamp-toggle: () !default;
-$clamp-toggle: map-merge((
-  'toggle-color': #1382EF,
-  'toggle-size': 12px,
-  'color': #111,
-  'size': 12px,
-), $clamp-toggle);
-
+$clamp-toggle: map-merge(
+  (
+    'toggle-color': #1382ef,
+    'toggle-size': 12px,
+    'color': #111,
+    'size': 12px,
+  ),
+  $clamp-toggle
+);
 $form: () !default;
-$form: map.merge(
-    (
-      'label-font-size': getCssVar('font-size-base'),
-    ),
-    $form
+$form: map-merge(
+  (
+    'label-font-size': getCssVar('font-size', 'base'),
+  ),
+  $form
 );
 
 // 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': getCssVar('border-radius-small'),
-    ),
-    $dialog
+$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': getCssVar('border-radius-small'),
+  ),
+  $dialog
 );
 
 // 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
+$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
 );
-
 $list-cell: () !default;
-$list-cell: map-merge((
-  'height': 40px,
-  'hover-bg-color': transparent,
-  'active-color': $primary-color,
-  'text-size': 13px,
-  'left-text-distance': 6px,
-  'padding': 0px,
-), $list-cell);
-
+$list-cell: map-merge(
+  (
+    'height': 40px,
+    'hover-bg-color': transparent,
+    'active-color': $primary-color,
+    'text-size': 13px,
+    'left-text-distance': 6px,
+    'padding': 0,
+  ),
+  $list-cell
+);
 $search: () !default;
-$search: map-merge((
-  active-width: 100%,
-  border-color: getCssVar('input-border-color'),
-  hover-border-color: getCssVar('primary-color'),
-  active-bg-color: getCssVar('input-bg-color'),
-  hover-bg-color: getCssVar('input-bg-color'),
-  border-radius: getCssVar('border-radius-base'),
-), $search);
-
-
-// Break-point
-$sm: 768px !default;
-$md: 992px !default;
-$lg: 1200px !default;
-$xl: 1920px !default;
-
-$breakpoints: (
-  'xs': '(max-width: #{$sm})',
-  'sm': '(min-width: #{$sm})',
-  'md': '(min-width: #{$md})',
-  'lg': '(min-width: #{$lg})',
-  'xl': '(min-width: #{$xl})',
-) !default;
-
-$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})',
-) !default;
+$search: map-merge(
+  (
+    active-width: 100%,
+    border-color: getCssVar('input-border-color'),
+    hover-border-color: getCssVar('primary-color'),
+    active-bg-color: getCssVar('input-bg-color'),
+    hover-bg-color: getCssVar('input-bg-color'),
+    border-radius: getCssVar('border-radius-base'),
+  ),
+  $search
+);
 
 // 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
+$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
 );
 
 // MessageBox
 // css3 var in packages/theme-chalk/src/message-box.scss
 $messagebox: () !default;
-$messagebox: map.merge(
-    (
-      'title-color': getCssVar('text-primary-color'),
-      'width': 420px,
-      'border-radius': 4px,
-      'font-size': getCssVar('font-size-large'),
-      'content-font-size': getCssVar('font-size-base'),
-      'content-color': getCssVar('text-regular-color'),
-      'error-font-size': 12px,
-      'padding-primary': 15px,
-    ),
-    $messagebox
+$messagebox: map-merge(
+  (
+    'title-color': getCssVar('text-primary-color'),
+    'width': 420px,
+    'border-radius': 4px,
+    'font-size': getCssVar('font-size-large'),
+    'content-font-size': getCssVar('font-size-base'),
+    'content-color': getCssVar('text-regular-color'),
+    'error-font-size': 12px,
+    'padding-primary': 15px,
+  ),
+  $messagebox
 );
 
 // 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':
+$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':
       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-regular-color'),
-      'title-font-size': 16px,
-      'title-color': getCssVar('text-primary-color'),
-      'close-color': getCssVar('text-secondary-color'),
-      'close-hover-color': getCssVar('text-regular-color'),
-    ),
-    $notification
+    'group-margin-left': 13px,
+    'group-margin-right': 8px,
+    'content-font-size': getCssVar('font-size-base'),
+    'content-color': getCssVar('text-regular-color'),
+    'title-font-size': 16px,
+    'title-color': getCssVar('text-primary-color'),
+    'close-color': getCssVar('text-secondary-color'),
+    'close-hover-color': getCssVar('text-regular-color'),
+  ),
+  $notification
 );
 
-
 // Cascader
 // css3 var in packages/theme-chalk/src/cascader.scss
 $cascader: () !default;
-$cascader: map.merge(
-    (
-      'menu-text-color': getCssVar('text-regular-color'),
-      'menu-selected-text-color': getCssVar('primary-color'),
-      '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-placeholder-color'),
-      'color-empty': getCssVar('text-placeholder-color'),
-      'tag-background': getCssVar('fill-color'),
-    ),
-    $cascader
+$cascader: map-merge(
+  (
+    'menu-text-color': getCssVar('text-regular-color'),
+    'menu-selected-text-color': getCssVar('primary-color'),
+    '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-placeholder-color'),
+    'color-empty': getCssVar('text-placeholder-color'),
+    '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-regular-color'),
-      'content-font-weight': 400,
-      'content-font-size': getCssVar('font-size', 'extra-large'),
-      'content-color': getCssVar('text-primary-color'),
-    ),
-    $statistic
+$statistic: map-merge(
+  (
+    'title-font-weight': 400,
+    'title-font-size': getCssVar('font-size', 'extra-small'),
+    'title-color': getCssVar('text-regular-color'),
+    'content-font-weight': 400,
+    'content-font-size': getCssVar('font-size', 'extra-large'),
+    'content-color': getCssVar('text-primary-color'),
+  ),
+  $statistic
 );
 
 // skeleton
 $skeleton: () !default;
-$skeleton: map.merge(
-    (
-      'color': getCssVar('fill-color'),
-      'to-color': getCssVar('fill-color', 'darker'),
-    ),
-    $skeleton
+$skeleton: map-merge(
+  (
+    'color': getCssVar('fill-color'),
+    'to-color': getCssVar('fill-color', 'darker'),
+  ),
+  $skeleton
 );
 
 // 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-regular-color'),
-      'expand-icon-color': getCssVar('text-placeholder-color'),
-    ),
-    $tree
+$tree: map-merge(
+  (
+    'node-hover-bg-color': getCssVar('fill-color', 'light'),
+    'text-color': getCssVar('text-regular-color'),
+    'expand-icon-color': getCssVar('text-placeholder-color'),
+  ),
+  $tree
 );
 
 // drawer
 $drawer: () !default;
-$drawer: map.merge(
-    (
-      'bg-color':
+$drawer: map-merge(
+  (
+    'bg-color':
       var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
-      'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
-    ),
-    $drawer
+    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
+  ),
+  $drawer
 );
 
 // Badge
 // css3 var in packages/theme-chalk/src/badge.scss
 $badge: () !default;
-$badge: map.merge(
-    (
-      'bg-color': getCssVar('danger-color'),
-      'radius': 10px,
-      'font-size': 12px,
-      'padding': 6px,
-      'size': 18px,
-    ),
-    $badge
+$badge: map-merge(
+  (
+    'bg-color': getCssVar('danger-color'),
+    '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
+$card: map-merge(
+  (
+    '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('primary-color'),
-      'runway-bg-color': getCssVar('border-color-light'),
-      'stop-bg-color': getCssVar('color-white'),
-      'disabled-color': getCssVar('text-placeholder-color'),
-      'border-radius': 3px,
-      'height': 6px,
-      'button-size': 20px,
-      'button-wrapper-size': 36px,
-      'button-wrapper-offset': -15px,
-    ),
-    $slider
+$slider: map-merge(
+  (
+    'main-bg-color': getCssVar('primary-color'),
+    'runway-bg-color': getCssVar('border-color', 'light'),
+    'stop-bg-color': getCssVar('color-white'),
+    'disabled-color': getCssVar('text', 'placeholder-color'),
+    'border-radius': 3px,
+    'height': 6px,
+    'button-size': 20px,
+    'button-wrapper-size': 36px,
+    'button-wrapper-offset': -15px,
+  ),
+  $slider
 );
 
 // 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-placeholder-color),
-      'void-color': getCssVar('border-color', 'darker'),
-      'fill-color': #f7ba2a,
-      'disabled-void-color': getCssVar('fill-color'),
-      'text-color': getCssVar('text-primary-color'),
-    ),
-    $rate
+$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-placeholder-color),
+    'void-color': getCssVar('border-color', 'darker'),
+    'fill-color': #f7ba2a,
+    'disabled-void-color': getCssVar('fill-color'),
+    'text-color': getCssVar('text-primary-color'),
+  ),
+  $rate
 );
 
 // DatePicker
 // css3 var packages/theme-chalk/src/date-picker/var.scss
 $datepicker: () !default;
-$datepicker: map.merge(
-    (
-      'text-color': getCssVar('text-regular-color'),
-      'off-text-color': getCssVar('text-placeholder-color'),
-      'header-text-color': getCssVar('text-regular-color'),
-      'icon-color': getCssVar('text-primary-color'),
-      '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('primary-color'),
-      'hover-text-color': getCssVar('primary-color'),
-    ),
-    $datepicker
+$datepicker: map-merge(
+  (
+    'text-color': getCssVar('text-regular-color'),
+    'off-text-color': getCssVar('text-placeholder-color'),
+    'header-text-color': getCssVar('text-regular-color'),
+    'icon-color': getCssVar('text-primary-color'),
+    '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('primary-color'),
+    'hover-text-color': getCssVar('primary-color'),
+  ),
+  $datepicker
 );
-
 $date-editor: () !default;
-$date-editor: map.merge(
-    (
-      'width': 220px,
-      'monthrange-width': 300px,
-      'daterange-width': 350px,
-      'datetimerange-width': 400px,
-    ),
-    $date-editor
+$date-editor: map-merge(
+  (
+    'width': 220px,
+    'monthrange-width': 300px,
+    'daterange-width': 350px,
+    'datetimerange-width': 400px,
+  ),
+  $date-editor
 );
 
 // 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
+$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
 );
 
 // 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-primary-color'),
-      'header-font-size': 13px,
-      'content-bg-color': getCssVar('fill-color', 'blank'),
-      'content-font-size': 13px,
-      'content-text-color': getCssVar('text-primary-color'),
-    ),
-    $collapse
+$collapse: map-merge(
+  (
+    'border-color': getCssVar('border-color-lighter'),
+    'header-height': 48px,
+    'header-bg-color': getCssVar('fill-color', 'blank'),
+    'header-text-color': getCssVar('text-primary-color'),
+    'header-font-size': 13px,
+    'content-bg-color': getCssVar('fill-color', 'blank'),
+    'content-font-size': 13px,
+    'content-text-color': getCssVar('text-primary-color'),
+  ),
+  $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
+$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
 );
 
 // 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
+$timeline: map-merge(
+  (
+    'node-size-normal': 12px,
+    'node-size-large': 14px,
+    'node-color': getCssVar('border-color-light'),
+  ),
+  $timeline
 );
 
 // Calendar
 // css3 var in packages/theme-chalk/src/calendar.scss
 $calendar: () !default;
-$calendar: map.merge(
-    (
-      'border':
+$calendar: map-merge(
+  (
+    '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('primary-color', 'light-9'),
-      'cell-width': 85px,
-    ),
-    $calendar
+    'header-border-bottom': getCssVar('calendar-border'),
+    'selected-bg-color': getCssVar('primary-color', 'light-9'),
+    'cell-width': 85px,
+  ),
+  $calendar
 );
 
 // Upload
 // css3 var in packages/theme-chalk/src/upload.scss
 $upload: () !default;
-$upload: map.merge(
-    (
-      'dragger-padding-horizontal': 40px,
-      'dragger-padding-vertical': 10px,
-    ),
-    $upload
+$upload: map-merge(
+  (
+    'dragger-padding-horizontal': 40px,
+    'dragger-padding-vertical': 10px,
+  ),
+  $upload
 );
 
 // header
 $header: () !default;
-$header: map.merge(
-    (
-      'height': 60px,
-    ),
-    $header
+$header: map-merge(
+  (
+    'height': 60px,
+  ),
+  $header
 );
 
 // footer
 $footer: () !default;
-$footer: map.merge(
-    (
-      'height': 60px,
-    ),
-    $footer
+$footer: map-merge(
+  (
+    'height': 60px,
+  ),
+  $footer
 );
 
 // 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
+$popup: map-merge(
+  (
+    'modal-bg-color': getCssVar('color-black'),
+    'modal-opacity': 0.5,
+  ),
+  $popup
 );
-
 $horizontal-menu: () !default;
-$horizontal-menu: map.merge((
-  'tile-width': 90vw,
-  'tile-height': 400px,
-  'tile-padding': 24px 10px 24px 24px,
-  'tile-content-gap-y': 20px,
-  'tile-content-col-item-gap': '12px 4px',
-  'tile-content-col-gap-y': 40px
-), $horizontal-menu);
-
+$horizontal-menu: map-merge(
+  (
+    'tile-width': 90vw,
+    'tile-height': 400px,
+    'tile-padding': 24px 10px 24px 24px,
+    'tile-content-gap-y': 20px,
+    'tile-content-col-item-gap': '12px 4px',
+    'tile-content-col-gap-y': 40px,
+  ),
+  $horizontal-menu
+);
 $table: () !default;
-$table: map.merge((
-  'header-bg-color': rgb(248, 250, 255),
-  'header-color': rgba(0, 0, 0, 0.85),
-  'header-text-size': 13px,
-  'header-padding-x': 12px,
-  'header-padding-y': 6px,
-  'header-line-height': 18px,
-  'header-line-clamp': 2,
-  'header-height': '30px',
-  'toolbar-height': '50px',
-  'body-text-size': 13px,
-  'body-padding-x': 12px,
-  'body-line-height': 18px,
-  'body-line-clamp': 3,
-  'body-color': #141414,
-  'border': 1px solid rgb(242, 244, 249),
-  'stripe-bg-color': rgb(249, 251, 255),
-  'row-hover-bg-color': #ebf0fc,
-  'border-fixed': 1px solid rgb(232, 236, 244),
-), $table);
-
+$table: map-merge(
+  (
+    'header-bg-color': rgb(248, 250, 255),
+    'header-color': rgba(0, 0, 0, 0.85),
+    'header-text-size': 13px,
+    'header-padding-x': 12px,
+    'header-padding-y': 6px,
+    'header-line-height': 18px,
+    'header-line-clamp': 2,
+    'header-height': '30px',
+    'toolbar-height': '50px',
+    'body-text-size': 13px,
+    'body-padding-x': 12px,
+    'body-line-height': 18px,
+    'body-line-clamp': 3,
+    'body-color': #141414,
+    'border': 1px solid rgb(242, 244, 249),
+    'stripe-bg-color': rgb(249, 251, 255),
+    'row-hover-bg-color': #ebf0fc,
+    'border-fixed': 1px solid rgb(232, 236, 244),
+  ),
+  $table
+);