From 9869d59cadb009fdd8b07f8516ff62a5a8f76b3a Mon Sep 17 00:00:00 2001
From: hathix <neelmehta@college.harvard.edu>
Date: Tue, 26 May 2015 19:07:51 -0700
Subject: [PATCH] Added new exercise colors as macros

Summary:
On https://app.asana.com/0/34646644303310/33935538887378, @eater requested we add some new colors to KaTeX, which lives in the spin-off Khan/KaTeX open source project. (See screenshot for colors.) I added these colors to KaTeX so math typesetting tools in exercises have access to them.

I used "blueA", "blueB", etc. because dashes and numbers aren't supported in KaTeX/LaTeX functions.

The actual mapping of color name => hex value is in "Options", and the listing of colors available for typesetting is in "functions".

See also https://phabricator.khanacademy.org/D18158 for the related additions to utils/math.js and KAthJax.

Test Plan:
- Set up the KaTeX dev environment (instructions taken from https://github.com/Khan/KaTeX/blob/master/CONTRIBUTING.md):
```
cd KaTeX
make setup
make serve
```
- Now that the server is up and running, visit http://localhost:7936/ to try live typesetting. Enter the following LaTeX code to try the new colors:
```
\blueE{e=mc^2}
```
- Try other new colors including \redD, \mintC, \grayH, \kaBlue, etc.
- Old colors like \orange should still work.
- Run the Jasmine test suite at http://localhost:7936/test/test.html.

Reviewers: emily

Reviewed By: emily

Subscribers: nataliefitzgerald, eater, cameron, david

Differential Revision: https://phabricator.khanacademy.org/D18152
---
 src/Options.js     | 51 +++++++++++++++++++++++++++++++++++++++++++++-
 src/functions.js   | 13 +++++++++++-
 test/katex-spec.js |  5 +++++
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/Options.js b/src/Options.js
index a3febb45b..72ae999aa 100644
--- a/src/Options.js
+++ b/src/Options.js
@@ -111,7 +111,56 @@ var colorMap = {
     "katex-red": "#df0030",
     "katex-green": "#28ae7b",
     "katex-gray": "gray",
-    "katex-purple": "#9d38bd"
+    "katex-purple": "#9d38bd",
+    "katex-blueA": "#c7e9f1",
+    "katex-blueB": "#9cdceb",
+    "katex-blueC": "#58c4dd",
+    "katex-blueD": "#29abca",
+    "katex-blueE": "#1c758a",
+    "katex-tealA": "#acead7",
+    "katex-tealB": "#76ddc0",
+    "katex-tealC": "#5cd0b3",
+    "katex-tealD": "#55c1a7",
+    "katex-tealE": "#49a88f",
+    "katex-greenA": "#c9e2ae",
+    "katex-greenB": "#a6cf8c",
+    "katex-greenC": "#83c167",
+    "katex-greenD": "#77b05d",
+    "katex-greenE": "#699c52",
+    "katex-goldA": "#f7c797",
+    "katex-goldB": "#f9b775",
+    "katex-goldC": "#f0ac5f",
+    "katex-goldD": "#e1a158",
+    "katex-goldE": "#c78d46",
+    "katex-redA": "#f7a1a3",
+    "katex-redB": "#ff8080",
+    "katex-redC": "#fc6255",
+    "katex-redD": "#e65a4c",
+    "katex-redE": "#cf5044",
+    "katex-maroonA": "#ecabc1",
+    "katex-maroonB": "#ec92ab",
+    "katex-maroonC": "#c55f73",
+    "katex-maroonD": "#a24d61",
+    "katex-maroonE": "#94424f",
+    "katex-purpleA": "#caa3e8",
+    "katex-purpleB": "#b189c6",
+    "katex-purpleC": "#9a72ac",
+    "katex-purpleD": "#715582",
+    "katex-purpleE": "#644172",
+    "katex-mintA": "#f5f9e8",
+    "katex-mintB": "#edf2df",
+    "katex-mintC": "#e0e5cc",
+    "katex-grayA": "#fdfdfd",
+    "katex-grayB": "#f7f7f7",
+    "katex-grayC": "#eeeeee",
+    "katex-grayD": "#dddddd",
+    "katex-grayE": "#cccccc",
+    "katex-grayF": "#aaaaaa",
+    "katex-grayG": "#999999",
+    "katex-grayH": "#555555",
+    "katex-grayI": "#333333",
+    "katex-kaBlue": "#314453",
+    "katex-kaGreen": "#639b24"
 };
 
 /**
diff --git a/src/functions.js b/src/functions.js
index a00dd3f29..06f5668f8 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -226,7 +226,18 @@ var duplicatedFunctions = [
     {
         funcs: [
             "\\blue", "\\orange", "\\pink", "\\red",
-            "\\green", "\\gray", "\\purple"
+            "\\green", "\\gray", "\\purple",
+            "\\blueA", "\\blueB", "\\blueC", "\\blueD", "\\blueE",
+            "\\tealA", "\\tealB", "\\tealC", "\\tealD", "\\tealE",
+            "\\greenA", "\\greenB", "\\greenC", "\\greenD", "\\greenE",
+            "\\goldA", "\\goldB", "\\goldC", "\\goldD", "\\goldE",
+            "\\redA", "\\redB", "\\redC", "\\redD", "\\redE",
+            "\\maroonA", "\\maroonB", "\\maroonC", "\\maroonD", "\\maroonE",
+            "\\purpleA", "\\purpleB", "\\purpleC", "\\purpleD", "\\purpleE",
+            "\\mintA", "\\mintB", "\\mintC",
+            "\\grayA", "\\grayB", "\\grayC", "\\grayD", "\\grayE",
+            "\\grayF", "\\grayG", "\\grayH", "\\grayI",
+            "\\kaBlue", "\\kaGreen"
         ],
         data: {
             numArgs: 1,
diff --git a/test/katex-spec.js b/test/katex-spec.js
index 5131ec6bd..6be14f86b 100644
--- a/test/katex-spec.js
+++ b/test/katex-spec.js
@@ -654,6 +654,7 @@ describe("A text parser", function() {
 
 describe("A color parser", function() {
     var colorExpression = "\\blue{x}";
+    var newColorExpression = "\\redA{x}";
     var customColorExpression = "\\color{#fA6}{x}";
     var badCustomColorExpression = "\\color{bad-color}{x}";
 
@@ -683,6 +684,10 @@ describe("A color parser", function() {
         expect(badCustomColorExpression).toNotParse();
     });
 
+    it("should parse new colors from the branding guide", function(){
+        expect(newColorExpression).toParse();
+    });
+
     it("should have correct greediness", function() {
         expect("\\color{red}a").toParse();
         expect("\\color{red}{\\text{a}}").toParse();