initial pass at color simplification

app/assets/stylesheets/common/admin/admin_base.scss

@@ -36,8 +36,8 @@ $mobile-breakpoint: 700px;
   tr {text-align: left;}
   td, th {padding: 8px;}
   td {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low; 
   }
   th {
     text-align: left;
@@ -94,11 +94,11 @@ td.flaggers td {
 
   .site-text {
     cursor: pointer;
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
     margin-bottom: 0.5em;
 
     &.overridden {
-      background-color: dark-light-diff($highlight, $secondary, 50%, -60%);
+      background-color: $highlight-medium;
     }
 
     h3 {
@@ -112,7 +112,7 @@ td.flaggers td {
     .site-text-value {
       margin: 0.5em 5em 0.5em 0;
       max-height: 100px;
-      color: dark-light-diff($primary, $secondary, 40%, -10%);
+      color: $primary-medium; 
     }
 
   }
@@ -136,7 +136,7 @@ td.flaggers td {
   font-size: 0.857em;
   float: right;
   margin-right: 10px;
-  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+  background-color: $primary-low; 
   padding: 2px 5px;
   border-radius: 5px;
   color: $primary;
@@ -222,16 +222,16 @@ td.flaggers td {
 }
 
 .admin-controls {
-  background-color: dark-light-diff($primary, $secondary, 90%, -65%);
+  background-color: $primary-low; 
   padding: 10px 10px 3px 0;
   @include clearfix;
   .nav.nav-pills {
     li.active {
       a {
-        border-color: dark-light-diff($primary, $secondary, 90%, -90%);
+        border-color: $primary-low; 
-        background-color: dark-light-diff($primary, $secondary, 40%, -10%);
+        background-color: $primary-medium; 
         &:hover {
-          background-color: dark-light-diff($primary, $secondary, 40%, -10%);
+          background-color: $primary-medium; 
         }
       }
     }
@@ -385,7 +385,7 @@ td.flaggers td {
   // Todo: set this properly - it needs to be >= the menu height
   min-height: 875px;
   margin-left: 0;
-  border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
+  border-left: solid 1px $primary-low; 
   padding: 30px 0 30px 30px;
   @media (max-width: $mobile-breakpoint) {
     padding: 30px 0;
@@ -464,7 +464,7 @@ td.flaggers td {
       }
       padding: 1px;
       background-color: $secondary;
-      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px solid $primary-low; 
       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;
@@ -521,7 +521,7 @@ td.flaggers td {
 
   .setting.overridden.string {
     input[type=text] {
-      background-color: dark-light-diff($highlight, $secondary, 50%, -60%);
+      background-color: $highlight-medium;
     }
   }
 }
@@ -532,7 +532,7 @@ section.details {
     color: $primary;
     padding: 5px 10px;
     margin: 30px 0 5px 0;
-    border-bottom: 5px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 5px solid $primary-low; 
   }
 }
 
@@ -575,7 +575,7 @@ section.details {
   &.highlight-danger {
     background-color: scale-color($danger, $lightness: 50%);
   }
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low; 
   &:before, &:after {
     display: table;
     content: "";
@@ -695,14 +695,14 @@ section.details {
     font-size: 1em;
     line-height: 16px;
     padding: 4px;
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
   }
 
   .badge-query-plan {
     font-size: 0.857em;
     line-height: 13px;
     padding: 4px;
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
   }
 
   .count-warning {
@@ -765,8 +765,8 @@ section.details {
     background-color: scale-color($danger, $lightness: 70%);
   }
 
-  .message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); }
+  .message { background-color: $highlight-medium; }
-  .message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); }
+  .message:hover { background-color: $highlight-low; }
 
   .flagged-post-avatar {
     margin-right: 10px;
@@ -901,7 +901,7 @@ table.api-keys {
     th {
       font-weight: normal;
       text-align: center;
-      background: dark-light-diff($primary, $secondary, 80%, -65%);
+      background: $primary-low; 
     }
     th.title {
       text-align: left;
@@ -951,7 +951,7 @@ table.api-keys {
   }
 
   &.detected-problems {
-    background: dark-light-diff($primary, $secondary, 90%, -75%);
+    background: $primary-low; 
     margin-bottom: 20px;
 
     .look-here {
@@ -976,7 +976,7 @@ table.api-keys {
         text-align: right;
       }
       .btn {
-        background: dark-light-diff($primary, $secondary, 80%, -85%);
+        background: $primary-low; 
       }
       ul {
         margin-left: 0;
@@ -1026,7 +1026,7 @@ table.api-keys {
 }
 
 .commits-widget {
-  border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
+  border: solid 1px $primary-low; 
   height: 180px;
   margin-bottom: 36px;
 
@@ -1049,7 +1049,7 @@ table.api-keys {
     color: $primary;
     font-weight: bold;
     height: 30px;
-    background: dark-light-diff($primary, $secondary, 80%, -75%);
+    background: $primary-low; 
     cursor: pointer;
 
     h1 {
@@ -1072,7 +1072,7 @@ table.api-keys {
       @extend .clearfix;
       line-height: 1.0em;
       padding: 6px 8px;
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
       .left {
         float: left;
       }
@@ -1082,7 +1082,7 @@ table.api-keys {
 
       img {
         margin-top: 2px;
-        border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
+        border: solid 1px $primary-low; 
         padding: 2px;
         background-color: $secondary;
       }
@@ -1113,11 +1113,11 @@ table.api-keys {
     width: 6px;
   }
   ::-webkit-scrollbar-thumb {
-    background: dark-light-diff($primary, $secondary, 90%, -75%);
+    background: $primary-low; 
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
-    border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
+    border-left: solid 1px $primary-low; 
   }
 }
 
@@ -1292,7 +1292,7 @@ table.api-keys {
     color: $primary;
     &:hover {
       color: $primary;
-      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+      background-color: $primary-low; 
 
 
     }
@@ -1322,7 +1322,7 @@ table.api-keys {
 
   .heading-container {
     width: 100%;
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
   }
   .col.heading {
     font-weight: bold;
@@ -1338,7 +1338,7 @@ table.api-keys {
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: solid 1px $primary-low; 
   }
 }
 
@@ -1528,7 +1528,7 @@ tr.not-activated {
   .user-field {
     padding: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
 
     .form-display {
       width: 25%;
@@ -1918,11 +1918,11 @@ table#user-badges {
 .dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); }
 .dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); }
 .dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); }
-.dbox50 { background: dark-light-diff($primary, $secondary, 50%, -50%); }
+.dbox50 { background: blend-primary-secondary(50%); }
 .dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); }
 .dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); }
 .dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); }
-.dbox90 { background: dark-light-diff($primary, $secondary, 90%, -90%); }
+.dbox90 { background: $primary-low;  }
 .dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); }
 .dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); }
 .dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); }

app/assets/stylesheets/common/admin/customize.scss

@@ -10,7 +10,7 @@
   .field-error {
     margin-top: 10px;
     margin-bottom: 10px;
-    background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
+    background-color: $quaternary-low;
     padding: 5px;
   }
 
@@ -210,4 +210,3 @@
     margin-top: 20px;
   }
 }
-

app/assets/stylesheets/common/base/_topic-list.scss

@@ -16,8 +16,8 @@
   }
 }
 
-html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
+html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
-.topic-list a.title.visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
+.topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
 
 .topic-list {
   width: 100%;
@@ -28,7 +28,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
       vertical-align: top;
       margin-top: 2px;
     }
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+    border-bottom: 1px solid $primary-low; 
 
     &.last-visit {
       border-bottom: none;
@@ -58,7 +58,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
   }
 
   > tbody > tr:first-of-type {
-    border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
+    border-top: 3px solid $primary-low; 
   }
 
   th,
@@ -238,7 +238,7 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   background-color: $secondary;
   z-index: 100;
 
@@ -300,7 +300,7 @@ ol.category-breadcrumb {
     @include unselectable;
 
     font-size: 1.2em;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border: 1px solid $primary-low; 
     padding: 5px;
     background: $secondary;
     position: absolute;
@@ -326,7 +326,7 @@ ol.category-breadcrumb {
           font-size: 0.8em;
         }
         &:hover {
-          background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
+          background-color: $highlight-medium;
         }
       }
     }

app/assets/stylesheets/common/base/alert.scss

@@ -30,15 +30,15 @@
     -webkit-appearance: none;
   }
   &.alert-success {
-    background-color:  dark-light-diff($success, $secondary, 50%, -60%);
+    background-color:  $success-low;
     color: $primary;
   }
   &.alert-error {
-    background-color:  rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
+    background-color:  rgba($danger-low, .5);
     color: $primary;
   }
   &.alert-info {
-    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+    background-color: $tertiary-low;
     color: $primary;
     &.clickable {
       color: $tertiary;

app/assets/stylesheets/common/base/colorpicker.scss

@@ -18,7 +18,7 @@
     max-width: 300px;
 
     .colorpicker {
-      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px solid $primary-low; 
       margin-right: 2px;
       width: 16px;
       height: 16px;

app/assets/stylesheets/common/base/combobox.scss

@@ -1,5 +1,5 @@
 .select2-results .select2-highlighted {
-    background: dark-light-diff($highlight, $secondary, 50%, -80%);
+    background: $highlight-medium;
     color: $primary;
 }
 
@@ -36,7 +36,7 @@
 
 .select2-container {
   border-radius: 3px;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   min-width: 200px;
 
   &.select2-dropdown-open {
@@ -71,7 +71,7 @@
   border-color: $tertiary;
 }
 .select2-drop {
-  color: dark-light-diff($primary, $secondary, -50%, 50%);
+  color: $primary;
 }
 .select2-drop-active {
   border: 1px solid $tertiary;

app/assets/stylesheets/common/base/compose.scss

@@ -3,7 +3,7 @@
   position: absolute;
   width: 240px;
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   ul {
     list-style: none;
     padding: 0;
@@ -15,7 +15,7 @@
         padding: 0 2px;
       }
 
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
 
       a {
         padding: 5px;
@@ -32,10 +32,10 @@
           vertical-align: middle;
         }
         &.selected {
-          background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+          background-color: $tertiary-low;
         }
         @include hover {
-          background-color: dark-light-diff($highlight, $secondary, 90%, -80%);
+          background-color: $highlight-low;
           text-decoration: none;
         }
       }
@@ -52,11 +52,13 @@
   .d-editor-button-bar {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-
     margin: 0px;
     padding: 5px;
-    border-bottom: 2px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 2px solid $primary-low; 
     height: 33px;
+    .btn:hover {
+      color: $primary-low; 
+    }
   }
 
   textarea {
@@ -88,7 +90,7 @@ div.ac-wrap div.item a.remove, .remove-link {
   border-radius: 12px;
   width: 10px;
   display: inline-block;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   &:hover {
     background-color: scale-color($danger, $lightness: 75%);
     border: 1px solid scale-color($danger, $lightness: 30%);
@@ -101,7 +103,7 @@ div.ac-wrap {
   overflow: auto;
   max-height: 150px;
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   padding: 5px 4px 1px 4px;
   div.item {
     float: left;

app/assets/stylesheets/common/base/directory.scss

@@ -12,7 +12,7 @@
     float: right;
   }
   .total-rows {
-    color: dark-light-diff($primary, $secondary, 50%, -50%);
+    color: blend-primary-secondary(50%);
     text-align: right;
   }
   .spinner {
@@ -26,17 +26,17 @@
     td, th {
       padding: 0.5em;
       text-align: left;
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
 
       .number, .time-read {
         font-size: 1.4em;
-        color: dark-light-diff($primary, $secondary, 50%, -20%);
+        color: $primary-medium; 
       }
     }
 
     tr.me {
       td {
-        background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+        background-color: $highlight-low;
 
         .username a, .name, .title, .number, .time-read {
           color: dark-light-choose(scale-color($highlight, $lightness: -50%), scale-color($highlight, $lightness: 50%));
@@ -58,7 +58,7 @@
       }
 
       &:hover {
-        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+        background-color: $primary-low; 
       }
     }
   }

app/assets/stylesheets/common/base/discourse.scss

@@ -314,7 +314,7 @@ body {
   animation: rotate-forever 1s infinite linear;
   height: 30px;
   width: 30px;
-  border: 4px solid dark-light-diff($primary, $secondary, 50%, -50%);
+  border: 4px solid blend-primary-secondary(50%);
   border-right-color: transparent;
   border-radius: 50%;
 
@@ -329,7 +329,7 @@ body {
 .content-list {
 
   h3 {
-    color: dark-light-diff($primary, $secondary, 50%, -20%);
+    color: $primary-medium; 
     font-size: 1.071em;
     padding-left: 5px;
     margin-bottom: 10px;
@@ -340,10 +340,10 @@ body {
     margin: 0;
 
     li:first-of-type {
-      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-top: 1px solid $primary-low; 
     }
     li {
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
     }
 
     li a {
@@ -352,7 +352,7 @@ body {
       color: $primary;
 
       &:hover {
-        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+        background-color: $primary-low; 
         color: $primary;
       }
 
@@ -380,7 +380,7 @@ span.relative-date {
 
 @keyframes background-fade-highlight {
   0% {
-    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+    background-color: $tertiary-low;
   }
   100% {
     background-color: transparent;

app/assets/stylesheets/common/base/group.scss

@@ -51,7 +51,7 @@ table.group-logs {
   width: 100%;
 
   th, tr {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
   }
 
   th {
@@ -67,7 +67,7 @@ table.group-logs {
     cursor: pointer;
 
     i {
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: blend-primary-secondary(50%);
     }
   }
 }
@@ -77,7 +77,7 @@ table.group-members {
   table-layout: fixed;
 
   tr {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
   }
 
   th:first-child {
@@ -90,7 +90,7 @@ table.group-members {
   }
 
   th {
-    border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 3px solid $primary-low; 
     text-align: center;
     padding: 5px 0px 5px 5px;
     color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
@@ -104,7 +104,7 @@ table.group-members {
 
     &:hover {
       cursor: pointer;
-      background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+      background-color: $primary-low; 
     }
   }
 
@@ -119,7 +119,7 @@ table.group-members {
 
     td {
       text-align: center;
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: blend-primary-secondary(50%);
       padding: 0.8em 0;
     }
   }

app/assets/stylesheets/common/base/groups.scss

@@ -8,16 +8,16 @@
   width: 100%;
 
   th {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
     padding: 5px 0px;
     text-align: left;
   }
 
   tr {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
 
     td {
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: blend-primary-secondary(50%);
       padding: 0.8em 0;
     }
 

app/assets/stylesheets/common/base/header.scss

@@ -69,14 +69,14 @@
 
         &:hover {
           color: $primary;
-          background-color:  dark-light-diff($primary, $secondary, 90%, -60%);
+          background-color:  $primary-low;
           border-top: 1px solid transparent;
           border-left: 1px solid transparent;
           border-right: 1px solid transparent;
         }
         &:active {
           color: $primary;
-          background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+          background-color: $primary-low;
         }
       }
       .drop-down-visible & {
@@ -85,9 +85,9 @@
           color: #7b7b7b;
           background-color: $secondary;
           cursor: default;
-          border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          border-top: 1px solid $primary-low;
-          border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          border-left: 1px solid $primary-low;
-          border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          border-right: 1px solid $primary-low;
 
           .badge-notification {
             top: -10px;
@@ -147,7 +147,7 @@
 
 
 .highlight-strong {
-  background-color: dark-light-diff($highlight, $secondary, 40%, -45%);
+  background-color: $highlight-medium;
 }
 
 .search-highlight {

app/assets/stylesheets/common/base/lightbox.scss

@@ -42,7 +42,7 @@
   .informations {
     margin: 6px;
     padding-right: 20px;
-    color: dark-light-diff($primary, $secondary, 50%, -50%);
+    color: blend-primary-secondary(50%);
     font-size: 1em;
   }
 

app/assets/stylesheets/common/base/menu-panel.scss

@@ -18,7 +18,7 @@
 }
 
 .menu-panel {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   box-shadow: 0 2px 2px rgba(0,0,0, .25);
   background-color: $secondary;
   z-index: 1100;
@@ -60,7 +60,7 @@
       padding: 0.25em 0.5em;
       display: block;
       &:hover {
-        background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
+        background-color: $highlight-medium;
       }
     }
 
@@ -191,7 +191,7 @@
     }
 
     &:hover a:not(.badge-notification) {
-      background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
+      background-color: $highlight-medium;
     }
 
     button {margin-left: 5px;}
@@ -210,7 +210,7 @@
     .fa { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
     .icon { color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); }
     li {
-      background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+      background-color: $tertiary-low;
       padding: 0.25em 0.5em;
       i {
         float: left;
@@ -218,7 +218,7 @@
         padding-top: 2px;
       }
       span { color: $primary; }
-      &:hover { background-color: dark-light-diff($highlight, $secondary, 50%, -55%); }
+      &:hover { background-color: $highlight-medium; }
       a { padding: 0; }
       p {
         margin: 0;
@@ -256,7 +256,7 @@
 .notifications .logout {
   padding: 0.25em;
   &:hover {
-    background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
+    background-color: $highlight-medium;
   }
 }
 
@@ -269,7 +269,7 @@ div.menu-links-header {
     display: table-row;
   }
   a:hover {
-    background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
+    background-color: $highlight-medium;
   }
   a {
     padding: 0.5em;

app/assets/stylesheets/common/base/modal.scss

@@ -13,11 +13,11 @@
 
 .input-hint-text {
   margin-left: 0.5em;
-  color: dark-light-diff($secondary, $primary, 30%, -35%);
+  color: $secondary-medium;
 }
 
 .modal-header {
-  border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-bottom: 1px solid $primary-low; 
 }
 
 .modal-backdrop {
@@ -96,7 +96,7 @@
 }
 .modal-footer {
   padding: 14px 15px 15px;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low; 
 }
 .modal-footer:before,
 .modal-footer:after {
@@ -118,11 +118,11 @@
 .modal {
   .nav {
     padding: 10px 30px 10px 15px;
-    background-color: dark-light-diff($secondary, $primary, 10%, -15%);
+    background-color: $secondary;
     li > a {
       font-size: 1em;
     }
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
 
   }
 
@@ -230,7 +230,7 @@
         font-weight: normal;
       }
       &.btn-reply-here {
-        background: dark-light-diff($primary, $secondary, 90%, -60%);
+        background: $primary-low; 
         text-shadow: none;
         color: $primary;
       }
@@ -351,7 +351,7 @@
       font-weight: bold;
     }
     &:focus {
-      outline: 2px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      outline: 2px solid $primary-low; 
     }
   }
   .incoming-email-tabs {
@@ -362,7 +362,7 @@
     textarea, .incoming-email-html-part {
       height: 95%;
       border: none;
-      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-top: 1px solid $primary-low; 
       padding-top: 10px;
     }
     textarea {

app/assets/stylesheets/common/base/onebox.scss

@@ -89,7 +89,7 @@ a.loading-onebox {
 }
 
 aside.onebox {
-  border: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
+  border: 5px solid $primary-low; 
 
   padding: 12px 25px 12px 12px;
   font-size: 1em;

app/assets/stylesheets/common/base/search.scss

@@ -108,7 +108,7 @@
   }
 
   .search-advanced-options {
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+    border: 1px solid $primary-low; 
     padding: 10px;
 
     .control-group.pull-left {
@@ -147,7 +147,7 @@
   }
   margin: 10px 0 15px;
   max-width: 780px;
-  border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-bottom: 3px solid $primary-low; 
   width: 100%;
   .sort-by {
     .desc {

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -12,7 +12,7 @@
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   z-index: 999;
 
   ul {

app/assets/stylesheets/common/base/topic-post.scss

@@ -1,6 +1,6 @@
 .placeholder-avatar {
   display: inline-block;
-  background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: $primary-low;
   width: 45px;
   height: 45px;
   border-radius: 50%;
@@ -8,7 +8,7 @@
 
 .placeholder-text {
   display: inline-block;
-  background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: $primary-low;
   width: 100%;
   height: 1.5em;
   margin-bottom: 0.6em;
@@ -92,7 +92,7 @@ aside.quote {
 }
 
 .cooked .highlight {
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
   padding: 2px;
   margin: -2px;
 }
@@ -137,7 +137,7 @@ aside.quote {
 .quote-button {
   display: none;
   position: absolute;
-  background-color: dark-light-diff($primary, $secondary, 50%, -50%);
+  background-color: blend-primary-secondary(50%);
   color: dark-light-choose($secondary, $primary);
   padding: 10px;
   z-index: 401;
@@ -149,7 +149,7 @@ aside.quote {
   }
 
   &:hover {
-    background-color: dark-light-diff($primary, $secondary, 40%, -40%);
+    background-color: $primary-medium;
     cursor: pointer;
   }
 }
@@ -273,7 +273,7 @@ pre {
 kbd
 {
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0,0,0, .8);
   color: $primary;
@@ -395,15 +395,15 @@ table.md-table {
   .topic-body {
     .cooked {
       font-style: italic;
-      color: dark-light-diff($primary, $secondary, 55%, -40%);
+      color: $primary-medium;
     }
   }
 }
 
 a.mention, a.mention-group {
   padding: 2px 4px;
-  color: dark-light-diff($primary, $secondary, 30%, -20%);
+  color: $primary-medium;
-  background: dark-light-diff($primary, $secondary, 95%, -60%);
+  background: $primary-low;
   border-radius: 8px;
   font-weight: bold;
   font-size: 0.93em;

app/assets/stylesheets/common/base/topic.scss

@@ -66,7 +66,7 @@
 
 .has-pending-posts {
   padding: 0.5em;
-  background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
+  background-color: $highlight-medium;
   a[href] {
     float: right;
   }
@@ -118,7 +118,7 @@
   .post-links {
     margin-top: 1em;
     padding-top: 1em;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    border-top: 1px solid $primary-low; 
   }
 
   .expand-links {
@@ -160,7 +160,7 @@
     &:hover {
       color: $tertiary;
       i {
-        background: dark-light-diff($tertiary, $secondary, 85%, -65%);
+        background: $tertiary-low;
       }
     }
   }

app/assets/stylesheets/common/base/user-badges.scss

@@ -2,7 +2,7 @@
 .user-badge {
   padding: 3px 8px;
   color: $primary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+  border: 1px solid $primary-low;
   line-height: 19px;
   display: inline-block;
   background-color: $secondary;
@@ -126,7 +126,7 @@
 .badge-card {
   position: relative;
   display: inline-block;
-  background-color: dark-light-diff($primary, $secondary, 95%, -65%);
+  background-color: $primary-low;
   margin-right: 5px;
   margin-bottom: 10px;
   box-shadow: 1px 1px 3px rgba(0.0, 0.0, 0.0, 0.2);
@@ -142,7 +142,7 @@
     right: 5px;
     top: 5px;
     font-weight: bold;
-    color: dark-light-diff($primary, $secondary, 50%, -15%);
+    color: $primary-medium;
     font-size: 1.2em;
   }
 
@@ -156,7 +156,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: dark-light-diff($primary, $secondary, 92%, -60%);
+      background-color: $primary-low;
       font-size: 3em;
 
       img {

app/assets/stylesheets/common/base/user.scss

@@ -236,7 +236,7 @@
   }
 
   .label {
-    color: dark-light-diff($primary, $secondary, 50%, -50%);
+    color: blend-primary-secondary(50%);
   }
 }
 
@@ -248,7 +248,7 @@
   }
 
   li {
-    border-left: dark-light-diff($primary, $secondary, 90%, -65%) solid 2px;
+    border-left: $primary-low solid 2px;
     padding: 5px 8px;
     margin: 10px 0;
   }
@@ -288,7 +288,7 @@ and (max-width : 600px) {
 }
 
 .user-preferences .tags .select2-container-multi {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
   width: 540px;
   border-radius: 0;
   .select2-choices {

app/assets/stylesheets/common/components/badges.scss

@@ -169,12 +169,12 @@
     }
 
     li.bar>.badge-category {
-      background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
+      background: $primary-low !important;
       color: $primary !important;
     }
 
     li.bullet>.badge-category {
-      background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
+      background: $primary-low !important;
       color: $primary !important;
 
       .badge-category-bg {
@@ -279,9 +279,9 @@
 
   &.clicks {
     font-weight: normal;
-    background-color: dark-light-diff($primary, $secondary, 88%, -60%);
+    background-color: $primary-low;
     top: -1px;
-    color: dark-light-diff($primary, $secondary, 40%, -20%);
+    color: $primary-medium;
     position: relative;
     margin-left: 2px;
     border: none;
@@ -308,8 +308,8 @@
   padding: 4px 5px 2px 5px;
   color: $primary;
   text-shadow: 0 1px 0 rgba($primary, 0.1);
-  background-color: dark-light-diff($primary, $secondary, 90%, -65%);
+  background-color: $primary-low;
-  border-color: dark-light-diff($primary, $secondary, 90%, -65%);
+  border-color: $primary-low;
   font-size: 0.857em;
   box-shadow: inset 0 1px 0 rgba(0,0,0, 0.22);
 }

app/assets/stylesheets/common/components/buttons.scss

@@ -46,17 +46,17 @@
   border: none;
   color: $primary;
   font-weight: normal;
-  background: dark-light-diff($primary, $secondary, 90%, -65%);
+  background: $primary-low; 
 
   &[href] {
     color: $primary;
   }
   &:hover {
-    background: dark-light-diff($primary, $secondary, 65%, -75%);
+    background: $primary-medium; 
     color: $secondary;
   }
   &[disabled], &.disabled {
-    background: dark-light-diff($primary, $secondary, 90%, -60%);
+    background: $primary-low; 
     &:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
     cursor: not-allowed;
   }

app/assets/stylesheets/common/components/navs.scss

@@ -32,7 +32,7 @@
       transition: background .15s;
       &:hover {
         color: $quaternary;
-        background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
+        background-color: $quaternary-low;
       }
     }
     &.active > a, > a.active {
@@ -49,9 +49,9 @@
   @extend %nav;
   padding: 0;
   overflow: hidden;
-  background: dark-light-diff($primary, $secondary, 90%, -75%);
+  background: $primary-low;
   li {
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -60%);
+    border-bottom: 1px solid $primary-low;
     position: relative;
     &:last-of-type {
       border-bottom: 0;

app/assets/stylesheets/common/d-editor.scss

@@ -1,5 +1,5 @@
 .d-editor {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
 }
 
 .d-editor-container {
@@ -22,7 +22,7 @@
   min-width: 400px;
   position: absolute;
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
   padding: 1em;
   top: 25px;
 
@@ -71,7 +71,7 @@
   height: 20px;
   margin-right: 8px;
   margin-left: 5px;
-  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+  background-color: $primary-low;
   display: inline-block;
   float: left;
 }
@@ -82,13 +82,13 @@
   height: 200px;
 
   &:disabled {
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low;
   }
 }
 
 .d-editor-preview {
   color: $primary;
-  border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px dashed $primary-low;
   overflow: auto;
   cursor: default;
   margin-top: 8px;
@@ -110,7 +110,7 @@
 .composing-whisper {
   .d-editor-preview {
     font-style: italic;
-    color: dark-light-diff($primary, $secondary, 55%, -40%) !important;
+    color: $primary-medium !important;
   }
 }
 

app/assets/stylesheets/common/foundation/base.scss

@@ -41,7 +41,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low;
   padding: 0;
 }
 

app/assets/stylesheets/common/foundation/mixins.scss

@@ -97,7 +97,7 @@
 
 // Stuff we repeat
 @mixin post-aside {
-  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
+  border-left: 5px solid $primary-low;
   background-color: blend-primary-secondary(5%);
 }
 

app/assets/stylesheets/common/foundation/variables.scss

@@ -78,3 +78,33 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
     @return $dark-theme-result;
   }
 }
+
+// standard color transformations, use these if possible, and add any new dark-light-diffs here
+
+//primary
+$primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
+$primary-medium: dark-light-diff($primary, $secondary, 50%, -20%);
+
+//secondary
+$secondary-low: dark-light-diff($secondary, $primary, 50%, -50%);
+$secondary-medium: dark-light-diff($secondary, $primary, 30%, -35%);
+
+//tertiary
+$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
+
+//quaternary
+$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
+
+//highlight
+$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
+$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
+
+//danger
+$danger-low: dark-light-diff($danger, $secondary, 50%, -40%);
+$danger-medium: dark-light-diff($danger, $secondary, 30%, -60%);
+
+//success
+$success-low: dark-light-diff($success, $secondary, 50%, -60%);
+
+//love
+$love-low: dark-light-diff($love, $secondary, 85%, -60%);

app/assets/stylesheets/common/input_tip.scss

@@ -7,7 +7,7 @@
   padding: 5px 10px;
   z-index: 101;
   &.bad {
-    background: dark-light-diff($danger, $secondary, 20%, -40%);
+    background: $danger-medium;
     color: white;
     box-shadow: 1px 1px 5px rgba(0,0,0, .7);
   }

app/assets/stylesheets/common/topic-entrance.scss

@@ -1,6 +1,6 @@
 #topic-entrance {
 
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   padding: 5px;
   background: $secondary;
   box-shadow: 0 0px 2px rgba(0,0,0, .2);

app/assets/stylesheets/desktop/category-list.scss

@@ -90,9 +90,9 @@
 
   tbody {
     tr {
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+      border-bottom: 1px solid $primary-low; 
       &:first-of-type {
-        border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
+        border-top: 3px solid $primary-low; 
       }
     }
 

app/assets/stylesheets/desktop/compose.scss

@@ -36,14 +36,14 @@
   padding: 10px;
 
   box-shadow: 3px 3px 3px rgba(0,0,0, 0.34);
-  background: dark-light-diff($highlight, $secondary, 50%, -80%);
+  background: $highlight-medium;
 
   &.urgent {
-    background: dark-light-diff($danger, $secondary, 50%, -40%);
+    background: $danger-low;
   }
 
   &.education-message {
-    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+    background-color: $tertiary-low;
   }
 
   h3 {
@@ -79,17 +79,17 @@
 }
 
 .custom-body {
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
   p {
     max-width: 98%;
   }
 }
 
 .similar-topics {
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
 
   a[href] {
-    color: dark-light-diff($primary, $secondary, -10%, 10%);
+    color: $primary-medium;
   }
 
   .posts-count {
@@ -140,7 +140,7 @@
   width: 100%;
   z-index: 999;
   height: 0;
-  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+  background-color: $primary-low;
   bottom: 0;
   font-size: 1em;
   position: fixed;
@@ -184,7 +184,7 @@
   &.draft {
     height: 40px !important;
     cursor: pointer;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low;
     .draft-text {
       display: block;
 
@@ -201,7 +201,7 @@
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low;
     .saving-text {
       display: block;
     }
@@ -299,7 +299,7 @@
       margin-right: 10px;
       float: left;
       &:disabled {
-        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+        background-color: $primary-low;
       }
     }
     #topic-featured-link {
@@ -308,14 +308,14 @@
       width: 400px;
     }
     .d-editor-input:disabled {
-      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+      background-color: $primary-low;
     }
     .d-editor-input, .d-editor-preview {
       color: $primary;
     }
 
     .d-editor-preview {
-      border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px dashed $primary-low;
       overflow: auto;
       visibility: visible;
       cursor: default;
@@ -353,7 +353,7 @@
   .show-admin-options {
     vertical-align: top;
     margin-top: 8px;
-    background: dark-light-diff($primary, $secondary, 90%, -60%);
+    background: $primary-low;
   &:hover {
     color: $secondary;
     background: $primary;

app/assets/stylesheets/desktop/discourse.scss

@@ -31,7 +31,7 @@ body {
   }
   #main {
     a.star {
-      color: dark-light-diff($secondary, $primary, 80%, -20%);
+      color: $secondary-medium;
       &:before {
         font-family: "FontAwesome";
         content: "\f005";
@@ -213,14 +213,14 @@ body {
     width: 210px;
     height: auto;
     background-color:$secondary;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border: 1px solid $primary-low; 
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
   }
   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 dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px solid $primary-low; 
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
     }
@@ -244,7 +244,7 @@ body {
 
   select {
     width: 220px;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border: 1px solid $primary-low; 
     &[multiple], &[size] {
       height: auto;
     }
@@ -272,8 +272,8 @@ body {
   }
   input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
     cursor: not-allowed;
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
-    border-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    border-color: $primary-low; 
   }
   input {
     &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@@ -372,7 +372,7 @@ body {
     text-align: center;
     vertical-align: middle;
     background-color: $secondary;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border: 1px solid $primary-low; 
   }
   .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
     margin-left: -1px;

app/assets/stylesheets/desktop/group.scss

@@ -48,7 +48,7 @@
 }
 
 .group-edit {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   padding: 10px;
 
   .form-horizontal {

app/assets/stylesheets/desktop/history.scss

@@ -12,10 +12,10 @@
 
     .btn[disabled] {
       cursor: not-allowed;
-      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+      background-color: $primary-low; 
     }
     .btn-danger[disabled] {
-      background-color: dark-light-diff($danger, $secondary, 30%, -60%);
+      background-color: $danger-medium;
     }
   }
   #display-modes {
@@ -25,7 +25,7 @@
 
     .btn {
       background-color:inherit;
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: blend-primary-secondary(50%);
     }
     .btn-primary {
       color: $primary;
@@ -35,7 +35,7 @@
   #revision-details {
     padding: 5px;
     margin-top: 10px;
-    border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 3px solid $primary-low; 
   }
   #revisions {
     word-wrap: break-word;

app/assets/stylesheets/desktop/modal.scss

@@ -16,7 +16,7 @@
   height: auto;
   margin: -250px 0 0 -305px;
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
 
   box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;

app/assets/stylesheets/desktop/queued-posts.scss

@@ -31,7 +31,7 @@
       }
     }
     .post-title {
-      color: dark-light-diff($primary, $secondary, 20%, -60%);
+      color: $primary-medium;
       font-weight: bold;
 
       .badge-wrapper {
@@ -41,4 +41,3 @@
 
   }
 }
-

app/assets/stylesheets/desktop/topic-list.scss

@@ -63,7 +63,7 @@
     padding: 0;
     background: transparent;
     &:hover {
-      color: dark-light-diff($primary, $secondary, 90%, -60%);
+      color: $primary-low; 
     }
   }
 
@@ -115,7 +115,7 @@
   .sortable {
     cursor: pointer;
     &:hover {
-      background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+      background-color: $primary-low; 
     }
     @include unselectable;
   }

app/assets/stylesheets/desktop/topic-post.scss

@@ -94,7 +94,7 @@ nav.post-controls {
     font-size: inherit;
     span.badge-posts {color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); }
     &:hover {
-      background: dark-light-diff($primary, $secondary, 90%, -65%);
+      background: $primary-low;
       span.badge-posts {color: $primary;}
     }
     i {
@@ -122,7 +122,7 @@ nav.post-controls {
     margin-left: 3px;
 
     &.d-hover {
-      background: dark-light-diff($primary, $secondary, 90%, -60%);
+      background: $primary-low;
       color: $primary;
     }
 
@@ -144,7 +144,7 @@ nav.post-controls {
 
     &.like.d-hover {
       color: $love;
-      background: dark-light-diff($love, $secondary, 85%, -60%)
+      background: $love-low;
     }
 
     &.has-like {color: $love;}
@@ -179,7 +179,7 @@ nav.post-controls {
     background-color: $secondary;
     width: 205px;
     padding: 10px;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border: 1px solid $primary-low;
     position: absolute;
     text-align: left;
     bottom: -2px;
@@ -288,11 +288,11 @@ a.star {
 .topic-map {
   margin: 20px 0 0 0;
   background: blend-primary-secondary(5%);
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+  border: 1px solid $primary-low;
   border-top: none; // would cause double top border
 
   section {
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    border-top: 1px solid $primary-low;
   }
 
   h3 {
@@ -402,11 +402,11 @@ a.star {
       padding: 0 23px;
       color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
       background: blend-primary-secondary(5%);
-      border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+      border-left: 1px solid $primary-low;
-      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+      border-top: 1px solid $primary-low;
       &:hover {
         color: $primary;
-        background: dark-light-diff($primary, $secondary, 90%, -80%);
+        background: $primary-low;
       }
 
       &.collapsed {
@@ -567,7 +567,7 @@ video {
 
 .moderator {
   .topic-body {
-    background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+    background-color: $highlight-low;
   }
 }
 
@@ -617,7 +617,7 @@ blockquote {
   aside {
     .quote, .title, blockquote, .onebox, .onebox-result {
       background: blend-primary-secondary(5%);
-      border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
+      border-left: 5px solid $primary-low;
     }
 
     aside.quote>blockquote, aside.quote>.title {
@@ -637,12 +637,12 @@ $topic-avatar-width: 45px;
   float: left;
   position: relative;
   z-index: 2;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-top: 1px solid $primary-low;
   padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
 }
 
 .topic-avatar {
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-top: 1px solid $primary-low;
   padding-top: 15px;
   width: $topic-avatar-width;
   float: left;
@@ -655,7 +655,7 @@ $topic-avatar-width: 45px;
 
 .small-action {
   max-width: 755px;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-top: 1px solid $primary-low;
 }
 
 .small-action.deleted {
@@ -698,7 +698,7 @@ $topic-avatar-width: 45px;
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
   box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-clip: padding-box;
   span {
@@ -730,7 +730,7 @@ $topic-avatar-width: 45px;
 .dropdown-menu .active > a:hover {
   color: $primary;
   text-decoration: none;
-  background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
+  background-color: $highlight-medium;
 
 }
 
@@ -738,7 +738,7 @@ $topic-avatar-width: 45px;
 .dropdown-menu .disabled > a:hover {
   text-decoration: none;
   color: $primary;
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
   cursor: default;
 }
 
@@ -757,7 +757,7 @@ $topic-avatar-width: 45px;
   width: 200px;
   position: fixed;
   z-index: 1000;
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
   border: 1px solid $tertiary;
   padding: 5px;
   margin-bottom: 5px;
@@ -876,7 +876,7 @@ a.attachment:before {
   display: block;
   position: absolute;
   left: 767px;
-  color: rgba(dark-light-diff($primary, $secondary, 90%, -65%) , .8);
+  color: rgba($primary-low, .8);
   font: 6.429em/1 FontAwesome;
   content: "\f014";
   z-index: -5;
@@ -911,7 +911,7 @@ a.attachment:before {
 }
 
 span.highlighted {
-  background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  background-color: $tertiary-low;
 }
 
 .username.new-user a {

app/assets/stylesheets/desktop/topic.scss

@@ -80,7 +80,7 @@
 }
 
 .topic-status-info {
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-top: 1px solid $primary-low; 
   padding-top: 10px;
   height: 20px;
   max-width: 757px;
@@ -99,7 +99,7 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   padding: 5px;
   background: $secondary;
 
@@ -149,7 +149,7 @@
   }
   background-color: $secondary;
   color: $tertiary;
-  border: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
+  border: 1px solid $tertiary-low;
   border-bottom: none;
   width: 145px;
   height: 34px;
@@ -183,8 +183,8 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid  dark-light-diff($tertiary, $secondary, 85%, -65%);
+    border-right: 1px solid  $tertiary-low;
-    background-color:  dark-light-diff($tertiary, $secondary, 85%, -65%);
+    background-color:  $tertiary-low;
     transition: width .75s;
   }
 }

app/assets/stylesheets/desktop/user-card.scss

@@ -226,7 +226,7 @@ $user_card_background: $secondary;
 
       .user-badge {
         background: scale-color($user_card_background, $lightness: -5%);
-        border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border: 1px solid $primary-low; 
         color: $user_card_primary;
       }
 

app/assets/stylesheets/desktop/user.scss

@@ -160,7 +160,7 @@
 
       th {
         text-align: left;
-        border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-bottom: 3px solid $primary-low; 
         padding: 0 0 10px 0;
         color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
         font-weight: normal;
@@ -168,7 +168,7 @@
 
       td {
         padding: 10px 0 10px 0;
-        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-bottom: 1px solid $primary-low; 
       }
     }
 
@@ -180,7 +180,7 @@
     }
 
     .user-invite-controls {
-      background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+      background-color: $primary-low; 
       padding: 5px 10px 0px 0;
       height: 35px;
     }
@@ -212,8 +212,8 @@
 
   .secondary {
     background: scale-color($secondary, $lightness: -5%);
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low; 
-    border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-bottom: 1px solid $primary-low; 
     font-size: 0.929em;
       .btn { padding: 3px 12px; }
 
@@ -250,7 +250,7 @@
       }
 
       dt {
-        color: dark-light-diff($secondary, $primary, 50%, -40%);
+        color: $secondary-medium;
         margin: 0;
       }
     }
@@ -262,8 +262,8 @@
       transition: margin .15s linear;
 
       blockquote {
-        background-color: dark-light-diff($secondary, $primary, 30%, -70%);
+        background-color: $secondary-low; 
-        border-left-color: dark-light-diff($secondary, $primary, 50%, -50%);
+        border-left-color: $secondary-low; 
       }
 
       h1 {
@@ -390,7 +390,7 @@
       padding: 0 0 2px 0;
       margin-top: 0;
       background: rgba($secondary, .85);
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
       .bio { display: none; }
 
       .primary {
@@ -434,7 +434,7 @@
       color: $primary;
     }
     .item.moderator-action {
-      background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
+      background-color: $highlight-medium;
     }
     .item.deleted {
       opacity: 0.8;
@@ -447,7 +447,7 @@
     .item {
       padding: 20px 8px 15px 8px;
       background-color: $secondary;
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
     }
     .type {
       color: $primary;
@@ -491,7 +491,7 @@
     }
     .notification {
       &.unread {
-        background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+        background-color: $tertiary-low;
       }
 
       li { display: inline-block; }

app/assets/stylesheets/embed.scss

@@ -16,8 +16,8 @@ article.post {
   }
 
   .quote .title {
-    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
+    border-left: 5px solid darken($primary-low, 10%);
-    background-color: dark-light-diff($primary, $secondary, 97%, -45%);
+    background-color: $primary-low;
     padding: 10px 10px 0 12px;
     .avatar { margin-right: 7px; }
   }
@@ -29,8 +29,8 @@ article.post {
   blockquote {
     padding: 10px 8px 10px 13px;
     margin: 0 0 10px 0;
-    background-color: dark-light-diff($primary, $secondary, 97%, -45%);
+    background-color: $primary-low;
-    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
+    border-left: 5px solid darken($primary-low, 97%, -45%), 10%);
     p {
       margin: 0 0 10px 0;
     }

app/assets/stylesheets/mobile/compose.scss

@@ -19,7 +19,7 @@ input {
   padding: 4px;
   border-radius: 3px;
   box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
 }
 input[type=radio], input[type=checkbox] {
   box-shadow: none;
@@ -38,7 +38,7 @@ input[type=radio], input[type=checkbox] {
   width: 100%;
   z-index: 1039;
   height: 0;
-  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+  background-color: $primary-low; 
   bottom: 0;
   font-size: 1em;
   position: fixed;
@@ -97,7 +97,7 @@ input[type=radio], input[type=checkbox] {
   &.draft {
     height: 35px !important;
     cursor: pointer;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low; 
     .draft-text {
       display: block;
       position: absolute;
@@ -120,7 +120,7 @@ input[type=radio], input[type=checkbox] {
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    border-top: 1px solid $primary-low; 
     .saving-text {
       display: block;
     }

app/assets/stylesheets/mobile/directory.scss

@@ -18,12 +18,12 @@
 }
 
 .directory .user {
-  border-top: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+  border-top: 1px solid $primary-low;
   padding: 1em;
 
 
   &.me {
-    background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+    background-color: $highlight-low;
 
     .username a, .name, .title, .number, .time-read, .user-stat .label {
       color: scale-color($highlight, $lightness: -50%);
@@ -38,7 +38,7 @@
     }
     .label {
       margin-left: 0.2em;
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: blend-primary-secondary(50%);
     }
     i.fa-heart {
       color: $love;

app/assets/stylesheets/mobile/discourse.scss

@@ -73,7 +73,7 @@ blockquote {
   display: inline-block;
   .topic-status {
     i {
-      color: dark-light-diff($secondary, $primary, 40%, -20%);
+      color: $secondary-medium;
     }
   }
 }
@@ -123,7 +123,7 @@ h2#site-text-logo
   }
   margin: 0;
   padding: 0;
-  background: dark-light-diff($primary, $secondary, 90%, -65%);
+  background: $primary-low; 
   list-style: none;
   overflow: visible;
   position: relative;

app/assets/stylesheets/mobile/history.scss

@@ -9,7 +9,7 @@
     line-height: 2em;
   }
   #revision-details {
-    background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    background-color: $primary-low; 
     padding: 5px;
     margin-top: 10px;
   }

app/assets/stylesheets/mobile/topic-list.scss

@@ -26,7 +26,7 @@
     position: relative;
   }
   .nav-pills .drop {
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    border: 1px solid $primary-low; 
     position: absolute;
     z-index: 1000;
     background-color: $secondary;
@@ -47,7 +47,7 @@
 
   }
   .nav-pills > li {
-    background: dark-light-diff($primary, $secondary, 90%, -65%);
+    background: $primary-low; 
     i.fa-caret-down {
       margin-left: 8px;
     }
@@ -146,9 +146,9 @@
 
   tbody {
     tr {
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+      border-bottom: 1px solid $primary-low; 
       &:first-of-type {
-        border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
+        border-top: 3px solid $primary-low; 
       }
     }
     .category {

app/assets/stylesheets/mobile/topic-post.scss

@@ -3,7 +3,7 @@
 }
 
 .small-action {
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low;
   color: lighten($primary, 50%);
   padding-bottom: 3px;
   text-transform: uppercase;
@@ -28,7 +28,7 @@
 }
 
 .topic-post article {
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low;
   padding: 8px 0;
 }
 
@@ -109,7 +109,7 @@ nav.post-controls {
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
   position: absolute;
   text-align: left;
   bottom: 0;
@@ -181,11 +181,11 @@ a.star {
 
   margin: 10px 0;
   background: blend-primary-secondary(5%);
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+  border: 1px solid $primary-low;
   border-top: none; // would cause double top border
 
   section {
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    border-top: 1px solid $primary-low;
   }
 
   h3 {
@@ -300,8 +300,8 @@ a.star {
       padding: 0 15px;
       color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
       background: blend-primary-secondary(5%);
-      border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+      border-left: 1px solid $primary-low;
-      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+      border-top: 1px solid $primary-low;
       .fa {
         margin: 0;
         font-size: 1.286em;
@@ -386,7 +386,7 @@ span.post-count {
 }
 
 .moderator .topic-body {
-  background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+  background-color: $highlight-low;
 }
 
 .quote-button.visible {

app/assets/stylesheets/mobile/topic.scss

@@ -45,7 +45,7 @@
 
 .topic-status-info {
   padding-left: 10px;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  border-top: 1px solid $primary-low; 
   padding-top: 10px;
   h3 {
     margin: 0;
@@ -66,7 +66,7 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low; 
   padding: 5px;
   background: $secondary;
 
@@ -113,7 +113,7 @@
   }
   background-color: $secondary;
   color: $tertiary;
-  border: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
+  border: 1px solid $tertiary-low;
   border-bottom: none;
   width: 145px;
   height: 34px;
@@ -144,8 +144,8 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid  dark-light-diff($tertiary, $secondary, 85%, -65%);
+    border-right: 1px solid  $tertiary-low;
-    background-color:  dark-light-diff($tertiary, $secondary, 85%, -65%);
+    background-color:  $tertiary-low;
     transition: width .75s;
   }
 }

app/assets/stylesheets/mobile/user.scss

@@ -159,11 +159,11 @@
     th {
       padding: 0.5em;
       text-align: right;
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
     }
     td {
       padding: 0.5em;
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
       img {
         margin-right: 10px;
       }
@@ -196,13 +196,13 @@
 
       th {
         text-align: left;
-        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-bottom: 1px solid $primary-low; 
         padding: 5px;
       }
 
       td {
         padding: 5px;
-        border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-bottom: 1px solid $primary-low; 
       }
     }
   }
@@ -215,7 +215,7 @@
     color: $secondary;
 
     .secondary {
-      background: dark-light-diff($primary, $secondary, 90%, -65%);
+      background: $primary-low; 
       font-size: 0.929em;
 
       .btn { padding: 3px 12px; }
@@ -241,7 +241,7 @@
       }
 
       dt {
-        color: dark-light-diff($secondary, $primary, 50%, -40%);
+        color: $secondary-medium;
         margin: 0;
       }
     }
@@ -251,8 +251,8 @@
       background: rgba($secondary, .85);
 
       blockquote {
-        background-color: dark-light-diff($secondary, $primary, 30%, -70%);
+        background-color: $secondary-low; 
-        border-left-color: dark-light-diff($secondary, $primary, 50%, -50%);
+        border-left-color: $secondary-low; 
       }
 
       h1 {
@@ -399,7 +399,7 @@
       color: $primary;
     }
     .item.moderator-action {
-      background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
+      background-color: $highlight-medium;
     }
     .item.deleted {
       opacity: 0.8;
@@ -412,7 +412,7 @@
     .item {
       padding: 20px 0 15px 0;
       background-color: $secondary;
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-bottom: 1px solid $primary-low; 
     }
     .type {
       color: $primary;

app/assets/stylesheets/vendor/pikaday.scss

@@ -14,20 +14,20 @@ $pd-text-color: $primary !default;
 $pd-title-color: $primary !default;
 $pd-title-bg: $secondary !default;
 $pd-picker-bg: $secondary !default;
-$pd-picker-border: dark-light-diff($secondary, $primary, -20%, 20%) !default;
+$pd-picker-border: $primary-low !default;
-$pd-picker-border-bottom: dark-light-diff($secondary, $primary, -30%, 30%) !default;
+$pd-picker-border-bottom: $primary-low !default;
 $pd-picker-shadow: rgba(0,0,0,.5) !default;
-$pd-th-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
+$pd-th-color: $primary !default;
-$pd-day-color: dark-light-diff($primary, $secondary, -30%, 30%) !default;
+$pd-day-color: $primary !default;
-$pd-day-bg: dark-light-diff($primary, $secondary, 90%, -90%) !default;
+$pd-day-bg: $secondary !default;
-$pd-day-hover-color: $secondary !default;
+$pd-day-hover-color: $primary !default;
-$pd-day-hover-bg: dark-light-diff($tertiary, $secondary, 30%, -30%) !default;
+$pd-day-hover-bg: $tertiary-low !default;
 $pd-day-today-color: $tertiary !default;
 $pd-day-selected-color: $secondary !default;
 $pd-day-selected-bg: $tertiary !default;
-$pd-day-selected-shadow: dark-light-diff($tertiary, $secondary, 50%, -50%) !default;
+$pd-day-selected-shadow: $tertiary-low !default;
-$pd-day-disabled-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
+$pd-day-disabled-color: $primary !default;
-$pd-week-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
+$pd-week-color: $primary !default;
 
 // Font
 $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;