@veloapi/colors NPM

Design Token image

Colour Design Tokens

Colors are available to use in a variety of formats. At present they are exported as design tokens in xml, css, .h , .m, json, js and scss.

Note: This page will focus on web formats specifically.

Install

Recommended Install

$ yarn add @rez-velo/colours --dev
$ yarn install

Preview upcoming releases

$ yarn add @rez-velo/colours@next --dev
$ yarn install

Usage

Browsing to node_modules/@rez-velo/colours 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 '@rez-velo/colours/dist/theme.velo.js'; //#0077ba

// Import Core colors individually
import { TokenColorSystemSuccessDefault } '@rez-velo/colours/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 '@rez-velo/colours/dist/core.scss'; // import the core colours
@import '@rez-velo/colours/dist/theme.velo.scss'; // import the brand colours and any additional overrides

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

@import '@rez-velo/colours/dist/theme-defs.scss'; // import css variables in SCSS file format

...

// Using a 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');
}

CSS Variables

You can add our css variable defintions to your <HEAD> like this:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/browse/@rez-velo/colours@latest/dist/core.css" />

or you can @import them into your .css directly, just bear in mind there may be reasons you may not want to do this.

@import url('https://unpkg.com/browse/@rez-velo/colours@latest/dist/core.css');

With both approaches, you will need to import BOTH a core.css and a theme.css file to acquire the full suite of colours.

FAQ

Why design tokens?

...

Why is this a separate package?

...

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

...

@everything-registry/sub-chunk-980 @zalastax/nolb-_vel

1.0.0-rc.4

6 years ago

1.0.0-rc.3

6 years ago