From f96fdcb5bfe46fa2c4c152deb26e2081ed34e165 Mon Sep 17 00:00:00 2001
From: Zhao Lei <firede@firede.us>
Date: Fri, 24 Jul 2020 17:28:40 +0800
Subject: [PATCH] fix(link): fix hard-coded background color (#347)

---
 components/link/__tests__/__snapshots__/index.test.tsx.snap | 2 +-
 components/link/link.tsx                                    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/link/__tests__/__snapshots__/index.test.tsx.snap b/components/link/__tests__/__snapshots__/index.test.tsx.snap
index b9f6c0d..5054760 100644
--- a/components/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -120,7 +120,7 @@ exports[`Link should render correctly 1`] = `
           }
 
           .link:hover {
-            background-color: #0076ff1a;
+            background-color: rgba(0, 112, 243, 0.1);
             color: #3291ff;
           }
         </style></a></div>"
diff --git a/components/link/link.tsx b/components/link/link.tsx
index 887f377..4ce1ca1 100644
--- a/components/link/link.tsx
+++ b/components/link/link.tsx
@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
+import { addColorAlpha } from '../utils/color'
 
 export interface Props {
   href?: string
@@ -65,7 +66,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
           }
 
           .link:hover {
-            background-color: ${block ? '#0076ff1a' : 'unset'};
+            background-color: ${block ? addColorAlpha(theme.palette.link, 0.1) : 'unset'};
             color: ${hoverColor};
           }
         `}</style>