https://github.com/matheusps/aurum-system

Token system based on the golden ratio
https://github.com/matheusps/aurum-system

emotion react styled-components system token typescript

Last synced: 27 days ago
JSON representation

Token system based on the golden ratio

• Host: GitHub
• URL: https://github.com/matheusps/aurum-system
• Owner: matheusps
• License: mit
• Created: 2019-11-16T21:47:30.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T01:00:48.000Z (about 2 years ago)
• Last Synced: 2024-10-04T11:41:16.389Z (3 months ago)
• Topics: emotion, react, styled-components, system, token, typescript
• Language: TypeScript
• Size: 1.51 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

        
## Aurum System

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Tokens that use the Golden ratio to grant consistent ui. This lib is based on `styled-tokens`, [check it out 🚀](https://github.com/matheusps/styled-tokens).

### Installing from npm

`yarn add aurum-system` or `npm install aurum-system`

### Usage

The aurum-system needs some css-in-js library to work. The recomended ones are `styled-components` and `emotion`.

```jsx

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 (

    

      
{content}

    

  )

}

```


#### With typescript

In order to have type intelisense you need to import the typings.

```tsx

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`

  ${spacingSystem}

  ${sizeSystem}

`

const Text = styled.p`

  ${fontSystem}

`

function useCase({ content }) {

  return (

    

      
{content}

    

  )

}

```


### Available Systems

#### Font

| propName | represents | valueList | base    |

| -------- | ---------- | --------- | ------- |

| `fs`     | `fontSize` | `1 ... 8` | `0.125` |

#### Spacing

| 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` |

#### Size

| 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` |

### Scripts cheatset

- `yarn start`: Run `yarn build` in watch mode

- `yarn test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)

- `yarn test:prod`: Run linting

- `yarn build`: Generate bundles and typings, create docs

- `yarn lint`: Lints code

- `yarn release`: Publishes the package