Improve variables

9 files changed, 33 insertions, 26 deletions

diff --git a/src/base.less b/src/base.less
index f10e5ae..904cb5d 100644
--- a/src/base.less
+++ b/src/base.less
@@ -26,8 +26,10 @@ a {
   text-decoration: none;
 
   &:focus,
-  &:hover {
-    color: darken(@link-color, 10%);
+  &:hover,
+  &:active,
+  &.active {
+    color: @dark-link-color;
     text-decoration: underline;
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index 1c0a641..baf40ca 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -18,7 +18,7 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @secondary-color;
+    background: @light-primary-color;
     text-decoration: none;
   }
   &:hover {
@@ -70,12 +70,10 @@
     border-color: transparent;
     color: @link-color;
     &:focus,
-    &:hover {
-      color: @dark-link-color;
-    }
+    &:hover,
     &:active,
     &.active {
-      color: darken(@dark-link-color, 10%);
+      color: @dark-link-color;
     }
   }
 
diff --git a/src/codes.less b/src/codes.less
index 6525712..e2b8a48 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -13,7 +13,7 @@ code {
 
   &::before {
     content: attr(data-lang);
-    color: @control-color;
+    color: @light-gray-color;
     font-size: 1.2rem;
     position: absolute;
     right: 1rem;
diff --git a/src/forms.less b/src/forms.less
index 42219b2..8214be1 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -8,7 +8,7 @@
   appearance: none;
   background: @light-bg-color;
   background-image: none;
-  border: .1rem solid @control-color;
+  border: .1rem solid @light-gray-color;
   border-radius: @border-radius;
   color: @body-font-color;
   .control-transition();
@@ -96,7 +96,7 @@
 // Form element: Select
 .form-select {
   appearance: none;
-  border: .1rem solid @control-color;
+  border: .1rem solid @light-gray-color;
   border-radius: @border-radius;
   font-size: 1.4rem;
   line-height: 2rem;
@@ -172,7 +172,7 @@
   position: relative;
 
   .form-icon {
-    border: .1rem solid @control-color;
+    border: .1rem solid @light-gray-color;
     .control-transition();
     display: inline-block;
     font-size: 1.4rem;
@@ -267,9 +267,9 @@
   position: relative;
 
   .form-icon {
-    background: @control-color;
+    background: @light-gray-color;
     background-clip: padding-box;
-    border: .1rem solid @control-color;
+    border: .1rem solid @light-gray-color;
     border-radius: .9rem;
     display: inline-block;
     height: 1.8rem;
@@ -317,7 +317,7 @@
 
   .input-group-addon {
     background: @bg-color;
-    border: .1rem solid @control-color;
+    border: .1rem solid @light-gray-color;
     border-radius: @border-radius;
     line-height: 2rem;
     padding: .5rem .8rem;
diff --git a/src/menus.less b/src/menus.less
index b7cf1f6..1849a32 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -32,14 +32,14 @@
       }
       &:active,
       &.active {
-        background: @secondary-color;
+        background: @light-primary-color;
         color: @dark-link-color;
       }
     }
   }
 
   .menu-header {
-    color: @control-color;
+    color: @light-gray-color;
     font-size: 1.2rem;
     line-height: 2rem;
     margin-top: 0;
@@ -51,8 +51,8 @@
       content: "";
       display: block;
       height: .1rem;
-      transform: translateY(-1rem);
       position: absolute;
+      top: 50%;
       width: 100%;
     }
 
diff --git a/src/steps.less b/src/steps.less
index 543829e..f9d6fc1 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -61,7 +61,7 @@
         a {
 
           &::before {
-            background: @control-color;
+            background: @light-gray-color;
           }
         }
       }
diff --git a/src/tables.less b/src/tables.less
index d4c55b9..dfdd03c 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -31,12 +31,14 @@
       }
     }
   }
-  th,
+
   td {
     border-bottom: .1rem solid @border-color;
     padding: 1.5rem 1rem;
   }
+  
   th {
-    border-color: darken(@border-color, 5%);
+    border-bottom: .2rem solid @dark-color;
+    padding: 1.5rem 1rem;
   }
 }
diff --git a/src/typography.less b/src/typography.less
index 0bce444..73165d6 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -88,7 +88,7 @@ dl {
   }
 }
 mark {
-  background: lighten(@control-color-warning, 35%);
+  background: @highlight-color;
   .label-base();
 }
 kbd {
diff --git a/src/variables.less b/src/variables.less
index e6d3453..52da248 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -19,26 +19,30 @@
 @control-min-width: 18rem;
 @border-radius: .2rem;
 
-// Colors
+// Core colors
 @primary-color: #5764c6;
 @dark-primary-color: darken(@primary-color, 5%);
-@secondary-color: lighten(@primary-color, 42%);
+@light-primary-color: lighten(@primary-color, 42%);
 @dark-color: #333;
 @dark-gray-color: #666;
 @gray-color: #999;
-@light-gray-color: #c5c5c5;
+@light-gray-color: #ccc;
 @light-color: #fff;
 @link-color: @primary-color;
-@dark-link-color: darken(@link-color, 5%);
+@dark-link-color: darken(@link-color, 10%);
 @border-color: #efefef;
 @bg-color: #f8f8f8;
 @dark-bg-color: darken(@bg-color, 3%);
 @light-bg-color: #fff;
-@control-color: #c5c5c5;
+
+// Control colors
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
+
+// Meta colors
 @code-color: #e06870;
+@highlight-color: #ffe9b3;
 
 // Responsive breakpoints
 @size-xs: 480px;
@@ -46,3 +50,4 @@
 @size-md: 840px;
 @size-lg: 960px;
 @size-xl: 1280px;
+@size-2x: 1440px;