aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx6
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/InlineCode.tsx4
-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.tsx8
7 files changed, 18 insertions, 18 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index fb36f7669..2d0fbc353 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/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')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42893a70a..44d1cb99c 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/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} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index fcdbb6bfe..bda29dc1f 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/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;
`;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index f8aad8795..bfbaeb395 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/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;
`;
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 2d4a30f9f..cddee5b6f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/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;
`;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index b36b354f3..64f87bea3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/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};
}
`;
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 98695177d..f4b4e76a3 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/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;