google-material-color

 

Google material color implementation for Sass, Less, Stylus, CSS and JS.

> This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
(http://www.google.com/design/spec/style/color.html).

See the demo generated by the tests.

Installation

* Download the files you need from the dist directory:
* Stylus: palette.styl
* Less: palette.less
* Sass (SCSS) 3.3+: palette.scss
* CSS: palette.css
* CSS variable: palette.css
* JS: palette.js supports (AMD, node, browser)
* NPM: $ npm install google-material-color --save
* Bower: $ bower install google-material-color --save
* Git: $ git clone git://github.com/danlevan/google-material-color.git

Colors

Details can be found on the google design specs website.

Colors
> Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey

Shades (note that not all color have all the shades)
> 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, A100, A200, A400, A700

Text Colors
> White, Black

Text Shades
> Primary, Secondary, Icons, Disabled, Hint, Dividers

Usage

$3

Import palette.styl.

Call the function palette('[color]', '[shade]').

> The shade is optional (500 is the default shade).

Call the function paletteText('[color]', '[shade]', '[textShade]').

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

example.styl

``stylus
@import 'palette'
...

.my-div
background-color palette('Light Blue', '700')
color paletteText('Red', '700', 'Secondary')

.my-default-div
background-color palette('Light Blue') // default shade is 500
color paletteText('Red') // default text shade is Primary
`

> If you need direct access to the variables, you can access it like $palette['Light Blue']['500'] and $palette[$paletteText['Light Blue']['500']]['Primary']

$3

Import palette.scss.

Call the function palette([color], [shade]).

> The shade is optional (500 is the default shade).

Call the function paletteText([color], [shade], [textShade]).

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

example.scss

`scss
@import 'palette';
...

.my-div {
background-color: palette(Light Blue, 700);
color: paletteText(Light Blue, 700, Secondary);
}

.my-default-div {
background-color: palette(Red); // default shade is 500
color: paletteText(Light Blue); // default text shade is Primary
}
`

> If you need direct access to the variables, you can access it through a map like $colorMap: map-get($palette, Light Blue); $color: map-get($colorMap, 700); and $colorMap: map-get($paletteText, Light Blue); $textColor: map-get($colorMap, 700); $colorMap: map-get($palette, $textColor); $color: map-get($colorMap, Secondary);.

$3

Import palette.less.

Call the mixin .palette([color], [shade]).

> The shade is optional (500 is the default shade).

Call the mixin .palette-text([color], [shade], [textShade]).

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

example.scss

`less
@import 'palette';
...

.my-div {
.palette('Light Blue', '700');
background-color: @palette;

// get @palette in its own scope otherwise @palette will be overwritten
&{
.palette('Red'); // default shade is 500
color: @palette;
}
}

`

If you need access to the variables, you can access it through variable like @palette-Light-Blue-500 and @colorVar: %('palette-%s-Secondary', @palette-text-Light-Blue-500); @color: @@colorVar




$3

Include palette.css in your html. The CSS class follows the pattern palette-[color]-[shade]-[textShade], (spaces replaced by -).

The CSS provides colors for the background and text

* background-color: by adding the bg class to the element
* color: will be White or Black if adding the bg class to the element; will be the color setted if adding the text class (does not support textShade) to the element

example.html

`html

...


`

$3

If you're using cssnext, this project also includes a variable files for css. Read more here Custom properties.

Include palette.css in your html.
`css
:root {
--palette-Red-50: #FFEBEE
--palette-Red-100: #FFCDD2
--palette-Red-200: #EF9A9A
...
--palette-Red-Primary: #ffffff;
--palette-Red-Secondary: rgba(255,255,255,0.7);
...
--palette-Red-50-Primary: #ffffff;
--palette-Red-50-Secondary: rgba(255,255,255,0.7);
...
`

$3

You can import the palette.js file in Node.js, and AMD module or the browser.

example.html

`javascript

...


``

Issues

Search or open new issues [here][issues].

If you would like to suggest improvements or other libraries, you can also open an issue.

Contributing

See the contributing doc

Release History

See the changelog

License

Licensed under MIT.

Google material design Terms.

[issues]: https://github.com/danlevan/google-material-color/issues "GitHub Issues for Less.js"
[download]: https://github.com/less/less.js/zipball/master "Download Less.js"