refactor: migrate tree/popup/form/timeline-item css var (#2697)

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

@@ -1,6 +1,11 @@
 @import './var.scss';
 @import '../mixins/mixins';
 
+:root {
+  --el-popup-modal-background-color: var(--el-color-black);
+  --el-popup-modal-opacity: 0.5;
+}
+
 .v-modal-enter {
   animation: v-modal-in var(--el-transition-duration-fast) ease;
 }
@@ -31,8 +36,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: $--popup-modal-opacity;
+  opacity: var(--el-popup-modal-opacity);
-  background: $--popup-modal-background-color;
+  background: var(--el-popup-modal-background-color);
 }
 
 @include b(popup-parent) {

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

@@ -453,10 +453,8 @@ $--button-active-shade-percent: 10% !default;
 
 /* Popup
 -------------------------- */
-/// color||Color|0
+// refactor with css3 var
-$--popup-modal-background-color: $--color-black !default;
+// See packages/theme-chalk/src/popup.scss
-/// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
 
 /* Popover
 -------------------------- */
@@ -475,12 +473,8 @@ $--popup-modal-opacity: 0.5 !default;
 
 /* Tree
 -------------------------- */
-/// color||Color|0
+// refactor with css3 var
-$--tree-node-hover-background-color: $--background-color-base !default;
+// See packages/theme-chalk/src/tree.scss
-/// color||Color|0
-$--tree-font-color: var(--el-text-color-regular) !default;
-/// color||Color|0
-$--tree-expand-icon-color: var(--el-text-color-placeholder) !default;
 
 /* Dropdown
 -------------------------- */
@@ -600,9 +594,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Timeline
 --------------------------*/
-$--timeline-node-size-normal: 12px !default;
+// refactor with css3 var
-$--timeline-node-size-large: 14px !default;
+// See packages/theme-chalk/src/timeline-item.scss
-$--timeline-node-color: map.get($--border-color, 'light') !default;
 
 /* Backtop
 --------------------------*/
@@ -628,8 +621,8 @@ $--backtop-hover-background-color: map.get(
 
 /* Form
 -------------------------- */
-/// fontSize||Font|1
+// refactor with css3 var
-$--form-label-font-size: map.get($--font-size, 'base') !default;
+// See packages/theme-chalk/src/form.scss
 
 /* Avatar
 --------------------------*/

packages/theme-chalk/src/form.scss

@@ -2,6 +2,10 @@
 @import 'mixins/utils';
 @import 'common/var';
 
+:root {
+  --el-form-label-font-size: var(--el-font-size-base);
+}
+
 @include b(form) {
   @include m(label-left) {
     & .#{$namespace}-form-item__label {
@@ -93,7 +97,7 @@
   @include e(label) {
     flex: 0 0 auto;
     text-align: right;
-    font-size: $--form-label-font-size;
+    font-size: var(--el-form-label-font-size);
     color: var(--el-text-color-regular);
     line-height: 40px;
     padding: 0 12px 0 0;

packages/theme-chalk/src/timeline-item.scss

@@ -1,6 +1,12 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-timeline-node-size-normal: 12px;
+  --el-timeline-node-size-large: 14px;
+  --el-timeline-node-color: var(--el-border-color-light);
+}
+
 @include b(timeline-item) {
   position: relative;
   padding-bottom: 20px;
@@ -15,17 +21,17 @@
     position: absolute;
     left: 4px;
     height: 100%;
-    border-left: 2px solid $--timeline-node-color;
+    border-left: 2px solid var(--el-timeline-node-color);
   }
 
   @include e(icon) {
-    color: $--color-white;
+    color: var(--el-color-white);
     font-size: var(--el-font-size-small);
   }
 
   @include e(node) {
     position: absolute;
-    background-color: $--timeline-node-color;
+    background-color: var(--el-timeline-node-color);
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -33,29 +39,17 @@
 
     @include m(normal) {
       left: -1px;
-      width: $--timeline-node-size-normal;
+      width: var(--el-timeline-node-size-normal);
-      height: $--timeline-node-size-normal;
+      height: var(--el-timeline-node-size-normal);
     }
     @include m(large) {
       left: -2px;
-      width: $--timeline-node-size-large;
+      width: var(--el-timeline-node-size-large);
-      height: $--timeline-node-size-large;
+      height: var(--el-timeline-node-size-large);
     }
 
-    @include m(primary) {
+    @each $type in (primary, success, warning, danger, info) {
-      background-color: var(--el-color-primary);
+      background-color: var(--el-color-#{$type});
-    }
-    @include m(success) {
-      background-color: var(--el-color-success);
-    }
-    @include m(warning) {
-      background-color: var(--el-color-warning);
-    }
-    @include m(danger) {
-      background-color: var(--el-color-danger);
-    }
-    @include m(info) {
-      background-color: var(--el-color-info);
     }
   }
 

packages/theme-chalk/src/tree.scss

@@ -3,11 +3,17 @@
 @import 'common/transition';
 @import 'checkbox';
 
+:root {
+  --el-tree-node-hover-background-color: var(--el-background-color-base);
+  --el-tree-font-color: var(--el-text-color-regular);
+  --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+}
+
 @include b(tree) {
   position: relative;
   cursor: default;
-  background: $--color-white;
+  background: var(--el-color-white);
-  color: $--tree-font-color;
+  color: var(--el-tree-font-color);
 
   @include e(empty-block) {
     position: relative;
@@ -41,7 +47,7 @@
   &:focus {
     /* focus */
     > .#{$namespace}-tree-node__content {
-      background-color: $--tree-node-hover-background-color;
+      background-color: var(--el-tree-node-hover-background-color);
     }
   }
 
@@ -65,7 +71,7 @@
       margin-right: 8px;
     }
     &:hover {
-      background-color: $--tree-node-hover-background-color;
+      background-color: var(--el-tree-node-hover-background-color);
     }
 
     .#{$namespace}-tree.is-dragging & {
@@ -83,7 +89,7 @@
 
   @include e(expand-icon) {
     cursor: pointer;
-    color: $--tree-expand-icon-color;
+    color: var(--el-tree-expand-icon-color);
     font-size: 12px;
 
     transform: rotate(0deg);
@@ -106,7 +112,7 @@
   @include e(loading-icon) {
     margin-right: 8px;
     font-size: var(--el-font-size-base);
-    color: $--tree-expand-icon-color;
+    color: var(--el-tree-expand-icon-color);
   }
 
   & > .#{$namespace}-tree-node__children {
@@ -122,5 +128,5 @@
 .#{$namespace}-tree--highlight-current
   .#{$namespace}-tree-node.is-current
   > .#{$namespace}-tree-node__content {
-  background-color: mix($--color-white, $--color-primary, 92%);
+  background-color: var(--el-color-primary-light-9);
 }