Heartwood Design Tokens

Design tokens for the Heartwood design system. https://sprucelabsai.github.io/heartwood-tokens/.

Usage

Sass

Install via yarn or npm

yarn install @sprucelabs/heartwood-tokens

or

npm install @sprucelabs/heartwood-tokens

Import _tokens.scss

The easiest way to consume Heartwood Tokens is to import them into a .scss file and use the variables generated by Style Dictionary.

@import "~@sprucelabs/heartwood-tokens/build/scss/tokens";

Note: depending on how you want to build your styles, it may be necessary to update your webpack.config.js, gulpfile.js, or whatever other build tool you're using.

Import _components.scss

Once global tokens are imported, you can also use component tokens.

@import "~@sprucelabs/heartwood-tokens/build/scss/components";

Theming

All of the variables generated in Heartwood Tokens use a !default flag to make theming easy. The best way to override variables is to import your overrides first, and then import tokens:

@import "my-theme.scss";
@import "~@sprucelabs/heartwood-tokens/build/scss/tokens";
@import "~@sprucelabs/heartwood-tokens/build/scss/components";

In my-theme.scss, you could for example change the primary color by adding:

$c__day-primary_base: #4c3cff;

Recommended: Make sure to look at https://sprucelabsai.github.io/heartwood-tokens/ to see all the available tokens. Heartwood Tokens don't automatically generate full color palettes, so theming requires attention to detail to avoid unexpected results.

Using assets

Visit https://sprucelabsai.github.io/heartwood-tokens/assets to download brand assets. You can also use these and icons by importing from the build directory: build/js/assets-base64.js.

Swift

Coming soon

Android

Coming soon

Figma

Checkout the Figma file to see and use Heartwood Tokens in your designs.

Contributing

To get started, git clone git@github.com:sprucelabsai/heartwood-tokens.git and run yarn or npm install.

To build the tokens, run npm run build.

If you're adding assets like icons, these can be auto-generated with a script via: node ./scripts/generateIcons.

You can run the project's web view locally with npm run develop. This command cleans out the build/ directory, generates assets, and builds tokens for all the platforms.