From ee3538262d2d736168324a3f60a49cd87d65abb1 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:32:59 +0200 Subject: Changed name of export to colors and updates components --- packages/dev-tools-pages/ts/components/Button.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Code.tsx | 6 +++--- packages/dev-tools-pages/ts/components/Compiler.tsx | 4 ++-- packages/dev-tools-pages/ts/components/InlineCode.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Intro.tsx | 6 +++--- packages/dev-tools-pages/ts/components/Tabs.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Trace.tsx | 8 ++++---- packages/dev-tools-pages/ts/variables.tsx | 6 ++++-- 8 files changed, 22 insertions(+), 20 deletions(-) (limited to 'packages/dev-tools-pages') 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 146187595..72b3e1af7 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; diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 8590547df..b1e0271d1 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/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 }; -- cgit v1.2.3