From cf891339c01f6804660726c132c9181c84565b61 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Tue, 3 Jan 2017 16:25:50 -0800
Subject: [PATCH 1/3] quick-and-dirty syntax theme!

we've been highlighting this whole time, just not coloring. tried to minimize magic in code, but i couldn't help myself a few times.
---
 packages/core/src/common/_variables.scss |  4 +-
 packages/docs/src/docs.scss              |  5 +-
 packages/docs/src/styles/_syntax.scss    | 85 ++++++++++++++++++++++++
 3 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 packages/docs/src/styles/_syntax.scss

diff --git a/packages/core/src/common/_variables.scss b/packages/core/src/common/_variables.scss
index 3aa976aef8..5f1efaf883 100644
--- a/packages/core/src/common/_variables.scss
+++ b/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.
diff --git a/packages/docs/src/docs.scss b/packages/docs/src/docs.scss
index e1525d8676..f4c56823dd 100644
--- a/packages/docs/src/docs.scss
+++ b/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";
diff --git a/packages/docs/src/styles/_syntax.scss b/packages/docs/src/styles/_syntax.scss
new file mode 100644
index 0000000000..0b6e01bf94
--- /dev/null
+++ b/packages/docs/src/styles/_syntax.scss
@@ -0,0 +1,85 @@
+@import "variables";
+
+$light-scopes: (
+  "attribute-name": $orange3,
+  "background": $white,
+  "comment": $gray2,
+  "constant": $turquoise2,
+  "function": $blue2,
+  "id": $gold2,
+  "keyword": $violet3,
+  "numeric": $rose2,
+  "operator": $violet2,
+  "pseudo-class": $rose2,
+  "punctuation": $dark-gray3,
+  "string": $lime1,
+  "tag": $forest2,
+  "text": $dark-gray1,
+  "type": $gold2,
+  "variable": $turquoise2,
+);
+
+$dark-scopes: (
+  "attribute-name": $orange4,
+  "background": $dark-gray2,
+  "comment": $gray2,
+  "constant": $turquoise5,
+  "function": $blue4,
+  "id": $gold5,
+  "keyword": $violet4,
+  "numeric": $rose4,
+  "operator": $violet5,
+  "pseudo-class": $rose3,
+  "punctuation": $light-gray5,
+  "string": $lime4,
+  "tag": $forest3,
+  "text": $gray5,
+  "type": $gold4,
+  "variable": $turquoise3,
+);
+
+
+@mixin syntax($scopes) {
+  background: map-get($scopes, "background");
+  color: map-get($scopes, "text");
+
+  @each $scope in ("punctuation" "comment" "string" "constant" "numeric" "variable" "keyword" "operator") {
+    .#{$scope} { color: map-get($scopes, $scope); }
+  }
+
+  .storage {
+    @extend .keyword;
+  }
+
+  .entity.name,
+  .meta.name,
+  .support.type {
+    color: map-get($scopes, "type");
+  }
+
+  .entity {
+    @each $scope in ("attribute-name" "tag" "function" "pseudo-class") {
+      &.#{$scope} { color: map-get($scopes, $scope); }
+    }
+
+    &.pseudo-element {
+      @extend .tag;
+    }
+  }
+
+  .support.type.scss,
+  .punctuation.definition.css {
+    color: inherit;
+  }
+}
+
+// actually generate the two themes:
+
+.editor-colors {
+  @include syntax($light-scopes);
+
+  .pt-dark & {
+    @include syntax($dark-scopes);
+  }
+}
+

From f39c0bae7741085e46ddcdbab9c56d105f871ff1 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Wed, 4 Jan 2017 14:26:17 -0800
Subject: [PATCH 2/3] rewrite to avoid `@extend` entirely

---
 packages/docs/src/styles/_syntax.scss | 72 ++++++++++++---------------
 1 file changed, 32 insertions(+), 40 deletions(-)

diff --git a/packages/docs/src/styles/_syntax.scss b/packages/docs/src/styles/_syntax.scss
index 0b6e01bf94..672147cdf5 100644
--- a/packages/docs/src/styles/_syntax.scss
+++ b/packages/docs/src/styles/_syntax.scss
@@ -1,69 +1,58 @@
 @import "variables";
 
-$light-scopes: (
-  "attribute-name": $orange3,
-  "background": $white,
+$syntax-background-color: $white;
+$syntax-text-color: $dark-gray1;
+$syntax-token-colors: (
   "comment": $gray2,
   "constant": $turquoise2,
-  "function": $blue2,
-  "id": $gold2,
+  "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,
-  "pseudo-class": $rose2,
   "punctuation": $dark-gray3,
   "string": $lime1,
-  "tag": $forest2,
-  "text": $dark-gray1,
   "type": $gold2,
   "variable": $turquoise2,
 );
 
-$dark-scopes: (
-  "attribute-name": $orange4,
-  "background": $dark-gray2,
+$dark-syntax-background-color: $dark-gray2;
+$dark-syntax-text-color: $gray5;
+$dark-syntax-token-colors: (
   "comment": $gray2,
   "constant": $turquoise5,
-  "function": $blue4,
-  "id": $gold5,
+  "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,
-  "pseudo-class": $rose3,
   "punctuation": $light-gray5,
+  "storage": $violet4,
   "string": $lime4,
-  "tag": $forest3,
-  "text": $gray5,
   "type": $gold4,
   "variable": $turquoise3,
 );
 
-
-@mixin syntax($scopes) {
-  background: map-get($scopes, "background");
-  color: map-get($scopes, "text");
-
-  @each $scope in ("punctuation" "comment" "string" "constant" "numeric" "variable" "keyword" "operator") {
-    .#{$scope} { color: map-get($scopes, $scope); }
-  }
-
-  .storage {
-    @extend .keyword;
-  }
-
+// 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($scopes, "type");
+    color: map-get($colors, "type");
   }
 
-  .entity {
-    @each $scope in ("attribute-name" "tag" "function" "pseudo-class") {
-      &.#{$scope} { color: map-get($scopes, $scope); }
-    }
-
-    &.pseudo-element {
-      @extend .tag;
+  @each $scope, $color in $colors {
+    @if $scope != "type" {
+      .#{$scope} { color: $color; }
     }
   }
 
@@ -74,12 +63,15 @@ $dark-scopes: (
 }
 
 // actually generate the two themes:
-
 .editor-colors {
-  @include syntax($light-scopes);
+  @include syntax($syntax-token-colors);
+  background: $syntax-background-color;
+  color: $syntax-text-color;
 
   .pt-dark & {
-    @include syntax($dark-scopes);
+    @include syntax($dark-syntax-token-colors);
+    background: $dark-syntax-background-color;
+    color: $dark-syntax-text-color;
   }
 }
 

From 18f988a5125f98800b2a32611f948d593115759e Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Wed, 4 Jan 2017 14:29:41 -0800
Subject: [PATCH 3/3] brace colors, un-bethicken braces, fix one language hint

---
 packages/datetime/src/_datepicker.scss |  2 +-
 packages/docs/src/styles/_content.scss | 13 -------------
 packages/docs/src/styles/_syntax.scss  |  2 ++
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index f101ecf370..b1010359b0 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/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() };
diff --git a/packages/docs/src/styles/_content.scss b/packages/docs/src/styles/_content.scss
index 65c6034a24..08a39d8688 100644
--- a/packages/docs/src/styles/_content.scss
+++ b/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;
-  }
 }
diff --git a/packages/docs/src/styles/_syntax.scss b/packages/docs/src/styles/_syntax.scss
index 672147cdf5..be86590710 100644
--- a/packages/docs/src/styles/_syntax.scss
+++ b/packages/docs/src/styles/_syntax.scss
@@ -3,6 +3,7 @@
 $syntax-background-color: $white;
 $syntax-text-color: $dark-gray1;
 $syntax-token-colors: (
+  "brace": $dark-gray3,
   "comment": $gray2,
   "constant": $turquoise2,
   "entity.attribute-name": $orange3,
@@ -23,6 +24,7 @@ $syntax-token-colors: (
 $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,