Styling

The Design System ships with a powerful styling engine called Fela

.
It provides several plugins to achieve common tasks such as vendor prefixing, fallback values and responsive values.

Extending Styles

Many core components take an

extend

prop that allows for style extension.
It accepts a style object or an array of style objects that can be consumed by fela.

Caution: Extending styles will overwrite passed style props.

Dark Mode
Open in Playroom

<Box
  padding={10}
  extend={{
    backgroundColor: 'blue',
    color: 'white',
    ':hover': { backgroundColor: 'red' },
  }}>
  Hello
</Box><Box
  padding={10}
  extend={{
    backgroundColor: 'blue',
    color: 'white',
    ':hover': { backgroundColor: 'red' },
  }}>
  Hello
</Box>

El Component

If we want to style a new component with no base styles at all, we can leverage the El component. It accepts the

extend

prop and has no styles applied by default.

Dark Mode
Open in Playroom

<El extend={{ height: 50, width: 50, border: '1px solid rgb(100, 100, 100)' }}>
  Hello
</El><El extend={{ height: 50, width: 50, border: '1px solid rgb(100, 100, 100)' }}>
  Hello
</El>

Responsive Values

We implement the theme-value

(new tab)

plugin to apply style values to specific breakpoints.
The default theme ships with the following breakpoints:

const breakpoints = {
  small: '@media (min-width: 480px)',
  medium: '@media (min-width: 800px)',
  large: '@media (min-width: 1024px)',
  huge: '@media (min-width: 1300px)',
}

const breakpoints = {
  small: '@media (min-width: 480px)',
  medium: '@media (min-width: 800px)',
  large: '@media (min-width: 1024px)',
  huge: '@media (min-width: 1300px)',
}

Hence the following markup will render CSS equivalent to the code below.

<Box width={[100, , 200, 500]} />

<Box width={[100, , 200, 500]} />

.box {
  width: 100px;
}

@media (min-width: 800px) {
  .box {
    width: 200px;
  }
}

@media (min-width: 1024px) {
  .box {
    width: 500px;
  }
}

.box {
  width: 100px;
}

@media (min-width: 800px) {
  .box {
    width: 200px;
  }
}

@media (min-width: 1024px) {
  .box {
    width: 500px;
  }
}

Properties

The following properties support responsive values:

padding
paddingLeft
paddingRight
paddingTop
paddingBottom
paddingVertical
paddingHorizontal
margin
marginLeft
marginRight
marginTop
marginBottom
marginVertical
marginHorizontal
width
height
minWidth
minHeight
maxWidth
maxHeight
flex
flexGrow
flexShrink
flexBasis
alignSelf
alignItems
alignContent
justifyContent
flexDirection
flexWrap
order
display
color
gridGap
gridTemplateColumns
gridTemplateRows
space