@devoinc/genesys-tokens

Genesys tokens

Tokens' definition and generation tools.

This project provides the tools to generate Devo's brand design tokens and its customizations. It includes the agnostic source for the generation of the tokens, as described in Genesys Design System. It uses style-dictionary under the hood. The generated tokens are W3CDTCG-compliant©™. See W3C Design Tokens Format Module for more information.

Tokens generation tools

Generator

Given an input schema, we can generate the corresponding tokens. Tokens are generated in the following formats: css, figma tokens plugin, js, json and scss. An extra html format provides an interactive visualization of the output.

import { generate, Scheme } from '@devoinc/genesys-tokens';

generate({
  source: './schemes/light',
  scheme: Scheme.light,
  menuScheme: Scheme.light,
  output: `dist/light/`,
});

Validator

Once a set of tokens has been generated, the output can be validated using:

validate(pathToFolder);

Typescript

The type definitions for the brands generated using @devoinc/genesys-tokens are available in @devoinc/genesys-tokens-types.