From 406b2192ab8ed76bb4062298c1a26eb1f798bb1f Mon Sep 17 00:00:00 2001 From: Dennis Jen Date: Wed, 16 Nov 2016 17:24:41 -0500 Subject: [PATCH] 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 --- pattern-library/sass/global/_settings.scss | 2 +- pattern-library/sass/patterns/_buttons.scss | 100 ++++++-------------- pldoc/_components/buttons.md | 14 +-- 3 files changed, 32 insertions(+), 84 deletions(-) diff --git a/pattern-library/sass/global/_settings.scss b/pattern-library/sass/global/_settings.scss index ef2e2077..105447ce 100644 --- a/pattern-library/sass/global/_settings.scss +++ b/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; diff --git a/pattern-library/sass/patterns/_buttons.scss b/pattern-library/sass/patterns/_buttons.scss index 9ea0d61a..01a92a9b 100644 --- a/pattern-library/sass/patterns/_buttons.scss +++ b/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; diff --git a/pldoc/_components/buttons.md b/pldoc/_components/buttons.md index 3dbd0948..da5e94aa 100644 --- a/pldoc/_components/buttons.md +++ b/pldoc/_components/buttons.md @@ -43,14 +43,6 @@ info: Buttons should be used for performing actions within the edX envi -

Elevated

-
- - - - -
-

Buttons with icons

-

Combo

@@ -102,10 +90,10 @@ info: Buttons should be used for performing actions within the edX envi View the UX Pattern Library View the UX Pattern Library View the UX Pattern Library - View the UX Pattern Library

Links without visual styling

+

Note: unread links use the primary color, while read/visited links use primary dark.