Colors to sasslist and plugable into helpers

[rob-bar]

Gives the ability to color every item on the website based on helper classes.

Colors example: scss/utils/variables/_colors.scss

// All color variables should be prefix with 'c-'!
$colors: (
  white: #FFF,
  black: #000,
  gray: #8E8E8E,
  error: #F0062C,
  success: #4DB51F,
  denim: #167FC9,
  scooter: #29B3C7,
  jellybean: #28808E,
  weborange: #F0A401,
  buttercup: #EFBC0B,
  tundora: #404040,
  alto: #DEDEDE,
  concrete: #F2F2F2
);

$text-color: map-get($colors, "tundora");

scss/utils/classes/_colors.scss

@each $name, $color in $colors {
  .bgc-#{$name} {
    background-color: $color;

    &.darken {
      background-color: darken($color, $default-lighten-ration);
    }

    &.lighten {
      background-color: lighten($color, $default-lighten-ration);
    }
  }

  .c-#{$name} {
    color: $color;

    &.darken {
      color: darken($color, $default-lighten-ration);
    }

    &.lighten {
      color: lighten($color, $default-lighten-ration);
    }
  }
}

Buttons example scss/utils/mixins/_buttons.scss

@mixin cta-button($font-size: 20, $text-color: mg($colors, white), $bgc: mg($colors, weborange), $padding: 13px 20px, $min-width: 225px) {
  @include typo(font-family-stack($source, mg($source-type, semibold), $source-stack-tail), $font-size, $font-size, $text-color);
  @include font-size-line-height($font-size * mg($breakpoint-ratios, tablet), strip-units(modular-scale(1, $font-size * mg($breakpoint-ratios, tablet))));
  text-decoration: none;
  padding: $padding;
  min-width: $min-width;
  max-width: 100%;
  background-color: $bgc;
  border-radius: $default-border-radius;
  display: inline-block;
  text-align: center;
  // margin: 0 0 #{modular-scale(-2, $font-size)}px 0;

  @include media (mg($breakpoints, tablet)) {
    @include font-size-line-height($font-size, strip-units(modular-scale(1, $font-size)));
  }

  &:hover,
  &:focus {
    background-color: lighten($bgc, $default-lighten-ration);
  }

  @each $name, $color in $colors {
    &.button-#{$name} {
      background-color: $color;

      &:hover,
      &:focus {
        background-color: lighten($color, $default-lighten-ration);
      }
    }
  }
}

@mixin primary-button($font-size: 20, $text-color: mg($colors, denim), $bgc: mg($colors, denim), $padding: 10px 20px, $min-width: 225px) {
  @include typo(font-family-stack($source, mg($source-type, semibold), $source-stack-tail), $font-size, $font-size, $text-color);
  @include font-size-line-height($font-size * mg($breakpoint-ratios, tablet), strip-units(modular-scale(1, $font-size * mg($breakpoint-ratios, tablet))));
  text-decoration: none;
  padding: $padding;
  min-width: $min-width;
  max-width: 100%;
  border-radius: $default-border-radius;
  display: inline-block;
  text-align: center;
  border: $default-border-width solid $bgc;
  // margin: 0 0 #{modular-scale(-2, $font-size)}px 0;

  @include media (mg($breakpoints, tablet)) {
    @include font-size-line-height($font-size, strip-units(modular-scale(1, $font-size)));
  }

  &:hover,
  &:focus {
    background-color: $bgc;
    color: mg($colors, white);
  }

  @each $name, $color in $colors {
    &.button-#{$name} {
      border: $default-border-width solid $color;
      color: $color;
      &:hover,
      &:focus {
        background-color: $color;
        color: mg($colors, white);
      }
    }
  }
}