Dough Component Library Design Tokens

Dough component library shared design tokens

Install

$ npm install @speakapbv/dough-component-library-tokens
$ yarn add @speakapbv/dough-component-library-tokens

Usage (SCSS)

@import (~@speakapbv/dough-component-library-tokens/dough-tokens.scss)

Development

1. Based on entity that you want to add
   1. For icons that should always look the same independent of the context
      1. add corresponding svg to the assets/icon/file directory with -icon suffix
      2. extend design-tokens/icons.json with new definition
   2. For icons that are context dependant (for example can change size and/or color)
      1. add corresponding svg to assets/icon/icon-svgs with -icons suffix
   3. Design tokens
      1. find relevant .json in design-tokens directory
      2. extend it with new definition
2. Run yarn generate command. Command creates all of the assets which are not stored in the repository and it will also update index.ts and icons.ts with extended definitions.
3. Create PR with those changes.

Release

1. Create new branch with changes that you want to see in release
2. Create commit message following semantic release (the easiest is to use yarn cm)
3. Merge PR. The release will happen automatically, if the commit name falls into new release category.