@tiendanube/design-tokens-nimbus/README.md

Tiendanube's design tokens

<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />

# ☁️ Nimbus Design Tokens

## 📚 Documentation

Check out our [documentation site](https://nimbus.tiendanube.com/) for detailed guidelines and resources.

## 🚀 Installation

Install `@tiendanube/design-tokens-nimbus` using any package manager.

```shell
$ npm install @tiendanube/design-tokens-nimbus

// or

$ yarn add @tiendanube/design-tokens-nimbus
```

## 💻 Usage

You can import our generated tokens in a variety of formats, such as `css, scss, js, swift` and `xml`.

**css**

```css
@import var("@tiendanube/design-tokens-nimbus/dist/css/variables.css");
```

**scss**

```scss
@import "@tiendanube/design-tokens-nimbus/dist/scss/_variables";
```

## 🛠 Building tokens

You can add, remove or modify existing tokens by editing the json files inside the `src/properties` directory. Each category of tokens has it's own folder.

```
  ├─ 📁 src
  │  ├─ 📁 properties
  │  │  ├─ 📁 color
  │  │  │  ├─ 📄 color.json
```

| Category                                  | Description                                                                                                                                                                    |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Breakpoint](./src/properties/breakpoint) | We use breakpoints to determine which screen sizes are relevant to make changes in the layout. With these tokens we can remain up to date with the most frequent device sizes. |
| [Color](./src/properties/color)           | Our color system has specific functions and are used to visually guide the user, provide hierarchy, communicate states and add depth to our interfaces.                        |
| [Font](./src/properties/font)             |  We use text styles to highlight information, provide titles for pages or blocks of content, featuring specific topics or text elements.                                       |
| [Motion](./src/properties/motion)         | We use motion values to generate micro-interactions and animate components when they have state changes or need to attract the user's attention.                               |
| [Spacing](./src/properties/spacing)       | We use spacers to separate elements both grouped or not, to create spacing between blocks of content, fields in a form or padding in buttons.                                  |

Once you finish making changes to our source tokens, you must generate a build to compile them into all different formats, by running our build command:

```shell
  $ yarn build
```

## 🔗 Useful links

- [Nimbus Design System](https://github.com/TiendaNube/design-system-nimbus). Our React components library.
- [Nimbus Icons](https://github.com/TiendaNube/nimbus-icons). Our very own open-source icon library.

## 🤝 Contributing

We encourage all ideas, suggestions and feedback. If you want to collaborate with us, start by reading our [contribution guidelines](https://github.com/TiendaNube/design-system-nimbus/blob/master/CONTRIBUTING.md).