From 9f76045da61e96ec90f1ff69848625f19b4a703e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Thu, 12 Aug 2021 09:47:32 +0800
Subject: [PATCH] refactor(var):
 alert/badge/link/message/message-box/notification/tag (#2892)

---
 packages/theme-chalk/src/alert.scss        |  8 +++----
 packages/theme-chalk/src/common/var.scss   | 11 +++++++++
 packages/theme-chalk/src/link.scss         | 27 +++++-----------------
 packages/theme-chalk/src/message-box.scss  |  7 ++----
 packages/theme-chalk/src/message.scss      | 11 ++++-----
 packages/theme-chalk/src/notification.scss |  8 +++----
 packages/theme-chalk/src/result.scss       |  7 ++----
 7 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
index 60e29713f0..fd70f5d30a 100644
--- a/packages/theme-chalk/src/alert.scss
+++ b/packages/theme-chalk/src/alert.scss
@@ -7,10 +7,6 @@
 @include b(alert) {
   @include set-component-css-var('alert', $--alert);
 
-  @each $type in (success, info, warning, error) {
-    --el-alert-#{$type}-color: #{map.get($--colors, $type, 'light-9')};
-  }
-
   width: 100%;
   padding: var(--el-alert-padding);
   margin: 0;
@@ -45,8 +41,10 @@
 
   @each $type in (success, info, warning, error) {
     @include m($type) {
+      --el-alert-background-color: #{map.get($--colors, $type, 'light-9')};
+
       &.is-light {
-        background-color: var(--el-alert-#{$type}-color);
+        background-color: var(--el-alert-background-color);
         color: var(--el-color-#{$type});
 
         .#{$namespace}-alert__description {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index c6b79a970b..c6b9af27f5 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1040,6 +1040,17 @@ $--link: map.merge(
   $--link
 );
 
+$--link-font-color: () !default;
+
+@each $type in $--types {
+  $--link-font-color: map.merge(
+    $--link-font-color,
+    (
+      $type: map.get($--colors, $type, 'base'),
+    )
+  ) !global;
+}
+
 /* Calendar
 --------------------------*/
 // css3 var in packages/theme-chalk/src/calendar.scss
diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss
index 69f42c5068..78543a4574 100644
--- a/packages/theme-chalk/src/link.scss
+++ b/packages/theme-chalk/src/link.scss
@@ -4,25 +4,8 @@
 @import 'mixins/var';
 @import 'common/var';
 
-$types: primary, success, warning, danger, info;
-
-$--link-font-color: () !default;
-
-@each $type in $types {
-  $--link-font-color: map.merge(
-    $--link-font-color,
-    (
-      $type: map.get($--colors, $type, 'base'),
-    )
-  ) !global;
-}
-
 @include b(link) {
   @include set-component-css-var('link', $--link);
-
-  @each $type in $types {
-    --el-link-#{$type}-font-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(link) {
@@ -74,21 +57,23 @@ $--link-font-color: () !default;
     }
   }
 
-  @each $type in $types {
+  @each $type in $--types {
+    --el-link-font-color: var(--el-color-#{$type});
+
     &.#{$namespace}-link--#{$type} {
-      color: var(--el-link-#{$type}-font-color);
+      color: var(--el-link-font-color);
       &:hover {
         color: mix(map.get($--link-font-color, $type), $--color-white, 80%);
       }
       &:after {
-        border-color: var(--el-link-#{$type}-font-color);
+        border-color: var(--el-link-font-color);
       }
       @include when(disabled) {
         color: mix(map.get($--link-font-color, $type), $--color-white, 50%);
       }
       @include when(underline) {
         &:hover:after {
-          border-color: var(--el-link-#{$type}-font-color);
+          border-color: var(--el-link-font-color);
         }
       }
     }
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index 49bbfffc50..240083c758 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -10,10 +10,6 @@
 
 @include b(message-box) {
   @include set-component-css-var('messagebox', $--messagebox);
-
-  @each $type in (success, info, warning, error) {
-    --el-messagebox-#{$type}-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(message-box) {
@@ -117,7 +113,8 @@
 
     @each $type in (success, info, warning, error) {
       &.#{$namespace}-icon-#{$type} {
-        color: var(--el-messagebox-#{$type}-color);
+        --el-messagebox-color: var(--el-color-#{$type});
+        color: var(--el-messagebox-color);
       }
     }
   }
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index 279f35ff8f..4965313157 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -6,10 +6,6 @@
 
 @include b(message) {
   @include set-component-css-var('message', $--message);
-
-  @each $type in (success, info, warning, error) {
-    --el-message-#{$type}-font-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(message) {
@@ -57,8 +53,10 @@
       background-color: map.get($--colors, $type, 'light-9');
       border-color: map.get($--colors, $type, 'light-8');
 
+      --el-message-font-color: var(--el-color-#{$type});
+
       .#{$namespace}-message__content {
-        color: var(--el-message-#{$type}-font-color);
+        color: var(--el-message-font-color);
       }
     }
   }
@@ -95,7 +93,8 @@
 
   @each $type in (success, info, warning, error) {
     & .#{$namespace}-icon-#{$type} {
-      color: var(--el-message-#{$type}-font-color);
+      --el-message-font-color: var(--el-color-#{$type});
+      color: var(--el-message-font-color);
     }
   }
 }
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
index f3862d5a11..26745949c8 100644
--- a/packages/theme-chalk/src/notification.scss
+++ b/packages/theme-chalk/src/notification.scss
@@ -4,10 +4,6 @@
 
 @include b(notification) {
   @include set-component-css-var('notification', $--notification);
-
-  @each $type in (success, info, warning, error) {
-    --el-notification-#{$type}-icon-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(notification) {
@@ -81,8 +77,10 @@
   }
 
   @each $type in (success, info, warning, error) {
+    --el-notification-icon-color: var(--el-color-#{$type});
+
     .#{$namespace}-icon-#{$type} {
-      color: var(--el-notification-#{$type}-icon-color);
+      color: var(--el-notification-icon-color);
     }
   }
 }
diff --git a/packages/theme-chalk/src/result.scss b/packages/theme-chalk/src/result.scss
index ecf82cdaaf..9dcaf1d2fb 100644
--- a/packages/theme-chalk/src/result.scss
+++ b/packages/theme-chalk/src/result.scss
@@ -6,10 +6,6 @@ $types: success, warning, danger, info, error;
 
 @include b(result) {
   @include set-component-css-var('result', $--result);
-
-  @each $type in $types {
-    --el-result-#{$type}-color: var(--el-color-#{$type});
-  }
 }
 
 @include b(result) {
@@ -56,7 +52,8 @@ $types: success, warning, danger, info, error;
 
   @each $type in $types {
     .icon-#{$type} {
-      fill: var(--el-result-#{$type}-color);
+      --el-result-color: var(--el-color-#{$type});
+      fill: var(--el-result-color);
     }
   }
 }