Files

• _color-palette.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/color-palette

Module Overview

This module is where all the colors and palettes for your project are stored. All colors are stored as Sass maps and are accessible via the global $palettes variable.

Default Values

'greyscale': (
    'white'       : #ffffff,
    'grey-1'      : #f8f8f8,
    'grey-2'      : #dee0e2,
    'grey-3'      : #bfc1c3,
    'grey-4'      : #6f777b,
    'grey-5'      : #232627,
    'grey-6'      : #161819,
    'black'       : #000000
),
'brand': (
    'primary'     : #1795C5,
    'secondary'   : #1CBB9B,
    'brand-3'     : #bb1c4d
),
'alert': (
    'error'       : #FECCCB,
    'help'        : #FDEAAD,
    'info'        : #BFE3F9,
    'success'     : #DEE3AB
),
'validation': (
    'valid'       : #00B16A,
    'invalid'     : #D91E18	
),
'social' : (
    'facebook'    : #507CBD,
    'twitter'     : #63CEF2,
    'linkedin'    : #117BB8,
    'github'      : #1C1C1C,
    'skype'       : #63CEF2,
    'pinterest'   : #C92228,
    'instagram'   : #5280A5,
    'rss'         : #FBA933,
    'youtube'     : #CB312E,
    'flickr'      : #ED1384,
    'vimeo'       : #1EB8EB,
    'dribbble'    : #EB4C89,
    'behance'     : #0595FC,
    'deviantart'  : #B3C434,
    'reddit'      : #0D7CCD,
    'google-plus' : #dd4b39,
    'email'       : #6cb42c,
    'stumbleupon' : #47AD20
)

Modifying Existing Palettes

If you want to modify any of the existing colors or palettes, pass your new value(s) to the palettes() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include palettes((
    'brand': (
        'primary'     : #3A99D8,
        'secondary'   : #39CB74
    ),
    'new-palette' : (
        'new-color-1' : red,
        'new-color-2' : #F0C330
    )
));

The $palettes variable would now output the following palettes and values:

'greyscale': (
    'white'       : #ffffff,
    'grey-1'      : #f8f8f8,
    'grey-2'      : #dee0e2,
    'grey-3'      : #bfc1c3,
    'grey-4'      : #6f777b,
    'grey-5'      : #232627,
    'grey-6'      : #161819,
    'black'       : #000000
),
'brand': (
    'primary'     : #3A99D8,
    'secondary'   : #39CB74,
    'brand-3'     : #bb1c4d
),
'alert': (
    'error'       : #FECCCB,
    'help'        : #FDEAAD,
    'info'        : #BFE3F9,
    'success'     : #DEE3AB
),
'validation': (
    'valid'       : #00B16A,
    'invalid'     : #D91E18	
),
'social' : (
    'facebook'    : #507CBD,
    'twitter'     : #63CEF2,
    'linkedin'    : #117BB8,
    'github'      : #1C1C1C,
    'skype'       : #63CEF2,
    'pinterest'   : #C92228,
    'instagram'   : #5280A5,
    'rss'         : #FBA933,
    'youtube'     : #CB312E,
    'flickr'      : #ED1384,
    'vimeo'       : #1EB8EB,
    'dribbble'    : #EB4C89,
    'behance'     : #0595FC,
    'deviantart'  : #B3C434,
    'reddit'      : #0D7CCD,
    'google-plus' : #dd4b39,
    'email'       : #6cb42c,
    'stumbleupon' : #47AD20
),
'new-palette' : (
    'new-color-1' : red,
    'new-color-2' : #F0C330
)

Custom Functions

You can access any color or palette by using the following custom functions:

palette()

@each $brand, $color in palette('brand') {
    ...
}

color()

.foo {
    color: color('brand', 'primary');
}