CHG: Change colors into variables

24 files changed, 72 insertions, 72 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index 3a72dcc..cb095aa 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -11,7 +11,7 @@
     padding: .1rem 0 .1rem .2rem;
 
     &.is-focused {
-      border-color: @core-color;
+      border-color: @core-primary-color;
       .control-shadow();
     }
 
diff --git a/src/badges.less b/src/badges.less
index e274184..4828b49 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -6,7 +6,7 @@
   &[data-badge],
   &:not([data-badge]) {
     &::after {
-      background: @core-color;
+      background: @core-primary-color;
       background-clip: padding-box;
       border: .1rem solid #fff;
       border-radius: 1rem;
diff --git a/src/bars.less b/src/bars.less
index d410fdb..f76842f 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -13,7 +13,7 @@
 
   // TODO: attr() support
   .bar-item {
-    background: @core-color;
+    background: @core-primary-color;
     color: @core-light-color;
     display: block;
     font-size: 1.2rem;
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 14045da..52c340c 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -7,11 +7,11 @@
     margin: 0;
 
     &:last-child {
-      color: @core-meta-color;
+      color: @core-gray-color;
     }
     &:not(:first-child) {
       &::before {
-        color: @control-color;
+        color: @core-light-gray-color;
         content: "/";
         padding: 0 .4rem;
       }
diff --git a/src/buttons.less b/src/buttons.less
index a50411f..502f35b 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -2,7 +2,7 @@
 .btn {
   -webkit-appearance: none;
   background: #fff;
-  border: .1rem solid @core-color;
+  border: .1rem solid @core-primary-color;
   border-radius: @border-radius;
   color: @core-link-color;
   .control-transition();
@@ -22,37 +22,37 @@
     text-decoration: none;
   }
   &:hover {
-    background: @core-color;
-    border-color: darken(@core-color, 5%);
+    background: @core-primary-color;
+    border-color: @core-dark-primary-color;
     color: @core-light-color;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: darken(@core-color, 5%);
-    border-color: darken(@core-color, 10%);
+    background: @core-dark-primary-color;
+    border-color: darken(@core-dark-primary-color, 5%);
     color: @core-light-color;
   }
 
   // Button Primary
   &.btn-primary {
-    background: @core-color;
-    border-color: darken(@core-color, 5%);
+    background: @core-primary-color;
+    border-color: @core-dark-primary-color;
     color: @core-light-color;
     &:focus {
-      background: darken(@core-color, 4%);
-      border-color: darken(@core-color, 10%);
+      background: @core-dark-primary-color;
+      border-color: darken(@core-dark-primary-color, 5%);
       color: @core-light-color;
     }
     &:hover {
-      background: darken(@core-color, 6%);
-      border-color: darken(@core-color, 15%);
+      background: darken(@core-dark-primary-color, 2%);
+      border-color: darken(@core-dark-primary-color, 5%);
       color: @core-light-color;
     }
     &:active,
     &.active {
-      background: darken(@core-color, 8%);
-      border-color: darken(@core-color, 15%);
+      background: darken(@core-dark-primary-color, 4%);
+      border-color: darken(@core-dark-primary-color, 7%);
       color: @core-light-color;
     }
     &.loading {
@@ -71,11 +71,11 @@
     color: @core-link-color;
     &:focus,
     &:hover {
-      color: darken(@core-link-color, 15%);
+      color: @core-dark-link-color;
     }
     &:active,
     &.active {
-      color: darken(@core-link-color, 25%);
+      color: darken(@core-dark-link-color, 10%);
     }
   }
 
diff --git a/src/cards.less b/src/cards.less
index b0fe376..df5fe00 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -38,10 +38,10 @@
   }
   .card-title {
     font-size: 2rem;
-    line-height: 1;
+    line-height: 1.4;
   }
   .card-meta {
-    color: @core-meta-color;
+    color: @core-gray-color;
     font-size: 1.3rem;
   }
 }
diff --git a/src/chips.less b/src/chips.less
index 1e822bb..72267ba 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -3,7 +3,7 @@
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
-  color: @core-grey-color;
+  color: @core-dark-gray-color;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
@@ -13,7 +13,7 @@
   vertical-align: middle;
 
   &.active {
-    background: @core-color;
+    background: @core-primary-color;
     color: @core-light-color;
   }
 
diff --git a/src/codes.less b/src/codes.less
index a5be02e..633fd74 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -7,7 +7,7 @@ code {
 
 .code {
   border-radius: @border-radius;
-  color: @core-grey-color;
+  color: @core-dark-gray-color;
   line-height: 2rem;
   position: relative;
 
diff --git a/src/empty.less b/src/empty.less
index c1b1964..e170d9d 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -10,7 +10,7 @@
     margin: 1.5rem 0 .5rem 0;
   }
   .empty-meta {
-    color: @core-meta-color;
+    color: @core-gray-color;
   }
   .empty-action {
     margin-top: 1.5rem;
diff --git a/src/forms.less b/src/forms.less
index fe6d9fd..c7d81d5 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -22,7 +22,7 @@
   position: relative;
   width: 100%;
   &:focus {
-    border-color: @core-color;
+    border-color: @core-primary-color;
   }
   &[disabled] {
     background: @core-bg-color;
@@ -73,7 +73,7 @@
 
 // Form element: Input hint
 .form-input-hint {
-  color: @core-meta-color;
+  color: @core-gray-color;
   margin-top: .4rem;
 
   .has-success &,
@@ -116,7 +116,7 @@
     padding-right: 2.4rem;
   }
   &:focus {
-    border-color: @core-color;
+    border-color: @core-primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -160,7 +160,7 @@
     position: absolute;
     width: .1rem;
     &:focus + .form-icon {
-      border-color: @core-color;
+      border-color: @core-primary-color;
       .control-shadow();
     }
   }
@@ -188,14 +188,11 @@
     vertical-align: top;
     width: 1.4rem;
   }
-  &:hover .form-icon {
-    border-color: darken(@control-color, 20%);
-  }
 
   input {
     &:checked + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @core-primary-color;
+      border-color: @core-primary-color;
     }
     &:active + .form-icon {
       background: @core-border-color;
@@ -226,8 +223,8 @@
       }
     }
     &:indeterminate + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @core-primary-color;
+      border-color: @core-primary-color;
       &::after {
         background: #fff;
         content: "";
@@ -302,8 +299,8 @@
 
   input {
     &:checked + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @core-primary-color;
+      border-color: @core-primary-color;
       &::after {
         left: 1.2rem;
       }
@@ -321,7 +318,7 @@
   display: flex;
 
   .input-group-addon {
-    background: lighten(@core-border-color, 4%);
+    background: @core-bg-color;
     border: .1rem solid @control-color;
     border-radius: @border-radius;
     line-height: 1.6rem;
diff --git a/src/labels.less b/src/labels.less
index 917e602..0fd45e2 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,11 +1,11 @@
 // Labels
 .label {
   background: @core-bg-color;
-  color: @core-meta-color;
+  color: @core-dark-gray-color;
   .label-base();
 
   &.label-primary {
-    .label-variant(@core-color);
+    .label-variant(@core-primary-color);
   }
 
   &.label-success {
diff --git a/src/media.less b/src/media.less
index 1072304..3afc2a4 100644
--- a/src/media.less
+++ b/src/media.less
@@ -52,7 +52,7 @@
   margin: 0 0 @layout-gutter 0;
 
   .figure-caption {
-    color: @core-meta-color;
+    color: @core-dark-gray-color;
     margin-top: @layout-gutter;
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index bc6d97c..ffa7ed3 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -7,7 +7,7 @@
   }
 }
 .control-shadow() {
-  box-shadow: 0 0 0 .2rem fade(@core-color, 15%);
+  box-shadow: 0 0 0 .2rem fade(@core-primary-color, 15%);
 }
 .control-transition() {
   transition: all .2s ease;
diff --git a/src/navs.less b/src/navs.less
index 6f3d099..bafc8ce 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -5,12 +5,12 @@
 
   .nav-item {
     a {
-      color: lighten(@body-font-color, 20%);
+      color: @core-dark-gray-color;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-color;
+        color: @core-primary-color;
       }
     }
     &.active {
@@ -19,7 +19,7 @@
         font-weight: bold;
         &:focus,
         &:hover {
-          color: @core-color;
+          color: @core-primary-color;
         }
       }
     }
@@ -30,7 +30,7 @@
     margin-left: 2rem;
 
     a {
-      color: lighten(@body-font-color, 30%);
+      color: @core-gray-color;
     }
   }
 }
diff --git a/src/pagination.less b/src/pagination.less
index df41461..47cc000 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -12,19 +12,19 @@
 
     a {
       border-radius: @border-radius;
-      color: lighten(@body-font-color, 20%);
+      color: @core-dark-gray-color;
       display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-color;
+        color: @core-primary-color;
       }
     }
 
     &.active {
       a {
-        background: @core-color;
+        background: @core-primary-color;
         color: @core-light-color;
       }
     }
diff --git a/src/progress.less b/src/progress.less
index ed45c32..f622931 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -5,7 +5,7 @@
   background: @core-border-color;
   border: 0;
   border-radius: @border-radius;
-  color: @core-color;
+  color: @core-primary-color;
   height: .4rem;
   position: relative;
   width: 100%;
@@ -16,18 +16,18 @@
   }
 
   &::-webkit-progress-value {
-    background: @core-color;
+    background: @core-primary-color;
     border-radius: @border-radius;
   }
 
   &::-moz-progress-bar {
-    background: @core-color;
+    background: @core-primary-color;
     border-radius: @border-radius;
   }
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat;
+    background: @core-border-color linear-gradient(to right, @core-primary-color 30%, @core-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 5cb5d20..e4025ea 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -10,7 +10,7 @@
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: @core-color;
+    background: @core-primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -19,7 +19,7 @@
     width: 1.2rem;
   }
   &::-moz-range-thumb {
-    background: @core-color;
+    background: @core-primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -27,7 +27,7 @@
     width: 1.2rem;
   }
   &::-ms-thumb {
-    background: @core-color;
+    background: @core-primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -67,6 +67,6 @@
     width: 100%;
   }
   &::-ms-fill-lower {
-    background: @core-color;
+    background: @core-primary-color;
   }
 }
diff --git a/src/steps.less b/src/steps.less
index ded6ae4..c421a5a 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -14,7 +14,7 @@
     position: relative;
 
     &:not(:first-child)::before {
-      background: @core-color;
+      background: @core-primary-color;
       content: "";
       height: .2rem;
       left: -50%;
@@ -24,13 +24,13 @@
     }
 
     a {
-      color: @core-meta-color;
+      color: @core-gray-color;
       display: inline-block;
       padding: 2rem 1rem 0;
       text-decoration: none;
 
       &::before {
-        background: @core-color;
+        background: @core-primary-color;
         border: .2rem solid @core-light-color;
         border-radius: 50%;
         content: "";
@@ -49,7 +49,7 @@
       a {
         &::before {
           background: @core-light-color;
-          border: .2rem solid @core-color;
+          border: .2rem solid @core-primary-color;
         }
       }
 
diff --git a/src/tabs.less b/src/tabs.less
index cb172f4..f10e40a 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -28,7 +28,7 @@
     }
     &.active a,
     a.active {
-      border-bottom-color: @core-color;
+      border-bottom-color: @core-primary-color;
       color: @core-link-color;
     }
   }
diff --git a/src/tiles.less b/src/tiles.less
index 37b157b..f47cd46 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -26,7 +26,7 @@
     font-weight: 500;
   }
   .tile-meta {
-    color: @core-meta-color;
+    color: @core-gray-color;
     font-size: 1.3rem;
   }
 
diff --git a/src/toasts.less b/src/toasts.less
index 929edaa..8b94994 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -9,7 +9,7 @@
   width: 100%;
 
   &.toast-primary {
-    .toast-variant(@core-color);
+    .toast-variant(@core-primary-color);
   }
 
   &.toast-success {
diff --git a/src/typography.less b/src/typography.less
index af247f0..ce65205 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -48,7 +48,7 @@ blockquote {
   }
 
   cite {
-    color: lighten(@body-font-color, 50%);
+    color: @core-gray-color;
   }
 }
 ul,
diff --git a/src/utilities.less b/src/utilities.less
index 336a210..6bc2aad 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -13,7 +13,7 @@
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: .2rem solid @core-color;
+    border: .2rem solid @core-primary-color;
     border-radius: .8rem;
     border-right-color: transparent;
     border-top-color: transparent;
diff --git a/src/variables.less b/src/variables.less
index ccd4033..a2cce22 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -20,13 +20,16 @@
 @border-radius: .2rem;
 
 // Colors
-@core-color: #5764c6;
-@core-secondary-color: lighten(@core-color, 42%);
+@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-grey-color: #666;
+@core-dark-gray-color: #666;
+@core-gray-color: #999;
+@core-light-gray-color: #c5c5c5;
 @core-light-color: #fff;
-@core-meta-color: #888;
 @core-link-color: #5764c6;
+@core-dark-link-color: darken(@core-link-color, 5%);
 @core-border-color: #efefef;
 @core-bg-color: #f8f8f8;
 @control-color: #c5c5c5;