From 38696e5a30d6322d95ad2254a21b8b840016d8d4 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Wed, 6 Aug 2014 09:31:13 -0400
Subject: [PATCH] bettering support for dark ez-themes

---
 .../stylesheets/common/admin/admin_base.scss  | 11 ++--
 .../stylesheets/common/base/_topic-list.scss  |  2 +-
 app/assets/stylesheets/common/base/alert.scss | 10 +--
 .../stylesheets/common/base/header.scss       | 10 +--
 app/assets/stylesheets/common/base/modal.scss |  6 +-
 .../stylesheets/common/base/pagedown.scss     |  3 +-
 .../stylesheets/common/base/share_link.scss   |  2 +-
 .../stylesheets/common/base/topic-post.scss   |  2 +-
 .../stylesheets/common/base/user-badges.scss  |  4 +-
 .../common/components/badges.css.scss         |  6 +-
 .../common/components/buttons.css.scss        |  8 ++-
 .../common/components/navs.css.scss           |  6 +-
 .../common/foundation/variables.scss          | 14 +++++
 app/assets/stylesheets/common/input_tip.scss  |  6 +-
 app/assets/stylesheets/desktop/compose.scss   |  6 +-
 app/assets/stylesheets/desktop/discourse.scss | 13 ++--
 app/assets/stylesheets/desktop/modal.scss     |  4 +-
 .../stylesheets/desktop/poster_expansion.scss |  2 +-
 .../stylesheets/desktop/topic-list.scss       |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 63 ++++++++++---------
 app/assets/stylesheets/desktop/topic.scss     | 10 +--
 app/assets/stylesheets/desktop/user.scss      | 23 ++++---
 app/assets/stylesheets/mobile/modal.scss      |  2 +-
 app/assets/stylesheets/mobile/topic.scss      |  6 +-
 24 files changed, 125 insertions(+), 96 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 64c66fc0800..2b689a7a99b 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -93,7 +93,7 @@ td.flaggers td {
     width: 460px;
     right: 0px;
     z-index: 990;
-    box-shadow: 0 2px 6px scale-color-diff();
+    box-shadow: 0 2px 6px rgba(0,0,0, .8);
     margin-top: -2px;
     background-color: $secondary;
     padding: 12px 12px 5px;
@@ -108,7 +108,7 @@ td.flaggers td {
 }
 
 .admin-controls {
-  background-color: darken($secondary, 5%);
+  background-color: dark-light-diff($primary, $secondary, 90%, -20%);
   padding: 10px 10px 3px 0;
   height: 35px;
   .nav.nav-pills {
@@ -272,7 +272,8 @@ td.flaggers td {
 
   .setting.overridden {
     input[type=text] {
-      background-color: scale-color($highlight, $lightness: 50%);
+      background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
+
     }
 
     h3 {
@@ -681,7 +682,7 @@ table.api-keys {
     background-color: scale-color-diff();
     margin-bottom: 20px;
     margin-top: 10px;
-    box-shadow: inset 0 0 10px rgba($primary, .1);
+    box-shadow: inset 0 0 10px rgba(0,0,0, .1);
 
     .look-here {
       float: left;
@@ -843,7 +844,7 @@ table.api-keys {
 .content-list {
 
   h3 {
-    color: $primary;
+    color: dark-light-diff($primary, $secondary, 90%, -60%); 
     font-size: 15px;
     padding-left: 5px;
     margin-bottom: 10px;
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 73fd6823aee..4649d7f95c7 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -17,7 +17,7 @@
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
   background: rgba($secondary, .8);
 
   > tbody > tr {
diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 35646cbf82f..7c642fd2afc 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -31,15 +31,15 @@
     -webkit-appearance: none;
   }
   &.alert-success {
-    background-color:  scale-color($success, $lightness: 90%);
-    color: $success;
+    background-color:  dark-light-diff($success, $secondary, 50%, -60%);
+    color: $primary;
   }
   &.alert-error {
-    background-color:  scale-color($danger, $lightness: 75%);
-    color: $danger;
+    background-color:  rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
+    color: $primary;
   }
   &.alert-info {
-    background-color: scale-color($tertiary, $lightness: 90%);
+    background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
     color: $primary;
   }
 }
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index b26a78e3a43..2457f5a8428 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -4,7 +4,7 @@
     top: 0;
     z-index: 1001;
     background-color: $header_background;
-    box-shadow: 0 2px 4px -2px rgba($header_primary, .25);
+    box-shadow: 0 2px 4px -2px rgba(0,0,0, .25);
 
     .docked & {
       position: fixed;
@@ -152,7 +152,7 @@
     border: 1px solid scale-color-diff();
     padding: 5px;
 
-    @include box-shadow(0 2px 2px rgba($primary, .4));
+    @include box-shadow(0 2px 2px rgba(0,0,0, .4));
 
   // note these topic counts only appear for anons in the category hamburger drop down
   b.topics-count {
@@ -179,18 +179,18 @@
       }
 
       &:hover a:not(.badge-notification) {
-        background-color: scale-color($highlight, $lightness: 60%);
+        background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
         }
 
       button {margin-left: 5px;}
   }
 
   .heading a:hover  {
-    background-color: scale-color($highlight, $lightness: 60%);
+    background-color: dark-light-diff($highlight, $secondary, 50%, -30%);
   }
 
   .selected {
-    background-color: scale-color($tertiary, $lightness: 90%);
+    background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
   }
 
 
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 52455d5166e..79090648254 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -18,7 +18,7 @@
   bottom: 0;
   left: 0;
   z-index: 1040;
-  background-color: $primary;
+  background-color: #111;
   &.fade {
     opacity: 0;
   }
@@ -54,7 +54,7 @@
   border: 1px solid scale-color-diff();
   border: 1px solid scale-color-diff();
 
-  box-shadow: 0 3px 7px rgba($primary, .8);
+  box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;
 }
 
@@ -87,7 +87,7 @@
 .modal {
     .nav {
     padding: 10px 30px 10px 15px;
-    background-color: lighten($secondary, 76%);
+    background-color: dark-light-diff($secondary, $primary, 10%, -15%);
     li > a {
       font-size: 14px;
     }
diff --git a/app/assets/stylesheets/common/base/pagedown.scss b/app/assets/stylesheets/common/base/pagedown.scss
index 4c63d4439c4..9de92d9715f 100644
--- a/app/assets/stylesheets/common/base/pagedown.scss
+++ b/app/assets/stylesheets/common/base/pagedown.scss
@@ -124,7 +124,8 @@
 }
 
 .wmd-prompt-background {
-  background-color: $primary;
+  background-color: #111;
+  box-shadow: 0 3px 7px rgba(0,0,0, .8);
 }
 
 .wmd-prompt-dialog {
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index e51f35e16ce..777e8393563 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -4,7 +4,7 @@
   position: absolute;
   left: 20px;
   z-index: 990;
-  box-shadow: 0 1px 5px rgba($primary, .4);
+  box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-color: scale-color-diff();
   padding: 6px 10px 10px 10px;
   width: 300px;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index aee2b2a21ca..9b80398b389 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -44,7 +44,7 @@ aside.quote {
 }
 
 .cooked .highlight {
-  background-color: scale-color($highlight, $lightness: 40%);
+  background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
   padding: 2px;
   margin: -2px;
 }
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 7f47270543e..17cce459731 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -1,8 +1,8 @@
 /* Default badge styles. */
 .user-badge {
   padding: 3px 8px;
-  color: darken($primary, 40%);;
-  border: 1px solid lighten($primary, 60%);
+  color: $primary;
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
   font-size: $base-font-size * 0.86;
   line-height: 19px;
   margin: 0;
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index d7c543e2e37..b3d916cdcb2 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -115,8 +115,8 @@ h1 a.badge-category div {vertical-align: top;}
   padding: 3px 5px;
   color: $primary;
   text-shadow: 0 1px 0 rgba($primary, 0.1);
-  background-color: #ddd;
-  border-color: #aaa;
+  background-color: dark-light-diff($primary, $secondary, 90%, -65%);
+  border-color: dark-light-diff($primary, $secondary, 90%, -65%);
   font-size: 12px;
-  @include box-shadow(inset 0 1px 0 rgba($primary, 0.22));
+  @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.22));
 }
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index 616610f8ec4..598c3d7e28e 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -14,6 +14,8 @@
   line-height: 18px;
   text-align: center;
   cursor: pointer;
+  transition: all .25s;
+
   &:active {
     text-shadow: none;
   }
@@ -43,13 +45,13 @@
   border: none;
   color: $primary;
   font-weight: normal;
-  background: scale-color-diff();
+  background: dark-light-diff($primary, $secondary, 90%, -65%);
 
   &[href] {
     color: $primary;
   }
   &:hover {
-    background: #aaa;
+    background: dark-light-diff($primary, $secondary, 65%, -75%);
     color: #fff;
   }
   &:active {
@@ -120,7 +122,7 @@
 .btn-social {
   color: $secondary;
   text-shadow: 0 1px 0 rgba($primary, 0.2);
-  @include box-shadow(inset 0 1px 0 rgba($primary, 0.1));
+  @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.1));
   &[href] {
     color: $secondary;
   }
diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss
index 49e22f1ff40..f119de16330 100644
--- a/app/assets/stylesheets/common/components/navs.css.scss
+++ b/app/assets/stylesheets/common/components/navs.css.scss
@@ -29,9 +29,10 @@
       color: $primary;
       font-size: 16px;
       line-height: 20px;
+      transition: background .15s;
       &:hover {
         color: $quaternary;
-        background-color: scale-color($quaternary, $lightness: 70%);
+        background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
       }
     }
     &.active > a, > a.active {
@@ -50,9 +51,8 @@
   padding: 0;
   overflow: hidden;
   background-color: scale-color-diff();
-  @include box-shadow(0 1px 0 scale-color-diff());
   > li {
-    border-bottom: 2px solid scale-color($primary, $lightness: 80%);
+    border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -30%);
     &:last-of-type {
       border-bottom: 0;
     }
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index ab438678e94..cae47ff5e1c 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -31,6 +31,20 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
 @import "plugins_variables";
 
 
+@function brightness($color) {
+  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); //w3c definition of color brightness
+}
+
+@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
+  @if brightness($adjusted-color) < brightness($comparison-color) {
+    @return scale-color($adjusted-color, $lightness: $lightness)
+  } @else {
+    @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%)
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 34ca79c8997..efd4fdbfa02 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -6,12 +6,10 @@
   display: block;
   padding: 5px 10px;
   z-index: 101;
-  @include border-radius-all(2px);
-  border: solid 1px #955;
   &.bad {
-    background-color: #b66;
+    background: dark-light-diff($danger, $secondary, 20%, -40%);
     color: white;
-    box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55;
+    box-shadow: 1px 1px 5px rgba(0,0,0, .7);
   }
   &.hide, &.good {
     display: none;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index b14da55c6a1..1ce8fc29df1 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -13,11 +13,11 @@
 
 .composer-popup {
 
-  @include box-shadow(3px 3px 3px rgba($primary, 0.34));
-  background: scale-color($highlight, $lightness: 50%);
+  @include box-shadow(3px 3px 3px rgba(0,0,0, 0.34));
+  background: dark-light-diff($highlight, $secondary, 50%, -40%);
 
   &.urgent {
-    background: scale-color($danger, $lightness: 50%);
+    background: dark-light-diff($danger, $secondary, 50%, -40%);
   }
 
   h3 {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index bf11f48b988..a03a083d7ad 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -24,6 +24,7 @@ html {font-size: 14px/19px;}
   }
 }
 
+
 @media all
 and (max-width : 570px) {
   body {
@@ -33,7 +34,9 @@ and (max-width : 570px) {
   .full-width {
     min-width: 0;
   }
+
   .d-header .current-username a {display: none;}
+
 }
 
 header {
@@ -54,7 +57,7 @@ body {
       color: $danger;
     }
     a.star {
-      color: scale-color($primary, $lightness: 75%);
+      color: dark-light-diff($secondary, $primary, 80%, -20%);
       &:before {
         font-family: "FontAwesome";
         content: "\f005";
@@ -213,7 +216,7 @@ body {
     background-color:$secondary;
     border: 1px solid scale-color-diff();
     border-radius: 3px;
-    box-shadow: inset 0 1px 1px rgba($primary, .3);
+    box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     transition: border linear 0.2s, box-shadow linear 0.2s;
   }
@@ -222,7 +225,7 @@ body {
       background-color: $secondary;
       border: 1px solid scale-color-diff();
       border-radius: 3px;
-    box-shadow: inset 0 1px 1px rgba($primary, .3);
+    box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
       -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       transition: border linear 0.2s, box-shadow linear 0.2s;
     }
@@ -230,13 +233,13 @@ body {
   textarea:focus {
     border-color: $tertiary;
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
+    box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
   }
   input {
     &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
       border-color: $tertiary;
       outline: 0;
-      box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
+      box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 964339f57d9..abc45f2f488 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -19,7 +19,7 @@
   border: 1px solid scale-color-diff();
   border: 1px solid scale-color-diff();
 
-  box-shadow: 0 3px 7px rgba($primary, .8);
+  box-shadow: 0 3px 7px rgba(0,0,0, .8);
   background-clip: padding-box;
 
 }
@@ -63,11 +63,11 @@ animation: modal .25s;
     font-size: 20px;
     padding: 10px 15px 7px;
   }
+  .close {margin: 10px;}
 }
 .close {
   float: right;
   font-size: 20px;
-  margin: 10px 10px 0;
   text-decoration: none;
   color: scale-color($primary, $lightness: 35%);
   cursor: pointer;
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index 3fef1cb4603..ba626d9b42f 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -5,7 +5,7 @@
   width: 460px;
   left: 20px;
   z-index: 990;
-  box-shadow: 0 2px 6px scale-color-diff();
+  box-shadow: 0 2px 6px rgba(0,0,0, .6);
   margin-top: -2px;
   background-color: $secondary;
   padding: 12px 12px 5px 12px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index e30c4ae08a8..f3d4fc91db6 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -123,7 +123,7 @@
   .sortable {
     cursor: pointer;
     &:hover {
-      background-color: scale-color-diff();
+      background-color: dark-light-diff($primary, $secondary, 90%, -75%);
     }
     @include unselectable;
   }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 752d65cec92..db8e7045623 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -99,13 +99,13 @@ nav.post-controls {
   }
 
   .show-replies {
-    background: scale-color-diff();
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
     padding: 8px 15px;
     padding-bottom: 20px;
     margin-left: 0;
     span.badge-posts {color: scale-color($primary, $lightness: 60%);}
     &:hover {
-      background: scale-color-diff();
+      background: dark-light-diff($primary, $secondary, 90%, -65%);
       span.badge-posts {color: $primary;}
     }
     i {
@@ -116,17 +116,17 @@ nav.post-controls {
   button.create {
     margin-right: 0;
     color: $tertiary;
-    background: scale-color($tertiary, $lightness: 90%);
+    background: dark-light-diff($tertiary, $secondary, 90%, -65%);
     padding: 8px 20px;
     margin-left: 10px;
 
     &:hover {  color: $secondary;
-      background: $tertiary;
+      background: dark-light-diff($tertiary, $secondary, 0%, -20%)
     }
 
     &:active {
-      background: scale-color($tertiary, $lightness: 50%);
-    @include box-shadow(inset 0 1px 3px rgba($primary, .3));
+      background: dark-light-diff($tertiary, $secondary, 50%, -35%);
+    @include box-shadow(inset 0 1px 3px rgba(0,0,0, .3));
 
     }
 
@@ -150,7 +150,7 @@ nav.post-controls {
         }
 
         &:active {
-            @include box-shadow(inset 0 1px 3px rgba($primary, .4));
+            @include box-shadow(inset 0 1px 3px rgba(0,0,0, .4));
         }
 
         &.hidden {
@@ -165,8 +165,9 @@ nav.post-controls {
           color: $secondary;
         }
 
-        &.like:hover {color: $love;
-          background: scale-color($love, $lightness: 75%);
+        &.like:hover {
+          color: $love;
+          background: dark-light-diff($love, $secondary, 85%, -60%)
         }
 
         &.has-like {color: $love;}
@@ -240,11 +241,13 @@ nav.post-controls {
      width: 86%;
      padding-left: 1%;
      padding-right: 1%;
+     border: none;
      }
 
   .topic-avatar {
      width: 45px;
      margin: 0 10px 0 15px;
+     border: none;
 
   }
 
@@ -283,7 +286,7 @@ nav.post-controls {
     .fa-arrow-up {margin-left: 5px;}
     .row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
     .reply:first-of-type .row {border-top: none;}
-  background: scale-color-diff();
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
 
   .quote .title, blockquote, .onebox, .onebox-result {
     background: darken(scale-color-diff(), 5%);
@@ -328,7 +331,7 @@ a.star {
 
 .topic-map {
   margin: 20px 0 0 0;
-  background: scale-color(scale-color-diff(), $lightness: 40%);
+  background: dark-light-diff($primary, $secondary, 90%, -65%);
 
   .buttons .btn {
     &:hover {border: 1px solid $primary !important;}
@@ -437,15 +440,15 @@ a.star {
     float: right;
     .btn {
       border: 0;
-      border-bottom: 1px solid scale-color-diff();
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -75%);
       padding: 0 23px;
       color: $primary;
-      background: scale-color-diff();
+      background: dark-light-diff($primary, $secondary, 80%, -75%);
       &:hover {
-        background: scale-color($primary, $lightness: 75%);
+        background: dark-light-diff($primary, $secondary, 65%, -85%);
         color: $primary;
         border: none !important;
-        border-bottom: 1px solid scale-color($primary, $lightness: 75%) !important;
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 65%, -85%) !important;
         span.badge-posts {color: $primary;}
       }
 
@@ -561,7 +564,10 @@ text-overflow: ellipsis;
     margin-right: 7px;
     font-size: 20px;
     margin-top: 6px;
+    color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
+
   }
+  a.star.starred {color: $danger !important;}
 
   .topic-statuses {
     margin-top: -2px;
@@ -604,13 +610,13 @@ text-overflow: ellipsis;
 
 .moderator {
   .topic-body {
-    background-color: scale-color($highlight, $lightness: 75%);
+    background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
   }
 }
 
 .deleted {
   .topic-body {
-  background-color: scale-color($danger, $lightness: 75%);
+    background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
   }
 }
 
@@ -764,14 +770,15 @@ $topic-avatar-width: 45px;
   float: left;
   position: relative;
   z-index: 2;
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
   padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
   &.highlighted {
-    background-color: scale-color($tertiary, $lightness: 85%);
+    background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
+
   }
 }
 .topic-avatar {
- border-top: 1px solid scale-color-diff();
+ border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
  padding-top: 16px;
  width: $topic-avatar-width;
  float: left;
@@ -830,7 +837,7 @@ $topic-avatar-width: 45px;
   list-style: none;
   background-color: $secondary;
   border: 1px solid scale-color-diff();
-  box-shadow: 0 1px 5px rgba($primary, .4);
+  box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-clip: padding-box;
   span {font-size: 12px;}
   .title {font-weight: bold; display: block; font-size: 14px;}
@@ -852,7 +859,7 @@ $topic-avatar-width: 45px;
 .dropdown-menu .active > a:hover {
   color: $primary;
   text-decoration: none;
-  background-color: scale-color($highlight, $lightness: 60%);
+  background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
 
 }
 
@@ -860,7 +867,7 @@ $topic-avatar-width: 45px;
 .dropdown-menu .disabled > a:hover {
   text-decoration: none;
   color: $primary;
-  background-color: scale-color($tertiary, $lightness: 90%);
+  background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
   cursor: default;
 }
 
@@ -893,7 +900,7 @@ $topic-avatar-width: 45px;
   position: fixed;
   z-index: 1000;
   left: 50%;
-  background-color: scale-color($tertiary, $lightness: 50%);
+  background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
   border: 1px solid $tertiary;
   padding: 5px;
   margin-bottom: 5px;
@@ -945,13 +952,13 @@ $topic-avatar-width: 45px;
     }
     &:active {
       @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
-      @include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
+      @include box-shadow(inset 0 1px 3px rgba(0,0,0, 0.2));
       color: $secondary;
     }
     &[disabled] {
       text-shadow: 0 1px 0 rgba($primary, 0.2);
       @include linear-gradient($tertiary, darken($tertiary, 20%));
-      @include box-shadow((inset 0 1px 0 rgba($primary, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
+      @include box-shadow((inset 0 1px 0 rgba(0,0,0, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
     }
   }
 }
@@ -1007,7 +1014,7 @@ a.attachment:before {
     display: block;
     position: absolute;
     left: 767px;
-    color: scale-color-diff();
+    color: rgba(dark-light-diff($primary, $secondary, 90%, -65%) , .8);
     font: 90px/1 FontAwesome;
     content: "\f05c";
     z-index: -5;
@@ -1043,7 +1050,7 @@ a.attachment:before {
 }
 
 span.highlighted {
-  background-color: scale-color($highlight, $lightness: 70%);
+  background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
 }
 
 .username.new-user a {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 3a09a46b98d..3d42136a5bf 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -86,7 +86,7 @@ a.reply-new {
 a:hover.reply-new {
   color: $tertiary;
   i {
-    background: scale-color($tertiary, $lightness: 75%);
+    background: dark-light-diff($tertiary, $secondary, 90%, -65%);
     border: 1px solid $tertiary;
   }
 }
@@ -109,7 +109,7 @@ a:hover.reply-new {
 }
 
 #topic-closing-info {
-  border-top: 1px solid scale-color-diff();
+  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
   padding-top: 10px;
   height: 20px;
 }
@@ -131,7 +131,7 @@ a:hover.reply-new {
   border: 1px solid scale-color-diff();
   padding: 5px;
   background: $secondary;
-  @include box-shadow(0 0px 2px rgba($primary, .2));
+  @include box-shadow(0 0px 2px rgba(0,0,0, .2));
 
   position: relative;
   left: 345px;
@@ -209,7 +209,7 @@ a:hover.reply-new {
     bottom: 0;
     width: 0;
     border-right: 1px solid  scale-color-diff();
-    background-color:  scale-color($success, $lightness: 70%);
+    background-color:  dark-light-diff($success, $secondary, 60%, -35%);
     transition: width .75s;
   }
 }
@@ -283,7 +283,7 @@ kbd
     background-color: $secondary;
     border:1px solid scale-color-diff();
     border-radius: 3px;
-    box-shadow: 0 1px 0 rgba($primary, .9);
+    box-shadow: 0 1px 0 rgba(0,0,0, .8);
     color: $primary;
     display: inline-block;
     font-size: 12px;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 48feea29d24..f9d492a483d 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -151,7 +151,7 @@
   }
 
   .about {
-    background-color: $primary;
+    background-color: dark-light-diff($primary, $secondary, 0%, -75%);
     background-size: cover;
     background-position: center center;
 
@@ -182,7 +182,8 @@
       }
 
       a[href] {
-        color: $secondary;
+        color: dark-light-diff($secondary, $primary, 75%, -10%);
+
       }
 
       img.avatar {
@@ -197,19 +198,19 @@
         position: relative;
         float: left;
         width: 71%;
-        color: $secondary;
+        color: dark-light-diff($secondary, $primary, 75%, 0%);
         text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
 
         h1, h2 {font-weight: bold;}
 
         .bio {
-          color: $secondary;
+          color: dark-light-diff($secondary, $primary, 75%, 0%);
           text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
           max-height: 300px;
           overflow: auto;
 
           a[href] {
-            color: $secondary;
+            color: dark-light-diff($secondary, $primary, 75%, 0%);
             text-decoration: underline;
             text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
           }
@@ -223,7 +224,7 @@
 
       .secondary {
         float: right;
-        background-color: rgba(scale-color($primary, $lightness: 20%), .9);
+        background-color: rgba(dark-light-diff($primary, $secondary, 20%, -85%), .9);
         text-align: right;
         padding: 0 10px;
         max-width: 20%;
@@ -232,16 +233,18 @@
           margin: 0 0 7px 0;
           overflow: hidden;
           text-overflow: ellipsis;
+          color: dark-light-diff($secondary, $primary, 75%, -10%);
+
         }
         dt {
-          color: rgba($secondary, .7);
+          color: dark-light-diff($secondary, $primary, 50%, -40%);
           margin: 0;
         }
       }
     }
 
     .controls {
-      background-color: scale-color($primary, $lightness: 30%);
+      background-color: dark-light-diff($primary, $secondary, 30%, -80%);
       padding: 12px;
       height: 30px;
 
@@ -300,11 +303,11 @@
       color: $primary;
     }
     .item.moderator-action {
-      background-color:  scale-color($highlight, $lightness: 50%);
+      background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
     }
     .item.deleted {
       opacity: 0.8;
-      background-color: scale-color($danger, $lightness: 50%);
+      background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
     }
     .item.hidden {
       display: block;
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 0d560d6ab19..5618b486325 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -21,7 +21,7 @@
   border: 1px solid rgba(0, 0, 0, 0.3);
 
   @include border-radius-all (6px);
-  box-shadow: 0 3px 7px rgba($primary, 0.3);
+  box-shadow: 0 3px 7px rgba(0,0,0, 0.3);
   background-clip: padding-box;
 }
 
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 61b0067f35e..9daee35432f 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -50,7 +50,7 @@
 }
 
 .docked #topic-progress {
-  box-shadow: 0 0 3px rbga($primary, .5);
+  box-shadow: 0 0 3px rbga(0,0,0, .5);
 }
 
 #topic-progress-wrapper {
@@ -67,7 +67,7 @@
   border: 1px solid scale-color-diff();
   padding: 5px;
   background: $secondary;
-  @include box-shadow(0 0px 2px rgba($primary, .2));
+  @include box-shadow(0 0px 2px rgba(0,0,0, .2));
 
   position: absolute;
   bottom: 34px;
@@ -104,7 +104,7 @@
 }
 
 #topic-progress {
-  box-shadow: 0 0 3px rbga($primary, .7);
+  box-shadow: 0 0 3px rbga(0,0,0, .7);
   position: relative;
   &.hidden {
     display: none;