From 5a864f439bc8696462c1afe93297436453312682 Mon Sep 17 00:00:00 2001
From: Matt Dole <mdole7@gmail.com>
Date: Tue, 16 Apr 2019 13:32:15 -0400
Subject: [PATCH 1/3] creates a docs-only <ColorComponent> to allow display of
 separate colors

---
 .../palette-docs/content/docs/tokens/Color.mdx     | 13 ++-----------
 packages/palette-docs/gatsby-config.js             |  2 ++
 .../palette-docs/src/components/ColorComponent.jsx | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 packages/palette-docs/src/components/ColorComponent.jsx

diff --git a/packages/palette-docs/content/docs/tokens/Color.mdx b/packages/palette-docs/content/docs/tokens/Color.mdx
index 91a040291..87dd85067 100644
--- a/packages/palette-docs/content/docs/tokens/Color.mdx
+++ b/packages/palette-docs/content/docs/tokens/Color.mdx
@@ -6,15 +6,6 @@ See [Notion](https://www.notion.so/artsy/Color-a0c24896daf8433d9409aee2146ac267)
 for more detailed spec.
 
 <Box>
-  {Object.entries(themeProps.colors).map(([colorCode, hex], index) => {
-    return (
-      <Box mb={3} key={index}>
-        <Sans size="3" weight="medium">
-          {colorCode}
-        </Sans>
-        <Sans size="3">{hex}</Sans>
-        <Box width="100%" height={5} bg={colorCode} />
-      </Box>
-    )
-  })}
+  <ColorComponent color="black100" hex="#000" />
+  <ColorComponent color="black80" hex="#333" />
 </Box>
diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
index 8b42c0322..74f140fbf 100644
--- a/packages/palette-docs/gatsby-config.js
+++ b/packages/palette-docs/gatsby-config.js
@@ -33,10 +33,12 @@ module.exports = {
         // gatsby-mdx. See https://github.com/ChristopherBiscardi/gatsby-mdx/issues/243
         globalScope: `
           import * as Elements from "@artsy/palette"
+          import { ColorComponent } from "components/ColorComponent"
           import { CodeEditor, Playground  } from "components/Playground"
           import { Toggle as Toggler } from 'react-powerplug'
           export default {
             CodeEditor,
+            ColorComponent,
             Playground,
             Toggler,
             ...Elements
diff --git a/packages/palette-docs/src/components/ColorComponent.jsx b/packages/palette-docs/src/components/ColorComponent.jsx
new file mode 100644
index 000000000..bcd1e0356
--- /dev/null
+++ b/packages/palette-docs/src/components/ColorComponent.jsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { Box, Sans } from "@artsy/palette"
+
+export const ColorComponent = props => {
+  return (
+    <Box mb={3}>
+      <Sans size="3" weight="medium">
+        {props.color}
+      </Sans>
+      <Sans size="3">{props.hex}</Sans>
+      <Box width="100%" height={5} bg={props.color} />
+    </Box>
+  )
+}

From f3b69e3c663cfeab910d54d2f97676e35c684bd1 Mon Sep 17 00:00:00 2001
From: Matt Dole <mdole7@gmail.com>
Date: Tue, 16 Apr 2019 15:26:02 -0400
Subject: [PATCH 2/3] automates hex matching + adds mdx for colors

---
 packages/palette-docs/content/docs/tokens/Color.mdx      | 4 ++--
 packages/palette-docs/src/components/ColorComponent.jsx  | 8 ++++++--
 .../palette-docs/src/components/GlobalComponents.jsx     | 9 +++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/palette-docs/content/docs/tokens/Color.mdx b/packages/palette-docs/content/docs/tokens/Color.mdx
index 87dd85067..02ca8c0e9 100644
--- a/packages/palette-docs/content/docs/tokens/Color.mdx
+++ b/packages/palette-docs/content/docs/tokens/Color.mdx
@@ -6,6 +6,6 @@ See [Notion](https://www.notion.so/artsy/Color-a0c24896daf8433d9409aee2146ac267)
 for more detailed spec.
 
 <Box>
-  <ColorComponent color="black100" hex="#000" />
-  <ColorComponent color="black80" hex="#333" />
+  <ColorComponent color="black100" />
+  <ColorComponent color="purple100" />
 </Box>
diff --git a/packages/palette-docs/src/components/ColorComponent.jsx b/packages/palette-docs/src/components/ColorComponent.jsx
index bcd1e0356..317f12334 100644
--- a/packages/palette-docs/src/components/ColorComponent.jsx
+++ b/packages/palette-docs/src/components/ColorComponent.jsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Sans } from "@artsy/palette"
+import { Box, Sans, themeProps } from "@artsy/palette"
 
 export const ColorComponent = props => {
   return (
@@ -7,7 +7,11 @@ export const ColorComponent = props => {
       <Sans size="3" weight="medium">
         {props.color}
       </Sans>
-      <Sans size="3">{props.hex}</Sans>
+      <Sans size="3">
+        {themeProps.colors.hasOwnProperty(`${props.color}`)
+          ? themeProps.colors[`${props.color}`]
+          : ""}
+      </Sans>
       <Box width="100%" height={5} bg={props.color} />
     </Box>
   )
diff --git a/packages/palette-docs/src/components/GlobalComponents.jsx b/packages/palette-docs/src/components/GlobalComponents.jsx
index dee77f3dc..179f50b20 100644
--- a/packages/palette-docs/src/components/GlobalComponents.jsx
+++ b/packages/palette-docs/src/components/GlobalComponents.jsx
@@ -3,6 +3,7 @@
 import React from "react"
 import * as Palette from "@artsy/palette"
 import { CodeEditor } from "../components/Playground"
+import { ColorComponent } from "../components/ColorComponent"
 
 import {
   Box,
@@ -87,6 +88,14 @@ export const MarkdownComponents = {
       />
     )
   },
+  /**
+   * Use color to render a color bar and relevant information about it.
+   *
+   * Color is the color from Palette's theme, e.g. purple100
+   */
+  color: ({ color }) => {
+    return <ColorComponent color={color} />
+  },
   div: props => {
     return <div className="contentDiv">{props.children}</div>
   },

From 0820aa2f5a940f1f247e679f13e40276a8dbf512 Mon Sep 17 00:00:00 2001
From: Matt Dole <mdole7@gmail.com>
Date: Tue, 16 Apr 2019 15:29:26 -0400
Subject: [PATCH 3/3] appeasing linter

---
 packages/palette-docs/src/components/GlobalComponents.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/palette-docs/src/components/GlobalComponents.jsx b/packages/palette-docs/src/components/GlobalComponents.jsx
index 179f50b20..946fd6c27 100644
--- a/packages/palette-docs/src/components/GlobalComponents.jsx
+++ b/packages/palette-docs/src/components/GlobalComponents.jsx
@@ -93,8 +93,8 @@ export const MarkdownComponents = {
    *
    * Color is the color from Palette's theme, e.g. purple100
    */
-  color: ({ color }) => {
-    return <ColorComponent color={color} />
+  colorComponent: props => {
+    return <ColorComponent color={props.color} />
   },
   div: props => {
     return <div className="contentDiv">{props.children}</div>