@devoinc/genesys-tokens
Version:
Design tokens generator
36 lines (23 loc) • 1.32 kB
Markdown
# 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](https://amzn.github.io/style-dictionary/) under the hood. The generated tokens are W3CDTCG-compliant©™. See [W3C Design Tokens Format Module](https://tr.designtokens.org/format/) 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.
```typescript
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:
```js
validate(pathToFolder);
```
### Typescript
The type definitions for the brands generated using `@devoinc/genesys-tokens` are available in [@devoinc/genesys-tokens-types](https://www.npmjs.com/package/@devoinc/genesys-tokens-types).