chore(docs): document pui-css-variables-and-mixins

-Add warning to whitespace
-Include use instructions for color docs

[#106560570]

Signed-off-by: August Toman-Yih <atomanyih@pivotal.io>

styleguide/docs/css/colors.scss

@@ -29,14 +29,32 @@ colors rather than adding new ones.
     it very hard to change the values later if you can't tell how they might have been used.
     You should <strong>define your own variables</strong> that use these colors in variables.css.scss.
   </p>
+
+  <p>
+    If you do want to use variables and mixins, install this module:
+
+  </p>
+
+  <code>
+    <i class="fa fa-download" alt="Install the Component">
+     npm install pui-css-variables-and-mixins
+    </i>
+  </code>
 </div>
 
+
+
 This example shows proper use of Sass variables.
 
 ```
 $tabs-active-bg-color: $gray-2;
 ```
 
+To use the color classes:
+
+Prepend any color variable with 'bg-' to apply that color to the background
+Prepend any color variable with 'type-' to apply that color to the text
+
 <div class="color-chip-row">
 
     <div class="chip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">

styleguide/docs/css/whitespace.scss

@@ -14,6 +14,27 @@ npm install pui-css-whitespace --save
 </i>
 </code>
 
+<div class="alert alert-warning alert-dismissable">
+  <h5 class="em-high mtn">
+    Sass variables should only be used in variables.css.scss.
+  </h5>
+  <p>
+    They should never be used directly when building components, because it makes
+    it very hard to change the values later if you can't tell how they might have been used.
+    You should <strong>define your own variables</strong> that use these values in variables.css.scss.
+  </p>
+
+  <p>
+    If you do want to use variables and mixins, install this module:
+  </p>
+
+  <code>
+    <i class="fa fa-download" alt="Install the Component">
+     npm install pui-css-variables-and-mixins
+    </i>
+  </code>
+</div>
+
 */
 /*doc
 ---