# ☁️ 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).