Visual Framework Tokens

Installation

Visual Framework Tokens are available as an npm package.

The recommended way to use and install tokens may depend on your project; the most common is documented below.

Using npm:

npm install @visual-framework/vf-tokens --save-dev

Usage

Sass

You will need to have the correct path to the dist folder of the vf-tokens package in your node_modules folder for Sass to compile correctly.

You can do this in your gulpfiles.js file using NodeSass' includePaths: option:

  includePaths: [
    './node_modules/@visual-framework/vf-tokens/dist/sass',
  ]

In your Sass file you will need to add:

@import 'vf-variables.scss';

You can also be explicit in the @import of the variables.

@import './node_modules/@visual-framework/vf-tokens/dist/sass/vf-variables.scss';

Sass variables and map keys are formatted in kebab-case.

a {
  border-radius: $vf-radius-xs;
}

TODO: talk about Sass maps