@cnamts/design-tokens
v2.16.13
Published
Design Tokens for the French Health Insurance
Downloads
778
Readme
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