monday-ui-style

monday.com UI styles

Vibe Design System's styling foundations: Theme definition, colors, shadows, dimensions, etc.

Installation

npm install monday-ui-style
# or
yarn add monday-ui-style

Usage

Styles: Import the css file in order to have the css variables exposed on the root level

@import "~monday-ui-style/dist/index.min.css";

or if you want to import it in your JS files

import "monday-ui-style/dist/index.min.css";

Mixins and functions: We export multiple SCSS mixins and function helpers that can be used in your application if you use SASS. All helpers can be imported as demonstrated below.

@import "~monday-ui-style/dist/mixins";
@import "~monday-ui-style/dist/functions";

Stylelint rules

It is recommended to extend our Stylelint config in order to ensure proper usage of this library.
To use the supplied config, add monday-ui-style/stylelint-config as a Stylelint config extension:

// Your .stylelintrc
{
  ...
  "extends": "monday-ui-style/stylelint-config",
  ...
}

Functions

The following SCSS functions are exported:

• camelize: camelcase string
• capitalize: capitalize string
• contain: returns whether $value is contained in $list as a Boolean
• map-collect: merges maps from different scopes into one
• extract-rgb: returns a comma separated list of rgb values from a color

Mixins

The following SCSS mixins are exported:

• Common:
  • hidden-element
  • grid-auto-fit($grid-gap, $grid-column-gap, $grid-row-gap. $grid-cell-min-width, $grid-cell-array-calc, $important)
  • scroller($width, $height, $color)
• States:
  • disabled
  • reset-button
  • focus-style($focus-radius)
• Typography:
  • vibe-text($type, $weight)
  • vibe-heading($type, $weight)
  • line-clamp($lines)
  • ellipsis