From 47b281b754a77a2104d39bafa5ea49584f8840cc Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 09:37:14 +0200 Subject: Implements color variables and updates components --- packages/dev-tools-pages/ts/components/Button.tsx | 3 ++- packages/dev-tools-pages/ts/components/Code.tsx | 5 +++-- packages/dev-tools-pages/ts/components/Compiler.tsx | 3 ++- packages/dev-tools-pages/ts/components/InlineCode.tsx | 3 ++- 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 | 3 ++- packages/dev-tools-pages/ts/variables.tsx | 12 ++++++++++++ 8 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 packages/dev-tools-pages/ts/variables.tsx (limited to 'packages/dev-tools-pages/ts') 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; -- cgit