Change variable naming

31 files changed, 143 insertions, 145 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 8671e9a..fa0d49f 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -2,7 +2,7 @@
 .avatar {
   background: @primary-color;
   border-radius: 50%;
-  color: fade(@light-color, 75%);
+  color: fade(@gray-color-lighter, 75%);
   display: inline-block;
   font-size: @font-size;
   font-weight: 300;
@@ -42,7 +42,7 @@
   }
 
   .avatar-icon {
-    background: @light-bg-color;
+    background: @bg-color-light;
     bottom: -.2em;
     height: 50%;
     padding: 5%;
diff --git a/src/badges.less b/src/badges.less
index 2d7037f..d4e3d1f 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -8,9 +8,9 @@
     &::after {
       background: @primary-color;
       background-clip: padding-box;
-      border: @border-width solid @light-bg-color;
+      border: @border-width solid @bg-color-light;
       border-radius: 1rem;
-      color: @light-color;
+      color: @gray-color-lighter;
       content: attr(data-badge);
       display: inline-block;
       transform: translate(-.2rem, -1rem);
@@ -18,7 +18,7 @@
   }
   &[data-badge] {
     &::after {
-      font-size: @sm-font-size;
+      font-size: @font-size-sm;
       height: 2rem;
       line-height: 1.4rem;
       min-width: 2rem;
diff --git a/src/bars.less b/src/bars.less
index 477cee9..11788f0 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -1,6 +1,6 @@
 // Bars
 .bar {
-  background: @dark-bg-color;
+  background: @bg-color-dark;
   border-radius: @border-radius;
   display: flex;
   flex-wrap: nowrap;
@@ -14,9 +14,9 @@
   // TODO: attr() support
   .bar-item {
     background: @primary-color;
-    color: @light-color;
+    color: @gray-color-lighter;
     display: block;
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     flex-shrink: 0;
     line-height: 1;
     height: 100%;
diff --git a/src/base.less b/src/base.less
index 0c11e4b..f30300b 100644
--- a/src/base.less
+++ b/src/base.less
@@ -29,7 +29,7 @@ a {
   &:hover,
   &:active,
   &.active {
-    color: @dark-link-color;
+    color: @link-color-dark;
     text-decoration: underline;
   }
 }
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index a1d2c1a..acde7b3 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -11,7 +11,7 @@
     }
     &:not(:first-child) {
       &::before {
-        color: @light-gray-color;
+        color: @gray-color-light;
         content: "/";
         padding: 0 .4rem;
       }
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;
diff --git a/src/calendars.less b/src/calendars.less
index c4354ae..c3bcf3a 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -11,7 +11,7 @@
     border-top-left-radius: @border-radius;
     border-top-right-radius: @border-radius;
     display: flex;
-    font-size: @lg-font-size;
+    font-size: @font-size-lg;
     padding: 1rem;
   }
 
@@ -31,18 +31,18 @@
     background: @bg-color;
     border-bottom: @border-width solid @border-color;
     color: @gray-color;
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
   }
 
   .calendar-body {
-    color: @dark-gray-color;
+    color: @gray-color-dark;
 
     .calendar-date {
       border: 0;
       padding: .6rem;
 
       .date-item {
-        color: @dark-gray-color;
+        color: @gray-color-dark;
       }
 
       &.prev-month .date-item,
@@ -78,16 +78,16 @@
 
       &:focus,
       &:hover {
-        background: @light-secondary-color;
-        border-color: @dark-secondary-color;
+        background: @secondary-color-light;
+        border-color: @secondary-color-dark;
         color: @primary-color;
         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;
       }
 
       // Calendar badge support
@@ -201,7 +201,7 @@
       background: @secondary-color;
       border-radius: @border-radius;
       color: @primary-color;
-      font-size: @sm-font-size;
+      font-size: @font-size-sm;
       display: block;
       margin: .2rem auto;
       overflow: hidden;
diff --git a/src/cards.less b/src/cards.less
index 5b7cf31..e73ccf2 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -1,12 +1,9 @@
 // Cards
 .card {
-  background: @light-bg-color;
+  background: @bg-color-light;
   border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: block;
-  margin: 0;
-  padding: 0;
-  text-align: left;
 
   .card-header,
   .card-body,
@@ -18,7 +15,7 @@
       padding-bottom: @layout-padding;
     }
   }
-  
+
   .card-image {
     padding-top: @layout-padding;
 
@@ -45,6 +42,6 @@
 
   .card-meta {
     color: @gray-color;
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
   }
 }
diff --git a/src/carousels.less b/src/carousels.less
index c106f3e..d35e700 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -32,9 +32,9 @@
 
     .item-prev,
     .item-next {
-      background: fade(@light-gray-color, 25%);
-      border-color: fade(@light-gray-color, 50%);
-      color: @light-gray-color;
+      background: fade(@gray-color-light, 25%);
+      border-color: fade(@gray-color-light, 50%);
+      color: @gray-color-light;
       opacity: 0;
       position: absolute;
       top: 50%;
@@ -63,7 +63,7 @@
     &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: @light-gray-color;
+      color: @gray-color-light;
     }
   }
 
@@ -78,7 +78,7 @@
     z-index: 999;
 
     .nav-item {
-      color: fade(@light-gray-color, 50%);
+      color: fade(@gray-color-light, 50%);
       display: block;
       flex: 1 0 auto;
       height: 4rem;
diff --git a/src/chips.less b/src/chips.less
index dc1b897..8d58a02 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,9 +1,9 @@
 // Chips
 .chip {
   align-items: center;
-  background: @dark-bg-color;
+  background: @bg-color-dark;
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
@@ -14,7 +14,7 @@
 
   &.active {
     background: @primary-color;
-    color: @light-color;
+    color: @gray-color-lighter;
   }
 
   .avatar {
diff --git a/src/codes.less b/src/codes.less
index 21b25ec..048ceb3 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -7,14 +7,14 @@ code {
 
 .code {
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   line-height: 2rem;
   position: relative;
 
   &::before {
     content: attr(data-lang);
-    color: @light-gray-color;
-    font-size: @sm-font-size;
+    color: @gray-color-light;
+    font-size: @font-size-sm;
     position: absolute;
     right: 1rem;
     top: .2rem;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 229bda2..413e88b 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
   position: relative;
 
   .menu {
-    animation: slide-down .2s 1;
+    animation: slide-down .2s ease-in 1;
     display: none;
     left: 0;
     position: absolute;
diff --git a/src/empty.less b/src/empty.less
index d3c0deb..7d4d167 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -2,7 +2,7 @@
 .empty {
   background: @bg-color;
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   text-align: center;
   padding: 4 * @layout-gutter;
 
diff --git a/src/forms.less b/src/forms.less
index dfb7502..0429118 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -22,9 +22,9 @@
 // Form element: Input
 .form-input {
   appearance: none;
-  background: @light-bg-color;
+  background: @bg-color-light;
   background-image: none;
-  border: @border-width solid @light-gray-color;
+  border: @border-width solid @border-color-dark;
   border-radius: @border-radius;
   color: @body-font-color;
   .control-transition();
@@ -43,13 +43,13 @@
 
   // Input sizes
   &.input-sm {
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     height: 2.4rem;
     padding: .1rem .8rem;
   }
 
   &.input-lg {
-    font-size: @lg-font-size;
+    font-size: @font-size-lg;
     height: 4rem;
     padding: .9rem .8rem;
   }
@@ -90,7 +90,7 @@
 // Form element: Select
 .form-select {
   appearance: none;
-  border: @border-width solid @light-gray-color;
+  border: @border-width solid @border-color-dark;
   border-radius: @border-radius;
   color: inherit;
   font-size: @font-size;
@@ -105,7 +105,7 @@
     }
   }
   &:not([multiple]) {
-    background: @light-bg-color url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
+    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
     padding-right: 2.4rem;
   }
@@ -118,13 +118,13 @@
 
   // Select sizes
   &.select-sm {
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     height: 2.4rem;
     padding: .1rem 2rem .1rem .6rem;
   }
 
   &.select-lg {
-    font-size: @lg-font-size;
+    font-size: @font-size-lg;
     height: 4rem;
     padding: .9rem 2.4rem .9rem .8rem;
   }
@@ -176,7 +176,7 @@
   }
 
   .form-icon {
-    border: @border-width solid @light-gray-color;
+    border: @border-width solid @border-color-dark;
     .control-transition();
     cursor: pointer;
     display: inline-block;
@@ -197,7 +197,7 @@
 
   input {
     &:active + .form-icon {
-      background: @dark-bg-color;
+      background: @bg-color-dark;
     }
   }
 }
@@ -210,7 +210,7 @@
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: .2rem solid @light-color;
+        border: .2rem solid @gray-color-lighter;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -228,7 +228,7 @@
       background: @primary-color;
       border-color: @primary-color;
       &::before {
-        background: @light-bg-color;
+        background: @bg-color-light;
         content: "";
         height: .2rem;
         left: 50%;
@@ -248,7 +248,7 @@
 
   input:checked + .form-icon {
     &::before {
-      background: @light-bg-color;
+      background: @bg-color-light;
       border-radius: @border-radius;
       content: "";
       height: .4rem;
@@ -267,7 +267,7 @@
   padding: .2rem 2rem .2rem 3.6rem;
 
   .form-icon {
-    background: @light-gray-color;
+    background: @gray-color-light;
     background-clip: padding-box;
     border-radius: .9rem;
     height: 1.8rem;
@@ -275,7 +275,7 @@
     top: .3rem;
     width: 3rem;
     &::before {
-      background: @light-bg-color;
+      background: @bg-color-light;
       border-radius: .8rem;
       content: "";
       display: block;
@@ -296,7 +296,7 @@
     }
     &:active + .form-icon {
       &::before {
-        background: @dark-bg-color;
+        background: @bg-color-dark;
       }
     }
   }
@@ -308,17 +308,17 @@
 
   .input-group-addon {
     background: @bg-color;
-    border: @border-width solid @light-gray-color;
+    border: @border-width solid @border-color-dark;
     border-radius: @border-radius;
     line-height: 2rem;
     padding: .5rem .8rem;
 
     &.addon-sm {
-      font-size: @sm-font-size;
+      font-size: @font-size-sm;
       padding: .1rem .8rem;
     }
     &.addon-lg {
-      font-size: @lg-font-size;
+      font-size: @font-size-lg;
       padding: .9rem .8rem;
     }
   }
@@ -358,7 +358,7 @@
 .form-select {
   &:disabled,
   &.disabled {
-    background-color: @dark-bg-color;
+    background-color: @bg-color-dark;
     cursor: not-allowed;
     opacity: .5;
   }
@@ -368,8 +368,8 @@ input {
   &:disabled,
   &.disabled {
     & + .form-icon {
-      background: @dark-bg-color;
-      border-color: @light-gray-color;
+      background: @bg-color-dark;
+      border-color: @gray-color-light;
       cursor: not-allowed;
       opacity: .5;
     }
@@ -381,7 +381,7 @@ input {
     &:disabled,
     &.disabled {
       & + .form-icon::before {
-        background: @light-bg-color;
+        background: @bg-color-light;
       }
     }
   }
diff --git a/src/labels.less b/src/labels.less
index ae4a1a7..7342108 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,7 +1,7 @@
 // Labels
 .label {
   background: @bg-color;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   .label-base();
 
   &.label-primary {
diff --git a/src/media.less b/src/media.less
index f9f1c37..43fdff3 100644
--- a/src/media.less
+++ b/src/media.less
@@ -52,7 +52,7 @@
   margin: 0 0 @layout-gutter 0;
 
   .figure-caption {
-    color: @dark-gray-color;
+    color: @gray-color-dark;
     margin-top: @layout-gutter;
   }
 }
diff --git a/src/menus.less b/src/menus.less
index c94438c..58d4013 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,18 +1,16 @@
 // Menus
 .menu {
-  background: @light-bg-color;
+  background: @bg-color-light;
   border-radius: @border-radius;
   list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: 1rem;
   .shadow;
-  text-align: left;
   transform: translateY(.5rem);
   z-index: 999;
 
   .menu-item {
-    border-radius: @border-radius;
     margin-top: 0;
     padding: 0 .8rem;
     text-decoration: none;
@@ -22,9 +20,8 @@
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      line-height: 2.4rem;
       margin: 0 -.8rem;
-      padding: .4rem .8rem;
+      padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -32,7 +29,7 @@
       }
       &:active,
       &.active {
-        background: @light-secondary-color;
+        background: @secondary-color-light;
         color: @primary-color;
       }
     }
@@ -40,10 +37,10 @@
 
   .menu-badge {
     float: right;
-    padding: .4rem 0;
+    padding: .6rem 0;
 
-    .label {
-      margin: .2rem 0;
+    .btn {
+      margin-top: -.2rem;
     }
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index b97ef42..573b942 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -25,5 +25,5 @@
 }
 .label-variant(@color) {
   background: @color;
-  color: @light-color;
+  color: @gray-color-lighter;
 }
diff --git a/src/modals.less b/src/modals.less
index a75f644..451db66 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -19,8 +19,9 @@
     z-index: 1988;
 
     .modal-overlay {
-      background: fade(@dark-color, 50%);
+      background: fade(@gray-color-darker, 50%);
       bottom: 0;
+      cursor: default;
       display: block;
       left: 0;
       position: absolute;
@@ -29,7 +30,7 @@
     }
 
     .modal-container {
-      animation: slide-down .2s;
+      animation: slide-down .2s ease-in 1;
       max-width: 64rem;
     }
   }
@@ -42,7 +43,7 @@
 }
 
 .modal-container {
-  background: @light-bg-color;
+  background: @bg-color-light;
   border-radius: @border-radius;
   display: block;
   margin: 0 auto;
@@ -55,7 +56,7 @@
     padding: @layout-padding;
 
     .modal-title {
-      font-size: @lg-font-size;
+      font-size: @font-size-lg;
       margin: 0;
     }
   }
diff --git a/src/navbar.less b/src/navbar.less
index cd1652a..ea565ef 100755
--- a/src/navbar.less
+++ b/src/navbar.less
@@ -22,7 +22,7 @@
   }
 
   .navbar-brand {
-    font-size: @lg-font-size;
+    font-size: @font-size-lg;
     font-weight: 500;
     text-decoration: none;
   }
diff --git a/src/navs.less b/src/navs.less
index 160d028..7dc3b87 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -5,7 +5,7 @@
 
   .nav-item {
     a {
-      color: @dark-gray-color;
+      color: @gray-color-dark;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
@@ -15,7 +15,7 @@
     }
     &.active {
       & > a {
-        color: @dark-gray-color;
+        color: @gray-color-dark;
         font-weight: bold;
         &:focus,
         &:hover {
diff --git a/src/pagination.less b/src/pagination.less
index 055c528..5521aeb 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -12,7 +12,7 @@
 
     a {
       border-radius: @border-radius;
-      color: @dark-gray-color;
+      color: @gray-color-dark;
       display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
@@ -31,7 +31,7 @@
     &.active {
       a {
         background: @primary-color;
-        color: @light-color;
+        color: @gray-color-lighter;
       }
     }
 
diff --git a/src/progress.less b/src/progress.less
index a59f9eb..9fca956 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,7 +2,7 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @dark-bg-color;
+  background: @bg-color-dark;
   border: 0;
   border-radius: @border-radius;
   color: @primary-color;
@@ -27,7 +27,7 @@
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @dark-bg-color linear-gradient(to right, @primary-color 30%, @dark-bg-color 30%) top left / 150% 150% no-repeat;
+    background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/sliders.less
index 6344374..a2d9a2f 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -50,34 +50,34 @@
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
     &::-moz-range-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
     &::-ms-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
   }
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @dark-bg-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @dark-bg-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-track {
-    background: @dark-bg-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
diff --git a/src/steps.less b/src/steps.less
index f9d6fc1..860cacb 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -31,7 +31,7 @@
 
       &::before {
         background: @primary-color;
-        border: .2rem solid @light-color;
+        border: .2rem solid @gray-color-lighter;
         border-radius: 50%;
         content: "";
         display: block;
@@ -48,7 +48,7 @@
     &.active {
       a {
         &::before {
-          background: @light-color;
+          background: @gray-color-lighter;
           border: .2rem solid @primary-color;
         }
       }
@@ -61,7 +61,7 @@
         a {
 
           &::before {
-            background: @light-gray-color;
+            background: @gray-color-light;
           }
         }
       }
diff --git a/src/tables.less b/src/tables.less
index 9bbf2dd..059a4da 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -17,7 +17,7 @@
     tbody {
       tr {
         &:hover {
-          background: @dark-bg-color;
+          background: @bg-color-dark;
         }
       }
     }
@@ -28,7 +28,7 @@
     tbody {
       tr {
         &.active {
-          background: @dark-bg-color;
+          background: @bg-color-dark;
         }
       }
     }
@@ -44,7 +44,7 @@
   }
 
   th {
-    border-bottom: .2rem solid @dark-gray-color;
+    border-bottom: .2rem solid @gray-color-dark;
     padding: 1.5rem 1rem;
   }
 }
diff --git a/src/toasts.less b/src/toasts.less
index ba0405b..f1246b9 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,11 +1,11 @@
 // Toasts
 .toast {
-  border: @border-width solid @dark-color;
+  border: @border-width solid @gray-color-darker;
   border-radius: @border-radius;
-  color: @light-color;
+  color: @gray-color-lighter;
   display: block;
   padding: 1.4rem;
-  .toast-variant(@dark-color);
+  .toast-variant(@gray-color-darker);
   width: 100%;
 
   &.toast-primary {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: @light-color;
+    color: @gray-color-lighter;
     text-decoration: underline;
 
     &:hover,
diff --git a/src/tooltips.less b/src/tooltips.less
index 39f7a22..890423f 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -2,13 +2,13 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(@dark-color, 90%);
+    background: fade(@gray-color-darker, 90%);
     border-radius: @border-radius;
     bottom: 100%;
-    color: @light-color;
+    color: @gray-color-lighter;
     content: attr(data-tooltip);
     display: block;
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     left: 50%;
     line-height: 1.6rem;
     max-width: 32rem;
diff --git a/src/typography.less b/src/typography.less
index 73165d6..924726e 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -92,8 +92,8 @@ mark {
   .label-base();
 }
 kbd {
-  background: @dark-color;
-  color: @light-color;
+  background: @gray-color-darker;
+  color: @gray-color-lighter;
   .label-base();
 }
 abbr[title] {
diff --git a/src/utilities.less b/src/utilities.less
index 7764020..c88face 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -7,11 +7,11 @@
   position: relative;
 
   &[data-content]::before {
-    background: @light-color;
-    color: @light-gray-color;
+    background: @gray-color-lighter;
+    color: @gray-color-light;
     content: attr(data-content);
     display: inline-block;
-    font-size: @sm-font-size;
+    font-size: @font-size-sm;
     padding: 0 .8rem;
     transform: translateY(-1.1rem);
   }
diff --git a/src/variables.less b/src/variables.less
index 097445c..3d59ec3 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,8 +6,8 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @font-size: 1.4rem;
-@sm-font-size: 1.2rem;
-@lg-font-size: 1.6rem;
+@font-size-sm: 1.2rem;
+@font-size-lg: 1.6rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -23,24 +23,29 @@
 @border-radius: .2rem;
 @border-width: .1rem;
 
+// Colors
 // Core colors
 @primary-color: #5764c6;
-@dark-primary-color: darken(@primary-color, 3%);
-@light-primary-color: lighten(@primary-color, 3%);
+@primary-color-dark: darken(@primary-color, 3%);
+@primary-color-light: lighten(@primary-color, 3%);
 @secondary-color: lighten(@primary-color, 40%);
-@dark-secondary-color: darken(@secondary-color, 3%);
-@light-secondary-color: lighten(@secondary-color, 3%);
-@dark-color: #333;
-@dark-gray-color: #666;
+@secondary-color-dark: darken(@secondary-color, 3%);
+@secondary-color-light: lighten(@secondary-color, 3%);
+
+// Gray colors
 @gray-color: #999;
-@light-gray-color: #ccc;
-@light-color: #fff;
+@gray-color-darker: darken(@gray-color, 40%);
+@gray-color-dark: darken(@gray-color, 20%);
+@gray-color-light: lighten(@gray-color, 20%);
+@gray-color-lighter: lighten(@gray-color, 40%);
+
 @link-color: @primary-color;
-@dark-link-color: darken(@link-color, 10%);
+@link-color-dark: darken(@link-color, 10%);
 @border-color: #efefef;
+@border-color-dark: darken(@border-color, 13%);
 @bg-color: #f8f8f8;
-@dark-bg-color: darken(@bg-color, 3%);
-@light-bg-color: #fff;
+@bg-color-dark: darken(@bg-color, 3%);
+@bg-color-light: #fff;
 
 // Control colors
 @control-color-success: #32b643;