Vitality Tokens

Design Tokens for the Vitality Design System.

This package is mostly useful when you need to create styling or tooling that is aligned to Vitality, but cannot leverage the core Vitality React library.

If you're developing a React app, use the core Vitality React library.

If you're creating something like a custom bootstrap theme, a Figma plugin, use these tokens.

Read a bit more about Design Tokens concept here: https://spectrum.adobe.com/page/design-tokens/ https://css-tricks.com/what-are-design-tokens/

Using the tokens in your project

1. Install library

The library is deployed to npm and installed via an npm package. See it here.

yarn add @vitality-ds/tokens

2. Transform tokens into the data you need

JavaScript:

Use case: I need to create style definitions in JavaScript that utilise values from the Vitality Tokens.

Solution: import the Vitality Tokens JavaScript and "transform" the tokens into the format you need.

Example:

/*
 * In @vitality-ds/tokens
 * Example data from FontWeights Tokens in package
 */
const FontWeights: { [x: string]: FontWeightToken } = {
    regular: {
        name: 'regular',
        description: 'Regular font weight used with the default text.',
        data: { weightAsString: 'Regular', weight: 400 },
    },
    // ...
};

import { FontWeights } from '@vitality-ds/tokens';

// Take each font weight and transform them to an object
const fontWeights = () => {
  const output = {};
  FontWeights.map(({ name, value, unit }) => (output[name] = `${value}${unit}`));
  return output;
};

// Sample Output:
const fontWeights: {
    regular: 400,
    // ...
}

SCSS:

Use case: I have a project that uses SCSS and I need access to Vitality's tokens.

Solution: Write a script to convert the raw token data and convert SCSS vars for your project

import { ColorScales } from '@vitality-ds/tokens';
/*
 * Example script taking raw color data and interpolating SCSS var strings. 
 * In reality, some more tooling would be required to create SCSS vars that 
 * can be consumed in SCSS.
 */
ColorScales.map(color => {
    const { name, hsl } = color.light.blue.blue12;
    return `$vitality-color-${name}: ${toHsl(hsl)}`
});

article {
    background-color: $vitality-color-blue12;
}

Developing / Contributing to the tokens

Install

1. Install dependencies

npm install

2. Build the tokens

npm run build