corvine74
8/14/2015 - 2:00 PM

_palette.txt

//  Set all base colors
    $colors: (
        red: #ff4136,
        blue: #0074d9,
        green: #2ecc40,
        yellow: #ffdc00,
        orange: #ff851b,
        purple: #85144b,
        gray: #aaaaaa,
        black: #000000,
        white: #ffffff
    );

//  Create shades of each color and return values as map
    @function color-map($color, $values) {
        $base:      $values;
        $b50: mix(white, $values, 50%);
        $b01: mix(white, $values, 40%);
        $b02: mix(white, $values, 30%);
        $b03: mix(white, $values, 20%);
        $b04: mix(white, $values, 10%);
        // $b05 skipped - same as base
        $b06: mix(black, $values, 10%);
        $b07: mix(black, $values, 20%);
        $b08: mix(black, $values, 30%);
        $b09: mix(black, $values, 40%);

        $color-shades: (
            #{$color}#{50}: $b50,
            #{$color}#{01}: $b01,
            #{$color}#{02}: $b02,
            #{$color}#{03}: $b03,
            #{$color}#{04}: $b04,
            #{$color}#{05}: $base,
            #{$color}#{06}: $b06,
            #{$color}#{07}: $b07,
            #{$color}#{08}: $b08,
            #{$color}#{09}: $b09
        );

        @return $color-shades;
    }

//  Set up master map for all colors
    @function color-maps($colors) {
        $color-map: ();

        @each $color, $value in $colors {
            $map: (color-map($color, $value));
            $color-map: map-merge($color-map, $map);
        }

        @return $color-map;
    }

//  Initiate maps function to build maps
    $color-map: color-maps($colors);

//  Create mixin to better call colors from map
    @function color($color, $shade) {
        @return map-get($color-map, #{$color}#{$shade});
    }


body {
  background-color: color(yellow, 50);
  color: white;
  font-size: 7em;
  text-align: center;
}
p {
  top: 50%;
  font-family: 'Calibri';
}