diff --git a/Gemfile.lock b/Gemfile.lock
index 75d65a9bb85..4b2f5efd72d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -484,6 +484,3 @@ DEPENDENCIES
   uglifier
   unf
   unicorn
-
-BUNDLED WITH
-   1.10.3
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 580ff074e51..a15ec7093d0 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -7,8 +7,8 @@
   width: 100%;
   tr {text-align: left;}
   td, th {padding: 8px;}
-  th {border-top: 1px solid scale-color-diff();}
-  td {border-bottom: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();}
+  th {border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);}
+  td {border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);}
   tr:hover { background-color: darken($secondary, 2.5%); }
   tr.selected { background-color: lighten($primary, 80%); }
   .filters input { margin-bottom: 0; }
@@ -23,7 +23,7 @@ td.flaggers td {
   font-size: 0.857em;
   float: right;
   margin-right: 10px;
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 2px 5px;
   border-radius: 5px;
   color: $primary;
@@ -107,7 +107,7 @@ td.flaggers td {
   .nav.nav-pills {
     li.active {
       a {
-        border-color: scale-color-diff();
+        border-color: dark-light-diff($primary, $secondary, 90%, -60%);
         background-color: lighten($primary, 40%);
         &:hover {
           background-color: lighten($primary, 40%);
@@ -198,7 +198,7 @@ td.flaggers td {
   width: 76.5765%;
   min-height: 800px;
   margin-left: 0;
-  border-left: solid 1px scale-color-diff();
+  border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 30px 0 30px 30px;
 }
 
@@ -233,7 +233,7 @@ td.flaggers td {
       width: 408px;
       padding: 1px;
       background-color: $secondary;
-      border: 1px solid scale-color-diff();
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
       transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -301,7 +301,7 @@ section.details {
     color: $primary;
     padding: 5px 10px;
     margin: 30px 0 5px 0;
-    border-bottom: 5px solid scale-color-diff();
+    border-bottom: 5px solid dark-light-diff($primary, $secondary, 90%, -60%);
   }
 }
 
@@ -333,7 +333,7 @@ section.details {
   &.highlight-danger {
     background-color: scale-color($danger, $lightness: 50%);
   }
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   &:before, &:after {
     display: table;
     content: "";
@@ -436,14 +436,14 @@ section.details {
     font-size: 1em;
     line-height: 16px;
     padding: 4px;
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   }
 
   .badge-query-plan {
     font-size: 0.857em;
     line-height: 13px;
     padding: 4px;
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   }
 
   .count-warning {
@@ -892,7 +892,7 @@ table.api-keys {
 
 
 .commits-widget {
-  border: solid 1px scale-color-diff();
+  border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
   height: 180px;
   margin-bottom: 36px;
 
@@ -938,7 +938,7 @@ table.api-keys {
       @extend .clearfix;
       line-height: 1.0em;
       padding: 6px 8px;
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
       .left {
         float: left;
       }
@@ -948,7 +948,7 @@ table.api-keys {
 
       img {
         margin-top: 2px;
-        border: solid 1px scale-color-diff();
+        border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
         padding: 2px;
         background-color: $secondary;
       }
@@ -983,7 +983,7 @@ table.api-keys {
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
-    border-left: solid 1px scale-color-diff();
+    border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
   }
 }
 
@@ -1001,10 +1001,10 @@ table.api-keys {
     margin: 0;
 
     li:first-of-type {
-      border-top: 1px solid scale-color-diff();
+      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     }
     li {
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     }
 
     li a {
@@ -1013,7 +1013,7 @@ table.api-keys {
       color: $primary;
 
       &:hover {
-        background-color: scale-color-diff();
+        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
         color: $primary;
       }
 
@@ -1174,7 +1174,7 @@ table.api-keys {
     color: $primary;
     &:hover {
       color: $primary;
-      background-color: scale-color-diff();
+      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
 
 
     }
@@ -1208,7 +1208,7 @@ table.api-keys {
 
   .heading-container {
     width: 100%;
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   }
   .col.heading {
     font-weight: bold;
@@ -1224,7 +1224,7 @@ table.api-keys {
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px scale-color-diff();
+    border-top: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
   }
 }
 
@@ -1414,7 +1414,7 @@ tr.not-activated {
   .user-field {
     padding: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid scale-color-diff();
+    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
     .form-display {
       width: 25%;
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 028fc1b1c61..0b857b0cd45 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -195,7 +195,7 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   background-color: $secondary;
   z-index: 100;
 
@@ -244,7 +244,7 @@ ol.category-breadcrumb {
 
     @include unselectable;
 
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     padding: 5px;
     background: $secondary;
     position: absolute;
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index e99830d88d0..6bcf8ae659d 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -18,7 +18,7 @@
     max-width: 300px;
 
     .colorpicker {
-      border: 1px solid scale-color-diff();
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       margin-right: 2px;
       width: 16px;
       height: 16px;
diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss
index 82c982ffbe2..aa3d7d02fe3 100644
--- a/app/assets/stylesheets/common/base/combobox.scss
+++ b/app/assets/stylesheets/common/base/combobox.scss
@@ -28,7 +28,7 @@
 
 .select2-container {
   border-radius: 3px;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   &.select2-dropdown-open {
     border: 0;
   }
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 6078bda7214..44ed6e91202 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -3,13 +3,13 @@
   position: absolute;
   width: 240px;
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
     li {
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       a[href] {
         padding: 5px;
         display: block;
@@ -50,7 +50,7 @@ div.ac-wrap.disabled {
 
 div.ac-wrap {
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px 4px 1px 4px;
   div.item {
     float: left;
@@ -69,7 +69,7 @@ div.ac-wrap {
       border-radius: 12px;
       width: 10px;
       display: inline-block;
-      border: 1px solid scale-color-diff();
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       &:hover {
         background-color: scale-color($danger, $lightness: 75%);
         border: 1px solid scale-color($danger, $lightness: 30%);
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 67c6c2c87c2..7170b092188 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -22,7 +22,7 @@
     td, th {
       padding: 0.5em;
       text-align: left;
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
       .number, .time-read {
         font-size: 1.4em;
@@ -54,7 +54,7 @@
       }
 
       &:hover {
-        background-color: scale-color-diff();
+        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 57736cd5655..d7938766e57 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -149,10 +149,10 @@ body {
   width: 540px;
   background-color: $secondary;
   padding: 0 10px 13px 10px;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   .preview {
     margin-top: 8px;
-    border: 1px dashed scale-color-diff();
+    border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
     padding: 8px 8px 0 8px;
     p {
       margin: 0 0 10px 0;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index f19fe23076c..205ef7bb288 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -72,14 +72,14 @@
 
         &:hover {
           color: $primary;
-          background-color:  scale-color-diff();
+          background-color:  dark-light-diff($primary, $secondary, 90%, -60%);
           border-top: 1px solid transparent;
           border-left: 1px solid transparent;
           border-right: 1px solid transparent;
         }
         &:active {
           color: $primary;
-          background-color: scale-color-diff();
+          background-color: dark-light-diff($primary, $secondary, 90%, -60%);
         }
       }
       .active .icon {
@@ -87,9 +87,9 @@
         color: #7b7b7b;
         background-color: $secondary;
         cursor: default;
-        border-top: 1px solid scale-color-diff();
-        border-left: 1px solid scale-color-diff();
-        border-right: 1px solid scale-color-diff();
+        border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
         &:after {
           display: block;
           position: absolute;
@@ -143,7 +143,7 @@
     right: 0;
     z-index: 1100;
     overflow: auto;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     padding: 5px;
 
     box-shadow: 0 2px 2px rgba(0,0,0, .4);
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index f53892d2ad5..7f31ee5d959 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -64,8 +64,8 @@
   max-width: 710px;
   margin: 0 auto;
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
   box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;
@@ -91,7 +91,7 @@
 }
 .modal-footer {
   padding: 14px 15px 15px;
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 }
 .modal-footer:before,
 .modal-footer:after {
@@ -109,7 +109,7 @@
     li > a {
       font-size: 1em;
     }
-    border-bottom: 1px solid scale-color-diff();
+    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
   }
 
@@ -168,7 +168,7 @@
         font-weight: normal;
       }
       &.btn-reply-here {
-        background: scale-color-diff();
+        background: dark-light-diff($primary, $secondary, 90%, -60%);
         text-shadow: none;
         color: $primary;
       }
diff --git a/app/assets/stylesheets/common/base/pagedown.scss b/app/assets/stylesheets/common/base/pagedown.scss
index ec26be9829b..46d13cee7b3 100644
--- a/app/assets/stylesheets/common/base/pagedown.scss
+++ b/app/assets/stylesheets/common/base/pagedown.scss
@@ -27,7 +27,7 @@
   height: 20px;
   margin-right: 8px;
   margin-left: 5px;
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   display: inline-block;
   float: left;
 }
@@ -63,7 +63,7 @@
 }
 
 .wmd-button:hover {
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
 }
 
 
@@ -130,8 +130,8 @@
 }
 
 .wmd-prompt-dialog {
-  border: 1px solid scale-color-diff();
-  background-color: scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
 }
 
 .wmd-prompt-dialog > div {
@@ -140,12 +140,12 @@
 }
 
 .wmd-prompt-dialog > form > input[type="text"] {
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   color: $primary;
 }
 
 .wmd-prompt-dialog > form > input[type="button"] {
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   font-family: trebuchet MS, helvetica, sans-serif;
   font-size: 0.8em;
   font-weight: bold;
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 3301a1ea086..fb7b3b6f933 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -12,7 +12,7 @@
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   z-index: 1001;
 
   ul {
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 18f869b73af..2b4ac55a247 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -172,7 +172,7 @@ pre {
 kbd
 {
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0,0,0, .8);
   color: $primary;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 0ce5a3b128a..24691c940e6 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -67,7 +67,7 @@
 /* Badge listing in /badges. */
 table.badges-listing {
   margin: 20px 0;
-  border-bottom: 1px solid scale-color-diff();
+  border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   width: 90%;
 
   .user-badge {
@@ -112,7 +112,7 @@ table.badges-listing {
   }
 
   tr {
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   }
 }
 
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index c4106aa28ee..0964956a8b9 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -55,7 +55,7 @@
     color: #fff;
   }
   &[disabled] {
-    background: scale-color-diff();
+    background: dark-light-diff($primary, $secondary, 90%, -60%);
     &:hover { color: scale-color($primary, $lightness: 70%); }
     cursor: not-allowed;
   }
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index bec9a6395ce..b4267e703fe 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -41,7 +41,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index f16f13f4feb..01e77684b36 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -42,12 +42,3 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
     @return scale-color($adjusted-color, $lightness: $darkness);
   }
 }
-
-// phasing out scale-color-diff for dark-light-diff
-@function scale-color-diff() {
-  @if lightness($primary) < lightness($secondary) {
-    @return scale-color($primary, $lightness: 90%);
-  } @else {
-    @return scale-color($primary, $lightness: -60%);
-  }
-}
diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss
index b00d025168f..8316aae9eb9 100644
--- a/app/assets/stylesheets/common/topic-entrance.scss
+++ b/app/assets/stylesheets/common/topic-entrance.scss
@@ -1,6 +1,6 @@
 #topic-entrance {
 
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px;
   background: $secondary;
   box-shadow: 0 0px 2px rgba(0,0,0, .2);
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 032f6f505b6..be6ffebe7e6 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -103,7 +103,7 @@
   width: 100%;
   z-index: 1039;
   height: 0;
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   bottom: 0;
   font-size: 1em;
   position: fixed;
@@ -147,7 +147,7 @@
   &.draft {
     height: 40px !important;
     cursor: pointer;
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     .draft-text {
       display: block;
     }
@@ -160,7 +160,7 @@
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     .saving-text {
       display: block;
     }
@@ -255,18 +255,18 @@
       margin-right: 10px;
       float: left;
       &:disabled {
-        background-color: scale-color-diff();
+        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
       }
     }
     #wmd-input:disabled {
-      background-color: scale-color-diff();
+      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
     }
     #wmd-input, #wmd-preview {
       color: $primary;
     }
 
     #wmd-preview {
-      border: 1px dashed scale-color-diff();
+      border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
       overflow: auto;
       visibility: visible;
       cursor: default;
@@ -303,7 +303,7 @@
   .show-admin-options {
     vertical-align: top;
     margin-top: 8px;
-    background: scale-color-diff();
+    background: dark-light-diff($primary, $secondary, 90%, -60%);
   &:hover {
     color: $secondary;
     background: $primary;
@@ -405,7 +405,7 @@
   #wmd-button-bar {
     top: 0;
     position: absolute;
-    border-bottom: 1px solid scale-color-diff();
+    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     background-color: $secondary;
     z-index: 100;
   }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 63af52754a6..52997e7b1f0 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -77,14 +77,14 @@ body {
 
   .grippie {
     width: 100%;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     border-width: 1px 0;
     cursor: row-resize;
     height: 11px;
     overflow: hidden;
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
     display:block;
-    background: image-url("grippie.png") scale-color-diff() no-repeat center 3px;
+    background: image-url("grippie.png") dark-light-diff($primary, $secondary, 90%, -60%) no-repeat center 3px;
   }
 }
 
@@ -194,7 +194,7 @@ body {
     width: 210px;
     height: auto;
     background-color:$secondary;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
     transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -202,7 +202,7 @@ body {
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
       background-color: $secondary;
-      border: 1px solid scale-color-diff();
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
       transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -238,7 +238,7 @@ body {
 
   select {
     width: 220px;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     &[multiple], &[size] {
       height: auto;
     }
@@ -288,8 +288,8 @@ body {
   }
   input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
     cursor: not-allowed;
-    background-color: scale-color-diff();
-    border-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    border-color: dark-light-diff($primary, $secondary, 90%, -60%);
   }
   input {
     &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@@ -388,7 +388,7 @@ body {
     text-align: center;
     vertical-align: middle;
     background-color: $secondary;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   }
   .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
     margin-left: -1px;
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index b5c775d4c8a..6bb1e3b62f3 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -35,7 +35,7 @@ and (max-width : 570px) {
   // Common
 
   .heading {
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   }
 
   // Categories
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index d203f83ac0b..68cba56e30b 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -21,7 +21,7 @@
   #revision-details {
     padding: 5px;
     margin-top: 10px;
-    border-bottom: 3px solid scale-color-diff();
+    border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
   }
   #revisions {
     word-wrap: break-word;
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index ae3c1f80a31..6cea03dbda6 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -16,8 +16,8 @@
   height: auto;
   margin: -250px 0 0 -305px;
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
   box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;
@@ -54,7 +54,7 @@
 }
 
 .modal-header {
-  border-bottom: 1px solid scale-color-diff();
+  border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   h3 {
     font-size: 1.429em;
     padding: 10px 15px 7px;
diff --git a/app/assets/stylesheets/desktop/queued-posts.scss b/app/assets/stylesheets/desktop/queued-posts.scss
index d927ce5b4c6..d76f8a4e810 100644
--- a/app/assets/stylesheets/desktop/queued-posts.scss
+++ b/app/assets/stylesheets/desktop/queued-posts.scss
@@ -31,7 +31,7 @@
       }
     }
     .post-title {
-      color: darken(scale-color-diff(), 50%);
+      color: darken(dark-light-diff($primary, $secondary, 90%, -60%), 50%);
       font-weight: bold;
 
       .badge-wrapper {
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index ceaa92c1d69..c828fc0b8fc 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -63,7 +63,7 @@
     padding: 0;
     background: transparent;
     &:hover {
-      color: scale-color-diff();
+      color: dark-light-diff($primary, $secondary, 90%, -60%);
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 09ee5918742..dedd9735c2e 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -140,7 +140,7 @@ nav.post-controls {
     transition: all linear 0.15s;
 
          &:hover {
-          background: scale-color-diff();
+          background: dark-light-diff($primary, $secondary, 90%, -60%);
           color: $primary;
         }
 
@@ -194,7 +194,7 @@ nav.post-controls {
     background-color: $secondary;
     width: 205px;
     padding: 10px;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     position: absolute;
     text-align: left;
     bottom: -2px;
@@ -562,7 +562,7 @@ video {
 a.mention {
   padding: 2px 4px;
   color: $primary;
-  background: scale-color-diff();
+  background: dark-light-diff($primary, $secondary, 90%, -60%);
 }
 
 
@@ -709,7 +709,7 @@ $topic-avatar-width: 45px;
 }
 
 .gap {
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px 0;
   color: lighten($primary, 30%);
   cursor: pointer;
@@ -747,7 +747,7 @@ $topic-avatar-width: 45px;
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-clip: padding-box;
   span {font-size: 0.857em;}
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 49d1d1370cd..fbec592bdd0 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -120,7 +120,7 @@ a:hover.reply-new {
 }
 
 #topic-progress-expanded {
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px;
   background: $secondary;
   @include box-shadow(0 0px 2px rgba(0,0,0, .2));
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index fc26148d324..467d8763013 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -145,7 +145,7 @@
   .user-content {
     padding: 10px 8px;
     background-color: $secondary;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     margin-bottom: 10px;
     box-sizing: border-box;
 
@@ -163,13 +163,13 @@
 
       th {
         text-align: left;
-        border-bottom: 1px solid scale-color-diff();
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
         padding: 5px;
       }
 
       td {
         padding: 5px;
-        border-bottom: 1px solid scale-color-diff();
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       }
     }
 
@@ -422,7 +422,7 @@
     .item {
       padding: 20px 8px 15px 8px;
       background-color: $secondary;
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     }
     .type {
       color: $primary;
diff --git a/app/assets/stylesheets/embed.css.scss b/app/assets/stylesheets/embed.css.scss
index 6aa22e1e9c7..5c02a289d6f 100644
--- a/app/assets/stylesheets/embed.css.scss
+++ b/app/assets/stylesheets/embed.css.scss
@@ -13,8 +13,8 @@ article.post {
   }
 
   .quote .title {
-    border-left: 5px solid darken(scale-color-diff(), 10%);
-    background-color: scale-color-diff();
+    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 90%, -60%), 10%);
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
     padding: 10px 10px 0 12px;
     .avatar { margin-right: 7px; }
   }
@@ -26,8 +26,8 @@ article.post {
   blockquote {
     padding: 10px 8px 10px 13px;
     margin: 0 0 10px 0;
-    background-color: scale-color-diff();
-    border-left: 5px solid darken(scale-color-diff(), 10%);
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 90%, -60%), 10%);
     overflow: hidden;
     p {
       margin: 0 0 10px 0;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index b35bd8096bd..d121b19a5f6 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -39,7 +39,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
   width: 100%;
   z-index: 1039;
   height: 0;
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   bottom: 0;
   font-size: 1em;
   position: fixed;
@@ -88,7 +88,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
   &.draft {
     height: 35px !important;
     cursor: pointer;
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     .draft-text {
       display: block;
           position: absolute;
@@ -103,7 +103,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid scale-color-diff();
+    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     .saving-text {
       display: block;
     }
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
index f2a04ae88b0..0f52dbb84a4 100644
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@@ -9,7 +9,7 @@
     line-height: 2em;
   }
   #revision-details {
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
     padding: 5px;
     margin-top: 10px;
   }
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 1ae24f4ef50..1210b069ba1 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -237,7 +237,7 @@ tr.category-topic-link {
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 97544907a7a..71e94ea58ea 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -1,5 +1,5 @@
 .gap {
-  background-color: scale-color-diff();
+  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px 15px;
   color: $primary;
   text-align: center;
@@ -7,7 +7,7 @@
 }
 
 .topic-post {
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 6px 0 3px 0;
 }
 
@@ -74,7 +74,7 @@ button {
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   position: absolute;
   text-align: left;
   bottom: 0;
@@ -286,7 +286,7 @@ a.star {
 }
 
 #topic-footer-buttons {
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 20px 10px 0 10px;
   .fa-bookmark.bookmarked { color: $tertiary; }
 }
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 022b0af0452..78cfe1b6f92 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -61,7 +61,7 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid scale-color-diff();
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px;
   background: $secondary;
   box-shadow: 0 0px 2px rgba(0,0,0, .2);
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 272ee387b80..73393e0bcb2 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -186,7 +186,7 @@
   .user-content {
     padding: 10px 8px;
     background-color: $secondary;
-    border: 1px solid scale-color-diff();
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     margin-bottom: 10px;
     box-sizing: border-box;
     margin-top: 20px;
@@ -205,13 +205,13 @@
 
       th {
         text-align: left;
-        border-bottom: 1px solid scale-color-diff();
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
         padding: 5px;
       }
 
       td {
         padding: 5px;
-        border-bottom: 1px solid scale-color-diff();
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       }
     }
   }
@@ -420,7 +420,7 @@
     .item {
       padding: 20px 0 15px 0;
       background-color: $secondary;
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     }
     .type {
       color: $primary;