☁️ Nimbus Design Tokens

📚 Documentation

Check out our documentation site for detailed guidelines and resources.

🚀 Installation

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

$ 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

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

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 | 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 | 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 |  We use text styles to highlight information, provide titles for pages or blocks of content, featuring specific topics or text elements. | | 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 | 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:

  $ yarn build

🔗 Useful links

• Nimbus Design System. Our React components library.
• 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.