Merge pull request #10410 from MarcelGerber/css-hints-color

Hint color names in CSS Code Hints

Author: redmunds

src/extensions/default/CSSCodeHints/CSSProperties.json

@@ -16,19 +16,19 @@
     "background-attachment":       {"values": ["fixed", "local", "scroll", "inherit"]},
     "background-blend-mode":       {"values": ["color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hard-light", "hue", "lighten", "luminosity", "normal", "multiply", "overlay", "saturation", "screen", "soft-light"]},
     "background-clip":             {"values": ["border-box", "content-box", "padding-box", "inherit"]},
-    "background-color":            {"values": ["currentColor", "transparent", "inherit"]},
+    "background-color":            {"values": ["inherit"], "type": "color"},
     "background-image":            {"values": ["image()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "url()"]},
     "background-origin":           {"values": ["border-box", "content-box", "padding-box", "inherit"]},
     "background-position":         {"values": ["left", "center", "right", "bottom", "top"]},
     "background-repeat":           {"values": ["no-repeat", "repeat", "repeat-x", "repeat-y", "round", "space"]},
     "background-size":             {"values": ["auto", "contain", "cover"]},
     "border":                      {"values": []},
     "border-collapse":             {"values": ["collapse", "separate", "inherit"]},
-    "border-color":                {"values": ["currentColor", "transparent", "inherit"]},
+    "border-color":                {"values": ["inherit"], "type": "color"},
     "border-spacing":              {"values": ["inherit"]},
     "border-style":                {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
     "border-bottom":               {"values": []},
-    "border-bottom-color":         {"values": ["currentColor", "transparent", "inherit"]},
+    "border-bottom-color":         {"values": ["inherit"], "type": "color"},
     "border-bottom-left-radius":   {"values": []},
     "border-bottom-right-radius":  {"values": []},
     "border-bottom-style":         {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
@@ -40,16 +40,16 @@
     "border-image-repeat":         {"values": ["repeat", "round", "space", "stretch"]},
     "border-image-width":          {"values": ["auto"]},    
     "border-left":                 {"values": []},
-    "border-left-color":           {"values": ["currentColor", "transparent", "inherit"]},
+    "border-left-color":           {"values": ["inherit"], "type": "color"},
     "border-left-style":           {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
     "border-left-width":           {"values": ["medium", "thin", "thick", "inherit"]},
     "border-radius":               {"values": []},
     "border-right":                {"values": []},
-    "border-right-color":          {"values": ["currentColor", "transparent", "inherit"]},
+    "border-right-color":          {"values": ["inherit"], "type": "color"},
     "border-right-style":          {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
     "border-right-width":          {"values": ["medium", "thin", "thick", "inherit"]},
     "border-top":                  {"values": []},
-    "border-top-color":            {"values": ["currentColor", "transparent", "inherit"]},
+    "border-top-color":            {"values": ["inherit"], "type": "color"},
     "border-top-left-radius":      {"values": []},
     "border-top-right-radius":     {"values": []},
     "border-top-style":            {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
@@ -65,13 +65,13 @@
     "caption-side":                {"values": ["bottom", "top", "inherit"]},
     "clear":                       {"values": ["both", "left", "none", "right", "inherit"]},
     "clip":                        {"values": ["auto", "inherit"]},
-    "color":                       {"values": ["inherit"]},
+    "color":                       {"values": ["inherit"], "type": "color"},
     "columns":                     {"values": []},
     "column-count":                {"values": []},
     "column-fill":                 {"values": ["auto", "balance"]},
     "column-gap":                  {"values": ["normal"]},
     "column-rule":                 {"values": []},
-    "column-rule-color":           {"values": ["currentColor"]},
+    "column-rule-color":           {"values": [], "type": "color"},
     "column-rule-style":           {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
     "column-rule-width":           {"values": ["medium", "thin", "thick", "inherit"]},
     "column-span":                 {"values": ["all", "none"]},
@@ -139,7 +139,7 @@
     "order":                       {"values": []},
     "orphans":                     {"values": ["inherit"]},
     "outline":                     {"values": ["inherit"]},
-    "outline-color":               {"values": ["invert", "inherit"]},
+    "outline-color":               {"values": ["invert", "inherit"], "type": "color"},
     "outline-offset":              {"values": ["inherit"]},
     "outline-style":               {"values": ["dashed", "dotted", "double", "groove", "hidden", "inset", "none", "outset", "ridge", "solid", "inherit"]},
     "outline-width":               {"values": ["medium", "thin", "thick", "inherit"]},
@@ -174,12 +174,12 @@
     "text-align":                  {"values": ["center", "left", "justify", "right", "inherit"]},
     "text-align-last":             {"values": ["center", "left", "justify", "right", "inherit"]},
     "text-decoration":             {"values": ["line-through", "none", "overline", "underline", "inherit"]},
-    "text-decoration-color":       {"values": ["currentColor"]},
+    "text-decoration-color":       {"values": [], "type": "color"},
     "text-decoration-line":        {"values": ["line-through", "none", "overline", "underline"]},
     "text-decoration-skip":        {"values": ["edges", "ink", "none", "objects", "spaces"]},
     "text-decoration-style":       {"values": ["dashed", "dotted", "double", "solid", "wavy"]},
     "text-emphasis":               {"values": []},
-    "text-emphasis-color":         {"values": ["currentColor"]},
+    "text-emphasis-color":         {"values": [], "type": "color"},
     "text-emphasis-position":      {"values": ["above", "below", "left", "right"]},
     "text-emphasis-style":         {"values": ["circle", "dot", "double-circle", "filled", "none", "open", "sesame", "triangle"]},
     "text-indent":                 {"values": ["inherit"]},

src/extensions/default/CSSCodeHints/main.js

@@ -35,6 +35,7 @@ define(function (require, exports, module) {
         LanguageManager = brackets.getModule("language/LanguageManager"),
         TokenUtils      = brackets.getModule("utils/TokenUtils"),
         StringMatch     = brackets.getModule("utils/StringMatch"),
+        ColorUtils      = brackets.getModule("utils/ColorUtils"),
         CSSProperties   = require("text!CSSProperties.json"),
         properties      = JSON.parse(CSSProperties);
 
@@ -241,6 +242,7 @@ define(function (require, exports, module) {
             valueNeedle = "",
             context = this.info.context,
             valueArray,
+            type,
             namedFlows,
             result,
             selectInitial = false;
@@ -272,7 +274,8 @@ define(function (require, exports, module) {
             }
 
             valueArray = properties[needle].values;
-            if (properties[needle].type === "named-flow") {
+            type = properties[needle].type;
+            if (type === "named-flow") {
                 namedFlows = this.getNamedFlows();
 
                 if (valueNeedle.length === this.info.offset && namedFlows.indexOf(valueNeedle) !== -1) {
@@ -282,6 +285,9 @@ define(function (require, exports, module) {
                 }
 
                 valueArray = valueArray.concat(namedFlows);
+            } else if (type === "color") {
+                valueArray = valueArray.concat(ColorUtils.COLOR_NAMES);
+                valueArray.push("transparent", "currentColor");
             }
 
             result = $.map(valueArray, function (pvalue, pindex) {