fix(links): Updates link colors and hover/focus and active states

Paired with Justin on this. BREAKING CHANGE: (css class) link-lowlight-alt is no longer supported. Please use link-lowlight instead.
pivotal-cf · Aug 13, 2015 · 757a0a1 · 757a0a1
1 parent f331cac
commit 757a0a1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/src/pivotal-ui/components/links/links.scss b/src/pivotal-ui/components/links/links.scss
@@ -34,8 +34,7 @@ Link
 --------------------------------------------------------------------------------------------------------------    | ----------------------------    | -----------
 <a class="link-text" href="http://bit.ly/1ulOAW7" target="_blank">default link</a>                                | `link-text`                     | Important links
 <a class="link-text link-lowlight" href="http://bit.ly/1ulOAW7" target="_blank">lowlight link</a>                 | `link-text link-lowlight`       | Less important links
-<a class="link-text link-lowlight-alt" href="http://bit.ly/1ulOAW7" target="_blank">lowlight link alternate</a>   | `link-text link-lowlight-alt`   | Less important links
-<a class="link-text link-inverse bg-dark-2" href="http://bit.ly/1ulOAW7" target="_blank">inverse link</a>         | `link-text link-inverse`        | I go on a non-white background
+<a class="link-text link-inverse bg-dark-1" href="http://bit.ly/1ulOAW7" target="_blank">inverse link</a>         | `link-text link-inverse`        | I go on a non-white background
 
 ```html_example
 Here's a <a class="link-text link-lowlight" href="http://bit.ly/1wO7Nhv">less important link</a>
@@ -44,17 +43,21 @@ Here's a <a class="link-text link-lowlight" href="http://bit.ly/1wO7Nhv">less im
 */
 
 a{
+  color: $link-color;
   @include transition-pui();
 
   &:hover, &:focus {
     cursor: pointer;
     text-decoration: none;
+    color: lighten($link-color, 6%);
+  }
+
+  &:active, &.active{
+    color: darken($link-color, 6%);
   }
 
   &.link-text {
-    &:not(.link-lowlight):hover {
-      text-decoration: underline;
-    }
+    font-weight: $link-lowlight-font-weight;
   }
 }
 
@@ -63,24 +66,24 @@ a{
   font-weight: $link-lowlight-font-weight;
   color: $link-lowlight-color;
 
-  &:hover {
-    color: $link-lowlight-hover-color;
+  &:hover, &:focus {
+    color: lighten($link-lowlight-color, 6%);
   }
-}
 
-.link-lowlight-alt {
-  color: $link-lowlight-alt-color;
-
-  &:hover {
-    color: $link-lowlight-alt-hover-color;
+  &:active, &.active {
+    color: darken($link-lowlight-color, 6%);
   }
 }
 
 .link-inverse {
   color: $link-inverse-color;
 
-  &:hover {
-    color: $link-inverse-hover-color;
+  &:hover, &:focus {
+    color: lighten($link-inverse-color, 6%);
+  }
+
+  &:active, &.active {
+    color: darken($link-inverse-color, 6%);
   }
 }
 

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -27,7 +27,6 @@ $teal-10: #1FCCC0;
 $teal-11: #D9FFFC;
 
 
-
 // Grays - use these rather than the bootstrap grays
 // -------------------------
 
@@ -270,15 +269,11 @@ $link-color:                              $accent-3;
 $link-hover-color:                        $accent-4;
 $link-hover-decoration:                   underline !default;
 
-$link-lowlight-color:                     $accent-5;
-$link-lowlight-hover-color:               $accent-3;
-$link-lowlight-font-weight:               700;
+$link-lowlight-color:                     $dark-5;
+$link-lowlight-font-weight:               600;
 
-$link-inverse-color:                      $accent-4;
-$link-inverse-hover-color:                $accent-5;
+$link-inverse-color:                      $accent-5;
 
-$link-lowlight-alt-color:             $neutral-4;
-$link-lowlight-alt-hover-color:       $accent-2;
 
 // Typography
 // -------------------------
@@ -443,7 +438,8 @@ $btn-default-alt-bg:             $neutral-11;
 $btn-default-alt-border:         $neutral-7;
 
 $btn-primary-color:              $accent-3;
-$btn-primary-bg:                 $neutral-11;
+$btn-primary-bg:                 white;
+$btn-primary-bg-hover:           white;
 $btn-primary-border:             #49A8D5 !default;
 
 $btn-lowlight-color:             $dark-5;