@talend/design-tokens
TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published

Design tokens

Design tokens are the single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages. They are exported from Figma using Supernova.

Install

$> yarn add -D @talend/design-tokens

Usage

Light and dark modes

Light and dark modes are available to hydrate the CSS custom properties

@import '~@talend/design-tokens/dist/TalendDesignTokens.css';

DOM must be adapted accordingly

<body data-theme="light"></body>

or, with dark mode enabled,

<body data-theme="dark"></body>

Using SASS

@use '~@talend/design-tokens/lib/_tokens.scss' as tokens;

.element {
	font: tokens.$coral-paragraph-m-bold;
	color: tokens.$coral-color-neutral-text-inverted;
	background-color: tokens.$coral-color-accent-background-strong;
	border: tokens.$coral-color-accent-border;
	padding: tokens.$coral-spacing-m tokens.$coral-spacing-s;
	box-shadow: tokens.$coral-elevation-shadow-m;
}

Using Javascript

import tokens from '@talend/design-tokens';

document.getElementById('myElement').style = 'color: ${tokens.coralColorNeutralText}';

Package Sidebar

Install

npm i @talend/design-tokens

Weekly Downloads

505

Version

3.1.0

License

Apache-2.0

Unpacked Size

2.83 MB

Total Files

130

Last publish

Collaborators

  • talend-frontend