@berqnet/theme 0.0.0-stage → 2.4.291

package/dist/runtime/public/scss/element-plus/common/var.scss

@@ -0,0 +1,1676 @@
+/* Element Chalk Variables */
+@use 'sass:math';
+@use 'sass:map';
+
+@use '../mixins/function.scss' as *;
+@use '../../_colors' as *;
+
+// Special comment for theme configurator
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
+
+/**
+Bununla selectorun içerisine variable ekleyebiliyorsun
+.selector{
+    // --el-button-text-color: var(--el-color-primary); -> bu eklenir
+    @include css-var-from-global(('button-text-color'), ('color-primary'));
+
+    // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
+    color: getCssVar('colors-neutral-light-2');
+
+    // bununla da property alınabililyor
+    font-size: map.get($select, 'font-size');
+}
+**/
+
+// types
+$types: primary, secondary, neutral, success, warning, danger, error, info;
+$semantic: primary, success, info, warning, error;
+$sizes: large, medium, small, mini;
+$variants: 1, 2, 4, 3, 5, 6, 7, 8, 9;
+// Color
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #5737d6,
+    ),
+    'secondary': (
+      'base': #a8a6b1,
+    ),
+    'neutral': (
+      'base': #a8a6b1,
+    ),
+    'success': (
+      'base': #4cb770,
+    ),
+    'warning': (
+      'base': #e8c552,
+    ),
+    'danger': (
+      'base': #e3585b,
+    ),
+    'error': (
+      'base': #e3585b,
+    ),
+    'info': (
+      'base': #3fa1fe,
+    ),
+  ),
+  $colors
+);
+
+// $colors: map.deep-merge($theme, $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;
+$color-secondary: map.get($colors, 'seconday', 'base') !default;
+$color-neutral: map.get($colors, 'neutral', '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}': #{map.get($theme, $type, #{$number})},
+        // '#{$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(
+  (
+    //@TODO: bu primary ve regular ikisi de aynı anda gereksiz gibi, en sonda bunlardan birini tercih edip refactor edeceğim
+    'primary': getCssVar('color', 'neutral', 'light-9'),
+    'regular': getCssVar('color', 'neutral', 'light-9'),
+    'secondary': getCssVar('color', 'neutral', 'light-7'),
+    // 'secondary': #909399,
+    'placeholder': getCssVar('color', 'neutral', 'light-4'),
+    'disabled': getCssVar('color', 'neutral', 'light-4'),
+    // 'disabled': #c0c4cc,
+  ),
+  $text-color
+);
+
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    '': getCssVar('color', 'neutral', 'light-4'),
+    'light': getCssVar('color', 'neutral', 'light-2'),
+    'lighter': #ebeef5,
+    'extra-light': #f2f6fc,
+    'dark': #d4d7de,
+    'darker': #cdd0d6,
+  ),
+  $border-color
+);
+
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    '': #f0f2f5,
+    'light': getCssVar('color-neutral-light-1'),
+    '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(
+  (
+    'tiny': 2px,
+    'small': 4px,
+    'medium': 8px,
+    'large': 16px,
+    '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 1px 2px 0px #1a0b5e1a,
+    ),
+    '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(
+  (
+    'huge': 18px,
+    'large': 16px,
+    'medium': 14px,
+    'base': 14px,
+    'small': 12px,
+    'mini': 10px,
+    'tiny': 8px,
+  ),
+  $font-size
+);
+
+$line-height: () !default;
+$line-height: map.merge(
+  (
+    'huge': 24px,
+    'large': 22px,
+    'medium': 20px,
+    'base': 20px,
+    'small': 16px,
+    'mini': 14px,
+    'tiny': 10px,
+  ),
+  $line-height
+);
+
+// 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('color', 'neutral', 'light-1'),
+    'text-color': getCssVar('color', 'neutral', 'light-4'),
+    'border-color': getCssVar('color', 'neutral', 'light-5'),
+  ),
+  $disabled
+);
+
+$common-component-size: () !default;
+$common-component-size: map.merge(
+  (
+    'default': 36px,
+    'large': 40px,
+    'medium': 36px,
+    'small': 32px,
+    'mini': 28px,
+  ),
+  $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': map.get($colors, 'success', 'base'),
+  ),
+  $overlay-color
+);
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(255, 255, 255, 0.8),
+    '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': 400,
+    'text-color': getCssVar('color-neutral-light-7'),
+    'input-height': 16px,
+    'input-width': 16px,
+    'border-radius': 3px,
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'input-border': 1.5px solid getCssVar('color-neutral-light-4'),
+    'disabled-border-color': getCssVar('color-neutral-light-4'),
+    'disabled-input-fill': getCssVar('fill-color', 'light'),
+    'disabled-icon-color': getCssVar('color-neutral-light-4'),
+    'disabled-checked-input-fill': getCssVar('color-white'),
+    'disabled-checked-input-border-color': getCssVar('border-color'),
+    'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
+    'checked-text-color': getCssVar('color-neutral-light-7'),
+    'checked-input-border-color': getCssVar('color-success-light-5'),
+    'checked-bg-color': getCssVar('color-white'),
+    'checked-icon-color': getCssVar('color-success-light-5'),
+    'input-border-color-hover': getCssVar('color-neutral-light-4'),
+  ),
+  $checkbox
+);
+
+$checkbox-button: () !default;
+$checkbox-button: map.merge(
+  (
+    'border-color': getCssVar('color-primary'),
+    'bg-color': getCssVar('color-white'),
+    'text-color': getCssVar('color-primary'),
+    'checked-bg-color': getCssVar('color-primary'),
+    'checked-text-color': getCssVar('color-white'),
+    'checked-border-color': getCssVar('color-primary'),
+    'disabled-border-color': getCssVar('color-primary-light-3'),
+    'disabled-bg-color': getCssVar('color-white'),
+    'disabled-text-color': getCssVar('color-primary-light-3'),
+    'checked-disabled-border-color': getCssVar('color-primary-light-3'),
+    'checked-disabled-bg-color': getCssVar('color-primary-light-1'),
+    'checked-disabled-text-color': getCssVar('color-primary-light-3'),
+  ),
+  $checkbox-button
+);
+
+$checkbox-bordered-padding-left: () !default;
+$checkbox-bordered-padding-left: map.merge(
+  (
+    'default': 12px,
+    'large': 12px,
+    'medium': 10px,
+    'small': 8px,
+    'mini': 8px,
+  ),
+  $checkbox-bordered-padding-left
+);
+
+$checkbox-bordered-padding-right: () !default;
+$checkbox-bordered-padding-right: map.merge(
+  (
+    'default': 20px,
+    'large': 20px,
+    'medium': 16px,
+    'small': 12px,
+    'mini': 12px,
+  ),
+  $checkbox-bordered-padding-right
+);
+
+// Radio
+/// fontSize||Font|1
+$radio: () !default;
+$radio: map.merge(
+  (
+    'font-size': getCssVar('font-size-base'),
+    'text-color': getCssVar('color-neutral-light-7'),
+    'font-weight': 400,
+    'input-height': 14px,
+    'input-width': 14px,
+    'input-border-radius': getCssVar('border-radius-circle'),
+    'input-bg-color': getCssVar('fill-color', 'blank'),
+    'input-border': 1.5px solid getCssVar('color-neutral-light-4'),
+    'input-border-color': getCssVar('color-neutral-light-4'),
+    'input-border-color-hover': getCssVar('color-neutral-light-4'),
+  ),
+  $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('color-primary-light-1'),
+  ),
+  $radio-button
+);
+
+$radio-disabled: () !default;
+$radio-disabled: map.merge(
+  (
+    'input-border-color': getCssVar('color-neutral-light-4'),
+    'input-fill': getCssVar('color-neutral-light-4'),
+    'icon-color': getCssVar('color-neutral-light-4'),
+    'checked-input-border-color': getCssVar('color-neutral-light-4'),
+    'checked-input-fill': getCssVar('color-white'),
+    'checked-icon-color': getCssVar('color-neutral-light-4'),
+  ),
+  $radio-disabled
+);
+
+$radio-checked: () !default;
+$radio-checked: map.merge(
+  (
+    'text-color': getCssVar('color-neutral-light-7'),
+    'input-border-color': getCssVar('color-success'),
+    'icon-color': getCssVar('color-success'),
+  ),
+  $radio-checked
+);
+
+$radio-bordered-input-height: () !default;
+$radio-bordered-input-height: map.merge(
+  (
+    'default': 16px,
+    'large': 16px,
+    'medium': 14px,
+    'small': 12px,
+    'mini': 12px,
+  ),
+  $radio-bordered-input-height
+);
+
+$radio-bordered-input-width: () !default;
+$radio-bordered-input-width: map.merge($radio-bordered-input-height, $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-small'),
+    'close-hover-color': getCssVar('text-color-secondary'),
+    'input-color': getCssVar('color-neautral-light-2'),
+    'multiple-input-color': getCssVar('text-color-regular'),
+    'input-focus-border-color': getCssVar('color-primary'),
+    'input-font-size': 14px,
+    'width': 100%,
+    'min-width': 72px,
+  ),
+  $select
+);
+
+$select-option: () !default;
+$select-option: map.merge(
+  (
+    'text-color': getCssVar('color', 'neutral', 'light-9'),
+    'disabled-color': getCssVar('disabled-text-color'),
+    'height': 28px,
+    'hover-background': getCssVar('color', 'neutral', 'light-1'),
+    'selected-text-color': getCssVar('color', 'neutral', 'light-9'),
+    'selected-bg-color': getCssVar('color', 'neutral', 'light-2'),
+    'padding': 8px,
+  ),
+  $select-option
+);
+
+$select-group: () !default;
+$select-group: map.merge(
+  (
+    'text-color': getCssVar('color-neutral-light-4'),
+    'height': 32px,
+    'font-size': 10px,
+  ),
+  $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': 8px,
+    '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(
+  (
+    'default': 8px,
+    'large': 10px,
+    'medium': 8px,
+    'small': 6px,
+    'mini': 5px,
+  ),
+  $select-wrapper-padding
+);
+
+$select-near-margin-left: () !default;
+$select-near-margin-left: map.merge(
+  (
+    'default': 0 -3px,
+    'large': 0,
+    'medium': 0 -3px,
+    'small': 0 -6px,
+    'mini': 0 -7px,
+  ),
+  $select-near-margin-left
+);
+
+$select-item-gap: () !default;
+$select-item-gap: map.merge(
+  (
+    'default': 8px,
+    'large': 8px,
+    'medium': 8px,
+    'small': 4px,
+    'mini': 4px,
+  ),
+  $select-item-gap
+);
+
+// the same height of el-tag
+$select-item-height: () !default;
+$select-item-height: map.merge(
+  (
+    'large': 20px,
+    'default': 20px,
+    'medium': 20px,
+    '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': getCssVar('border-radius-small'),
+    'border-color': getCssVar('color', 'info-light-3'),
+    'title-font-size': 12px,
+    'title-with-description-font-size': 12px,
+    'description-font-size': 10px,
+    'close-font-size': 12px,
+    'close-customed-font-size': 12px,
+    'icon-size': 12px,
+    'icon-large-size': 32px,
+  ),
+  $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': getCssVar('border-radius-medium'),
+    'box-shadow': getCssVar('box-shadow'),
+    'title-font-size': getCssVar('font-size-large'),
+    'content-font-size': getCssVar('font-size-small'),
+    'content-color': getCssVar('color', 'neutral-light-7'),
+    'error-font-size': 12px,
+    'padding-primary': 24px,
+    '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', 'primary', 'light-1'),
+    'border-color': getCssVar('color', 'primary-light-3'),
+    'padding': 8px 11px 8px 16px,
+    'font-size': 12px,
+    'close-size': 12px,
+    'close-icon-color': getCssVar('color', 'primary-light-5'),
+    'close-hover-color': getCssVar('color', 'primary-light-4'),
+    'text-color': getCssVar('color', 'primary-light-5'),
+  ),
+  $message
+);
+
+// Notification
+// css3 var in packages/theme-chalk/src/notification.scss
+$notification: () !default;
+$notification: map.merge(
+  (
+    'width': 330px,
+    'padding': 12px 26px 12px 16px,
+    'radius': 4px,
+    'shadow': getCssVar('box-shadow-light'),
+    'border-color': getCssVar('color-neutral-light-3'),
+    '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-small'),
+    'content-font-line-height': getCssVar('line-height-medium'),
+    'content-color': getCssVar('color-neutral-light-7'),
+    'title-font-size': 14px,
+    'title-color': getCssVar('color-neutral-light-9'),
+    '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-small'),
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'icon-color': getCssVar('color', 'neutral', 'light-9'),
+    'placeholder-color': getCssVar('text-color-placeholder'),
+    'hover-border-color': getCssVar('color', 'primary', 'light-5'),
+    'clear-hover-color': getCssVar('color', 'primary', 'light-5'),
+    'focus-border-color': getCssVar('color', 'primary', 'light-5'),
+    'width': 100%,
+    'box-shadow': 0 3px 0 0 rgba(213, 205, 245, 0.4),
+  ),
+  $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,
+    'medium': 14px,
+    'small': 12px,
+    'mini': 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,
+    'medium': 150px,
+    'small': 120px,
+    'mini': 120px,
+  ),
+  $input-number-width
+);
+
+$input-padding-horizontal: () !default;
+$input-padding-horizontal: map.merge(
+  (
+    'default': 16px,
+    'large': 16px,
+    'medium': 16px,
+    'small': 16px,
+    'mini': 16px,
+  ),
+  $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-small'),
+    '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', 'tiny'),
+    'title-color': getCssVar('text-color', 'regular'),
+    'content-font-weight': 400,
+    'content-font-size': getCssVar('font-size', 'huge'),
+    '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('color', 'primary', 'light-5'),
+    'bg-color': getCssVar('color', 'primary', 'light-5'),
+    'text-color': getCssVar('color', 'white'),
+    'disabled-text-color': getCssVar('color', 'white'),
+    'disabled-bg-color': getCssVar('color-primary', 'light-1'),
+    'disabled-border-color': getCssVar('color-primary', 'light-1'),
+    'divide-border-color': getCssVar('color-primary', 'light-4'),
+    'hover-text-color': getCssVar('color', 'white'),
+    'hover-bg-color': getCssVar('color-primary', 'light-4'),
+    'hover-border-color': getCssVar('color-primary-light-4'),
+    'active-text-color': getCssVar('button-hover-text-color'),
+    'active-border-color': getCssVar('color-primary', 'light-6'),
+    'active-bg-color': getCssVar('color-primary', 'light-6'),
+    'outline-color': getCssVar('color-primary', 'light-6'),
+    'hover-link-text-color': getCssVar('color-primary'),
+    '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': map.get($font-size, 'medium'),
+    'default': map.get($font-size, 'medium'),
+    'medium': map.get($font-size, 'medium'),
+    'small': map.get($font-size, 'small'),
+    'mini': map.get($font-size, 'small'),
+  ),
+  $button-font-size
+);
+
+$button-border-radius: () !default;
+$button-border-radius: map.merge(
+  (
+    // 'default': getCssVar('border-radius-small'),
+    // 'small': calc(#{getCssVar('border-radius-small')} - 1px),
+    'default': getCssVar('border-radius-small'),
+    'large': getCssVar('border-radius-small'),
+    'medium': 4px,
+    'small': 4px,
+    'mini': 4px
+  ),
+  $button-border-radius
+);
+
+$button-padding-vertical: () !default;
+$button-padding-vertical: map.merge(
+  (
+    'default': 13px,
+    'large': 13px,
+    'medium': 9px,
+    'small': 6px,
+    'mini': 6px,
+  ),
+  $button-padding-vertical
+);
+
+$button-padding-horizontal: () !default;
+$button-padding-horizontal: map.merge(
+  (
+    'default': 16px,
+    'large': 16px,
+    'medium': 16px,
+    'small': 16px,
+    'mini': 12px,
+  ),
+  $button-padding-horizontal
+);
+
+// Switch
+// css3 var in packages/theme-chalk/src/switch.scss
+$switch: () !default;
+$switch: map.merge(
+  (
+    'on-color': getCssVar('color-success'),
+    'on-box-shadow': 0 0 0 4px getCssVar('color-success-light-2'),
+    'off-box-shadow': 0 0 0 4px getCssVar('color-neutral-light-3'),
+    'off-color': getCssVar('color-neutral-light-7'),
+    'on-disabled-color': getCssVar('color-neutral-light-3'),
+    'off-disabled-color': getCssVar('color-success-light-3'),
+  ),
+  $switch
+);
+
+// Dialog
+// css3 var in packages/theme-chalk/src/dialog.scss
+$dialog: () !default;
+$dialog: map.merge(
+  (
+    'width': 630px,
+    'margin-top': 15vh,
+    'bg-color': getCssVar('bg-color'),
+    'box-shadow': getCssVar('box-shadow'),
+    'title-font-size': 18px,
+    'title-line-height': 22px,
+    'content-font-size': 12px,
+    'content-line-height': 22px,
+    'padding-primary': 24px,
+    'border-radius': 8px,
+    'padding-bottom': 16px,
+  ),
+  $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': getCssVar('border-radius-medium'),
+  ),
+  $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('color-neutral-light-2'),
+    'border': 1px solid getCssVar('table-border-color'),
+    'text-color': getCssVar('color-neutral-light-6'),
+    'header-text-color': getCssVar('color-neutral-light-9'),
+    'row-hover-bg-color': getCssVar('color-white'),
+    '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'),
+    'font-weight-body': 400,
+    'font-weight-head': 400,
+    'font-size': 12px,
+  ),
+  $table
+);
+
+$table-font-size: () !default;
+$table-font-size: map.merge(
+  (
+    'large': getCssVar('font-size', 'base'),
+    'default': 14px,
+    'medium': 13px,
+    'small': 12px,
+    'mini': 12px,
+  ),
+  $table-font-size
+);
+
+$table-padding: () !default;
+$table-padding: map.merge(
+  (
+    'large': 12px 0,
+    'default': 8px 0,
+    'small': 4px 0,
+    'mini': 2px 0,
+  ),
+  $table-padding
+);
+
+$table-cell-padding: () !default;
+$table-cell-padding: map.merge(
+  (
+    'large': 0 16px,
+    'default': 0 12px,
+    'small': 0 8px,
+    'mini': 0 4px,
+  ),
+  $table-cell-padding
+);
+
+// Pagination
+// css3 var in packages/theme-chalk/src/pagination.scss
+$pagination: () !default;
+$pagination: map.merge(
+  (
+    'font-size': 12px,
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'text-color': getCssVar('color-neutral-light-6'),
+    'border-radius': 2px,
+    'button-color': getCssVar('color-neutral-light-6'),
+    'button-width': 24px,
+    'button-height': 24px,
+    'select-height': 20px,
+    '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': 28px,
+    'button-width-large': 40px,
+    'button-height-large': 28px,
+    'item-gap': 16px,
+    'width': 100%,
+  ),
+  $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-small'),
+    'border-color': getCssVar('border-color-lighter'),
+    'padding': 12px,
+    'padding-large': 18px 20px,
+    'title-font-size': 14px,
+    'title-text-color': getCssVar('text-color-regular'),
+    'border-radius': 6px,
+    'text-color': getCssVar('text-color-secondary'),
+  ),
+  $popover
+);
+
+// popper
+// Pay attention to the difference between 'popper' and 'popover'
+$popper: () !default;
+$popper: map.merge(
+  (
+    'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
+    'border-color': getCssVar('color-neutral-light-2'),
+  ),
+  $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': 10px,
+    'border-radius': 2px,
+    'border-radius-rounded': 9999px,
+  ),
+  $tag
+);
+
+$tag-height: () !default;
+$tag-height: map.merge(
+  (
+    'default': 16px,
+    'large': 28px,
+    'medium': 24px,
+    'small': 20px,
+    'mini': 16px,
+  ),
+  $tag-height
+);
+
+$tag-padding: () !default;
+$tag-padding: map.merge(
+  (
+    'default': 8px,
+    'large': 8px,
+    'medium': 8px,
+    'small': 8px,
+    'mini': 8px,
+  ),
+  $tag-padding
+);
+
+$tag-icon-size: () !default;
+$tag-icon-size: map.merge(
+  (
+    'default': 10px,
+    'large': 10px,
+    'medium': 10px,
+    'small': 10px,
+    'mini': 10px,
+  ),
+  $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(
+  (
+    'default': getCssVar('font-size', 'large'),
+    'large': getCssVar('font-size', 'large'),
+    'medium': getCssVar('font-size', 'medium'),
+    'small': getCssVar('font-size', 'small'),
+    'mini': getCssVar('font-size', 'mini'),
+  ),
+  $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-neutral-light-1'),
+    'menuItem-hover-color': getCssVar('color-neutral-light-9'),
+    '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': 8px,
+    'padding': 6px,
+    'size': 16px,
+  ),
+  $badge
+);
+
+// Card
+$card: () !default;
+$card: map.merge(
+  (
+    'border-color': getCssVar('color-neutral-light-3'),
+    'border-radius': 4px,
+    'padding': 16px,
+    '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-white'),
+    'active-bg-color': getCssVar('color-primary-light-5'),
+    'text-color': getCssVar('color-neutral-light-9'),
+    'hover-text-color': getCssVar('color-primary'),
+    'bg-color': getCssVar('color-white'),
+    'hover-bg-color': getCssVar('color', 'neutral', 'light-1'),
+    'pressed-bg-color': getCssVar('color', 'neutral', 'light-2'),
+    'item-height': 36px,
+    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 0px),
+    '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': 8px,
+    'level-padding': 20px,
+    'icon-width': 16px,
+    'icon-color': getCssVar('color-neutral-light-5'),
+    'border-radius': 4px,
+    'items-gap': 6px,
+  ),
+  $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('color-neutral-light-4'),
+    'icon-color': getCssVar('color-neutral-light-4'),
+    'border-color': getCssVar('disabled-border-color'),
+    'inner-border-color': getCssVar('border-color-light'),
+    'inrange-bg-color': getCssVar('color-primary-light-1'),
+    'inrange-hover-bg-color': getCssVar('color-primary-light-1'),
+    'active-color': getCssVar('color-primary'),
+    'hover-text-color': getCssVar('color-primary'),
+  ),
+  $datepicker
+);
+
+$date-editor: () !default;
+$date-editor: map.merge(
+  (
+    'width': 100%,
+    'monthrange-width': 100%,
+    'daterange-width': 100%,
+    'datetimerange-width': 100%,
+  ),
+  $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-small'),
+    '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': 28px,
+  ),
+  $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': 400,
+    'text-color': getCssVar('color-primary-light-5'),
+    'hover-text-color': getCssVar('color-primary-light-4'),
+    'disabled-text-color': getCssVar('color-primary-light-2'),
+    'active-text-color': getCssVar('color-primary-light-6'),
+  ),
+  $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': 12px,
+    'label-font-weight': 500,
+    'inline-content-width': 220px,
+  ),
+  $form
+);
+
+// Avatar
+// css3 var in packages/theme-chalk/src/avatar.scss
+$avatar: () !default;
+$avatar: map.merge(
+  (
+    'text-color': getCssVar('color-neutral-light-4'),
+    'bg-color': getCssVar('color', 'white'),
+    'text-size': 16px,
+    'line-height': 18px,
+    'icon-size': 16px,
+    'border-color': getCssVar('color-neutral-light-3'),
+    'border-color-hover': getCssVar('color-neutral-light-4'),
+    'border-radius': getCssVar('border-radius-small'),
+  ),
+  $avatar
+);
+
+$avatar-size: () !default;
+$avatar-size: map.merge(
+  (
+    'default': 32px,
+    'large': 56px,
+    'medium': 44px,
+    'small': 32px,
+    'mini': 16px,
+  ),
+  $avatar-size
+);
+
+$avatar-font-size: () !default;
+$avatar-font-size: map.merge(
+  (
+    'default': 16px,
+    'large': 16px,
+    'medium': 16px,
+    'small': 14px,
+    'mini': 8px,
+  ),
+  $avatar-font-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-color': getCssVar('color-neutral-light-2'),
+    '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;