@rolemodel/rolemodel-design-system v0.1.3-beta

Rolemodel Design System

RoleModel Design System is a scss package that provides base styles and components that can be integrated and customized in a variety of projects.

Installation

NPM

npm install @rolemodel/rolemodel-design-system

Yarn

yarn add @rolemodel/rolemodel-design-system

Import

If you are using webpack to compile, you can add this import to the top of your root level scss file.

@import '@rolemodel/rolemodel-design-system';

If you are using a different compiler such as Dart Sass, you may need to reference the scss file directly.

@import '@rolemodel/rolemodel-design-system/dist/scss/rolemodel-design-system';

Documentation

We use Storybook as a way to provide informative and interactive documentation.

It can be found here RoleModel Design System Documentation

Tokens

Tokens are defined in src/core/tokens

• All core tokens are defined in src/core/tokens/base_tokens.scss
• Basic color tokens are defined in src/core/tokens/example_color_tokens.scss
• Color scale tokens are defined in src/core/tokens/scale_color_tokens.scss
• Alert color tokens are defined in src/core/tokens/alert_color_tokens.scss
• Dark mode tokens are defined in src/core/tokens/dark_mode_tokens.scss

There are also a few component specific tokens that are defined in their respective component file, but those are not indented to be global or used outside of that file.

There is a JSON file in docs/token_structure.json that lists all the current tokens in one place and shows how the names indicate organization.

License

MIT