Implements color variables and updates components

8 files changed, 29 insertions, 10 deletions

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index e676961c8..fb36f7669 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -16,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: #000;
+  color: ${variables.colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..42893a70a 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import BaseButton from './Button';
 
@@ -25,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
-  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 6dcfda70c..fcdbb6bfe 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -13,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 037cfa675..f8aad8795 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 const InlineCode = styled.code`
-    background-color: #eceff9;
+    background-color: ${variables.colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index c16c888b7..2d4a30f9f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -16,13 +17,12 @@ const Title = styled(Alpha)`
 
 const Content = styled.div`
     max-width: 25.9375rem;
-
     display: flex;
     flex-direction: column;
 `;
 
 const Code = styled.div`
-    background-color: #e9eced;
+    background-color: ${variables.colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 1efbe1f61..b36b354f3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
+
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
 import {withContext, Props} from './withContext';
@@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: #F1F2F7;
+    background-color: ${variables.colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 50bbd449a..98695177d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -97,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
new file mode 100644
index 000000000..8590547df
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,12 @@
+const variables = {
+    colors: {
+        black: '#000000',
+        white: '#FFFFFF',
+        lightGray: '#F1F4F5',
+        gray: '#F1F2F7',
+        darkGray: '#E9ECED',
+        blueGray: '#ECEFF9',
+    },
+};
+
+export default variables;