Change variable naming

1 files changed, 21 insertions, 23 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 66d57d4..3d5734d 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,7 +1,7 @@
 // Buttons
 .btn {
   appearance: none;
-  background: @light-bg-color;
+  background: @bg-color-light;
   border: @border-width solid @primary-color;
   border-radius: @border-radius;
   color: @link-color;
@@ -18,20 +18,20 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @light-secondary-color;
+    background: @secondary-color-light;
     text-decoration: none;
   }
   &:hover {
     background: @primary-color;
-    border-color: @dark-primary-color;
-    color: @light-color;
+    border-color: @primary-color-dark;
+    color: @gray-color-lighter;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: @dark-primary-color;
-    border-color: darken(@dark-primary-color, 5%);
-    color: @light-color;
+    background: @primary-color-dark;
+    border-color: darken(@primary-color-dark, 5%);
+    color: @gray-color-lighter;
   }
   &[disabled],
   &:disabled,
@@ -44,25 +44,24 @@
   // Button Primary
   &.btn-primary {
     background: @primary-color;
-    border-color: @dark-primary-color;
-    color: @light-color;
+    border-color: @primary-color-dark;
+    color: @gray-color-lighter;
     &:focus,
     &:hover {
-      background: darken(@dark-primary-color, 2%);
-      border-color: darken(@dark-primary-color, 5%);
-      color: @light-color;
+      background: darken(@primary-color-dark, 2%);
+      border-color: darken(@primary-color-dark, 5%);
+      color: @gray-color-lighter;
     }
     &:active,
     &.active {
-      background: darken(@dark-primary-color, 4%);
-      border-color: darken(@dark-primary-color, 7%);
-      color: @light-color;
+      background: darken(@primary-color-dark, 4%);
+      border-color: darken(@primary-color-dark, 7%);
+      color: @gray-color-lighter;
     }
     &.loading {
       &::after {
-        border-color: @light-color;
-        border-right-color: transparent;
-        border-top-color: transparent;
+        border-bottom-color: @gray-color-lighter;
+        border-left-color: @gray-color-lighter;
       }
     }
   }
@@ -76,19 +75,19 @@
     &:hover,
     &:active,
     &.active {
-      color: @dark-link-color;
+      color: @link-color-dark;
     }
   }
 
   // Button Sizes
   &.btn-sm {
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     height: 2.4rem;
     padding: .1rem .8rem;
   }
 
   &.btn-lg {
-    font-size: @lg-font-size;
+    font-size: @font-size-lg;
     height: 4rem;
     padding: .9rem .8rem;
   }
@@ -121,8 +120,7 @@
     color: currentColor;
     height: 1.6rem;
     line-height: 1.6rem;
-    margin-left: .4rem;
-    margin-right: -.2rem;
+    margin: .2rem -.2rem .2rem .4rem;
     opacity: .45;
     padding: 0 .2rem;
     text-decoration: none;