update syntax highlighting (#848)

* update highlights + language-typescript
* ensure handlebars grammar
* improved light syntax theme
* constants and properties look more like VSCode theme

* move comment last so it overrides others

* revert moving `@each` for specificity reasons

* color JSX ={} operator

* "support" token (console.log),
highlight constant properties (Intent.PRIMARY)

gulp/util/text.js

@@ -38,7 +38,7 @@ var renderer = new marked.Renderer();
 renderer.code = (textContent, language) => {
     // massage markdown language hint into TM language scope
     if (language === "html") {
-        language = "text.html.basic";
+        language = "text.html.handlebars";
     } else if (language != null && !/^source\./.test(language)) {
         language = `source.${language}`;
     }

package.json

@@ -53,7 +53,7 @@
     "gulp-tslint": "7.0.1",
     "gulp-typescript": "3.1.4",
     "gulp-util": "3.0.7",
-    "highlights": "1.4.1",
+    "highlights": "3.0.1",
     "http-server": "0.9.0",
     "istanbul-instrumenter-loader": "0.2.0",
     "json-loader": "0.5.4",
@@ -71,7 +71,7 @@
     "karma-webpack": "1.8.0",
     "kss": "2.4.0",
     "language-less": "github:atom/language-less",
-    "language-typescript": "github:giladgray/language-typescript",
+    "language-typescript": "github:giladgray/language-typescript#10.1.15",
     "lerna": "2.0.0-beta.30",
     "lodash": "4.16.4",
     "marked": "0.3.6",

packages/docs/src/styles/_syntax.scss

@@ -4,30 +4,29 @@ $syntax-background-color: $white;
 $syntax-text-color: $dark-gray1;
 $syntax-token-colors: (
   "brace": $dark-gray3,
-  "comment": $gray2,
-  "constant": $turquoise2,
+  "support": $turquoise3,
   "entity.attribute-name": $orange3,
-  "entity.function": $blue2,
+  "entity.function": $blue3,
   "entity.id": $gold2,
   "entity.pseudo-class": $rose2,
-  "entity.pseudo-element": $forest2,
-  "entity.tag": $forest2,
-  "keyword": $violet3,
+  "entity.pseudo-element": $forest3,
+  "entity.tag": $forest3,
+  "keyword": $violet4,
   "numeric": $rose2,
-  "operator": $violet2,
+  "operator": $violet4,
   "punctuation": $dark-gray3,
-  "storage": $violet3,
-  "string": $lime1,
+  "storage": $violet4,
+  "string": $lime2,
   "type": $gold2,
   "variable": $turquoise2,
+  "comment": $gray2,
 );
 
 $dark-syntax-background-color: $dark-gray2;
 $dark-syntax-text-color: $gray5;
 $dark-syntax-token-colors: (
   "brace": $light-gray5,
-  "comment": $gray2,
-  "constant": $turquoise5,
+  "support": $turquoise5,
   "entity.attribute-name": $orange4,
   "entity.function": $blue4,
   "entity.id": $gold5,
@@ -42,12 +41,14 @@ $dark-syntax-token-colors: (
   "string": $lime4,
   "type": $gold4,
   "variable": $turquoise3,
+  "comment": $gray2,
 );
 
 // given a map of TextMate tokens to colors
 @mixin syntax($colors) {
-  // this one is a very special case, token-wise:
+  // this one is a very special case and must come before @each for specificity
   .entity.name,
+  .entity.inherited-class,
   .meta.name,
   .support.type {
     color: map-get($colors, "type");
@@ -59,10 +60,21 @@ $dark-syntax-token-colors: (
     }
   }
 
+  .variable.property,
   .support.type.scss,
   .punctuation.definition.css {
     color: inherit;
   }
+
+  .variable.constant,
+  .variable.language {
+    color: map-get($colors, "support");
+  }
+
+  // JSX ={prop} punctuation
+  .punctuation.section.embedded {
+    color: map-get($colors, "operator");
+  }
 }
 
 // actually generate the two themes: