Make hover/focus/active states more noticeable for buttons

Description

Our buttons turn darker when they switch to hover or focus state, but this change is often too subtle and can go unnoticed. Take for example our green buttons:

Default state

Hover state

The difference is barely visible, so we need to increase the contrast. I've been working on a new palette based on the current one that uses the darken and lighten SCSS functions, and it makes the green button look like this:

Default state

Hover state

I'll update this issue shortly with the definitive color palette.

Final design

All buttons use colors that are derived from the light shade for each color. All of the secondary shades are generated with the darken function.

$color-normal: darken($color-light, 7%);
$color-dark: darken($color-light, 10%);

$border-color: darken($color, 5%);

The one exception is the white button, which keeps its border value at #e5e5e5, instead of the generated value #f2f2f2, which would have been too light.

The base values are:

$white-light: #ffffff;
$gray-light: #fafafa;
$blue-light: #2ea8e5;
$blue-medium-light: #3498cb;
$green-light: #3cbd70;
$orange-light: #fc8a51;
$red-light: #e52c5a;

Outline buttons now have a different color for their border and background when they are in the hover, focus or active states.

The active state for outline buttons now darkens the background and border colors, apart from adding a shadow.