make CSS highlighting more compatible with TextMate

src/ace/layer/Text.js

@@ -244,7 +244,7 @@ var Text = function(parentEl) {
                 .replace(/\t/g, this.$tabString);
 
             if (!this.$textToken[token.type]) {
-                var classes = "ace_" + token.type.replace(".", " ace_");
+                var classes = "ace_" + token.type.replace(/\./g, " ace_");
                 stringBuilder.push("<span class='", classes, "'>", output, "</span>");
             }
             else {

src/ace/mode/CssHighlightRules.js

@@ -69,6 +69,11 @@ var CssHighlightRules = function() {
         "zero").split("|")
     );
     
+    var colors = lang.arrayToMap(
+        ("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" +
+        "purple|red|silver|teal|white|yellow").split("|")
+    );
+
     // regexp must not have capturing parentheses. Use (?:) instead.
     // regexps are ordered -> the first match is used
 
@@ -100,61 +105,61 @@ var CssHighlightRules = function() {
             token : "string", // single line
             regex : "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("em")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("ex")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("px")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("cm")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("mm")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("in")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("pt")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("pc")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("deg")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("rad")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("grad")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("ms")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("s")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("hz")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + ic("khz")
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe + "%"
         }, {
-            token : "number",
+            token : "constant.numeric",
             regex : numRe
         }, {
-            token : "number",  // hex6 color
+            token : "constant.numeric",  // hex6 color
             regex : "#[a-fA-F0-9]{6}"
         }, {
-            token : "number", // hex3 color
+            token : "constant.numeric", // hex3 color
             regex : "#[a-fA-F0-9]{3}"
         }, {
             token : "lparen",
@@ -165,16 +170,19 @@ var CssHighlightRules = function() {
         }, {
             token : function(value) {
                 if (properties[value.toLowerCase()]) {
-                    return "constant.language";
+                    return "support.type";
                 }
                 else if (functions[value.toLowerCase()]) {
-                    return "function.language";
+                    return "support.function";
                 }
                 else if (constants[value.toLowerCase()]) {
-                    return "constant.library";
+                    return "support.constant";
+                }
+                else if (colors[value.toLowerCase()]) {
+                    return "support.constant.color";
                 }
                 else {
-                    return "identifier";
+                    return "text";
                 }
             },
             regex : "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"

src/ace/theme/Dawn.js

@@ -111,8 +111,12 @@ font-style:italic;\
 color:#B52A1D;\
 }\
 \
-.ace-dawn .ace_function {\
+.ace-dawn .ace_support {\
+  color:#691C97;\
+}\
 \
+.ace-dawn .ace_support.ace_function {\
+  color:#693A17;\
 }\
 \
 .ace-dawn .ace_function.ace_buildin {\

src/ace/theme/IdleFingers.js

@@ -107,10 +107,14 @@ background-color:#FF0000;\
   \
 }\
 \
-.ace-idle-fingers .ace_function {\
+.ace-idle-fingers .ace_support {\
   \
 }\
 \
+.ace-idle-fingers .ace_support.ace_function {\
+  color:#B83426;\
+}\
+\
 .ace-idle-fingers .ace_function.ace_buildin {\
   \
 }\

src/ace/theme/Twilight.js

@@ -109,8 +109,12 @@ font-style:italic;\
 color:#D2A8A1;\
 }\
 \
-.ace-twilight .ace_function {\
+.ace-twilight .ace_support {\
+  color:#9B859D;\
+}\
 \
+.ace-twilight .ace_support.ace_function {\
+  color:#DAD085;\
 }\
 \
 .ace-twilight .ace_function.ace_buildin {\

src/ace/theme/tm.css

@@ -61,7 +61,7 @@
   color: white;
 }
 
-.ace-tm .ace_line .ace_function {
+.ace-tm .ace_line .ace_support.ace_function {
   color: rgb(60, 76, 114);
 }
 

tool/Theme.tmpl.css

@@ -103,8 +103,12 @@
   %invalid.deprecated%
 }
 
-.%cssClass% .ace_function {
+.%cssClass% .ace_support {
-  %function%
+  %support%
+}
+
+.%cssClass% .ace_support.ace_function {
+  %support.function%
 }
 
 .%cssClass% .ace_function.ace_buildin {

tool/tmtheme.js

@@ -63,6 +63,9 @@ var supportedScopes = {
    "constant.library": "constant.library",
    "constant.numeric": "constant.numeric",
    
+   "support": "support",
+   "support.function": "support.function",
+
    "function": "function",
    "function.buildin": "function.buildin",