Automatically lighten or darken button on hover given background lightness value.

SASS Button with Hover State

.button{
  @extend %backgroundTransition;
  padding: 8px 20px;
  text-transform: uppercase;
  cursor: pointer;
  height: auto;
}


.button-primary{
  @extend .button;
  background: $buttonPrimaryColor;
  border: 1px solid darken($buttonPrimaryColor, 10%);
  color: $buttonPrimaryTextColor;

  &:hover, &:focus{
    @if lightness($buttonPrimaryColor) < 50 {
      background: scale-color($buttonPrimaryColor, $lightness: 20%);
    }
    @else{
      background: scale-color($buttonPrimaryColor, $lightness: -20%);

    }
  }
}