From f6fe539e8349c625f027e6d1f9e8aaf05213c5e0 Mon Sep 17 00:00:00 2001
From: mrmrs <hi@mrmrs.cc>
Date: Sun, 19 May 2019 20:30:42 -0400
Subject: [PATCH] Adds chroma-js. Adds new accessibility documentation to color
 table.

---
 package.json         |  1 +
 src/elements/Span.js |  4 ++++
 src/pages/Styles.js  | 27 +++++++++++++++++++--------
 yarn.lock            |  5 +++++
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index ec38c90..1ea9301 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
     "@styled-system/should-forward-prop": "^1.0.0",
+    "chroma-js": "^2.0.3",
     "emotion-theming": "^10.0.10",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
diff --git a/src/elements/Span.js b/src/elements/Span.js
index 78a3076..75d7d1b 100644
--- a/src/elements/Span.js
+++ b/src/elements/Span.js
@@ -10,6 +10,8 @@ import {
   textAlign,
   textStyle,
   color,
+  borders,
+  borderRadius,
 } from 'styled-system'
 
 const Span = styled('span', { shouldForwardProp })(
@@ -22,6 +24,8 @@ const Span = styled('span', { shouldForwardProp })(
   textAlign,
   textStyle,
   color,
+  borders,
+  borderRadius,
   {},
 )
 
diff --git a/src/pages/Styles.js b/src/pages/Styles.js
index bbf71dd..27bb38a 100644
--- a/src/pages/Styles.js
+++ b/src/pages/Styles.js
@@ -2,6 +2,7 @@
 import jsx from '../jsx'
 import React from 'react'
 import theme from '../theme'
+import chroma from 'chroma-js'
 
 import Logo from '../components/Logo'
 import Container from '../components/Container'
@@ -91,14 +92,24 @@ function Styles() {
           <h3 px={[4,0]}>Colors</h3>
           <table>
             {Object.keys(theme.colors).map((keyName, i) => (
-              <tr>
-                <td maxWidth={64} borderBottom='1px solid' borderColor={theme.colors[keyName]} py={1}>
-                  <div bg={theme.colors[keyName]} px={[3,4,5]} height='100%' pt={3} pb={4}> </div>
-                </td>
-                <td borderBottom='1px solid' borderColor={theme.colors[keyName]} bg='white' color={theme.colors[keyName]} fontWeight={700} px={[2,3,4]} fontSize={[2,5,5]}>Aa</td>
-                <td borderBottom='1px solid' borderColor={theme.colors[keyName]} px={[0,3]} fontWeight={700} fontSize={[1,2,3]}>{keyName}</td>
-                <td borderBottom='1px solid' borderColor={theme.colors[keyName]} px={[0,3]} textAlign='right' bg='white' width='auto' fontSize={[0,1,1]}>{theme.colors[keyName]}</td>
-              </tr>
+                <tr>
+                  <td py={3} width={24} borderBottom='1px solid' bg={theme.colors[keyName]} color='white' borderColor={theme.colors[keyName]} pl={3} fontWeight={700} fontSize={0}>
+                    <span color='black'> 
+                      {chroma.contrast(theme.colors[keyName], 'black').toFixed(2)}
+                    </span>
+                  </td>
+                  <td borderBottom='1px solid' bg={theme.colors[keyName]} color='white' borderColor={theme.colors[keyName]} fontWeight={700} fontSize={0}>
+                      <span px={2} py={1} borderBottom='1px solid' borderColor={theme.colors[keyName]} width={48} bg='black' color={theme.colors[keyName]} fontWeight={700}>Aa</span>
+                  </td>
+                  <td width={24} borderBottom='1px solid' bg={theme.colors[keyName]} color='white' borderColor={theme.colors[keyName]} fontWeight={700} fontSize={0}>
+                    {chroma.contrast(theme.colors[keyName], 'white').toFixed(2)}
+                  </td>
+                  <td borderBottom='1px solid' bg={theme.colors[keyName]} color='white' borderColor={theme.colors[keyName]} fontWeight={700} fontSize={0}>
+                      <span px={2} py={1} borderBottom='1px solid' borderColor={theme.colors[keyName]} width={48} bg='white' color={theme.colors[keyName]} fontWeight={700}>Aa</span>
+                  </td>
+                  <td borderBottom='1px solid' borderColor={theme.colors[keyName]} px={[0,3]} fontWeight={700} fontSize={[1,2,3]}>{keyName}</td>
+                  <td borderBottom='1px solid' borderColor={theme.colors[keyName]} px={[0,3]} textAlign='right' bg='white' width='auto' fontSize={[0,1,1]}>{theme.colors[keyName]}</td>
+                </tr>
             ))}
           </table>
         </section>
diff --git a/yarn.lock b/yarn.lock
index 3cfbb52..8632da2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2844,6 +2844,11 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
+chroma-js@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.0.3.tgz#2521d4f80c4e786e00064c4a62824e38ff6557c4"
+  integrity sha512-2kTvZZOFSV1O81/rm99t9vmkh9jQxsHqsRRoZevDVz/VCC3yKMyPuMK8M5yHG+UMg2tV6cRoqtZtgcD92udcBw==
+
 chrome-trace-event@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"