Merge pull request #27 from IBM-Design/v2.0

V2.0

.gitignore

@@ -16,9 +16,6 @@ coverage
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
-# Build outputs
-dist
-
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 

LICENSE.md

@@ -1,3 +1,3 @@
 Copyright (c) 2014-2015 IBM
 
-Use of this code is governed by the [IBM Download of Content Agreement](http://www.ibm.com/design/language/legal/download-agreement.shtml) as if the content had been downloaded from [its original source in the IBM Design Language](http://www.ibm.com/design/language/resources.shtml).
+Use of this code is governed by the [IBM Download of Content Agreement](http://www.ibm.com/design/language/legal/download-agreement/) as if the content had been downloaded from [its original source in the IBM Design Language](http://www.ibm.com/design/language/resources/).

README.md

@@ -1,45 +1,80 @@
 IBM Design Language Color Palette
 ===================================
 
-Use the [Color Palettes](http://www.ibm.com/design/language/resources/swatch-book.shtml) from the [IBM Design Language](http://www.ibm.com/design/language/index.shtml) based on its  [Color Guidelines](http://www.ibm.com/design/language/framework/visual/color.shtml) in your Sass project.
+The resource for [IBM Design Language](https://www.ibm.com/design/language/)'s [color library](https://www.ibm.com/design/language/resources/color-library/) in .ase, .clr, .json, .scss, and .sketchpallete extensions. Read our [Color Guidelines](https://www.ibm.com/design/language/framework/visual/color/) to learn how to best use these colors.
 
-## Installation
+## To Use
 
-The IBM Design Language Color Palette can be installed via [Bower](http://bower.io/) or [npm](https://www.npmjs.com/). It will work with any Sass compiler compatible with Sass 3.3 or greater.
+### For Apps
 
-Bower
-```bash
-$ bower install ibm-colors --save-dev
-```
+*To maintain color accuracy across applications, we recommend setting your computer's display color profile to sRGB. You can change this under system preferences/display/color.*
+
+#### Adobe Illustrator
+
+1. Download [ibm-colors.ase](https://github.com/IBM-Design/colors/raw/v2.0/ibm-colors.ase) file and open Adobe Illustrator
+2. Select Window, then Swatches
+3. In the Swatches Window, select the Swatches Library Menu
+4. Select Other Libraries and then find the ibm-colors.ase file
+
+#### Keynote
+
+1. Download [ibm-colors.clr](https://github.com/IBM-Design/colors/raw/v2.0/ibm-colors.clr) file and open Keynote
+2. Select the color wheel icon next to any color picker
+3. In the Colors Window, select the Color Palettes Tab
+4. Select the cog icon, then "Open" and find the ibm-colors.clr file
+
+#### Sketch
+There are two options for Sketch. One option uses the Colors Window for quick selection. The other option requires the Sketch Palettes Plugin, but allows you to quickly import the palette as global or document colors.
+
+Colors Window Option
+
+1. Download [ibm-colors.clr](https://github.com/IBM-Design/colors/raw/v2.0/ibm-colors.clr) file and open Sketch
+2. Select View, then Show Colors
+3. In the Colors Window, select the Color Palettes Tab
+4. Select the cog icon, then "Open" and find the ibm-colors.clr file
+
+Global/Document Colors Option
+
+1. Install the [Sketch Palettes Plugin](https://github.com/andrewfiorillo/sketch-palettes) by following their instructions
+2. Download [ibm-colors.sketchpalette](https://github.com/IBM-Design/colors/raw/v2.0/ibm-colors.sketchpalette) file and open Sketch
+2. Select Plugins, then Sketch Palettes,
+3. Decide if you want to add the palette to Global Colors or Document Colors
+4. Select Load Palette, then find the ibm-colors.sketchpalette file
+
+### For Development
+
+#### Installation
+The IBM Design Language Color Library can be installed via [npm](https://www.npmjs.com/).
 
 npm
 ```bash
-$ npm install ibm-design-colors --save-dev
+$ npm install ibm-design-colors --save
 ```
+#### Use
 
-Then import `ibm-colors`.
+There are ten variations of blue, aqua, teal, green, yellow, orange, red, magenta, purple, indigo, gray, cool gray, and warm gray that range from 10 to 100.
 
-```scss
-@import 'path/to/bower_components/ibm-colors/dist/ibm-colors';
-```
+Neutral white, cool white, and warm white have four variations from 10 to 40.
+
+For contrast accessibility, we recommend that you never apply a text of one color variation that is 50 points within any other color. Example: You should not use a text that is Neutral White 20 on a blue background lighter than Blue 70.
 
-## Usage
+#### Sass
 
-With the color palette imported you will now have access to two functions:
+The .scss file will work with any Sass compiler compatible with Sass 3.3 or greater.
 
-### Color Palette
+##### Color Palette
 
 Returns the specified color from the specified color palette
 
-#### `color($palette, [$tone: 'core'], $alpha)`
+###### `color($palette, [$grade: 'core'], $alpha)`
 
 ```scss
 //////////////////////////////////////////////////
 //  ------------------------------------------  //
 // | Options       | Type          | Required | //
 // |---------------|---------------|----------| //
 // | Color Palette | String        | Yes      | //
-// | Color Tone    | String/Number | Optional | //
+// | Color grade    | String/Number | Optional | //
 // | Color Alpha   | Number        | Optional | //
 //  ------------------------------------------  //
 //////////////////////////////////////////////////
@@ -54,11 +89,11 @@ background: color('blue', $alpha: 0.5);     // rgba(65, 120, 190, 0.5)
 
 ```
 
-### Color Tint
+##### Color Tint
 
 Returns a color the specified amount of steps lighter than the given color in the given color's color palette
 
-#### `color-tint($color, $amount)`
+###### `color-tint($color, $amount)`
 
 ```scss
 //////////////////////////////////////////////////
@@ -77,11 +112,11 @@ background: color-tint(color('blue', 80), 25);     // #4178be
 background: color-tint(color('blue', 80), 100);    // #c0e6ff
 ```
 
-### Color Shade
+##### Color Shade
 
 Returns a color the specified amount of steps darker than the given color in the given color's color palette
 
-#### `color-shade($color, $amount)`
+###### `color-shade($color, $amount)`
 
 ```scss
 //////////////////////////////////////////////////
@@ -100,11 +135,11 @@ background: color-shade(color('blue', 30), 25);     // #325c80
 background: color-shade(color('blue', 30), 100);    // #010205
 ```
 
-### Get Colors
+##### Get Colors
 
 Returns the list of available color palettes if no parameter is passed in, all palettes and all of their colors if `'all'` is passed in, and all colors of a given palette if one is specified.
 
-#### `get-colors([$palette])`
+###### `get-colors([$palette])`
 
 ```scss
 ///////////////////////////////////////////
@@ -131,18 +166,43 @@ $full-color-map: get-colors('all');
 }
 
 // Generate a class for each color of a color palette
-@each $tone, $color in $all-blues {
-  .blue--tone-#{$tone} {
+@each $grade, $color in $all-blues {
+  .blue--grade-#{$grade} {
     background: $color;
   }
 }
 
 // Generate a class for each color of each color palette
 @each $palette-name, $palette in $full-color-map {
-  @each $tone, $color in $palette {
-    .#{$palette-name}--tone-#{$tone} {
+  @each $grade, $color in $palette {
+    .#{$palette-name}--grade-#{$grade} {
       background: $color;
     }
   }
 }
 ```
+
+## To Contribute
+
+### Setup
+
+Setup the environment with [git](https://git-scm.com/) and [node](https://nodejs.org/en/) already installed. Then:
+
+```bash
+git clone https://github.com/IBM-Design/colors.git
+cd colors
+npm install
+```
+
+### Suggest color change
+
+You can either [submit an issue](https://github.com/IBM-Design/colors/issues/new) or submit the pull request of changed code yourself:
+
+1. Edit `./source/colors.js`
+2. In the terminal, run `gulp`.
+
+All files will build into the root folder.
+
+### Add file type
+
+Our goal is to have a single source of truth that all other files build from. This is `./source/colors.js`. We love supporting different file types to cater to a variety of use cases. If you can add support to a new file type, please have it build from the source file when the `gulp` command is ran.