Design Tokens for the Foundation Design System
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
packages
.gitignore
README.md
lerna.json
package.json

README.md

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.

Package Version
foundation-design-system-tokens npm
foundation-design-system-tokens-colors npm
foundation-design-system-tokens-glyphs npm
foundation-design-system-tokens-typography npm
foundation-design-system-tokens-breakpoints npm
foundation-design-system-tokens-spacing npm

Usage

To install all the tokens from the Foundation Design System:

$ npm i foundation-design-system-tokens

To install only the colors tokens from the Foundation Design System:

$ npm i foundation-design-system-tokens-colors

Each package includes a .css, .js, .sass, .scss that can be imported in your projects:

import('foundation-design-system-tokens-colors/dist/')

or

@import "foundation-design-system-tokens-colors/dist/index.css";

Development

Make sure you have lerna.js installed globally:

npm install --global lerna@^2.0.0-beta

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

License

MIT