Design Tokens 1.0.2

Foundational design tokens (color, typography, etc.) for Riverty user interfaces.

View on NPM. View on riverty.design.

Introduction and usage guidelines

Usage

Typical usage is including this package within a project that uses a build tool/bundler. First, install the dependency:

npm install --save-dev @riverty/design-tokens

Then, you can import or copy the token files as needed in your styling workflow.

// Adjust path relative to your source file
@import "../node_modules/@riverty/design-tokens/lib/tokens.css";

// Example - use variables:
.example {
  color: var(--r-color-green-vanguard-400);
}

Some build tools, like Webpack, allow you to reference packages in node_modules easily:

@import "~@riverty/design-tokens/lib/tokens.css";

Some build tools allow you to reference package names directly:

@import "@riverty/design-tokens/lib/tokens.css";

Supported formats

• lib/tokens.css: CSS Custom Properties (recommended).
• lib/tokens.scss: Sass variables.

Credits

Behind the scenes, Style Dictionary is used to read raw values from JSON files, and transform/output to CSS Custom Properties, Sass, and other formats that might be needed in the future.