From a33385f51f498bc1ae48dec79a65c4bb54bcdedb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 18 Aug 2017 08:03:29 -0400
Subject: [PATCH] Working on colors

---
 docs/source/_layouts/master.blade.php |  7 +++--
 docs/source/examples.md               | 30 ++++++++++++++++++++
 src/colors.less                       | 40 +++++++++++++++------------
 src/utilities/backgrounds.less        | 40 +++++++++++++++------------
 src/utilities/borders.less            | 10 ++++---
 src/utilities/text.less               | 10 ++++---
 6 files changed, 91 insertions(+), 46 deletions(-)
 create mode 100644 docs/source/examples.md

diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index d8c621bf9..806045b2f 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -21,8 +21,11 @@
             </div>
         </header>
         <div class="flex flex-fill">
-            <nav class="px-8 pb-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
-                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
+            <nav class="px-8 py-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
+                <div class="mb-8">
+                    <a class="{{ $page->getUrl() === '/examples' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a>
+                </div>
+                <div class="mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
                 <ul>
                     <li><a class="{{ $page->getUrl() === '/' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
                     <li><a class="{{ $page->getUrl() === '/installation' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
diff --git a/docs/source/examples.md b/docs/source/examples.md
new file mode 100644
index 000000000..1678f0e00
--- /dev/null
+++ b/docs/source/examples.md
@@ -0,0 +1,30 @@
+---
+extends: _layouts.master
+title: "Examples"
+---
+
+# Examples
+
+Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!
+
+## Alerts
+
+<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
+    <div class="text-medium text-amber">
+        Warning message
+    </div>
+    <div class="text-amber">
+        Some additional text to explain what went wrong.
+    </div>
+</div>
+
+<div class="bg-green-lightest border border-green-light rounded p-4">
+    <div class="text-medium text-green">
+        Success message
+    </div>
+    <div class="text-green">
+        Some additional text to explain what went awesome.
+    </div>
+</div>
+
+## Buttons
diff --git a/src/colors.less b/src/colors.less
index bdd77f5f2..8ac6c7468 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -11,21 +11,25 @@
 @color-grey-900: #212121;
 @color-black:    #000000;
 
-@color-red:          #f25451;
-@color-red-light:    #fa8785;
-@color-orange:       #ffb447;
-@color-orange-light: #ffce85;
-@color-yellow:       #ffed4a;
-@color-yellow-light: #fff6a5;
-@color-green:        #77d48a;
-@color-green-light:  #b1f3be;
-@color-teal:         #4dc0b5;
-@color-teal-light:   #92e0d8;
-@color-blue:         #4aa2ea;
-@color-blue-light:   #acdaff;
-@color-indigo:       #6574cd;
-@color-indigo-light: #a3aeed;
-@color-purple:       #976ae6;
-@color-purple-light: #ceb3ff;
-@color-pink:         #f66d9b;
-@color-pink-light:   #ffa5c3;
+@color-red:            #f25451;
+@color-red-light:      #fa8785;
+@color-orange:         #ffb447;
+@color-orange-light:   #ffce85;
+@color-amber:          #ffbf00;
+@color-amber-light:    #ffe493;
+@color-amber-lightest: #fff7df;
+@color-yellow:         #ffed4a;
+@color-yellow-light:   #fff6a5;
+@color-green:          #57d06f;
+@color-green-light:    #b1f3be;
+@color-green-lightest: #dfffe6;
+@color-teal:           #4dc0b5;
+@color-teal-light:     #92e0d8;
+@color-blue:           #4aa2ea;
+@color-blue-light:     #acdaff;
+@color-indigo:         #6574cd;
+@color-indigo-light:   #a3aeed;
+@color-purple:         #976ae6;
+@color-purple-light:   #ceb3ff;
+@color-pink:           #f66d9b;
+@color-pink-light:     #ffa5c3;
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 4d01c7c37..b77acfc62 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -7,24 +7,28 @@
   'dark-soft'    @color-grey-700,
   'dark-softer'  @color-grey-600,
 
-  'red'          @color-red,
-  'red-light'    @color-red-light,
-  'orange'       @color-orange,
-  'orange-light' @color-orange-light,
-  'yellow'       @color-yellow,
-  'yellow-light' @color-yellow-light,
-  'green'        @color-green,
-  'green-light'  @color-green-light,
-  'teal'         @color-teal,
-  'teal-light'   @color-teal-light,
-  'blue'         @color-blue,
-  'blue-light'   @color-blue-light,
-  'indigo'       @color-indigo,
-  'indigo-light' @color-indigo-light,
-  'purple'       @color-purple,
-  'purple-light' @color-purple-light,
-  'pink'         @color-pink,
-  'pink-light'   @color-pink-light,
+  'red'            @color-red,
+  'red-light'      @color-red-light,
+  'orange'         @color-orange,
+  'orange-light'   @color-orange-light,
+  'amber'          @color-amber,
+  'amber-light'    @color-amber-light,
+  'amber-lightest' @color-amber-lightest,
+  'yellow'         @color-yellow,
+  'yellow-light'   @color-yellow-light,
+  'green'          @color-green,
+  'green-light'    @color-green-light,
+  'green-lightest' @color-green-lightest,
+  'teal'           @color-teal,
+  'teal-light'     @color-teal-light,
+  'blue'           @color-blue,
+  'blue-light'     @color-blue-light,
+  'indigo'         @color-indigo,
+  'indigo-light'   @color-indigo-light,
+  'purple'         @color-purple,
+  'purple-light'   @color-purple-light,
+  'pink'           @color-pink,
+  'pink-light'     @color-pink-light,
 ;
 
 .define-bg-colors(@bg-colors; @screens);
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index b71377b26..ba9e4b901 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -45,10 +45,12 @@
 
   'red'          @color-red,
   'red-light'    @color-red-light,
-  'orange'        @color-orange,
-  'orange-light'  @color-orange-light,
-  'yellow'        @color-yellow,
-  'yellow-light'  @color-yellow-light,
+  'orange'       @color-orange,
+  'orange-light' @color-orange-light,
+  'amber'        @color-amber,
+  'amber-light'  @color-amber-light,
+  'yellow'       @color-yellow,
+  'yellow-light' @color-yellow-light,
   'green'        @color-green,
   'green-light'  @color-green-light,
   'teal'         @color-teal,
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 983a2ce6a..2bca943ad 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -69,10 +69,12 @@
 
   'red'          @color-red,
   'red-light'    @color-red-light,
-  'orange'        @color-orange,
-  'orange-light'  @color-orange-light,
-  'yellow'        @color-yellow,
-  'yellow-light'  @color-yellow-light,
+  'orange'       @color-orange,
+  'orange-light' @color-orange-light,
+  'amber'        @color-amber,
+  'amber-light'  @color-amber-light,
+  'yellow'       @color-yellow,
+  'yellow-light' @color-yellow-light,
   'green'        @color-green,
   'green-light'  @color-green-light,
   'teal'         @color-teal,