Merge pull request #3680 from riking/dark-theme-fix

Dark theme fix, part 4

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

@@ -31,11 +31,57 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
 @import "theme_variables";
 @import "plugins_variables";
 
+// Color Utilities
+
+// Square Root function
+// http://codepen.io/Designer023/pen/DkEtw
+@function approximateSq($num, $approx) {
+  $root : (( $num / $approx ) + $approx) / 2;
+  @return $root;
+}
+
+@function sqrt($num) {
+  $root:0;
+  $testRoot : 0.001;
+  $upperBounds : round($num / 2) + 1; //never need over half the main number. Add one just to be sure!
+  $loops : $upperBounds;
+  @for $test from 2 through $upperBounds {
+    $sq : $test * $test;
+    @if $sq <= $num {
+      $testRoot : $test;
+    }
+  }
+
+  $root : (approximateSq($num, $testRoot));
+
+  @return $root;
+}
+
 // w3c definition of color brightness
 @function brightness($color) {
   @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114));
 }
 
+// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
+// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
+@function choose-grey($percent) {
+  $ratio: ($percent / 100%);
+  $iratio: 1 - $ratio;
+  $pr2: red($primary) * red($primary);
+  $pg2: green($primary) * green($primary);
+  $pb2: blue($primary) * blue($primary);
+  $sr2: red($secondary) * red($secondary);
+  $sg2: green($secondary) * green($secondary);
+  $sb2: blue($secondary) * blue($secondary);
+  $rr2: $pr2 * $ratio + $sr2 * $iratio;
+  $rg2: $pg2 * $ratio + $sg2 * $iratio;
+  $rb2: $pb2 * $ratio + $sb2 * $iratio;
+  $rr: sqrt($rr2);
+  $rg: sqrt($rg2);
+  $rb: sqrt($rb2);
+  @return rgb($rr, $rg, $rb);
+}
+
 @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
   @if brightness($adjusted-color) < brightness($comparison-color) {
     @return scale-color($adjusted-color, $lightness: $lightness);

app/assets/stylesheets/desktop/user.scss

@@ -395,7 +395,7 @@
     .details {
       padding: 12px 15px 2px 15px;
       margin-top: 0;
-      background: dark-light-choose(rgba($primary, 1), scale-color($secondary, $lightness: 40%));
+      background: dark-light-choose(rgba($primary, 1), scale-color($secondary, $lightness: 15%));
       .bio { display: none; }
 
       .primary {

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

@@ -65,7 +65,7 @@
 
   > tbody > tr {
     &.highlighted {
-      background-color: scale-color($tertiary, $lightness: 85%);
+      background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%));
     }
   }