From 8612643bfce04758d1dfd58090f0ee86dbe6fac1 Mon Sep 17 00:00:00 2001
From: Gilad Gray <giladgray@gmail.com>
Date: Tue, 17 Jan 2017 18:35:13 +0000
Subject: [PATCH] Add TypeScript section to Overview (#491)

Includes a quick fix for the light theme syntax highlighting docs stylesheet
---
 packages/docs/src/styleguide.md       | 34 ++++++++++++++++++++++++++-
 packages/docs/src/styles/_syntax.scss |  1 +
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/styleguide.md b/packages/docs/src/styleguide.md
index 601a676ad9..328ef9e082 100644
--- a/packages/docs/src/styleguide.md
+++ b/packages/docs/src/styleguide.md
@@ -33,9 +33,41 @@ relevant sections in the sidebar for details about the styling & component APIs
   Most packages consist of JS and CSS resources, so please make sure you're including both in your application.
 </div>
 
+### TypeScript
+
+Blueprint is written in [TypeScript](https://www.typescriptlang.org/), a statically typed superset
+of JavaScript that compiles to plain JavaScript. Many of the code samples throughout this site and
+all interactive examples are also written in TypeScript. TypeScript code looks exactly like ES2015
+code with the addition of type signatures.
+
+```ts
+// variables
+const variableName: varType;
+const name: string;
+const disabled: boolean;
+
+// functions (and function variables)
+function funcName(arg1: argType, arg2: argType): returnType { }
+const funcName: (arg1: argType) => returnType;
+function split(str: string, delim: string): string[] { }
+function map<T, U>(array: T[], iterator: (item: T, index: number) => U): U[];
+
+// interfaces describe plain objects
+// (we use the convention that interfaces begin with "I")
+interface IOption {
+  label: string;
+  value: string;
+}
+const option: IOption = { label: "Name", value: "gilad" };
+```
+
+**You do not need to use TypeScript to consume Blueprint** (but major "props" if you do). Familiarity
+with the syntax is suggested so you can follow our examples. Simply ignoring the type annotations
+in your head will produce valid ES2015 code.
+
 ### Browser support
 
-Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.
+**Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.**
 
 You may experience degraded visuals in IE.
 IE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout.
diff --git a/packages/docs/src/styles/_syntax.scss b/packages/docs/src/styles/_syntax.scss
index be86590710..d32533aee9 100644
--- a/packages/docs/src/styles/_syntax.scss
+++ b/packages/docs/src/styles/_syntax.scss
@@ -16,6 +16,7 @@ $syntax-token-colors: (
   "numeric": $rose2,
   "operator": $violet2,
   "punctuation": $dark-gray3,
+  "storage": $violet3,
   "string": $lime1,
   "type": $gold2,
   "variable": $turquoise2,