https://github.com/gustavoquinalha/design-tokens-generator
Create your Semantic Style Variables (Universal language for developers and designers).
https://github.com/gustavoquinalha/design-tokens-generator
design-systems design-tokens tokens
Last synced: 7 months ago
JSON representation
Create your Semantic Style Variables (Universal language for developers and designers).
- Host: GitHub
- URL: https://github.com/gustavoquinalha/design-tokens-generator
- Owner: gustavoquinalha
- Created: 2019-03-30T15:58:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:47:43.000Z (almost 3 years ago)
- Last Synced: 2025-01-23T10:11:21.418Z (8 months ago)
- Topics: design-systems, design-tokens, tokens
- Language: Vue
- Homepage: https://gustavoquinalha.github.io/design-tokens-generator/
- Size: 3.66 MB
- Stars: 50
- Watchers: 2
- Forks: 8
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Design tokens generator
> Design tokens are the minimum elements of the design system
## Example
```scss
//Font Family
$font-family-01: Roboto, sans-serif;
//Font Size
$font-size-01: 62px;
$font-size-02: 48px;
$font-size-03: 32px;
$font-size-04: 24px;
$font-size-05: 16px;
$font-size-06: 14px;
$font-size-07: 12px;
//Line Height
$line-height-01: 1;
$line-height-02: 1.5;
//Font Weight
$font-weight-01: normal;
$font-weight-02: medium;
$font-weight-03: bold;
//Letter Spacing
$letter-spacing-01: -1;
$letter-spacing-02: 0;
$letter-spacing-03: 1;
//Brand Colors
$color-primary: #000;
$color-secundary: #fff;
//Media Query
$media-query-01: 576px;
$media-query-02: 768px;
$media-query-03: 992px;
$media-query-04: 1200px;
//Sizes
$size-01: 4px;
$size-01: 8px;
$size-01: 16px;
$size-01: 24px;
$size-01: 32px;
$size-01: 64px;
//Box Shadow
$box-shadow-01: 4px 0 8px 0 rgba(0,0,0,.16);
$box-shadow-02: 8px 0 16px 0 rgba(0,0,0,.16);
$box-shadow-03: 16px 0 24px 0 rgba(0,0,0,.16);
//Border Width
$border-01: 1px;
$border-02: 2px;
$border-03: 4px;
//Border Radius
$border-radius-01: 4px;
$border-radius-02: 50%;
$border-radius-03: 500px;
//Icon Size
$icon-size-01: 16px;
$icon-size-02: 24px;
$icon-size-03: 46px;
//Opacity
$opacity-01: .1;
$opacity-02: .4;
$opacity-03: .6;
$opacity-04: .8;
```
## Build Setup
``` bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000/design-tokens-generator/
$ yarn run dev
# build for production and launch server
$ yarn run build
$ yarn start
# generate static project
$ yarn run generate
# deploy to github pages
$ yarn deploy
```
# Inspirate by
- http://meiuca.design/
- https://shopify.github.io/polaris-tokens/
- https://www.lightningdesignsystem.com/design-tokens/
- https://protocol.mozilla.org/fundamentals/tokens.html
- https://design.bitnami.com/category/Design-Tokens/