Add Solarized themes

- Add solarized-dark and solarized-light themes, based on
  http://ethanschoonover.com/solarized#usage-development
- Update text-contrast-color() to pick the best color, based on Compass
  http://compass-style.org/reference/compass/utilities/color/contrast/
- Previous text-contrast-color() or other simple implementations that
  were experimented didn't work well with both solarized-dark and
  solarized-light

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

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

app/styles/base/_colors.scss

@@ -1,3 +1,5 @@
+@import "compass/utilities/color/contrast";
+
 // Named colors
 $black: #111;
 $white: #d8e5f1;
@@ -20,7 +22,7 @@ $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) { @return contrast-color($bg, text-color(), background-color()); }
 
 // Borders, shadows
 @function base-border-color() { @return mix(medium-color(), background-color(), 50%); }

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%,
+    light-border-percent: 10%,
+  ))
+));

app/styles/themes/_solarized-light.scss

@@ -0,0 +1,11 @@
+$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%,
+    light-border-percent: 10%,
+  ))
+));