@qsxy/element-plus-react 1.0.0-next.4 → 1.0.0-next.7

package/dist/theme-chalk/bak/common/var.scss

@@ -1,1476 +0,0 @@
-/* Element Chalk Variables */
-@use 'sass:math';
-@use 'sass:map';
-
-@use '../mixins/function.scss' as *;
-
-// Special comment for theme configurator
-// type|skipAutoTranslation|Category|Order
-// skipAutoTranslation 1
-
-// types
-$types: primary, success, warning, danger, error, info;
-
-// Color
-$colors: () !default;
-$colors: map.deep-merge(
-    (
-        'white': #ffffff,
-        'black': #000000,
-        'primary': (
-            'base': #409eff,
-        ),
-        'success': (
-            'base': #67c23a,
-        ),
-        'warning': (
-            'base': #e6a23c,
-        ),
-        'danger': (
-            'base': #f56c6c,
-        ),
-        'error': (
-            'base': #f56c6c,
-        ),
-        'info': (
-            'base': #909399,
-        ),
-    ),
-    $colors
-);
-
-$color-white: map.get($colors, 'white') !default;
-$color-black: map.get($colors, 'black') !default;
-$color-primary: map.get($colors, 'primary', 'base') !default;
-$color-success: map.get($colors, 'success', 'base') !default;
-$color-warning: map.get($colors, 'warning', 'base') !default;
-$color-danger: map.get($colors, 'danger', 'base') !default;
-$color-error: map.get($colors, 'error', 'base') !default;
-$color-info: map.get($colors, 'info', 'base') !default;
-
-// https://sass-lang.com/documentation/values/maps#immutability
-// mix colors with white/black to generate light/dark level
-@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
-    $colors: map.deep-merge(
-        (
-            $type: (
-                '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10))),
-            ),
-        ),
-        $colors
-    ) !global;
-}
-
-// $colors.primary.light-i
-// --el-color-primary-light-i
-// 10% 53a8ff
-// 20% 66b1ff
-// 30% 79bbff
-// 40% 8cc5ff
-// 50% a0cfff
-// 60% b3d8ff
-// 70% c6e2ff
-// 80% d9ecff
-// 90% ecf5ff
-@each $type in $types {
-    @for $i from 1 through 9 {
-        @include set-color-mix-level($type, $i, 'light', $color-white);
-    }
-}
-
-// --el-color-primary-dark-2
-@each $type in $types {
-    @include set-color-mix-level($type, 2, 'dark', $color-black);
-}
-
-$text-color: () !default;
-$text-color: map.merge(
-    (
-        'primary': #303133,
-        'regular': #606266,
-        'secondary': #909399,
-        'placeholder': #a8abb2,
-        'disabled': #c0c4cc,
-    ),
-    $text-color
-);
-
-$border-color: () !default;
-$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': #ffffff,
-    ),
-    $fill-color
-);
-
-// Background
-$bg-color: () !default;
-$bg-color: map.merge(
-    (
-        '': #ffffff,
-        'page': #f2f3f5,
-        'overlay': #ffffff,
-    ),
-    $bg-color
-);
-
-// Border
-$border-width: 1px !default;
-$border-style: solid !default;
-$border-color-hover: getCssVar('text-color', 'disabled') !default;
-
-$border-radius: () !default;
-$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
-);
-
-// 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-size: () !default;
-$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,
-    ),
-    $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
-);
-
-$common-component-size: () !default;
-$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
-);
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-    (
-        '': rgba(255, 255, 255, 0.9),
-        'extra-light': rgba(255, 255, 255, 0.3),
-    ),
-    $mask-color
-);
-
-// Components
-// ---
-// Checkbox
-// 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': getCssVar('text-color-regular'),
-        '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-color-placeholder'),
-        'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
-        'disabled-checked-input-border-color': getCssVar('border-color'),
-        'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
-        'checked-text-color': getCssVar('color-primary'),
-        'checked-input-border-color': getCssVar('color-primary'),
-        'checked-bg-color': getCssVar('color-primary'),
-        '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
-);
-
-$checkbox-bordered-padding-left: () !default;
-$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
-);
-
-// 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
-);
-
-$radio-height: () !default;
-$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
-);
-
-$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
-);
-
-$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
-);
-
-$radio-bordered-input-height: () !default;
-$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
-);
-
-// 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,
-        'width': 100%,
-    ),
-    $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
-);
-
-$select-group: () !default;
-$select-group: map.merge(
-    (
-        '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,
-        'header-padding': 10px,
-        'footer-padding': 10px,
-        'border': 1px solid getCssVar('border-color-light'),
-    ),
-    $select-dropdown
-);
-
-$select-wrapper-padding: () !default;
-$select-wrapper-padding: map.merge(
-    (
-        'large': 8px 16px,
-        'default': 4px 12px,
-        'small': 2px 8px,
-    ),
-    $select-wrapper-padding
-);
-
-$select-near-margin-left: () !default;
-$select-near-margin-left: map.merge(
-    (
-        'large': -8px,
-        'default': -8px,
-        'small': -6px,
-    ),
-    $select-near-margin-left
-);
-
-$select-item-gap: () !default;
-$select-item-gap: map.merge(
-    (
-        'large': 6px,
-        'default': 6px,
-        'small': 4px,
-    ),
-    $select-item-gap
-);
-
-// the same height of el-tag
-$select-item-height: () !default;
-$select-item-height: map.merge(
-    (
-        'large': 24px,
-        'default': 24px,
-        'small': 20px,
-    ),
-    $select-item-height
-);
-
-// 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
-);
-
-// 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': 4px,
-        'box-shadow': getCssVar('box-shadow'),
-        'font-size': getCssVar('font-size-large'),
-        'content-font-size': getCssVar('font-size-base'),
-        'content-color': getCssVar('text-color-regular'),
-        'error-font-size': 12px,
-        'padding-primary': 12px,
-        'font-line-height': getCssVar('font-line-height-primary'),
-    ),
-    $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': 15px 19px,
-        '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': var(#{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
-);
-
-// Input
-// css3 var in packages/theme-chalk/src/input.scss
-$input: () !default;
-
-$input: map.merge(
-    (
-        'text-color': getCssVar('text-color-regular'),
-        'border': getCssVar('border'),
-        'hover-border': getCssVar('border-color-hover'),
-        'focus-border': getCssVar('color-primary'),
-        '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-color-placeholder'),
-        'placeholder-color': getCssVar('text-color-placeholder'),
-        'hover-border-color': getCssVar('border-color-hover'),
-        'clear-hover-color': getCssVar('text-color-secondary'),
-        'focus-border-color': getCssVar('color-primary'),
-        'focus-color': getCssVar('color-primary'),
-        'width': 100%,
-    ),
-    $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
-);
-
-$input-font-size: () !default;
-$input-font-size: map.merge(
-    (
-        '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
-);
-
-$input-padding-horizontal: () !default;
-$input-padding-horizontal: map.merge(
-    (
-        '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
-);
-//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
-);
-// 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', 'regular'),
-        '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
-);
-
-$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
-    ) !global;
-
-    $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-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-padding-vertical: () !default;
-$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
-);
-
-// 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
-);
-
-// 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': 16px,
-        'border-radius': getCssVar('border-radius-small'),
-    ),
-    $dialog
-);
-
-// Tour
-// css3 var in packages/theme-chalk/src/tour.scss
-$tour: () !default;
-$tour: map.merge(
-    (
-        'width': 520px,
-        'padding-primary': 12px,
-        'font-line-height': getCssVar('font-line-height-primary'),
-        'title-font-size': 16px,
-        'title-text-color': getCssVar('text-color-primary'),
-        'title-font-weight': 400,
-        'close-color': getCssVar('color-info'),
-        'font-size': 14px,
-        'color': getCssVar('text-color-primary'),
-        'bg-color': getCssVar('bg-color'),
-        'border-radius': 4px,
-    ),
-    $tour
-);
-
-// 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('bg-color'),
-        '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%),
-        'index': getCssVar('index-normal'),
-    ),
-    $table
-);
-
-$table-font-size: () !default;
-$table-font-size: map.merge(
-    (
-        '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
-);
-
-$table-cell-padding: () !default;
-$table-cell-padding: map.merge(
-    (
-        '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
-);
-
-// 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
-);
-
-// 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': 12px,
-        'padding-large': 18px 20px,
-        'title-font-size': 16px,
-        'title-text-color': getCssVar('text-color-primary'),
-        'border-radius': 4px,
-    ),
-    $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
-);
-
-// skeleton
-$skeleton: () !default;
-$skeleton: map.merge(
-    (
-        '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
-);
-
-$tag-height: () !default;
-$tag-height: map.merge(
-    (
-        'large': 32px,
-        'default': 24px,
-        'small': 20px,
-    ),
-    $tag-height
-);
-
-$tag-padding: () !default;
-$tag-padding: map.merge(
-    (
-        '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
-);
-
-// 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
-);
-
-$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
-);
-
-// Tree
-// css3 var in packages/theme-chalk/src/tree.scss
-$tree: () !default;
-$tree: map.merge(
-    (
-        'node-content-height': 26px,
-        '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
-);
-
-// drawer
-$drawer: () !default;
-$drawer: map.merge(
-    (
-        'bg-color': var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
-        '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('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
-);
-
-// Slider
-// css3 var in packages/theme-chalk/src/slider.scss
-$slider: () !default;
-$slider: map.merge(
-    (
-        '#{$namespace}-bg-color-primary': 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-height': 60px,
-        '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
-);
-
-// 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
-);
-
-$date-editor: () !default;
-$date-editor: map.merge(
-    (
-        '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
-);
-
-// 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
-);
-
-// 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
-);
-
-// 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
-);
-
-// 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
-);
-
-// 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
-);
-
-// Tabs
-// css3 var in packages/theme-chalk/src/tabs.scss
-$tabs: () !default;
-$tabs: map.merge(
-    (
-        '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
-);
-
-// Link
-// css3 var in packages/theme-chalk/src/link.scss
-$link: () !default;
-$link: map.merge(
-    (
-        'font-size': getCssVar('font-size-base'),
-        'font-weight': getCssVar('font-weight-primary'),
-        'text-color': getCssVar('text-color-regular'),
-        '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'),
-        )
-    ) !global;
-}
-
-// Calendar
-// css3 var in packages/theme-chalk/src/calendar.scss
-$calendar: () !default;
-$calendar: map.merge(
-    (
-        'border': var(#{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
-);
-
-// Form
-// css3 var in packages/theme-chalk/src/form.scss
-$form: () !default;
-$form: map.merge(
-    (
-        'label-font-size': getCssVar('font-size-base'),
-        'inline-content-width': 220px,
-    ),
-    $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
-);
-
-$avatar-size: () !default;
-$avatar-size: map.merge(
-    (
-        '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
-);
-
-// 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
-);
-
-// 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
-);
-
-// Upload
-// css3 var in packages/theme-chalk/src/upload.scss
-$upload: () !default;
-$upload: map.merge(
-    (
-        '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
-);
-
-$transition-duration: () !default;
-$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
-);
-
-// header
-$header: () !default;
-$header: map.merge(
-    (
-        'padding': 0 20px,
-        'height': 60px,
-    ),
-    $header
-);
-// main
-$main: () !default;
-$main: map.merge(
-    (
-        'padding': 20px,
-    ),
-    $main
-);
-// footer
-$footer: () !default;
-$footer: map.merge(
-    (
-        'padding': 0 20px,
-        'height': 60px,
-    ),
-    $footer
-);
-
-// Break-point
-$small: 768px !default;
-$md: 992px !default;
-$large: 1200px !default;
-$xl: 1920px !default;
-
-$breakpoints: (
-    'xs': '(max-width: #{$small - 1})',
-    'small': '(min-width: #{$small})',
-    'md': '(min-width: #{$md})',
-    'large': '(min-width: #{$large})',
-    'xl': '(min-width: #{$xl})',
-) !default;
-
-$breakpoints-spec: (
-    'xs-only': '(max-width: #{$small - 1})',
-    'small-and-up': '(min-width: #{$small})',
-    'small-only': '(min-width: #{$small}) and (max-width: #{$md - 1})',
-    'small-and-down': '(max-width: #{$md - 1})',
-    'md-and-up': '(min-width: #{$md})',
-    'md-only': '(min-width: #{$md}) and (max-width: #{$large - 1})',
-    'md-and-down': '(max-width: #{$large - 1})',
-    'large-and-up': '(min-width: #{$large})',
-    'large-only': '(min-width: #{$large}) and (max-width: #{$xl - 1})',
-    'large-and-down': '(max-width: #{$xl - 1})',
-    'xl-only': '(min-width: #{$xl})',
-) !default;