@nimbus-ds/tokens NPM

☁️ Nimbus Design Tokens

📚 Documentation

Check out our documentation site for detailed guidelines and resources.

🚀 Installation

Install @nimbus-ds/tokens using any package manager.

$ npm install @nimbus-ds/tokens

// or

$ yarn add @nimbus-ds/tokens

💻 Usage

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

css

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

scss

@import "@nimbus-ds/tokens/dist/scss/_variables";

import tokens from "@nimbus-ds/tokens/dist/js/tokens";

🛠 Building tokens

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

  ├─ 📁 src
  │  ├─ 📁 color
  │  │  ├─ 📄 ref.json
  │  │  ├─ 📄 sys.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.
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.
typography	We use text styles to highlight information, provide titles for pages or blocks of content, featuring specific topics or text elements.

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: