Color maps

[elseloop]

As we now have Sass maps at our disposal, we can convert our color variables to a map as well. I did this on a recent one-page project and found it faster and more intuitive/easier to reach for than the variables alone when used in combination with a color() function (even though it plays out to be one character longer than the variable alone). That last parenthetical is one reason I can see for this being argued against. Anyway:

• converts all color variables to a new $colors list
• updates documentation in variables/_color.scss
• adds a new color() function that acts as a shorthand for map-get($colors, {color})
• updates all usage of color variables in default codebase to use color()

(I already had the code worked out for that one-page project, so opening this for discussion with code attached, should it be a desired update.)

[ajmueller]

This looks great, Dan! Thoughts on adding an optional $colorMap parameter to the function? Something like this:

@function color($key, $colorMap: $colors) {
    @if map-has-key($colorMap, $key) {
        @return map-get($colorMap, $key);
    }

    @warn "The key value `#{$key}` is not set in your color map.";

    @return null;
}

This would then allow users to create new themes or color schemes and, say, call the function like this:

.widget-secondary {
    background-color: color(action, $otherThemeColors);
}

[ajmueller]

It would also be nice to have self-referencing colors, which can be achieved with some methods presented here starting at slide 48. Essentially I'd like for us to be able to reference colors by name, like:

$colors: (
    primary: #a81e23,
    secondary: #d1d2d4,
    greyLight: #eeeeee,
    greyMedium: #cccccc,
    greyDark: #6d6d6d,
    action: secondary
);

This can be done by making the color function recursive where it checks to see if the color's value found is another color name or an actual color string.

@function color($key) {
    // find the color by name
    @if map-has-key($colors, $key) {
        $color: map-get($colors, $key);

        // now check to see if the color is mapped to another color's name
        @if map-has-key($colors, $color) {
            $color: color($color);
        }
    }
    @else {
        @warn "The key value `#{$key}` is not set in $colors.";
    }

    @return $color;
}

I'll push commits for these and we can chat about it when you get in.