{"_id":"sass-material-colors","_rev":"8-68a6ae25931dfcfd180e93938227714a","name":"sass-material-colors","description":"Google's Material Design colors for Sass/Scss","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.4":{"name":"sass-material-colors","version":"0.0.4","description":"Google's Material Design colors for Sass/Scss","author":{"name":"minusfive","email":"mail@minusfive.com"},"main":"sass/_sass-material-colors.scss","homepage":"https://github.com/minusfive/sass-material-colors","repository":{"type":"git","url":"https://github.com/minusfive/sass-material-colors.git"},"bugs":{"url":"https://github.com/minusfive/sass-material-colors/issues"},"keywords":["sass","scss","material","design","colors","palette","function","placeholders","extensions","classes"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"license":"MIT","gitHead":"7d14b8ea97fcba2de158243ede39daeeaac7ba7c","_id":"sass-material-colors@0.0.4","_shasum":"65d3b81cf2ea72f41e682d223426ef1475963584","_from":".","_npmVersion":"2.1.6","_nodeVersion":"0.10.33","_npmUser":{"name":"minusfive","email":"mail@minusfive.com"},"maintainers":[{"name":"minusfive","email":"mail@minusfive.com"}],"dist":{"shasum":"65d3b81cf2ea72f41e682d223426ef1475963584","tarball":"https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.4.tgz","integrity":"sha512-qrqTOrhrDmRTsHpLcbXIQCkfwQdH39975EBrqqC0vWj0KVj9PoUQgM6KFR4sWNyuyvndFVwuDgL7xrevTQBggw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOMtB0b2QcKoJd+pMwbGJb+1R9bUh40okCAVazmti67AiEAgfNt7dFePdexDEEzXmaMAmbfBAjIUGfH3k0XimAvQ2g="}]}},"0.0.5":{"name":"sass-material-colors","version":"0.0.5","description":"Google's Material Design colors for Sass/Scss","author":{"name":"minusfive","email":"mail@minusfive.com"},"main":"sass/_sass-material-colors.scss","homepage":"https://github.com/minusfive/sass-material-colors","repository":{"type":"git","url":"https://github.com/minusfive/sass-material-colors.git"},"bugs":{"url":"https://github.com/minusfive/sass-material-colors/issues"},"keywords":["sass","scss","material","design","colors","palette","function","placeholders","extensions","classes"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"license":"MIT","gitHead":"2dd376025266b3c81b53024c3e9ed53da9196bb6","_id":"sass-material-colors@0.0.5","_shasum":"b944539236c94e2d4ece35d2ee3fa22f10b2ed43","_from":".","_npmVersion":"2.1.6","_nodeVersion":"0.10.33","_npmUser":{"name":"minusfive","email":"mail@minusfive.com"},"maintainers":[{"name":"minusfive","email":"mail@minusfive.com"}],"dist":{"shasum":"b944539236c94e2d4ece35d2ee3fa22f10b2ed43","tarball":"https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.5.tgz","integrity":"sha512-WqBonSUkR5U9xs9adPVIymIdcT2Ku7PN0Q57yFfcLHj/E63wDqZ/Y5i/m9RmkRyr/jmR85g6ZIS053fyAR8G2A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiMAogxdxnIx6UwDkC5ps9Jg9FfLp5wbLoKBWKj/QWxAiB/60semNSk7U98d5VZJWOU3mZuVBX2d7OePC1jV/Ygng=="}]}}},"readme":"# Sass Material Colors [![Gem Version](https://badge.fury.io/rb/sass-material-colors.svg)](http://badge.fury.io/rb/sass-material-colors)\n\nAn easy way to use Google's [Material Design color palette](http://www.google.com/design/spec/style/color.html#color-color-palette) on your Sass project.\n\n## Installation\n\nSass Material Colors can be included as a [Ruby Gem](#ruby-gem), a [Bower component](#bower-component), or a [Node Packaged Module (npm)](#npm).\n\n### Ruby Gem\n\nAdd this line to your application's Gemfile:\n\n```bash\n$ gem 'sass-material-colors'\n```\n\nAnd then execute:\n\n```bash\n$ bundle\n```\n\nOr install it yourself as:\n\n```bash\n$ gem install sass-material-colors\n```\n\n### Bower Component\n\nInstall `sass-material-colors` as a development dependency:\n\n```bash\n$ bower install --save-dev sass-material-colors\n```\n\n### Node Packaged Module (npm)\n\nInstall `sass-material-colors` as a development dependency:\n\n```bash\n$ npm install --save-dev sass-material-colors\n```\n\n## Usage\n\nImport the colors map + function to your project:\n\n```sass\n// Sass\n@import 'sass-material-colors'\n```\n\nIf you're using Bower or npm, you may need to use the relative path to the main file, e.g.:\n\n```sass\n// Sass\n\n// Bower\n@import 'bower_components/sass-material-colors/sass/sass-material-colors'\n\n// npm\n@import 'node_modules/sass-material-colors/sass/sass-material-colors'\n```\n\nBy importing this file, a `$material-colors` [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) will be added to your Sass project, with all the colors from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette), as well as a [`material-color` function](#the-material-color-function), making it easy for you to reference any color in the spec from your stylesheets.\n\nOptionally, you can import a list of [placeholder selectors](#predefined-sass-placeholder-selectors) and/or [classes](#predefined-classes).\n\n### The `material-color` Function\n\nThe `material-color` function allows you to easily reference any color in the `_sass-material-colors-map.scss` file in your styles:\n\n```sass\n// Sass\n.my-cool-element\n  color: material-color('cyan', '400')\n  background: material-color('blue-grey', '600')\n```\n\nThe `material-color` function takes 2 parameters:\n\n##### `$color-name` String (quoted), Required\n> Lower-case, dasherized color name from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette) (e.g. `'pink'`, `'amber'`, `'blue-grey'`, `'deep-orange'`, etc.)  \n\n##### `$color-variant` String (quoted), Optional [Default value: `500`]\n> Lower-case color variant number/code from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette) (e.g. `'300'`, `'200'`, `'a100'`, `'a400'`, etc.)\n\nIt's important for these parameters to be quoted strings, in order to maintain compatibility with [Libsass](https://github.com/sass/libsass).\n\n### Predefined Sass Placeholder Selectors\n\nYou can include a list of [extendable](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) Sass [placeholder selectors](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) in your project by importing the `sass-material-colors-placeholders` [file](sass/_sass-material-colors-placeholders.scss) into your Sass/Scss:\n\n```sass\n// Sass\n@import 'sass-material-colors-placeholders'\n```\n\nThis will add a `%color-...` and `%bg-color-...` [placeholder selector](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) for each color name and variant found in Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette) to your project, which you can then extend in your stylesheets like so:\n\n```sass\n// Sass\n.my-cool-element\n  @extend %color-cyan-400\n  @extend %bg-color-blue-grey-600\n```\n\n### Predefined Classes\n\nYou can include a list of predefined classes in your project by importing the `sass-material-colors-classes` [file](sass/_sass-material-colors-classes.scss) into your Sass/Scss:\n\n```sass\n// Sass\n@import 'sass-material-colors-classes'\n```\n\nThis will add a `.color-...` and `.bg-color-...` class for each color name and variant found in Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette)  to your stylesheets, which you can then use directly in your markup like so:\n\n```html\n<!-- HTML -->\n<div class='my-cool-element color-cyan-400 bg-color-blue-grey-600'></div>\n```\n\n## TO-DO\n- [x] ~~Make it bower friendly~~\n- [x] ~~Make it npm friendly~~\n- [ ] Create ember-cli addon\n- [ ] Pre-compile `-placeholders` and `-classes` files\n- [ ] Separate color (text) and background classes\n- [ ] Add tests\n- [ ] Add changelog\n\n## Contributing\n\nSee [CONTRIBUTING](CONTRIBUTING.md).\n\n## License\n\nSee [LICENSE](LICENSE.md).\n\n## Special Thanks\n\nTo [nilskaspersson/Google-Material-UI-Color-Palette](https://github.com/nilskaspersson/Google-Material-UI-Color-Palette) for the inspiration on using a Sass map for the colors, and a map function to retrieve them.\n\nTo [twbs/bootstrap-sass](https://github.com/twbs/bootstrap-sass) as a reference for this gem.\n\nAnd to Google for their [Material Design spec](http://www.google.com/design/spec/material-design/introduction.html).\n","maintainers":[{"name":"minusfive","email":"mail@minusfive.com"}],"time":{"modified":"2022-06-26T16:04:48.455Z","created":"2014-12-02T06:28:59.752Z","0.0.4":"2014-12-02T06:28:59.752Z","0.0.5":"2014-12-02T08:23:07.167Z"},"homepage":"https://github.com/minusfive/sass-material-colors","keywords":["sass","scss","material","design","colors","palette","function","placeholders","extensions","classes"],"repository":{"type":"git","url":"https://github.com/minusfive/sass-material-colors.git"},"author":{"name":"minusfive","email":"mail@minusfive.com"},"bugs":{"url":"https://github.com/minusfive/sass-material-colors/issues"},"license":"MIT","readmeFilename":"README.md","users":{"elussich":true,"filipve":true}}