feat(var): var sass map for components (element-plus#2778)

* feat(var): var sass map for components

* feat(var): migrate var sass map for all components

packages/theme-chalk/src/alert.scss

@@ -1,18 +1,11 @@
 @use "sass:map";
 
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 
 :root {
-  --el-alert-padding: 8px 16px;
-  --el-alert-border-radius-base: var(--el-border-radius-base);
-  --el-alert-title-font-size: 13px;
-  --el-alert-description-font-size: 12px;
-  --el-alert-close-font-size: 12px;
-  --el-alert-close-customed-font-size: 13px;
-
-  --el-alert-icon-size: 16px;
-  --el-alert-icon-large-size: 28px;
+  @include set-component-css-var('alert', $--alert);
 
   @each $type in (success, info, warning, error) {
     --el-alert-#{$type}-color: #{map.get($--colors, $type, 'lighter')};

packages/theme-chalk/src/autocomplete.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'mixins/utils';
 @import 'common/var';
@@ -47,16 +49,16 @@
     text-overflow: ellipsis;
 
     &:hover {
-      background-color: $--select-option-hover-background;
+      background-color: map.get($--select-option, 'hover-background');
     }
 
     &.highlighted {
-      background-color: $--select-option-hover-background;
+      background-color: map.get($--select-option, 'hover-background');
     }
 
     &.divider {
       margin-top: 6px;
-      border-top: 1px solid $--color-black;
+      border-top: 1px solid var(--el-color-black);
     }
 
     &.divider:last-child {
@@ -74,7 +76,7 @@
       @include utils-vertical-center;
 
       &:hover {
-        background-color: $--color-white;
+        background-color: var(--el-color-white);
       }
     }
 

packages/theme-chalk/src/avatar.scss

@@ -1,15 +1,9 @@
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 
 :root {
-  --el-avatar-font-color: #fff;
-  --el-avatar-background-color: #c0c4cc;
-  --el-avatar-text-font-size: 14px;
-  --el-avatar-icon-font-size: 18px;
-  --el-avatar-border-radius: var(--el-border-radius-base);
-  --el-avatar-large-size: 40px;
-  --el-avatar-medium-size: 36px;
-  --el-avatar-small-size: 28px;
+  @include set-component-css-var('avatar', $--avatar);
 }
 
 @include b(avatar) {

packages/theme-chalk/src/backtop.scss

@@ -1,10 +1,9 @@
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 
 :root {
-  --el-backtop-background-color: var(--el-color-white);
-  --el-backtop-font-color: var(--el-color-primary);
-  --el-backtop-hover-background-color: var(--el-border-color-extra-light);
+  @include set-component-css-var('backtop', $--backtop);
 }
 
 @include b(backtop) {

packages/theme-chalk/src/calendar.scss

@@ -1,16 +1,11 @@
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 @import 'button';
 @import 'button-group';
 
 :root {
-  --el-calendar-border: var(
-    --el-table-border,
-    1px solid var(--el-border-color-lighter)
-  );
-  --el-calendar-header-border-bottom: var(--el-calendar-border);
-  --el-calendar-selected-background-color: #f2f8fe;
-  --el-calendar-cell-width: 85px;
+  @include set-component-css-var('calendar', $--calendar);
 }
 
 @include b(calendar) {

packages/theme-chalk/src/carousel.scss

@@ -1,18 +1,11 @@
 @use "sass:math";
 
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 
 :root {
-  --el-carousel-arrow-font-size: 12px;
-  --el-carousel-arrow-size: 36px;
-  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
-  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
-  --el-carousel-indicator-width: 30px;
-  --el-carousel-indicator-height: 2px;
-  --el-carousel-indicator-padding-horizontal: 4px;
-  --el-carousel-indicator-padding-vertical: 12px;
-  --el-carousel-indicator-out-color: var(--el-border-color-hover);
+  @include set-component-css-var('carousel', $--carousel);
 }
 
 @include b(carousel) {

packages/theme-chalk/src/cascader.scss

@@ -1,27 +1,18 @@
 @use "sass:map";
 
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 @import './input';
 @import './popper';
 @import './tag';
 
+@import './cascader-panel';
+
 :root {
-  --el-cascader-menu-font-color: var(--el-text-color-regular);
-  --el-cascader-menu-selected-font-color: var(--el-color-primary);
-  --el-cascader-menu-fill: var(--el-fill-base);
-  --el-cascader-menu-font-size: var(--el-font-size-base);
-  --el-cascader-menu-radius: var(--el-border-radius-base);
-  --el-cascader-menu-border: solid 1px var(--el-border-color-light);
-  --el-cascader-menu-shadow: var(--el-box-shadow-light);
-  --el-cascader-node-background-hover: var(--el-background-color-base);
-  --el-cascader-node-color-disabled: var(--el-text-color-placeholder);
-  --el-cascader-color-empty: var(--el-text-color-placeholder);
-  --el-cascader-tag-background: #f0f2f5;
+  @include set-component-css-var('cascader', $--cascader);
 }
 
-@import './cascader-panel';
-
 @include b(cascader) {
   display: inline-block;
   position: relative;
@@ -32,7 +23,10 @@
   &:not(.is-disabled):hover {
     .#{$namespace}-input__inner {
       cursor: pointer;
-      border-color: $--input-hover-border;
+      border-color: var(
+        --el-input-hover-border,
+        map.get($--input, 'hover-border')
+      );
     }
   }
 
@@ -43,7 +37,10 @@
       text-overflow: ellipsis;
 
       &:focus {
-        border-color: $--input-focus-border;
+        border-color: var(
+          --el-input-focus-border,
+          map.get($--input, 'focus-border')
+        );
       }
     }
 
@@ -57,12 +54,18 @@
     }
 
     .#{$namespace}-icon-circle-close:hover {
-      color: $--input-clear-hover-color;
+      color: var(
+        --el-input-clear-hover-color,
+        map.get($--input, 'clear-hover-color')
+      );
     }
 
     @include when(focus) {
       .#{$namespace}-input__inner {
-        border-color: $--input-focus-border;
+        border-color: var(
+          --el-input-focus-border,
+          map.get($--input, 'focus-border')
+        );
       }
     }
   }

packages/theme-chalk/src/checkbox.scss

@@ -2,6 +2,7 @@
 
 @import 'common/var';
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'mixins/_button';
 @import 'mixins/utils';
 
@@ -53,36 +54,7 @@ $--checkbox-line-height: map.merge(
 );
 
 :root {
-  --el-checkbox-font-size: 14px;
-  --el-checkbox-font-weight: var(--el-font-weight-primary);
-  --el-checkbox-font-color: var(--el-text-color-regular);
-  --el-checkbox-input-height: 14px;
-  --el-checkbox-input-width: 14px;
-  --el-checkbox-border-radius: var(--el-border-radius-small);
-  --el-checkbox-background-color: var(--el-color-white);
-  --el-checkbox-input-border: var(--el-border-base);
-
-  --el-checkbox-disabled-border-color: var(--el-border-color-base);
-  --el-checkbox-disabled-input-fill: #edf2fc;
-  --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
-
-  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
-  --el-checkbox-disabled-checked-input-border-color: var(
-    --el-border-color-base
-  );
-  --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
-
-  --el-checkbox-checked-font-color: var(--el-color-primary);
-  --el-checkbox-checked-input-border-color: var(--el-color-primary);
-  --el-checkbox-checked-background-color: var(--el-color-primary);
-  --el-checkbox-checked-icon-color: var(--el-fill-base);
-
-  --el-checkbox-input-border-color-hover: var(--el-color-primary);
-  --el-checkbox-bordered-height: 40px;
-
-  --el-checkbox-button-checked-background-color: var(--el-color-primary);
-  --el-checkbox-button-checked-font-color: var(--el-color-white);
-  --el-checkbox-button-checked-border-color: var(--el-color-primary);
+  @include set-component-css-var('checkbox', $--checkbox);
 }
 
 @include b(checkbox) {

packages/theme-chalk/src/common/popup.scss

@@ -1,9 +1,9 @@
 @import './var.scss';
 @import '../mixins/mixins';
+@import '../mixins/var';
 
 :root {
-  --el-popup-modal-background-color: var(--el-color-black);
-  --el-popup-modal-opacity: 0.5;
+  @include set-component-css-var('popup', $--popup);
 }
 
 .v-modal-enter {