@qxs-bns/components 0.0.19 → 0.0.20

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

@@ -1,1511 +0,0 @@
-/* Element Chalk Variables */
-@use "sass:math";
-@use "sass:map";
-@use "sass:color";
-@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": #fff,
-    "black": #000,
-    "primary": (
-      "base": #3d61e3,
-    ),
-    "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
-) {
-  $base-color: map.get($colors, $type, "base");
-  $percentage: math.percentage(math.div($number, 10));
-  $colors: map.deep-merge(
-    (
-      $type: (
-        "#{$mode}-#{$number}": color.mix($mix-color, $base-color, $percentage),
-      ),
-    ),
-    $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": #fff,
-  ),
-  $fill-color
-);
-
-// Background
-$bg-color: () !default;
-$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-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(
-  (
-    "": (
-      0 12px 32px 4px rgb(0 0 0 / 4%),
-      0 8px 20px rgb(0 0 0 / 8%),
-    ),
-    "light": (
-      0 0 12px rgb(0 0 0 / 12%),
-    ),
-    "lighter": (
-      0 0 6px rgb(0 0 0 / 12%),
-    ),
-    "dark": (
-      0 16px 48px 16px rgb(0 0 0 / 8%),
-      0 12px 32px rgb(0 0 0 / 12%),
-      0 8px 16px -8px rgb(0 0 0 / 16%),
-    ),
-  ),
-  $box-shadow
-);
-
-// Typography
-$font-family: () !default;
-$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
-);
-
-// 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(
-  (
-    "": rgb(0 0 0 / 80%),
-    "light": rgb(0 0 0 / 70%),
-    "lighter": rgb(0 0 0 / 50%),
-  ),
-  $overlay-color
-);
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    "": rgb(255 255 255 / 90%),
-    "extra-light": rgb(255 255 255 / 30%),
-  ),
-  $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-color": getCssVar("disabled-text-color"),
-    "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": 34px,
-    "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": 14px,
-    "title-with-description-font-size": 16px,
-    "description-font-size": 14px,
-    "close-font-size": 16px,
-    "close-customed-font-size": 14px,
-    "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": 11px 15px,
-    "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"),
-    "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
-);
-
-// Anchor
-// css3 var in packages/theme-chalk/src/anchor.scss
-$anchor: () !default;
-$anchor: map.merge(
-  (
-    "bg-color": getCssVar("bg-color"),
-    "padding-indent": 14px,
-    "line-height": 22px,
-    "font-size": 12px,
-    "color": getCssVar("text-color-secondary"),
-    "active-color": getCssVar("color-primary"),
-    "marker-bg-color": getCssVar("color-primary"),
-  ),
-  $anchor
-);
-
-// Segmented
-// css3 var in packages/theme-chalk/src/segmented.scss
-$segmented: () !default;
-$segmented: map.merge(
-  (
-    "color": getCssVar("text-color", "regular"),
-    "bg-color": getCssVar("fill-color", "light"),
-    "padding": 2px,
-    "item-selected-color": getCssVar("color-white"),
-    "item-selected-bg-color": getCssVar("color-primary"),
-    "item-selected-disabled-bg-color": getCssVar("color-primary", "light-5"),
-    "item-hover-color": getCssVar("text-color", "primary"),
-    "item-hover-bg-color": getCssVar("fill-color", "dark"),
-    "item-active-bg-color": getCssVar("fill-color", "darker"),
-    "item-disabled-color": getCssVar("text-color", "placeholder"),
-  ),
-  $segmented
-);
-
-// Mention
-// css3 var in packages/theme-chalk/src/mention.scss
-$mention: () !default;
-$mention: map.merge(
-  (
-    "font-size": getCssVar("font-size-base"),
-    "bg-color": getCssVar("bg-color", "overlay"),
-    "shadow": getCssVar("box-shadow-light"),
-    "border": 1px solid getCssVar("border-color-light"),
-    "option-color": getCssVar("text-color-regular"),
-    "option-height": 34px,
-    "option-min-width": 100px,
-    "option-hover-background": getCssVar("fill-color", "light"),
-    "option-selected-color": getCssVar("color-primary"),
-    "option-disabled-color": getCssVar("text-color-placeholder"),
-    "option-loading-color": getCssVar("text-color-secondary"),
-    "option-loading-padding": 10px 0,
-    "max-height": 174px,
-    "padding": 6px 0,
-    "header-padding": 10px,
-    "footer-padding": 10px,
-  ),
-  $mention
-);
-
-// 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,
-    "button-width-large": 40px,
-    "button-height-large": 40px,
-    "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(
-  (
-    "main-bg-color": getCssVar("color-primary"),
-    "runway-bg-color": getCssVar("border-color-light"),
-    "stop-bg-color": getCssVar("color-white"),
-    "disabled-color": getCssVar("text-color-placeholder"),
-    "border-radius": 3px,
-    "height": 6px,
-    "button-size": 20px,
-    "button-wrapper-size": 36px,
-    "button-wrapper-offset": -15px,
-  ),
-  $slider
-);
-
-// Menu
-// css3 var in packages/theme-chalk/src/menu.scss
-$menu: () !default;
-$menu: map.merge(
-  (
-    "active-color": getCssVar("color-primary"),
-    "text-color": getCssVar("text-color-primary"),
-    "hover-text-color": getCssVar("color-primary"),
-    "bg-color": getCssVar("fill-color", "blank"),
-    "hover-bg-color": getCssVar("color-primary-light-9"),
-    "item-height": 56px,
-    "sub-item-height": calc(#{getCssVar("menu-item-height")} - 6px),
-    "horizontal-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,
-    "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": rgb(31 45 61 / 11%),
-    "arrow-hover-background": rgb(31 45 61 / 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
-$sm: 768px !default;
-$md: 992px !default;
-$lg: 1200px !default;
-$xl: 1920px !default;
-$breakpoints: (
-  "xs": "(max-width: #{$sm - 1})",
-  "sm": "(min-width: #{$sm})",
-  "md": "(min-width: #{$md})",
-  "lg": "(min-width: #{$lg})",
-  "xl": "(min-width: #{$xl})",
-) !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;