Add CSS4 color keywords from PR #37 and fix for Issue #21

Author: jacobcassidy

src/vscode-css/grammars/css.cson

@@ -754,6 +754,17 @@
     ]
   'color-keywords':
     'patterns': [
+      {
+        # Allow shorthand property in specific contexts (Fix for https://github.com/microsoft/vscode-css/issues/21)
+        'match': '''(?xi)
+          (?<=
+            (transition|transition-property)
+            \\:[\\w\\s\\-,]*
+          )
+          background
+        '''
+        'name': 'support.constant.property-value.css'
+      }
       {
         # CSS 2.1 colors: http://www.w3.org/TR/CSS21/syndata.html#value-def-color
         'match': '(?i)(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])'
@@ -786,13 +797,21 @@
         'match': '(?i)(?<![\\w-])currentColor(?![\\w-])'
         'name': 'support.constant.color.current.css'
       }
+      {
+        # CSS4 color names https://drafts.csswg.org/css-color-4/#css-system-colors
+        'match': '''(?xi) (?<![\\w-])
+          (accentcolor|accentcolortext|activetext|buttonborder|buttonface|buttontext|canvas|canvastext|field|fieldtext
+          |graytext|highlight|highlighttext|linktext|mark|marktext|selecteditem|selecteditemtext|visitedtext)
+          (?![\\w-])
+        '''
+        'name': 'support.constant.color.system.css'
+      }
       {
         # These colors are deprecated in CSS3: http://www.w3.org/TR/css3-color/#css2-system
         'match': '''(?xi) (?<![\\w-])
-          (ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|ButtonHighlight|ButtonShadow
-          |ButtonText|CaptionText|GrayText|Highlight|HighlightText|InactiveBorder|InactiveCaption
-          |InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow
-          |ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)
+          (ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonHighlight|ButtonShadow|CaptionText
+          |InactiveBorder|InactiveCaption|InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar
+          |ThreeDDarkShadow|ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)
           (?![\\w-])
         '''
         'name': 'invalid.deprecated.color.system.css'

src/vscode-css/spec/css-spec.mjs

@@ -14914,6 +14914,50 @@ describe("CSS grammar", function () {
 				});
 			});
 
+			it("tokenizes system color keywords", function () {
+				var tokens;
+				tokens = testGrammar.tokenizeLine("a { color: AccentColor; }").tokens;
+				assert.deepStrictEqual(tokens[7], {
+					value: "AccentColor",
+					scopes: [
+						"source.css",
+						"meta.property-list.css",
+						"meta.property-value.css",
+						"support.constant.color.system.css",
+					],
+				});
+			});
+
+			it("tokenizes deprecated system color keywords", function () {
+				var tokens;
+				tokens = testGrammar.tokenizeLine("a { color: background; }").tokens;
+				assert.deepStrictEqual(tokens[7], {
+					value: "background",
+					scopes: [
+						"source.css",
+						"meta.property-list.css",
+						"meta.property-value.css",
+						"invalid.deprecated.color.system.css",
+					],
+				});
+			});
+
+			it("does not confuse property names for deprecated color keywords", function () {
+				var tokens;
+				tokens = testGrammar.tokenizeLine(
+					"a { transition-property: background; }"
+				).tokens;
+				assert.deepStrictEqual(tokens[7], {
+					value: "background",
+					scopes: [
+						"source.css",
+						"meta.property-list.css",
+						"meta.property-value.css",
+						"support.constant.property-value.css",
+					],
+				});
+			});
+
 			it("tokenises RGBA values in hex notation", function () {
 				var tokens;
 				tokens = testGrammar.tokenizeLine("p{ color: #f030; }").tokens;