Improve colors docs and update experimentals page order

10 files changed, 65 insertions, 67 deletions

diff --git a/docs/components.html b/docs/components.html
index 2210325..6812395 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -87,6 +87,9 @@
           <li class="nav-item">
             <a href="utilities.html">Utilities</a>
           </li>
+          <li class="nav-item">
+            <a href="experimentals.html">Experimentals</a>
+          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
diff --git a/docs/css/docs.css b/docs/css/docs.css
index fc2a7f1..45ef9c6 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -130,6 +130,7 @@
 }
 .docs-content .docs-color {
   border-radius: .2rem;
+  margin: .5rem 0;
   padding: 1rem;
 }
 .docs-content .docs-color .color-subtitle {
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index 2df866d..6467793 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:bg-color-light;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:bg-color-light;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 8f0144d..d1545b0 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -58,9 +58,6 @@
               <li class="nav-item">
                 <a href="elements.html#media">Media</a>
               </li>
-              <li class="nav-item">
-                <a href="experimentals.html">Experimentals</a>
-              </li>
             </ul>
           </li>
           <li class="nav-item">
@@ -72,6 +69,9 @@
           <li class="nav-item">
             <a href="utilities.html">Utilities</a>
           </li>
+          <li class="nav-item">
+            <a href="experimentals.html">Experimentals</a>
+          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index aca8fb7..8821f15 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -35,64 +35,41 @@
           <li class="nav-item">
             <a href="index.html">Getting started</a>
           </li>
-          <li class="nav-item active">
+          <li class="nav-item">
             <a href="elements.html">Elements</a>
+          </li>
+          <li class="nav-item">
+            <a href="layout.html">Layout</a>
+          </li>
+          <li class="nav-item">
+            <a href="components.html">Components</a>
+          </li>
+          <li class="nav-item">
+            <a href="utilities.html">Utilities</a>
+          </li>
+          <li class="nav-item active">
+            <a href="experimentals.html">Experimentals</a>
             <ul class="nav">
               <li class="nav-item">
-                <a href="elements.html#typography">Typography</a>
+                <a href="experimentals.html#calendars">Calendars</a>
               </li>
               <li class="nav-item">
-                <a href="elements.html#tables">Tables</a>
+                <a href="experimentals.html#carousels">Carousels</a>
               </li>
               <li class="nav-item">
-                <a href="elements.html#buttons">Buttons</a>
+                <a href="experimentals.html#meters">Meters</a>
               </li>
               <li class="nav-item">
-                <a href="elements.html#forms">Forms</a>
+                <a href="experimentals.html#parallax">Parallax</a>
               </li>
               <li class="nav-item">
-                <a href="elements.html#labels">Labels</a>
+                <a href="experimentals.html#progress">Progress</a>
               </li>
               <li class="nav-item">
-                <a href="elements.html#codes">Codes</a>
-              </li>
-              <li class="nav-item">
-                <a href="elements.html#media">Media</a>
-              </li>
-              <li class="nav-item active">
-                <a href="experimentals.html">Experimentals</a>
-                <ul class="nav">
-                  <li class="nav-item">
-                    <a href="experimentals.html#calendars">Calendars</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="experimentals.html#carousels">Carousels</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="experimentals.html#meters">Meters</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="experimentals.html#parallax">Parallax</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="experimentals.html#progress">Progress</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="experimentals.html#sliders">Sliders</a>
-                  </li>
-                </ul>
+                <a href="experimentals.html#sliders">Sliders</a>
               </li>
             </ul>
           </li>
-          <li class="nav-item">
-            <a href="layout.html">Layout</a>
-          </li>
-          <li class="nav-item">
-            <a href="components.html">Components</a>
-          </li>
-          <li class="nav-item">
-            <a href="utilities.html">Utilities</a>
-          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
@@ -455,15 +432,9 @@
           <div class="divider"></div>
           <ul class="pagination">
             <li class="page-item page-prev">
-              <a href="index.html">
+              <a href="utilities.html">
                 <p class="page-item-subtitle">Previous</p>
-                <h4 class="page-item-title">Getting started</h4>
-              </a>
-            </li>
-            <li class="page-item page-next">
-              <a href="layout.html">
-                <p class="page-item-subtitle">Next</p>
-                <h4 class="page-item-title">Layout</h4>
+                <h4 class="page-item-title">Utilities</h4>
               </a>
             </li>
           </ul>
diff --git a/docs/index.html b/docs/index.html
index d18570f..5f2cb09 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -205,13 +205,13 @@
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#5764c6;color:#fff;">
                   <div class="color-title">#5764c6</div>
-                  <div class="color-subtitle">Primary color</div>
+                  <div class="color-subtitle">Primary</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#eff1fa;color:#5764c6;">
                   <div class="color-title">#eff1fa</div>
-                  <div class="color-subtitle">Secondary color</div>
+                  <div class="color-subtitle">Secondary</div>
                 </div>
               </div>
             </div>
@@ -219,33 +219,43 @@
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#454d5d;color:#fff;">
                   <div class="color-title">#454d5d</div>
-                  <div class="color-subtitle">Dark color</div>
+                  <div class="color-subtitle">Dark</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#727e96;color:#fff;">
                   <div class="color-title">#727e96</div>
-                  <div class="color-subtitle">Gray dark color</div>
+                  <div class="color-subtitle">Gray dark</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#acb3c2;color:#fff;">
                   <div class="color-title">#acb3c2</div>
-                  <div class="color-subtitle">Gray color</div>
+                  <div class="color-subtitle">Gray</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
                   <div class="color-title">#e7e9ed</div>
-                  <div class="color-subtitle">Gray light color</div>
+                  <div class="color-subtitle">Gray light</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
+                  <div class="color-title">#f0f1f4</div>
+                  <div class="color-subtitle">Border</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
+                  <div class="color-title">#f8f9fa</div>
+                  <div class="color-subtitle">Background</div>
                 </div>
               </div>
-            </div>
-            <div class="columns">
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#fff;color:#727e96;">
                   <div class="color-title">#fff</div>
-                  <div class="color-subtitle">Light color</div>
+                  <div class="color-subtitle">Light</div>
                 </div>
               </div>
             </div>
@@ -253,19 +263,19 @@
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#32b643;color:#fff;">
                   <div class="color-title">#32b643</div>
-                  <div class="color-subtitle">Success color</div>
+                  <div class="color-subtitle">Success</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#ffb700;color:#fff;">
                   <div class="color-title">#ffb700</div>
-                  <div class="color-subtitle">Warning color</div>
+                  <div class="color-subtitle">Warning</div>
                 </div>
               </div>
               <div class="column col-3 col-md-6">
                 <div class="docs-color" style="background:#e85600;color:#fff;">
                   <div class="color-title">#e85600</div>
-                  <div class="color-subtitle">Danger color</div>
+                  <div class="color-subtitle">Danger</div>
                 </div>
               </div>
             </div>
diff --git a/docs/layout.html b/docs/layout.html
index c894b6e..cf09726 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -63,6 +63,9 @@
           <li class="nav-item">
             <a href="utilities.html">Utilities</a>
           </li>
+          <li class="nav-item">
+            <a href="experimentals.html">Experimentals</a>
+          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
diff --git a/docs/src/docs.less b/docs/src/docs.less
index 9c4d388..15e57f8 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -163,6 +163,7 @@
 
   .docs-color {
     border-radius: @border-radius;
+    margin: .5rem 0;
     padding: 1rem;
 
     .color-subtitle {
diff --git a/docs/utilities.html b/docs/utilities.html
index 0475927..5695dbe 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -66,6 +66,9 @@
               </li>
             </ul>
           </li>
+          <li class="nav-item">
+            <a href="experimentals.html">Experimentals</a>
+          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
@@ -239,6 +242,12 @@
                 <h4 class="page-item-title">Components</h4>
               </a>
             </li>
+            <li class="page-item page-next">
+              <a href="experimentals.html">
+                <p class="page-item-subtitle">Previous</p>
+                <h4 class="page-item-title">Experimentals</h4>
+              </a>
+            </li>
           </ul>
         </section>
       </div>
diff --git a/src/variables.less b/src/variables.less
index 6d44df2..1227c81 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -3,7 +3,7 @@
 // Global
 @html-font-size: 10px;
 @html-line-height: 1.428571429;
-@body-bg: #fff;
+@body-bg: @bg-color-light;
 @body-font-color: lighten(@dark-color, 5%);
 @font-size: 1.4rem;
 @font-size-sm: 1.2rem;