diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index e676961c81..2d0fbc3538 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 { colors } 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: ${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 074914c2a9..72b3e1af7c 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 { colors } 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 ? 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 6dcfda70c3..bda29dc1ff 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 { colors } from '../variables'; import InlineCode from './InlineCode'; @@ -13,7 +14,7 @@ const Cards = styled.dl` `; const Card = styled.div` - background-color: #f1f4f5; + background-color: ${colors.lightGray}; padding: 3.125rem; padding-bottom: 2.5rem; `; diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx new file mode 100644 index 0000000000..6f46274f78 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Content.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import Container from './Container'; + +const StyledMain = + styled.div < + MainProps > + ` + padding-top: 6.25rem; + padding-bottom: 6.25rem; + ${props => + props.dark + ? ` + background-color: #000; + color: #fff; + ` + : ''}; +`; + +interface MainProps { + dark?: boolean; + children: React.ReactNode; +} + +function Main(props: MainProps) { + return ( + + {props.children} + + ); +} + +export default Main; diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx index 56d52a150a..fa558e9ab7 100644 --- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Beta } from './Typography'; +import { withContext, Props } from './withContext'; +import { Beta, Alpha } from './Typography'; const Base = styled.div` display: flex; @@ -26,9 +27,14 @@ const Item = styled.div` } `; -interface ContentBlockProps { +const StyledTitle = styled(Alpha)` + color: ${props => props.color}; +`; + +interface ContentBlockProps extends Props { title: string; - children: React.ReactNode; + main?: boolean; + children?: React.ReactNode; } function ContentBlock(props: ContentBlockProps) { @@ -36,12 +42,14 @@ function ContentBlock(props: ContentBlockProps) { return {child}; }); + const Title = props.main ? StyledTitle : Beta; + return ( - {props.title} - {children} + {props.title} + {children ? {children} : null} ); } -export default ContentBlock; +export default withContext(ContentBlock); diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx index 82b2de1a3d..15e6a5b86e 100644 --- a/packages/dev-tools-pages/ts/components/Footer.tsx +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { Alpha, Beta } from './Typography'; import { withContext, Props } from './withContext'; import Container from './Container'; +import { media } from '../variables'; import MainIcon from 'ts/icons/logos/0x.svg'; import compiler from 'ts/context/compiler'; @@ -23,7 +24,7 @@ function Footer(props: Props) { Other tools by 0x {tools.map(({ title, subtitle, icon }) => ( - +
{title} @@ -49,21 +50,38 @@ const StyledFooter = styled.footer` background-color: ${(props: { background: string }) => props.background}; padding-top: 6.25rem; padding-bottom: 5.4375rem; + + ${media.small`padding-top: 2.5rem;`}; `; const Top = styled.div` display: flex; justify-content: space-between; margin-bottom: 9.375rem; + + ${media.small` + display: block; + margin-bottom: 5.3125rem; + `}; + + ${Alpha} { + ${media.small`margin-bottom: 3.8125rem;`}; + } +`; + +const Icon = styled.div` + margin-right: 1.3125rem; + + ${media.small`margin-right: 0.9375rem`}; `; const Media = styled.div` display: flex; align-items: center; -`; -const Icon = styled.div` - margin-right: 1.3125rem; + ${Icon} { + align-self: flex-start; + } `; const List = styled.ul` @@ -73,14 +91,26 @@ const List = styled.ul` flex-direction: row; margin: 0; padding: 0; + + ${media.small` + display: block; + width: 100%; + `}; `; -const ListItem = styled(Media)` +const ListItem = styled.li` + display: flex; + align-items: center; flex-basis: 50%; margin-bottom: 3.3125rem; + :nth-last-of-type(-n + 2) { margin-bottom: 0; + + ${media.small`margin-bottom: 1.875rem`}; } + + ${media.small`margin-bottom: 1.875rem`}; `; const Small = styled.small` diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index dca5624211..aeefae3cce 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -5,6 +5,8 @@ import { withContext, Props } from './withContext'; import Container from './Container'; import { Small } from './Typography'; +import { media } from '../variables'; + function Header(props: Props) { const { icon, title, colors } = props; @@ -36,6 +38,8 @@ const StyledHeader = styled.header` justify-content: space-between; align-items: center; } + + ${media.small`padding-top: 2.125rem;`}; `; const LogoMark = styled.div` @@ -53,6 +57,8 @@ const Title = styled.h1` font-size: 1.5rem; margin: 0; margin-left: 0.8125rem; + + ${media.small`font-size: 1.25rem;`}; `; const StyledLink = styled(Small)` diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx index 037cfa675d..bfbaeb3953 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 { colors } from '../variables'; const InlineCode = styled.code` - background-color: #eceff9; + 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 c16c888b7d..cddee5b6fe 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 { colors } from '../variables'; import { Alpha, Beta } from './Typography'; const Main = styled.div` - background-color: #f1f4f5; + background-color: ${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: ${colors.darkGray}; width: 520px; height: 350px; `; diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx deleted file mode 100644 index 8046abc91c..0000000000 --- a/packages/dev-tools-pages/ts/components/Main.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { withContext, Props } from './withContext'; - -import { Alpha } from './Typography'; - -const StyledMain = styled.div` - padding-top: 6.25rem; - padding-bottom: 6.25rem; -`; - -const Title = styled(Alpha)` - color: ${props => props.color}; - margin-bottom: 6.25rem; -`; - -interface MainProps extends Props { - children: React.ReactNode; -} - -function Main(props: MainProps) { - return ( - - - Get started - - {props.children} - - ); -} - -export default withContext(Main); diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index 1efbe1f61d..64f87bea36 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 { colors } 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: ${colors.gray}; } `; diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 50bbd449a5..545e87d539 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 { colors, media } from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -97,9 +98,11 @@ const StyledSection = ` max-width: 90rem; margin: 0 auto; - background: linear-gradient(to right, #000 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; + + ${media.small`background: none`}; `; const Wrapper = styled(Container)` @@ -107,7 +110,14 @@ const Wrapper = styled(Container)` ${Alpha} { padding-bottom: 2.5rem; + + ${media.small`padding-bottom: 1.875rem;`}; } + + ${media.small` + display: block; + width: 100%; + `}; `; const Block = @@ -115,8 +125,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; @@ -124,27 +134,55 @@ const Block = :last-of-type { padding-left: 6.25rem; } + + ${media.small` + width: 100%; + padding-top: 2.5rem; + padding-bottom: 3.4375rem; + + :first-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + :last-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + `}; `; const MainCopy = styled(Beta)` margin-bottom: 3.1875rem; + ${media.small` + margin-bottom: 1.125rem; + font-size: 1rem; + `}; `; const List = styled.ul` margin-top: 6.25rem; margin-bottom: 0; padding: 0; + + ${media.small`margin-top: 3.4375rem;`}; `; const Item = styled.li` display: flex; align-items: center; - margin-bottom: 4.4375rem; + + :not(:last-child) { + margin-bottom: 4.4375rem; + + ${media.small`margin-bottom: 3.4375rem;`}; + } `; const Copy = styled.div` max-width: 20rem; margin-right: 5.875rem; + + ${media.small`margin-right: 2.0625rem;`}; `; export default withContext(Trace); diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx index 9251d31b4a..deac8a9760 100644 --- a/packages/dev-tools-pages/ts/components/Typography.tsx +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -1,8 +1,11 @@ import styled from 'styled-components'; +import { media } from '../variables'; const Alpha = styled.h2` font-size: 1.75rem; line-height: 1; + + ${media.small`font-size: 1.5rem;`}; `; const Beta = styled.h3` @@ -12,6 +15,8 @@ const Beta = styled.h3` const Gamma = styled.h4` font-size: 1rem; + + ${media.small`font-size: 0.875rem;`}; `; const Small = styled.p` diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx index c0cf466739..13ecde7aac 100644 --- a/packages/dev-tools-pages/ts/globalStyles.tsx +++ b/packages/dev-tools-pages/ts/globalStyles.tsx @@ -1,4 +1,5 @@ import { createGlobalStyle } from 'styled-components'; +import { media } from './variables'; import styledNormalize from 'styled-normalize'; import hljsStyles from 'highlight.js/styles/github-gist.css'; @@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle` font-weight: 300; font-size: 1rem; line-height: 1.8; + + ${media.small`font-size: 0.875rem;`}; + } a { diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx index 35c810cb3e..96f26a9785 100644 --- a/packages/dev-tools-pages/ts/pages/Compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/compiler'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,40 +14,53 @@ import CompilerComponent from 'ts/components/Compiler'; function Compiler() { return ( - - -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + + + + + + + + npm install @0x/sol-trace --save +

+ Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format. +

+ - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + + + +

+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can + define which parts of the artifact you need. +

+ + + +

+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can + define which parts of the artifact you need. +

+ + ); } diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx index e835e5c821..c3dfb33c5b 100644 --- a/packages/dev-tools-pages/ts/pages/Cov.tsx +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/cov'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro'; function Cov() { return ( - - + +

+ When it comes to writing smart contracts, testing is one of the most important steps of the process. + In order to quantify the robustness of your Solidity testing suite, you need to measure its code + coverage. +

+ + + + + + + + npm install @0x/sol-trace --save

- When it comes to writing smart contracts, testing is one of the most important steps of the - process. In order to quantify the robustness of your Solidity testing suite, you need to measure - its code coverage. + Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format.

- -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); } diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx index 9f8b46b9c0..48c4c122b3 100644 --- a/packages/dev-tools-pages/ts/pages/Profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/profiler'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro'; function Profiler() { return ( - - + +

+ Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. + This will help you find unexpected inefficiencies in parts of your smart contract, and take a + data-driven approach to optimizing it. +

+ + + + + + + + npm install @0x/sol-trace --save

- Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. - This will help you find unexpected inefficiencies in parts of your smart contract, and take a - data-driven approach to optimizing it. + Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format.

- -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); } diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx index be5acdac4c..961f4534ff 100644 --- a/packages/dev-tools-pages/ts/pages/Trace.tsx +++ b/packages/dev-tools-pages/ts/pages/Trace.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/trace'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -16,39 +15,37 @@ function Trace() { return ( - -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + + + + + + + npm install @0x/sol-trace --save +

+ Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format. +

+ - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); } diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx new file mode 100644 index 0000000000..b23bb3e52a --- /dev/null +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -0,0 +1,33 @@ +import { css } from 'styled-components'; + +const colors = { + black: '#000000', + white: '#FFFFFF', + lightGray: '#F1F4F5', + gray: '#F1F2F7', + darkGray: '#E9ECED', + blueGray: '#ECEFF9', +}; + +interface SizesInterface { + [key: string]: number; +} + +const sizes: SizesInterface = { + large: 992, + medium: 768, + small: 376, +}; + +const media = Object.keys(sizes).reduce((acc: any, label: string) => { + acc[label] = (args: any) => css` + @media (max-width: ${sizes[label] / 16}em) { + ${css(args)}; + } + `; + + return acc; +}, {}); + +export default media; +export { colors, media };