Improve color variables and class namings

1 files changed, 42 insertions, 36 deletions

diff --git a/docs/src/docs.less b/docs/src/docs.less
index 354a82f..9c4d388 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -3,23 +3,26 @@
 .version::after {
   content: "0.2.9";
 }
+// Core variables and mixins
+@import '../../src/variables.less';
+@import '../../src/mixins.less';
 
 /* Spectre docs style */
 .bg-gray {
-  background: #f6f6f6;
-  color: #666;
+  background: @bg-color;
+  color: lighten(@body-font-color, 10%);
   padding: 1rem;
 }
 
 .bg-dark {
-  background: #333;
-  color: #fff;
+  background: @body-font-color;
+  color: @light-color;
   padding: 1rem;
 }
 
 .bg-primary {
-  background: #5764c6;
-  color: #fff;
+  background: @primary-color;
+  color: @light-color;
   padding: 1rem;
 }
 
@@ -46,18 +49,18 @@
   }
 
   .navbar-brand {
-    color: #444;
+    color: @body-font-color;
   }
 
   .btn-link {
-    color: #666;
+    color: lighten(@body-font-color, 10%);
     padding-left: .6rem;
     padding-right: .6rem;
 
-    &:hover,
     &:focus,
+    &:hover,
     &:active {
-      color: #444;
+      color: @body-font-color;
       opacity: .75;
     }
   }
@@ -68,19 +71,20 @@
   margin-bottom: 4rem;
 
   h1 {
-    color: #555;
-    font-weight: 400;
+    color: lighten(@body-font-color, 5%);
     font-size: 3.2rem;
+    font-weight: 400;
   }
+
   h2 {
-    color: #666;
+    color: lighten(@body-font-color, 5%);
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 3rem;
     margin-bottom: 3rem;
 
     u {
-      border-bottom: .2rem solid #666;
+      border-bottom: .2rem solid lighten(@body-font-color, 5%);
       padding-bottom: .1rem;
       text-decoration: none;
     }
@@ -89,11 +93,11 @@
   .card {
     background: none;
     border: 0;
-    color: #666;
+    color: lighten(@body-font-color, 10%);
     padding: 1rem;
 
     .card-title {
-      color: #5764c6;
+      color: @primary-color;
       font-size: 1.8rem;
       margin-bottom: 0;
     }
@@ -101,27 +105,17 @@
 }
 
 .grid-footer {
-  color: #888;
+  color: @gray-color;
   margin-top: 4rem;
   margin-bottom: 3rem;
 
   a {
-    color: #666;
+    color: @gray-color-dark;
   }
 }
 
-.grid-ads {
-  border-radius: .2rem;
-  display: block;
-  height: 12rem;
-  margin: 2rem auto;
-  max-width: 64rem;
-  padding: 1rem;
-  width: 100%
-}
-
 .docs-content {
-  color: #666;
+  color: lighten(@body-font-color, 10%);
   padding-top: 0;
 
   .container {
@@ -129,7 +123,7 @@
   }
 
   header {
-    color: #444;
+    color: @body-font-color;
     padding-top: 6rem;
   }
 
@@ -167,6 +161,16 @@
     margin-bottom: 2rem;
   }
 
+  .docs-color {
+    border-radius: @border-radius;
+    padding: 1rem;
+
+    .color-subtitle {
+      font-size: @font-size-sm;
+      opacity: .75;
+    }
+  }
+
   .panel {
     height: 75vh;
 
@@ -176,14 +180,16 @@
   }
 
   .code {
+    color: lighten(@body-font-color, 10%);
+
     .com {
-      color: #c5c5c5;
+      color: @gray-color;
     }
     .tag {
-      color: #5764c6;
+      color: @primary-color;
     }
     .atn {
-      color: #666;
+      color: lighten(@body-font-color, 10%);
     }
     .atv {
       color: #e06870;
@@ -205,9 +211,9 @@
   .example-tile-icon {
     align-content: space-around;
     align-items: center;
-    background: #5764c6;
+    background: @primary-color;
     border-radius: .2rem;
-    color: #fff;
+    color: @light-color;
     display: flex;
     font-size: 2.4rem;
     height: 4rem;
@@ -259,7 +265,7 @@
   }
 
   .docs-sidebar {
-    background: #fff;
+    background: bg-color-light;
     height: 100%;
     overflow-y: auto;
     padding: 6rem 3rem;