Design Tokens

Design Tokens of our Design System

Installation

The Design Tokens are available in TypeScript, JavaScript and SCSS.

To install the tokens, you need to use yarn or npm:

yarn add @cnamts/design-tokens
# OR
npm install @cnamts/design-tokens

Usage

Only custom tokens are contained in this package, for default ones like font size or elevation, we use the helper classes from Vuetify.

TypeScript

In TypeScript, Design Tokens names are formatted in camelCase.

import { tokens } from '@cnamts/design-tokens';
console.log(tokens.pageWidth); // 1440px

You can also import only the color theme:

import { colorTheme } from '@cnamts/design-tokens/src/colors';

JavaScript

In JavaScript, Design Tokens names are also formatted in camelCase.

const { tokens } = require('@cnamts/design-tokens');
console.log(tokens.pageWidth); // 1440px

You can also use the import syntax:

import { tokens } from '@cnamts/design-tokens';

Sass

In Sass, Design Tokens names are formatted in kebab-case.

@import '@cnamts/design-tokens/dist/tokens';

.pro {
    color: $vd-risque-pro; // #ef6c00
}

JSON

In JSON, Design Tokens names are also formatted in kebab-case.

const { tokens } = require('@cnamts/design-tokens');
console.log(tokens['page-width']); // 1440px