First version

.gitignore

@@ -0,0 +1,22 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

CONTRIBUTING.md

@@ -0,0 +1,7 @@
+# Contributing to Sass Material Colors
+
+1. Fork it ( https://github.com/minusfive/sass-material-colors/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in sass-material-colors.gemspec
+gemspec

LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 minusfive
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,106 @@
+# Sass Material Colors
+
+This gem makes it easy to use Google's [Material Design color palette](http://www.google.com/design/spec/style/color.html#color-color-palette) on your project.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```bash
+$ gem 'sass-material-colors'
+```
+
+And then execute:
+
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+
+```bash
+$ gem install sass-material-colors
+```
+
+## Usage
+
+Import the colors map + function to your project:
+
+```sass
+// Sass
+@import 'sass-material-colors'
+```
+
+This will automatically import a `$material-colors` [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) containing all the color names and values found in Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette), and the handy [`material-color` function](#the-material-color-function), which allows you to easily reference any color in the `$material-colors` map from your Sass or Scss stylesheets.
+
+Optionally, you can import a list of predefined [placeholder selectors](#predefined-sass-placeholder-selectors) and/or [classes](#predefined-classes) to your stylesheets.
+
+### The `material-color` Function
+
+The `material-color` function allows you to easily reference any color in the `_sass-material-colors-map.scss` file in your styles:
+
+```sass
+// Sass
+.my-cool-element
+  color: material-color(cyan, 400)
+  background: material-color(blue-grey, 600)
+```
+
+The `material-color` function takes 2 arguments:
+
+- `$color-name` **(Required)**: 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.)
+- `$color-variant` _(optional)_ [Default value: `500`]: 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.)
+
+### Predefined Sass Placeholder Selectors
+
+You 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:
+
+```sass
+// Sass
+@import `sass-material-colors-placeholders`
+```
+
+This 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:
+
+```sass
+// Sass
+.my-cool-element
+  @extend %color-cyan-400
+  @extend %bg-color-blue-grey-600
+```
+
+### Predefined Classes
+
+You 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:
+
+```sass
+// Sass
+@import `sass-material-colors-classes`
+```
+
+This 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:
+
+```html
+<!-- HTML -->
+<div class='my-cool-element color-cyan-400 bg-color-blue-grey-600'></div>
+```
+
+## TO-DO
+- [ ] Add tests
+- [ ] Make it bower friendly
+
+## Contributing
+
+See [CONTRIBUTING](CONTRIBUTING.md).
+
+## License
+
+See [LICENSE](LICENSE.md).
+
+## Special Thanks
+
+To [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.
+
+To [twbs/bootstrap-sass](https://github.com/twbs/bootstrap-sass) as a reference for this gem.
+
+And to Google for their [Material Design spec](http://www.google.com/design/spec/material-design/introduction.html).

Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

lib/sass-material-colors.rb

@@ -0,0 +1,29 @@
+require "sass-material-colors/version"
+
+module SassMaterialColors
+  class << self
+    # Inspired by Bootstrap Sass, inspired in turn by Kaminari
+    def load!
+      configure_sass
+    end
+
+    # Paths
+    def gem_path
+      @gem_path ||= File.expand_path '..', File.dirname(__FILE__)
+    end
+
+    def sass_path
+      File.join gem_path, 'sass'
+    end
+
+    private
+
+    def configure_sass
+      require 'sass'
+
+      ::Sass.load_paths << sass_path
+    end
+  end
+end
+
+::SassMaterialColors.load!

lib/sass-material-colors/version.rb

@@ -0,0 +1,3 @@
+module SassMaterialColors
+  VERSION = "0.0.1"
+end

sass-material-colors.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'sass-material-colors/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "sass-material-colors"
+  spec.version       = SassMaterialColors::VERSION
+  spec.authors       = ["minusfive"]
+  spec.email         = ["[email protected]"]
+  spec.summary       = %q{Google's Material Design colors for Sass/Scss}
+  spec.description   = %q{An easy way to use Google's Material Design colors in your Sass/Scss project}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.4"
+end

sass/_sass-material-colors-classes.scss

@@ -0,0 +1,12 @@
+@import 'sass-material-colors-map';
+
+@each $color-name, $color-variants in $material-colors {
+  @each $color-variant, $hex-value in $color-variants {
+      .color-#{"" + $color-name}-#{$color-variant} {
+        color: #{$hex-value}
+      }
+      .bg-color-#{"" + $color-name}-#{$color-variant} {
+        background-color: #{$hex-value}
+      }
+  }
+}

sass/_sass-material-colors-function.scss

@@ -0,0 +1,5 @@
+@import 'sass-material-colors-map';
+// Inspired by https://github.com/nilskaspersson/Google-Material-UI-Color-Palette/
+@function material-color($color-name, $color-variant: 500) {
+  @return map-get(map-get($material-colors, $color-name), $color-variant)
+}