Automated SCSS Color Management

color-management.scss

/*
  defines base colors, all colors to use are described in this map.
  works pretty well with a color palette generator like http://coolors.co/
  
  palette in this example: https://coolors.co/def200-242038-315659-e3efeb-028090

  MAP ui-colors (
    [STRING] color-name: [HEX] hex-value
  )
 */
$ui-colors: (
 'chartreuse': #DEF200, // yellow-ish
 'raisin-black': #242038, // very dark blue
 'dark-slate-grey': #242038, // grey with a blue tint
 'isabelline': #E3EFEB, // white, almost
 'metallic-seaweed': #028090 // blue
);

/*
  returns ui-colors with optional shade/tint effects

  FUNCTION ui-color
    @arg $name [STRING]:null
      - name of the color in the ui-colors map
    @arg $transform [BOOLEAN|STRING]:false
      - takes 'tint' or 'shade'
    @arg $effect [PERCENTAGE]:20%
      - effect percentage of the shade/tint transform
    @returns [HEX|ERROR]

  @dependency: bourbon
    - needs Bourbon for the shade/tint effect
    - if not using bourbon, you can fall back to sass's darken/lighten
 */
@function ui-color($name, $transform: false, $effect: 20%) {
  @if map-has-key($ui-colors, $name) {
    @if $transform {
      @if $transform == "shade" {
        // shade the color with $effect
        @return shade(map-get($ui-colors, $name), $effect);
      }
      @else if $transform == "tint" {
        // tint the color with $effect
        @return tint(map-get($ui-colors, $name), $effect);
      }
      @else {
        // return a single color instead
        @return map-get($ui-colors, $name);
      }
    } @else {
      @return map-get($ui-colors, $name);
    }
  } @else {
    @error "`#{$name}` is not a mapped color!";
    @return null;
  }
}