@veloapi/colors
v1.0.0-rc.4
Published
Downloads
3
Readme
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?
...