Merge branch 'ericbn-solarized' into develop

app/scripts/util/locale.js

@@ -307,6 +307,8 @@ var Locale = {
     setGenThemeDb: 'Dark brown',
     setGenThemeWh: 'White',
     setGenThemeHc: 'High contrast',
+    setGenThemeSd: 'Solarized dark',
+    setGenThemeSl: 'Solarized light',
     setGenFontSize: 'Font size',
     setGenFontSizeNormal: 'Normal',
     setGenFontSizeLarge: 'Large',

app/scripts/views/settings/settings-general-view.js

@@ -48,8 +48,10 @@ var SettingsGeneralView = Backbone.View.extend({
     allThemes: {
         fb: Locale.setGenThemeFb,
         db: Locale.setGenThemeDb,
+        sd: Locale.setGenThemeSd,
+        sl: Locale.setGenThemeSl,
         wh: Locale.setGenThemeWh,
-        hc: Locale.setGenThemeHc
+        hc: Locale.setGenThemeHc,
     },
 
     initialize: function() {

app/styles/base/_colors.scss

@@ -20,7 +20,11 @@ $violet: #d946db;
 @function muted-color-border() { @return mix(medium-color(), background-color(), th(mute-percent) / 2); }
 @function text-selection-bg-color() { @return rgba(action-color(), .3); }
 @function text-selection-bg-color-error() { @return rgba(error-color(), .8); }
-@function text-contrast-color($bg) { @if (lightness($bg) >= lightness(background-color())) { @return text-color(); } @else { @return background-color(); } }
+@function text-contrast-color($bg) {
+  @if ($bg == background-color()) { @return text-color(); }
+  @if (lightness($bg) - th(color-lightness-shift) >= lightness(background-color())) { @return text-color(); }
+  @else { @return background-color(); }
+}
 
 // Borders, shadows
 @function base-border-color() { @return mix(medium-color(), background-color(), 50%); }

app/styles/base/_forms.scss

@@ -182,7 +182,7 @@ input[type=checkbox] {
 
 $thumb-size: 14px;
 
-&input[type=range] {
+input[type=range] {
   -webkit-appearance: none;
   width: 100%;
   margin: 12px 0;

app/styles/common/_icon-select.scss

@@ -1,4 +1,4 @@
-&.icon-select {
+.icon-select {
   &__items {
     @include display(flex);
     @include align-items(flex-start);

app/styles/themes/_all-themes.scss

@@ -5,3 +5,5 @@ $themes: ();
 @import "flat-blue";
 @import "white";
 @import "high-contrast";
+@import "solarized-dark";
+@import "solarized-light";

app/styles/themes/_solarized-dark.scss

@@ -0,0 +1,11 @@
+$themes: map-merge($themes, (
+  sd: map-merge($theme-defaults, (
+    background-color: #002B36,
+    medium-color: #93A1A1,
+    text-color: #839496,
+    action-color: #859900,
+    error-color: #DC322F,
+    mute-percent: 60%,
+    color-lightness-shift: 50%,
+  ))
+));

app/styles/themes/_solarized-light.scss

@@ -0,0 +1,10 @@
+$themes: map-merge($themes, (
+  sl: map-merge($theme-defaults, (
+    background-color: #FDF6E3,
+    medium-color: #586E75,
+    text-color: #657B83,
+    action-color: #859900,
+    error-color: #DC322F,
+    mute-percent: 60%,
+  ))
+));

app/styles/themes/_theme-defaults.scss

@@ -2,4 +2,5 @@ $theme-defaults: (
   mute-percent: 30%,
   light-border-percent: 10%,
   modal-opacity: .9,
+  color-lightness-shift: 0,
 )