Gradients mixin

_gradients.scss

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

// ! Work in progress, do not import
// * SCSS because fuck sASS

// ! Need to have colors in map for gradient function testing
$states: (
  primary: white, 
  secondary: #333333, 
  info: #eaeff3, 
  success: #3ecf5e, 
  warning: #f1950f, 
  error: #e74c3c
);
$enable-gradients: true;


// Gets color from map, default to first value if key is null
@function get_map_color($col-map, $col-map-key) {
  @if $col-map-key == null {
    @return map_get($col-map, nth( map_keys($col-map) , 1));
  }
  @return map_get($col-map, $col-map-key); 
}

// TODO Build function to check for darkness/lightness of colors. WIP
// Tweak a color slightly for use as a secondary color

@function color_tweak($color, $tweak-intesity: 5) {
  @if type_of($color) == 'color' {
    @if lightness($color) <= 49 {
      @return lighten($color, lightness($color) / $tweak-intesity) // TODO improve this math and test different colors
    }
    @else {
      @return darken($color, lightness($color) / $tweak-intesity)
    }
  }
  @else { @error 'color_tweak, requires a color' }
}

@mixin gradient-background(
    $map,               // Specify color map or color
    $map-key: null,     // Map key or secondary color
    $darken: 10%,       // Amount to darken color/secondary color
    $saturate: 2%,      // Amount to saturate
    $tilt: 15deg,       // Direction for gradient
    $hover: false       // Set to true for hover effect
  ) {
  // Fallback if gradients are disabled
  @if $enable-gradients == false {
    $color: get_map_color($map, $map-key);

     // * Outputted styling   
    background: $color;
    @if $hover {
      &:hover {
        background: darken($color, $darken);
      }
    }
  }
  // Handling gradients from map
  @else if type_of($map) == 'map' {
    $color: get_map_color($map, $map-key); 
  
    // * Outputted styling
    background: linear-gradient($tilt, $color, saturate(darken($color, $darken), $saturate));
    @if $hover {
      &:hover {
        background: linear-gradient($tilt - 10, $color, saturate(darken($color, $darken), $saturate));
      }
    }
  }
  
  // Handling gradients specified directly 
  @else if type_of($map) == 'color' {
    $primary-color: $map;
    
    // Setting default secondary color then checking for a secondary color and using that value 
    $secondary-color: $map;
    @if type_of($map-key) == 'color' {
      $secondary-color: $map-key;
      // TODO Fix a better way to set $darken and $saturate to default value and more dynamically. WIP color_tweak()
      $darken: 0;
      $saturate: 0;
    }
    
    // * Outputted styling
    background: linear-gradient($tilt, $primary-color, saturate(darken($secondary-color, $darken), $saturate));
    @if $hover {
      &:hover {
        background: linear-gradient($tilt - 10, $primary-color, saturate(darken($secondary-color, $darken), $saturate));
      }
    }
  }
  // TODO Improve error messsage, update with current usage
  @else {
    @error "Make sure to use either a map & key OR 2 colors, e.g. `+gradient-background($map, key || #fff, #333)`";
  }
}

.example {
  @include gradient-background($states);
  color: color_tweak(#eee);
}
.btn {
  @each $name, $value in $states {
    .#{$name} {
      @include gradient-background($states, $name, $hover: true);
    }
  }
}

output.css

.example {
  background: linear-gradient(15deg, white, #e6e5e5);
  color: #bebebe;
}

.btn .primary {
  background: linear-gradient(15deg, white, #e6e5e5);
}
.btn .primary:hover {
  background: linear-gradient(5deg, white, #e6e5e5);
}
.btn .secondary {
  background: linear-gradient(15deg, #333333, #1a1919);
}
.btn .secondary:hover {
  background: linear-gradient(5deg, #333333, #1a1919);
}
.btn .info {
  background: linear-gradient(15deg, #eaeff3, #c9d6e1);
}
.btn .info:hover {
  background: linear-gradient(5deg, #eaeff3, #c9d6e1);
}
.btn .success {
  background: linear-gradient(15deg, #3ecf5e, #29b147);
}
.btn .success:hover {
  background: linear-gradient(5deg, #3ecf5e, #29b147);
}
.btn .warning {
  background: linear-gradient(15deg, #f1950f, #c47809);
}
.btn .warning:hover {
  background: linear-gradient(5deg, #f1950f, #c47809);
}
.btn .error {
  background: linear-gradient(15deg, #e74c3c, #d82a18);
}
.btn .error:hover {
  background: linear-gradient(5deg, #e74c3c, #d82a18);
}

undefined

.example {
  background: linear-gradient(15deg, white, #e6e5e5);
  color: #bebebe;
}

.btn .primary {
  background: linear-gradient(15deg, white, #e6e5e5);
}
.btn .primary:hover {
  background: linear-gradient(5deg, white, #e6e5e5);
}
.btn .secondary {
  background: linear-gradient(15deg, #333333, #1a1919);
}
.btn .secondary:hover {
  background: linear-gradient(5deg, #333333, #1a1919);
}
.btn .info {
  background: linear-gradient(15deg, #eaeff3, #c9d6e1);
}
.btn .info:hover {
  background: linear-gradient(5deg, #eaeff3, #c9d6e1);
}
.btn .success {
  background: linear-gradient(15deg, #3ecf5e, #29b147);
}
.btn .success:hover {
  background: linear-gradient(5deg, #3ecf5e, #29b147);
}
.btn .warning {
  background: linear-gradient(15deg, #f1950f, #c47809);
}
.btn .warning:hover {
  background: linear-gradient(5deg, #f1950f, #c47809);
}
.btn .error {
  background: linear-gradient(15deg, #e74c3c, #d82a18);
}
.btn .error:hover {
  background: linear-gradient(5deg, #e74c3c, #d82a18);
}