System Utilities

@xstyled/system exposes some useful utilities to enhance your styling experience.

Theme getters

th is now part of the system, it gets values from the theme.

import { th } from '@xstyled/system'
const Container = styled.div`
color: ${th('colors.primary')}; /* Read the primary color from the theme */
`

Specific getters are built-in. All theme getters are exported independently and also attached to th utility:

  • getColor: th.color
  • getPx: th.px
  • getPercent: th.percent
  • getRadius: th.radius
  • getBorder: th.border
  • getBorderStyle: th.borderStyle
  • getShadow: th.shadow
  • getSize: th.size
  • getZIndex: th.zIndex
  • getSpace: th.space
  • getFont: th.font
  • getFontSize: th.fontSize
  • getLineHeight: th.lineHeight
  • getFontWeight: th.fontWeight
  • getLetterSpacing: th.letterSpacing
  • getTransition: th.transition

All getters have the same behaviour as their corresponding system properties. For example, th.size(0.5) result is 50%, th.space(2) is 8px.

import { th } from '@xstyled/system'
const Container = styled.div`
margin: ${th.space(2)}; /* 8px */
width: ${th.size(0.2)}; /* 20% */
font-family: ${th.font('sans-serif')}; /* Arial, Helvetica, sans-serif */
color: ${th.color('primary')}; /* red */
`

Variant utility

variant helper creates reusable variants.

import { variant } from '@xstyled/system'
const variants = variant({
// Variants are found in `theme.buttons`
key: 'buttons',
// Default variants
variants: {
primary: { color: 'red' },
secondary: { color: 'blue' },
},
// Property used to trigger variant
prop: 'variant',
// Default variant value
default: 'primary',
})
const sizes = variant({
prop: 'size',
variants: {
sm: { padding: 10 },
md: { padding: 20 },
},
})
const Button = styled.button`
${variants};
${sizes};
`
<Button size="md" variant="primary" />

Responsive utilities

breakpoints

breakpoints lets you write style for each breakpoint.

import { breakpoints } from '@xstyled/system'
const Container = styled.div`
${breakpoints({
xs: css`
/* All devices */
`,
md: css`
/* From md breakpoint */
`,
lg: css`
/* From lg breakpoint */
`
}}
`

up

up lets you apply style from a breakpoint.

import styled, { css, up } from '@xstyled/styled-components'
const Box = styled.div`
width: 200px;
height: 200px;
${up(
'md',
css`
height: 300px;
`,
)}
`

down

down lets you apply style up to a breakpoint.

import styled, { css, down } from '@xstyled/styled-components'
const Box = styled.div`
width: 200px;
height: 200px;
${down(
'md',
css`
height: 100px;
`,
)}
`

between

between lets you apply style between two breakpoints.

import styled, { css, between } from '@xstyled/styled-components'
const Box = styled.div`
width: 200px;
height: 200px;
${between(
'md',
'lg',
css`
height: 300px;
`,
)}
`