Color design tokens

Colors can be used during development in a variety of ways. The primary method is using design tokens, which are exported through the @velo-design-system/colors package and built using the source code provided in this sub-package.

Color tokens are currently exported in the following formats: xml, css, .h , .m, json, js, and scss.

Install

Note: This README focusses on Usage scenarios for @velo-design-system/colors. For general contributing guidelines, please refer to the CONTRIBUTING.md

Recommended Install

$ yarn add @velo-design-system/colors --dev
$ yarn install

Preview upcoming releases

$ yarn add @velo-design-system/colors@next --dev
$ yarn install

Usage

Browsing to node_modules/@velo-design-system/colors will let you see the all token files available in that release.

The Tokens can be imported into your source code using your preferred tooling.Here are just a few ways you may want to do this.

ES6

Import colour values individually using ES6

// Import Theme colors individually
import { TokenColorBrandPrimary } from '@velo-design-system/colors/dist/theme.ocean.js'; //#0077ba

// Import Core colors individually
import { TokenColorSystemSuccessDefault } '@velo-design-system/colors/dist/core.js'; //#00ad1d

...

// Traditional
document.body.style.backgroundColor = TokenColorBrandPrimary;

// React
const styles = {
    backgroundColor: TokenColorBrandPrimary
}
<Component style={styles} />

SCSS

SCSS tokens are available in both var and map formats.

@import '@velo-design-system/colors/dist/core.scss'; // import the core colours
@import '@velo-design-system/colors/dist/theme.ocean.scss'; // import the brand colours and any additional overrides

@import '@velo-design-system/colors/dist/core.map.scss'; // import the core colours under a single variable called $tokens
@import '@velo-design-system/colors/dist/theme.ocean.map.scss'; // import the brand colours under a single variable called $tokens

@import '@velo-design-system/colors/dist/theme-defs.scss'; // import css variables in SCSS file format

...

// Using an SCSS variable directly
.example-class {
  color: $token-color-brand-primary;
}

// Using a CSS variable
.example-class {
  color: var(--token-color-text-default);
}

// Using map-get. Ideal for @each iterations.
.example-class {
  color: map-get($tokens, 'token-color-brand-primary');
}

FAQ

Where can I find the token names?

These can be viewed directly in the lib folder of this package, in the exact format you need. Alternatively, you can find a complete list of token names in the Design System documentation.

I can't see X token formats. How do I request additional formats?

Please raise a new Github issue requesting the format needed, with any relevant requirements.