Color Map

color-map.scss

/**************************************
 *         Colour Definitions         *
 **************************************/

$blue: #72b9df;
$blue-low: #4e5980;
$yellow: #f1d901;
$yellow-low: #e0c801;
$sand: #ebca88;
$purple: #7e4d87;
$green: #91be1f;
$green-low: #82af1f;
$peach: #eb986d;
$peach-low: #dd7a56;
$orange: #ce5332;
$white: #f5f5f5;
$real-white: #ffffff;
$grey: #5d5d5d;
$light-grey: #F5F5F5;
$black: #000000;

$color-map: (
        yellow: (
                primary-color: $yellow,
                contrasting-color: $white
        ),
        yellow-low: (
                primary-color: $yellow-low,
                contrasting-color: $white
        ),
        sand: (
                primary-color: $sand,
                contrasting-color: $blue-low
        ),
        grey: (
                primary-color: $grey,
                contrasting-color: $white
        ),
        white: (
                primary-color: $white,
                contrasting-color: $blue-low
        ),
        orange: (
                primary-color: $orange,
                contrasting-color: $white
        ),
        peach: (
                primary-color: $peach,
                contrasting-color: $white
        ),
        peach-low: (
                primary-color: $peach-low,
                contrasting-color: $white
        ),
        green: (
                primary-color: $green,
                contrasting-color: $white
        ),
        green-low: (
                primary-color: $green-low,
                contrasting-color: $white
        ),
        blue: (
                primary-color: $blue,
                contrasting-color: $white
        ),
        blue-low: (
                primary-color: $blue-low,
                contrasting-color: $white
        ),
        purple: (
                primary-color: $purple,
                contrasting-color: $white
        ),
        light-grey: (
                primary-color: $light-grey,
                contrasting-color: $black
        ),
        real-white: (
            primary-color: $real-white,
            contrasting-color: $purple
        )
);

/**
 * This takes a map and maps it to the color map, allowing you to create loads of styled blocks!
 */
@mixin colors($attributes, $specificColors: "") {

    $isApplicable: true;
    // Iterate through all of the colors
    @each $label, $map in $color-map {
        @if ($specificColors != "") {
            $isApplicable: false;
            @each $color in $specificColors {
                // If the color has been picked as a specific color, do it
                @if $color == $label {
                    $isApplicable: true;
                }
            }
        }

        @if ($isApplicable) {
            &--#{$label} {
                // Map the attributes to the color
                @each $label, $attribute in $attributes {
                    #{$label}: map_get($map, $attribute) !important;
                }
            }
        }

    }
}

/**************************************
 *              Footer                *
 **************************************/

$footerColours: map-get($color-map, light-grey);
$footer-background-color: map-get($footerColours, primary-color);