@baysidepoc/tokens/README.md

Design Tokens

# Design Tokens POC

This Tokens are originated in Figma and exported as code into this repository using the 'FigmaTokens' plugin. 

## Using Tokens in other JS projects (React, Storybook, etc.)

Install dependency
```
npm i @baysidepoc/tokens
```
Use inside a component:
```
import { colors } from "@baysidepoc/tokens";
```
```
style={{backgroundColor:`${colors.red100}`}}
```

<br/>
<hr/>
<br/>

## Updating Tokens Step by Step

### 1. Figma Tokens
Make changes in Figma using the Figma Tokens Plugin, be sure this repo is connected in settings section.

```
Name: baysidepoc Tokens
Personal Access Token: <personal token>
Repository: baysidepoc/tokens
Default Branch: main
FilePath: figma/figmaTokens.json


Note: get your unique access token from https://github.com/settings/tokens
```

### 2. Push changes to repo
Inside FigmaTokens window, click on 'Push changes' , write a commit message and assign it to a branch with a customized name (it can be any name). Create a Pull Request, get that PR merged into main. 

Then pull your changes into your local environment
```
git pull
```

### 3. Prepare for NPM

The tokens sent by Figma need to be compiled in a format that can be used by NPM, run the followign script:
```
npm run build

```

### 4. Update NPM


1. Bump Version
```
//Be sure that all files are comitted in git
npm version <versionNumber>
```

2. Be sure you are logged in inside the terminal (not just the browser)
```
npm login
```

2. Publish to NPM
```
npm publish --access public
```

3. Update in Storybook (or any other app)
```
npm i @baysidepoc/tokens
```

<br/><br/>
<hr/>

<br/><br/>
## Contributing


Clone code from repo:
```
git clone git@github.com:baysidepoc/tokens.git
```


<br/><br/>