CHG: Switch colors into variables again

8 files changed, 14 insertions, 13 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 801e1b4..d51ab02 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -42,7 +42,7 @@
   }
 
   .avatar-icon {
-    background: #fff;
+    background: @core-light-bg-color;
     bottom: -.2em;
     height: 50%;
     padding: 5%;
diff --git a/src/badges.less b/src/badges.less
index 4828b49..4bcac9b 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -8,7 +8,7 @@
     &::after {
       background: @core-primary-color;
       background-clip: padding-box;
-      border: .1rem solid #fff;
+      border: .1rem solid @core-light-bg-color;
       border-radius: 1rem;
       color: @core-light-color;
       content: attr(data-badge);
diff --git a/src/buttons.less b/src/buttons.less
index 502f35b..8b172a6 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,7 +1,7 @@
 // Buttons
 .btn {
   -webkit-appearance: none;
-  background: #fff;
+  background: @core-light-bg-color;
   border: .1rem solid @core-primary-color;
   border-radius: @border-radius;
   color: @core-link-color;
diff --git a/src/cards.less b/src/cards.less
index df5fe00..7f99ce7 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -1,6 +1,6 @@
 // Cards
 .card {
-  background: #fff;
+  background: @core-light-bg-color;
   border: .1rem solid @core-border-color;
   border-radius: @border-radius;
   display: block;
diff --git a/src/forms.less b/src/forms.less
index c7d81d5..2ef215e 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -6,7 +6,7 @@
 // Form element: Input boxes
 .form-input {
   appearance: none;
-  background: #fff;
+  background: @core-light-bg-color;
   background-image: none;
   border: .1rem solid @control-color;
   border-radius: @border-radius;
@@ -111,7 +111,7 @@
     }
   }
   &:not([multiple]) {
-    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
+    background: @core-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;
   }
@@ -208,7 +208,7 @@
     &:checked + .form-icon {
       &::after {
         background-clip: padding-box;
-        border: .2rem solid #fff;
+        border: .2rem solid @core-light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -226,7 +226,7 @@
       background: @core-primary-color;
       border-color: @core-primary-color;
       &::after {
-        background: #fff;
+        background: @core-light-bg-color;
         content: "";
         height: .2rem;
         left: 50%;
@@ -246,7 +246,7 @@
 
   input:checked + .form-icon {
     &::after {
-      background: #fff;
+      background: @core-light-bg-color;
       border-radius: @border-radius;
       content: "";
       height: .4rem;
@@ -284,7 +284,7 @@
     vertical-align: top;
     width: 3rem;
     &::after {
-      background: #fff;
+      background: @core-light-bg-color;
       border-radius: .8rem;
       content: "";
       display: block;
diff --git a/src/menus.less b/src/menus.less
index 1753ef8..ab09107 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,6 +1,6 @@
 // Menus
 .menu {
-  background: #fff;
+  background: @core-light-bg-color;
   border-radius: @border-radius;
   display: block;
   margin: 0;
@@ -56,7 +56,7 @@
     }
 
     .menu-header-text {
-      background: #fff;
+      background: @core-light-bg-color;
       display: inline-block;
       margin-left: -.6rem;
       padding: 0 .6rem;
diff --git a/src/modals.less b/src/modals.less
index 0e8a6ba..9f45f53 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -42,7 +42,7 @@
 }
 
 .modal-container {
-  background: #fff;
+  background: @core-light-bg-color;
   border-radius: @border-radius;
   display: block;
   margin: 0 auto;
diff --git a/src/variables.less b/src/variables.less
index a2cce22..26ae55e 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -32,6 +32,7 @@
 @core-dark-link-color: darken(@core-link-color, 5%);
 @core-border-color: #efefef;
 @core-bg-color: #f8f8f8;
+@core-light-bg-color: #fff;
 @control-color: #c5c5c5;
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;