Helper Functions

When writing styled-components, theme values can always be accessed via the theme prop that is passed to each component:

import styled from 'styled-components'
import { Box } from '@intouchg/components'

const PrimaryBox = styled(Box)`
    background-color: ${(props) => props.theme.colors.Primary};
    font-size: ${(props) => props.theme.fontSizes[3]};
`

const SecondaryDiv = styled.div`
    background-color: ${(props) => props.theme.colors.Secondary};
    padding: ${(props) => props.theme.space[2]]};
`

However, this library exports some helper functions to simplify this process:

import styled from 'styled-components'
import { Box, color, fontSize, space } from '@intouchg/components'

const PrimaryBox = styled(Box)`
    background-color: ${color('Primary')};
    font-size: ${fontSize(3)};
`

const SecondaryDiv = styled.div`
    background-color: ${color('Secondary')};
    padding: ${space(2)};
`

The media helper function generates min-width media queries, using the breakpoints in the theme:

import styled from 'styled-components'
import { Box, media } from '@intouchg/components'

const PrimaryBox = styled(Box)`
    width: 100%;

    ${media(2)} {
        width: 50%;
    }
`