fix(anchor): fix hover color (#178)

* fix(anchor): fix hover color * test: update snapshots
twilio-labs · Nov 12, 2019 · ba37e97 · ba37e97 · vercel · Nov 12, 2019
1 parent c235734
commit ba37e97
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/packages/paste-core/components/anchor/__tests__/__snapshots__/anchor.test.tsx.snap b/packages/paste-core/components/anchor/__tests__/__snapshots__/anchor.test.tsx.snap
@@ -23,13 +23,15 @@ exports[`Anchor it should render an anchor 1`] = `
 }
 
 .emotion-0:hover {
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .emotion-0:focus,
 .emotion-0:active {
   box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -69,13 +71,15 @@ exports[`Anchor it should render an external anchor 1`] = `
 }
 
 .emotion-0:hover {
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .emotion-0:focus,
 .emotion-0:active {
   box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -117,13 +121,15 @@ exports[`Anchor it should render an external anchor with overwritten target and
 }
 
 .emotion-0:hover {
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .emotion-0:focus,
 .emotion-0:active {
   box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
+  color: #003e82;
   -webkit-text-decoration: none;
   text-decoration: none;
 }

diff --git a/packages/paste-core/components/anchor/src/styles.ts b/packages/paste-core/components/anchor/src/styles.ts
@@ -8,21 +8,14 @@ export const StyledAnchor = styled.a`
   outline: none;
 
   &:hover {
-    color: ${themeGet('textColors.colorTextLinkHover')};
+    color: ${themeGet('textColors.colorTextLinkDarker')};
     text-decoration: none;
   }
 
   &:focus,
   &:active {
     box-shadow: ${themeGet('shadows.shadowFocus')};
+    color: ${themeGet('textColors.colorTextLinkDarker')};
     text-decoration: none;
   }
-
-  &:focus {
-    color: ${themeGet('textColors.colorTextLinkFocus')};
-  }
-
-  &:active {
-    color: ${themeGet('textColors.colorTextLinkActive')};
-  }
 `;
diff --git a/yarn.lock b/yarn.lock
@@ -3780,7 +3780,7 @@
     "@types/react" "*"
     "@types/webpack-env" "*"
 
-"@types/styled-system@^5.1.2":
+"@types/styled-system@^5.1.2", "@types/styled-system@^5.1.3":
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.3.tgz#d840c8369c1b8115b84bff0fb9846fcd494204a5"
   integrity sha512-YLmQz8sNtLBg5JAuCfkdRl0Hf6KB/eM4wVmy+I3HEMWs35rmExF1BOBydEXjcgfiQ3bu/v+7RBu0whkOYtz4WQ==