Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/8lueberry/google-material-color
Google material color for SASS, LESS, Stylus, CSS, JS, etc
https://github.com/8lueberry/google-material-color
Last synced: about 2 months ago
JSON representation
Google material color for SASS, LESS, Stylus, CSS, JS, etc
- Host: GitHub
- URL: https://github.com/8lueberry/google-material-color
- Owner: 8lueberry
- License: mit
- Created: 2014-11-09T07:51:44.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-17T21:13:16.000Z (over 1 year ago)
- Last Synced: 2024-07-14T03:21:12.146Z (2 months ago)
- Language: CSS
- Homepage: https://github.com/danlevan/google-material-color
- Size: 596 KB
- Stars: 164
- Watchers: 9
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# google-material-color
[](http://badge.fury.io/gh/danlevan%2Fgoogle-material-color)
[](http://badge.fury.io/js/google-material-color) [](http://badge.fury.io/bo/google-material-color)
[Google material color](http://www.google.com/design/spec/style/color.html#color-color-palette) 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](http://www.google.com/design/spec/style/color.html#color-color-palette)).
See the [demo](http://danlevan.github.io/google-material-color/test/) generated by the tests.
## Installation
* Download the files you need from the [dist](dist) directory:
* Stylus: [palette.styl](http://danlevan.github.io/google-material-color/dist/palette.styl)
* Less: [palette.less](http://danlevan.github.io/google-material-color/dist/palette.less)
* Sass (SCSS) 3.3+: [palette.scss](http://danlevan.github.io/google-material-color/dist/palette.scss)
* CSS: [palette.css](http://danlevan.github.io/google-material-color/dist/palette.css)
* CSS variable: [palette.css](http://danlevan.github.io/google-material-color/dist/palette-var.css)
* JS: [palette.js](http://danlevan.github.io/google-material-color/dist/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](http://www.google.com/design/spec/style/color.html#color-color-palette).
**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
### Stylus
Import [palette.styl](http://danlevan.github.io/google-material-color/dist/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']`
### Sass (SCSS)
Import [palette.scss](http://danlevan.github.io/google-material-color/dist/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);`.
### Less
Import [palette.less](http://danlevan.github.io/google-material-color/dist/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`
### CSS
Include [palette.css](http://danlevan.github.io/google-material-color/dist/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
...
The background is Light Blue
The text is White
The text is Light Blue
```
### CSS variable
If you're using cssnext, this project also includes a variable files for css. Read more here [Custom properties](http://cssnext.io/features/#custom-properties-var).
Include [palette.css](http://danlevan.github.io/google-material-color/dist/palette-var.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);
...
```
### JS
You can import the [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) file in Node.js, and AMD module or the browser.
`example.html`
```javascript
...
document.getElementById('my-div')
.style['background-color'] = palette.get('Light Blue', '700');
.style['color'] = palette.getText('Light Blue', '700', 'Secondary');
```
## 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](CONTRIBUTING.md) doc
## Release History
See the [changelog](CHANGELOG.md)
## License
Licensed under [MIT](LICENSE).
Google material design [Terms](http://www.google.com/design/spec/style/color.html).
[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"