From 1f889a47fa9e2d38411eabbdf2fb6a625119dc7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Wed, 24 Feb 2021 13:40:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90link=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/link.wc | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/form/link.wc b/src/form/link.wc
index 5b9cd53..e36ec97 100644
--- a/src/form/link.wc
+++ b/src/form/link.wc
@@ -8,10 +8,12 @@
 :host {
   position: relative;
   display: inline-flex;
+  border-radius: 2px;
   user-select: none;
   -moz-user-select: none;
-  font-size: 14px;
+  font-size: inherit;
   cursor: pointer;
+  transition: box-shadow 0.15s linear;
 
   .link {
     display: flex;
@@ -39,7 +41,7 @@
     left: 0;
     width: 100%;
     height: 1px;
-    border-bottom: 1px dashed var(--color-plain-3);
+    border-bottom: 1px dashed var(--color-grey-1);
     content: '';
     opacity: 0;
     transition: opacity 0.15s linear;
@@ -48,10 +50,9 @@
 
 :host(:not([disabled]):focus-within) {
   &::after {
-    height: 2px;
-    border-width: 2px;
     opacity: 1;
   }
+  box-shadow: 0 0 0 2px var(--color-plain-a);
 }
 
 :host(:not([disabled]):hover),
@@ -80,6 +81,9 @@
 :host([type='danger']:not([disabled]):active) {
   color: var(--color-red-3);
 }
+:host([type='danger']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-red-a);
+}
 
 // -------------
 :host([type='info']) {
@@ -94,6 +98,9 @@
 :host([type='info']:not([disabled]):active) {
   color: var(--color-blue-3);
 }
+:host([type='info']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-blue-a);
+}
 
 // --------
 :host([type='success']) {
@@ -108,6 +115,9 @@
 :host([type='success']:not([disabled]):active) {
   color: var(--color-green-3);
 }
+:host([type='success']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-green-a);
+}
 // ---------
 :host([type='primary']) {
   color: var(--color-teal-2);
@@ -121,6 +131,9 @@
 :host([type='primary']:not([disabled]):active) {
   color: var(--color-teal-3);
 }
+:host([type='primary']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-teal-a);
+}
 
 // ----------
 :host([type='warning']) {
@@ -135,6 +148,9 @@
 :host([type='warning']:not([disabled]):active) {
   color: var(--color-orange-3);
 }
+:host([type='warning']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-orange-a);
+}
 
 // -------
 :host([type='inverse']) {
@@ -149,6 +165,9 @@
 :host([type='inverse']:not([disabled]):active) {
   color: var(--color-dark-3);
 }
+:host([type='inverse']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-dark-a);
+}
 
 // -------
 :host([type='default']) {
@@ -163,6 +182,9 @@
 :host([type='default']:not([disabled]):active) {
   color: var(--color-grey-3);
 }
+:host([type='default']:not([disabled]):focus-within) {
+  box-shadow: 0 0 0 2px var(--color-grey-a);
+}
 </style>
 
 <script>