@vivareal/lina-tokens
Version:
Project responsible for transforming and formatting design tokens
123 lines (91 loc) • 2.77 kB
Markdown
# Lina Tokens
The Lina Design System Tokens library
Project responsible for transforming and formatting Design Tokens for our brands.
## Using in your project
**Install it as a dependency**
```sh
npm install --save @vivareal/lina-tokens
# OR
yarn add -d @vivareal/lina-tokens
```
_This is a private repo, so you'll need to be logged in NPM in order to install it. Also, you have to be part of vivareal organization at NPM. If you're not, please ask at Slack's `#guild-front` channel to be added =)_
### Installing
Go to root folder and then
```
make install
```
## Build the tokens
```bash
make build
```
and the web and Android files will be built and placed on the `dist` folder.
```bash
make build-ios
```
will build iOS files and save it at `packages/lina-ios`
```bash
make build-all
```
will build all platforms.
`lina-ios` files should only be added to git history by commit releases.
## Tests
#### Running tests
```bash
yarn test
# or
make test
```
#### Remove obsolete tests
```bash
yarn test:update
# or
make test obsolete=true
```
## Developing locally
```
make docs-dev
```
## Folder structure
```
├── README.md
├── build/
│ ├── iosLib.js // code necessary to build the iOS tokens for lina-ios
│ ├── tokens.js // code necessary to build all the other platforms tokens
├── configs/
├── src/
│ ├── brands/ // brand-specific tokens are here
│ ├── <BRAND>
│ ├── ios/
│ ├── components/*.json
│ ├── general/*.json
│ ├── web/
│ ├── components/*.json
│ ├── global/ // tokens for all brands and platforms here
│ ├── *.json
│ ├── platforms/ // mirrors <BRAND> structure, using its values to build
│ ├── ios/
│ ├── components/*.json
│ ├── general/*.json
│ ├── web/
│ ├── components/*.json
├── dist
│ ├── <BRAND>
│ ├── android/
│ ├── <BrandName>Tokens.kt
│ ├── android-legacy/
│ ├── <BrandName>Tokens.xml
│ ├── css/
│ ├── variables.css
│ ├── javascript/
│ ├── tokens.module.js
│ ├── json/
│ ├── tokens.raw.json
│ ├── scss/
│ ├── _variables.scss
```
## Contributing
**Creating / Editing a token**
Tokens are created using Amazon's [Style Dictionary](https://amzn.github.io/style-dictionary/#/).
Please read the docs before starting to create or edit a token.
**Release**
Releases are managed by Github Workflow. Please check the root's README for more infos.