From 2db400c73a3d8dbd8a96a0cc3cb7ecc457a681b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sat, 12 Mar 2022 16:59:07 +0800
Subject: [PATCH] refactor(components): [link] dynamic css vars & fix inner
 align (#6557)

---
 docs/examples/link/with-icon.vue         |  5 +--
 packages/components/link/src/link.vue    |  2 +-
 packages/theme-chalk/src/common/var.scss |  4 +-
 packages/theme-chalk/src/link.scss       | 52 +++++++++++++-----------
 4 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/docs/examples/link/with-icon.vue b/docs/examples/link/with-icon.vue
index 8a61f58974..f1a4db49c9 100644
--- a/docs/examples/link/with-icon.vue
+++ b/docs/examples/link/with-icon.vue
@@ -6,14 +6,13 @@
     </el-link>
   </div>
 </template>
+
 <script setup lang="ts">
 import { Edit, View as IconView } from '@element-plus/icons-vue'
 </script>
+
 <style scoped>
 .el-link {
   margin-right: 8px;
 }
-.el-link .el-icon--right.el-icon {
-  vertical-align: text-bottom;
-}
 </style>
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index a151cbdeab..7e13490256 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -10,7 +10,7 @@
     @click="handleClick"
   >
     <el-icon v-if="icon"><component :is="icon" /></el-icon>
-    <span v-if="$slots.default" :class="ns.m('inner')">
+    <span v-if="$slots.default" :class="ns.e('inner')">
       <slot></slot>
     </span>
 
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index de615f8b4a..a6c51518d0 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1100,8 +1100,8 @@ $link: map.merge(
   (
     'font-size': var(--el-font-size-base),
     'font-weight': var(--el-font-weight-primary),
-    'default-text-color': var(--el-text-color-regular),
-    'default-active-color': var(--el-color-primary),
+    'text-color': var(--el-text-color-regular),
+    'hover-text-color': var(--el-color-primary),
     'disabled-text-color': var(--el-text-color-placeholder),
   ),
   $link
diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss
index c3b7cafd7c..778f0de9a1 100644
--- a/packages/theme-chalk/src/link.scss
+++ b/packages/theme-chalk/src/link.scss
@@ -2,6 +2,7 @@
 
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
+@use 'mixins/utils' as *;
 @use 'common/var' as *;
 
 @include b(link) {
@@ -19,8 +20,14 @@
   outline: none;
   cursor: pointer;
   padding: 0;
-  font-size: var(--el-link-font-size);
-  font-weight: var(--el-link-font-weight);
+  font-size: getCssVar('link', 'font-size');
+  font-weight: getCssVar('link', 'font-weight');
+
+  color: getCssVar('link', 'text-color');
+
+  &:hover {
+    color: getCssVar('link', 'hover-text-color');
+  }
 
   @include when(underline) {
     &:hover:after {
@@ -30,11 +37,12 @@
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid var(--el-link-default-active-color);
+      border-bottom: 1px solid getCssVar('link', 'hover-text-color');
     }
   }
 
   @include when(disabled) {
+    color: getCssVar('link', 'disabled-text-color');
     cursor: not-allowed;
   }
 
@@ -45,40 +53,36 @@
   }
 
   &.#{$namespace}-link--default {
-    color: var(--el-link-default-text-color);
-
-    &:hover {
-      color: var(--el-link-default-active-color);
-    }
-
     &:after {
-      border-color: var(--el-link-default-active-color);
+      border-color: getCssVar('link', 'hover-text-color');
     }
+  }
 
-    @include when(disabled) {
-      color: var(--el-link-disabled-text-color);
-    }
+  @include e(inner) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 
   @each $type in $types {
     &.#{$namespace}-link--#{$type} {
-      --el-link-text-color: var(--el-color-#{$type});
-      color: var(--el-link-text-color);
-
-      &:hover {
-        color: mix(map.get($link-text-color, $type), $color-white, 80%);
-      }
+      @include css-var-from-global(('link', 'text-color'), ('color', $type));
+      @include css-var-from-global(
+        ('link', 'hover-text-color'),
+        ('color', $type, 'light-3')
+      );
+      @include css-var-from-global(
+        ('link', 'disabled-text-color'),
+        ('color', $type, 'light-5')
+      );
 
       &:after {
-        border-color: var(--el-link-text-color);
+        border-color: getCssVar('link', 'text-color');
       }
 
-      @include when(disabled) {
-        color: mix(map.get($link-text-color, $type), $color-white, 50%);
-      }
       @include when(underline) {
         &:hover:after {
-          border-color: var(--el-link-text-color);
+          border-color: getCssVar('link', 'text-color');
         }
       }
     }