@nimbus-ds/tokens

9.1.0 • Public • Published

@nimbus-ds/tokens

@nimbus-ds/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";

js

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:

  $ 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.

Nimbus

Readme

Keywords

none

Package Sidebar

Install

npm i @nimbus-ds/tokens

Weekly Downloads

377

Version

9.1.0

License

MIT

Unpacked Size

202 kB

Total Files

7

Last publish

Collaborators

  • nimbus-design-system
  • tiendanube