aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx3
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx3
-rw-r--r--packages/dev-tools-pages/ts/components/InlineCode.tsx3
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx6
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx3
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx12
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 074914c2a..146187595 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;