From cfb371671aaaada8571ca21f86ca60d90bb25c68 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 20 Aug 2017 10:28:46 -0400
Subject: [PATCH] Use cool greys instead of neutral greys

---
 docs/source/backgrounds.md     | 258 ++++++++++++++++++++-------------
 src/colors.less                |  24 ++-
 src/utilities/backgrounds.less |  10 +-
 src/utilities/borders.less     |   4 +-
 src/utilities/text.less        |   8 +-
 5 files changed, 181 insertions(+), 123 deletions(-)

diff --git a/docs/source/backgrounds.md b/docs/source/backgrounds.md
index 0315080cb..6b8b0f731 100644
--- a/docs/source/backgrounds.md
+++ b/docs/source/backgrounds.md
@@ -5,105 +5,165 @@ title: "Backgrounds"
 
 # Backgrounds
 
-<table class="text-sm" style="border-collapse: separate; border-spacing: 0; width: 100%;">
-  <tr>
-    <td class="w-24 h-12 bg-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-light-soft border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-soft</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-light-softer border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-softer</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-dark border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-dark-soft border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-soft</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-dark-softer border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-softer</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-red border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-red-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-orange border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-orange-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-yellow-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-green-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-teal border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-teal-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-blue border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-blue-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-indigo border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-indigo-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-purple border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-purple-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple-light</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-pink border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink</code></td>
-  </tr>
-  <tr>
-    <td class="w-24 h-12 bg-pink-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink-light</code></td>
-  </tr>
-</table>
-</table>
+<div class="row pull-x-4 mb-4">
+  <div class="col-12 md:col-4 px-4">
+    <div class="bg-light px-6 py-4 text-sm">
+      .bg-light
+    </div>
+    <div class="bg-light-soft px-6 py-4 text-sm">
+      .bg-light-soft
+    </div>
+    <div class="bg-light-softer px-6 py-4 text-sm">
+      .bg-light-softer
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-dark px-6 py-4 text-sm">
+      .bg-dark
+    </div>
+    <div class="text-light bg-dark-soft px-6 py-4 text-sm">
+      .bg-dark-soft
+    </div>
+    <div class="text-light bg-dark-softer px-6 py-4 text-sm">
+      .bg-dark-softer
+    </div>
+  </div>
+</div>
+
+<div class="row pull-x-4 mb-4">
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-red-dark px-6 py-4 text-sm">
+      .bg-red-dark
+    </div>
+    <div class="text-light bg-red px-6 py-4 text-sm">
+      .bg-red
+    </div>
+    <div class="text-light bg-red-light px-6 py-4 text-sm">
+      .bg-red-light
+    </div>
+    <div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
+      .bg-red-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-orange-dark px-6 py-4 text-sm">
+      .bg-orange-dark
+    </div>
+    <div class="text-light bg-orange px-6 py-4 text-sm">
+      .bg-orange
+    </div>
+    <div class="text-light bg-orange-light px-6 py-4 text-sm">
+      .bg-orange-light
+    </div>
+    <div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
+      .bg-orange-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-yellow-dark px-6 py-4 text-sm">
+      .bg-yellow-dark
+    </div>
+    <div class="text-light bg-yellow px-6 py-4 text-sm">
+      .bg-yellow
+    </div>
+    <div class="text-light bg-yellow-light px-6 py-4 text-sm">
+      .bg-yellow-light
+    </div>
+    <div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
+      .bg-yellow-lightest
+    </div>
+  </div>
+</div>
+
+<div class="row pull-x-4 mb-4">
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-green-dark px-6 py-4 text-sm">
+      .bg-green-dark
+    </div>
+    <div class="text-light bg-green px-6 py-4 text-sm">
+      .bg-green
+    </div>
+    <div class="text-light bg-green-light px-6 py-4 text-sm">
+      .bg-green-light
+    </div>
+    <div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
+      .bg-green-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-teal-dark px-6 py-4 text-sm">
+      .bg-teal-dark
+    </div>
+    <div class="text-light bg-teal px-6 py-4 text-sm">
+      .bg-teal
+    </div>
+    <div class="text-light bg-teal-light px-6 py-4 text-sm">
+      .bg-teal-light
+    </div>
+    <div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
+      .bg-teal-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-blue-dark px-6 py-4 text-sm">
+      .bg-blue-dark
+    </div>
+    <div class="text-light bg-blue px-6 py-4 text-sm">
+      .bg-blue
+    </div>
+    <div class="text-light bg-blue-light px-6 py-4 text-sm">
+      .bg-blue-light
+    </div>
+    <div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
+      .bg-blue-lightest
+    </div>
+  </div>
+</div>
+
+<div class="row pull-x-4 mb-4">
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-indigo-dark px-6 py-4 text-sm">
+      .bg-indigo-dark
+    </div>
+    <div class="text-light bg-indigo px-6 py-4 text-sm">
+      .bg-indigo
+    </div>
+    <div class="text-light bg-indigo-light px-6 py-4 text-sm">
+      .bg-indigo-light
+    </div>
+    <div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
+      .bg-indigo-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-purple-dark px-6 py-4 text-sm">
+      .bg-purple-dark
+    </div>
+    <div class="text-light bg-purple px-6 py-4 text-sm">
+      .bg-purple
+    </div>
+    <div class="text-light bg-purple-light px-6 py-4 text-sm">
+      .bg-purple-light
+    </div>
+    <div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
+      .bg-purple-lightest
+    </div>
+  </div>
+  <div class="col-12 md:col-4 px-4">
+    <div class="text-light bg-pink-dark px-6 py-4 text-sm">
+      .bg-pink-dark
+    </div>
+    <div class="text-light bg-pink px-6 py-4 text-sm">
+      .bg-pink
+    </div>
+    <div class="text-light bg-pink-light px-6 py-4 text-sm">
+      .bg-pink-light
+    </div>
+    <div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
+      .bg-pink-lightest
+    </div>
+  </div>
+</div>
 
 Using the utilities in HTML:
 
diff --git a/src/colors.less b/src/colors.less
index 57cd048d2..3deaa2a06 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -1,15 +1,13 @@
-@color-white:           #ffffff;
-@color-grey-50:         #fafafa;
-@color-grey-100:        #f5f5f5;
-@color-grey-200:        #eeeeee;
-@color-grey-300:        #e0e0e0;
-@color-grey-400:        #bdbdbd;
-@color-grey-500:        #9e9e9e;
-@color-grey-600:        #757575;
-@color-grey-700:        #616161;
-@color-grey-800:        #424242;
-@color-grey-900:        #212121;
 @color-black:           #000000;
+@color-grey-900:        #212b35;
+@color-grey-800:        #404e5c;
+@color-grey-700:        #647382;
+@color-grey-600:        #919eab;
+@color-grey-500:        #c5ced6;
+@color-grey-400:        #dfe3e8;
+@color-grey-300:        #f0f2f5;
+@color-grey-200:        #f7f9fa;
+@color-white:           #ffffff;
 
 @color-red-dark:        #d43633;
 @color-red:             #f25451;
@@ -19,12 +17,12 @@
 @color-orange-dark:     #f29500;
 @color-orange:          #ffb82b;
 @color-orange-light:    #ffd685;
-@color-orange-lightest:  #fff8eb;
+@color-orange-lightest: #fff8eb;
 
 @color-yellow-dark:     #ffc400;
 @color-yellow:          #ffe14a;
 @color-yellow-light:    #ffea83;
-@color-yellow-lightest:  #fffbe5;
+@color-yellow-lightest: #fffbe5;
 
 @color-green-dark:      #34ae4c;
 @color-green:           #57d06f;
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 3b07d978d..4a79b5a0d 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,11 +1,11 @@
 @bg-colors:
   'light'          @color-white,
-  'light-soft'     @color-grey-100,
-  'light-softer'   @color-grey-200,
+  'light-soft'     @color-grey-200,
+  'light-softer'   @color-grey-300,
 
-  'dark'           @color-grey-800,
-  'dark-soft'      @color-grey-700,
-  'dark-softer'    @color-grey-600,
+  'dark'           @color-grey-900,
+  'dark-soft'      @color-grey-800,
+  'dark-softer'    @color-grey-700,
 
   'red-dark'       @color-red-dark,
   'red'            @color-red,
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index d8e961d10..7d6058168 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -13,8 +13,8 @@
 @border-dark-softer: @color-grey-300;
 
 @border-light:        @color-white;
-@border-light-soft:   @color-grey-100;
-@border-light-softer: @color-grey-200;
+@border-light-soft:   @color-grey-200;
+@border-light-softer: @color-grey-300;
 
 @border-dark-overlay:        hsla(0, 0%, 0%, 20%);
 @border-dark-overlay-soft:   hsla(0, 0%, 0%, 10%);
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 347c560b9..22a44434f 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -53,10 +53,10 @@
 @text-light-softer:  fade(@color-white, 45%);
 @text-light-softest: fade(@color-white, 35%);
 
-@text-dark:          @color-grey-800;
-@text-dark-soft:     @color-grey-600;
-@text-dark-softer:   @color-grey-500;
-@text-dark-softest:  @color-grey-400;
+@text-dark:          @color-grey-900;
+@text-dark-soft:     @color-grey-700;
+@text-dark-softer:   @color-grey-600;
+@text-dark-softest:  @color-grey-500;
 
 @text-colors:
   'light'         @text-light,