automates hex matching + adds mdx for colors

artsy · Apr 16, 2019 · 70a4995 · 70a4995
1 parent 5a864f4
commit 70a4995
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -1,13 +1,17 @@
 import React from "react"
-import { Box, Sans } from "@artsy/palette"
+import { Box, Sans, themeProps } 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>
+ <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
@@ -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, hex }) => {
+ return <ColorComponent color={color} />
+ },
  div: props => {
  return <div className="contentDiv">{props.children}</div>
  },