From e430bd3d4903f80813a900756ea834083ac0187a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Mon, 19 Jul 2021 19:38:44 +0800
Subject: [PATCH] refactor(message-box): migrate css var (#2568)

---
 packages/theme-chalk/src/common/var.scss  | 23 +------
 packages/theme-chalk/src/message-box.scss | 73 ++++++++++++-----------
 2 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 6ca87953ef..78a670804d 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -325,27 +325,8 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
 
 /* MessageBox
 -------------------------- */
-/// color||Color|0
-$--messagebox-title-color: $--color-text-primary !default;
-$--messagebox-width: 420px !default;
-$--messagebox-border-radius: 4px !default;
-/// fontSize||Font|1
-$--messagebox-font-size: map.get($--font-size, 'large') !default;
-/// fontSize||Font|1
-$--messagebox-content-font-size: map.get($--font-size, 'base') !default;
-/// color||Color|0
-$--messagebox-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--messagebox-error-font-size: 12px !default;
-$--messagebox-padding-primary: 15px !default;
-/// color||Color|0
-$--messagebox-success-color: $--color-success !default;
-/// color||Color|0
-$--messagebox-info-color: $--color-info !default;
-/// color||Color|0
-$--messagebox-warning-color: $--color-warning !default;
-/// color||Color|0
-$--messagebox-danger-color: $--color-danger !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/message-box.scss
 
 /* Message
 -------------------------- */
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index 2d2f661e68..541cb5f4da 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -5,16 +5,31 @@
 @import 'input';
 @import 'overlay';
 
+:root {
+  --el-messagebox-title-color: var(--el-color-text-primary);
+  --el-messagebox-width: 420px;
+  --el-messagebox-border-radius: 4px;
+  --el-messagebox-font-size: var(--el-font-size-large);
+  --el-messagebox-content-font-size: var(--el-font-size-base);
+  --el-messagebox-content-color: var(--el-color-text-regular);
+  --el-messagebox-error-font-size: 12px;
+  --el-messagebox-padding-primary: 15px;
+
+  @each $type in (success, info, warning, error) {
+    --el-messagebox-#{$type}-color: var(--el-color-#{$type});
+  }
+}
+
 @include b(message-box) {
   display: inline-block;
-  width: $--messagebox-width;
+  width: var(--el-messagebox-width);
   padding-bottom: 10px;
   vertical-align: middle;
-  background-color: $--color-white;
-  border-radius: $--messagebox-border-radius;
+  background-color: var(--el-color-white);
+  border-radius: var(--el-messagebox-border-radius);
   border: 1px solid var(--el-border-color-lighter);
-  font-size: $--messagebox-font-size;
-  box-shadow: $--box-shadow-light;
+  font-size: var(--el-messagebox-font-size);
+  box-shadow: var(--el-box-shadow-light);
   text-align: left;
   overflow: hidden;
   backface-visibility: hidden;
@@ -32,22 +47,22 @@
 
   @include e(header) {
     position: relative;
-    padding: $--messagebox-padding-primary;
+    padding: var(--el-messagebox-padding-primary);
     padding-bottom: 10px;
   }
 
   @include e(title) {
     padding-left: 0;
     margin-bottom: 0;
-    font-size: $--messagebox-font-size;
+    font-size: var(--el-messagebox-font-size);
     line-height: 1;
-    color: $--messagebox-title-color;
+    color: var(--el-messagebox-title-color);
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: $--messagebox-padding-primary;
-    right: $--messagebox-padding-primary;
+    top: var(--el-messagebox-padding-primary);
+    right: var(--el-messagebox-padding-primary);
     padding: 0;
     border: none;
     outline: none;
@@ -56,21 +71,21 @@
     cursor: pointer;
 
     .#{$namespace}-message-box__close {
-      color: $--color-info;
+      color: var(--el-color-info);
     }
 
     &:focus,
     &:hover {
       .#{$namespace}-message-box__close {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
   }
 
   @include e(content) {
-    padding: 10px $--messagebox-padding-primary;
-    color: $--messagebox-content-color;
-    font-size: $--messagebox-content-font-size;
+    padding: 10px var(--el-messagebox-padding-primary);
+    color: var(--el-messagebox-content-color);
+    font-size: var(--el-messagebox-content-font-size);
   }
 
   @include e(container) {
@@ -81,9 +96,9 @@
     padding-top: 15px;
 
     & div.invalid > input {
-      border-color: $--color-danger;
+      border-color: var(--el-color-error);
       &:focus {
-        border-color: $--color-danger;
+        border-color: var(--el-color-error);
       }
     }
   }
@@ -104,20 +119,10 @@
       padding-right: 12px;
     }
 
-    &.#{$namespace}-icon-success {
-      color: $--messagebox-success-color;
-    }
-
-    &.#{$namespace}-icon-info {
-      color: $--messagebox-info-color;
-    }
-
-    &.#{$namespace}-icon-warning {
-      color: $--messagebox-warning-color;
-    }
-
-    &.#{$namespace}-icon-error {
-      color: $--messagebox-danger-color;
+    @each $type in (success, info, warning, error) {
+      &.#{$namespace}-icon-#{$type} {
+        color: var(--el-messagebox-#{$type}-color);
+      }
     }
   }
 
@@ -131,8 +136,8 @@
   }
 
   @include e(errormsg) {
-    color: $--color-danger;
-    font-size: $--messagebox-error-font-size;
+    color: var(--el-color-error);
+    font-size: var(--el-messagebox-error-font-size);
     min-height: 18px;
     margin-top: 2px;
   }
@@ -182,7 +187,7 @@
     }
 
     @include e(content) {
-      $padding-horizontal: $--messagebox-padding-primary + 12px;
+      $padding-horizontal: calc(var(--el-messagebox-padding-primary) + 12px);
 
       padding-left: $padding-horizontal;
       padding-right: $padding-horizontal;