---
name: System
order: 4
---

import { Playground } from 'docz';

import { Box } from '~/components/Box';

# System

Polymath UI is using [Styled System](https://github.com/jxnblk/styled-system), a framework to create maintainable components library.

The main component is the `Box` component. Every other primitive components are based on it and heritate from the same utility props.

<Playground>
  <Box
    maxWidth={['50%', 100]}
    height={100}
    p={2}
    mx="auto"
    textAlign="center"
    style={{ backgroundColor: 'tomato' }}
  >
    This is a Box.
  </Box>
</Playground>

The above example create a `div` with:

- A max-width of `100%` on mobile, `50%` on desktop
- A height of `100px`
- A padding of `10px`
- A `marginLeft` and a `marginRight` of `50%`
- A text alignment centered

## Utilities

### Space

The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

- Numbers from 0-9 (or the length of `theme.spaces`) are converted to values on the spacing scale.
- Negative values can be used for negative margins.
- Numbers greater than the length of the theme.space array are converted to raw pixel values.
- String values are passed as raw CSS values.
- And array values are converted into responsive values.

Margin and padding props follow a shorthand syntax for specifying direction.
This is inspired from common Atomic CSS frameworks like (TailwindCSS)[https://tailwindcss.com/docs/spacing] that use similar syntax.

- `m`: margin
- `mt`: margin-top
- `mr`: margin-right
- `mb`: margin-bottom
- `ml`: margin-left
- `mx`: margin-left and margin-right
- `my`: margin-top and margin-bottom
- `p`: padding
- `pt`: padding-top
- `pr`: padding-right
- `pb`: padding-bottom
- `pl`: padding-left
- `px`: padding-left and padding-right
- `py`: padding-top and padding-bottom

```js
// sets margin value of `theme.spaces[2]`
<Box m={2} />

// sets margin value of `-1 * theme.spaces[2]`
<Box m={-2} />

// sets a margin value of `16px` since it's greater than `theme.space.length`
<Box m={16} />

// sets margin `"auto"`
<Box m="auto" />

// sets margin `8px` on all viewports and `16px` from the `lg` breakpoint and up
<Box m={{ sm: 1, lg: 2 }} />
```

### Dimensions

Dimensions utilities parses a component's prop and converts it into a CSS width declaration.

- Numbers from 0-1 are converted to percentage widths.
- Numbers greater than 1 are converted to pixel values.
- String values are passed as raw CSS values.
- And arrays are converted to responsive width styles.

Available dimensions utilities:

- `height`
- `width`
- `maxWidth`
- `minWidth`

Example using `height`:

```js
// examples

// height `50%`
<Box height={0.5} />

// height `256px`
<Box height={256} />

// height `'2em'`
<Box height="2em" />

// height `100%` on all viewports and `50%` from the "md" breakpoint and up
<Box height={{ sm: 1, md: 0.5 }} />
```

You should use the `width`/`height` props sparingly and use fluid width elements instead of hardcoded sizes.

## Variants

Some utilities uses a variant defined in theme, a variant can be either an array or an object.

## Responsive

All utilities supports responsive and use breakpoints defined in theme.

```js
// 10px on all devices
// 8px on devices ≥768px
// 50% on devices ≥992px
<Box m={[10, 1, '50%']} />
```
