import { Meta, Story } from '@storybook/addon-docs'

import Font from './Font'
import Displaydata from '../../DisplayData'

<Meta title="Wiki/Fonts" />

# Colors

**Always convert px to rem**

## Examples

Convert px on Styled-component:

```js
const ExampleStyled = styled(Example)`
  font-size: $ {props => props.theme.functions.pxToRem('14px')};
`
```

Convert px on Material-ui style:

```js
const ExampleStyled = withStyles(theme => ({
  root: {
    fontSize: theme.functions.pxToRem('14px'),
  },
}))(Example)
```

## Fonts list

<Displaydata>
  <Font />
</Displaydata>