Updated buttons to be more accessible. (#373)

* Darkened hover colors
* Darkened disabled text color
* Removed elevated button styles
* Refactored many button styles to overrideable variables
* Added link description text

Author: dsjen

pattern-library/sass/global/_settings.scss

@@ -320,7 +320,7 @@ $text-de-emphasized-font-weight:            font-weight(normal) !default;
 
 
 // links
-$link-color:                                palette(primary, base) !default;
+$link-color:                                palette(primary, dark) !default;
 $link-focus-color:                          palette(primary, light) !default;
 $link-visited-color:                        palette(primary, dark) !default;
 

pattern-library/sass/patterns/_buttons.scss

@@ -11,7 +11,6 @@
 // #NEUTRAL
 // #BRAND
 // #LINK
-// #ELEVATED
 // #INVERSE
 // #COMBO
 // #APPLICATION
@@ -26,6 +25,11 @@ $btn-border-size:                           1px !default;
 $btn-shadow:                                3px !default;
 $btn-font-weight:                           font-weight(semi-bold) !default;
 $btn-border-radius:                         $component-border-radius !default;
+$btn-focus-color:                           palette(primary, dark) !default;
+$btn-focus-text-color:                      palette(primary, x-back) !default;
+$btn-disabled-text-color:                   palette(grayscale, accent) !default;
+$btn-disabled-background-color:             palette(grayscale, x-back) !default;
+$btn-disabled-border-color:                 palette(grayscale, back) !default;
 
 // sizes
 $btn-large-padding-vertical: spacing-vertical(small);
@@ -120,9 +124,9 @@ $btn-small-font-size: font-size(small);
     &.is-hovered,
     &:focus,
     &.is-focused {
-        border-color: palette(primary, accent);
-        background: palette(primary, accent);
-        color: palette(primary, x-back);
+        border-color: $btn-focus-color;
+        background: $btn-focus-color;
+        color: $btn-focus-text-color;
     }
 
     // STATE: is pressed or active
@@ -137,8 +141,8 @@ $btn-small-font-size: font-size(small);
     // STATE: is disabled
     &:disabled,
     &.is-disabled {
-        border-color: palette(grayscale, back);
-        color: palette(grayscale, back);
+        border-color: $btn-disabled-border-color;
+        color: $btn-disabled-text-color;
     }
 }
 
@@ -157,9 +161,9 @@ $btn-small-font-size: font-size(small);
     &.is-hovered,
     &:focus,
     &.is-focused {
-        border-color: palette(primary, accent);
-        background: palette(primary, accent);
-        color: palette(primary, x-back);
+        border-color: $btn-focus-color;
+        background: $btn-focus-color;
+        color: $btn-focus-text-color;
     }
 
     // STATE: is pressed or active
@@ -173,9 +177,9 @@ $btn-small-font-size: font-size(small);
     // STATE: is disabled
     &:disabled,
     &.is-disabled {
-        border-color: palette(grayscale, back);
-        background: palette(grayscale, x-back);
-        color: palette(grayscale, back);
+        border-color: $btn-disabled-border-color;
+        background: $btn-disabled-background-color;
+        color: $btn-disabled-text-color;
     }
 }
 
@@ -195,9 +199,9 @@ $btn-small-font-size: font-size(small);
     &.is-hovered,
     &:focus,
     &.is-focused {
-        border-color: palette(primary, accent);
-        background: palette(primary, accent);
-        color: palette(primary, x-back);
+        border-color: $btn-focus-color;
+        background: $btn-focus-color;
+        color: $btn-focus-text-color;
     }
 
     // STATE: is pressed or active
@@ -212,9 +216,9 @@ $btn-small-font-size: font-size(small);
     // STATE: is disabled
     &:disabled,
     &.is-disabled {
-        border-color: palette(grayscale, back);
-        background: palette(grayscale, x-back);
-        color: palette(grayscale, back);
+        border-color: $btn-disabled-border-color;
+        background: $btn-disabled-background-color;
+        color: $btn-disabled-text-color;
     }
 }
 
@@ -232,50 +236,16 @@ $btn-small-font-size: font-size(small);
     padding: 1px;
     background: $transparent;
 
-    &:disabled {
-        // disabled links shouldn't be in the interface
-        // plus, having them pass AA guidelines would make them no longer look disabled
-        display: none;
-    }
-}
-
-
-// ----------------------------
-// #ELEVATED
-// ----------------------------
-%btn-elevated {
-    @extend %btn;
-    border-color: palette(primary, base);
-    box-shadow: inset 0 -3px 0 0 palette(primary, dark);
-    background: palette(primary, base);
-    color: palette(primary, x-back);
-
-    // STATE: hover and focus
     &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        box-shadow: inset 0 -3px 0 0 palette(primary, base);
-        background: palette(primary, accent);
-        color: palette(primary, x-back);
-    }
-
-    // STATE: is pressed or active
     &:active,
-    &.is-pressed,
-    &.is-active {
-        box-shadow: inset 0 3px 0 0 palette(primary, dark);
-        background: palette(primary, base);
-        color: palette(primary, back);
+    &:focus {
+        text-decoration: underline;
     }
 
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        box-shadow: none;
-        border-color: palette(grayscale, back);
-        background: palette(grayscale, x-back);
-        color: palette(grayscale, back);
+    &:disabled {
+        // disabled links shouldn't be in the interface
+        // plus, having them pass AA guidelines would make them no longer look disabled
+        display: none;
     }
 }
 
@@ -340,13 +310,8 @@ $btn-small-font-size: font-size(small);
     // STATE: is disabled
     &:disabled,
     &.is-disabled {
-        border-color: palette(grayscale, back);
-        color: palette(grayscale, back);
-
-        &:hover {
-            border-color: palette(grayscale, back);
-            color: palette(grayscale, back);
-        }
+        border-color: palette(grayscale, accent);
+        color: $btn-disabled-text-color;
     }
 }
 
@@ -374,11 +339,6 @@ $btn-small-font-size: font-size(small);
     @extend %btn-link;
 }
 
-// elevated
-.btn-elevated {
-    @extend %btn-elevated;
-}
-
 // inverse
 .btn-inverse {
     @extend %btn-inverse;

pldoc/_components/buttons.md

@@ -43,14 +43,6 @@ info:          Buttons should be used for performing actions within the edX envi
     <button type="button" class="btn-brand" disabled>Primary Disabled</button>
 </div>
 
-<h3 class="example-set-hd">Elevated</h3>
-<div class="example-set">
-    <button type="button" class="btn-elevated">Elevated</button>
-    <button type="button" class="btn-elevated btn-large">Elevated Large</button>
-    <button type="button" class="btn-elevated btn-small">Elevated Small</button>
-    <button type="button" class="btn-elevated" disabled>Elevated Disabled</button>
-</div>
-
 <h3 class="example-set-hd">Buttons with icons</h3>
 <div class="example-set">
     <button type="button" class="btn">
@@ -65,10 +57,6 @@ info:          Buttons should be used for performing actions within the edX envi
         <span class="icon fa fa-comment" aria-hidden="true"></span>
         Brand
     </button>
-    <button type="button" class="btn-elevated">
-        <span class="icon fa fa-comment" aria-hidden="true"></span>
-        Elevated
-    </button>
 </div>
 
 <h3 class="example-set-hd">Combo</h3>
@@ -102,10 +90,10 @@ info:          Buttons should be used for performing actions within the edX envi
     <a href="http://ux.edx.org/" class="btn">View the UX Pattern Library</a>
     <a href="http://ux.edx.org/" class="btn-neutral">View the UX Pattern Library</a>
     <a href="http://ux.edx.org/" class="btn-brand">View the UX Pattern Library</a>
-    <a href="http://ux.edx.org/" class="btn-elevated">View the UX Pattern Library</a>
 </div>
 
 <h3 class="example-set-hd">Links without visual styling</h3>
+<p>Note: unread links use the primary color, while read/visited links use primary dark.</p>
 <div class="example-set">
     <button type="button" class="btn-link">Link</button>
     <button type="button" class="btn-link btn-large">Link Large</button>