refactor(dialog): migrate css var (#2641)

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

@@ -185,11 +185,6 @@ $--font-size: map.merge(
   $--font-size
 );
 
-/// fontWeight|1|Font Weight|1
-$--font-weight-primary: 500 !default;
-/// fontLineHeight|1|Line Height|2
-$--font-line-height-primary: 24px !default;
-
 /* Disable base
 -------------------------- */
 $--disabled-fill-base: $--background-color-base !default;
@@ -207,8 +202,6 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
 -------------------------- */
 /// fontSize||Font|1
 $--radio-font-size: map.get($--font-size, 'base') !default;
-/// fontWeight||Font|1
-$--radio-font-weight: $--font-weight-primary !default;
 /// color||Color|0
 $--radio-font-color: $--color-text-regular !default;
 $--radio-input-height: 14px !default;
@@ -431,16 +424,8 @@ $--button-active-shade-percent: 10% !default;
 
 /* Dialog
 -------------------------- */
-$--dialog-background-color: $--color-white !default;
+// refactor with css3 var
-$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
+// See packages/theme-chalk/src/dialog.scss
-/// fontSize||Font|1
-$--dialog-title-font-size: map.get($--font-size, 'large') !default;
-/// fontSize||Font|1
-$--dialog-content-font-size: 14px !default;
-/// fontLineHeight||LineHeight|2
-$--dialog-font-line-height: $--font-line-height-primary !default;
-/// padding||Spacing|3
-$--dialog-padding-primary: 20px !default;
 
 /* Table
 -------------------------- */

packages/theme-chalk/src/dialog.scss

@@ -4,12 +4,21 @@
 @import 'common/popup';
 @import './overlay.scss';
 
+:root {
+  --el-dialog-background-color: var(--el-color-white);
+  --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --el-dialog-title-font-size: var(--el-font-size-large);
+  --el-dialog-content-font-size: 14px;
+  --el-dialog-font-line-height: var(--el-font-line-height-primary);
+  --el-dialog-padding-primary: 20px;
+}
+
 @include b(dialog) {
   position: relative;
   margin: 0 auto 50px;
-  background: $--dialog-background-color;
+  background: var(--el-dialog-background-color);
-  border-radius: $--border-radius-small;
+  border-radius: var(--el-border-radius-small);
-  box-shadow: $--dialog-box-shadow;
+  box-shadow: var(--el-dialog-box-shadow);
   box-sizing: border-box;
   width: 50%;
 
@@ -32,14 +41,14 @@
   }
 
   @include e(header) {
-    padding: $--dialog-padding-primary;
+    padding: var(--el-dialog-padding-primary);
     padding-bottom: 10px;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: $--dialog-padding-primary;
+    top: var(--el-dialog-padding-primary);
-    right: $--dialog-padding-primary;
+    right: var(--el-dialog-padding-primary);
     padding: 0;
     background: transparent;
     border: none;
@@ -60,20 +69,21 @@
   }
 
   @include e(title) {
-    line-height: $--dialog-font-line-height;
+    line-height: var(--el-dialog-font-line-height);
-    font-size: $--dialog-title-font-size;
+    font-size: var(--el-dialog-title-font-size);
-    color: $--color-text-primary;
+    color: var(--el-color-text-primary);
   }
 
   @include e(body) {
-    padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
+    padding: calc(var(--el-dialog-padding-primary) + 10px)
-    color: $--color-text-regular;
+      var(--el-dialog-padding-primary);
-    font-size: $--dialog-content-font-size;
+    color: var(--el-color-text-regular);
+    font-size: var(--el-dialog-content-font-size);
     word-break: break-all;
   }
 
   @include e(footer) {
-    padding: $--dialog-padding-primary;
+    padding: var(--el-dialog-padding-primary);
     padding-top: 10px;
     text-align: right;
     box-sizing: border-box;
@@ -85,7 +95,7 @@
 
     @include e(body) {
       text-align: initial;
-      padding: 25px ($--dialog-padding-primary + 5px) 30px;
+      padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 30px;
     }
 
     @include e(footer) {

packages/theme-chalk/src/drawer.scss

@@ -71,10 +71,18 @@
 
 $directions: rtl, ltr, ttb, btt;
 
+:root {
+  --el-drawer-background-color: var(
+    --el-dialog-background-color,
+    var(--el-color-white)
+  );
+  --el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
+}
+
 @include b(drawer) {
   position: absolute;
   box-sizing: border-box;
-  background-color: $--dialog-background-color;
+  background-color: var(--el-drawer-background-color);
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
@@ -96,7 +104,7 @@ $directions: rtl, ltr, ttb, btt;
     color: rgb(114, 118, 123);
     display: flex;
     margin-bottom: 32px;
-    padding: $--dialog-padding-primary;
+    padding: var(--el-dialog-padding-primary);
     padding-bottom: 0;
     & > :first-child {
       flex: 1;

packages/theme-chalk/src/radio.scss

@@ -5,9 +5,13 @@
 @import 'mixins/button';
 @import 'common/var';
 
+:root {
+  --el-radio-font-weight: var(--el-font-weight-primary);
+}
+
 @include b(radio) {
   color: $--radio-font-color;
-  font-weight: $--radio-font-weight;
+  font-weight: var(--el-radio-font-weight);
   line-height: 1;
   position: relative;
   cursor: pointer;

packages/theme-chalk/src/var.scss

@@ -62,8 +62,8 @@
     @include set-css-var-type('font-size', $type, $--font-size);
   }
 
-  --el-font-weight-primary: #{$--font-weight-primary};
+  --el-font-weight-primary: 500;
-  --el-line-height-primary: #{$--font-line-height-primary};
+  --el-font-line-height-primary: 24px;
   --el-font-color-disabled-base: #bbb;
 
   // z-index