@tiendanube/design-tokens-nimbus

0.2.4 • Public • Published

Nimbus

☁️ 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

🤝 Contributing

We encourage all ideas, suggestions and feedback. If you want to collaborate with us, start by reading our contribution guidelines.

Package Sidebar

Install

npm i @tiendanube/design-tokens-nimbus

Weekly Downloads

23

Version

0.2.4

License

MIT

Unpacked Size

78.2 kB

Total Files

40

Last publish

Collaborators

  • tiendanube
  • nimbus-design-system