fix gutter colors in theme importer

ajaxorg · Oct 5, 2014 · ab6aa3b · ab6aa3b
1 parent 14fc8ad
commit ab6aa3b
Show file tree

Hide file tree

Showing 7 changed files with 1,351 additions and 16 deletions.
diff --git a/lib/ace/theme/cobalt.css b/lib/ace/theme/cobalt.css
@@ -1,6 +1,6 @@
 .ace-cobalt .ace_gutter {
   background: #011e3a;
-  color: #fff
+  color: rgb(128,145,160)
 }
 
 .ace-cobalt .ace_print-margin {

diff --git a/lib/ace/theme/idle_fingers.css b/lib/ace/theme/idle_fingers.css
@@ -1,6 +1,6 @@
 .ace-idle-fingers .ace_gutter {
   background: #3b3b3b;
-  color: #fff
+  color: rgb(153,153,153)
 }
 
 .ace-idle-fingers .ace_print-margin {

diff --git a/lib/ace/theme/tomorrow_night_bright.css b/lib/ace/theme/tomorrow_night_bright.css
@@ -34,12 +34,13 @@
   margin: -1px 0 0 -1px;
   border: 1px solid #888888
 }
+
 .ace-tomorrow-night-bright .ace_marker-layer .ace_highlight {
-    border: 1px solid rgb(110, 119, 0);
-    border-bottom: 0;
-    box-shadow: inset 0 -1px rgb(110, 119, 0);
-    margin: -1px 0 0 -1px;
-    background: rgba(255, 235, 0, 0.1);
+  border: 1px solid rgb(110, 119, 0);
+  border-bottom: 0;
+  box-shadow: inset 0 -1px rgb(110, 119, 0);
+  margin: -1px 0 0 -1px;
+  background: rgba(255, 235, 0, 0.1)
 }
 
 .ace-tomorrow-night-bright .ace_marker-layer .ace_active-line {
@@ -132,7 +133,7 @@
 }
 
 .ace-tomorrow-night-bright .ace_c9searchresults.ace_keyword {
-    color: #C2C280;
+  color: #C2C280
 }
 
 .ace-tomorrow-night-bright .ace_indent-guide {

diff --git a/tool/templates/theme.css b/tool/templates/theme.css
@@ -1,8 +1,8 @@
 /* THIS THEME WAS AUTOGENERATED BY Theme.tmpl.css (UUID: %uuid%) */
 
 .%cssClass% .ace_gutter {
-  background: #e8e8e8;
-  color: #333;
+  background: %gutterBg%;
+  color: %gutterFg%;
 }
 
 .%cssClass% .ace_print-margin {

diff --git a/tool/tmtheme.js b/tool/tmtheme.js
@@ -115,7 +115,7 @@ function extractStyles(theme) {
 
             var aceScope = supportedScopes[scope];
             if (aceScope) {
-                colors[aceScope] = style;                
+                colors[aceScope] = style;
             }
             else if (style) {
                 unsupportedScopes[scope] = (unsupportedScopes[scope] || 0) + 1;
@@ -134,25 +134,44 @@ function extractStyles(theme) {
             colors.fold = foldSource.match(/\:([^;]+)/)[1];
         }
     }
+
+    colors.gutterBg = colors.background
+    colors.gutterFg = mix(colors.foreground, colors.background, 0.5)
 
     if (!colors.selected_word_highlight)
         colors.selected_word_highlight =  "border: 1px solid " + colors.selection + ";";
 
     colors.isDark = (luma(colors.background) < 0.5) + "";
-
+    
     return colors;
 };
 
-function luma(color) {
+function mix(c1, c2, a1, a2) {
+    c1 = rgbColor(c1);
+    c2 = rgbColor(c2);
+    if (a2 === undefined)
+        a2 = 1 - a1
+    return "rgb(" + [
+        Math.round(a1*c1[0] + a2*c2[0]),
+        Math.round(a1*c1[1] + a2*c2[1]),
+        Math.round(a1*c1[2] + a2*c2[2])
+    ].join(",") + ")";
+}
+
+function rgbColor(color) {
+    if (typeof color == "object")
+        return color;
     if (color[0]=="#")
-        var rgb = color.match(/^#(..)(..)(..)/).slice(1).map(function(c) {
+        return color.match(/^#(..)(..)(..)/).slice(1).map(function(c) {
             return parseInt(c, 16);
         });
     else
-        var rgb = color.match(/\(([^,]+),([^,]+),([^,]+)/).slice(1).map(function(c) {
+        return color.match(/\(([^,]+),([^,]+),([^,]+)/).slice(1).map(function(c) {
             return parseInt(c, 10);
         });
-
+}
+function luma(color) {
+    var rgb = rgbColor(color);
     return (0.21 * rgb[0] + 0.72 * rgb[1] + 0.07 * rgb[2]) / 255;
 }