_settings.colors.scss

//
//  Settings: Colors
//  ---
//  The palette function works with a base color and a tint.
//

// Palette function > eg. palette(color-alpha,base)
@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}

// Base colors
$color-neutral              : #aaa !default;

$color-alpha                : #0074D9 !default;
$color-beta                 : #2ECC40 !default;

$color-error                : #FF4136 !default;
$color-success              : #2ECC40 !default;
$color-notice               : #FF851B !default;

// Palettes
$palettes: (
    color-neutral: (
        x-light             : hsl(hue($color-neutral),0,100),
        light               : hsl(hue($color-neutral),0,90),
        base                : $color-neutral,
        dark                : hsl(hue($color-neutral),0,30),
        x-dark              : hsl(hue($color-neutral),0,10)
    ),
    color-alpha: (
        light               : hsl(hue($color-alpha),70,60),
        base                : $color-alpha,
        dark                : hsl(hue($color-alpha),100,25),
        x-dark              : hsl(hue($color-alpha),100,15)
    ),
    color-beta: (
        light               : hsl(hue($color-beta),70,60),
        base                : $color-beta,
        dark                : hsl(hue($color-beta),100,25),
        x-dark              : hsl(hue($color-beta),100,15)
    ),
    color-error: (
        light               : hsl(hue($color-error),70,60),
        base                : $color-error,
        dark                : hsl(hue($color-error),100,35),
    ),
    color-success: (
        light               : hsl(hue($color-success),70,60),
        base                : $color-success,
        dark                : hsl(hue($color-success),100,35),
    ),
    color-notice: (
        light               : hsl(hue($color-notice),70,60),
        base                : $color-notice,
        dark                : hsl(hue($color-notice),100,35),
    )
) !default;