monday-ui-tokens

1.0.17 • Public • Published

Monday UI tokens

A style dictionary token registry for monday.com Vibe tokens.

This registry outputs design tokens in various flavours:

  • SCSS
  • JS
  • JS/ESM

We use style-dictionary to output them.

installation

npm i monday-ui-tokens

Build

npm run build

Usage

Tokens can be imported from the dist folder

  • dist/js
  • dist/js/esm
  • scss

JS tokens are separated into themes and include only key tokens. SCSS folder contains a unified file: variables.scss and include all tokens scope.

Dependencies

style-dictionary

Tokens scope

Our tokens are divided into scopes

  • core: global tokens , not influenced by theme.
  • colors: this scope is divided to:
    • content: content color palette references that are used within themes.
    • palette: reference colors that are used within themes.
    • themes and products.
      • our main themes are:
        • light
        • dark
        • black
        • hacker

Token Roles

We have reference tokens: content, palette. We have key tokens. In Vibe related efforts we recommend using only key tokens.

Dependents (0)

Package Sidebar

Install

npm i monday-ui-tokens

Weekly Downloads

1

Version

1.0.17

License

ISC

Unpacked Size

137 kB

Total Files

17

Last publish

Collaborators

  • 3dyonic