@cnamts/design-tokens v2.12.0
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
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago