3.2.0 • Published 5 days ago

@talend/design-tokens v3.2.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 days ago

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}';
talenddesign tokenstheme
@talend/react-datagrid@infinitebrahmanuniverse/nolb-_tal@everything-registry/sub-chunk-893@talend/storybook-docs@talend/react-stepper@talend/react-forms@zalastax/nolb-_tal@talend/bootstrap-theme@talend/design-system@talend/react-dataviz@talend/react-components@talend/react-faceted-search@talend/react-flow-designer
3.2.0

5 days ago

3.1.1

2 months ago

3.1.0

3 months ago

3.0.0

3 months ago

2.12.0

4 months ago

2.12.1

4 months ago

2.11.2

4 months ago

2.11.1

4 months ago

2.11.0

4 months ago

2.10.1

5 months ago

2.10.0

5 months ago

2.9.0

9 months ago

2.8.0

9 months ago

2.7.3

1 year ago

2.7.2

1 year ago

2.7.1

2 years ago

2.7.0

2 years ago

2.6.0

2 years ago

2.3.0

2 years ago

2.2.0

2 years ago

2.5.0

2 years ago

2.4.0

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.5.0

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago