Add code syntax theme to docs

packages/core/src/common/_variables.scss

@@ -15,8 +15,8 @@ Variables
 
 Available for use with Sass and Less.
 
-```scss
-@import "path/to/blueprint/variables";
+```css.scss
+@import "path/to/@blueprintjs/core/dist/variables";
 ```
 
 The Sass `$` convention is used in this documentation for consistency with the original source code.

packages/datetime/src/_datepicker.scss

@@ -64,7 +64,7 @@ by using the component in controlled mode and with the `modifiers` prop:
 }
 ```
 
-```ts
+```
 // in TypeScript
 export class DatePickerExample extends React.Component<{}, { selectedDate: Date }> {
     public state = { selectedDate: new Date() };

packages/docs/src/docs.scss

@@ -11,10 +11,6 @@ and https://github.com/palantir/blueprint/blob/master/PATENTS
 @import "~@blueprintjs/datetime";
 @import "~@blueprintjs/table";
 
-// TODO publish and re-enable
-// @import "blueprint-syntax/dist/atom-blueprint-syntax-light.css";
-// @import "blueprint-syntax/dist/atom-blueprint-syntax-dark.css";
-
 @import "styles/colors";
 @import "styles/content";
 @import "styles/examples";
@@ -25,3 +21,4 @@ and https://github.com/palantir/blueprint/blob/master/PATENTS
 @import "styles/overrides";
 @import "styles/props";
 @import "styles/sections";
+@import "styles/syntax";

packages/docs/src/styles/_content.scss

@@ -178,17 +178,4 @@ $dark-example-background-color: $dark-content-background-color;
       color: $class-modifier-color;
     }
   }
-
-  // slightly heavier () and {} for increased contrast
-  .meta.brace.curly,
-  .meta.brace.paren,
-  .meta.brace.round,
-  .tag.tsx .meta.brace .punctuation.brace {
-    font-weight: 600;
-  }
-
-  // restore font-weight for contents of JSX attribute statement
-  .tag.tsx .meta.brace.curly {
-    font-weight: inherit;
-  }
 }

packages/docs/src/styles/_syntax.scss

@@ -0,0 +1,79 @@
+@import "variables";
+
+$syntax-background-color: $white;
+$syntax-text-color: $dark-gray1;
+$syntax-token-colors: (
+  "brace": $dark-gray3,
+  "comment": $gray2,
+  "constant": $turquoise2,
+  "entity.attribute-name": $orange3,
+  "entity.function": $blue2,
+  "entity.id": $gold2,
+  "entity.pseudo-class": $rose2,
+  "entity.pseudo-element": $forest2,
+  "entity.tag": $forest2,
+  "keyword": $violet3,
+  "numeric": $rose2,
+  "operator": $violet2,
+  "punctuation": $dark-gray3,
+  "string": $lime1,
+  "type": $gold2,
+  "variable": $turquoise2,
+);
+
+$dark-syntax-background-color: $dark-gray2;
+$dark-syntax-text-color: $gray5;
+$dark-syntax-token-colors: (
+  "brace": $light-gray5,
+  "comment": $gray2,
+  "constant": $turquoise5,
+  "entity.attribute-name": $orange4,
+  "entity.function": $blue4,
+  "entity.id": $gold5,
+  "entity.pseudo-class": $rose3,
+  "entity.pseudo-element": $forest3,
+  "entity.tag": $forest3,
+  "keyword": $violet4,
+  "numeric": $rose4,
+  "operator": $violet5,
+  "punctuation": $light-gray5,
+  "storage": $violet4,
+  "string": $lime4,
+  "type": $gold4,
+  "variable": $turquoise3,
+);
+
+// given a map of TextMate tokens to colors
+@mixin syntax($colors) {
+  // this one is a very special case, token-wise:
+  .entity.name,
+  .meta.name,
+  .support.type {
+    color: map-get($colors, "type");
+  }
+
+  @each $scope, $color in $colors {
+    @if $scope != "type" {
+      .#{$scope} { color: $color; }
+    }
+  }
+
+  .support.type.scss,
+  .punctuation.definition.css {
+    color: inherit;
+  }
+}
+
+// actually generate the two themes:
+.editor-colors {
+  @include syntax($syntax-token-colors);
+  background: $syntax-background-color;
+  color: $syntax-text-color;
+
+  .pt-dark & {
+    @include syntax($dark-syntax-token-colors);
+    background: $dark-syntax-background-color;
+    color: $dark-syntax-text-color;
+  }
+}
+