@vivareal/lina-tokens

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

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

make build

and the web and Android files will be built and placed on the dist folder.

make build-ios

will build iOS files and save it at packages/lina-ios

make build-all

will build all platforms.

lina-ios files should only be added to git history by commit releases.

Tests

Running tests

yarn test
# or
make test

Remove obsolete tests

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