UNPKG

@vivareal/lina-tokens

Version:

Project responsible for transforming and formatting design tokens

123 lines (91 loc) 2.77 kB
# 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.