Changed name of export to colors and updates components

packages/dev-tools-pages/ts/components/Button.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -17,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: ${variables.colors.black};
+  color: ${colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};

packages/dev-tools-pages/ts/components/Code.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import BaseButton from './Button';
 
@@ -26,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
+  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {

packages/dev-tools-pages/ts/components/Compiler.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -14,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;

packages/dev-tools-pages/ts/components/InlineCode.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 const InlineCode = styled.code`
-    background-color: ${variables.colors.blueGray}
+    background-color: ${colors.blueGray}
     padding: 0.1875rem;
 `;
 

packages/dev-tools-pages/ts/components/Intro.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -22,7 +22,7 @@ const Content = styled.div`
 `;
 
 const Code = styled.div`
-    background-color: ${variables.colors.darkGray};
+    background-color: ${colors.darkGray};
     width: 520px;
     height: 350px;
 `;

packages/dev-tools-pages/ts/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
@@ -36,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: ${variables.colors.gray};
+    background-color: ${colors.gray};
   } 
 `;
 

packages/dev-tools-pages/ts/components/Trace.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -98,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
@@ -116,8 +116,8 @@ const Block =
     TraceProps >
     `
     width: 50%;
-    background: ${props => (props.background ? props.background : '#000')};
-    color: ${props => (props.background ? 'inherit' : '#fff')};
+    background: ${props => (props.background ? props.background : colors.black)};
+    color: ${props => (props.background ? 'inherit' : colors.white)};
 
     :first-of-type {
         padding-right: 6.25rem;

packages/dev-tools-pages/ts/variables.tsx

@@ -1,5 +1,6 @@
-const variables = {
-    colors: {
+import { css } from 'styled-components';
+
+const colors = {
         black: '#000000',
         white: '#FFFFFF',
         lightGray: '#F1F4F5',
@@ -10,3 +11,4 @@ const variables = {
 };
 
 export default variables;
+export { colors, media };