fix(colors): changes colors to be more web accessible

Paired with Justin Roozeboom.
Also adds each color to typography colors

[Finishes #100796564 #100240814]

BREAKING CHANGE: (sass variables, type modifiers, background modifiers) 2.0 conversion table,dark,dark-3 is now dark-4,dark-2 is now dark-3,dark-1 is now dark-2,brand,brand-3 is now brand-8,brand-1 is now brand-3,brand-5 is now brand-10,brand-2 is now brand-5,brand-4 has changed, there is no equivalent color in 2.0 and will now be brand-9 to have a more appropriate place within the brightness scale,accent,accent-5 is now accent-6,accent-4 has changed, there is no equivalent color in 2.0 and will now be accent-5 to have a more appropriate place within the brightness scale,accent-3 is now accent-4,accent-2 is now accent-3,accent-1 is now accent-2,error,error-4 is now error-6,error-3 is now error-4,error-2 is now error-3,error-1 is now error-2,warn,warn-3 is now warn-6,warn-2 is now warn-3,success,success-2 is now success-6

spec/pivotal-ui-react/pane/pane_spec.js

@@ -21,12 +21,12 @@ describe('BasePane', function() {
   describe('when inner and outer attributes are provided', function() {
     beforeEach(function() {
       React.unmountComponentAtNode(root);
-      React.render(<BasePane className="bg-dark-1 more-outer" innerClassName="bg-glow"
+      React.render(<BasePane className="bg-dark-2 more-outer" innerClassName="bg-glow"
         id="outer-id" style={{opacity: '0.5'}}/>, root);
     });
 
     it('add classes, id, and styles to the pane and container', function() {
-      expect('.pane').toHaveClass('bg-dark-1');
+      expect('.pane').toHaveClass('bg-dark-2');
       expect('.container').toHaveClass('bg-glow');
       expect('.pane').toHaveAttr('id', 'outer-id');
       expect('.pane').toHaveCss({opacity: '0.5'});

src/pivotal-ui-react/notifications/notifications.js

@@ -22,7 +22,7 @@ var {mergeProps} = require('pui-react-helpers');
  *       <Notifications>
  *         <NotificationItem href="http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif">
  *           <Flag leftImage={<DefaultH3><Label>New</Label></DefaultH3>}>
- *             <DefaultH5 className="media-heading mbn type-dark-1">Notification</DefaultH5>
+ *             <DefaultH5 className="media-heading mbn type-dark-2">Notification</DefaultH5>
  *             <p className="type-sm type-neutral-5 mvn">Click for Cute Gif</p>
  *           </Flag>
  *         </NotificationItem>
@@ -77,8 +77,8 @@ var Notifications = React.createClass({
  *     return (
  *       <AlertNotifications>
  *         <NotificationItem href="http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif">
- *           <Flag leftImage={<Icon name="exclamation-triangle" className="h4 type-warn-2 mrm"/>}>
- *             <DefaultH5 className="media-heading mbn type-dark-1">Warning</DefaultH5>
+ *           <Flag leftImage={<Icon name="exclamation-triangle" className="h4 type-warn-3 mrm"/>}>
+ *             <DefaultH5 className="media-heading mbn type-dark-2">Warning</DefaultH5>
  *             <p className="type-sm type-neutral-5 mvn">Click for Cute Gif</p>
  *           </Flag>
  *         </NotificationItem>

src/pivotal-ui-react/typography/typography.js

@@ -116,7 +116,7 @@ var DefaultH6 = defHeader({element: 'h6'});
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var AlternateH1 = defHeader({element: 'h1', color: 'type-dark-1', bold: 'max'});
+var AlternateH1 = defHeader({element: 'h1', color: 'type-dark-2', bold: 'max'});
 
 /**
  * @component AlternateH2
@@ -170,7 +170,7 @@ var AlternateH6 = defHeader({element: 'h6'});
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH1 = defHeader({element: 'h1', size: 'title', bold: 'high', color: 'type-dark-1'});
+var MarketingH1 = defHeader({element: 'h1', size: 'title', bold: 'high', color: 'type-dark-2'});
 
 /**
  * @component MarketingH2
@@ -179,7 +179,7 @@ var MarketingH1 = defHeader({element: 'h1', size: 'title', bold: 'high', color:
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH2 = defHeader({element: 'h2', size: 'h1', bold: 'high', color: 'type-dark-1'});
+var MarketingH2 = defHeader({element: 'h2', size: 'h1', bold: 'high', color: 'type-dark-2'});
 
 /**
  * @component MarketingH3
@@ -188,7 +188,7 @@ var MarketingH2 = defHeader({element: 'h2', size: 'h1', bold: 'high', color: 'ty
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH3 = defHeader({element: 'h3', size: 'h2', bold: 'high', color: 'type-dark-1'});
+var MarketingH3 = defHeader({element: 'h3', size: 'h2', bold: 'high', color: 'type-dark-2'});
 
 /**
  * @component MarketingH4
@@ -197,7 +197,7 @@ var MarketingH3 = defHeader({element: 'h3', size: 'h2', bold: 'high', color: 'ty
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH4 = defHeader({element: 'h4', size: 'h3', bold: 'high', color: 'type-dark-1'});
+var MarketingH4 = defHeader({element: 'h4', size: 'h3', bold: 'high', color: 'type-dark-2'});
 
 /**
  * @component MarketingH5
@@ -206,7 +206,7 @@ var MarketingH4 = defHeader({element: 'h4', size: 'h3', bold: 'high', color: 'ty
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH5 = defHeader({element: 'h5', size: 'h4', bold: 'high', color: 'type-dark-1'});
+var MarketingH5 = defHeader({element: 'h5', size: 'h4', bold: 'high', color: 'type-dark-2'});
 
 /**
  * @component MarketingH6
@@ -215,7 +215,7 @@ var MarketingH5 = defHeader({element: 'h5', size: 'h4', bold: 'high', color: 'ty
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#type_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/elements.html#type)
  */
-var MarketingH6 = defHeader({element: 'h6', size: 'h5', bold: 'high', color: 'type-dark-1'});
+var MarketingH6 = defHeader({element: 'h6', size: 'h5', bold: 'high', color: 'type-dark-2'});
 
 module.exports = {
   DefaultH1,

src/pivotal-ui/components/alerts/alerts.scss

@@ -136,7 +136,7 @@ other content inside a container on the page (of a width 500px for this example)
 
 ```html_example
 
-<div class="pane bg-accent-5">
+<div class="pane bg-accent-6">
   <div class="container pan" style="width:500px">
     <div class="alert alert-info mtn">
       <button class="close" data-dismiss="alert">

src/pivotal-ui/components/back-to-top/back-to-top.scss

@@ -89,11 +89,11 @@ You can place the link anywhere in your markup, but best practices are either to
 
   border: 0;
   border-radius: 50%;
-  background: $brand-3;
+  background: $brand-8;
   box-shadow: 0 0 9px rgba(153, 153, 153, 0.8);
 
   &:hover {
-    background: $brand-2;
+    background: $brand-5;
     color: $neutral-11;
   }
 }

src/pivotal-ui/components/dropdowns/dropdowns.scss

@@ -265,7 +265,7 @@ This is a notification dropdown with notifications.
             </h3>
           </div>
           <div class="media-body media-middle">
-            <h5 class="media-heading mbn type-dark-1">Notification</h5>
+            <h5 class="media-heading mbn type-dark-2">Notification</h5>
             <p class="type-sm type-neutral-5 mvn">News for you</p>
           </div>
         </div>
@@ -280,7 +280,7 @@ This is a notification dropdown with notifications.
             </h3>
           </div>
           <div class="media-body media-middle">
-            <h5 class="media-heading mbn type-dark-1">Pivotal-CF</h5>
+            <h5 class="media-heading mbn type-dark-2">Pivotal-CF</h5>
             <p class="type-sm type-neutral-5 mvn">1 New File Available</p>
           </div>
         </div>
@@ -329,10 +329,10 @@ This is a notification dropdown with alerts.
       <a role="menuitem" href="https://twitter.com/fat">
         <div class="media">
           <div class="media-left media-middle">
-            <i class="fa fa-exclamation-triangle type-warn-2 mrm"></i>
+            <i class="fa fa-exclamation-triangle type-warn-3 mrm"></i>
           </div>
           <div class="media-body media-middle">
-            <h5 class="media-heading mbn type-dark-1">Warning</h5>
+            <h5 class="media-heading mbn type-dark-2">Warning</h5>
             <p class="type-sm type-neutral-5 mvn">News for you</p>
           </div>
         </div>
@@ -446,7 +446,7 @@ var newLabel = <UI.DefaultH3 className="mvn"><UI.Label>New</UI.Label></UI.Defaul
 <UI.Notifications>
   <UI.NotificationItem href="http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif">
     <UI.Flag leftImage={newLabel}>
-      <UI.DefaultH5 className="media-heading mbn type-dark-1">Notification</UI.DefaultH5>
+      <UI.DefaultH5 className="media-heading mbn type-dark-2">Notification</UI.DefaultH5>
       <p className="type-sm type-neutral-5 mvn">Click for Cute Gif</p>
     </UI.Flag>
   </UI.NotificationItem>
@@ -516,14 +516,14 @@ Here's an example if there are no alerts:
 Here's an example if there are alerts:
 
 ```jsx_example
-var alertImage = <UI.Icon name="exclamation-triangle" className="h4 type-warn-2 mrm" />;
+var alertImage = <UI.Icon name="exclamation-triangle" className="h4 type-warn-3 mrm" />;
 ```
 
 ```react_example_table
 <UI.AlertNotifications>
   <UI.NotificationItem href="http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif">
     <UI.Flag leftImage={alertImage}>
-      <UI.DefaultH5 className="media-heading mbn type-dark-1">WARNING</UI.DefaultH5>
+      <UI.DefaultH5 className="media-heading mbn type-dark-2">WARNING</UI.DefaultH5>
       <p className="type-sm type-neutral-5 mvn">Click for Cute Gif</p>
     </UI.Flag>
   </UI.NotificationItem>

src/pivotal-ui/components/hiring/product_designer.scss

@@ -4,8 +4,8 @@ categories:
   - Hiring
 ---
 
-<h1 class="h1 em-high type-dark-1 txt-c title mbxxl">Product Designer</h1>
-<h2 class="h2 type-dark-2">
+<h1 class="h1 em-high type-dark-2 txt-c title mbxxl">Product Designer</h1>
+<h2 class="h2 type-dark-3">
   The Pivotal Cloud Foundry team is looking for great Product Designers to join us in San Francisco and New York. Join a team of like-minded designers in the Bay Area or Manhattan that work at Pivotal. We pair together, critique work together and share ideas and process and methodology. We believe in working at a sustainable pace – you’ll typically work hard for 8 hours each day, but then you’re off work to relax, recharge, and refocus. We also stock beef jerky and vegan beef jerky if that's your thing.
 </h2>
 
@@ -14,12 +14,12 @@ categories:
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <h1 class="type-dark-1 em-high">You</h1>
-      <p class="type-dark-2 h4">You have a track record of helping conceive, define and execute user experiences across web and mobile products. Your portfolio will show that you've worked on a range of challenging projects across all steps of the design process: research, prototyping, and visual design.</p>
+      <h1 class="type-dark-2 em-high">You</h1>
+      <p class="type-dark-3 h4">You have a track record of helping conceive, define and execute user experiences across web and mobile products. Your portfolio will show that you've worked on a range of challenging projects across all steps of the design process: research, prototyping, and visual design.</p>
     </div>
     <div class="col-md-12">
-      <h1 class="type-dark-1 em-high mlxxl">What you will do</h1>
-      <ul class="type-dark-2 h4">
+      <h1 class="type-dark-2 em-high mlxxl">What you will do</h1>
+      <ul class="type-dark-3 h4">
         <li>Maintain a user-centered approach in design perspective and practice</li>
         <li>Collaborate to understand business requirements and develop or work with team members to develop solutions</li>
         <li>Lead products from discovery and framework through iterative development and delivery</li>
@@ -35,8 +35,8 @@ categories:
   <hr class="divider-alternate-1" />
   <div class="row">
     <div class="col-md-12">
-      <h1 class="type-dark-1 em-high mlxxl">Desired Skills + Exp.</h1>
-      <ul class="type-dark-2 h4">
+      <h1 class="type-dark-2 em-high mlxxl">Desired Skills + Exp.</h1>
+      <ul class="type-dark-3 h4">
         <li>Have strong opinions but hold them loosely</li>
         <li>Possess excellent communication, presentation, and organizational skills with a strong work ethic</li>
         <li>Have a portfolio of design work that is clear and professional</li>
@@ -48,8 +48,8 @@ categories:
       </ul>
     </div>
     <div class="col-md-12">
-      <h1 class="type-dark-1 em-high mlxxl">Nice to Have</h1>
-      <ul class="type-dark-2 h4">
+      <h1 class="type-dark-2 em-high mlxxl">Nice to Have</h1>
+      <ul class="type-dark-3 h4">
         <li>Identity and branding experience</li>
         <li>Some fancy Illustration skills</li>
         <li>Ability to code your own prototypes</li>
@@ -64,7 +64,7 @@ categories:
 
   <div class="row mbxxl">
     <div class="col-md-12 col-md-offset-6 txt-c">
-      <p class="h2 type-dark-2 mbxxl">Join a team that believes in what they build.</p>
+      <p class="h2 type-dark-3 mbxxl">Join a team that believes in what they build.</p>
       <a href="http://bit.ly/1MMS8IO" class="btn btn-lg btn-highlight-alt">Apply</a>
     </div>
   </div>

src/pivotal-ui/components/iconography/README.md

@@ -1,5 +1,5 @@
 Note that this requires the Font Awesome font to be loaded.
 
 ```html
-<i class="fa fa-download type-brand-3 title"></i>
+<i class="fa fa-download type-brand-8 title"></i>
 ```

src/pivotal-ui/components/iconography/iconography.scss

@@ -50,7 +50,7 @@ Button                                             | Class                  | De
 <i class="fa fa-download"></i>                     | `.fa.fa-download`      | Renders our download icon
 
 ```html_example
-<i class="fa fa-download type-brand-3"></i>
+<i class="fa fa-download type-brand-8"></i>
 ```
 
 */