Token system based on the golden ratio
MIT License
Tokens that use the Golden ratio to grant consistent ui. This lib is based on styled-tokens
, check it out 🚀.
yarn add aurum-system
or npm install aurum-system
The aurum-system needs some css-in-js library to work. The recomended ones are styled-components
and emotion
.
import styled from 'styled-components'
import { spacingSystem, fontSystem, sizeSystem } from 'aurum-system'
const Box = styled.div`
${spacingSystem}
${sizeSystem}
`
const Text = styled.p`
${fontSystem}
`
function useCase({ content }) {
return (
<Box pa={8}>
<p fs={5}>{content}</p>
</Box>
)
}
In order to have type intelisense you need to import the typings.
import styled from 'styled-components'
import { spacingSystem, SpacingSystem } from 'aurum-system'
import { fontSystem, FontSystem } from 'aurum-system'
import { sizeSystem, SizeSystem } from 'aurum-system'
type BoxProps = SpacingSystem & SizeSystem
const Box = styled.div<BoxProps>`
${spacingSystem}
${sizeSystem}
`
const Text = styled.p<FontSystem>`
${fontSystem}
`
function useCase({ content }) {
return (
<Box pa={8}>
<p fs={5}>{content}</p>
</Box>
)
}
propName | represents | valueList | base |
---|---|---|---|
fs |
fontSize |
1 ... 8 |
0.125 |
propName | represents | valueList | base |
---|---|---|---|
pa |
padding |
0 ... 13 |
0.125 |
pt |
paddingTop |
0 ... 13 |
0.125 |
pr |
paddingRight |
0 ... 13 |
0.125 |
pb |
paddingBottom |
0 ... 13 |
0.125 |
pl |
paddingLeft |
0 ... 13 |
0.125 |
ma |
margin |
0 ... 13 |
0.125 |
mr |
marginRight |
0 ... 13 |
0.125 |
mb |
marginBottom |
0 ... 13 |
0.125 |
ml |
marginLeft |
0 ... 13 |
0.125 |
propName | represents | valueList |
---|---|---|
w |
width |
0 ... 13, 25, 50, 75, 100, full, fullView |
h |
height |
0 ... 13, 25, 50, 75, 100, full, fullView |
maw |
maxWidth |
0 ... 13, 25, 50, 75, 100, full, fullView |
mah |
maxHeight |
0 ... 13, 25, 50, 75, 100, full, fullView |
miw |
maxWidth |
0 ... 13, 25, 50, 75, 100, full, fullView |
mih |
minWidth |
0 ... 13, 25, 50, 75, 100, full, fullView |
yarn start
: Run yarn build
in watch modeyarn test:watch
: Run test suite in interactive watch mode
yarn test:prod
: Run lintingyarn build
: Generate bundles and typings, create docsyarn lint
: Lints codeyarn release
: Publishes the package