Awesome
Foundation Design System Tokens
Design Tokens are essential particles of a design system, specifically, they are variables that store visual design attributes. They can contain colors (hex, RGBA or other values), sizing units (pixels, rems, etc.) and many more. They're essential for creating and maintaing a consistent visual system.
This is a monorepository for all Envato Foundation Design System tokens build with lerna.js.
Usage
To install all the tokens from the Foundation Design System:
$ npm i @envato/foundation-design-system-tokens
To install only the colors tokens from the Foundation Design System:
$ npm i @envato/foundation-design-system-tokens-colors
Each package includes a .css, .js, .sass, .scss that can be imported in your projects:
import('@envato/foundation-design-system-tokens-colors/')
or
@import "@envato/foundation-design-system-tokens-colors/dist/index.css";
Development
Make sure you have lerna.js installed globally:
npm install --global lerna@2.2.0
Install dependencies for all packages:
$ lerna bootstrap
To build target style files from tokens run:
$ lerna run build
Publishing pacakge(s) to NPM
To publish a version for all packages run:
$ lerna publish
Note: When you make changes to one of the packages, lerna.js will auto detect which version has been updated and only prompt you to bump the version of that particular package.
To publish a beta version for packages run:
$ lerna publish --npm-tag=beta
To publish a scoped package as public, you need to add the following into the package.json in each package.
"publishConfig": {
"access": "public"
}
License
MIT