add support for CSS4 system colors

Author: romainmenke

grammars/css.cson

@@ -674,11 +674,20 @@
         '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 colours 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
+          (ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonHighlight|ButtonShadow
+          |CaptionText|InactiveBorder|InactiveCaption
           |InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow
           |ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)
           (?![\\w-])

spec/css-spec.mjs

@@ -7315,6 +7315,7 @@ describe('CSS grammar', function () {
 				scopes: ['source.css', 'meta.property-list.css', 'meta.property-name.css', 'support.type.property-name.css']
 			});
 		});
+
 		describe('values', function () {
 			it('tokenizes color keywords', function () {
 				var tokens;
@@ -7325,6 +7326,34 @@ 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']
+				});
+			});
+
+			// https://github.com/microsoft/vscode-css/issues/21
+			it.skip('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;