md-colors

Material Design's colors as SASS variables, extensions, or functions

![][dl-badge]

Install

npm install md-colors
# or
bower install md-colors

Usage

@import 'md-colors'
 
// declare variables
$primary   : md-color('blue', '300')
$secondary : md-color('red', 'a300')
 
// via Function
.eg--function
    color: md-color('deep-purple', '50')
    background-color: md-color('indigo') // '500' is default shade
    box-shadow: 0 1px 3px rgba(md-color('lime'), 0.2)
 
// via Extension
.eg--placeholder
    @extend %md-color-deep-purple-50
    @extend %md-bg-color-indigo-500
    // No built-in extension for 'box-shadow'. Use a function

Colors

All of md-color's colors are taken from the Material Design Color Palette.

All names and values are stringified (within functions) and lowercased. For example:

// function
color: md-color('light-blue', 'a100')
background-color: md-color('green', '600')
 
// extension/placeholder
@extend %md-color-lime-a200
@extend %md-bg-color-red-300

Importing

You have two options for easy importing:

• Attach node_modules or bower_components to the includePaths option of your SASS compiler
• Use a sass importer function, as described here or as exemplified here

Function

SASS functions can be anywhere as if they were normal variables or values.

The md-color function takes two parameters:

name

Type: string

The lowercased (and hypened) color name; eg: red, light-purple

shade

Type: string Default: 500

The shade or weight of the color; eg: 50, 300, a100

Extensions

By nature, extensions, or "placeholders", don't offer too much without inordinate amounts of complexity. So there are only two sets of built-in extensions for backgrounds and colors.

If you want a text-color extension, the format is:

%md-color-{ name }-{ shade }

If you want a background color extension, the format is:

%md-bg-color-{ name }-{ shade }

For example:

body
    @extend %md-color-deep-purple-50
    @extend %md-bg-color-indigo-500
 
.test
    position: relative
    @extend %md-color-deep-purple-50
    @extend %md-bg-color-indigo-500

Output:

body,
.test {
    color: #EDE7F6; }
body,
.test {
    background-color: #3F51B5; }
.test {
    position: relative; }

License

MIT © Luke Edwards