System

What we called system is a set of utilities that gives you a real power. It ensures consistency in your design and reduces the amount of code to produce things.

System as props

The first usage of system, firstly introduced by styled-system, are system props.

To start, you have to pick utilities from @styled/system and create a styled component.

import styled from 'styled-components'
import { color, backgroundColor } from '@xstyled/system'
const Box = styled.div`
${color}
${backgroundColor}
`
export default Box

This component now handles all system properties:

<Box color="primary" backgroundColor="#fff" />

It handles any valid colors, but also reads them from your theme:

// theme.js
export default {
colors: {
primary: 'red',
},
}

System as getters

System as prop is very useful, but you could prefer to use it in the style declaration of your component. @xstyled/system exposes all getters, this way you can use them to create styled components.

import styled from 'styled-components'
import { th } from '@xstyled/system'
const PrimaryBox = styled.div`
width: 200px;
height: 200px;
background-color: ${th.color('primary')};
`
export default PrimaryBox

It acts exactly like props but right in your style declaration.

System as styled

System can also be used seamlessly in your CSS. @xstyled/styled-components is a wrapper around styled-components that gives you this power:

import styled from '@xstyled/styled-components'
const PrimaryBox = styled.div`
width: 200px;
height: 200px;
background-color: primary;
`
export default PrimaryBox

The above example reads primary from theme.colors.