@talend/design-tokens
v3.4.3
Published
Talend Design Tokens
Downloads
3,095
Maintainers
talend-frontendReadme
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-tokensUsage
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}';