Simplify variables names

32 files changed, 156 insertions, 162 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index cb095aa..ce8b620 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -11,7 +11,7 @@
     padding: .1rem 0 .1rem .2rem;
 
     &.is-focused {
-      border-color: @core-primary-color;
+      border-color: @primary-color;
       .control-shadow();
     }
 
diff --git a/src/avatars.less b/src/avatars.less
index 9461abd..8eb9e5e 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -1,8 +1,8 @@
 // Avatars
 .avatar {
-  background: @core-primary-color;
+  background: @primary-color;
   border-radius: 50%;
-  color: @core-light-color;
+  color: @light-color;
   display: inline-block;
   font-size: 1.4rem;
   font-weight: 300;
@@ -43,7 +43,7 @@
   }
 
   .avatar-icon {
-    background: @core-light-bg-color;
+    background: @light-bg-color;
     bottom: -.2em;
     height: 50%;
     padding: 5%;
diff --git a/src/badges.less b/src/badges.less
index 4bcac9b..993bab6 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -6,11 +6,11 @@
   &[data-badge],
   &:not([data-badge]) {
     &::after {
-      background: @core-primary-color;
+      background: @primary-color;
       background-clip: padding-box;
-      border: .1rem solid @core-light-bg-color;
+      border: .1rem solid @light-bg-color;
       border-radius: 1rem;
-      color: @core-light-color;
+      color: @light-color;
       content: attr(data-badge);
       display: inline-block;
       transform: translate(-.4rem, -1rem);
diff --git a/src/bars.less b/src/bars.less
index f76842f..2569bce 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -1,6 +1,6 @@
 // Bars
 .bar {
-  background: @core-border-color;
+  background: @border-color;
   border-radius: @border-radius;
   display: flex;
   flex-wrap: nowrap;
@@ -13,8 +13,8 @@
 
   // TODO: attr() support
   .bar-item {
-    background: @core-primary-color;
-    color: @core-light-color;
+    background: @primary-color;
+    color: @light-color;
     display: block;
     font-size: 1.2rem;
     flex-shrink: 0;
diff --git a/src/base.less b/src/base.less
index cd99676..f10e5ae 100644
--- a/src/base.less
+++ b/src/base.less
@@ -22,12 +22,12 @@ body {
 }
 
 a {
-  color: @core-link-color;
+  color: @link-color;
   text-decoration: none;
 
   &:focus,
   &:hover {
-    color: darken(@core-link-color, 10%);
+    color: darken(@link-color, 10%);
     text-decoration: underline;
   }
 }
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 52c340c..a1d2c1a 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -7,11 +7,11 @@
     margin: 0;
 
     &:last-child {
-      color: @core-gray-color;
+      color: @gray-color;
     }
     &:not(:first-child) {
       &::before {
-        color: @core-light-gray-color;
+        color: @light-gray-color;
         content: "/";
         padding: 0 .4rem;
       }
diff --git a/src/buttons.less b/src/buttons.less
index 8b172a6..1c0a641 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,10 +1,10 @@
 // Buttons
 .btn {
   -webkit-appearance: none;
-  background: @core-light-bg-color;
-  border: .1rem solid @core-primary-color;
+  background: @light-bg-color;
+  border: .1rem solid @primary-color;
   border-radius: @border-radius;
-  color: @core-link-color;
+  color: @link-color;
   .control-transition();
   cursor: pointer;
   display: inline-block;
@@ -18,46 +18,46 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @core-secondary-color;
+    background: @secondary-color;
     text-decoration: none;
   }
   &:hover {
-    background: @core-primary-color;
-    border-color: @core-dark-primary-color;
-    color: @core-light-color;
+    background: @primary-color;
+    border-color: @dark-primary-color;
+    color: @light-color;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: @core-dark-primary-color;
-    border-color: darken(@core-dark-primary-color, 5%);
-    color: @core-light-color;
+    background: @dark-primary-color;
+    border-color: darken(@dark-primary-color, 5%);
+    color: @light-color;
   }
 
   // Button Primary
   &.btn-primary {
-    background: @core-primary-color;
-    border-color: @core-dark-primary-color;
-    color: @core-light-color;
+    background: @primary-color;
+    border-color: @dark-primary-color;
+    color: @light-color;
     &:focus {
-      background: @core-dark-primary-color;
-      border-color: darken(@core-dark-primary-color, 5%);
-      color: @core-light-color;
+      background: @dark-primary-color;
+      border-color: darken(@dark-primary-color, 5%);
+      color: @light-color;
     }
     &:hover {
-      background: darken(@core-dark-primary-color, 2%);
-      border-color: darken(@core-dark-primary-color, 5%);
-      color: @core-light-color;
+      background: darken(@dark-primary-color, 2%);
+      border-color: darken(@dark-primary-color, 5%);
+      color: @light-color;
     }
     &:active,
     &.active {
-      background: darken(@core-dark-primary-color, 4%);
-      border-color: darken(@core-dark-primary-color, 7%);
-      color: @core-light-color;
+      background: darken(@dark-primary-color, 4%);
+      border-color: darken(@dark-primary-color, 7%);
+      color: @light-color;
     }
     &.loading {
       &::after {
-        border-color: @core-light-color;
+        border-color: @light-color;
         border-right-color: transparent;
         border-top-color: transparent;
       }
@@ -68,14 +68,14 @@
   &.btn-link {
     background: transparent;
     border-color: transparent;
-    color: @core-link-color;
+    color: @link-color;
     &:focus,
     &:hover {
-      color: @core-dark-link-color;
+      color: @dark-link-color;
     }
     &:active,
     &.active {
-      color: darken(@core-dark-link-color, 10%);
+      color: darken(@dark-link-color, 10%);
     }
   }
 
diff --git a/src/cards.less b/src/cards.less
index 7f99ce7..2a655ab 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -1,7 +1,7 @@
 // Cards
 .card {
-  background: @core-light-bg-color;
-  border: .1rem solid @core-border-color;
+  background: @light-bg-color;
+  border: .1rem solid @border-color;
   border-radius: @border-radius;
   display: block;
   margin: 0;
@@ -41,7 +41,7 @@
     line-height: 1.4;
   }
   .card-meta {
-    color: @core-gray-color;
+    color: @gray-color;
     font-size: 1.3rem;
   }
 }
diff --git a/src/chips.less b/src/chips.less
index 72267ba..fca7437 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,9 +1,9 @@
 // Chips
 .chip {
   align-items: center;
-  background: @core-border-color;
+  background: @border-color;
   border-radius: @border-radius;
-  color: @core-dark-gray-color;
+  color: @dark-gray-color;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
@@ -13,8 +13,8 @@
   vertical-align: middle;
 
   &.active {
-    background: @core-primary-color;
-    color: @core-light-color;
+    background: @primary-color;
+    color: @light-color;
   }
 
   .avatar {
diff --git a/src/codes.less b/src/codes.less
index 633fd74..6525712 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -1,13 +1,13 @@
 // Codes
 code {
-  background: @core-bg-color;
+  background: @bg-color;
   color: @code-color;
   .label-base();
 }
 
 .code {
   border-radius: @border-radius;
-  color: @core-dark-gray-color;
+  color: @dark-gray-color;
   line-height: 2rem;
   position: relative;
 
diff --git a/src/empty.less b/src/empty.less
index 0e40d2d..d3c0deb 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,8 +1,8 @@
 // Empty states (or Blank slates)
 .empty {
-  background: @core-bg-color;
+  background: @bg-color;
   border-radius: @border-radius;
-  color: @core-dark-gray-color;
+  color: @dark-gray-color;
   text-align: center;
   padding: 4 * @layout-gutter;
 
@@ -12,7 +12,7 @@
   }
 
   .empty-meta {
-    color: @core-gray-color;
+    color: @gray-color;
   }
 
   .empty-action {
diff --git a/src/forms.less b/src/forms.less
index 429e0d3..42219b2 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -6,7 +6,7 @@
 // Form element: Input boxes
 .form-input {
   appearance: none;
-  background: @core-light-bg-color;
+  background: @light-bg-color;
   background-image: none;
   border: .1rem solid @control-color;
   border-radius: @border-radius;
@@ -22,10 +22,10 @@
   position: relative;
   width: 100%;
   &:focus {
-    border-color: @core-primary-color;
+    border-color: @primary-color;
   }
   &[disabled] {
-    background: @core-bg-color;
+    background: @bg-color;
   }
 
   // Input sizes
@@ -72,7 +72,7 @@
 
 // Form element: Input hint
 .form-input-hint {
-  color: @core-gray-color;
+  color: @gray-color;
   margin-top: .4rem;
 
   .has-success &,
@@ -110,12 +110,12 @@
     }
   }
   &:not([multiple]) {
-    background: @core-light-bg-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
+    background: @light-bg-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
     padding-right: 2.4rem;
   }
   &:focus {
-    border-color: @core-primary-color;
+    border-color: @primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -158,7 +158,7 @@
     position: absolute;
     width: .1rem;
     &:focus + .form-icon {
-      border-color: @core-primary-color;
+      border-color: @primary-color;
       .control-shadow();
     }
   }
@@ -189,11 +189,11 @@
 
   input {
     &:checked + .form-icon {
-      background: @core-primary-color;
-      border-color: @core-primary-color;
+      background: @primary-color;
+      border-color: @primary-color;
     }
     &:active + .form-icon {
-      background: @core-border-color;
+      background: @border-color;
     }
   }
 }
@@ -206,7 +206,7 @@
     &:checked + .form-icon {
       &::after {
         background-clip: padding-box;
-        border: .2rem solid @core-light-color;
+        border: .2rem solid @light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -221,10 +221,10 @@
       }
     }
     &:indeterminate + .form-icon {
-      background: @core-primary-color;
-      border-color: @core-primary-color;
+      background: @primary-color;
+      border-color: @primary-color;
       &::after {
-        background: @core-light-bg-color;
+        background: @light-bg-color;
         content: "";
         height: .2rem;
         left: 50%;
@@ -244,7 +244,7 @@
 
   input:checked + .form-icon {
     &::after {
-      background: @core-light-bg-color;
+      background: @light-bg-color;
       border-radius: @border-radius;
       content: "";
       height: .4rem;
@@ -282,7 +282,7 @@
     vertical-align: top;
     width: 3rem;
     &::after {
-      background: @core-light-bg-color;
+      background: @light-bg-color;
       border-radius: .8rem;
       content: "";
       display: block;
@@ -297,15 +297,15 @@
 
   input {
     &:checked + .form-icon {
-      background: @core-primary-color;
-      border-color: @core-primary-color;
+      background: @primary-color;
+      border-color: @primary-color;
       &::after {
         left: 1.2rem;
       }
     }
     &:active + .form-icon {
       &::after {
-        background: @core-border-color;
+        background: @border-color;
       }
     }
   }
@@ -316,7 +316,7 @@
   display: flex;
 
   .input-group-addon {
-    background: @core-bg-color;
+    background: @bg-color;
     border: .1rem solid @control-color;
     border-radius: @border-radius;
     line-height: 2rem;
diff --git a/src/labels.less b/src/labels.less
index 0fd45e2..3b2b58b 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,11 +1,11 @@
 // Labels
 .label {
-  background: @core-bg-color;
-  color: @core-dark-gray-color;
+  background: @bg-color;
+  color: @dark-gray-color;
   .label-base();
 
   &.label-primary {
-    .label-variant(@core-primary-color);
+    .label-variant(@primary-color);
   }
 
   &.label-success {
diff --git a/src/layout.less b/src/layout.less
index 05642aa..199bb73 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -6,16 +6,9 @@
   padding-right: @layout-gutter;
   width: 100%;
   &:extend(.clearfix all);
-}
-// Grid sizes
-@media screen and (min-width: (960px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-960 {
-    width: 96rem + 2 * @layout-gutter;
-  }
-}
-@media screen and (min-width: (480px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-480 {
-    width: 48rem + 2 * @layout-gutter;
+
+  &.grid-960 {
+    max-width: 96rem + 2 * @layout-gutter;
   }
 }
 
diff --git a/src/media.less b/src/media.less
index 3afc2a4..f9f1c37 100644
--- a/src/media.less
+++ b/src/media.less
@@ -52,7 +52,7 @@
   margin: 0 0 @layout-gutter 0;
 
   .figure-caption {
-    color: @core-dark-gray-color;
+    color: @dark-gray-color;
     margin-top: @layout-gutter;
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 513652a..b7cf1f6 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,6 +1,6 @@
 // Menus
 .menu {
-  background: @core-light-bg-color;
+  background: @light-bg-color;
   border-radius: @border-radius;
   list-style: none;
   margin: 0;
@@ -28,12 +28,12 @@
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-link-color;
+        color: @link-color;
       }
       &:active,
       &.active {
-        background: @core-secondary-color;
-        color: @core-dark-link-color;
+        background: @secondary-color;
+        color: @dark-link-color;
       }
     }
   }
@@ -47,7 +47,7 @@
     position: relative;
 
     &::after {
-      border-bottom: .1rem solid @core-border-color;
+      border-bottom: .1rem solid @border-color;
       content: "";
       display: block;
       height: .1rem;
@@ -57,7 +57,7 @@
     }
 
     .menu-header-text {
-      background: @core-light-bg-color;
+      background: @light-bg-color;
       display: inline-block;
       padding: 0 .8rem;
       position: relative;
diff --git a/src/meters.less b/src/meters.less
index ada4371..6251773 100644
--- a/src/meters.less
+++ b/src/meters.less
@@ -2,7 +2,7 @@
 // Credit: https://css-tricks.com/html5-meter-element/
 .meter {
   appearance: none;
-  background: @core-bg-color;
+  background: @bg-color;
   border: 0;
   display: block;
   width: 100%;
@@ -20,7 +20,7 @@
   }
 
   &::-webkit-meter-bar {
-    background: @core-bg-color;
+    background: @bg-color;
   }
 
   &::-webkit-meter-optimum-value {
@@ -43,7 +43,7 @@
   }
 
   &::-moz-meter-bar {
-    background: @core-bg-color;
+    background: @bg-color;
   }
 
   &:-moz-meter-optimum {
diff --git a/src/mixins.less b/src/mixins.less
index d335620..283df97 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -7,7 +7,7 @@
   }
 }
 .control-shadow() {
-  box-shadow: 0 0 0 .2rem fade(@core-primary-color, 15%);
+  box-shadow: 0 0 0 .2rem fade(@primary-color, 15%);
 }
 .control-transition() {
   transition: all .2s ease;
@@ -25,5 +25,5 @@
 }
 .label-variant(@color) {
   background: @color;
-  color: @core-light-color;
+  color: @light-color;
 }
diff --git a/src/modals.less b/src/modals.less
index 9f45f53..ad679cf 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -19,7 +19,7 @@
     z-index: 1988;
 
     .modal-overlay {
-      background: fade(@core-dark-color, 50%);
+      background: fade(@dark-color, 50%);
       bottom: 0;
       display: block;
       left: 0;
@@ -42,7 +42,7 @@
 }
 
 .modal-container {
-  background: @core-light-bg-color;
+  background: @light-bg-color;
   border-radius: @border-radius;
   display: block;
   margin: 0 auto;
diff --git a/src/navs.less b/src/navs.less
index bafc8ce..f022fcc 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -5,12 +5,12 @@
 
   .nav-item {
     a {
-      color: @core-dark-gray-color;
+      color: @dark-gray-color;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-primary-color;
+        color: @primary-color;
       }
     }
     &.active {
@@ -19,7 +19,7 @@
         font-weight: bold;
         &:focus,
         &:hover {
-          color: @core-primary-color;
+          color: @primary-color;
         }
       }
     }
@@ -30,7 +30,7 @@
     margin-left: 2rem;
 
     a {
-      color: @core-gray-color;
+      color: @gray-color;
     }
   }
 }
diff --git a/src/pagination.less b/src/pagination.less
index 47cc000..cdd2f12 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -12,20 +12,20 @@
 
     a {
       border-radius: @border-radius;
-      color: @core-dark-gray-color;
+      color: @dark-gray-color;
       display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-primary-color;
+        color: @primary-color;
       }
     }
 
     &.active {
       a {
-        background: @core-primary-color;
-        color: @core-light-color;
+        background: @primary-color;
+        color: @light-color;
       }
     }
 
diff --git a/src/progress.less b/src/progress.less
index f622931..ff0138b 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,10 +2,10 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @core-border-color;
+  background: @border-color;
   border: 0;
   border-radius: @border-radius;
-  color: @core-primary-color;
+  color: @primary-color;
   height: .4rem;
   position: relative;
   width: 100%;
@@ -16,18 +16,18 @@
   }
 
   &::-webkit-progress-value {
-    background: @core-primary-color;
+    background: @primary-color;
     border-radius: @border-radius;
   }
 
   &::-moz-progress-bar {
-    background: @core-primary-color;
+    background: @primary-color;
     border-radius: @border-radius;
   }
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @core-border-color linear-gradient(to right, @core-primary-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat;
+    background: @border-color linear-gradient(to right, @primary-color 30%, @border-color 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/sliders.less
index e4025ea..7093cab 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -10,7 +10,7 @@
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: @core-primary-color;
+    background: @primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -19,7 +19,7 @@
     width: 1.2rem;
   }
   &::-moz-range-thumb {
-    background: @core-primary-color;
+    background: @primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -27,7 +27,7 @@
     width: 1.2rem;
   }
   &::-ms-thumb {
-    background: @core-primary-color;
+    background: @primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -49,24 +49,24 @@
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-fill-lower {
-    background: @core-primary-color;
+    background: @primary-color;
   }
 }
diff --git a/src/steps.less b/src/steps.less
index c421a5a..543829e 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -14,7 +14,7 @@
     position: relative;
 
     &:not(:first-child)::before {
-      background: @core-primary-color;
+      background: @primary-color;
       content: "";
       height: .2rem;
       left: -50%;
@@ -24,14 +24,14 @@
     }
 
     a {
-      color: @core-gray-color;
+      color: @gray-color;
       display: inline-block;
       padding: 2rem 1rem 0;
       text-decoration: none;
 
       &::before {
-        background: @core-primary-color;
-        border: .2rem solid @core-light-color;
+        background: @primary-color;
+        border: .2rem solid @light-color;
         border-radius: 50%;
         content: "";
         display: block;
@@ -48,14 +48,14 @@
     &.active {
       a {
         &::before {
-          background: @core-light-color;
-          border: .2rem solid @core-primary-color;
+          background: @light-color;
+          border: .2rem solid @primary-color;
         }
       }
 
       & ~ .step-item {
         &::before {
-          background: @core-border-color;
+          background: @border-color;
         }
 
         a {
diff --git a/src/tables.less b/src/tables.less
index 60b33d9..d4c55b9 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -8,7 +8,7 @@
   &.table-striped {
     tbody {
       tr:nth-of-type(odd) {
-        background: @core-bg-color;
+        background: @bg-color;
       }
     }
   }
@@ -16,7 +16,7 @@
     tbody {
       tr {
         &:hover {
-          background: darken(@core-bg-color, 3%);
+          background: @dark-bg-color;
         }
       }
     }
@@ -26,17 +26,17 @@
     tbody {
       tr {
         &.active {
-          background: darken(@core-bg-color, 3%);
+          background: @dark-bg-color;
         }
       }
     }
   }
   th,
   td {
-    border-bottom: .1rem solid @core-border-color;
+    border-bottom: .1rem solid @border-color;
     padding: 1.5rem 1rem;
   }
   th {
-    border-color: darken(@core-border-color, 5%);
+    border-color: darken(@border-color, 5%);
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index f10e40a..6bcc58c 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,7 +1,7 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: .1rem solid @core-border-color;
+  border-bottom: .1rem solid @border-color;
   display: flex;
   flex-wrap: wrap;
 
@@ -23,13 +23,13 @@
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-link-color;
+        color: @link-color;
       }
     }
     &.active a,
     a.active {
-      border-bottom-color: @core-primary-color;
-      color: @core-link-color;
+      border-bottom-color: @primary-color;
+      color: @link-color;
     }
   }
 
diff --git a/src/tiles.less b/src/tiles.less
index 2df3434..e43fd6b 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -24,7 +24,7 @@
     font-weight: 500;
   }
   .tile-meta {
-    color: @core-gray-color;
+    color: @gray-color;
   }
 
   &.tile-centered {
diff --git a/src/toasts.less b/src/toasts.less
index 8b94994..1936b0e 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,15 +1,15 @@
 // Toasts
 .toast {
-  border: .1rem solid @core-dark-color;
+  border: .1rem solid @dark-color;
   border-radius: @border-radius;
-  color: @core-light-color;
+  color: @light-color;
   display: block;
   padding: 1.4rem;
-  .toast-variant(@core-dark-color);
+  .toast-variant(@dark-color);
   width: 100%;
 
   &.toast-primary {
-    .toast-variant(@core-primary-color);
+    .toast-variant(@primary-color);
   }
 
   &.toast-success {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: @core-light-color;
+    color: @light-color;
     text-decoration: underline;
 
     &:hover,
diff --git a/src/tooltips.less b/src/tooltips.less
index f9cadb4..2881e2a 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -2,10 +2,10 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(@core-dark-color, 90%);
+    background: fade(@dark-color, 90%);
     border-radius: @border-radius;
     bottom: 100%;
-    color: @core-light-color;
+    color: @light-color;
     content: attr(data-tooltip);
     display: block;
     font-size: 1.2rem;
diff --git a/src/typography.less b/src/typography.less
index 2e0ee99..0bce444 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -39,7 +39,7 @@ u {
   text-decoration-skip: ink edges;
 }
 blockquote {
-  border-left: .2rem solid @core-border-color;
+  border-left: .2rem solid @border-color;
   margin-left: 0;
   padding: 1rem 2rem;
 
@@ -48,7 +48,7 @@ blockquote {
   }
 
   cite {
-    color: @core-gray-color;
+    color: @gray-color;
   }
 }
 ul,
@@ -92,8 +92,8 @@ mark {
   .label-base();
 }
 kbd {
-  background: @core-dark-color;
-  color: @core-light-color;
+  background: @dark-color;
+  color: @light-color;
   .label-base();
 }
 abbr[title] {
diff --git a/src/utilities.less b/src/utilities.less
index 458b362..fe98dd6 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,6 +1,6 @@
 // Divider
 .divider {
-  border-bottom: .1rem solid @core-border-color;
+  border-bottom: .1rem solid @border-color;
   display: block;
   margin: .8rem 0;
 }
@@ -13,7 +13,7 @@
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: .2rem solid @core-primary-color;
+    border: .2rem solid @primary-color;
     border-radius: .8rem;
     border-right-color: transparent;
     border-top-color: transparent;
diff --git a/src/variables.less b/src/variables.less
index 98417c9..e6d3453 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -20,19 +20,20 @@
 @border-radius: .2rem;
 
 // Colors
-@core-primary-color: #5764c6;
-@core-dark-primary-color: darken(@core-primary-color, 5%);
-@core-secondary-color: lighten(@core-primary-color, 42%);
-@core-dark-color: #333;
-@core-dark-gray-color: #666;
-@core-gray-color: #999;
-@core-light-gray-color: #c5c5c5;
-@core-light-color: #fff;
-@core-link-color: @core-primary-color;
-@core-dark-link-color: darken(@core-link-color, 5%);
-@core-border-color: #efefef;
-@core-bg-color: #f8f8f8;
-@core-light-bg-color: #fff;
+@primary-color: #5764c6;
+@dark-primary-color: darken(@primary-color, 5%);
+@secondary-color: lighten(@primary-color, 42%);
+@dark-color: #333;
+@dark-gray-color: #666;
+@gray-color: #999;
+@light-gray-color: #c5c5c5;
+@light-color: #fff;
+@link-color: @primary-color;
+@dark-link-color: darken(@link-color, 5%);
+@border-color: #efefef;
+@bg-color: #f8f8f8;
+@dark-bg-color: darken(@bg-color, 3%);
+@light-bg-color: #fff;
 @control-color: #c5c5c5;
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;