From f166edb66c4eb746c387759ce13e921c9d416bf8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 4 Jul 2023 15:07:39 +0200
Subject: [PATCH 01/34] chore(deps): bump tj-actions/changed-files from 36.4.0
 to 37.0.5 (#4777)

Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 36.4.0 to 37.0.5.
- [Release notes](https://github.com/tj-actions/changed-files/releases)
- [Changelog](https://github.com/tj-actions/changed-files/blob/main/HISTORY.md)
- [Commits](https://github.com/tj-actions/changed-files/compare/e1754a427f478b8778d349341b8f1d80f1f47f44...54849deb963ca9f24185fb5de2965e002d066e6b)

---
updated-dependencies:
- dependency-name: tj-actions/changed-files
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/pr-lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml
index 9873d725508..dcef46268d2 100644
--- a/.github/workflows/pr-lint.yml
+++ b/.github/workflows/pr-lint.yml
@@ -46,7 +46,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@e1754a427f478b8778d349341b8f1d80f1f47f44 #v36.4.0
+        uses: tj-actions/changed-files@54849deb963ca9f24185fb5de2965e002d066e6b #v37.0.5
 
       - name: Merge lint
         run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }}

From 187b0e88250fb9eafbb3b101c071efab3e4bfd66 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 4 Jul 2023 15:08:03 +0200
Subject: [PATCH 02/34] chore(deps): bump changesets/action from 1.4.4 to 1.4.5
 (#4772)

Bumps [changesets/action](https://github.com/changesets/action) from 1.4.4 to 1.4.5.
- [Release notes](https://github.com/changesets/action/releases)
- [Changelog](https://github.com/changesets/action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/changesets/action/compare/d89c1de63c7f28ac47ec85ed395f5f1d045d4697...f13b1baaa620fde937751f5d2c3572b9da32af23)

---
updated-dependencies:
- dependency-name: changesets/action
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/changeset.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml
index 1c8d2aac700..e5fb0253c26 100644
--- a/.github/workflows/changeset.yml
+++ b/.github/workflows/changeset.yml
@@ -42,7 +42,7 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@d89c1de63c7f28ac47ec85ed395f5f1d045d4697 #v1.4.4
+        uses: changesets/action@f13b1baaa620fde937751f5d2c3572b9da32af23 #v1.4.5
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: yarn release

From 93def65ae4bb68fd42d1fb6ff156a647f5d11f09 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Wed, 5 Jul 2023 08:58:26 +0200
Subject: [PATCH 03/34] feat(TDOPS-4704): faceted search configurable quick
 search min length (#4778)

---
 .changeset/grumpy-baboons-breathe.md                |  5 +++++
 .../components/BasicSearch/BasicSearch.component.js |  3 +++
 .../QuickSearchInput/QuickSearchInput.component.js  |  9 +++++----
 .../faceted-search/stories/facetedSearch.stories.js | 13 +++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/grumpy-baboons-breathe.md

diff --git a/.changeset/grumpy-baboons-breathe.md b/.changeset/grumpy-baboons-breathe.md
new file mode 100644
index 00000000000..e6b29bab94a
--- /dev/null
+++ b/.changeset/grumpy-baboons-breathe.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': minor
+---
+
+TDOPS-4704 - Faceted search : Allow to configure faceted search min trigger length for quick search input
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
index 710b63ad24f..9fcb18b35dd 100644
--- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
+++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
@@ -47,6 +47,7 @@ const BasicSearch = ({
 	quickSearchPlaceholder,
 	quickSearchFacetsFilter,
 	quickSearchInputProps,
+	quickSearchMinLength,
 	disclosureProps,
 }) => {
 	const { id, t } = useFacetedSearchContext();
@@ -127,6 +128,7 @@ const BasicSearch = ({
 					);
 				}}
 				inputProps={quickSearchInputProps}
+				minLength={quickSearchMinLength}
 			/>
 			<div className={css('tc-basic-search-content')}>
 				<BadgeFacetedProvider value={badgeFacetedContextValue}>
@@ -214,6 +216,7 @@ BasicSearch.propTypes = {
 	setBadgesFaceted: PropTypes.func,
 	callbacks: callbacksPropTypes,
 	quickSearchInputProps: PropTypes.object,
+	quickSearchMinLength: PropTypes.number,
 	disclosureProps: PropTypes.object,
 };
 
diff --git a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
index 4269056ab90..4d15ad19bb7 100644
--- a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
+++ b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
@@ -4,7 +4,6 @@ import get from 'lodash/get';
 import { Typeahead } from '@talend/react-components/lib/Typeahead';
 import { badgesFacetedPropTypes } from '../facetedSearch.propTypes';
 
-const MINIMUM_LENGTH = 2;
 export const DEFAULT_QUICKSEARCH_OPERATOR = 'containsIgnoreCase';
 
 const getDefaultFacet = (facets = []) =>
@@ -18,6 +17,7 @@ export const QuickSearchInput = ({
 	onSelect = () => {},
 	facetsFilter,
 	inputProps,
+	minLength = 2,
 }) => {
 	const defaultFacet = useMemo(() => getDefaultFacet(facets), [facets]);
 	const [opened, setOpened] = useState(false);
@@ -32,7 +32,7 @@ export const QuickSearchInput = ({
 	return (
 		<Typeahead
 			placeholder={placeholder || t('QUICKSEARCH_PLACEHOLDER', 'Find in a column...')}
-			onFocus={() => setOpened(value.length >= MINIMUM_LENGTH)}
+			onFocus={() => setOpened(value.length >= minLength)}
 			onBlur={() => {
 				setValue('');
 				setOpened(false);
@@ -40,10 +40,10 @@ export const QuickSearchInput = ({
 			focusedItemIndex={2}
 			onChange={(_, { value: val }) => {
 				setValue(val);
-				setOpened(val.length >= MINIMUM_LENGTH);
+				setOpened(val.length >= minLength);
 			}}
 			onSelect={(_, { itemIndex }) => {
-				if (value.length >= MINIMUM_LENGTH) {
+				if (value.length >= minLength) {
 					onSelect(filteredFacets[itemIndex] || defaultFacet, value);
 					setValue('');
 					setOpened(false);
@@ -81,4 +81,5 @@ QuickSearchInput.propTypes = {
 	facetsFilter: PropTypes.func,
 	t: PropTypes.func,
 	inputProps: PropTypes.object,
+	minLength: PropTypes.number,
 };
diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
index b825a4e3e56..d581f9039ea 100644
--- a/packages/faceted-search/stories/facetedSearch.stories.js
+++ b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -522,3 +522,16 @@ export const WithQuickSearchFilter = () => (
 		/>
 	</FacetedSearch.Faceted>
 );
+
+export const WithQuickSearchFilterCustomizableInputTriggerLength = () => (
+	<FacetedSearch.Faceted id="my-faceted-search">
+		<p>Quick search will trigger after a minimum input length that can be customized</p>
+		<br />
+		<FacetedSearch.BasicSearch
+			badgesDefinitions={badgesDefinitions}
+			callbacks={callbacks}
+			onSubmit={action('onSubmit')}
+			quickSearchMinLength={5}
+		/>
+	</FacetedSearch.Faceted>
+);

From 623a0a69b7219c90b0212ed4a3c73c9a98471ec0 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Wed, 5 Jul 2023 10:42:27 +0200
Subject: [PATCH 04/34] chore: prepare release (#4776)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/good-radios-push.md       | 17 -----------------
 .changeset/grumpy-baboons-breathe.md |  5 -----
 .changeset/grumpy-cars-teach.md      |  5 -----
 .changeset/tidy-suits-mix.md         |  5 -----
 packages/faceted-search/CHANGELOG.md | 11 +++++++++++
 packages/faceted-search/package.json |  2 +-
 packages/http/CHANGELOG.md           | 18 ++++++++++++++++++
 packages/http/package.json           |  2 +-
 8 files changed, 31 insertions(+), 34 deletions(-)
 delete mode 100644 .changeset/good-radios-push.md
 delete mode 100644 .changeset/grumpy-baboons-breathe.md
 delete mode 100644 .changeset/grumpy-cars-teach.md
 delete mode 100644 .changeset/tidy-suits-mix.md

diff --git a/.changeset/good-radios-push.md b/.changeset/good-radios-push.md
deleted file mode 100644
index 8ad5feff2f9..00000000000
--- a/.changeset/good-radios-push.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-'@talend/http': minor
----
-
-feat(http): add the possibility to add global interceptors for every calls that got through @talend/http calls
-
-Usage:
-  
-```typescript
-import { addHttpResponseInterceptor, HTTP_STATUS } from '@talend/http';
-
-addHttpResponseInterceptor('logout', (response: Response): void => {
-	if (response.status === HTTP_STATUS.UNAUTHORIZED) {
-		logout();
-	}
-});
-```
diff --git a/.changeset/grumpy-baboons-breathe.md b/.changeset/grumpy-baboons-breathe.md
deleted file mode 100644
index e6b29bab94a..00000000000
--- a/.changeset/grumpy-baboons-breathe.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-faceted-search': minor
----
-
-TDOPS-4704 - Faceted search : Allow to configure faceted search min trigger length for quick search input
diff --git a/.changeset/grumpy-cars-teach.md b/.changeset/grumpy-cars-teach.md
deleted file mode 100644
index 01c1b519b7a..00000000000
--- a/.changeset/grumpy-cars-teach.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-faceted-search': patch
----
-
-fix(TDC-6575): badge size overlap with "Add Filter" button with some long values
diff --git a/.changeset/tidy-suits-mix.md b/.changeset/tidy-suits-mix.md
deleted file mode 100644
index 11d6a4627a3..00000000000
--- a/.changeset/tidy-suits-mix.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-faceted-search': patch
----
-
-fix(faceted-search): data-feature typo
diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md
index 4c0a5f49f06..286aab5373f 100644
--- a/packages/faceted-search/CHANGELOG.md
+++ b/packages/faceted-search/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 9.4.0
+
+### Minor Changes
+
+- 93def65ae: TDOPS-4704 - Faceted search : Allow to configure faceted search min trigger length for quick search input
+
+### Patch Changes
+
+- bb0cd786e: fix(TDC-6575): badge size overlap with "Add Filter" button with some long values
+- 04167fe3d: fix(faceted-search): data-feature typo
+
 ## 9.3.0
 
 ### Minor Changes
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 77731180221..8f18b6f9d25 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-faceted-search",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "Faceted search",
   "main": "lib/index.js",
   "mainSrc": "src/index.js",
diff --git a/packages/http/CHANGELOG.md b/packages/http/CHANGELOG.md
index 56eb287e0e8..4d7590d03f9 100644
--- a/packages/http/CHANGELOG.md
+++ b/packages/http/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @talend/http
 
+## 2.3.0
+
+### Minor Changes
+
+- 67144d23d: feat(http): add the possibility to add global interceptors for every calls that got through @talend/http calls
+
+  Usage:
+
+  ```typescript
+  import { addHttpResponseInterceptor, HTTP_STATUS } from '@talend/http';
+
+  addHttpResponseInterceptor('logout', (response: Response): void => {
+  	if (response.status === HTTP_STATUS.UNAUTHORIZED) {
+  		logout();
+  	}
+  });
+  ```
+
 ## 2.2.0
 
 ### Minor Changes
diff --git a/packages/http/package.json b/packages/http/package.json
index 1c0d7f961c8..b63fb1f5b62 100644
--- a/packages/http/package.json
+++ b/packages/http/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/http",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "HTTP helper",
   "license": "Apache-2.0",
   "repository": {

From 7de53ccf0cee1041971f807dfbde51019996368f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Wed, 5 Jul 2023 12:08:50 +0200
Subject: [PATCH 05/34] feat(design-system): logos with RichRadioButton (#4780)

---
 .changeset/metal-spiders-suffer.md            |  5 ++
 .../RichRadioButton.component.tsx             | 51 ++++++++++++-------
 .../RichRadioButton.module.scss               |  7 +--
 .../RichRadioButton/RichRadioButton.types.tsx | 31 ++++++++---
 .../RichRadioButton.stories.mdx               |  6 +++
 .../RichRadioButton.stories.tsx               | 29 +++++++++++
 6 files changed, 101 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/metal-spiders-suffer.md

diff --git a/.changeset/metal-spiders-suffer.md b/.changeset/metal-spiders-suffer.md
new file mode 100644
index 00000000000..26d0570455a
--- /dev/null
+++ b/.changeset/metal-spiders-suffer.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+feat(design-system): Handle logos in RichRadioButton
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
index d22d883213c..b9427f9e064 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
@@ -1,9 +1,41 @@
-import { RichRadioButtonProps } from './RichRadioButton.types';
+import {
+	RichRadioButtonProps,
+	LogoAsset,
+	IllustrationAsset,
+	IconAsset,
+} from './RichRadioButton.types';
 import { StackVertical, StackHorizontal } from '../Stack';
 import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper';
 import style from './RichRadioButton.module.scss';
 import classnames from 'classnames';
 import { Tag } from '../Tag';
+import { Icon } from '../Icon';
+
+function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) {
+	if (asset?.illustration) {
+		return (
+			<span className={classnames([style['rich-radio-button__illustration']])}>
+				<asset.illustration />
+			</span>
+		);
+	}
+	if (asset?.logo) {
+		return <Icon name={asset.logo} className={classnames([style['rich-radio-button__logo']])} />;
+	}
+	if (asset?.name) {
+		return (
+			<span className={classnames([style['rich-radio-button__icon']])}>
+				{getIconWithDeprecatedSupport({
+					iconSrc: asset.name || '',
+					size: 'L',
+					...asset,
+				})}
+			</span>
+		);
+	}
+
+	return null;
+}
 
 const RichRadioButton = ({
 	dataFeature,
@@ -18,8 +50,6 @@ const RichRadioButton = ({
 	tags,
 	title,
 }: RichRadioButtonProps) => {
-	const Illustation = asset?.illustration;
-
 	return (
 		<label className={style['rich-radio-button__wrapper']}>
 			<input
@@ -35,20 +65,7 @@ const RichRadioButton = ({
 			/>
 			<span className={style['rich-radio-button']}>
 				<StackVertical as="span" gap="XS">
-					{asset && (
-						<span
-							className={classnames({
-								[style['rich-radio-button__illustration']]: asset.illustration,
-								[style['rich-radio-button__icon']]: !asset.illustration,
-							})}
-						>
-							{(Illustation && <Illustation />) ||
-								getIconWithDeprecatedSupport({
-									iconSrc: asset.name || '',
-									size: 'L',
-								})}
-						</span>
-					)}
+					<RichRadioButtonIcon asset={asset} />
 					<h4>{title}</h4>
 
 					{description && <p>{description}</p>}
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
index e879803e648..c92f9d7c202 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
@@ -20,12 +20,13 @@
 
 	&__icon {
 		color: tokens.$coral-color-accent-icon;
-		height: tokens.$coral-sizing-xs;
+		min-height: tokens.$coral-sizing-xs;
+		min-width: tokens.$coral-sizing-xs;
 		transition: color tokens.$coral-transition-normal;
-		width: tokens.$coral-sizing-xs;
 	}
 
-	&__illustration {
+	&__illustration,
+	&__logo {
 		height: tokens.$coral-sizing-l;
 		width: tokens.$coral-sizing-l;
 	}
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.types.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.types.tsx
index 7bbcb7cbfe1..f665dff0231 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.types.tsx
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.types.tsx
@@ -1,18 +1,33 @@
 import { ReactElement } from 'react';
 import { TagVariant } from '../Tag/Tag';
 
-export interface RichRadioButtonTag {
+export type RichRadioButtonTag = {
 	name: string;
 	variant?: keyof typeof TagVariant;
-}
+};
 
-export interface RichRadioButtonProps {
+export type LogoAsset = {
+	illustration?: never;
+	logo: string;
+	name?: never;
+};
+
+export type IllustrationAsset = {
+	illustration: () => ReactElement;
+	logo?: never;
+	name?: never;
+};
+
+export type IconAsset = {
+	illustration?: never;
+	logo?: never;
+	name: string;
+};
+
+export type RichRadioButtonProps = {
 	dataFeature?: string;
 	description?: string;
-	asset?: {
-		illustration?: () => ReactElement;
-		name?: string;
-	};
+	asset?: LogoAsset | IllustrationAsset | IconAsset;
 	id: string;
 	isChecked?: boolean;
 	isDisabled?: boolean;
@@ -21,4 +36,4 @@ export interface RichRadioButtonProps {
 	name: string;
 	tags?: RichRadioButtonTag[];
 	title: string;
-}
+};
diff --git a/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.mdx b/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.mdx
index ce52ef3859c..c6944188dcb 100644
--- a/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.mdx
+++ b/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.mdx
@@ -78,6 +78,12 @@ Selectable card with the same behavior as a radio button with multiple parameter
 	<Story story={Stories.CheckedRichRadioButtonWithTagsAndIllustration} />
 </Canvas>
 
+### Checked Rich Radio Button with an Logo
+
+<Canvas>
+	<Story story={Stories.CheckedRichRadioButtonWithTagsAndLogo} />
+</Canvas>
+
 ### Checked Rich Radio Button disabled
 
 <Canvas>
diff --git a/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.tsx b/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.tsx
index 0623c070d1d..e1b8b8369f2 100644
--- a/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.tsx
+++ b/packages/storybook/src/design-system/RichRadioButton/RichRadioButton.stories.tsx
@@ -252,6 +252,35 @@ export const CheckedRichRadioButtonWithTagsAndIllustration = () => (
 	/>
 );
 
+export const CheckedRichRadioButtonWithTagsAndLogo = () => (
+	<RichRadioButton
+		asset={{
+			logo: 'talend-snowflake',
+		}}
+		description="Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
+		Porro nihil delectus quaerat repellat saepe officiis id aut. 
+		Culpa iste molestias optio nihil placeat magnam, odio modi earum est voluptas saepe?"
+		id={'checkedRichRadioButtonWithTagsAndLogo'}
+		isChecked={true}
+		name={'checkedRichRadioButtonWithTagsAndLogo'}
+		onChange={() => {}}
+		title="This is a snowflake title"
+		tags={[
+			{
+				name: 'Tag 1',
+			},
+			{
+				name: 'Tag 2',
+				variant: 'information',
+			},
+			{
+				name: 'Tag 3',
+				variant: 'information',
+			},
+		]}
+	/>
+);
+
 export const CheckedRichRadioButtonDisabled = () => (
 	<RichRadioButton
 		asset={{

From 54ea0256f431a0f02b86211f51189dad94783d93 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Wed, 5 Jul 2023 15:10:57 +0200
Subject: [PATCH 06/34] chore: prepare release (#4781)

---
 .changeset/metal-spiders-suffer.md  | 5 -----
 packages/design-system/CHANGELOG.md | 6 ++++++
 packages/design-system/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/metal-spiders-suffer.md

diff --git a/.changeset/metal-spiders-suffer.md b/.changeset/metal-spiders-suffer.md
deleted file mode 100644
index 26d0570455a..00000000000
--- a/.changeset/metal-spiders-suffer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': minor
----
-
-feat(design-system): Handle logos in RichRadioButton
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 3cc8da879b2..70583bdd06f 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/design-system
 
+## 7.12.0
+
+### Minor Changes
+
+- 7de53ccf0: feat(design-system): Handle logos in RichRadioButton
+
 ## 7.11.0
 
 ### Minor Changes
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 17eeae1282a..74d5ca5e2a9 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.11.0",
+  "version": "7.12.0",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

From b10ae79ed3d6f6d1c74fbe488af2e167ce2669a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Wed, 5 Jul 2023 16:59:32 +0200
Subject: [PATCH 07/34] fix(design-system): add data attr to RichRadio (#4783)

---
 .changeset/great-sheep-exercise.md                       | 5 +++++
 .../RichRadioButton/RichRadioButton.component.tsx        | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/great-sheep-exercise.md

diff --git a/.changeset/great-sheep-exercise.md b/.changeset/great-sheep-exercise.md
new file mode 100644
index 00000000000..6cfd15ea19c
--- /dev/null
+++ b/.changeset/great-sheep-exercise.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix(design-system): add data attributes to RichRadioButton
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
index b9427f9e064..26c750bc1dc 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
@@ -10,6 +10,7 @@ import style from './RichRadioButton.module.scss';
 import classnames from 'classnames';
 import { Tag } from '../Tag';
 import { Icon } from '../Icon';
+import { DataAttributes } from 'src/types';
 
 function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) {
 	if (asset?.illustration) {
@@ -49,7 +50,9 @@ const RichRadioButton = ({
 	onChange,
 	tags,
 	title,
-}: RichRadioButtonProps) => {
+	'data-testid': dataTestId,
+	'data-test': dataTest,
+}: RichRadioButtonProps & Partial<DataAttributes>) => {
 	return (
 		<label className={style['rich-radio-button__wrapper']}>
 			<input
@@ -59,8 +62,10 @@ const RichRadioButton = ({
 				name={name}
 				disabled={isDisabled}
 				readOnly={isReadOnly}
-				data-feature={dataFeature}
 				checked={isChecked}
+				data-feature={dataFeature}
+				data-testid={dataTestId}
+				data-test={dataTest}
 				onChange={() => onChange(id)}
 			/>
 			<span className={style['rich-radio-button']}>

From 5bfab7ded2e0b21443269b064eef33fd692e3080 Mon Sep 17 00:00:00 2001
From: dlcaldeira <124570762+dlcaldeira@users.noreply.github.com>
Date: Wed, 5 Jul 2023 16:25:38 +0100
Subject: [PATCH 08/34] feat(tdc-7258): added data-checked attribute so
 automated tests can select the checked card

---
 .changeset/red-readers-leave.md                              | 5 +++++
 .../components/RichRadioButton/RichRadioButton.component.tsx | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/red-readers-leave.md

diff --git a/.changeset/red-readers-leave.md b/.changeset/red-readers-leave.md
new file mode 100644
index 00000000000..9df69e6b6b4
--- /dev/null
+++ b/.changeset/red-readers-leave.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+feat(tdc-7258): added data-checked attribute so automated tests can select the checked card
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
index 26c750bc1dc..5921a39cae6 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
@@ -67,6 +67,7 @@ const RichRadioButton = ({
 				data-testid={dataTestId}
 				data-test={dataTest}
 				onChange={() => onChange(id)}
+				data-checked={isChecked}
 			/>
 			<span className={style['rich-radio-button']}>
 				<StackVertical as="span" gap="XS">

From 687d74f3b0ce8ee3cb4a090e4cdb18c3c15d9fc8 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Thu, 6 Jul 2023 08:08:44 +0200
Subject: [PATCH 09/34] chore: prepare release (#4784)

---
 .changeset/great-sheep-exercise.md  | 5 -----
 .changeset/red-readers-leave.md     | 5 -----
 packages/design-system/CHANGELOG.md | 7 +++++++
 packages/design-system/package.json | 2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)
 delete mode 100644 .changeset/great-sheep-exercise.md
 delete mode 100644 .changeset/red-readers-leave.md

diff --git a/.changeset/great-sheep-exercise.md b/.changeset/great-sheep-exercise.md
deleted file mode 100644
index 6cfd15ea19c..00000000000
--- a/.changeset/great-sheep-exercise.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': patch
----
-
-fix(design-system): add data attributes to RichRadioButton
diff --git a/.changeset/red-readers-leave.md b/.changeset/red-readers-leave.md
deleted file mode 100644
index 9df69e6b6b4..00000000000
--- a/.changeset/red-readers-leave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': patch
----
-
-feat(tdc-7258): added data-checked attribute so automated tests can select the checked card
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 70583bdd06f..21581ad1c86 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @talend/design-system
 
+## 7.12.1
+
+### Patch Changes
+
+- b10ae79ed: fix(design-system): add data attributes to RichRadioButton
+- 5bfab7ded: feat(tdc-7258): added data-checked attribute so automated tests can select the checked card
+
 ## 7.12.0
 
 ### Minor Changes
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 74d5ca5e2a9..b5c193c1499 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.12.0",
+  "version": "7.12.1",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

From aab0eeb360f4865a1d8ab22cc14310fb4d246a4f Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Thu, 6 Jul 2023 11:20:36 +0200
Subject: [PATCH 10/34] feat(TDOPS-4704): faceted search configurable input
 text length (#4785)

* feat(TDOPS-4704): faceted search configurable input text length

* fix typo
---
 .changeset/five-files-join.md                 | 10 ++++
 .../BadgeText/BadgeTextForm.component.js      | 17 +++++-
 .../BasicSearch/BasicSearch.component.js      |  5 +-
 .../BasicSearch/BasicSearch.component.test.js | 38 +++++++++++++
 .../QuickSearchInput.component.js             |  2 +-
 .../stories/facetedSearch.stories.js          | 55 +++++++++++++++----
 6 files changed, 111 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/five-files-join.md

diff --git a/.changeset/five-files-join.md b/.changeset/five-files-join.md
new file mode 100644
index 00000000000..cd6568624e4
--- /dev/null
+++ b/.changeset/five-files-join.md
@@ -0,0 +1,10 @@
+---
+'@talend/react-faceted-search': major
+---
+
+TDOPS-4704 - Faceted search : Allow to configure faceted search min/max input length for text badge
+
+# BREAKING CHANGE
+
+Faceted search : `quickSearchMinLength` configuration for quick search input is no more used and now detected from badge configuration
+
diff --git a/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js b/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js
index b5afc03f33c..57f0af0021f 100644
--- a/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js
+++ b/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js
@@ -9,7 +9,18 @@ import cssModule from './BadgeText.module.scss';
 
 const theme = getTheme(cssModule);
 
-const BadgeTextForm = ({ id, onChange, onSubmit, value, feature, t, placeholder, ...rest }) => {
+const BadgeTextForm = ({
+	id,
+	onChange,
+	onSubmit,
+	value,
+	feature,
+	t,
+	placeholder,
+	minLength,
+	maxLength,
+	...rest
+}) => {
 	const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]);
 
 	const onChangeText = event => {
@@ -27,6 +38,8 @@ const BadgeTextForm = ({ id, onChange, onSubmit, value, feature, t, placeholder,
 					placeholder={placeholder || t('TYPE_HERE', { defaultValue: 'Type here' })}
 					type="text"
 					value={value}
+					minLength={minLength}
+					maxLength={maxLength}
 				/>
 			</Rich.Layout.Body>
 			<Rich.Layout.Footer id={id}>
@@ -50,6 +63,8 @@ BadgeTextForm.propTypes = {
 	feature: PropTypes.string.isRequired,
 	t: PropTypes.func.isRequired,
 	placeholder: PropTypes.string,
+	minLength: PropTypes.number,
+	maxLength: PropTypes.number,
 };
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
index 9fcb18b35dd..846833afe4a 100644
--- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
+++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
@@ -47,7 +47,6 @@ const BasicSearch = ({
 	quickSearchPlaceholder,
 	quickSearchFacetsFilter,
 	quickSearchInputProps,
-	quickSearchMinLength,
 	disclosureProps,
 }) => {
 	const { id, t } = useFacetedSearchContext();
@@ -105,6 +104,9 @@ const BasicSearch = ({
 	const badgeFacetedContextValue = { state, dispatch, onSubmit };
 	// removable = undefined means badge can be removed (backward compatible change)
 	const hasRemovableBadge = state.badges.some(badge => badge.properties.removable !== false);
+	const quickSearchMinLength =
+		Math.max(quicksearchable.map(quicksearchableItem => quicksearchableItem.metadata?.minLength)) ||
+		1;
 
 	return (
 		<div id={basicSearchId} className={css('tc-basic-search')}>
@@ -216,7 +218,6 @@ BasicSearch.propTypes = {
 	setBadgesFaceted: PropTypes.func,
 	callbacks: callbacksPropTypes,
 	quickSearchInputProps: PropTypes.object,
-	quickSearchMinLength: PropTypes.number,
 	disclosureProps: PropTypes.object,
 };
 
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js
index 0398027629d..d789f8fec46 100644
--- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js
+++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js
@@ -133,6 +133,44 @@ describe('BasicSearch', () => {
 		// eslint-disable-next-line jest-dom/prefer-in-document
 		expect(screen.queryAllByRole('option')).toHaveLength(0);
 	});
+
+	it('should display quick search faced depending on badge length configuration', () => {
+		// Given
+		const props = {
+			badgesDefinitions: badgesDefinitionsWithQuicksearch.map(
+				badgesDefinitionsWithQuicksearchItem => ({
+					...badgesDefinitionsWithQuicksearchItem,
+					metadata: { ...badgesDefinitionsWithQuicksearchItem.metadata, minLength: 3 },
+				}),
+			),
+			badgesFaceted,
+			onSubmit: jest.fn(),
+		};
+		render(
+			<FacetedManager id="manager-id">
+				<BasicSearch
+					{...props}
+					quickSearchFacetsFilter={(term, facets) =>
+						facets.filter(facet => facet.properties.label === term)
+					}
+				/>
+			</FacetedManager>,
+		);
+		// When searching with less then 3 chars
+		fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Na' } });
+
+		// Then it won't display any facet
+		// eslint-disable-next-line jest-dom/prefer-in-document
+		expect(screen.queryAllByRole('option')).toHaveLength(0);
+
+		// When searching with more then 3 chars
+		fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Name' } });
+
+		// Then it will display name facet
+		// eslint-disable-next-line jest-dom/prefer-in-document
+		expect(screen.getAllByRole('option')).toHaveLength(1);
+	});
+
 	it('should not trigger onSubmit when badge definition has not changed', () => {
 		// given
 		const onSubmit = jest.fn();
diff --git a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
index 4d15ad19bb7..25a20fb0569 100644
--- a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
+++ b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
@@ -17,7 +17,7 @@ export const QuickSearchInput = ({
 	onSelect = () => {},
 	facetsFilter,
 	inputProps,
-	minLength = 2,
+	minLength,
 }) => {
 	const defaultFacet = useMemo(() => getDefaultFacet(facets), [facets]);
 	const [opened, setOpened] = useState(false);
diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
index d581f9039ea..6dca07fb7f4 100644
--- a/packages/faceted-search/stories/facetedSearch.stories.js
+++ b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -523,15 +523,46 @@ export const WithQuickSearchFilter = () => (
 	</FacetedSearch.Faceted>
 );
 
-export const WithQuickSearchFilterCustomizableInputTriggerLength = () => (
-	<FacetedSearch.Faceted id="my-faceted-search">
-		<p>Quick search will trigger after a minimum input length that can be customized</p>
-		<br />
-		<FacetedSearch.BasicSearch
-			badgesDefinitions={badgesDefinitions}
-			callbacks={callbacks}
-			onSubmit={action('onSubmit')}
-			quickSearchMinLength={5}
-		/>
-	</FacetedSearch.Faceted>
-);
+export const WithQuickSearchFilterCustomizableInputTriggerLength = () => {
+	const badgeNameWithLength = {
+		properties: {
+			attribute: 'name',
+			initialOperatorOpened: true,
+			initialValueOpened: false,
+			label: 'Name',
+			operator: {},
+			operators: [],
+			type: 'text',
+			placeholder: 'Enter a dataset name',
+		},
+		metadata: {
+			isAvailableForQuickSearch: true,
+			isAvailableForFacetList: true,
+			badgePerFacet: 'N',
+			entitiesPerBadge: '1',
+			operators: [
+				'containsIgnoreCase',
+				'notContainsIgnoreCase',
+				'equals',
+				'notEquals',
+				'match a regexp',
+			],
+			'data-feature': 'faceted-badge-name',
+			minLength: 5,
+		},
+	};
+	return (
+		<FacetedSearch.Faceted id="my-faceted-search">
+			<p>
+				Quick search will trigger after a minimum input length that can be customized based on badge
+				definition
+			</p>
+			<br />
+			<FacetedSearch.BasicSearch
+				badgesDefinitions={[badgeNameWithLength]}
+				callbacks={callbacks}
+				onSubmit={action('onSubmit')}
+			/>
+		</FacetedSearch.Faceted>
+	);
+};

From c310d41c2c28c32ab5442bb62f31610ef84dbd99 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Thu, 6 Jul 2023 12:12:14 +0200
Subject: [PATCH 11/34] chore: prepare release (#4786)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/five-files-join.md        | 10 ----------
 packages/faceted-search/CHANGELOG.md | 10 ++++++++++
 packages/faceted-search/package.json |  2 +-
 packages/playground/CHANGELOG.md     |  7 +++++++
 packages/playground/package.json     |  4 ++--
 5 files changed, 20 insertions(+), 13 deletions(-)
 delete mode 100644 .changeset/five-files-join.md

diff --git a/.changeset/five-files-join.md b/.changeset/five-files-join.md
deleted file mode 100644
index cd6568624e4..00000000000
--- a/.changeset/five-files-join.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-'@talend/react-faceted-search': major
----
-
-TDOPS-4704 - Faceted search : Allow to configure faceted search min/max input length for text badge
-
-# BREAKING CHANGE
-
-Faceted search : `quickSearchMinLength` configuration for quick search input is no more used and now detected from badge configuration
-
diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md
index 286aab5373f..9bc84e9035e 100644
--- a/packages/faceted-search/CHANGELOG.md
+++ b/packages/faceted-search/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 10.0.0
+
+### Major Changes
+
+- aab0eeb36: TDOPS-4704 - Faceted search : Allow to configure faceted search min/max input length for text badge
+
+  # BREAKING CHANGE
+
+  Faceted search : `quickSearchMinLength` configuration for quick search input is no more used and now detected from badge configuration
+
 ## 9.4.0
 
 ### Minor Changes
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 8f18b6f9d25..0df6fb943a5 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-faceted-search",
-  "version": "9.4.0",
+  "version": "10.0.0",
   "description": "Faceted search",
   "main": "lib/index.js",
   "mainSrc": "src/index.js",
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
index f4ac7af9da3..5a6894e3bcb 100644
--- a/packages/playground/CHANGELOG.md
+++ b/packages/playground/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @talend/ui-playground
 
+## 1.1.14
+
+### Patch Changes
+
+- Updated dependencies [aab0eeb36]
+  - @talend/react-faceted-search@10.0.0
+
 ## 1.1.13
 
 ### Patch Changes
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 1ce59303956..1232eb46cbd 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/ui-playground",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Showcase Talend/UI",
   "private": true,
   "main": "app/index.js",
@@ -38,7 +38,7 @@
     "@talend/react-components": "^10.3.5",
     "@talend/react-containers": "^9.1.2",
     "@talend/react-dataviz": "^2.9.1",
-    "@talend/react-faceted-search": "^9.3.0",
+    "@talend/react-faceted-search": "^10.0.0",
     "@talend/react-forms": "^9.2.3",
     "history": "^5.3.0",
     "i18next": "^20.6.1",

From 1c53807b71697a79715a10ff1687ba88771740e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Moreno?= <amoreno@talend.com>
Date: Mon, 10 Jul 2023 15:49:45 +0100
Subject: [PATCH 12/34] chore: update rich radio button (#4791)

---
 .changeset/young-carrots-turn.md                |  5 +++++
 .../RichRadioButton.component.tsx               | 13 +++++++++----
 .../RichRadioButton/RichRadioButton.module.scss | 17 ++++++++++++++---
 3 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/young-carrots-turn.md

diff --git a/.changeset/young-carrots-turn.md b/.changeset/young-carrots-turn.md
new file mode 100644
index 00000000000..a3e82c04c2e
--- /dev/null
+++ b/.changeset/young-carrots-turn.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+chore: update rich radio button
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
index 5921a39cae6..da0b1894d78 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx
@@ -7,7 +7,6 @@ import {
 import { StackVertical, StackHorizontal } from '../Stack';
 import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper';
 import style from './RichRadioButton.module.scss';
-import classnames from 'classnames';
 import { Tag } from '../Tag';
 import { Icon } from '../Icon';
 import { DataAttributes } from 'src/types';
@@ -15,17 +14,17 @@ import { DataAttributes } from 'src/types';
 function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) {
 	if (asset?.illustration) {
 		return (
-			<span className={classnames([style['rich-radio-button__illustration']])}>
+			<span className={style['rich-radio-button__illustration']}>
 				<asset.illustration />
 			</span>
 		);
 	}
 	if (asset?.logo) {
-		return <Icon name={asset.logo} className={classnames([style['rich-radio-button__logo']])} />;
+		return <Icon name={asset.logo} className={style['rich-radio-button__logo']} />;
 	}
 	if (asset?.name) {
 		return (
-			<span className={classnames([style['rich-radio-button__icon']])}>
+			<span className={style['rich-radio-button__icon']}>
 				{getIconWithDeprecatedSupport({
 					iconSrc: asset.name || '',
 					size: 'L',
@@ -68,6 +67,12 @@ const RichRadioButton = ({
 				data-test={dataTest}
 				onChange={() => onChange(id)}
 				data-checked={isChecked}
+				onKeyDown={event => {
+					if (event.key === 'Enter') {
+						event.preventDefault();
+						onChange(id);
+					}
+				}}
 			/>
 			<span className={style['rich-radio-button']}>
 				<StackVertical as="span" gap="XS">
diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
index c92f9d7c202..c3e6366d008 100644
--- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
+++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss
@@ -34,12 +34,17 @@
 	&__wrapper {
 		display: flex;
 		flex: 1;
+		height: 100%;
 		margin: 0;
 		max-width: 400px;
 		min-height: 77px;
 		min-width: 220px;
 		position: relative;
 		width: 100%;
+
+		input {
+			margin: 0;
+		}
 	}
 
 	&__input {
@@ -152,6 +157,11 @@
 
 		&:checked {
 			&:not(:disabled, [readonly]) {
+				+ .rich-radio-button {
+					background-color: tokens.$coral-color-accent-background-selected;
+					border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
+				}
+
 				&:hover {
 					+ .rich-radio-button {
 						border-color: tokens.$coral-color-accent-border-hover;
@@ -164,9 +174,10 @@
 					}
 				}
 
-				+ .rich-radio-button {
-					background-color: tokens.$coral-color-accent-background-selected;
-					border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
+				&:focus {
+					+ .rich-radio-button {
+						outline-offset: -2px;
+					}
 				}
 			}
 

From dc4df924edf6eabae913e68aa2111bef014427b0 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Mon, 10 Jul 2023 17:25:02 +0200
Subject: [PATCH 13/34] chore: prepare release (#4792)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/young-carrots-turn.md    | 5 -----
 packages/design-system/CHANGELOG.md | 6 ++++++
 packages/design-system/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/young-carrots-turn.md

diff --git a/.changeset/young-carrots-turn.md b/.changeset/young-carrots-turn.md
deleted file mode 100644
index a3e82c04c2e..00000000000
--- a/.changeset/young-carrots-turn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': patch
----
-
-chore: update rich radio button
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 21581ad1c86..72a503cefcd 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/design-system
 
+## 7.12.2
+
+### Patch Changes
+
+- 1c53807b7: chore: update rich radio button
+
 ## 7.12.1
 
 ### Patch Changes
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index b5c193c1499..e526902c1df 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

From 4292de3ea61ec303ae30601c02e283f4b04f69c6 Mon Sep 17 00:00:00 2001
From: dlcaldeira <124570762+dlcaldeira@users.noreply.github.com>
Date: Wed, 12 Jul 2023 14:42:07 +0100
Subject: [PATCH 14/34] feat(TDC-7254/Stepper): Add a new props
 `currentStepIndex` to control current step. Set to zero by default

This fixes an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back to classic react patterns, make it pure, and ask for a state
---
 .changeset/pink-llamas-cheer.md               |  7 ++
 .../Progress.horizontal.module.scss           |  8 +--
 .../variations/Progress.vertical.module.scss  |  8 +--
 .../Stepper/Step/Primitive/Step.module.scss   |  2 +-
 .../src/components/Stepper/Stepper.cy.tsx     | 71 +++++++++++++++++++
 .../src/components/Stepper/Stepper.tsx        | 37 ++++------
 .../design-system/Stepper/Stepper.stories.mdx | 11 ++-
 7 files changed, 103 insertions(+), 41 deletions(-)
 create mode 100644 .changeset/pink-llamas-cheer.md
 create mode 100644 packages/design-system/src/components/Stepper/Stepper.cy.tsx

diff --git a/.changeset/pink-llamas-cheer.md b/.changeset/pink-llamas-cheer.md
new file mode 100644
index 00000000000..65a9aa0e477
--- /dev/null
+++ b/.changeset/pink-llamas-cheer.md
@@ -0,0 +1,7 @@
+---
+'@talend/design-system': minor
+---
+
+feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default.
+
+This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state
diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss
index 9ed053fb1b8..434208a7005 100644
--- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss
+++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss
@@ -1,11 +1,5 @@
 @use '~@talend/design-tokens/lib/tokens';
 
-@keyframes progress {
-	0% {
-		width: 0;
-	}
-}
-
 .horizontal {
 	top: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.05rem);
 	right: 10rem;
@@ -18,6 +12,6 @@
 	div {
 		top: 0;
 		height: 0.2rem;
-		animation: progress 1s ease-in-out;
+		transition: width tokens.$coral-transition-slow;
 	}
 }
diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss
index a2aaa311aad..e9db081407a 100644
--- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss
+++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss
@@ -1,11 +1,5 @@
 @use '~@talend/design-tokens/lib/tokens';
 
-@keyframes progress {
-	0% {
-		height: 0;
-	}
-}
-
 .vertical {
 	top: tokens.$coral-sizing-xxs;
 	right: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.05rem);
@@ -15,6 +9,6 @@
 
 	div {
 		width: 0.2rem;
-		animation: progress 1s ease-in-out;
+		transition: height tokens.$coral-transition-slow;
 	}
 }
diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss
index 39b84b8f9d3..39b2142f6e3 100644
--- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss
+++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss
@@ -71,7 +71,7 @@
 			box-shadow: 0 0 0 0.3rem tokens.$coral-color-accent-background;
 			z-index: 1;
 			transform: scale(1);
-			animation: pulse 2s infinite;
+			animation: pulse 2s 0.2s infinite;
 		}
 	}
 
diff --git a/packages/design-system/src/components/Stepper/Stepper.cy.tsx b/packages/design-system/src/components/Stepper/Stepper.cy.tsx
new file mode 100644
index 00000000000..a9bb698aaa6
--- /dev/null
+++ b/packages/design-system/src/components/Stepper/Stepper.cy.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/await-async-query */
+import Stepper from '.';
+
+context('<Stepper />', () => {
+	it('should render first step as current step', () => {
+		cy.mount(
+			<Stepper currentStepIndex={0}>
+				<Stepper.Step.InProgress title="Current step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+			</Stepper>,
+		);
+		cy.get('ol li').first().should('have.attr', 'aria-current', 'step');
+	});
+
+	it('should have last step as current step', () => {
+		cy.mount(
+			<Stepper currentStepIndex={3}>
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.InProgress title="Current step" />
+			</Stepper>,
+		);
+		cy.get('ol li').last().should('have.attr', 'aria-current', 'step');
+	});
+
+	it('should render progressbar with no height', () => {
+		cy.mount(
+			<Stepper currentStepIndex={0}>
+				<Stepper.Step.InProgress title="Current step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+			</Stepper>,
+		);
+		cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;');
+	});
+
+	it('should render progressbar with 100% height', () => {
+		cy.mount(
+			<Stepper currentStepIndex={2}>
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.InProgress title="Current step" />
+			</Stepper>,
+		);
+		cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 100%;');
+	});
+
+	it('should render progressbar with no height if the currentStepIndex is outside of the range of steps', () => {
+		cy.mount(
+			<Stepper currentStepIndex={5}>
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.InProgress title="Current step" />
+			</Stepper>,
+		);
+		cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;');
+	});
+
+	it('should render progressbar with no height if the currentStepIndex is outside of the range of steps', () => {
+		cy.mount(
+			<Stepper currentStepIndex={'3' as any}>
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.Enabled title="Next step" />
+				<Stepper.Step.InProgress title="Current step" />
+			</Stepper>,
+		);
+		cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;');
+	});
+});
diff --git a/packages/design-system/src/components/Stepper/Stepper.tsx b/packages/design-system/src/components/Stepper/Stepper.tsx
index 909c2368353..e89a0e02531 100644
--- a/packages/design-system/src/components/Stepper/Stepper.tsx
+++ b/packages/design-system/src/components/Stepper/Stepper.tsx
@@ -1,24 +1,16 @@
-import {
-	Children,
-	cloneElement,
-	forwardRef,
-	ReactElement,
-	Ref,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
 import classnames from 'classnames';
+import { Children, cloneElement, forwardRef, ReactElement, Ref, useMemo } from 'react';
 import { isElement } from 'react-is';
 
-import ProgressVertical from './Progress/variations/Progress.vertical';
 import ProgressHorizontal from './Progress/variations/Progress.horizontal';
+import ProgressVertical from './Progress/variations/Progress.vertical';
 
 import styles from './Stepper.module.scss';
 
 export type StepperOrientation = 'horizontal' | 'vertical';
 
 export type StepperProps = {
+	currentStepIndex?: number;
 	orientation?: StepperOrientation;
 	children: ReactElement | ReactElement[];
 	loading?: boolean;
@@ -26,21 +18,17 @@ export type StepperProps = {
 
 const Stepper = forwardRef(
 	(
-		{ children, orientation = 'vertical', loading, ...rest }: StepperProps,
+		{ currentStepIndex = 0, children, orientation = 'vertical', loading, ...rest }: StepperProps,
 		ref: Ref<HTMLDivElement>,
 	) => {
-		const listRef = useRef<null | HTMLOListElement>(null);
-		const [progressIndex, setProgressIndex] = useState(0);
-
-		useEffect(() => {
-			// Find the last active step in the list and store its index
-			const listEntries = listRef.current ? Array.from(listRef.current.children) : [];
-			const indexOfProgress = listEntries.map(entry => entry.ariaCurrent).lastIndexOf('step');
-			setProgressIndex(indexOfProgress);
-		}, []);
-
-		const value = progressIndex + 1;
 		const max = Children.count(children);
+		const value = useMemo(() => {
+			if (typeof currentStepIndex !== 'number' || currentStepIndex < 0 || currentStepIndex > max) {
+				return 0;
+			}
+
+			return currentStepIndex + 1;
+		}, [currentStepIndex, max]);
 
 		return (
 			<div
@@ -50,7 +38,8 @@ const Stepper = forwardRef(
 			>
 				{orientation === 'vertical' && <ProgressVertical value={value} max={max} />}
 				{orientation === 'horizontal' && <ProgressHorizontal value={value} max={max} />}
-				<ol className={styles.stepper__steps} ref={listRef}>
+
+				<ol className={styles.stepper__steps}>
 					{children &&
 						Children.map(
 							children,
diff --git a/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx b/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx
index 20df886b687..cf3367d97c8 100644
--- a/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx
+++ b/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx
@@ -146,6 +146,7 @@ In case of an error in the current step, please inform the user by using an inli
 		name="usage"
 		args={{
 			variant: 'Vertical',
+			currentStepIndex: 1,
 		}}
 		argTypes={{
 			variant: {
@@ -155,13 +156,19 @@ In case of an error in the current step, please inform the user by using an inli
 					options: ['Vertical', 'Horizontal'],
 				},
 			},
+			currentStepIndex: {
+				description: 'Current step index',
+				control: {
+					type: 'number',
+				},
+			},
 		}}
 	>
-		{({ variant, index, title }) => {
+		{({ currentStepIndex, variant, index, title }) => {
 			const StepperComponent = Stepper[variant];
 			StepperComponent.displayName = `Stepper.${variant}`;
 			return (
-				<StepperComponent>
+				<StepperComponent currentStepIndex={currentStepIndex}>
 					<Stepper.Step.Validated title="Validated" />
 					<Stepper.Step.InProgress title="In progress" />
 					<Stepper.Step.Enabled title="Enabled" />

From 6cc95498331b71e56210294b89543d8c3389c0df Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 17 Jul 2023 09:24:04 +0200
Subject: [PATCH 15/34] feat(TDOPS-4779): add qlik icon (#4801)

---
 .changeset/gentle-melons-ring.md                 |  5 +++++
 packages/icons/src/svg/products/qlik-colored.svg | 15 +++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 .changeset/gentle-melons-ring.md
 create mode 100644 packages/icons/src/svg/products/qlik-colored.svg

diff --git a/.changeset/gentle-melons-ring.md b/.changeset/gentle-melons-ring.md
new file mode 100644
index 00000000000..049add037b3
--- /dev/null
+++ b/.changeset/gentle-melons-ring.md
@@ -0,0 +1,5 @@
+---
+'@talend/icons': minor
+---
+
+feat: add qlik icon
diff --git a/packages/icons/src/svg/products/qlik-colored.svg b/packages/icons/src/svg/products/qlik-colored.svg
new file mode 100644
index 00000000000..97b51b5c43a
--- /dev/null
+++ b/packages/icons/src/svg/products/qlik-colored.svg
@@ -0,0 +1,15 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16">
+    <g>
+        <path
+            d="m 14.03928,15.064548 -2.01405,-1.736085 a 7.0939155,7.5573167 0 1 1 1.613681,-2.415786 l 2.148074,1.851694 c 0,0 0.318707,0.275052 0.06068,0.615436 l -1.230683,1.620099 c 0,0 -0.258029,0.340383 -0.577699,0.06463 M 7.9984014,12.383283 a 4.3582892,4.6429891 0 1 0 -1.667266,-9.1145251 4.3582892,4.6429891 0 0 0 1.667266,9.1145251"
+            fill="#009c4d"
+            stroke-width="0.847154"
+        />
+        <path
+            d="m 3.740584,7.8113626 a 3.404,3.404 0 1 0 6.808,0 3.404,3.404 0 0 0 -6.808,0"
+            fill="#54565b"
+        />
+    </g>
+</svg>
\ No newline at end of file

From 10d6dd07fe5eaee68b21bd5fbdb59db73f089dbc Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Mon, 17 Jul 2023 09:59:55 +0200
Subject: [PATCH 16/34] chore: prepare release (#4798)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/gentle-melons-ring.md    | 5 -----
 .changeset/pink-llamas-cheer.md     | 7 -------
 packages/design-system/CHANGELOG.md | 8 ++++++++
 packages/design-system/package.json | 4 ++--
 packages/icons/CHANGELOG.md         | 6 ++++++
 packages/icons/package.json         | 2 +-
 6 files changed, 17 insertions(+), 15 deletions(-)
 delete mode 100644 .changeset/gentle-melons-ring.md
 delete mode 100644 .changeset/pink-llamas-cheer.md

diff --git a/.changeset/gentle-melons-ring.md b/.changeset/gentle-melons-ring.md
deleted file mode 100644
index 049add037b3..00000000000
--- a/.changeset/gentle-melons-ring.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/icons': minor
----
-
-feat: add qlik icon
diff --git a/.changeset/pink-llamas-cheer.md b/.changeset/pink-llamas-cheer.md
deleted file mode 100644
index 65a9aa0e477..00000000000
--- a/.changeset/pink-llamas-cheer.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@talend/design-system': minor
----
-
-feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default.
-
-This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 72a503cefcd..be9c71baaed 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @talend/design-system
 
+## 7.13.0
+
+### Minor Changes
+
+- 4292de3ea: feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default.
+
+  This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state
+
 ## 7.12.2
 
 ### Patch Changes
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index e526902c1df..7c170efdcc8 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.12.2",
+  "version": "7.13.0",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -60,7 +60,7 @@
     "@storybook/theming": "^6.5.16",
     "@svgr/webpack": "^5.5.0",
     "@talend/bootstrap-theme": "^7.0.1",
-    "@talend/icons": "^6.58.1",
+    "@talend/icons": "^6.59.0",
     "@talend/locales-design-system": "^7.3.0",
     "@talend/scripts-core": "^13.3.0",
     "@talend/scripts-config-react-webpack": "^15.4.0",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index eebe02c341e..96dc081a7cf 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/icons
 
+## 6.59.0
+
+### Minor Changes
+
+- 6cc954983: feat: add qlik icon
+
 ## 6.58.1
 
 ### Patch Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index dc3354da1ac..6f00ff67170 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.58.1"
+  "version": "6.59.0"
 }

From cd79a04a86363acc1617e6a5db5ecab0225166b7 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Tue, 18 Jul 2023 10:52:12 +0200
Subject: [PATCH 17/34] feat(TDOPS-4682): Design System to allow maxlength on
 InlineEdit field (#4803)

---
 .changeset/fast-hornets-run.md                |  5 +++
 .../Primitives/InlineEditingPrimitive.tsx     |  3 ++
 .../variations/InlineEditing.textarea.cy.tsx  | 41 +++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 .changeset/fast-hornets-run.md
 create mode 100644 packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx

diff --git a/.changeset/fast-hornets-run.md b/.changeset/fast-hornets-run.md
new file mode 100644
index 00000000000..8a8f88d8943
--- /dev/null
+++ b/.changeset/fast-hornets-run.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute
diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
index fd0bb640a14..72af8a0e640 100644
--- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
+++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
@@ -43,6 +43,7 @@ export type InlineEditingPrimitiveProps = {
 	onToggle?: (isEditionMode: boolean) => void;
 	label: string;
 	required?: boolean;
+	maxLength?: number;
 	placeholder: string;
 	ariaLabel?: string;
 	renderValueAs?: ElementType | ReactElement;
@@ -85,6 +86,7 @@ const InlineEditingPrimitive = forwardRef(
 			onCancel = () => {},
 			onToggle = () => {},
 			required = false,
+			maxLength,
 			label,
 			hasError,
 			description,
@@ -176,6 +178,7 @@ const InlineEditingPrimitive = forwardRef(
 			label,
 			name: label.replace(/\s/g, ''),
 			required,
+			maxLength,
 			placeholder,
 			onChange: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>): void => {
 				if (onChangeValue) {
diff --git a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx
new file mode 100644
index 00000000000..21f0dacdbf2
--- /dev/null
+++ b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx
@@ -0,0 +1,41 @@
+import InlineEditingMulti from './InlineEditing.textarea';
+
+context('<InlineEditing.Textarea />', () => {
+	const defaultProps = {
+		label: 'Textarea inline edit',
+		placeholder: 'Type here',
+	};
+
+	it('should render with filled value', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} defaultValue="Some text" />);
+
+		cy.get('[data-testid="inlineediting.button.edit"]').should('exist');
+		cy.get('p').should('have.text', 'Some text');
+	});
+
+	it('should allow inline editing', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} />);
+
+		// Switch to edit mode
+		cy.get('[data-testid="inlineediting.button.edit"]').click();
+		cy.get('[data-testid="inlineediting.textarea"]').should('be.visible');
+		cy.get('[data-testid="inlineediting.button.cancel"]').should('be.visible');
+		cy.get('[data-testid="inlineediting.button.submit"]').should('be.visible');
+
+		// Input some text and submit
+		cy.get('[data-testid="inlineediting.textarea"]').type('Here is a description');
+		cy.get('[data-testid="inlineediting.button.submit"]').click();
+
+		cy.get('p').should('have.text', 'Here is a description');
+	});
+
+	it('should allow to have some constraints', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} required={true} maxLength={10} />);
+
+		cy.get('[data-testid="inlineediting.button.edit"]').click();
+		cy.get('[data-testid="inlineediting.textarea"]').should('have.attr', 'required');
+		cy.get('[data-testid="inlineediting.textarea"]')
+			.invoke('attr', 'maxLength')
+			.should('equal', '10');
+	});
+});

From 0789cda914bb2008b740a0d2dfed559b9a2e70ff Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Tue, 18 Jul 2023 11:43:44 +0200
Subject: [PATCH 18/34] fix(TDOPS-4682): Fix design system form file to
 integrate on TMC (#4800)

* fix(TDOPS-4682): Fix design system form file to integrate on TMC

* added tests
---
 .changeset/lovely-apricots-behave.md          |  5 +++
 .../Form/Field/Input/Input.File.cy.tsx        | 36 +++++++++++++++++++
 .../Form/Field/Input/Input.File.tsx           |  9 +++--
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lovely-apricots-behave.md
 create mode 100644 packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx

diff --git a/.changeset/lovely-apricots-behave.md b/.changeset/lovely-apricots-behave.md
new file mode 100644
index 00000000000..2ed360f4498
--- /dev/null
+++ b/.changeset/lovely-apricots-behave.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+Design system - Form file will now update on files prop change and will trigger onChange when file is cleared
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx
new file mode 100644
index 00000000000..6fc136ec4c3
--- /dev/null
+++ b/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx
@@ -0,0 +1,36 @@
+import InputFile from './Input.File';
+
+context('<Form.File />', () => {
+	const defaultProps = {
+		label: 'Select file here',
+		name: 'file',
+	};
+	it('should render', () => {
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('label').should('have.text', defaultProps.label);
+		cy.get('ol[role="list"]').should('not.exist');
+		cy.get('button').should('not.exist');
+	});
+
+	it('should render with filled value', () => {
+		cy.mount(<InputFile {...defaultProps} files={['file.js']} />);
+
+		cy.get('ol[role="list"]').should('have.text', 'file.js');
+		cy.get('button').should('exist');
+	});
+
+	it('should trigger dom events', () => {
+		cy.document().then(doc => {
+			doc.addEventListener('change', cy.stub().as('onChange'));
+		});
+
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('input').selectFile(Cypress.Buffer.from('Hello world'));
+		cy.get('@onChange').should('have.been.calledOnce');
+
+		cy.get('button').click({ force: true });
+		cy.get('@onChange').should('have.been.calledTwice');
+	});
+});
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
index 36aa2d0660c..596ffd0c21b 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
@@ -29,18 +29,22 @@ function getFileSize(size: number, t: TFunction) {
 
 type InputType = Omit<InputPrimitiveProps, 'type' | 'className' | 'style' | 'prefix' | 'suffix'>;
 type FileProps = InputType & {
-	files?: string[] | FileList;
+	files?: string[] | FileList | null;
 };
 
 const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 	const [drag, setDrag] = useState(false);
-	const [files, setFiles] = useState(props.files || null);
+	const [files, setFiles] = useState<string[] | FileList | null>();
 
 	const inputRef = useRef<HTMLInputElement | null>(null);
 	const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM);
 
 	const { hasError, ...rest } = props;
 
+	useEffect(() => {
+		setFiles(props.files);
+	}, [props.files]);
+
 	function handleChange() {
 		const input = inputRef.current;
 		if (input) {
@@ -52,6 +56,7 @@ const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 		const input = inputRef.current;
 		if (input) {
 			input.value = '';
+			input.dispatchEvent(new Event('change', { bubbles: true }));
 		}
 		setFiles(() => null);
 	}

From a17306fc95aff313ce16ebd3d4649d1fbeebf0bb Mon Sep 17 00:00:00 2001
From: Inna Ivashchuk <innes333@gmail.com>
Date: Tue, 18 Jul 2023 14:42:49 +0300
Subject: [PATCH 19/34] fix(TDOPS-4795): faceted search wrong plural label
 (#4804)

* fix(TDOPS-4795): faceted search wrong plural label

* chore: update faceted-search version

* fix: use patch version
---
 .changeset/smart-dodos-battle.md                             | 5 +++++
 .../Badges/BadgeCheckboxes/BadgeCheckboxes.component.js      | 3 +--
 .../src/components/Badges/BadgeTags/BadgeTags.component.js   | 3 +--
 3 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/smart-dodos-battle.md

diff --git a/.changeset/smart-dodos-battle.md b/.changeset/smart-dodos-battle.md
new file mode 100644
index 00000000000..9c15c6e47ab
--- /dev/null
+++ b/.changeset/smart-dodos-battle.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+TDOPS-4795 - [TUI] Faceted search display wrong plural label
diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js
index caab3750496..bee22be6dfd 100644
--- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js
+++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js
@@ -12,8 +12,7 @@ const getSelectBadgeLabel = (value, t) => {
 		if (checkedCheckboxes.length > 3) {
 			return t('FACETED_SEARCH_VALUES_COUNT', {
 				count: checkedCheckboxes.length,
-				defaultValue: '{{count}} value',
-				defaultValue_plural: '{{count}} values',
+				defaultValue: '{{count}} values',
 			});
 		} else if (!checkedCheckboxes.length) {
 			return labelAll;
diff --git a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js
index 5a28d4bd7e0..deef59700e4 100644
--- a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js
+++ b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js
@@ -17,8 +17,7 @@ const getSelectBadgeLabel = (value, t) => {
 		if (checkedCheckboxes.length > 3) {
 			return t('FACETED_SEARCH_VALUES_COUNT', {
 				count: checkedCheckboxes.length,
-				defaultValue: '{{count}} value',
-				defaultValue_plural: '{{count}} values',
+				defaultValue: '{{count}} values',
 			});
 		} else if (!checkedCheckboxes.length) {
 			return labelAll;

From 4bedbc0a948a2c734ee07224a8d5b225e5c637c6 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Tue, 18 Jul 2023 14:19:50 +0200
Subject: [PATCH 20/34] chore: prepare release (#4805)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/fast-hornets-run.md       |  5 -----
 .changeset/lovely-apricots-behave.md |  5 -----
 .changeset/smart-dodos-battle.md     |  5 -----
 packages/design-system/CHANGELOG.md  | 10 ++++++++++
 packages/design-system/package.json  |  2 +-
 packages/faceted-search/CHANGELOG.md |  6 ++++++
 packages/faceted-search/package.json |  4 ++--
 7 files changed, 19 insertions(+), 18 deletions(-)
 delete mode 100644 .changeset/fast-hornets-run.md
 delete mode 100644 .changeset/lovely-apricots-behave.md
 delete mode 100644 .changeset/smart-dodos-battle.md

diff --git a/.changeset/fast-hornets-run.md b/.changeset/fast-hornets-run.md
deleted file mode 100644
index 8a8f88d8943..00000000000
--- a/.changeset/fast-hornets-run.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': minor
----
-
-Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute
diff --git a/.changeset/lovely-apricots-behave.md b/.changeset/lovely-apricots-behave.md
deleted file mode 100644
index 2ed360f4498..00000000000
--- a/.changeset/lovely-apricots-behave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/design-system': patch
----
-
-Design system - Form file will now update on files prop change and will trigger onChange when file is cleared
diff --git a/.changeset/smart-dodos-battle.md b/.changeset/smart-dodos-battle.md
deleted file mode 100644
index 9c15c6e47ab..00000000000
--- a/.changeset/smart-dodos-battle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-faceted-search': patch
----
-
-TDOPS-4795 - [TUI] Faceted search display wrong plural label
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index be9c71baaed..20d58b7e1d2 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @talend/design-system
 
+## 7.14.0
+
+### Minor Changes
+
+- cd79a04a8: Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute
+
+### Patch Changes
+
+- 0789cda91: Design system - Form file will now update on files prop change and will trigger onChange when file is cleared
+
 ## 7.13.0
 
 ### Minor Changes
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 7c170efdcc8..439f945b729 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.13.0",
+  "version": "7.14.0",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md
index 9bc84e9035e..5814939a545 100644
--- a/packages/faceted-search/CHANGELOG.md
+++ b/packages/faceted-search/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 10.0.1
+
+### Patch Changes
+
+- a17306fc9: TDOPS-4795 - [TUI] Faceted search display wrong plural label
+
 ## 10.0.0
 
 ### Major Changes
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 0df6fb943a5..44d2c916b00 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-faceted-search",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "Faceted search",
   "main": "lib/index.js",
   "mainSrc": "src/index.js",
@@ -46,7 +46,7 @@
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@talend/bootstrap-theme": "^7.0.1",
-    "@talend/design-system": "^7.10.0",
+    "@talend/design-system": "^7.14.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-components": "^9.5.0",
     "@talend/locales-tui-faceted-search": "^8.1.0",

From d6e53abd98ed1bdf35153dbf37484ebecf3bb260 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 19 Jul 2023 09:12:13 +0200
Subject: [PATCH 21/34] chore(deps): bump word-wrap from 1.2.3 to 1.2.4 (#4806)

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d0bedd99d9d..e7f326f15b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19449,9 +19449,9 @@ wildcard@^2.0.0:
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
 word-wrap@^1.2.3, word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+  integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wordwrap@^1.0.0:
   version "1.0.0"

From 84fc7a5a56820852996ec64e4f336b69925e0379 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 19 Jul 2023 09:22:39 +0200
Subject: [PATCH 22/34] chore(deps): bump tj-actions/changed-files from 37.0.5
 to 37.1.2 (#4802)

Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 37.0.5 to 37.1.2.
- [Release notes](https://github.com/tj-actions/changed-files/releases)
- [Changelog](https://github.com/tj-actions/changed-files/blob/main/HISTORY.md)
- [Commits](https://github.com/tj-actions/changed-files/compare/54849deb963ca9f24185fb5de2965e002d066e6b...2a968ff601949c81b47d9c1fdb789b0d25ddeea2)

---
updated-dependencies:
- dependency-name: tj-actions/changed-files
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/pr-lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml
index dcef46268d2..21816288510 100644
--- a/.github/workflows/pr-lint.yml
+++ b/.github/workflows/pr-lint.yml
@@ -46,7 +46,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@54849deb963ca9f24185fb5de2965e002d066e6b #v37.0.5
+        uses: tj-actions/changed-files@2a968ff601949c81b47d9c1fdb789b0d25ddeea2 #v37.1.2
 
       - name: Merge lint
         run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }}

From fab2624bc603cc2e85a1309cae1d2fa07c4a62c7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 19 Jul 2023 09:23:25 +0200
Subject: [PATCH 23/34] chore(deps): bump actions/setup-node from 3.6.0 to
 3.7.0 (#4793)

Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3.6.0 to 3.7.0.
- [Release notes](https://github.com/actions/setup-node/releases)
- [Commits](https://github.com/actions/setup-node/compare/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c...e33196f7422957bea03ed53f6fbb155025ffc7b8)

---
updated-dependencies:
- dependency-name: actions/setup-node
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/changeset.yml                       | 2 +-
 .github/workflows/dependencies.yml                    | 2 +-
 .github/workflows/design-system-component-testing.yml | 2 +-
 .github/workflows/icons.yml                           | 2 +-
 .github/workflows/pr-demo.yml                         | 2 +-
 .github/workflows/pr-lint.yml                         | 2 +-
 .github/workflows/pr-playground.yml                   | 2 +-
 .github/workflows/pr-test.yml                         | 2 +-
 .github/workflows/surge-cleanup.yml                   | 2 +-
 .github/workflows/tests-cron.yml                      | 2 +-
 .github/workflows/visual-testing.yml                  | 2 +-
 .github/workflows/yarn-deduplicate.yml                | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml
index e5fb0253c26..0fd1665269b 100644
--- a/.github/workflows/changeset.yml
+++ b/.github/workflows/changeset.yml
@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml
index 63ee72fbf44..4a1d6da1d30 100644
--- a/.github/workflows/dependencies.yml
+++ b/.github/workflows/dependencies.yml
@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml
index 9c9a873546b..e89ded5f597 100644
--- a/.github/workflows/design-system-component-testing.yml
+++ b/.github/workflows/design-system-component-testing.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml
index 973531c99ea..e20952a7dd5 100644
--- a/.github/workflows/icons.yml
+++ b/.github/workflows/icons.yml
@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true
diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml
index de001b21718..acedaf9ae15 100644
--- a/.github/workflows/pr-demo.yml
+++ b/.github/workflows/pr-demo.yml
@@ -28,7 +28,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml
index 21816288510..8a25ad47a33 100644
--- a/.github/workflows/pr-lint.yml
+++ b/.github/workflows/pr-lint.yml
@@ -28,7 +28,7 @@ jobs:
           fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true
diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml
index 659b70dd2bd..123f60a6542 100644
--- a/.github/workflows/pr-playground.yml
+++ b/.github/workflows/pr-playground.yml
@@ -27,7 +27,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index 96d588673db..1f88e184c02 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true
diff --git a/.github/workflows/surge-cleanup.yml b/.github/workflows/surge-cleanup.yml
index 7613395a5c1..c45b02de358 100644
--- a/.github/workflows/surge-cleanup.yml
+++ b/.github/workflows/surge-cleanup.yml
@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
 
diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml
index acd9baaac5c..82f5e69832a 100644
--- a/.github/workflows/tests-cron.yml
+++ b/.github/workflows/tests-cron.yml
@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"
diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml
index 1466ab1bef2..04036609ea2 100644
--- a/.github/workflows/visual-testing.yml
+++ b/.github/workflows/visual-testing.yml
@@ -32,7 +32,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           cache: "yarn"
diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml
index 15b38405910..4397e4a90dc 100644
--- a/.github/workflows/yarn-deduplicate.yml
+++ b/.github/workflows/yarn-deduplicate.yml
@@ -29,7 +29,7 @@ jobs:
           fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

From 7a9a8db402a533efbf5b74cde9e63db475c302f2 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Wed, 19 Jul 2023 14:26:52 +0200
Subject: [PATCH 24/34] feat(TDOPS-4687): checkbox widget can disable a single
 value in list (#4809)

---
 .changeset/orange-lobsters-poke.md            |  5 ++++
 .../fields/CheckBox/CheckBoxes.component.js   |  8 ++---
 .../UIForm/fields/CheckBox/CheckBoxes.test.js | 30 +++++++++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/orange-lobsters-poke.md

diff --git a/.changeset/orange-lobsters-poke.md b/.changeset/orange-lobsters-poke.md
new file mode 100644
index 00000000000..9de2884c3bd
--- /dev/null
+++ b/.changeset/orange-lobsters-poke.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': minor
+---
+
+Forms - Allow to disable a single checkbox for checkbox widget list
diff --git a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js
index 70008e3fcb6..b5516bae000 100644
--- a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js
+++ b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js
@@ -3,7 +3,7 @@ import SimpleCheckBox from './SimpleCheckBox.component';
 import FieldTemplate from '../FieldTemplate';
 import { generateDescriptionId, generateErrorId } from '../../Message/generateId';
 
-function getValues(value = [], itemValue, checked) {
+function getValues(itemValue, checked, value = []) {
 	if (checked) {
 		return value.concat(itemValue);
 	}
@@ -35,7 +35,7 @@ export default function CheckBoxes(props) {
 			{titleMap.map((item, index) => (
 				<SimpleCheckBox
 					describedby={`${descriptionId} ${errorId}`}
-					disabled={schema.disabled || valueIsUpdating}
+					disabled={item.disabled || schema.disabled || valueIsUpdating}
 					id={id}
 					key={index}
 					isValid={isValid}
@@ -43,13 +43,13 @@ export default function CheckBoxes(props) {
 					onChange={(event, payload) =>
 						onChange(event, {
 							schema: payload.schema,
-							value: getValues(value, item.value, payload.value),
+							value: getValues(item.value, payload.value, value),
 						})
 					}
 					onFinish={(event, payload) =>
 						onFinish(event, {
 							schema: payload.schema,
-							value: getValues(value, item.value, payload.value),
+							value: getValues(item.value, payload.value, value),
 						})
 					}
 					schema={schema}
diff --git a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js
index 36f4ef1ff23..ec39142e4da 100644
--- a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js
+++ b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js
@@ -88,6 +88,36 @@ describe('CheckBoxes field', () => {
 		expect(screen.getByRole('checkbox', { name: 'My lol title' })).toBeDisabled();
 	});
 
+	it('should render single disabled checkboxe', () => {
+		// given
+		const singleDisabledSchema = {
+			...schema,
+			titleMap: [
+				{ name: 'My foo title', value: 'foo' },
+				{ name: 'My bar title', value: 'bar', disabled: true },
+				{ name: 'My lol title', value: 'lol' },
+			],
+		};
+
+		// when
+		render(
+			<CheckBoxes
+				id="myForm"
+				isValid
+				errorMessage="My error message"
+				onChange={jest.fn()}
+				onFinish={jest.fn()}
+				schema={singleDisabledSchema}
+			/>,
+		);
+
+		// then
+		expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+		expect(screen.getByRole('checkbox', { name: 'My foo title' })).toBeEnabled();
+		expect(screen.getByRole('checkbox', { name: 'My bar title' })).toBeDisabled();
+		expect(screen.getByRole('checkbox', { name: 'My lol title' })).toBeEnabled();
+	});
+
 	describe('#onChange', () => {
 		it('should trigger callback, adding a value to existing values', async () => {
 			// given

From 612e6291446034d20d0449f451718f456dd58cb7 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Wed, 19 Jul 2023 15:04:36 +0200
Subject: [PATCH 25/34] chore: prepare release (#4810)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/orange-lobsters-poke.md | 5 -----
 packages/forms/CHANGELOG.md        | 6 ++++++
 packages/forms/package.json        | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/orange-lobsters-poke.md

diff --git a/.changeset/orange-lobsters-poke.md b/.changeset/orange-lobsters-poke.md
deleted file mode 100644
index 9de2884c3bd..00000000000
--- a/.changeset/orange-lobsters-poke.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-forms': minor
----
-
-Forms - Allow to disable a single checkbox for checkbox widget list
diff --git a/packages/forms/CHANGELOG.md b/packages/forms/CHANGELOG.md
index f25a70faf0d..b4c0cf55ae8 100644
--- a/packages/forms/CHANGELOG.md
+++ b/packages/forms/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/react-forms
 
+## 9.3.0
+
+### Minor Changes
+
+- 7a9a8db40: Forms - Allow to disable a single checkbox for checkbox widget list
+
 ## 9.2.3
 
 ### Patch Changes
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 0edf98b73fe..5ef1be895ab 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.2.3"
+  "version": "9.3.0"
 }

From bfc02c4fb838ec57892c3db90d78d698daa02bb1 Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 24 Jul 2023 11:59:55 +0200
Subject: [PATCH 26/34] feat(ARCH-720): use design-tokens for colors (#4779)

BREAKING CHANGES please read changeset files
---
 .changeset/angry-moles-happen.md              |   5 +
 .changeset/brave-dancers-unite.md             |   5 +
 .changeset/flat-crabs-visit.md                |   5 +
 .changeset/lovely-months-pretend.md           |   5 +
 .changeset/shaggy-islands-grow.md             |   5 +
 .changeset/strange-ligers-bathe.md            |   5 +
 .changeset/swift-terms-hammer.md              |  33 ++++
 .changeset/wet-dolls-compare.md               |  43 +++++
 .../assets/stylesheets/bootstrap/_labels.scss |  64 +++----
 packages/components/package.json              |   1 +
 .../src/ActionBar/ActionBar.module.scss       |  10 +-
 .../src/ActionList/ActionList.component.js    |   4 +
 .../src/ActionList/ActionList.stories.js      |  13 ++
 .../ActionDropdown/ActionDropdown.module.scss |   3 +-
 .../ActionIconToggle.module.scss              |  32 ++--
 packages/components/src/AppLoader/constant.js |   2 +
 .../src/AppSwitcher/AppSwitcher.module.scss   |   5 +-
 .../components/src/Badge/Badge.module.scss    |  48 ++---
 .../CircularProgress.module.scss              |   7 +-
 .../CollapsiblePanel.module.scss              |  55 +++---
 .../LengthBadge/LengthBadge.module.scss       |   6 +-
 .../src/DataViewer/Core/Tree/Tree.module.scss |   9 +-
 .../Headers/TreeHeader/TreeHeader.module.scss |   9 +-
 .../TreeBranchIcon/TreeBranchIcon.module.scss |   5 +-
 .../ModelViewer/ModelViewer.module.scss       |  30 +--
 .../RecordsViewer/RecordsViewer.module.scss   |  56 ++++--
 .../SimpleTextKeyValue.module.scss            |   7 +-
 .../src/DataViewer/theme.module.scss          |   5 +-
 .../src/Datalist/Datalist.module.scss         |   5 +-
 .../Picker.component.test.js.snap             |  84 ++++-----
 .../InputTimePicker.module.scss               |   3 +-
 .../Validation/Validation.module.scss         |   5 +-
 .../InputDateTimePicker.module.scss           |   4 +-
 .../pickers/DatePicker/DatePicker.module.scss |   8 +-
 .../DateTimePicker/DateTimePicker.module.scss |   3 +-
 .../MonthPicker/MonthPicker.module.scss       |   3 +-
 .../pickers/TimePicker/TimePicker.module.scss |  12 +-
 .../shared/styles/mixins.scss                 |   7 +-
 .../shared/styles/variables.scss              |   4 +-
 .../views/HeaderTitle/HeaderTitle.module.scss |   6 +-
 .../CalendarPicker/CalendarPicker.module.scss |   4 +-
 .../DatePicker/DatePicker.component.js        |   2 -
 .../pickers/DatePicker/DatePicker.module.scss |  12 +-
 .../__snapshots__/DatePicker.test.js.snap     |  84 ++++-----
 .../MonthPicker/MonthPicker.module.scss       |   3 +-
 .../pickers/TimePicker/TimePicker.module.scss |  11 +-
 .../DateTimePickers/shared/styles/mixins.scss |  13 +-
 .../shared/styles/variables.scss              |   4 +-
 .../views/HeaderTitle/HeaderTitle.module.scss |   6 +-
 packages/components/src/Dialog/Dialog.scss    |   5 +-
 .../components/src/Drawer/Drawer.module.scss  |  16 +-
 .../src/EditableText/InlineForm.module.scss   |  28 +--
 .../EditableText/PlainTextTitle.module.scss   |   4 +-
 .../src/Enumeration/Enumeration.module.scss   |   1 +
 .../src/Enumeration/Header/Header.module.scss |   5 +-
 .../Enumeration/Items/Item/Item.module.scss   |  14 +-
 .../src/Enumeration/Items/Items.module.scss   |   1 +
 .../src/FilterBar/FilterBar.module.scss       |  16 +-
 .../src/FormatValue/FormatValue.module.scss   |   3 +-
 .../src/GridLayout/Grid.module.scss           |   5 +-
 .../src/GuidedTour/GuidedTour.module.scss     |   8 +-
 .../src/GuidedTour/GuidedTour.stories.js      |   6 +-
 .../src/HeaderBar/HeaderBar.component.js      |   2 +-
 .../src/HeaderBar/HeaderBar.module.scss       |  29 +--
 .../__snapshots__/HeaderBar.test.js.snap      |   2 +-
 .../src/HttpError/HttpError.module.scss       |  11 +-
 .../JSONSchemaRenderer.module.scss            |  12 +-
 .../Layout/SkipLinks/SkipLinks.module.scss    |   7 +-
 packages/components/src/List/List.module.scss |   3 +-
 .../ListComposition/SortBy/SortBy.module.scss |   9 +-
 .../Toolbar/ListToolbar.module.scss           |  12 +-
 .../ColumnChooser/ColumnChooser.module.scss   |   6 +-
 .../Toolbar/SelectAll/SelectAll.module.scss   |   5 +-
 .../SelectSortBy/SelectSortBy.module.scss     |  10 +-
 .../src/List/Toolbar/Toolbar.module.scss      |  35 ++--
 .../src/ListView/Header/Header.module.scss    |   7 +-
 .../src/ListView/ListView.module.scss         |   3 +-
 .../src/MultiSelect/Dropdown.module.scss      |   9 +-
 .../src/MultiSelect/ItemOption.module.scss    |  16 +-
 .../src/MultiSelect/MultiSelect.module.scss   |   7 +-
 .../src/Notification/Notification.module.scss |  24 +--
 .../JSONLike/JSONLike.module.scss             |  31 ++--
 .../src/ObjectViewer/List/List.module.scss    |   3 +-
 .../src/ObjectViewer/Table/Table.module.scss  |  10 +-
 .../src/PieChart/PieChart.module.scss         |  23 +--
 .../src/Progress/Progress.module.scss         |   8 +-
 .../QualityBar/QualityRatioBar.module.scss    |   1 -
 .../src/RadarChart/RadarChart.component.js    |   4 +-
 .../src/RadarChart/RadarChart.module.scss     |   3 +-
 .../src/RadarChart/RadarChart.stories.js      |  26 +--
 .../__snapshots__/RadarChart.test.js.snap     |   1 +
 .../Resource/Resource.module.scss             |  19 +-
 .../src/ResourceList/ResourceList.module.scss |   3 +-
 .../Toolbar/NameFilter/NameFilter.module.scss |   3 +-
 .../OrderChooser/OrderChooser.module.scss     |   1 -
 .../StateFilter/StateFilter.module.scss       |  15 +-
 .../ResourceList/Toolbar/Toolbar.module.scss  |   3 +-
 .../ResourcePicker/ResourcePicker.module.scss |   7 +-
 .../Rich/HeaderTitle/HeaderTitle.module.scss  |   3 +-
 .../src/Rich/Layout/RichLayout.module.scss    |  11 +-
 .../src/SidePanel/SidePanel.component.js      |  10 +-
 .../src/SidePanel/SidePanel.module.scss       |  89 +++------
 .../__snapshots__/SidePanel.test.js.snap      |   3 +-
 .../src/Skeleton/Skeleton.module.scss         |   4 +-
 .../components/src/Slider/Slider.module.scss  |  26 +--
 .../components/src/Status/Status.module.scss  |  37 ++--
 .../components/src/Status/Status.stories.js   |   4 +
 .../src/Stepper/Stepper.component.module.scss |   7 +-
 .../src/SubHeaderBar/SubHeaderBar.module.scss |  22 ++-
 .../TitleSubHeader/TitleSubHeader.module.scss |   5 +-
 .../components/src/TabBar/TabBar.module.scss  |  14 +-
 .../LabelToggle/LabelToggle.module.scss       |  23 ++-
 .../src/TooltipTrigger/Tooltip.stories.js     |   4 +-
 .../TooltipTrigger/TooltipTrigger.module.scss |   5 +-
 .../src/TreeView/TreeView.module.scss         |   7 +-
 .../TreeViewItem/TreeViewItem.module.scss     |  29 +--
 .../src/Typeahead/Typeahead.module.scss       |  32 ++--
 .../CellTitle/CellTitle.module.scss           |  15 +-
 .../CellTitle/CellTitleActions.module.scss    |   7 +-
 .../HeaderResizable.module.scss               |  12 +-
 .../ListTable/ListTable.module.scss           |  21 +--
 .../RowCollapsiblePanel.module.scss           |   3 +-
 .../RowLarge/RowLarge.module.scss             |  12 +-
 .../RowSelection/RowSelection.module.scss     |  19 +-
 .../src/VirtualizedList/_colors.scss          |   7 -
 .../__snapshots__/SidePanel.test.js.snap      |   3 +-
 .../ColoredBar.component.module.scss          |   4 +-
 .../HorizontalBarChart.cy.tsx                 |   2 +
 .../TooltipCursor.component.module.scss       |   2 -
 .../VerticalBarChart.component.module.scss    |   2 -
 .../VerticalBarChart/VerticalBarChart.cy.tsx  |   4 +
 .../src/components/BarChart/_bar-chart.scss   |  15 +-
 .../BoxPlot/BoxPlot.component.module.scss     |  18 +-
 .../components/GeoChart/GeoChart.module.scss  |  19 +-
 .../KeyValueTooltip.component.module.scss     |   7 +-
 .../LineChart/LineChart.component.tsx         |   3 +-
 .../LineChart/LineChart.module.scss           |  10 +
 .../RangeFilter.component.module.scss         |   6 +
 .../RangeFilter/RangeFilter.component.tsx     |   1 -
 .../DateTimeInputField.component.module.scss  |   1 +
 .../Tooltip/Tooltip.component.module.scss     |   8 +-
 packages/faceted-search/.storybook/preview.js |   1 -
 packages/faceted-search/package.json          |   1 +
 .../BadgeDateForm.component.test.js.snap      |  84 ++++-----
 .../BadgeOperator/BadgeOperator.module.scss   |   3 +-
 .../BadgeSlider/BadgeSlider.module.scss       |   5 +-
 .../Badges/BadgeTags/BadgeTags.module.scss    |   7 +-
 .../FacetedToolbar/FacetedToolbar.module.scss |  15 +-
 .../stories/facetedSearch.stories.js          |  19 --
 packages/forms/package.json                   |   1 +
 packages/forms/src/FormSkeleton.module.scss   |   3 +-
 packages/forms/src/UIForm/UIForm.module.scss  |   5 +-
 .../fields/Comparator/Comparator.module.scss  |   8 +-
 .../__snapshots__/Date.component.test.js.snap |  84 ++++-----
 .../MultiSelectTag/MultiSelectTag.module.scss |   9 +-
 .../fieldsets/Array/ArrayItem.module.scss     |  11 +-
 .../UIForm/fieldsets/Tabs/Tabs.module.scss    |  15 +-
 packages/storybook/.storybook/preview.js      |  14 --
 packages/theme/.sass-lint.yml                 | 169 -----------------
 packages/theme/.stylelintrc.js                |   1 +
 packages/theme/example/index.html             | 154 +++++++---------
 packages/theme/package.json                   |   1 +
 packages/theme/src/theme/_badges.scss         |  12 ++
 packages/theme/src/theme/_breadcrumbs.scss    |  11 +-
 packages/theme/src/theme/_buttons.scss        | 172 +++++++++++-------
 packages/theme/src/theme/_code.scss           |  11 ++
 packages/theme/src/theme/_colors.scss         | 165 ++++++++---------
 packages/theme/src/theme/_dropdowns.scss      |   9 +
 packages/theme/src/theme/_forms.checkbox.scss | 143 +++++++++------
 packages/theme/src/theme/_forms.input.scss    |  27 ++-
 packages/theme/src/theme/_forms.label.scss    |   8 +-
 packages/theme/src/theme/_forms.legend.scss   |   3 +
 packages/theme/src/theme/_forms.radio.scss    |  18 +-
 packages/theme/src/theme/_forms.scss          |  10 +-
 packages/theme/src/theme/_forms.select.scss   |  14 +-
 packages/theme/src/theme/_forms.switch.scss   |  24 ++-
 packages/theme/src/theme/_input-groups.scss   |   5 +
 packages/theme/src/theme/_labels.scss         |  73 ++++++--
 packages/theme/src/theme/_list-group.scss     |  25 +++
 packages/theme/src/theme/_modals.scss         |  13 +-
 packages/theme/src/theme/_navbar.scss         |  32 ++++
 packages/theme/src/theme/_navs.scss           |  51 ++++--
 packages/theme/src/theme/_pager.scss          |  15 ++
 packages/theme/src/theme/_pagination.scss     |  28 +++
 packages/theme/src/theme/_panels.scss         |  59 ++++++
 packages/theme/src/theme/_popovers.scss       |  39 ++++
 packages/theme/src/theme/_tables.scss         |  89 ++++++++-
 packages/theme/src/theme/_tooltip.scss        |  20 ++
 packages/theme/src/theme/_type.scss           |  61 ++++++-
 packages/theme/src/theme/_variables.scss      |  67 +++----
 packages/theme/src/theme/_wells.scss          |  11 ++
 packages/theme/src/theme/alerts.scss          |  41 +++++
 packages/theme/src/theme/theme.scss           |   9 +
 .../config/loader.js                          |   2 +
 .../.storybook-templates/preview.js           |  14 +-
 195 files changed, 2089 insertions(+), 1580 deletions(-)
 create mode 100644 .changeset/angry-moles-happen.md
 create mode 100644 .changeset/brave-dancers-unite.md
 create mode 100644 .changeset/flat-crabs-visit.md
 create mode 100644 .changeset/lovely-months-pretend.md
 create mode 100644 .changeset/shaggy-islands-grow.md
 create mode 100644 .changeset/strange-ligers-bathe.md
 create mode 100644 .changeset/swift-terms-hammer.md
 create mode 100644 .changeset/wet-dolls-compare.md
 delete mode 100644 packages/components/src/VirtualizedList/_colors.scss
 delete mode 100644 packages/theme/.sass-lint.yml
 create mode 100644 packages/theme/.stylelintrc.js
 create mode 100644 packages/theme/src/theme/_badges.scss
 create mode 100644 packages/theme/src/theme/_code.scss
 create mode 100644 packages/theme/src/theme/_list-group.scss
 create mode 100644 packages/theme/src/theme/_pager.scss
 create mode 100644 packages/theme/src/theme/_pagination.scss
 create mode 100644 packages/theme/src/theme/_panels.scss
 create mode 100644 packages/theme/src/theme/_popovers.scss
 create mode 100644 packages/theme/src/theme/_wells.scss
 create mode 100644 packages/theme/src/theme/alerts.scss

diff --git a/.changeset/angry-moles-happen.md b/.changeset/angry-moles-happen.md
new file mode 100644
index 00000000000..23370a7ea1f
--- /dev/null
+++ b/.changeset/angry-moles-happen.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': major
+---
+
+feat: use design-tokens for colors
diff --git a/.changeset/brave-dancers-unite.md b/.changeset/brave-dancers-unite.md
new file mode 100644
index 00000000000..6ae4270ca3e
--- /dev/null
+++ b/.changeset/brave-dancers-unite.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-stepper': major
+---
+
+feat: upgrade major dependency @talend/react-components
diff --git a/.changeset/flat-crabs-visit.md b/.changeset/flat-crabs-visit.md
new file mode 100644
index 00000000000..2b47fa68dab
--- /dev/null
+++ b/.changeset/flat-crabs-visit.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-dataviz': major
+---
+
+feat: colors now use design-tokens
diff --git a/.changeset/lovely-months-pretend.md b/.changeset/lovely-months-pretend.md
new file mode 100644
index 00000000000..3ca06ba3044
--- /dev/null
+++ b/.changeset/lovely-months-pretend.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-react-webpack': patch
+---
+
+fix: make the static AppLoader use design token if available
diff --git a/.changeset/shaggy-islands-grow.md b/.changeset/shaggy-islands-grow.md
new file mode 100644
index 00000000000..be0ed73400a
--- /dev/null
+++ b/.changeset/shaggy-islands-grow.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-storybook-lib': minor
+---
+
+feat: add design token update in the toolbar
diff --git a/.changeset/strange-ligers-bathe.md b/.changeset/strange-ligers-bathe.md
new file mode 100644
index 00000000000..dbd739224b4
--- /dev/null
+++ b/.changeset/strange-ligers-bathe.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': major
+---
+
+All colors are now based on design-tokens
diff --git a/.changeset/swift-terms-hammer.md b/.changeset/swift-terms-hammer.md
new file mode 100644
index 00000000000..577b8fe8958
--- /dev/null
+++ b/.changeset/swift-terms-hammer.md
@@ -0,0 +1,33 @@
+---
+'@talend/bootstrap-theme': major
+---
+
+Use @talend/design-tokens for all colors
+
+This is considered as a BREAKING CHANGE.
+
+To be aligned with this theme you should:
+
+* replace all hardcoded colors used in your project and use `@talend/design-tokens`
+* test your application with the dark theme
+
+We have updated the following bootstrap styles:
+* Button
+* Table
+* Form (control)
+* Navbar
+* Modal
+* Tooltip
+* Popover
+* Alert
+* Label
+* Breadcrumb
+* Tabs
+* Progress bar
+* Panel
+* Weel
+* List group
+* Pagination
+* Badge
+* Pills
+
diff --git a/.changeset/wet-dolls-compare.md b/.changeset/wet-dolls-compare.md
new file mode 100644
index 00000000000..878538afa90
--- /dev/null
+++ b/.changeset/wet-dolls-compare.md
@@ -0,0 +1,43 @@
+---
+'@talend/react-components': major
+---
+
+Style now use design tokens instead of bootstrap sass variables
+
+We have updated the following components:
+
+* ActionBar
+* ActionIconToggle
+* AppLoader
+* Badge
+* CollapsiblePanel
+* Datalist
+* DataViewer
+* DateTimePickers + Legacy
+* Drawer
+* EditableText
+* Enumeration (bug on buttons)
+* FilterBar
+* FormatValue
+* GuidedTour
+* GridLayout aka Dashboard
+* HeaderBar
+* List (Virtualized and Composition)
+* ListView
+* MultiSelect
+* Notification
+* ObjectViewer
+* PieChart
+* Progress
+* RadarChart
+* ResourceList
+* ResourcePicker
+* RichLayout
+* Skeleton
+* Slider
+* Status
+* SubHeaderBar
+* Toggle
+* Tooltip
+* TreeView
+* Typeahead
\ No newline at end of file
diff --git a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss
index f7f30139232..fdb65de9c89 100644
--- a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss
+++ b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss
@@ -3,64 +3,64 @@
 // --------------------------------------------------
 
 .label {
-  display: inline;
-  padding: .2em .6em .3em;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  color: $label-color;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
+	display: inline;
+	padding: 0.2em 0.6em 0.3em;
+	font-size: 75%;
+	font-weight: 700;
+	line-height: 1;
+	color: $label-color;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: baseline;
+	border-radius: 0.25em;
 
-  // [converter] extracted a& to a.label
+	// [converter] extracted a& to a.label
 
-  // Empty labels collapse automatically (not available in IE8)
-  &:empty {
-    display: none;
-  }
+	// Empty labels collapse automatically (not available in IE8)
+	&:empty {
+		display: none;
+	}
 
-  // Quick fix for labels in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
+	// Quick fix for labels in buttons
+	.btn & {
+		position: relative;
+		top: -1px;
+	}
 }
 
 // Add hover effects, but only for links
 a.label {
-  &:hover,
-  &:focus {
-    color: $label-link-hover-color;
-    text-decoration: none;
-    cursor: pointer;
-  }
+	&:hover,
+	&:focus {
+		color: $label-link-hover-color;
+		text-decoration: none;
+		cursor: pointer;
+	}
 }
 
 // Colors
 // Contextual variations (linked labels get darker on :hover)
 
 .label-default {
-  @include label-variant($label-default-bg);
+	@include label-variant($label-default-bg);
 }
 
 .label-primary {
-  @include label-variant($label-primary-bg);
+	@include label-variant($label-primary-bg);
 }
 
 .label-success {
-  @include label-variant($label-success-bg);
+	@include label-variant($label-success-bg);
 }
 
 .label-info {
-  @include label-variant($label-info-bg);
+	@include label-variant($label-info-bg);
 }
 
 .label-warning {
-  @include label-variant($label-warning-bg);
+	@include label-variant($label-warning-bg);
 }
 
 .label-danger {
-  @include label-variant($label-danger-bg);
+	@include label-variant($label-danger-bg);
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 57f352f5ed2..257370df58b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/design-tokens": "^2.7.3",
     "@talend/react-a11y": "^1.1.0",
     "@talend/icons": "^6.58.1",
     "@talend/utils": "^2.5.1",
diff --git a/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss
index a49aff48c5d..308b9e092c5 100644
--- a/packages/components/src/ActionBar/ActionBar.module.scss
+++ b/packages/components/src/ActionBar/ActionBar.module.scss
@@ -1,11 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-action-bar-background-color: $wild-sand !default;
 $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default;
 
 .tc-actionbar-container {
 	padding: 0 $padding-small;
-	background: $tc-action-bar-background-color;
+	background: tokens.$coral-color-neutral-background-medium;
 	width: 100%;
 	display: flex;
 
@@ -61,19 +61,19 @@ $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default;
 
 		&:global(.separated)::after {
 			content: '|';
-			color: $silver;
+			color: tokens.$coral-color-neutral-text;
 			margin-left: $padding-large;
 		}
 	}
 
 	:global(.divider) {
-		color: $silver;
+		color: tokens.$coral-color-neutral-text;
 		margin-right: $padding-normal;
 	}
 }
 
 :global(.modal-footer) .tc-actionbar-container {
-	background-color: $wild-sand;
+	background-color: transparent;
 
 	.navbar-left > *,
 	.navbar-center > *,
diff --git a/packages/components/src/ActionList/ActionList.component.js b/packages/components/src/ActionList/ActionList.component.js
index 9e3d44f8339..278a707ecc8 100644
--- a/packages/components/src/ActionList/ActionList.component.js
+++ b/packages/components/src/ActionList/ActionList.component.js
@@ -88,6 +88,9 @@ function ActionList(props) {
 				theme['tc-action-list'],
 				'tc-action-list',
 				className,
+				{
+					'nav-inverse': props.reverse,
+				},
 			)}
 		>
 			{actions.map((action, index) => (
@@ -135,6 +138,7 @@ if (process.env.NODE_ENV !== 'production') {
 		onSelect: PropTypes.func,
 		selected: actionPropType,
 		className: PropTypes.string,
+		reverse: PropTypes.bool,
 	};
 }
 
diff --git a/packages/components/src/ActionList/ActionList.stories.js b/packages/components/src/ActionList/ActionList.stories.js
index 6810a0aeec5..c8660131739 100644
--- a/packages/components/src/ActionList/ActionList.stories.js
+++ b/packages/components/src/ActionList/ActionList.stories.js
@@ -58,6 +58,19 @@ export const Default = () => (
 	</div>
 );
 
+export const Reverse = () => (
+	<div style={{ display: 'inline-table' }}>
+		<ActionList
+			id="context"
+			actions={actions}
+			onSelect={action('onItemSelect')}
+			onToggleDock={action('onToggleDock')}
+			tooltipPlacement="top"
+			reverse
+		/>
+	</div>
+);
+
 export const WithCustomClassNames = () => (
 	<div>
 		<p>You can add your custom classnames to the container and items</p>
diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss
index 245bd5646cd..35f21d9c78d 100644
--- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss
+++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-dropdown-loader-padding: $padding-small !default;
 $tc-dropdown-button-right-padding: 0.8rem;
@@ -54,7 +55,7 @@ $tc-dropdown-button-right-padding: 0.8rem;
 		margin: -$tc-dropdown-loader-padding 0;
 		padding: $tc-dropdown-loader-padding 0;
 		text-align: center;
-		background: $concrete;
+		background: tokens.$coral-color-neutral-background-medium;
 
 		:global(.divider) + & {
 			margin: -($tc-dropdown-loader-padding - 1px) 0;
diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss
index c8844608064..7a11d2c0127 100644
--- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss
+++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss
@@ -1,10 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-icon-toggle-size: 2.4rem !default;
 $tc-icon-toggle-icon-size: $svg-sm-size !default;
-$tc-icon-toggle-border: 1px solid $gray;
+$tc-icon-toggle-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border !default;
 $tc-icon-toggle-tick-size: 12px !default;
-$tc-icon-toggle-tick-border: 1px solid $white;
 
 @mixin tc-icon-toggle($btn-size: $tc-icon-toggle-size, $icon-size: $tc-icon-toggle-icon-size) {
 	height: $btn-size;
@@ -32,7 +32,7 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 	padding: 0;
 
 	svg {
-		color: $gray;
+		color: tokens.$coral-color-neutral-icon-weak;
 	}
 
 	&,
@@ -43,10 +43,10 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 	&[disabled] {
 		&:hover,
 		&:focus {
-			border-color: $scooter;
+			border-color: tokens.$coral-color-accent-text;
 
 			svg {
-				color: $scooter;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
@@ -54,26 +54,30 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 	&:hover,
 	&:active {
 		box-shadow: none;
-		border-color: $scooter;
+		border-color: tokens.$coral-color-accent-text;
 		background-color: transparent;
 
 		svg {
-			color: $scooter;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 
 	&.active {
-		background-color: $brand-primary;
-		border-color: $brand-primary;
+		background-color: tokens.$coral-color-accent-background-strong;
+		border-color: tokens.$coral-color-accent-background;
 
 		svg {
-			color: white;
+			color: tokens.$coral-color-accent-text-weak;
 		}
 
 		&:hover:not([disabled]),
 		&:active {
-			background-color: $scooter;
-			border-color: $scooter;
+			background-color: tokens.$coral-color-accent-background-hover;
+			border-color: tokens.$coral-color-accent-background-hover;
+
+			svg {
+				color: tokens.$coral-color-accent-text;
+			}
 		}
 	}
 
@@ -85,7 +89,7 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 		border-radius: calc(#{$tc-icon-toggle-tick-size} / 2);
 		right: -0.4rem;
 		top: -0.4rem;
-		background: $scooter;
-		border: $tc-icon-toggle-tick-border;
+		background: tokens.$coral-color-accent-text;
+		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	}
 }
diff --git a/packages/components/src/AppLoader/constant.js b/packages/components/src/AppLoader/constant.js
index b8e703877df..d5c7d76f0d5 100644
--- a/packages/components/src/AppLoader/constant.js
+++ b/packages/components/src/AppLoader/constant.js
@@ -12,6 +12,7 @@ body {
   height: 100vh;
   width: 100vw;
   background: #f6f6f6;
+  background: var(--coral-color-neutral-background-medium, #f6f6f6);
 }
 
 .tc-app-loader-icon {
@@ -40,6 +41,7 @@ body {
   height: 100%;
   opacity: 0;
   border-color: #ababab;
+  border-color: var(--coral-color-neutral-border, #ababab);
   opacity: 1;
   animation: app-loader-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
 }
diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.scss b/packages/components/src/AppSwitcher/AppSwitcher.module.scss
index 8c80f162bfe..a2cfe3a90b2 100644
--- a/packages/components/src/AppSwitcher/AppSwitcher.module.scss
+++ b/packages/components/src/AppSwitcher/AppSwitcher.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-app-switcher {
 	:global(.tc-svg-icon:first-child) {
@@ -19,7 +20,7 @@
 		display: block;
 		width: 1px;
 		height: $font-size-large;
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background;
 	}
 
 	&.hasIcon {
@@ -35,7 +36,7 @@
 					height: $navbar-brand-logo-height;
 					width: $navbar-brand-logo-height;
 					background-repeat: no-repeat;
-					background-color: white;
+					background-color: tokens.$coral-color-neutral-background;
 				}
 			}
 
diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss
index 08bb5d94c2e..161cfc73e34 100644
--- a/packages/components/src/Badge/Badge.module.scss
+++ b/packages/components/src/Badge/Badge.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
 $tc-badge-large-label-font-size: 1.4rem !default;
 $tc-badge-large-label-font-weight: normal !default;
@@ -22,10 +23,11 @@ $tc-badge-small-padding: 0.8rem;
 
 $tc-badge-disabled-opacity: 0.62;
 
-@mixin colored-badge($background-color, $color) {
+@mixin colored-badge($background-color, $color, $border) {
 	.tc-badge-button {
 		background-color: $background-color;
 		color: $color;
+		border-color: $border;
 
 		.tc-badge-separator {
 			background-color: $color;
@@ -49,20 +51,20 @@ $tc-badge-disabled-opacity: 0.62;
 
 	.tc-badge-button {
 		display: inline-flex;
-		background-color: rgba($wild-sand, 0.5);
+		background-color: tokens.$coral-color-neutral-background-medium;
 		border: solid 1px;
-		border-color: $gallery;
+		border-color: tokens.$coral-color-neutral-border-weak;
 		border-radius: 25px;
 		max-width: 100%;
 
 		&.tc-badge-white {
-			background-color: $white;
+			background-color: tokens.$coral-color-neutral-background;
 		}
 
 		.tc-badge-category {
 			flex-grow: 0;
 			flex-shrink: 0;
-			color: black;
+			color: tokens.$coral-color-neutral-text;
 			max-width: 110px;
 			overflow: hidden;
 			white-space: pre;
@@ -74,7 +76,7 @@ $tc-badge-disabled-opacity: 0.62;
 			flex-shrink: 0;
 			height: 12px;
 			width: 1px;
-			background-color: $gallery;
+			background-color: tokens.$coral-color-neutral-background-medium;
 			margin: $padding-smaller;
 
 			&.tc-badge-separator-icon {
@@ -92,13 +94,13 @@ $tc-badge-disabled-opacity: 0.62;
 
 			&-text,
 			&-text-with-categ {
-				color: black;
+				color: tokens.$coral-color-neutral-text;
 				text-overflow: ellipsis;
 				overflow: hidden;
 			}
 
 			&-icon {
-				color: black;
+				color: tokens.$coral-color-neutral-icon;
 				flex-grow: 0;
 				flex-shrink: 0;
 				margin-left: $padding-smaller;
@@ -115,12 +117,12 @@ $tc-badge-disabled-opacity: 0.62;
 			padding-left: $padding-smaller;
 
 			svg {
-				color: $slate-gray;
+				color: tokens.$coral-color-neutral-icon-weak;
 				display: block;
 				margin: 0;
 
 				&:hover {
-					color: $lochmara;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 		}
@@ -132,7 +134,7 @@ $tc-badge-disabled-opacity: 0.62;
 			padding: 0;
 			padding-left: $padding-smaller;
 			text-transform: none;
-			color: black;
+			color: tokens.$coral-color-neutral-text;
 
 			span {
 				max-width: 16rem;
@@ -146,7 +148,7 @@ $tc-badge-disabled-opacity: 0.62;
 				margin: $padding-smaller;
 
 				&:hover {
-					color: $lochmara;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 
@@ -280,7 +282,7 @@ $tc-badge-disabled-opacity: 0.62;
 
 	&-aslink {
 		.tc-badge-button {
-			border-color: rgba($lochmara, 0.25);
+			border-color: tokens.$coral-color-accent-border;
 
 			.tc-badge-category {
 				display: none;
@@ -293,14 +295,14 @@ $tc-badge-disabled-opacity: 0.62;
 			.tc-badge-label {
 				.tc-badge-label-text,
 				.tc-badge-label-icon {
-					color: $lochmara;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 		}
 
 		&:hover:not(.tc-badge-disabled) {
 			.tc-badge-button {
-				border-color: rgba($lochmara, 1);
+				border-color: tokens.$coral-color-accent-border;
 			}
 		}
 	}
@@ -310,7 +312,7 @@ $tc-badge-disabled-opacity: 0.62;
 			.tc-badge-label-text,
 			.tc-badge-label-text-with-categ,
 			.tc-badge-label-icon {
-				color: $lochmara;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
@@ -320,7 +322,7 @@ $tc-badge-disabled-opacity: 0.62;
 			.tc-badge-label-text,
 			.tc-badge-label-text-with-categ,
 			.tc-badge-label-icon {
-				color: $lochmara;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
@@ -332,30 +334,30 @@ $tc-badge-disabled-opacity: 0.62;
 	}
 
 	&--valid {
-		@include colored-badge(tint($rio-grande, 70%), shade($rio-grande, 30%));
+		@include colored-badge(tokens.$coral-color-success-background, tokens.$coral-color-success-text, tokens.$coral-color-success-border);
 	}
 
 	&--invalid {
-		@include colored-badge(tint($chestnut-rose, 70%), shade($chestnut-rose, 30%));
+		@include colored-badge(tokens.$coral-color-danger-background, tokens.$coral-color-danger-text, tokens.$coral-color-danger-border);
 	}
 
 	&--empty {
-		@include colored-badge($alto, $dove-gray);
+		@include colored-badge(tokens.$coral-color-neutral-background-medium, tokens.$coral-color-neutral-text, tokens.$coral-color-neutral-border);
 	}
 
 	&--pattern {
-		@include colored-badge(tint($jaffa, 70%), shade($jaffa, 30%));
+		@include colored-badge(tokens.$coral-color-warning-background, tokens.$coral-color-warning-text, tokens.$coral-color-warning-border);
 	}
 
 	&--value {
-		@include colored-badge(tint($lochmara, 70%), shade($lochmara, 30%));
+		@include colored-badge(tokens.$coral-color-accent-background, tokens.$coral-color-accent-text, tokens.$coral-color-accent-border);
 	}
 
 	&-dropdown {
 		.tc-badge-button {
 			&:not(.tc-badge-disabled) {
 				&:global(.ally-focus-within) {
-					border-color: $lochmara;
+					border-color: tokens.$coral-color-accent-border;
 				}
 			}
 		}
diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss
index 3adb678a92d..c7aeb38422e 100644
--- a/packages/components/src/CircularProgress/CircularProgress.module.scss
+++ b/packages/components/src/CircularProgress/CircularProgress.module.scss
@@ -1,7 +1,8 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // CircularProgress styles
-$tc-circular-progress-light-fill: #eee !default;
+$tc-circular-progress-light-fill: tokens.$coral-color-neutral-text-inverted !default;
 $tc-circular-progress-small: 1.2rem;
 $tc-circular-progress-regular: 2rem;
 $tc-circular-progress-large: 4rem;
@@ -20,13 +21,13 @@ $tc-circular-progress-stroke-width: 5;
 .animate {
 	animation: rotate 2s linear infinite;
 
-	& .path {
+	.path {
 		animation: dash 1.3s ease-in-out infinite;
 	}
 }
 
 .loaderlight {
-	& .path {
+	.path {
 		stroke: $tc-circular-progress-light-fill;
 	}
 }
diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
index c0400658cab..ca6827da181 100644
--- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
+++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
@@ -1,12 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-collapsible-panel-padding-smaller: $padding-smaller !default;
 $tc-collapsible-panel-padding-normal: $padding-normal !default;
 $tc-collapsible-panel-padding-larger: $padding-larger !default;
-$tc-collapsible-panel-btn-color: #555964;
-$tc-collapsible-descriptive-panel-content-description-color: $gray !default;
-$tc-toggle-color: #555964 !default;
-$tc-skeleton-background-color: #DFDFDF !default;
 
 @mixin type-col($width: 100%) {
 	flex-basis: $width;
@@ -23,7 +20,7 @@ $tc-skeleton-background-color: #DFDFDF !default;
 @mixin col-style {
 	> :global(.btn) {
 		line-height: 1em;
-		color: $tc-collapsible-panel-btn-color;
+		color: tokens.$coral-color-accent-text;
 	}
 
 	&.col-4 {
@@ -64,7 +61,7 @@ $tc-skeleton-background-color: #DFDFDF !default;
 	position: relative;
 
 	&.selected {
-		border-left: 5px solid $brand-primary;
+		border-left: 5px solid tokens.$coral-color-accent-border;
 		padding-left: 1px;
 	}
 
@@ -88,59 +85,59 @@ $tc-skeleton-background-color: #DFDFDF !default;
 
 	&.info {
 		:global(.panel-heading) {
-			border-left-color: $brand-info;
+			border-left-color: tokens.$coral-color-accent-text;
 		}
 
 		:global(.tc-status-label) {
-			color: $brand-info;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 
 	&.success {
 		:global(.panel-heading) {
-			border-left-color: $brand-success;
+			border-left-color: tokens.$coral-color-success-text;
 		}
 
 		:global(.tc-status-label) {
-			color: $brand-success;
+			color: tokens.$coral-color-success-text;
 		}
 	}
 
 	&.danger {
-		border-color: $brand-danger;
+		border-color: tokens.$coral-color-danger-text;
 
 		:global(.panel-heading) {
-			border-color: $brand-danger;
+			border-color: tokens.$coral-color-danger-text;
 		}
 
 		:global(.tc-status-label) {
-			color: $brand-danger;
+			color: tokens.$coral-color-danger-text;
 		}
 	}
 
 	&.muted {
 		:global(.panel-heading) {
-			border-left-color: $gray;
+			border-left-color: tokens.$coral-color-neutral-text-disabled;
 		}
 
 		:global(.tc-status-label) {
-			color: $gray;
+			color: tokens.$coral-color-neutral-text-disabled;
 		}
 	}
 
 	&.warning {
 		:global(.panel-heading) {
-			border-left-color: $brand-warning;
+			border-left-color: tokens.$coral-color-warning-text;
 		}
 
 		:global(.tc-status-label) {
-			color: $brand-warning;
+			color: tokens.$coral-color-warning-text;
 		}
 	}
 
 	&.skeleton {
 		:global(.panel-heading) {
-			border-color: $tc-skeleton-background-color;
+			border-color: tokens.$coral-color-neutral-background-strong;
 		}
 	}
 
@@ -165,6 +162,10 @@ $tc-skeleton-background-color: #DFDFDF !default;
 			width: 100%;
 			padding-right: $padding-smaller;
 
+			&:hover {
+				background: transparent;
+			}
+
 			> * {
 				@include col-style;
 				padding: 0;
@@ -202,7 +203,7 @@ $tc-skeleton-background-color: #DFDFDF !default;
 			}
 
 			&:hover {
-				background: $white;
+				background: tokens.$coral-color-neutral-background;
 				cursor: pointer;
 
 				.tc-status-label {
@@ -264,30 +265,22 @@ $tc-skeleton-background-color: #DFDFDF !default;
 
 	:global(.toggle) {
 		svg {
-			fill: $tc-toggle-color;
+			fill: tokens.$coral-color-accent-text;
 			height: 10px;
 			width: 10px;
 		}
 	}
 
-	&.open {
-		:global(.toggle) {
-			svg {
-				fill: $white;
-			}
-		}
-	}
-
 	&.selected {
 		.title,
 		.detail {
-			color: $brand-primary;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 
 	:global(.panel-heading) {
 		padding: 0;
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background-medium;
 		border-color: transparent;
 	}
 
@@ -338,7 +331,7 @@ $tc-skeleton-background-color: #DFDFDF !default;
 			.content-description {
 				white-space: pre-wrap;
 				padding-top: 5px;
-				color: $tc-collapsible-descriptive-panel-content-description-color;
+				color: tokens.$coral-color-neutral-text-weak;
 			}
 		}
 	}
diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss
index 2056ad49e50..db8c830f330 100644
--- a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss
+++ b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss
@@ -1,8 +1,8 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-length-badge {
-	background-color: $gallery;
-	color: $dark-silver;
+	background-color: tokens.$coral-color-neutral-background-medium;
+	color: tokens.$coral-color-neutral-text-weak;
 	font-size: 10px;
 	padding: 2px 10px;
 	top: 0;
diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss
index 2f997c64c12..9fe43b9e9b1 100644
--- a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss
+++ b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 :global(.tc-model .tc-tree) {
 	overflow: auto;
@@ -15,11 +16,15 @@
 	}
 
 	&-node-border {
-		border-left: 1px solid $alto;
+		border-left: 1px solid tokens.$coral-color-neutral-border;
 		margin-left: calc($svg-sm-size / 2);
 
 		&:hover {
-			border-left-color: $silver-chalice;
+			border-left-color: tokens.$coral-color-neutral-border;
 		}
 	}
+
+	li:hover {
+		background-color: tokens.$coral-color-neutral-background-strong;
+	}
 }
diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss
index 8d15a682f73..7652522eb05 100644
--- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss
+++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss
@@ -1,11 +1,12 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $default-height: 4rem !default;
 
 .tc-tree-header {
 	align-items: center;
-	border-bottom: 0.1rem solid $alto;
-	color: $dove-gray;
+	border-bottom: 0.1rem solid tokens.$coral-color-neutral-border;
+	color: tokens.$coral-color-neutral-text;
 	display: flex;
 	font-weight: 600;
 	height: $default-height;
@@ -17,7 +18,7 @@ $default-height: 4rem !default;
 		justify-content: space-between;
 
 		&-icon {
-			color: $dark-silver;
+			color: tokens.$coral-color-neutral-text;
 			text-transform: none;
 
 			:global(.tc-svg-icon) {
@@ -29,7 +30,7 @@ $default-height: 4rem !default;
 		:global(.btn) {
 			&:focus,
 			&:hover {
-				color: $scooter;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss
index 03c9b9d7264..6ad38e2de61 100644
--- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss
+++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-tree-branch-icon {
 	display: flex;
@@ -17,12 +18,12 @@
 		background: transparent;
 		border: none;
 		padding: 0;
-		color: $brand-primary;
+		color: tokens.$coral-color-accent-text;
 		display: flex;
 
 		&:focus,
 		&:hover {
-			color: $scooter;
+			color: tokens.$coral-color-accent-text-hover;
 		}
 	}
 }
diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss
index 0be2b25b7bd..b2adbed63ea 100644
--- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss
+++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss
@@ -1,21 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
-$background-hover: rgba($dark-silver, 0.1) !default;
-$background-highlight: rgba($scooter, 0.1) !default;
 $model-node-height: 3rem !default;
 
-@mixin selection($background-color) {
-	background: $background-color;
-	bottom: 0;
-	content: ' ';
-	left: -100%;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
 .tc-model {
 	display: flex;
 	flex-direction: column;
@@ -26,7 +14,7 @@ $model-node-height: 3rem !default;
 	&-leaf,
 	&-branch {
 		:global(.tc-simple-text-value) {
-			color: $dark-silver;
+			color: tokens.$coral-color-neutral-text-weak;
 		}
 
 		&-padding-left {
@@ -41,18 +29,6 @@ $model-node-height: 3rem !default;
 			position: absolute;
 			top: 0;
 			width: 100%;
-
-			&:hover {
-				&::before {
-					@include selection($background-hover);
-				}
-			}
-
-			&-highlighted {
-				&::before {
-					@include selection($background-highlight);
-				}
-			}
 		}
 	}
 
@@ -69,7 +45,7 @@ $model-node-height: 3rem !default;
 			&:focus,
 			&:hover {
 				:global(.tc-tree-branch-icon-caret) {
-					color: $scooter;
+					color: tokens.$coral-color-accent-text-hover;
 				}
 			}
 		}
diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss
index 9bfdaed45e9..258026c7233 100644
--- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss
+++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss
@@ -1,7 +1,7 @@
+/* stylelint-disable declaration-no-important */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$background-hover: rgba($dark-silver, 0.1) !default;
-$background-highlight: rgba($scooter, 0.1) !default;
 $hightlight-height: 2.2rem !default;
 $records-node-height: $hightlight-height !default;
 $border-size: 0.1rem;
@@ -14,14 +14,13 @@ $border-size: 0.1rem;
 	position: absolute;
 	right: 0;
 	top: 0;
-	height: $records-node-height;
-	pointer-events: none;
+	z-index: -1;
 }
 
 .tc-records-viewer {
 	display: flex;
 	flex-direction: column;
-	background: $concrete;
+	background: tokens.$coral-color-neutral-background-medium;
 	height: 100%;
 
 	&-tree {
@@ -31,12 +30,14 @@ $border-size: 0.1rem;
 		:global(.ReactVirtualized__Grid__innerScrollContainer) {
 			overflow: initial !important;
 		}
+
 		:global(.tc-svg-icon) {
 			height: 1.2rem;
 			width: 1.2rem;
 			margin: 0;
 			vertical-align: baseline;
 		}
+
 		&-border {
 			border-bottom: $border-size solid $alto;
 		}
@@ -62,10 +63,13 @@ $border-size: 0.1rem;
 
 		&-highlighted {
 			&::before {
-				@include selection($background-highlight);
+				@include selection(tokens.$coral-color-accent-background);
 			}
 		}
+
+		/* stylelint-disable-next-line order/order */
 		min-height: $records-node-height;
+
 		&-quality {
 			display: inline-flex;
 			margin-left: -$padding-larger;
@@ -74,42 +78,48 @@ $border-size: 0.1rem;
 			position: absolute;
 		}
 	}
+
 	&-branch {
 		flex-direction: column;
 		justify-content: center;
 		margin-left: 12px;
 
 		&-highlighted::before {
-			@include selection($background-highlight);
+			@include selection(tokens.$coral-color-accent-background);
 		}
+
 		&-content {
 			position: relative;
 			align-items: center;
 			display: inline-flex;
 			height: $records-node-height;
+
 			:global(.tc-length-badge) {
 				margin-left: 10px;
 			}
 
 			&:hover {
 				&::before {
-					@include selection($background-hover);
+					@include selection(tokens.$coral-color-neutral-background-strong);
 				}
+
 				:global(.tc-records-viewer-branch-icon) {
-					color: $scooter;
+					color: tokens.$coral-color-accent-text;
 				}
+
 				:global(.tc-tree-branch-icon-caret) {
-					color: $scooter;
+					color: tokens.$coral-color-accent-text;
 				}
+
 				:global(.tc-length-badge) {
-					color: $scooter;
-					background-color: $white;
+					color: tokens.$coral-color-accent-text;
+					background-color: tokens.$coral-color-neutral-background;
 				}
 			}
 		}
 
 		&-icon {
-			color: $brand-primary;
+			color: tokens.$coral-color-accent-text;
 			height: $svg-sm-size;
 			width: $svg-sm-size;
 		}
@@ -118,10 +128,11 @@ $border-size: 0.1rem;
 			display: inline-flex;
 			margin-left: $padding-small;
 			z-index: 1;
+
 			&:focus,
 			&:hover {
 				&::before {
-					@include selection($background-hover);
+					@include selection(tokens.$coral-color-neutral-background-strong);
 					pointer-events: none;
 				}
 			}
@@ -130,7 +141,7 @@ $border-size: 0.1rem;
 }
 
 @mixin chevron($color) {
-	border: 1px solid $scooter;
+	border: 1px solid tokens.$coral-color-accent-border;
 	padding: 2px;
 	border-radius: 10px;
 	color: $color;
@@ -140,29 +151,34 @@ $border-size: 0.1rem;
 	position: absolute;
 	left: -1.7rem;
 	margin-right: $padding-smaller;
+
 	&-chevron {
 		padding: 0;
 		line-height: initial;
 		min-height: initial;
+
 		svg {
-			@include chevron($scooter);
+			@include chevron(tokens.$coral-color-accent-text);
 		}
+
 		&-filled {
 			svg {
-				@include chevron($white);
-				background-color: $scooter;
+				@include chevron(tokens.$coral-color-accent-text-weak);
+				background-color: tokens.$coral-color-accent-background-strong;
 			}
 		}
 	}
+
 	:global(.tc-svg-anchor) {
 		background: transparent;
 		border: none;
 		padding: 0;
-		color: $brand-primary;
+		color: tokens.$coral-color-accent-text;
 		display: flex;
+
 		&:focus,
 		&:hover {
-			color: $scooter;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 }
diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss
index 9da7ca989f7..93b7a128c47 100644
--- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss
+++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-simple-text {
 	display: flex;
@@ -14,7 +15,7 @@
 		margin-right: $padding-smaller;
 		white-space: nowrap;
 		flex-shrink: 1;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text-weak;
 		vertical-align: top;
 	}
 
@@ -44,12 +45,12 @@
 
 	:global(.td-default-cell) {
 		display: inline-block;
-		color: $brand-primary;
+		color: tokens.$coral-color-accent-text;
 		font-family: 'Inconsolata';
 	}
 
 	&-type {
-		color: $dark-silver;
+		color: tokens.$coral-color-neutral-text;
 		opacity: 0.75;
 		margin-left: $padding-smaller;
 	}
diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss
index 5a76e7e2a8c..2f76a7be1ca 100644
--- a/packages/components/src/DataViewer/theme.module.scss
+++ b/packages/components/src/DataViewer/theme.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-layout-skeleton-width: 9.6rem !default;
 $tc-layout-skeleton-height: 9.6rem !default;
@@ -21,11 +22,11 @@ $tc-layout-skeleton-height: 9.6rem !default;
 
 	&-left,
 	&-right {
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 
 	&-left {
-		border-right: 0.5rem solid white;
+		border-right: 0.5rem solid tokens.$coral-color-neutral-border-weak;
 		width: 47rem;
 	}
 
diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss
index 54948d8f9a5..1ceb3c64c4e 100644
--- a/packages/components/src/Datalist/Datalist.module.scss
+++ b/packages/components/src/Datalist/Datalist.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-datalist-items-max-height: 32rem !default;
 $tc-datalist-item-height: 4rem !default;
@@ -33,7 +34,7 @@ $tc-datalist-item-height: 4rem !default;
 	.tc-datalist-item-icon {
 		width: $svg-md-size;
 		height: $svg-md-size;
-		color: $black;
+		color: tokens.$coral-color-neutral-icon;
 		margin-right: $padding-normal;
 	}
 }
@@ -48,7 +49,7 @@ $tc-datalist-item-height: 4rem !default;
 		height: $tc-datalist-item-height;
 
 		&:hover {
-			background-color: $concrete;
+			background-color: tokens.$coral-color-neutral-background-medium;
 		}
 	}
 }
diff --git a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap
index 46da79b9b75..a289c4dc1dd 100644
--- a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap
+++ b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap
@@ -143,7 +143,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Monday 01 January 2007"
-                      class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day tc-date-picker-day"
                       data-value="1"
                       tabindex="-1"
                       type="button"
@@ -157,7 +157,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Range: start date, Tuesday 02 January 2007, selected"
-                      class="theme-calendar-day theme-selected tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-selected tc-date-picker-day"
                       data-value="2"
                       tabindex="-1"
                       type="button"
@@ -170,7 +170,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Wednesday 03 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="3"
                       tabindex="-1"
                       type="button"
@@ -183,7 +183,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Thursday 04 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="4"
                       tabindex="-1"
                       type="button"
@@ -196,7 +196,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Friday 05 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="5"
                       tabindex="-1"
                       type="button"
@@ -209,7 +209,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Saturday 06 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="6"
                       tabindex="-1"
                       type="button"
@@ -222,7 +222,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Sunday 07 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="7"
                       tabindex="-1"
                       type="button"
@@ -239,7 +239,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Monday 08 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="8"
                       tabindex="-1"
                       type="button"
@@ -252,7 +252,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Tuesday 09 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="9"
                       tabindex="-1"
                       type="button"
@@ -265,7 +265,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Wednesday 10 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="10"
                       tabindex="-1"
                       type="button"
@@ -278,7 +278,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Thursday 11 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="11"
                       tabindex="-1"
                       type="button"
@@ -291,7 +291,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Friday 12 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="12"
                       tabindex="-1"
                       type="button"
@@ -304,7 +304,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Saturday 13 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="13"
                       tabindex="-1"
                       type="button"
@@ -317,7 +317,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Sunday 14 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="14"
                       tabindex="-1"
                       type="button"
@@ -334,7 +334,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Monday 15 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="15"
                       tabindex="-1"
                       type="button"
@@ -347,7 +347,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Tuesday 16 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="16"
                       tabindex="-1"
                       type="button"
@@ -360,7 +360,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Wednesday 17 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="17"
                       tabindex="-1"
                       type="button"
@@ -373,7 +373,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Thursday 18 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="18"
                       tabindex="-1"
                       type="button"
@@ -386,7 +386,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Friday 19 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="19"
                       tabindex="-1"
                       type="button"
@@ -399,7 +399,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Saturday 20 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="20"
                       tabindex="-1"
                       type="button"
@@ -412,7 +412,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Sunday 21 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="21"
                       tabindex="-1"
                       type="button"
@@ -429,7 +429,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Monday 22 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="22"
                       tabindex="-1"
                       type="button"
@@ -442,7 +442,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Tuesday 23 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="23"
                       tabindex="-1"
                       type="button"
@@ -455,7 +455,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Wednesday 24 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="24"
                       tabindex="-1"
                       type="button"
@@ -468,7 +468,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Thursday 25 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="25"
                       tabindex="-1"
                       type="button"
@@ -481,7 +481,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Friday 26 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="26"
                       tabindex="-1"
                       type="button"
@@ -494,7 +494,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Saturday 27 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="27"
                       tabindex="-1"
                       type="button"
@@ -507,7 +507,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Sunday 28 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="28"
                       tabindex="-1"
                       type="button"
@@ -524,7 +524,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Monday 29 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="29"
                       tabindex="-1"
                       type="button"
@@ -537,7 +537,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Tuesday 30 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="30"
                       tabindex="-1"
                       type="button"
@@ -550,7 +550,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Wednesday 31 January 2007"
-                      class="theme-calendar-day theme-range tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range tc-date-picker-day"
                       data-value="31"
                       tabindex="-1"
                       type="button"
@@ -563,7 +563,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Included in range, Thursday 01 February 2007"
-                      class="theme-calendar-day theme-range theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-range theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -575,7 +575,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Range: end date, Friday 02 February 2007"
-                      class="theme-calendar-day theme-selected theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-selected theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -587,7 +587,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Saturday 03 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -599,7 +599,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Sunday 04 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -615,7 +615,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Monday 05 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -627,7 +627,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Tuesday 06 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -639,7 +639,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Wednesday 07 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -651,7 +651,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Thursday 08 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -663,7 +663,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Friday 09 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -675,7 +675,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Saturday 10 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
@@ -687,7 +687,7 @@ exports[`DateRange.Picker should render 1`] = `
                   >
                     <button
                       aria-label="Sunday 11 February 2007"
-                      class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                      class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                       tabindex="-1"
                       type="button"
                     >
diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss
index da7e3fad1eb..7f677d454a0 100644
--- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss
+++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-timepicker-width: 8rem !default;
 $tc-timepicker-height: 17rem !default;
-$tc-timepicker-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
+$tc-timepicker-box-shadow: tokens.$coral-elevation-shadow-neutral-m !default;
 $tc-timepicker-z-index: $zindex-dropdown !default;
 
 .popper {
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss
index a246b41fbdc..a180071ebfe 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss
@@ -1,12 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .validation {
 	display: flex;
 	padding: $padding-small $padding-normal;
-	background-color: $wild-sand;
+	background-color: tokens.$coral-color-neutral-background-medium;
 	justify-content: space-between;
 	align-items: center;
-	color: $chestnut-rose;
+	color: tokens.$coral-color-danger-text;
 
 	.errors {
 		display: flex;
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss
index e774dbf14ea..14368a0724a 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss
@@ -1,13 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-datetimepicker-width: 31rem !default;
-$tc-datetimepicker-background: $white !default;
 $tc-datetimepicker-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
 $tc-datetimepicker-z-index: $zindex-dropdown !default;
 
 .popper {
 	width: $tc-datetimepicker-width;
-	background: $tc-datetimepicker-background;
+	background: tokens.$coral-color-neutral-background;
 	box-shadow: $tc-datetimepicker-box-shadow;
 	z-index: $tc-datetimepicker-z-index;
 }
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss
index 8c6a1b20818..107898e5edd 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
@@ -34,7 +35,6 @@
 	text-align: center;
 
 	.calendar-day {
-
 		@include picker-action;
 
 		height: 2.4rem;
@@ -46,9 +46,9 @@
 		padding: 0;
 
 		&.today {
-			background-color: tint($lochmara, 90%);
-			color: $lochmara;
-			border: solid 1px $lochmara;
+			background-color: tokens.$coral-color-accent-background;
+			color: tokens.$coral-color-accent-text-strong;
+			border: solid 1px tokens.$coral-color-accent-border;
 		}
 
 		&.not-current-month {
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss
index ad4df9e6227..1511148576f 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss
@@ -1,10 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
 
 .container {
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text;
 	min-width: 29rem;
 	min-height: 35.2rem;
 	padding: $padding-normal;
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
index bc5b8697b3f..4762f494866 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
@@ -40,6 +41,6 @@
 	padding: 0;
 
 	&:active {
-		background-color: shade($concrete, 10%);
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 }
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss
index 5baf3f712d8..d793816c605 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss
@@ -1,4 +1,7 @@
+/* stylelint-disable color-hex-case */
+/* stylelint-disable selector-no-qualifying-type */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 
@@ -14,26 +17,27 @@
 		text-transform: none;
 
 		.utc {
-			color: $silver-chalice;
+			color: tokens.$coral-color-neutral-text;
 			font-size: 1.2rem;
 		}
 	}
 
 	hr {
 		width: 100%;
-		border-color: $gallery;
+		border-color: tokens.$coral-color-neutral-border;
 		margin: $padding-small 0;
 	}
 
 	> input.time-input {
-		border: 1px solid $concrete;
+		border: 1px solid tokens.$coral-color-neutral-border;
 		height: 3rem;
 		text-align: center;
 		width: 100%;
 
 		&:focus {
-			border-color: $scooter;
+			border-color: tokens.$coral-color-accent-border;
 		}
+
 		&.time-error {
 			box-shadow: inset 0 -2px 0 #e96065;
 			border-bottom: none;
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss
index 6d9d7f918b3..4a5429cc2c2 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @mixin nav-action {
 	padding: 0;
@@ -10,14 +11,14 @@
 	font-size: 1.2rem;
 
 	&.selected {
-		background-color: $lochmara;
-		color: $white;
+		background-color: tokens.$coral-color-accent-background;
+		color: tokens.$coral-color-accent-text-strong;
 		transition: color 0.2s ease-in;
 		font-weight: $font-weight-semi-bold;
 	}
 
 	&:disabled {
-		color: $silver-chalice;
+		color: tokens.$coral-color-neutral-text-disabled;
 		opacity: 0.54;
 	}
 }
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss
index e4fd9be5ddd..692a9ee89c9 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss
@@ -1,3 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$border-default: 0.1rem solid $gallery !default;
+$border-default: 0.1rem solid tokens.$coral-color-neutral-border !default;
diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
index 8ed9ed53977..1c34e04b237 100644
--- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
+++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '../../shared/styles/mixins';
 
 .common {
@@ -21,10 +21,10 @@
 	@include nav-action;
 
 	&:hover {
-		color: $scooter;
+		color: tokens.$coral-color-accent-text-hover;
 	}
 
 	&:active {
-		color: darken($scooter, 12%);
+		color: tokens.$coral-color-accent-text-active;
 	}
 }
diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss
index ad4df9e6227..81a4f1d9443 100644
--- a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss
+++ b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss
@@ -1,10 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
 
 .container {
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text-weak;
 	min-width: 29rem;
 	min-height: 35.2rem;
 	padding: $padding-normal;
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
index 71e4efde089..bc16e4826fd 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
@@ -178,8 +178,6 @@ class DatePicker extends PureComponent {
 										[theme['not-current-month']]: !this.isCurrentMonth(date),
 									},
 									'tc-date-picker-day',
-									'btn-tertiary',
-									'btn-default',
 								);
 
 								const tdProps = {
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss
index ed25986273c..c21bb293923 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
@@ -46,7 +47,7 @@
 			position: absolute;
 			height: 2.5rem;
 			z-index: -1;
-			background-color: tint($lochmara, 80%);
+			background-color: tokens.$coral-color-accent-background-weak;
 		}
 
 		&.range-end::after {
@@ -81,7 +82,6 @@
 	}
 
 	.calendar-day {
-
 		@include picker-action;
 
 		height: 2.4rem;
@@ -93,9 +93,9 @@
 		padding: 0;
 
 		&.today {
-			background-color: tint($lochmara, 90%);
-			color: $lochmara;
-			border: solid 1px $lochmara;
+			background-color: tokens.$coral-color-accent-background-weak;
+			color: tokens.$coral-color-accent-text;
+			border: solid 1px tokens.$coral-color-accent-border;
 		}
 
 		&.not-current-month {
@@ -103,7 +103,7 @@
 		}
 
 		&.range:hover {
-			background-color: tint($lochmara, 70%);
+			background-color: tokens.$coral-color-accent-background-weak;
 		}
 
 		&:disabled {
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap b/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
index 98c89c352b0..d2f05072512 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
@@ -88,7 +88,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 28 May 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -100,7 +100,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 29 May 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -112,7 +112,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Wednesday 30 May 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -124,7 +124,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 31 May 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -136,7 +136,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Friday 01 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="1"
             tabindex="-1"
             type="button"
@@ -149,7 +149,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 02 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="2"
             tabindex="-1"
             type="button"
@@ -162,7 +162,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 03 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="3"
             tabindex="-1"
             type="button"
@@ -179,7 +179,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 04 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="4"
             tabindex="-1"
             type="button"
@@ -192,7 +192,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 05 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="5"
             tabindex="-1"
             type="button"
@@ -205,7 +205,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Date is not allowed, Wednesday 06 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="6"
             disabled=""
             tabindex="-1"
@@ -219,7 +219,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 07 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="7"
             tabindex="-1"
             type="button"
@@ -232,7 +232,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Friday 08 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="8"
             tabindex="-1"
             type="button"
@@ -245,7 +245,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 09 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="9"
             tabindex="-1"
             type="button"
@@ -258,7 +258,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 10 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="10"
             tabindex="-1"
             type="button"
@@ -275,7 +275,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 11 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="11"
             tabindex="-1"
             type="button"
@@ -289,7 +289,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 12 June 2018, selected"
-            class="theme-calendar-day theme-selected tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-selected tc-date-picker-day"
             data-value="12"
             tabindex="-1"
             type="button"
@@ -302,7 +302,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Wednesday 13 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="13"
             tabindex="-1"
             type="button"
@@ -315,7 +315,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 14 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="14"
             tabindex="-1"
             type="button"
@@ -328,7 +328,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Date is not allowed, Friday 15 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="15"
             disabled=""
             tabindex="-1"
@@ -342,7 +342,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 16 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="16"
             tabindex="-1"
             type="button"
@@ -355,7 +355,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 17 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="17"
             tabindex="-1"
             type="button"
@@ -372,7 +372,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 18 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="18"
             tabindex="-1"
             type="button"
@@ -385,7 +385,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 19 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="19"
             tabindex="-1"
             type="button"
@@ -398,7 +398,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Today, Wednesday 20 June 2018"
-            class="theme-calendar-day theme-today tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-today tc-date-picker-day"
             data-value="20"
             tabindex="-1"
             type="button"
@@ -411,7 +411,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 21 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="21"
             tabindex="-1"
             type="button"
@@ -424,7 +424,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Friday 22 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="22"
             tabindex="-1"
             type="button"
@@ -437,7 +437,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 23 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="23"
             tabindex="-1"
             type="button"
@@ -450,7 +450,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 24 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="24"
             tabindex="-1"
             type="button"
@@ -467,7 +467,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 25 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="25"
             tabindex="-1"
             type="button"
@@ -480,7 +480,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 26 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="26"
             tabindex="-1"
             type="button"
@@ -493,7 +493,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Wednesday 27 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="27"
             tabindex="-1"
             type="button"
@@ -506,7 +506,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 28 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="28"
             tabindex="-1"
             type="button"
@@ -519,7 +519,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Friday 29 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="29"
             tabindex="-1"
             type="button"
@@ -532,7 +532,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 30 June 2018"
-            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day tc-date-picker-day"
             data-value="30"
             tabindex="-1"
             type="button"
@@ -545,7 +545,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 01 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -561,7 +561,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Monday 02 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -573,7 +573,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Tuesday 03 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -585,7 +585,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Wednesday 04 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -597,7 +597,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Thursday 05 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -609,7 +609,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Friday 06 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -621,7 +621,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Saturday 07 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
@@ -633,7 +633,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
         >
           <button
             aria-label="Sunday 08 July 2018"
-            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
             tabindex="-1"
             type="button"
           >
diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
index bc5b8697b3f..d676cf310c7 100644
--- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
+++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';
@@ -40,6 +41,6 @@
 	padding: 0;
 
 	&:active {
-		background-color: shade($concrete, 10%);
+		background-color: tokens.$coral-color-neutral-background-strong;
 	}
 }
diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss
index 015ac671d21..6c82c7f29c4 100644
--- a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss
+++ b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss
@@ -1,24 +1,25 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .container {
 	padding: $padding-smaller 0;
-	background-color: $white;
+	background-color: tokens.$coral-color-neutral-background;
 
 	button {
 		width: 100%;
 		border: none;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text;
 		font-size: 1.4rem;
 		font-weight: normal;
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background;
 
 		&:global(.highlight) {
-			background-color: tint($lochmara, 90%);
+			background-color: tokens.$coral-color-accent-background-weak;
 		}
 
 		&:hover,
 		&:focus {
-			background-color: $wild-sand;
+			background-color: tokens.$coral-color-neutral-background-medium;
 			outline: none;
 		}
 	}
diff --git a/packages/components/src/DateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
index 3c454f9052f..f5ff6bb9039 100644
--- a/packages/components/src/DateTimePickers/shared/styles/mixins.scss
+++ b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @import './variables';
 
@@ -12,14 +13,14 @@
 	font-size: 1.2rem;
 
 	&.selected {
-		background-color: $lochmara;
-		color: $white;
+		background-color: tokens.$coral-color-accent-background;
+		color: tokens.$coral-color-accent-text;
 		transition: color 0.2s ease-in;
 		font-weight: $font-weight-semi-bold;
 	}
 
 	&:disabled {
-		color: $silver-chalice;
+		color: tokens.$coral-color-neutral-text-disabled;
 		opacity: 0.54;
 	}
 }
@@ -31,8 +32,8 @@
 
 @mixin popper {
 	width: $tc-datepicker-width;
-	background: $tc-datepicker-background;
-	box-shadow: $tc-datepicker-box-shadow;
+	background: tokens.$coral-color-neutral-background;
+	box-shadow: tokens.$coral-elevation-shadow-neutral-m;
 	z-index: $tc-datepicker-z-index;
 }
 
@@ -61,7 +62,7 @@
 	height: $tc-range-picker-arrow-height;
 	padding: 0 $padding-smaller;
 	margin-bottom: 1.5rem;
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text;
 }
 
 @mixin icon {
diff --git a/packages/components/src/DateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/shared/styles/variables.scss
index 2b7e394c81f..9103802dcd6 100644
--- a/packages/components/src/DateTimePickers/shared/styles/variables.scss
+++ b/packages/components/src/DateTimePickers/shared/styles/variables.scss
@@ -1,9 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$border-default: 0.1rem solid $gallery !default;
+$border-default: 0.1rem solid tokens.$coral-color-neutral-border !default;
 
 $tc-datepicker-width: 31rem !default;
-$tc-datepicker-background: $white !default;
 $tc-datepicker-box-shadow: $shadow-default !default;
 $tc-datepicker-z-index: $zindex-dropdown !default;
 
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
index 8ed9ed53977..7d5d54eb839 100644
--- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
+++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '../../shared/styles/mixins';
 
 .common {
@@ -21,10 +21,10 @@
 	@include nav-action;
 
 	&:hover {
-		color: $scooter;
+		color: tokens.$coral-color-accent-text;
 	}
 
 	&:active {
-		color: darken($scooter, 12%);
+		color: tokens.$coral-color-accent-text-active;
 	}
 }
diff --git a/packages/components/src/Dialog/Dialog.scss b/packages/components/src/Dialog/Dialog.scss
index 38f326800e3..af074918fce 100644
--- a/packages/components/src/Dialog/Dialog.scss
+++ b/packages/components/src/Dialog/Dialog.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 :global {
 	.modal-flex .modal-body {
@@ -49,13 +50,13 @@
 			top: 1rem;
 			right: 1rem;
 			font-weight: normal;
-			color: $gray;
+			color: tokens.$coral-color-neutral-text-weak;
 
 			&:hover,
 			&:focus,
 			&:active {
 				font-weight: bold;
-				color: $black;
+				color: tokens.$coral-color-neutral-text;
 			}
 		}
 	}
diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss
index 185451ca8b6..4bdd9ca8f5f 100644
--- a/packages/components/src/Drawer/Drawer.module.scss
+++ b/packages/components/src/Drawer/Drawer.module.scss
@@ -1,16 +1,18 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+// rewrite using design tokens
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-drawer-initial-offset: 1000px !default;
-$tc-drawer-bgcolor: white !default;
+$tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default;
 $tc-drawer-transition-duration: 230ms !default;
 $tc-drawer-transition-easing: cubic-bezier(0.18, 0.89, 0.32, 1.28) !default;
 $tc-drawer-padding: $padding-large !default;
 $tc-drawer-header-height: 5.5rem !default;
-$tc-drawer-header-color: $white !default;
-$tc-drawer-header-background: $brand-primary-lighter !default;
-$tc-drawer-tabs-background: tint($brand-primary, 90) !default;
+$tc-drawer-header-color: tokens.$coral-color-neutral-text !default;
+$tc-drawer-header-background: tokens.$coral-color-accent-background !default;
+$tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default;
 $tc-drawer-content-max-width: 65rem !default;
-$tc-action-bar-background-color: $wild-sand !default;
+$tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default;
 $tc-drawer-z-index: $drawer-z-index !default;
 
 .tc-drawer {
@@ -106,7 +108,7 @@ $tc-drawer-z-index: $drawer-z-index !default;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
-			
+
 			h1 {
 				flex: 1;
 				margin: 0;
@@ -146,7 +148,7 @@ $tc-drawer-z-index: $drawer-z-index !default;
 
 .tc-drawer-header-with-tabs {
 	padding: 0;
-	background-color: $gray-lighter;
+	background-color: tokens.$coral-color-neutral-background;
 }
 
 .tc-drawer-content {
diff --git a/packages/components/src/EditableText/InlineForm.module.scss b/packages/components/src/EditableText/InlineForm.module.scss
index c1eab9061d9..dc7b6ed5f7a 100644
--- a/packages/components/src/EditableText/InlineForm.module.scss
+++ b/packages/components/src/EditableText/InlineForm.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
 $tc-icon-editable-text-size: 0.8rem !default;
@@ -23,7 +23,7 @@ $tc-circle-editable-text-size: 16px !default;
 		padding-right: 2 * $tc-circle-editable-text-size + $padding-large;
 
 		&::selection {
-			background: lighten($scooter, 25%);
+			background: tokens.$coral-color-accent-background;
 		}
 	}
 
@@ -37,8 +37,8 @@ $tc-circle-editable-text-size: 16px !default;
 		right: $padding-larger;
 
 		&-icon {
-			border: 0.1rem solid $dark-silver;
-			color: $dark-silver;
+			border: 0.1rem solid tokens.$coral-color-neutral-border;
+			color: tokens.$coral-color-neutral-text-weak;
 			width: $tc-circle-editable-text-size;
 			height: $tc-circle-editable-text-size;
 			min-height: auto;
@@ -59,30 +59,30 @@ $tc-circle-editable-text-size: 16px !default;
 		}
 
 		&-submit {
-			border-color: $rio-grande;
-			background: $rio-grande;
-			fill: white;
+			border-color: tokens.$coral-color-success-border;
+			background: tokens.$coral-color-success-background-strong;
+			fill: tokens.$coral-color-success-text-weak;
 
 			&:focus,
 			&:hover {
-				color: $scooter;
-				background: $scooter;
-				border-color: $scooter;
+				color: tokens.$coral-color-success-text-weak;
+				background: tokens.$coral-color-success-background-strong-hover;
+				border-color: tokens.$coral-color-success-border;
 
 				svg {
-					background: $scooter;
+					background: tokens.$coral-color-success-background-strong-hover;
 				}
 			}
 
 			> svg {
-				color: white;
+				color: tokens.$coral-color-success-text-weak;
 			}
 		}
 
 		&-cancel:focus,
 		&-cancel:hover {
-			color: $scooter;
-			border-color: $scooter;
+			color: tokens.$coral-color-neutral-text;
+			border-color: tokens.$coral-color-neutral-border-hover;
 		}
 	}
 }
diff --git a/packages/components/src/EditableText/PlainTextTitle.module.scss b/packages/components/src/EditableText/PlainTextTitle.module.scss
index 298ab3c26d2..4b6e73635ed 100644
--- a/packages/components/src/EditableText/PlainTextTitle.module.scss
+++ b/packages/components/src/EditableText/PlainTextTitle.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @mixin ellipsis {
 	white-space: nowrap;
@@ -29,10 +30,9 @@
 		flex: 0 0 auto;
 		line-height: inherit;
 		min-height: inherit;
-		color: $white;
 
 		&:global(.btn-link) {
-			color: $gray;
+			color: tokens.$coral-color-neutral-icon-weak;
 		}
 
 		&:focus,
diff --git a/packages/components/src/Enumeration/Enumeration.module.scss b/packages/components/src/Enumeration/Enumeration.module.scss
index 005007fc6ef..aaced37012e 100644
--- a/packages/components/src/Enumeration/Enumeration.module.scss
+++ b/packages/components/src/Enumeration/Enumeration.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-enumeration-height: 50vh !default;
 $tc-enumeration-font-size: 1.4rem !default;
diff --git a/packages/components/src/Enumeration/Header/Header.module.scss b/packages/components/src/Enumeration/Header/Header.module.scss
index 71c649ba8b9..99ea5e806b8 100644
--- a/packages/components/src/Enumeration/Header/Header.module.scss
+++ b/packages/components/src/Enumeration/Header/Header.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-enumeration-smaller-padding: $padding-smaller !default;
 $tc-enumeration-small-padding: $padding-small !default;
@@ -50,9 +51,9 @@ $tc-enumeration-header-error-padding: 2px !default;
 	.tc-enumeration-header-error {
 		position: absolute;
 		top: 100%;
-		background-color: $tc-enumeration-header-error-background-color;
+		background-color: tokens.$coral-color-danger-background;
 		width: 100%;
-		color: $tc-enumeration-header-error-color;
+		color: tokens.$coral-color-danger-text;
 		padding: $tc-enumeration-header-error-padding;
 		z-index: 1;
 	}
diff --git a/packages/components/src/Enumeration/Items/Item/Item.module.scss b/packages/components/src/Enumeration/Items/Item/Item.module.scss
index 30fad2d32ef..88ea9027fb4 100644
--- a/packages/components/src/Enumeration/Items/Item/Item.module.scss
+++ b/packages/components/src/Enumeration/Items/Item/Item.module.scss
@@ -1,17 +1,18 @@
+/* stylelint-disable color-hex-case */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-enumeration-normal-padding: $padding-normal !default;
 $tc-enumeration-smaller-padding: $padding-smaller !default;
 $tc-enumeration-small-padding: $padding-small !default;
 $tc-enumeration-item-height: 3.3rem !default;
 
-$tc-enumeration-item-error-color: red !default;
 $tc-item-padding-top-bottom: 7px !default;
 $tc-enumeration-input-margin: 10px;
 $tc-enumeration-item-font-size: 14px;
 $tc-enumeration-item-btn-height: 16px;
 $tc-enumeration-item-error-padding: 0 $padding-normal;
-$selected-item-color: #FAFAFA;
+$selected-item-color: #fafafa;
 $item-checkbox-margin: 5px;
 $item-checkbox-width: 20px;
 
@@ -93,11 +94,11 @@ $item-checkbox-width: 20px;
 	}
 
 	.tc-enumeration-item-error {
-		font-size: 12px;
+		font-size: tokens.$coral-paragraph-s;
 		position: absolute;
 		top: 100%;
 		width: 100%;
-		color: $tc-enumeration-item-error-color;
+		color: tokens.$coral-color-danger-text;
 		padding: $tc-enumeration-item-error-padding;
 		z-index: 1;
 		background: inherit;
@@ -113,7 +114,7 @@ $item-checkbox-width: 20px;
 }
 
 .selected-item {
-	background-color: $selected-item-color;
+	background-color: tokens.$coral-color-neutral-background-medium;
 }
 
 .tc-enumeration-item:hover,
@@ -126,6 +127,5 @@ $item-checkbox-width: 20px;
 // disable hover if item is selected
 .tc-enumeration-item:hover:not(.selected-item),
 .tc-enumeration-item:not(.selected-item):global(.ally-focus-within) {
-	background-color: rgba(250, 250, 250, 1);
+	background-color: tokens.$coral-color-neutral-background-medium;
 }
-
diff --git a/packages/components/src/Enumeration/Items/Items.module.scss b/packages/components/src/Enumeration/Items/Items.module.scss
index 3b7886191b8..899d33ca72d 100644
--- a/packages/components/src/Enumeration/Items/Items.module.scss
+++ b/packages/components/src/Enumeration/Items/Items.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-enumeration-height: 40vh !default;
 
diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss
index 22689ee69e2..d6944f158fe 100644
--- a/packages/components/src/FilterBar/FilterBar.module.scss
+++ b/packages/components/src/FilterBar/FilterBar.module.scss
@@ -1,13 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // Filter styles
-$tc-filter-bar-highlight-color: rgba($lightning-yellow, 0.75) !default;
 $tc-filter-bar-width: 250px !default;
 
 .filter {
 	display: flex;
 	height: $padding-larger;
-	background-color: rgba($silver, 0.2);
+	background-color: tokens.$coral-color-neutral-background-medium;
 	padding: 0;
 	border-radius: $border-radius-base;
 
@@ -17,7 +17,7 @@ $tc-filter-bar-width: 250px !default;
 		margin: 8px 0;
 		height: $svg-md-size;
 		width: $padding-larger;
-		fill: $gray;
+		fill: tokens.$coral-color-neutral-icon-weak;
 	}
 
 	> :global(.form-group) {
@@ -38,11 +38,11 @@ $tc-filter-bar-width: 250px !default;
 
 	.search {
 		box-shadow: none;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text;
 		font-size: $font-size-base;
 
 		&::placeholder {
-			color: $dark-silver;
+			color: tokens.$coral-color-neutral-icon-weak;
 		}
 
 		&::-ms-clear {
@@ -52,7 +52,7 @@ $tc-filter-bar-width: 250px !default;
 
 	.remove {
 		display: inline-block;
-		color: opacify($gray, 0.2);
+		color: tokens.$coral-color-neutral-text;
 		padding: $padding-smaller;
 		line-height: 2rem;
 		height: 100%;
@@ -78,11 +78,11 @@ $tc-filter-bar-width: 250px !default;
 }
 
 .highlight {
-	background-color: $tc-filter-bar-highlight-color;
+	background-color: tokens.$coral-color-warning-background;
 
 	.search-icon,
 	.search {
-		fill: rgba($black, 0.5);
+		fill: tokens.$coral-color-neutral-text;
 	}
 }
 
diff --git a/packages/components/src/FormatValue/FormatValue.module.scss b/packages/components/src/FormatValue/FormatValue.module.scss
index 9ef4363f6d8..4c60bb4d0e5 100644
--- a/packages/components/src/FormatValue/FormatValue.module.scss
+++ b/packages/components/src/FormatValue/FormatValue.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $svg-tab-width: 2.6rem !default;
 $svg-other-characters: 0.3rem !default;
-$svg-color: #CCC !default;
+$svg-color: tokens.$coral-color-neutral-icon-weak !default;
 
 .td-value {
 	white-space: pre;
diff --git a/packages/components/src/GridLayout/Grid.module.scss b/packages/components/src/GridLayout/Grid.module.scss
index c55683d590c..4f85e968d1f 100644
--- a/packages/components/src/GridLayout/Grid.module.scss
+++ b/packages/components/src/GridLayout/Grid.module.scss
@@ -1,10 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .layout {
 	:global(.react-grid-item) {
 		display: flex;
 		flex-direction: column;
-		border: 1px solid $gallery;
+		border: 1px solid tokens.$coral-color-neutral-border;
 		border-radius: 4px;
 	}
 
@@ -15,7 +16,7 @@
 	&.draggable {
 		:global(.react-grid-item) {
 			&:global(.react-grid-placeholder) {
-				background: $scooter;
+				background: tokens.$coral-color-accent-background;
 			}
 
 			&:hover {
diff --git a/packages/components/src/GuidedTour/GuidedTour.module.scss b/packages/components/src/GuidedTour/GuidedTour.module.scss
index fe7a3b9550d..0d43208b007 100644
--- a/packages/components/src/GuidedTour/GuidedTour.module.scss
+++ b/packages/components/src/GuidedTour/GuidedTour.module.scss
@@ -1,11 +1,12 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
-$tc-guidedtour-accent-color: $scooter !default;
+$tc-guidedtour-accent-color: tokens.$coral-color-accent-text !default;
 $tc-guidedtour-tooltip-padding: $padding-large !default;
 $tc-guidedtour-mask-opactiy: 0.25 !default;
 $tc-guidedtour-close-button-size: $svg-sm-size !default;
 $tc-guidedtour-nav-button-size: $svg-md-size !default;
-$tc-guidedtour-controls-color: $dove-gray !default;
+$tc-guidedtour-controls-color: tokens.$coral-color-neutral-text !default;
 $tc-guidedtour-width: 40rem !default;
 
 /* stylelint-disable-next-line selector-id-pattern*/
@@ -16,8 +17,9 @@ $tc-guidedtour-width: 40rem !default;
 
 	.tc-guided-tour {
 		--reactour-accent: #{$tc-guidedtour-accent-color};
+		background-color: tokens.$coral-color-neutral-background;
 		padding: $tc-guidedtour-tooltip-padding (2 * $tc-guidedtour-tooltip-padding) $tc-guidedtour-tooltip-padding $tc-guidedtour-tooltip-padding;
-		border-color: rgb(226, 226, 226);
+		border-color: tokens.$coral-color-neutral-border;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
 		width: $tc-guidedtour-width;
 		max-width: none;
diff --git a/packages/components/src/GuidedTour/GuidedTour.stories.js b/packages/components/src/GuidedTour/GuidedTour.stories.js
index 845a562c2d6..dee01d8c5b3 100644
--- a/packages/components/src/GuidedTour/GuidedTour.stories.js
+++ b/packages/components/src/GuidedTour/GuidedTour.stories.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import { Component, Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
-
+import tokens from '@talend/design-tokens';
 import { withTranslation } from 'react-i18next';
 
 import GuidedTour from './GuidedTour.component';
@@ -140,7 +140,7 @@ function getSteps({ hideControls, showControls, t }) {
 				body: 'Highlighted text here',
 			},
 			style: {
-				backgroundColor: '#fdf3da',
+				backgroundColor: tokens.coralColorWarningBackground,
 			},
 		},
 		{
@@ -264,7 +264,7 @@ const getLayoutWithLoremIpsum = () => (
 				flexBasis: '100vw',
 				alignItems: 'center',
 				textAlign: 'right',
-				background: '#eee',
+				background: tokens.coralColorNeutralBackground,
 			}}
 		>
 			<span data-tour="my-fourth-step">🧸 Lorem ispum</span>
diff --git a/packages/components/src/HeaderBar/HeaderBar.component.js b/packages/components/src/HeaderBar/HeaderBar.component.js
index bf05523e429..f36abcdc3ad 100644
--- a/packages/components/src/HeaderBar/HeaderBar.component.js
+++ b/packages/components/src/HeaderBar/HeaderBar.component.js
@@ -62,7 +62,7 @@ function HeaderBar(props) {
 	}
 
 	return (
-		<nav className={theme('tc-header-bar', 'navbar')}>
+		<nav className={theme('tc-header-bar', 'navbar', 'navbar-inverse')}>
 			<ul className={theme('tc-header-bar-actions', 'navbar-nav')}>
 				{props.logo && <Components.Logo getComponent={props.getComponent} {...props.logo} t={t} />}
 				<AppSwitcherComponent {...props.brand} {...props.products} isSeparated={!!props.env} />
diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss
index 1a751fd7db0..a40b75bd2e8 100644
--- a/packages/components/src/HeaderBar/HeaderBar.module.scss
+++ b/packages/components/src/HeaderBar/HeaderBar.module.scss
@@ -3,7 +3,6 @@
 
 $tc-headerbar-logo-width: 6rem !default;
 $tc-headerbar-logo-full-width: 8.5rem !default;
-$background-color-on-hover: rgba(255, 255, 255, 0.2);
 
 @keyframes fadeIn {
 	from {
@@ -23,10 +22,6 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 	width: 100%;
 	z-index: 1030;
 
-	:global(.btn) {
-		--t-button-color: var(--t-button-primary-color);
-	}
-
 	svg {
 		margin: 0;
 	}
@@ -49,13 +44,6 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 			margin-left: auto;
 		}
 
-		:global(.btn) {
-			&:hover,
-			&:focus {
-				box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12) inset;
-			}
-		}
-
 		.tc-header-bar-action {
 			list-style: none;
 			display: flex;
@@ -68,7 +56,7 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 				display: block;
 				width: 1px;
 				height: $font-size-large;
-				background-color: $white;
+				background-color: tokens.$coral-color-neutral-background;
 			}
 
 			:global {
@@ -106,12 +94,12 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 		.tc-header-bar-call-to-action {
 			:global {
 				.btn.btn-info.btn-inverse {
-					background-color: $white;
+					background-color: tokens.$coral-color-neutral-background;
 					border: none;
 					margin-right: $padding-normal;
 
 					&:hover {
-						background-color: $white;
+						background-color: tokens.$coral-color-neutral-background;
 					}
 				}
 			}
@@ -119,7 +107,6 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 	}
 
 	.tc-header-bar-products + :global(.dropdown-menu) :global(.tc-svg-icon) {
-		fill: $st-tropaz;
 		height: $svg-lg-size;
 		width: $svg-lg-size;
 	}
@@ -138,7 +125,7 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 		height: 100%;
 
 		:global(.caret) {
-			box-shadow: 2px -2px 0 $white;
+			box-shadow: 2px -2px 0 tokens.$coral-color-neutral-text-inverted;
 			border: none;
 			margin-left: $padding-small;
 			margin-bottom: $padding-smaller;
@@ -148,10 +135,6 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 			:global(.caret) {
 				margin-top: $padding-small;
 			}
-
-			:global(.btn):global(.btn-link) {
-				background-color: $background-color-on-hover;
-			}
 		}
 	}
 
@@ -166,7 +149,7 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 
 				padding-right: $padding-large;
 				height: $navbar-height;
-				background: $white;
+				background: tokens.$coral-color-neutral-background;
 
 				:global(.form-control) {
 					font-style: italic;
@@ -179,7 +162,7 @@ $background-color-on-hover: rgba(255, 255, 255, 0.2);
 
 	.tc-header-bar-intercom-default-component {
 		border-radius: 50%;
-		background: $st-tropaz;
+		background: tokens.$coral-color-accent-text;
 		min-height: auto;
 		height: 3.2rem;
 		width: 3.2rem;
diff --git a/packages/components/src/HeaderBar/__snapshots__/HeaderBar.test.js.snap b/packages/components/src/HeaderBar/__snapshots__/HeaderBar.test.js.snap
index 689c197349a..2e0f0dc457b 100644
--- a/packages/components/src/HeaderBar/__snapshots__/HeaderBar.test.js.snap
+++ b/packages/components/src/HeaderBar/__snapshots__/HeaderBar.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`HeaderBar should render 1`] = `
 <nav
-  class="tc-header-bar theme-tc-header-bar navbar theme-navbar"
+  class="tc-header-bar theme-tc-header-bar navbar theme-navbar navbar-inverse theme-navbar-inverse"
 >
   <ul
     class="tc-header-bar-actions theme-tc-header-bar-actions navbar-nav theme-navbar-nav"
diff --git a/packages/components/src/HttpError/HttpError.module.scss b/packages/components/src/HttpError/HttpError.module.scss
index 95bdac3e86e..33d7715a0f6 100644
--- a/packages/components/src/HttpError/HttpError.module.scss
+++ b/packages/components/src/HttpError/HttpError.module.scss
@@ -1,8 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-http-error-status-color: $scooter !default;
-$tc-http-error-title-color: $brand-primary !default;
-$tc-http-error-message-color: #888 !default;
+@use '~@talend/design-tokens/lib/tokens';
 
 .http-error {
 	position: relative;
@@ -20,7 +17,7 @@ $tc-http-error-message-color: #888 !default;
 		font-size: 62rem;
 		font-weight: 700;
 		line-height: 0.7;
-		color: $tc-http-error-status-color;
+		color: tokens.$coral-color-accent-text;
 		opacity: 0.1;
 		z-index: -1;
 	}
@@ -30,13 +27,13 @@ $tc-http-error-message-color: #888 !default;
 
 		h1 {
 			margin: 0;
-			color: $tc-http-error-title-color;
+			color: tokens.$coral-color-accent-text-active;
 			font-size: 10rem;
 			font-weight: 700;
 		}
 
 		p {
-			color: $tc-http-error-message-color;
+			color: tokens.$coral-color-neutral-text;
 			font-size: 3rem;
 			font-weight: 600;
 		}
diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss
index 2f07e05c02f..13556663331 100644
--- a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss
+++ b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss
@@ -1,4 +1,6 @@
+/* stylelint-disable selector-no-qualifying-type */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .json-schema-renderer {
 	margin-top: $padding-large;
@@ -11,24 +13,24 @@
 	dt {
 		font-weight: 400;
 		font-size: 1.4rem;
-		color: $dark-silver;
+		color: tokens.$coral-color-neutral-text-weak;
 	}
 
 	dd {
 		font-size: 1.6rem;
 		font-weight: 400;
-		color: $black;
+		color: tokens.$coral-color-neutral-text;
 		padding-top: $padding-smaller;
 		margin-bottom: $padding-normal;
 
 		&.array-value {
 			display: inline;
 
-			&:after {
+			&::after {
 				content: ', ';
 			}
 
-			&:last-child:after {
+			&:last-child::after {
 				content: '';
 			}
 		}
@@ -37,6 +39,6 @@
 	h2 {
 		font-size: 1.7rem;
 		font-weight: 700;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text;
 	}
 }
diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss
index 554e3bf110d..1b1ca897eeb 100644
--- a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss
+++ b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-skip-links {
 	position: absolute;
@@ -8,8 +9,8 @@
 
 	ul > li > a {
 		height: $navbar-height;
-		background: $white;
-		color: $dove-gray;
+		background: tokens.$coral-color-neutral-background;
+		color: tokens.$coral-color-neutral-text-weak;
 		font-weight: bold;
 
 		display: flex;
@@ -24,7 +25,7 @@
 
 		> .icon {
 			padding: 0 $padding-small;
-			border-right: 1px solid black;
+			border-right: 1px solid tokens.$coral-color-neutral-border-strong;
 			display: flex;
 			align-items: center;
 		}
diff --git a/packages/components/src/List/List.module.scss b/packages/components/src/List/List.module.scss
index f3a2a4a062c..fe63d844d47 100644
--- a/packages/components/src/List/List.module.scss
+++ b/packages/components/src/List/List.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // List styles
 
@@ -20,6 +21,6 @@
 		flex-grow: 1;
 		flex-shrink: 1;
 		box-shadow: $shadow-default;
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background;
 	}
 }
diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss
index c4bca83f0bd..f36134a117f 100644
--- a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss
+++ b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss
@@ -1,8 +1,7 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // SelectSortBy styles
-
-$tc-list-toolbar-display-color: $dove-gray !default;
 $tc-order-chooser-icon-size: 0.6rem !default;
 
 .tc-sort-by {
@@ -16,11 +15,11 @@ $tc-order-chooser-icon-size: 0.6rem !default;
 	&-label {
 		margin: 0;
 		font-weight: normal;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text-weak;
 	}
 
 	:global(.navbar-btn.btn) {
-		color: $tc-list-toolbar-display-color;
+		color: tokens.$coral-color-neutral-text-weak;
 		font-size: 1em;
 		margin: 0;
 	}
@@ -33,7 +32,7 @@ $tc-order-chooser-icon-size: 0.6rem !default;
 		&:hover,
 		&:focus,
 		&:active {
-			color: $black;
+			color: tokens.$coral-color-neutral-text;
 			box-shadow: none;
 		}
 
diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
index 180a6d818d5..de2e006608b 100644
--- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
+++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
@@ -1,7 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-list-toolbar-display-color: $silver !default;
-$tc-list-toolbar-background-color: $wild-sand !default;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-toolbar-height: 7rem;
 
@@ -13,9 +11,9 @@ $tc-toolbar-height: 7rem;
 	padding-left: $padding-larger;
 	padding-right: $padding-larger;
 
-	background: $tc-list-toolbar-background-color;
-	border-top: 1px solid $alto;
-	border-bottom: 1px solid $alto;
+	background: tokens.$coral-color-neutral-background-medium;
+	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	margin-bottom: 0;
 	flex-shrink: 0;
 	flex-grow: 0;
@@ -42,7 +40,7 @@ $tc-toolbar-height: 7rem;
 	&-separated:not(:first-child)::before {
 		align-self: center;
 		content: '|';
-		color: $silver;
+		color: tokens.$coral-color-neutral-border-strong;
 		padding: 0 $padding-normal;
 	}
 
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
index f8e0db64d9d..4ce84794eb6 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
@@ -1,6 +1,6 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-popover-border-color: rgb(226, 226, 226) !default;
 $tc-popover-border-width: 0.1rem !default;
 $tc-icon-size: 1.2rem !default;
 $tc-height: 4rem;
@@ -50,12 +50,12 @@ $tc-height: 4rem;
 		min-height: $tc-height;
 
 		&-select-all {
-			border-bottom: $tc-popover-border-width solid $tc-popover-border-color;
+			border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border;
 		}
 
 		&:global(.ally-focus-within),
 		&:hover {
-			background: $wild-sand;
+			background: tokens.$coral-color-neutral-background-medium;
 		}
 
 		:global(.checkbox.tc-toggle) {
diff --git a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss
index dc76954aef3..bdb65e6c196 100644
--- a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss
+++ b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss
@@ -1,12 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-list-toolbar-background-color: $wild-sand !default;
+@use '~@talend/design-tokens/lib/tokens';
 
 .container {
 	padding-left: 0;
 	margin: 0;
 	width: 100%;
-	background: $tc-list-toolbar-background-color;
+	background: tokens.$coral-color-neutral-background;
 }
 
 .tc-list-toolbar-select-all {
diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss
index 77dedfc4204..a0e6b5b9bc4 100644
--- a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss
+++ b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss
@@ -1,8 +1,8 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // SelectSortBy styles
 
-$tc-list-toolbar-display-color: $dove-gray !default;
 $tc-list-toolbar-order-chooser-icon-size: 0.6rem !default;
 
 .tc-list-toolbar-sort-by {
@@ -10,14 +10,14 @@ $tc-list-toolbar-order-chooser-icon-size: 0.6rem !default;
 	align-items: center;
 
 	:global(.navbar-btn.btn) {
-		color: $tc-list-toolbar-display-color;
+		color: tokens.$coral-color-neutral-text-weak;
 		font-size: 1em;
 		margin: 0;
 	}
 
 	:global(.tc-list-toolbar-order-chooser) {
-		background-color: $wild-sand;
-		color: $black;
+		background-color: tokens.$coral-color-neutral-background-medium;
+		color: tokens.$coral-color-neutral-text;
 		display: inherit;
 
 		padding: 0;
@@ -25,7 +25,7 @@ $tc-list-toolbar-order-chooser-icon-size: 0.6rem !default;
 		&:hover,
 		&:focus,
 		&:active {
-			color: $black;
+			color: tokens.$coral-color-neutral-text;
 			box-shadow: none;
 		}
 
diff --git a/packages/components/src/List/Toolbar/Toolbar.module.scss b/packages/components/src/List/Toolbar/Toolbar.module.scss
index 1524304b46d..cab66a2549b 100644
--- a/packages/components/src/List/Toolbar/Toolbar.module.scss
+++ b/packages/components/src/List/Toolbar/Toolbar.module.scss
@@ -1,16 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@use '~@talend/design-tokens/lib/_tokens.scss' as tokens;
+@use '~@talend/design-tokens/lib/tokens';
 
 // Toolbar styles
-$tc-list-toolbar-display-color: $silver !default;
-$tc-list-toolbar-background-color: $wild-sand !default;
 $tc-list-toolbar-height: 7rem !default;
 
 .tc-list-toolbar {
-	background: $tc-list-toolbar-background-color;
-	border-top: 1px solid $alto;
-	border-bottom: 1px solid $alto;
+	background: tokens.$coral-color-neutral-background-medium;
+	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	margin-bottom: 0;
 	padding: 0 $padding-larger;
 
@@ -24,7 +21,7 @@ $tc-list-toolbar-height: 7rem !default;
 	}
 
 	:global(.navbar-text) {
-		color: $tc-list-toolbar-display-color;
+		color: tokens.$coral-color-neutral-text;
 		margin-right: 0;
 
 		label {
@@ -36,13 +33,13 @@ $tc-list-toolbar-height: 7rem !default;
 	:global(.nav) {
 		a[role='menuitem'],
 		a:global(.dropdown-toggle) {
-			color: $black;
+			color: tokens.$coral-color-neutral-text;
 			font-weight: normal;
 		}
 	}
 
 	:global(.tc-actionbar-container) {
-		background-color: $tc-list-toolbar-background-color;
+		background-color: tokens.$coral-color-neutral-background-medium;
 		padding: 0;
 		height: $tc-list-toolbar-height;
 
@@ -75,25 +72,23 @@ $tc-list-toolbar-height: 7rem !default;
 						padding-right: 0;
 					}
 
-					&:global(.separated):not(:first-child):before {
+					&:global(.separated):not(:first-child)::before {
 						content: '|';
-						color: $silver;
+						color: tokens.$coral-color-neutral-text-weak;
 					}
 
-					&:global(.select-sort-by) {
-						:global(.navbar-text) {
-							margin-bottom: $padding-normal;
-							margin-left: $padding-normal;
-							font-weight: normal;
-							color: $dove-gray;
-						}
+					&:global(.select-sort-by) :global(.navbar-text) {
+						margin-bottom: $padding-normal;
+						margin-left: $padding-normal;
+						font-weight: normal;
+						color: tokens.$coral-color-neutral-text;
 					}
 				}
 			}
 		}
 	}
 
-	:global(li.separated button[data-feature='column-chooser.open']) {
+	:global(.separated button[data-feature='column-chooser.open']) {
 		margin-left: tokens.$coral-spacing-m;
 	}
 }
diff --git a/packages/components/src/ListView/Header/Header.module.scss b/packages/components/src/ListView/Header/Header.module.scss
index ab5a6a9a3f6..6861ddbaa23 100644
--- a/packages/components/src/ListView/Header/Header.module.scss
+++ b/packages/components/src/ListView/Header/Header.module.scss
@@ -1,7 +1,8 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-listview-header-height: 28px !default;
-$tc-listview-svg-color: #666 !default;
+$tc-listview-svg-color: tokens.$coral-color-neutral-text !default;
 $tc-listview-font-size: 1.4rem !default;
 
 .tc-listview-header {
@@ -22,6 +23,10 @@ $tc-listview-font-size: 1.4rem !default;
 		flex-grow: 1;
 		height: 100%;
 		background-color: transparent;
+
+		&::placeholder {
+			color: tokens.$coral-color-neutral-text-weak;
+		}
 	}
 
 	:global(.actions) {
diff --git a/packages/components/src/ListView/ListView.module.scss b/packages/components/src/ListView/ListView.module.scss
index 058d078921e..487e2a04119 100644
--- a/packages/components/src/ListView/ListView.module.scss
+++ b/packages/components/src/ListView/ListView.module.scss
@@ -1,6 +1,7 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-listview-svg-color: $dove-gray !default;
+$tc-listview-svg-color: tokens.$coral-color-neutral-icon !default;
 $tc-listview-font-size: 1.4rem !default;
 
 .tc-listview {
diff --git a/packages/components/src/MultiSelect/Dropdown.module.scss b/packages/components/src/MultiSelect/Dropdown.module.scss
index 13934e8bfa3..68c5ff26969 100644
--- a/packages/components/src/MultiSelect/Dropdown.module.scss
+++ b/packages/components/src/MultiSelect/Dropdown.module.scss
@@ -1,19 +1,20 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .dropdown {
 	z-index: 100;
 	position: absolute;
 	width: 100%;
-	background-color: $white;
-	border: 1px solid $gallery;
+	background-color: tokens.$coral-color-neutral-background;
+	border: 1px solid tokens.$coral-color-neutral-border;
 	border-top: none;
 	border-radius: 0 5px;
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text;
 
 	.loading {
 		padding: 50px;
 		text-align: center;
 		height: 80px;
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background;
 	}
 }
diff --git a/packages/components/src/MultiSelect/ItemOption.module.scss b/packages/components/src/MultiSelect/ItemOption.module.scss
index fe31bebe973..7c8c4c16be1 100644
--- a/packages/components/src/MultiSelect/ItemOption.module.scss
+++ b/packages/components/src/MultiSelect/ItemOption.module.scss
@@ -1,14 +1,17 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .row {
 	padding-left: $padding-normal;
+
 	&:hover {
-		background-color: $concrete;
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 
 	:global(.checkbox) {
 		margin: 0;
 	}
+
 	label {
 		height: 3rem;
 		width: 100%;
@@ -16,14 +19,17 @@
 		margin-bottom: 0;
 		align-items: center;
 	}
+
 	input[type='checkbox'],
-	:global(.checkbox input + :before),
-	:global(.checkbox input + :after) {
-		top: calc($padding-normal/2);
+	:global(.checkbox input + ::before),
+	:global(.checkbox input + ::after) {
+		top: calc($padding-normal / 2);
 	}
 }
+
 .item {
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text;
+
 	&[for='checkbox-create-new'],
 	&[for='checkbox-select-all'] {
 		font-style: italic;
diff --git a/packages/components/src/MultiSelect/MultiSelect.module.scss b/packages/components/src/MultiSelect/MultiSelect.module.scss
index 98d4631c21e..a22d140baf7 100644
--- a/packages/components/src/MultiSelect/MultiSelect.module.scss
+++ b/packages/components/src/MultiSelect/MultiSelect.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // MultiSelect styles
 .container {
-	color: black;
+	color: tokens.$coral-color-neutral-text;
 	position: relative;
 
 	// this is the overlaytrigger span
@@ -20,14 +21,14 @@
 	right: 25px;
 	top: 7px;
 	padding: 0;
-	color: $chestnut-rose;
+	color: tokens.$coral-color-danger-text;
 }
 
 .caret {
 	// add this selector to force override of width defined in Icon
 	&:global(.tc-svg-icon) {
 		position: absolute;
-		color: $silver;
+		color: tokens.$coral-color-neutral-icon;
 		top: 10px;
 		right: 0;
 		width: $padding-larger;
diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss
index 428e5126e42..50a3d3964d0 100644
--- a/packages/components/src/Notification/Notification.module.scss
+++ b/packages/components/src/Notification/Notification.module.scss
@@ -1,13 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-notification-info-color: #3C763D !default;
-$tc-notification-info-bgcolor: #E8F2CC !default;
-
-$tc-notification-warning-color: #8A6D3B !default;
-$tc-notification-warning-bgcolor: #FDEECC !default;
-
-$tc-notification-error-color: #A94442 !default;
-$tc-notification-error-bgcolor: #F5E0E0 !default;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-notification-animation-duration: 0.3s !default;
 
@@ -43,20 +35,20 @@ $tc-notification-icon-size: $svg-md-size !default;
 
 	&-info,
 	&-info &-title {
-		background: $tc-notification-info-bgcolor;
-		color: $tc-notification-info-color;
+		background: tokens.$coral-color-success-background;
+		color: tokens.$coral-color-success-text-strong;
 	}
 
 	&-warning,
 	&-warning &-title {
-		background: $tc-notification-warning-bgcolor;
-		color: $tc-notification-warning-color;
+		background: tokens.$coral-color-warning-background;
+		color: tokens.$coral-color-warning-text-strong;
 	}
 
 	&-error,
 	&-error &-title {
-		background: $tc-notification-error-bgcolor;
-		color: $tc-notification-error-color;
+		background: tokens.$coral-color-danger-background;
+		color: tokens.$coral-color-danger-text-strong;
 	}
 
 	&-title {
@@ -93,7 +85,7 @@ $tc-notification-icon-size: $svg-md-size !default;
 		}
 
 		&-action {
-			color: #1BABCD;
+			color: tokens.$coral-color-accent-text;
 			padding: 0 $padding-small;
 
 			svg {
diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss
index 12cb07bb407..01f92ef2d2d 100644
--- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss
+++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss
@@ -1,7 +1,8 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 @mixin chevron($color) {
-	border: 1px solid $scooter;
+	border: 1px solid tokens.$coral-color-accent-border;
 	padding: 3px;
 	border-radius: 10px;
 	color: $color;
@@ -47,14 +48,14 @@
 			outline: none;
 
 			> .line {
-				background: rgba($black, 0.05);
-				color: $scooter;
+				background: tokens.$coral-color-neutral-background-medium;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 
 		&[aria-selected='true'] > .line {
-			background-color: rgba(93, 136, 170, 0.1);
-			color: $dove-gray;
+			background-color: tokens.$coral-color-accent-background;
+			color: tokens.$coral-color-accent-text-active;
 		}
 
 		.line {
@@ -71,7 +72,7 @@
 				> svg {
 					width: 0.9rem;
 					height: 0.9rem;
-					color: $scooter;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 
@@ -97,18 +98,18 @@
 
 		.complex-item {
 			flex: 1 1 auto;
-			border-left: solid 1px $alto;
+			border-left: solid 1px tokens.$coral-color-neutral-border-weak;
 			margin-left: $padding-smaller;
 			max-width: 100%;
 		}
 
 		.key {
 			padding-left: $padding-smaller;
-			color: $dove-gray;
+			color: tokens.$coral-color-neutral-text-weak;
 		}
 
 		.value {
-			color: $brand-primary;
+			color: tokens.$coral-color-accent-text-strong;
 			margin-left: $padding-smaller;
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -126,7 +127,7 @@
 		.type {
 			font-family: 'Inconsolata';
 			font-size: 1.2rem;
-			color: $dark-silver;
+			color: tokens.$coral-color-neutral-text-weak;
 			opacity: 0.75;
 			display: inline;
 			margin-right: $padding-normal;
@@ -137,8 +138,8 @@
 		.badge {
 			top: -0.1rem;
 			margin-left: $padding-small;
-			background-color: rgba($brand-primary, 0.3);
-			color: $brand-primary;
+			background-color: tokens.$coral-color-accent-background;
+			color: tokens.$coral-color-accent-text;
 			font-size: 1rem;
 			padding: calc(#{$padding-smaller} / 2) $padding-smaller;
 			display: inline-table;
@@ -148,13 +149,13 @@
 
 .chevron {
 	svg {
-		@include chevron($scooter);
+		@include chevron(tokens.$coral-color-accent-text);
 	}
 }
 
 .chevron-filled {
 	svg {
-		@include chevron($white);
-		background-color: $scooter;
+		@include chevron(tokens.$coral-color-accent-text-strong);
+		background-color: tokens.$coral-color-accent-background;
 	}
 }
diff --git a/packages/components/src/ObjectViewer/List/List.module.scss b/packages/components/src/ObjectViewer/List/List.module.scss
index c9d055b1f93..90839c212e3 100644
--- a/packages/components/src/ObjectViewer/List/List.module.scss
+++ b/packages/components/src/ObjectViewer/List/List.module.scss
@@ -1,10 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // List styles
 .container {
 	> li {
 		padding-top: $padding-smaller;
 		padding-bottom: $padding-smaller;
-		border-bottom: 1px solid $concrete;
+		border-bottom: 1px solid tokens.$coral-color-neutral-border;
 	}
 }
diff --git a/packages/components/src/ObjectViewer/Table/Table.module.scss b/packages/components/src/ObjectViewer/Table/Table.module.scss
index 10bab45c89e..9c9ab2a83e6 100644
--- a/packages/components/src/ObjectViewer/Table/Table.module.scss
+++ b/packages/components/src/ObjectViewer/Table/Table.module.scss
@@ -1,4 +1,6 @@
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .table {
 	font-size: 12px;
@@ -10,7 +12,7 @@
 	.nativevalue {
 		font-family: $font-family-monospace;
 		font-size: $font-size-small;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text;
 		padding: 0;
 	}
 
@@ -19,8 +21,8 @@
 	}
 
 	&:global(.table) > thead > tr {
-		background-color: $brand-primary-dark;
-		color: $white;
+		background-color: tokens.$coral-color-accent-background-strong;
+		color: tokens.$coral-color-accent-text-weak;
 		font-family: 'Source Sans Pro';
 
 		& > th {
@@ -43,7 +45,7 @@
 	:global(.btn-link) {
 		font-family: 'Inconsolata';
 		font-size: 12px;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-text-weak;
 		padding: 0;
 	}
 }
diff --git a/packages/components/src/PieChart/PieChart.module.scss b/packages/components/src/PieChart/PieChart.module.scss
index f9dab4cc9bb..31f738c4474 100644
--- a/packages/components/src/PieChart/PieChart.module.scss
+++ b/packages/components/src/PieChart/PieChart.module.scss
@@ -1,15 +1,16 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '~@talend/bootstrap-theme/src/theme/animation';
+
 $tc-pie-chart-font-size: $font-size-large !default;
 $tc-pie-chart-loading-min-height-no-label: 20px !default;
 $tc-pie-chart-loading-min-height: 25px !default;
 $tc-pie-chart-skeleton-label-width: 40px !default;
 $tc-pie-chart-skeleton-label-height: 14px !default;
 $tc-pie-chart-loading-margin-left: 4px !default;
-$tc-pie-chart-hover-color: $scooter !default;
+$tc-pie-chart-hover-color: tokens.$coral-color-accent-text !default;
 
-$tc-pie-chart-colors: (rio-grande $rio-grande, jaffa $jaffa, chestnut-rose $chestnut-rose, lightning-yellow $lightning-yellow, dove-gray $dove-gray, silver-chalice $silver-chalice, alto $alto) !default;
+$tc-pie-chart-colors: (rio-grande tokens.$coral-color-charts-success, jaffa tokens.$coral-color-charts-warning, chestnut-rose tokens.$coral-color-charts-danger, lightning-yellow tokens.$coral-color-charts-color-00, dove-gray tokens.$coral-color-charts-neutral-strong, silver-chalice tokens.$coral-color-charts-neutral, alto tokens.$coral-color-charts-neutral-weak) !default;
 
 @mixin apply-color($color) {
 	color: $color;
@@ -46,21 +47,21 @@ $tc-pie-chart-colors: (rio-grande $rio-grande, jaffa $jaffa, chestnut-rose $ches
 	&:hover,
 	&:active,
 	&:focus {
-		color: $scooter;
+		color: tokens.$coral-color-accent-text;
 		text-decoration: none;
 	}
 
 	&.active {
-		background-color: $brand-primary;
-		border-color: $brand-primary;
-		color: $white;
+		background-color: tokens.$coral-color-accent-background-strong-active;
+		border-color: tokens.$coral-color-accent-background-strong-active;
+		color: tokens.$coral-color-accent-text-weak;
 
 		&:hover,
 		&:active,
 		&:focus {
-			background-color: $scooter;
-			border-color: $scooter;
-			color: $white;
+			background-color: tokens.$coral-color-accent-background;
+			border-color: tokens.$coral-color-accent-background;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 }
@@ -72,7 +73,7 @@ $tc-pie-chart-colors: (rio-grande $rio-grande, jaffa $jaffa, chestnut-rose $ches
 
 	background-color: transparent;
 	border: none;
-	color: $gray;
+	color: tokens.$coral-color-neutral-text-weak;
 
 	box-shadow: none;
 	line-height: unset;
diff --git a/packages/components/src/Progress/Progress.module.scss b/packages/components/src/Progress/Progress.module.scss
index d9c2c61e5b6..2984152b2c8 100644
--- a/packages/components/src/Progress/Progress.module.scss
+++ b/packages/components/src/Progress/Progress.module.scss
@@ -1,6 +1,6 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-progress-color: $brand-success !default;
 $infinite-indicator-ratio: 3;
 $infinite-indicator-width: calc(100% / $infinite-indicator-ratio);
 
@@ -30,14 +30,14 @@ $infinite-indicator-width: calc(100% / $infinite-indicator-ratio);
 	}
 
 	.progress-percent {
-		background: $tc-progress-color;
+		background: tokens.$coral-color-success-background-strong;
 		height: 100%;
 		transition: width 200ms ease;
 		overflow: hidden;
 
 		.infinite-indicator {
 			height: 100%;
-			background: $white;
+			background: tokens.$coral-color-neutral-background;
 			position: relative;
 			width: $infinite-indicator-width;
 			animation-fill-mode: forwards;
@@ -59,7 +59,7 @@ $infinite-indicator-width: calc(100% / $infinite-indicator-ratio);
 	background-color: transparent;
 
 	:global(.progress-bar) {
-		background-color: $rio-grande;
+		background-color: tokens.$coral-color-success-background-strong;
 		box-shadow: none;
 	}
 }
diff --git a/packages/components/src/QualityBar/QualityRatioBar.module.scss b/packages/components/src/QualityBar/QualityRatioBar.module.scss
index 78bf9aab60a..ebaab1915db 100644
--- a/packages/components/src/QualityBar/QualityRatioBar.module.scss
+++ b/packages/components/src/QualityBar/QualityRatioBar.module.scss
@@ -1,5 +1,4 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/tokens';
 
 $custom-quality-bar-placeholder-line-hover-height: 0.4rem;
diff --git a/packages/components/src/RadarChart/RadarChart.component.js b/packages/components/src/RadarChart/RadarChart.component.js
index 9e8e7055331..9b800d8b335 100644
--- a/packages/components/src/RadarChart/RadarChart.component.js
+++ b/packages/components/src/RadarChart/RadarChart.component.js
@@ -6,6 +6,7 @@ import {
 	Radar,
 	PolarAngleAxis,
 } from 'recharts';
+import tokens from '@talend/design-tokens';
 import PropTypes from 'prop-types';
 import radarChartCssModule from './RadarChart.module.scss';
 import { getTheme } from '../theme';
@@ -51,6 +52,7 @@ export function RadarChart({
 			width={width}
 			height={height}
 			data={data}
+			fill={tokens.coralColorNeutralBorder}
 		>
 			<PolarGrid />
 			<PolarRadiusAxis domain={domain} tick={tick} axisLine={tickLine} />
@@ -138,7 +140,7 @@ Dot.propTypes = {
  * @param {Object} props the current props of the Radar
  */
 function DotWithClick(props) {
-	const { activeAxis, fill, index, onClick, ...rest } = props;
+	const { activeAxis, fill = tokens.coralColorNeutralBorder, index, onClick, ...rest } = props;
 	const STATE = {
 		DEFAULT_RADIUS: 2,
 		DEFAULT_STROKE_WIDTH: 12,
diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss
index cf63d8f6141..12db652ce3a 100644
--- a/packages/components/src/RadarChart/RadarChart.module.scss
+++ b/packages/components/src/RadarChart/RadarChart.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-radar-chart {
 	:global {
@@ -14,6 +15,6 @@
 }
 
 .tc-radar-chart-label--selected {
-	fill: $regal-blue;
+	fill: tokens.$coral-color-charts-default-strong;
 	font-weight: 600;
 }
diff --git a/packages/components/src/RadarChart/RadarChart.stories.js b/packages/components/src/RadarChart/RadarChart.stories.js
index 95c4066dae1..4db221f8e0a 100644
--- a/packages/components/src/RadarChart/RadarChart.stories.js
+++ b/packages/components/src/RadarChart/RadarChart.stories.js
@@ -1,4 +1,6 @@
 import { action } from '@storybook/addon-actions';
+import tokens from '@talend/design-tokens';
+
 import RadarChart from '.';
 
 const ExampleDataSingle = [
@@ -42,8 +44,8 @@ export const RadarChartSingle = () => (
 				name="Trust score"
 				dataKey="A"
 				dot={true}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -60,16 +62,16 @@ export const RadarChartMultiple = () => (
 				name="Trust score 2019"
 				dataKey="A"
 				dot={false}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 			<RadarChart.Radar
 				name="Trust score 2020"
 				dataKey="B"
 				dot={false}
-				stroke="#EA8330"
-				fill="#EA8330"
+				stroke={tokens.coralColorChartsWarning}
+				fill={tokens.coralColorChartsWarning}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -89,10 +91,10 @@ export const RadarChartClickableLabel = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={false}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -107,10 +109,10 @@ export const RadarChartClickableDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.DotWithClick activeAxis={2} onClick={action('Axis dot was clicked')} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -125,10 +127,10 @@ export const RadarChartCustomDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.Dot activeAxis={2} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 
diff --git a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap
index 0348f2950c9..cd01bdcdcc1 100644
--- a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap
+++ b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap
@@ -10,6 +10,7 @@ exports[`RadarChart should render a RadarChart 1`] = `
     class="recharts-surface"
     cx="210"
     cy="140"
+    fill="var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))"
     height="250"
     viewBox="0 0 420 250"
     width="420"
diff --git a/packages/components/src/ResourceList/Resource/Resource.module.scss b/packages/components/src/ResourceList/Resource/Resource.module.scss
index 58d9186aa92..f450013ca6a 100644
--- a/packages/components/src/ResourceList/Resource/Resource.module.scss
+++ b/packages/components/src/ResourceList/Resource/Resource.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .resource-item {
 	padding-left: $padding-normal;
@@ -31,7 +32,7 @@
 			white-space: nowrap;
 			font-size: 14px;
 			display: block;
-			color: $dove-gray;
+			color: tokens.$coral-color-neutral-text;
 			margin: 0;
 		}
 
@@ -53,11 +54,11 @@
 			}
 
 			&[name='talend-star'] {
-				color: $lightning-yellow;
+				color: tokens.$coral-color-warning-text;
 			}
 
 			&[name='talend-badge'] {
-				color: $brand-primary;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
@@ -67,7 +68,7 @@
 	&:global(.selected),
 	&:active {
 		:global(.tc-svg-icon) {
-			color: $brand-primary;
+			color: tokens.$coral-color-accent-text;
 		}
 
 		.flags-container {
@@ -76,25 +77,25 @@
 	}
 
 	&:hover {
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background-medium;
 
 		.data-container {
 			> .title,
 			> .author,
 			> .subtitle {
-				color: $scooter;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
 
 	&:global(.selected) {
-		background: tint($scooter, 90);
+		background: tokens.$coral-color-accent-background;
 
 		.data-container {
 			> .title,
 			> .author,
 			> .subtitle {
-				color: $dove-gray;
+				color: tokens.$coral-color-neutral-text;
 			}
 		}
 	}
@@ -139,7 +140,7 @@
 
 				.tc-svg-icon {
 					margin: 0 $padding-smaller;
-					color: $brand-primary;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 
diff --git a/packages/components/src/ResourceList/ResourceList.module.scss b/packages/components/src/ResourceList/ResourceList.module.scss
index da303e78591..be003410190 100644
--- a/packages/components/src/ResourceList/ResourceList.module.scss
+++ b/packages/components/src/ResourceList/ResourceList.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-resource-list-margin-top: 2rem !default;
 $tc-resource-list-height: 25rem !default;
@@ -35,7 +36,7 @@ $tc-resource-list-height: 25rem !default;
 			display: inline-flex;
 			align-items: center;
 			font-style: italic;
-			color: $gray;
+			color: tokens.$coral-color-neutral-text;
 		}
 
 		&-icon {
diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss
index 28f6fe035d1..8b1f14096c0 100644
--- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss
+++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-resource-picker-name-filter {
 	flex: 1;
@@ -17,7 +18,7 @@
 
 .remove {
 	display: none;
-	color: opacify($gray, 0.2);
+	color: tokens.$coral-color-neutral-text;
 	padding: $padding-smaller 0;
 	line-height: 2rem;
 	height: 100%;
diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss
index 96a701f0092..8c781b15408 100644
--- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss
+++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss
@@ -5,7 +5,6 @@ $tc-resource-picker-order-chooser-icon-size: 0.6rem !default;
 .tc-resource-picker-order-chooser {
 	display: flex;
 	padding: 0;
-	background: $white;
 
 	&:hover,
 	&:focus,
diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss
index 32086fd993a..ac6208d2ca7 100644
--- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss
+++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss
@@ -1,7 +1,8 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-resource-picker-toolbar-favorite-color: $lightning-yellow !default;
-$tc-resource-picker-toolbar-certified-color: $brand-primary !default;
+$tc-resource-picker-toolbar-favorite-color: tokens.$coral-color-warning-text !default;
+$tc-resource-picker-toolbar-certified-color: tokens.$coral-color-accent-text !default;
 
 .tc-resource-picker-state-filters {
 	margin-right: $padding-normal;
@@ -14,22 +15,16 @@ $tc-resource-picker-toolbar-certified-color: $brand-primary !default;
 
 	// ActionIconToggle style reset :
 	:global(.tc-icon-toggle) {
-		background: none;
 		border: none;
 		box-shadow: none;
-		width: $svg-md-size;
 
-		> svg {
+		> :global(.tc-icon) {
 			margin: 0;
-			width: $svg-md-size;
-			height: $svg-md-size;
-			color: $dove-gray;
 		}
 
 		&:hover:not([disabled]),
 		&:focus,
 		&:active {
-			background: none;
 			border: none;
 		}
 	}
@@ -41,7 +36,7 @@ $tc-resource-picker-toolbar-certified-color: $brand-primary !default;
 		&:global(.active),
 		&:hover {
 			&.tc-resource-picker-selection-filter > svg {
-				color: $scooter;
+				color: tokens.$coral-color-accent-text;
 			}
 
 			&.tc-resource-picker-favorite-filter > svg {
diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss
index 611e2696be7..116e291fc03 100644
--- a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss
+++ b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-resource-list-toolbar {
 	display: flex;
-	background: $white;
+	background: tokens.$coral-color-neutral-background-medium;
 
 	> * {
 		margin: 0 $padding-normal;
diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.scss b/packages/components/src/ResourcePicker/ResourcePicker.module.scss
index ba176f56caa..9e8b53a7855 100644
--- a/packages/components/src/ResourcePicker/ResourcePicker.module.scss
+++ b/packages/components/src/ResourcePicker/ResourcePicker.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
 $tc-resource-picker-toolbar-height: 3.5rem !default;
 $tc-resource-picker-height: 25rem !default;
@@ -25,11 +26,7 @@ $tc-resource-picker-height: 25rem !default;
 		}
 
 		.resource-item {
-			border-bottom: 0.1rem solid $gallery;
-
-			.tc-svg-icon {
-				color: $dove-gray;
-			}
+			border-bottom: 0.1rem solid tokens.$coral-color-neutral-border;
 		}
 	}
 }
diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss
index d2a22df7637..3b3481913c6 100644
--- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss
+++ b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-header-title-font-size: 1.6rem !default;
 $tc-header-title-font-weight: 700 !default;
@@ -10,7 +11,7 @@ $tc-header-title-font-weight: 700 !default;
 }
 
 .title {
-	color: $black;
+	color: tokens.$coral-color-neutral-text;
 	flex-grow: 1;
 	margin: 0;
 	white-space: nowrap;
diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss
index 9c40563ea8c..40bad98e2a1 100644
--- a/packages/components/src/Rich/Layout/RichLayout.module.scss
+++ b/packages/components/src/Rich/Layout/RichLayout.module.scss
@@ -1,19 +1,20 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-popover-border-width: 0.1rem !default;
-$tc-popover-border-color: rgb(226, 226, 226) !default;
+$tc-popover-border-color: tokens.$coral-color-neutral-border !default;
 $tc-popover-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
 $tc-popover-body-min-height: 10rem !default;
 $tc-popover-body-max-height: 30rem !default;
 $tc-popover-max-width: 40rem !default;
-$tc-popover-header-border-color: #EDEDED !default;
+$tc-popover-header-border-color: tokens.$coral-color-neutral-border !default;
 $tc-popover-header-footer-height: 7rem !default;
 
 :global(.popover) {
 	padding: 0;
 	border: $tc-popover-border-width solid $tc-popover-border-color;
 	border-radius: $border-radius-base;
-	background-color: $white;
+	background-color: tokens.$coral-color-neutral-background;
 	box-shadow: $tc-popover-box-shadow;
 	max-width: $tc-popover-max-width;
 }
@@ -42,7 +43,7 @@ $tc-popover-header-footer-height: 7rem !default;
 	align-items: center;
 
 	> :global(.tc-actionbar-container) {
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background;
 		padding: 0;
 	}
 }
@@ -65,7 +66,7 @@ $tc-popover-header-footer-height: 7rem !default;
 	display: flex;
 	flex-direction: row;
 	margin: $padding-large;
-	color: $dove-gray;
+	color: tokens.$coral-color-neutral-text;
 }
 
 .content:not(:empty) {
diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js
index 8f230f08146..90109896032 100644
--- a/packages/components/src/SidePanel/SidePanel.component.js
+++ b/packages/components/src/SidePanel/SidePanel.component.js
@@ -110,7 +110,14 @@ function SidePanel({
 	const toggleButtonTitle = docked ? expandLabel : collapseTitle;
 	const Components = Inject.getAll(getComponent, { Action, ActionList });
 	return (
-		<nav id={id} className={navCSS} role="navigation" ref={ref} style={{ width }}>
+		<nav
+			id={id}
+			className={navCSS}
+			role="navigation"
+			ref={ref}
+			style={{ width }}
+			data-theme="light"
+		>
 			{backgroundIcon && (
 				<style>
 					{`#${id}::before {
@@ -155,6 +162,7 @@ function SidePanel({
 						onSelect={onSelect}
 						selected={selected}
 						actions={actions}
+						reverse={!reverse}
 						id={id}
 						isNav
 					/>
diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss
index 908f09135c9..c316cd382c9 100644
--- a/packages/components/src/SidePanel/SidePanel.module.scss
+++ b/packages/components/src/SidePanel/SidePanel.module.scss
@@ -1,6 +1,7 @@
+/* stylelint-disable color-hex-case */
+/* stylelint-disable declaration-no-important */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@use '~@talend/design-tokens/lib/_tokens.scss' as tokens;
+@use '~@talend/design-tokens/lib/tokens';
 
 ////
 /// Side panel
@@ -8,10 +9,6 @@
 ////
 
 $list-item-height: 3rem !default;
-$list-item-hover-color: rgba($white, 0.12) !default;
-$list-item-reverse-hover-color: rgba($black, 0.12) !default;
-$list-item-color: $white !default;
-$list-item-reverse-color: $brand-primary !default;
 $toggle-height: 70px;
 $toggle-button-opacity: 0.75;
 $tc-side-panel-large-padding: 25px !default;
@@ -21,16 +18,15 @@ $toggle-button-padding: $padding-small;
 $docked-width: 6rem;
 $large-docked-width: 7rem;
 
-.tc-side-panel,
-[role='navigation'] {
+.tc-side-panel {
 	display: flex;
 	flex-direction: column;
 	font-weight: 500;
-	background: linear-gradient(133deg, #19426c 0%, #2c1f56 100%) !important; // sass-lint:disable-line no-important
+	background: tokens.$coral-color-branding-navigation;
 	overflow: hidden;
 	position: relative;
 
-	&:before {
+	&::before {
 		left: 1rem;
 		bottom: -5rem;
 	}
@@ -39,18 +35,18 @@ $large-docked-width: 7rem;
 		transition: 0.2s width ease-out;
 	}
 
-	.action-list-container.action-list-container {
+	.action-list-container {
 		flex: 1;
 		height: calc(100vh - 12rem); // specific to Safari
 
 		:global .tc-side-panel-list {
-			background: none;
+			background: transparent;
 		}
 
 		:global .tc-action-list-item {
 			width: calc(100% - 2rem);
-			background: none !important; // sass-lint:disable-line no-important
-			box-shadow: none !important; // sass-lint:disable-line no-important
+			background: none !important;
+			box-shadow: none !important;
 
 			.btn.btn-link {
 				display: flex;
@@ -66,26 +62,15 @@ $large-docked-width: 7rem;
 					margin-left: $padding-small;
 				}
 			}
+
 			.tc-svg-icon {
 				width: $tc-side-panel-icons-size;
 				height: $tc-side-panel-icons-size;
 			}
+
 			:global(svg) {
 				margin-left: $padding-smaller;
 			}
-
-			&:hover {
-				.btn.btn-link {
-					background: rgba(255, 255, 255, 0.12);
-				}
-			}
-
-			&.active {
-				.btn.btn-link {
-					color: $brand-primary;
-					background: $white;
-				}
-			}
 		}
 	}
 
@@ -100,7 +85,7 @@ $large-docked-width: 7rem;
 
 		:global {
 			.btn.btn-link {
-				color: $white;
+				color: tokens.$coral-color-neutral-text-inverted;
 				line-height: 1;
 				height: $toggle-height;
 				padding: 0 $padding-small;
@@ -121,10 +106,6 @@ $large-docked-width: 7rem;
 					border: none;
 				}
 
-				&:hover {
-					opacity: 1;
-				}
-
 				.tc-svg-icon {
 					width: $svg-sm-size;
 					height: $svg-sm-size;
@@ -143,6 +124,7 @@ $large-docked-width: 7rem;
 					opacity: 0;
 				}
 			}
+
 			.tc-action-list {
 				width: $docked-width;
 				min-width: auto;
@@ -178,11 +160,7 @@ $large-docked-width: 7rem;
 
 			.tc-action-list-item {
 				.btn.btn-link {
-					padding: $padding-normal $tc-side-panel-large-padding;
-
-					.tc-svg-icon {
-						margin-left: $padding-small;
-					}
+					padding: $padding-small; // $tc-side-panel-large-padding;
 
 					.tc-svg-icon + span {
 						margin-left: $tc-side-panel-large-padding;
@@ -198,10 +176,12 @@ $large-docked-width: 7rem;
 					min-width: auto;
 				}
 			}
+
 			.toggle-btn {
 				height: $toggle-height;
 				vertical-align: center;
 				padding: 0;
+
 				.btn.btn-link {
 					height: $toggle-height;
 					padding: 0;
@@ -211,9 +191,10 @@ $large-docked-width: 7rem;
 	}
 
 	&.reverse[role='navigation'] {
-		background: $wild-sand !important; // sass-lint:disable-line no-important
+		background: tokens.$coral-color-neutral-background-medium !important;
+		color: tokens.$coral-color-neutral-text !important;
 
-		&:before {
+		&::before {
 			content: none;
 		}
 
@@ -223,35 +204,7 @@ $large-docked-width: 7rem;
 			:global {
 				.btn.btn-link,
 				.tc-svg-icon {
-					color: $gray700;
-				}
-			}
-		}
-
-		:global {
-			.tc-action-list-item {
-				color: $gray700;
-
-				&:hover {
-					.btn.btn-link {
-						background: $list-item-reverse-hover-color;
-					}
-
-					.btn.btn-link,
-					.tc-svg-icon {
-						color: $black;
-					}
-				}
-
-				&.active {
-					.btn.btn-link {
-						background: $list-item-color;
-					}
-
-					.btn.btn-link,
-					.tc-svg-icon {
-						color: $brand-primary;
-					}
+					color: tokens.$coral-color-neutral-text-weak;
 				}
 			}
 		}
diff --git a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index 915394e75d5..f48439daf77 100644
--- a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -3,6 +3,7 @@
 exports[`SidePanel should render 1`] = `
 <nav
   class="theme-tc-side-panel tc-side-panel"
+  data-theme="light"
   id="sp"
   role="navigation"
   style="width: 0px;"
@@ -29,7 +30,7 @@ exports[`SidePanel should render 1`] = `
     data-simplebar="true"
   >
     <ul
-      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse"
+      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse nav-inverse"
     >
       <li
         class="theme-tc-action-list-item tc-action-list-item"
diff --git a/packages/components/src/Skeleton/Skeleton.module.scss b/packages/components/src/Skeleton/Skeleton.module.scss
index c74521186e9..c1d8ea901c4 100644
--- a/packages/components/src/Skeleton/Skeleton.module.scss
+++ b/packages/components/src/Skeleton/Skeleton.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '@talend/design-tokens/lib/tokens';
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
 $tc-skeleton-border-radius: 4px !default;
@@ -15,7 +15,7 @@ $tc-skeleton-text-width-large: 130px !default;
 $tc-skeleton-text-width-extra-large: 160px !default;
 $tc-skeleton-button-height: 35px !default;
 $tc-skeleton-button-width: 80px !default;
-$tc-skeleton-color: $black !default;
+$tc-skeleton-color: tokens.$coral-color-neutral-text !default;
 
 :global(.tc-skeleton-heartbeat) {
 	@include heartbeat(skeleton-blink);
diff --git a/packages/components/src/Slider/Slider.module.scss b/packages/components/src/Slider/Slider.module.scss
index 4e930abba63..82feb8958dc 100644
--- a/packages/components/src/Slider/Slider.module.scss
+++ b/packages/components/src/Slider/Slider.module.scss
@@ -32,7 +32,7 @@ $tc-slider-line-height: 24px;
 		justify-content: space-between;
 		width: 100%;
 		margin-top: $padding-small;
-		color: $gray;
+		color: tokens.$coral-color-neutral-text;
 		font-size: $tc-slider-font-size;
 
 		&-element {
@@ -49,7 +49,7 @@ $tc-slider-line-height: 24px;
 
 			&.selected {
 				:global(.tc-svg-icon) {
-					fill: $brand-primary;
+					fill: tokens.$coral-color-accent-text;
 				}
 			}
 		}
@@ -58,10 +58,10 @@ $tc-slider-line-height: 24px;
 			height: $tc-slider-line-height;
 			width: $tc-slider-line-height;
 			margin: 0;
-			fill: $gray;
+			fill: tokens.$coral-color-neutral-icon;
 
 			&.selected {
-				fill: $brand-primary;
+				fill: tokens.$coral-color-accent-icon;
 			}
 		}
 	}
@@ -76,22 +76,22 @@ $tc-slider-line-height: 24px;
 		}
 
 		:global(.rc-slider-rail) {
-			background-color: $alto;
+			background-color: tokens.$coral-color-neutral-background-medium;
 		}
 
 		:global(.rc-slider-track) {
-			background-color: $brand-primary;
+			background-color: tokens.$coral-color-accent-text;
 		}
 
 		:global(.rc-slider-handle) {
-			border: 1px solid $alto;
+			border: 1px solid tokens.$coral-color-neutral-border;
 			box-shadow: $tc-slider-thumb-shadow;
-			background-color: $wild-sand;
+			background-color: tokens.$coral-color-neutral-background-medium;
 			opacity: 1;
 
 			&:hover,
 			&:focus {
-				background-color: $white;
+				background-color: tokens.$coral-color-neutral-background;
 				box-shadow: $tc-slider-thumb-shadow-focused;
 			}
 		}
@@ -100,11 +100,11 @@ $tc-slider-line-height: 24px;
 		&--track-exclusive {
 			:global {
 				.rc-slider-rail {
-					background-color: $brand-primary;
+					background-color: tokens.$coral-color-accent-text;
 				}
 
 				.rc-slider-track {
-					background-color: $alto;
+					background-color: tokens.$coral-color-neutral-background-medium;
 				}
 			}
 		}
@@ -113,12 +113,12 @@ $tc-slider-line-height: 24px;
 			:global {
 				.rc-slider-rail,
 				.rc-slider-track {
-					background-color: $alto;
+					background-color: tokens.$coral-color-neutral-background;
 				}
 
 				.rc-slider-handle {
 					box-shadow: $tc-slider-thumb-shadow;
-					background-color: $brand-primary;
+					background-color: tokens.$coral-color-accent-text;
 				}
 			}
 		}
diff --git a/packages/components/src/Status/Status.module.scss b/packages/components/src/Status/Status.module.scss
index 3b9bb7f8454..c63aed468b0 100644
--- a/packages/components/src/Status/Status.module.scss
+++ b/packages/components/src/Status/Status.module.scss
@@ -1,21 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-status-icon-size: $svg-md-size !default;
 $tc-status-action-min-size: 23px !default;
 $tc-status-space-btn-icon-label: 5px !default;
 
-$tc-status-info-icon-color: $lochmara !default;
-$tc-status-success-icon-color: $rio-grande500 !default;
-$tc-status-danger-icon-color: $coral !default;
-$tc-status-muted-icon-color: $gray500 !default;
-$tc-status-warning-icon-color: $jaffa !default;
-
-$tc-status-info-label-color: $lochmara700 !default;
-$tc-status-success-label-color: $rio-grande700 !default;
-$tc-status-danger-label-color: $coral700 !default;
-$tc-status-muted-label-color: $gray700 !default;
-$tc-status-warning-label-color: $jaffa700 !default;
-
 .tc-status {
 	position: relative;
 	display: flex;
@@ -32,27 +21,23 @@ $tc-status-warning-label-color: $jaffa700 !default;
 		}
 
 		&.info {
-			color: $tc-status-info-icon-color;
+			color: tokens.$coral-color-accent-icon;
 		}
 
 		&.success {
-			color: $tc-status-success-icon-color;
+			color: tokens.$coral-color-success-icon;
 		}
 
 		&.danger {
-			color: $tc-status-danger-icon-color;
+			color: tokens.$coral-color-danger-icon;
 		}
 
 		&.muted {
-			color: $tc-status-muted-icon-color;
+			color: tokens.$coral-color-neutral-text-disabled;
 		}
 
 		&.warning {
-			color: $tc-status-warning-icon-color;
-		}
-
-		&.skeleton {
-			color: $gray;
+			color: tokens.$coral-color-warning-icon;
 		}
 	}
 
@@ -60,23 +45,23 @@ $tc-status-warning-label-color: $jaffa700 !default;
 		font-weight: 600;
 
 		&.info {
-			color: $tc-status-info-label-color;
+			color: tokens.$coral-color-accent-text;
 		}
 
 		&.success {
-			color: $tc-status-success-label-color;
+			color: tokens.$coral-color-success-text;
 		}
 
 		&.danger {
-			color: $tc-status-danger-label-color;
+			color: tokens.$coral-color-danger-text;
 		}
 
 		&.muted {
-			color: $tc-status-muted-label-color;
+			color: tokens.$coral-color-neutral-text-disabled;
 		}
 
 		&.warning {
-			color: $tc-status-warning-label-color;
+			color: tokens.$coral-color-warning-text;
 		}
 	}
 
diff --git a/packages/components/src/Status/Status.stories.js b/packages/components/src/Status/Status.stories.js
index b9425892564..276a9050065 100644
--- a/packages/components/src/Status/Status.stories.js
+++ b/packages/components/src/Status/Status.stories.js
@@ -66,6 +66,10 @@ export const Default = () => (
 			Status is <code>canceled</code>
 		</h3>
 		<Status {...myStatus} status="canceled" label="Canceled" icon="talend-block" />
+		<h3>
+			Status is <code>skeleton</code>
+		</h3>
+		<Status status="skeleton" label="Skeleton" icon="talend-pencil" />
 		<h3>Status without actions</h3>
 		<Status {...{ ...myStatus, actions: [] }} />
 		<h3>
diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss
index 3edb45cf42e..2809e1276e6 100644
--- a/packages/components/src/Stepper/Stepper.component.module.scss
+++ b/packages/components/src/Stepper/Stepper.component.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $stepper-icon-size: $svg-md-size !default;
 
@@ -40,7 +41,7 @@ $stepper-icon-size: $svg-md-size !default;
 		}
 
 		&-failure {
-			color: $chestnut-rose;
+			color: tokens.$coral-color-danger-text;
 			font-weight: $font-weight-bold;
 		}
 	}
@@ -51,11 +52,11 @@ $stepper-icon-size: $svg-md-size !default;
 		height: $stepper-icon-size;
 
 		&-success {
-			fill: $rio-grande;
+			fill: tokens.$coral-color-success-text;
 		}
 
 		&-failure {
-			fill: $chestnut-rose;
+			fill: tokens.$coral-color-danger-text;
 		}
 
 		&-aborted {
diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss
index ac8f11393af..3bd5e957233 100644
--- a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss
+++ b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss
@@ -1,18 +1,19 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
 @mixin input-icon($margin-left) {
 	margin-top: 1rem;
 	margin-left: $margin-left;
 }
 
-$tc-subheader-active-color: darken($scooter, 12%) !default;
-$tc-subheader-hover-focus-color: $scooter !default;
-$tc-subheader-color: $gray !default;
+$tc-subheader-active-color: tokens.$coral-color-accent-text-active !default;
+$tc-subheader-hover-focus-color: tokens.$coral-color-accent-text-hover !default;
+$tc-subheader-color: tokens.$coral-color-neutral-text !default;
 $tc-subheader-bar-height: 7rem !default;
 $tc-svg-icon-size: $padding-large !default;
 
 .tc-subheader {
-	border-bottom: 0.1rem solid $gallery;
+	border-bottom: 0.1rem solid tokens.$coral-color-neutral-border-weak;
 	width: 100%;
 
 	:global(.btn-link),
@@ -21,17 +22,17 @@ $tc-svg-icon-size: $padding-large !default;
 
 		&:focus,
 		&:hover {
-			color: $scooter;
+			color: tokens.$coral-color-accent-text-hover;
 		}
 
 		&:active {
-			color: darken($scooter, 12%);
+			color: tokens.$coral-color-accent-text-active;
 		}
 	}
 
 	&-navbar {
 		height: $tc-subheader-bar-height;
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background-medium;
 		display: flex;
 		padding: {
 			left: 0;
@@ -73,8 +74,9 @@ $tc-svg-icon-size: $padding-large !default;
 	}
 
 	&-back-button {
-		color: $gray;
-		background-color: $gallery;
+		color: tokens.$coral-color-neutral-text;
+		/* stylelint-disable-next-line declaration-no-important */
+		background-color: tokens.$coral-color-neutral-background-strong !important;
 		width: $tc-subheader-bar-height;
 		height: $tc-subheader-bar-height;
 
@@ -82,7 +84,7 @@ $tc-svg-icon-size: $padding-large !default;
 		&:hover,
 		&:active {
 			color: $tc-subheader-hover-focus-color;
-			background-color: $wild-sand;
+			background-color: tokens.$coral-color-neutral-background-medium;
 		}
 
 		&:active {
diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss
index 1e3889489fb..ac44927d72f 100644
--- a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss
+++ b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss
@@ -26,7 +26,7 @@ $header-title-max-width: 90rem;
 		align-self: center;
 		width: $tc-input-subheader-size-large;
 		height: $tc-input-subheader-size-large;
-		color: $brand-primary;
+		color: tokens.$coral-color-accent-icon;
 		margin-right: $padding-large;
 	}
 
@@ -60,12 +60,11 @@ $header-title-max-width: 90rem;
 			input {
 				width: tokens.$coral-sizing-maximal;
 			}
-
 		}
 
 		&-subtitle {
 			@include ellipsis;
-			color: $black;
+			color: tokens.$coral-color-neutral-text;
 			font-size: $tc-input-subheader-size-medium;
 		}
 	}
diff --git a/packages/components/src/TabBar/TabBar.module.scss b/packages/components/src/TabBar/TabBar.module.scss
index 3ccb3072d57..f67cb9ca92f 100644
--- a/packages/components/src/TabBar/TabBar.module.scss
+++ b/packages/components/src/TabBar/TabBar.module.scss
@@ -1,17 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 
-@function str-replace($string, $search, $replace: '') {
-	$index: str-index($string, $search);
-	@return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string);
-}
-@function hex-to-url($color) {
-	$newcolor: str-replace('' + $color, '#', '%23');
-	@return $newcolor;
-}
-@mixin caret-down($color) {
-	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 13.6l-8-8L2.6 3 8 8.4 13.4 3 16 5.6z" fill="#{hex-to-url($color)}"/></svg>');
-}
-
 .tc-tab-bar-menu {
 	display: flex;
 	align-items: center;
@@ -52,7 +40,7 @@
 			margin-left: $padding-smaller;
 		}
 
-		& > button {
+		> button {
 			max-width: initial;
 		}
 	}
diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss
index 8a94cb172df..11329da8f54 100644
--- a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss
+++ b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss
@@ -1,4 +1,6 @@
+/* stylelint-disable selector-no-qualifying-type */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
 @mixin radio-toolbar-input($color, $opacity) {
 	transition: 0.2s ease-out;
@@ -8,20 +10,23 @@
 
 .tc-label-toggle {
 	display: inline-flex;
-	background-color: $gallery;
+	background-color: tokens.$coral-color-neutral-background-strong;
 	border-radius: $padding-larger;
 	margin-right: $padding-small;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset;
 
 	&.tc-radio-disabled {
 		opacity: 0.54;
+
 		label:hover {
 			cursor: not-allowed;
+
 			&:not(.tc-radio-selected) {
-				background-color: $gallery;
-				color: $black;
+				background-color: tokens.$coral-color-neutral-background;
+				color: tokens.$coral-color-neutral-text;
 			}
 		}
+
 		input[type='radio'] {
 			cursor: not-allowed;
 		}
@@ -34,17 +39,17 @@
 	}
 
 	label {
-		background-color: $gallery;
+		background-color: tokens.$coral-color-neutral-background-strong;
+		color: tokens.$coral-color-neutral-text;
 		padding: 0 8px;
 		border-radius: $padding-larger;
-		color: $black;
 		font-weight: $font-weight-semi-bold;
 		margin: 2px 0;
 		cursor: pointer;
 
 		&:hover {
-			background-color: $scooter;
-			color: $white;
+			background-color: tokens.$coral-color-accent-background-strong-hover;
+			color: tokens.$coral-color-neutral-text-inverted;
 		}
 
 		&:first-of-type {
@@ -56,8 +61,8 @@
 		}
 
 		&.tc-radio-selected {
-			@include radio-toolbar-input($white, 1);
-			background-color: $lochmara;
+			@include radio-toolbar-input(tokens.$coral-color-neutral-text-inverted, 1);
+			background-color: tokens.$coral-color-accent-background-strong-active;
 			font-weight: $font-weight-semi-bold;
 		}
 	}
diff --git a/packages/components/src/TooltipTrigger/Tooltip.stories.js b/packages/components/src/TooltipTrigger/Tooltip.stories.js
index 465bf8a4f07..758ef1e19e3 100644
--- a/packages/components/src/TooltipTrigger/Tooltip.stories.js
+++ b/packages/components/src/TooltipTrigger/Tooltip.stories.js
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-
+import tokens from '@talend/design-tokens';
 import { Button } from '@talend/react-bootstrap';
 import TooltipTrigger from './TooltipTrigger.component';
 
@@ -65,7 +65,7 @@ export const Default = () => {
 							height: '30rem',
 							width: '100rem',
 							overflow: 'auto',
-							background: '#EEE',
+							background: tokens.coralColorNeutralBackgroundMedium,
 							border: '1px solid',
 						}}
 					>
diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss
index 1563b2f2d6c..513641a03d9 100644
--- a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss
+++ b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss
@@ -1,9 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '@talend/design-tokens/lib/tokens';
 
 $tc-tooltip-max-width: 30rem !default;
 $tc-tooltip-font-size: 1.2rem !default;
-$tc-tooltip-color: $white !default;
-$tc-tooltip-background: $dove-gray !default;
+$tc-tooltip-color: tokens.$coral-color-neutral-background !default;
+$tc-tooltip-background: tokens.$coral-color-neutral-text !default;
 $tc-tooltip-border-radius: 0.2rem !default;
 $tc-tooltip-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
 $tc-tooltip-margin: 1rem !default;
diff --git a/packages/components/src/TreeView/TreeView.module.scss b/packages/components/src/TreeView/TreeView.module.scss
index d40026a1209..24027b92029 100644
--- a/packages/components/src/TreeView/TreeView.module.scss
+++ b/packages/components/src/TreeView/TreeView.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // TreeView styles
 
@@ -8,15 +9,15 @@
 		justify-content: space-between;
 		align-items: center;
 
-		color: $brand-primary;
+		color: tokens.$coral-color-accent-text;
 		line-height: 6rem;
 		font-weight: bold;
 
 		padding-left: $padding-large;
-		border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
+		border-bottom: 1px solid tokens.$coral-color-neutral-border;
 
 		:global(.btn-link .tc-svg-icon) {
-			stroke: $brand-primary;
+			stroke: tokens.$coral-color-accent-text;
 		}
 	}
 
diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss
index db30502c15b..9ee464c7f42 100644
--- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss
+++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // TreeView styles
 $item-height: 4rem;
@@ -33,11 +34,11 @@ $item-height: 4rem;
 			cursor: not-allowed;
 
 			.tc-treeview-item-name {
-				color: $black;
+				color: tokens.$coral-color-neutral-text;
 			}
 
 			svg {
-				fill: rgba($black, 0.25);
+				fill: tokens.$coral-color-neutral-icon;
 			}
 		}
 
@@ -52,12 +53,12 @@ $item-height: 4rem;
 
 			svg {
 				width: $svg-sm-size;
-				fill: rgba($black, 0.6);
+				fill: tokens.$coral-color-neutral-icon;
 				margin: 0;
 			}
 
 			&:hover svg {
-				fill: rgba($black, 0.7);
+				fill: tokens.$coral-color-neutral-icon-weak;
 			}
 		}
 
@@ -67,7 +68,7 @@ $item-height: 4rem;
 			margin-right: $padding-large;
 			flex-shrink: 0;
 			flex-grow: 0;
-			fill: rgba($black, 0.25);
+			fill: tokens.$coral-color-neutral-icon-weak;
 		}
 
 		.tc-treeview-img {
@@ -85,27 +86,27 @@ $item-height: 4rem;
 	}
 
 	&[aria-selected='true'] > .tc-treeview-item {
-		background: rgba($scooter, 0.2);
+		background: tokens.$coral-color-accent-background;
 		font-weight: 600;
-		color: $black;
+		color: tokens.$coral-color-neutral-text;
 
 		.tc-treeview-folder {
-			fill: $brand-primary;
+			fill: tokens.$coral-color-accent-icon;
 		}
 	}
 
 	.tc-treeview-item:hover,
 	&:focus > .tc-treeview-item {
-		background: $wild-sand;
-		color: $scooter;
+		background: tokens.$coral-color-neutral-background-medium;
+		color: tokens.$coral-color-accent-text;
 
 		.tc-treeview-folder {
-			fill: $brand-primary;
+			fill: tokens.$coral-color-accent-icon;
 		}
 
 		.tc-treeview-toggle {
 			svg {
-				fill: $scooter;
+				fill: tokens.$coral-color-accent-icon;
 			}
 		}
 
@@ -128,11 +129,11 @@ $item-height: 4rem;
 			padding: 0 $padding-smaller;
 
 			:global(.tc-svg-icon) {
-				fill: rgba($black, 0.6);
+				fill: tokens.$coral-color-neutral-icon;
 				margin: 0;
 
 				&:hover {
-					fill: rgba($black, 0.7);
+					fill: tokens.$coral-color-neutral-icon-weak;
 				}
 			}
 		}
diff --git a/packages/components/src/Typeahead/Typeahead.module.scss b/packages/components/src/Typeahead/Typeahead.module.scss
index 30a160bd934..b3536b5a9b8 100644
--- a/packages/components/src/Typeahead/Typeahead.module.scss
+++ b/packages/components/src/Typeahead/Typeahead.module.scss
@@ -1,20 +1,20 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
-$tc-typeahead-input-color: $black !default;
+$tc-typeahead-input-color: tokens.$coral-color-neutral-text !default;
 $tc-typeahead-input-width: 26rem !default;
 
-$tc-typeahead-opened-items-container-color: $gray300 !default;
-$tc-typeahead-opened-items-container-background-color: $white !default;
+$tc-typeahead-opened-items-container-color: tokens.$coral-color-neutral-text !default;
+$tc-typeahead-opened-items-container-background-color: tokens.$coral-color-neutral-background !default;
 
-$tc-typeahead-section-border-color: $gray75 !default;
+$tc-typeahead-section-border-color: tokens.$coral-color-neutral-border !default;
 
-$tc-typeahead-icon-color: $gray !default;
-$tc-typeahead-only-icon-color: $gray200 !default;
-$tc-typeahead-section-header-color: #63AEBD !default;
+$tc-typeahead-icon-color: tokens.$coral-color-neutral-text !default;
+$tc-typeahead-only-icon-color: tokens.$coral-color-neutral-text !default;
+$tc-typeahead-section-header-color: tokens.$coral-color-accent-text-weak !default;
 
-$tc-typeahead-items-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !default;
+$tc-typeahead-items-box-shadow: tokens.$coral-elevation-shadow-neutral-m !default;
 $tc-typeahead-items-border-radius: $border-radius-base !default;
 $tc-typeahead-items-font-size: 1.4rem !default;
 $tc-typeahead-items-zindex: 1035 !default;
@@ -141,7 +141,7 @@ $tc-typeahead-item-description-height: 1.6rem !default;
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
-	color: $black;
+	color: tokens.$coral-color-neutral-text;
 }
 
 .section-container:not(:first-of-type) {
@@ -151,7 +151,7 @@ $tc-typeahead-item-description-height: 1.6rem !default;
 }
 
 .section-header {
-	color: $black;
+	color: tokens.$coral-color-neutral-text;
 	display: flex;
 	align-items: center;
 	height: $tc-typeahead-item-height;
@@ -178,7 +178,7 @@ $tc-typeahead-item-description-height: 1.6rem !default;
 	svg {
 		width: $svg-md-size;
 		height: $svg-md-size;
-		color: $dove-gray;
+		color: tokens.$coral-color-neutral-icon;
 	}
 }
 
@@ -220,15 +220,15 @@ $tc-typeahead-item-description-height: 1.6rem !default;
 
 	&-highlighted,
 	&:hover {
-		background-color: rgba($lochmara, 0.1);
+		background-color: tokens.$coral-color-accent-background-weak;
 
 		&.selected {
-			background-color: rgba($lochmara, 0.2);
+			background-color: tokens.$coral-color-accent-background-weak-active;
 		}
 	}
 
 	&.disabled {
-		color: $silver-chalice;
+		color: tokens.$coral-color-neutral-text-disabled;
 		cursor: not-allowed;
 
 		&:hover {
@@ -237,6 +237,6 @@ $tc-typeahead-item-description-height: 1.6rem !default;
 	}
 
 	&.selected {
-		background-color: rgba($lochmara, 0.2);
+		background-color: tokens.$coral-color-accent-background-hover;
 	}
 }
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss
index d45f9e10b84..2eebe92d2cd 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss
@@ -1,8 +1,7 @@
+/* stylelint-disable declaration-no-important */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-@import '../colors';
-
-$tc-list-title-color: $black !default;
 $tc-list-title-icon-size: $svg-rg-size !default;
 
 .tc-list-title {
@@ -45,7 +44,7 @@ $tc-list-title-icon-size: $svg-rg-size !default;
 
 		padding: 0 $padding-normal;
 
-		color: $tc-list-title-color;
+		color: tokens.$coral-color-neutral-text;
 		font-size: inherit;
 		font-weight: 600;
 		text-transform: none;
@@ -71,12 +70,12 @@ $tc-list-title-icon-size: $svg-rg-size !default;
 		&:hover,
 		&:global(.ally-focus-within) {
 			.icon {
-				color: $brand-primary;
+				color: tokens.$coral-color-accent-text;
 				filter: none;
 			}
 
 			.main-title {
-				color: $lochmara;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
@@ -103,7 +102,7 @@ $tc-list-title-icon-size: $svg-rg-size !default;
 	&:focus,
 	&:global(.ally-focus-within) {
 		:global(.tc-list-title .cell-title-actions) {
-			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba($tc-list-row-active-hover-bg, 100%) $padding-large);
+			// background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large);
 		}
 	}
 }
@@ -114,7 +113,7 @@ $tc-list-title-icon-size: $svg-rg-size !default;
 	&:focus,
 	&:global(.ally-focus-within) {
 		:global(.tc-list-title .cell-title-actions) {
-			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba($tc-list-row-selected-hover-bg, 100%) $padding-large);
+			// background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large);
 		}
 	}
 }
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss
index 7daf0c99c4f..8e5ddeca031 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss
@@ -1,6 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@import '../colors';
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-list-title-actions-ellipsis: '\22ee';
 $tc-list-title-dropdown-menu-triangle: '\25b2';
@@ -16,14 +15,14 @@ $tc-list-title-dropup-menu-triangle: '\25bc';
 	height: $btn-line-height;
 
 	.cell-title-actions {
-		background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba($tc-list-row-hover-bg, 100%) $padding-large);
+		// background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background-hover $padding-large);
 		opacity: 0;
 		width: 0;
 		overflow: hidden;
 
 		&:not(:last-child)::after {
 			content: '|';
-			color: $dark-silver;
+			color: tokens.$coral-color-neutral-text;
 			padding-top: $padding-smaller;
 		}
 	}
diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss
index 4028bec3387..b6bc45cd3ec 100644
--- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss
+++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $drag-element-width: $padding-smaller;
 
@@ -13,12 +14,7 @@ $drag-element-width: $padding-smaller;
 	left: 0;
 
 	&-resizing {
-		/*
-			This is scooter rgb color.
-			We want to apply opacity only on the background,
-		 	so we are using rgba to be compatible with ie.
-		*/
-		background-color: rgba(102, 189, 255, 0.1);
+		background-color: tokens.$coral-color-accent-background;
 	}
 
 	&-truncated-text {
@@ -40,7 +36,7 @@ $drag-element-width: $padding-smaller;
 
 				&:hover,
 				&:active {
-					background: $scooter;
+					background: tokens.$coral-color-accent-background;
 					opacity: 1;
 				}
 			}
@@ -50,5 +46,5 @@ $drag-element-width: $padding-smaller;
 
 .tc-header-cell-resizable-drag-accessibility:focus ~ .tc-header-cell-resizable-drag-button-handle-icon {
 	opacity: 1;
-	background: $scooter;
+	background: tokens.$coral-color-accent-background;
 }
diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
index ca283189ec3..47a19f5bba7 100644
--- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
+++ b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
@@ -1,11 +1,7 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@use '~@talend/design-tokens/lib/_tokens.scss' as tokens;
-@import '../colors';
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-list-table-cell-padding: $padding-small !default;
-$tc-list-table-header-color: $dove-gray !default;
-$tc-list-table-border: 1px solid darken($concrete, 5%);
 
 .tc-list-table-right-action {
 	position: absolute;
@@ -15,21 +11,21 @@ $tc-list-table-border: 1px solid darken($concrete, 5%);
 }
 
 .tc-list-table {
-	background-color: $wild-sand;
+	background-color: tokens.$coral-color-neutral-background;
 
 	.row {
-		border-bottom: $tc-list-table-border;
-		background: $white;
+		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+		background: tokens.$coral-color-neutral-background;
 		display: flex;
 		align-items: center;
 
 		&:hover,
 		&:focus,
 		&:global(.ally-focus-within) {
-			background-color: $wild-sand;
+			background-color: tokens.$coral-color-neutral-background-medium;
 
 			.cell {
-				border-right: 1px solid $white;
+				border-right: 1px solid tokens.$coral-color-neutral-border;
 			}
 		}
 	}
@@ -42,7 +38,7 @@ $tc-list-table-border: 1px solid darken($concrete, 5%);
 		box-shadow: $shadow-default;
 
 		.header {
-			color: $tc-list-table-header-color;
+			color: tokens.$coral-color-neutral-text;
 			display: inline-flex;
 			font-size: 1.2rem;
 			font-weight: 600;
@@ -69,8 +65,7 @@ $tc-list-table-border: 1px solid darken($concrete, 5%);
 		box-shadow: $shadow-default;
 
 		.cell {
-
-			border-right: $tc-list-table-border;
+			border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss
index c5c68785c93..5402c10a372 100644
--- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss
+++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 :global(.tc-collapsible-row) {
 	:global(.panel[class*='collapsible-panel']) {
@@ -16,7 +17,7 @@
 
 	.loading-collapsible-panel {
 		height: 4rem;
-		background-color: $gallery;
+		background-color: tokens.$coral-color-neutral-background-medium;
 		border-radius: $border-radius-base;
 		margin-bottom: $padding-small;
 
diff --git a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
index e41808c181e..293de273e9a 100644
--- a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
+++ b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
@@ -1,14 +1,12 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-list-large-hover-bg: $white !default;
-$tc-list-large-field-value-color: $dove-gray !default;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-list-large {
 	padding: $padding-small;
 
 	.inner-box {
-		background: $tc-list-large-hover-bg;
-		border: 1px solid $alto;
+		background: tokens.$coral-color-neutral-background;
+		border: 1px solid tokens.$coral-color-neutral-border;
 		border-radius: 3px;
 		height: 100%;
 
@@ -29,8 +27,6 @@ $tc-list-large-field-value-color: $dove-gray !default;
 			}
 
 			.cell-title-actions {
-				background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba($tc-list-large-hover-bg, 100%) 20px);
-
 				.btn-link {
 					padding: 0 $padding-smaller;
 				}
@@ -62,7 +58,7 @@ $tc-list-large-field-value-color: $dove-gray !default;
 	}
 
 	.field-value {
-		color: $tc-list-large-field-value-color;
+		color: tokens.$coral-color-neutral-text-weak;
 		margin-bottom: $padding-small;
 		overflow: hidden;
 		text-overflow: ellipsis;
diff --git a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss
index 3eff19b386c..5aaec997f5d 100644
--- a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss
+++ b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss
@@ -1,25 +1,24 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@import '../colors';
+@use '~@talend/design-tokens/lib/tokens';
 
 :global(.tc-list-table) {
 	.row-selection.selected {
-		background: $tc-list-row-selected-bg;
+		background: tokens.$coral-color-accent-background;
 
 		&:hover,
 		&:focus,
 		&:global(.ally-focus-within) {
-			background: $tc-list-row-selected-hover-bg;
+			background: tokens.$coral-color-accent-background-hover;
 		}
 	}
 
 	.row-selection.active {
-		background: $tc-list-row-active-bg;
+		background: tokens.$coral-color-accent-background-active;
 
 		&:hover,
 		&:focus,
 		&:global(.ally-focus-within) {
-			background: $tc-list-row-active-hover-bg;
+			background: tokens.$coral-color-accent-background-hover;
 		}
 	}
 
@@ -32,22 +31,22 @@
 
 :global(.tc-list-list) {
 	.row-selection.selected :global(.tc-list-large-inner-box) {
-		background: $tc-list-row-selected-bg;
+		background: tokens.$coral-color-accent-background;
 
 		&:hover,
 		&:focus,
 		&:global(.ally-focus-within) {
-			background: $tc-list-row-selected-hover-bg;
+			background: tokens.$coral-color-accent-background-hover;
 		}
 	}
 
 	.row-selection.active :global(.tc-list-large-inner-box) {
-		background: $tc-list-row-active-bg;
+		background: tokens.$coral-color-accent-background-active;
 
 		&:hover,
 		&:focus,
 		&:global(.ally-focus-within) {
-			background: $tc-list-row-active-hover-bg;
+			background: tokens.$coral-color-accent-background-hover;
 		}
 	}
 
diff --git a/packages/components/src/VirtualizedList/_colors.scss b/packages/components/src/VirtualizedList/_colors.scss
deleted file mode 100644
index 8f28a58dd20..00000000000
--- a/packages/components/src/VirtualizedList/_colors.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-$tc-list-row-hover-bg: $wild-sand !default;
-$tc-list-row-selected-bg: tint($scooter, 85%) !default;
-$tc-list-row-selected-hover-bg: shade($tc-list-row-selected-bg, 5%) !default;
-$tc-list-row-active-bg: tint($scooter, 85%) !default;
-$tc-list-row-active-hover-bg: shade($tc-list-row-selected-bg, 5%) !default;
diff --git a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index 4232206b738..11c91df0c56 100644
--- a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -3,6 +3,7 @@
 exports[`SidePanel should render 1`] = `
 <nav
   class="theme-tc-side-panel tc-side-panel"
+  data-theme="light"
   role="navigation"
   style="width: 0px;"
 >
@@ -30,7 +31,7 @@ exports[`SidePanel should render 1`] = `
     data-simplebar="true"
   >
     <ul
-      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse"
+      class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list nav-inverse nav-inverse"
     />
   </div>
 </nav>
diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss
index 21e5b65e2be..ced5ecdea12 100755
--- a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss
+++ b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '../bar-chart';
 
 $module: colored-bar;
@@ -41,6 +41,6 @@ $module: colored-bar;
 	}
 
 	&__secondary-bar {
-		fill: $alto;
+		fill: tokens.$coral-color-charts-neutral-weak;
 	}
 }
diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx
index 7aee59cfda9..06184e5ff50 100644
--- a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx
+++ b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx
@@ -24,6 +24,7 @@ context('<HorizontalBarChart />', () => {
 			/>,
 		);
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
@@ -54,6 +55,7 @@ context('<HorizontalBarChart />', () => {
 			/>,
 		);
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
diff --git a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss
index bcd6b7c0ae8..be42b765791 100755
--- a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss
+++ b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 .tooltip-cursor {
 	pointer-events: all;
 	cursor: pointer;
diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss
index ee09b4a27b6..248f2f899ce 100755
--- a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss
+++ b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @import '../bar-chart';
 
 .vertical-bar-chart {
diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx
index dae744b94e7..3596da65e54 100644
--- a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx
+++ b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx
@@ -17,6 +17,8 @@ context('<HorizontalBarChart />', () => {
 				getTooltipContent={() => <div data-testid="tooltip">tooltip</div>}
 			/>,
 		);
+
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
@@ -41,6 +43,8 @@ context('<HorizontalBarChart />', () => {
 				getTooltipContent={getTooltipContent}
 			/>,
 		);
+
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
diff --git a/packages/dataviz/src/components/BarChart/_bar-chart.scss b/packages/dataviz/src/components/BarChart/_bar-chart.scss
index cf32fb48551..5f7ecf98c27 100755
--- a/packages/dataviz/src/components/BarChart/_bar-chart.scss
+++ b/packages/dataviz/src/components/BarChart/_bar-chart.scss
@@ -1,12 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$pattern-bar-primary-color: tint($jaffa, 70%);
-$pattern-bar-secondary-color: shade($jaffa, 30%);
+$pattern-bar-primary-color: tokens.$coral-color-charts-warning-weak;
+$pattern-bar-secondary-color: tokens.$coral-color-charts-warning-strong;
 
-$value-bar-primary-color: tint($lochmara, 70%);
-$value-bar-secondary-color: shade($lochmara, 30%);
+$value-bar-primary-color: tokens.$coral-color-charts-default-weak;
+$value-bar-secondary-color: tokens.$coral-color-charts-default-strong;
 
-$grey-bar-color: $alto;
+$grey-bar-color: tokens.$coral-color-charts-neutral-weak;
 
 @mixin override-recharts-styles() {
 	// We can't use custom classname on axis
@@ -19,11 +20,11 @@ $grey-bar-color: $alto;
 		.recharts-yAxis {
 			text {
 				font-size: 1.2rem;
-				fill: $gray;
+				fill: tokens.$coral-color-neutral-text;
 			}
 
 			line {
-				stroke: $gray;
+				stroke: tokens.$coral-color-neutral-text;
 			}
 		}
 
diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss
index fd30cdacb69..fbb824208ef 100755
--- a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss
+++ b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 // Imported (almost) as-is from TDP
 
 .box-plot {
@@ -7,14 +7,14 @@
 
 	line,
 	rect {
-		fill: #19426C;
-		stroke: black;
+		fill: tokens.$coral-color-charts-default-strong;
+		stroke: tokens.$coral-color-charts-neutral-strong;
 		stroke-width: 1px;
 	}
 
 	&__whiskerPolyg {
 		fill: none;
-		stroke: black;
+		stroke: tokens.$coral-color-charts-neutral-strong;
 		stroke-width: 2;
 	}
 
@@ -25,24 +25,24 @@
 	&__mean {
 		fill: white;
 		opacity: 0.5;
-		stroke: #19426C;
+		stroke: tokens.$coral-color-charts-default-strong;
 		shape-rendering: geometricPrecision;
 		stroke-width: 0.8;
 	}
 
 	&__max-min-labels {
-		fill: #0675C1;
+		fill: tokens.$coral-color-charts-default;
 	}
 
 	&__low-quantile-labels {
-		fill: #689734;
+		fill: tokens.$coral-color-charts-success-strong;
 	}
 
 	&__up-quantile-labels {
-		fill: #BA4C50;
+		fill: tokens.$coral-color-charts-danger-strong;
 	}
 
 	&__mean-labels {
-		fill: $white;
+		fill: tokens.$coral-color-charts-neutral-weak;
 	}
 }
diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss
index 0dcf3ddbd6e..5b96ffc6a34 100644
--- a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss
+++ b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 :export {
-	scaleMinColor: tint($regal-blue, 80%); /* stylelint-disable-line property-no-unknown */
-	scaleMaxColor: shade($regal-blue, 30%); /* stylelint-disable-line property-no-unknown */
+	scaleMinColor: tokens.$coral-color-charts-default-weak; /* stylelint-disable-line property-no-unknown */
+	scaleMaxColor: tokens.$coral-color-charts-default-strong; /* stylelint-disable-line property-no-unknown */
 }
 
 .geo-chart {
@@ -14,16 +15,16 @@
 	}
 
 	&__feature {
-		stroke: $white;
+		stroke: tokens.$coral-color-charts-neutral;
 		stroke-width: 1px;
 		vector-effect: non-scaling-stroke;
 
 		&--disabled {
-			fill: $silver;
+			fill: tokens.$coral-color-charts-neutral-weak;
 		}
 
 		&:not(&--disabled):hover {
-			fill: $lochmara !important; /* stylelint-disable-line declaration-no-important */
+			fill: tokens.$coral-color-charts-default !important; /* stylelint-disable-line declaration-no-important */
 			cursor: pointer;
 		}
 	}
@@ -49,20 +50,20 @@
 	}
 
 	&__zoom-icon {
-		color: $black;
+		color: tokens.$coral-color-charts-neutral;
 		width: 100%;
 		height: 100%;
 
 		&:not(:hover) .ti-background {
-			color: $silver;
+			color: tokens.$coral-color-charts-neutral;
 		}
 
 		&:hover {
-			color: $lochmara;
+			color: tokens.$coral-color-charts-neutral-hover;
 		}
 
 		&:active {
-			color: $regal-blue;
+			color: tokens.$coral-color-charts-default;
 		}
 	}
 }
diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss
index 5133f194ddd..7028e904e4f 100755
--- a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss
+++ b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $module: key-value-tooltip;
 
@@ -17,7 +18,7 @@ $module: key-value-tooltip;
 		margin-top: 0; // override dt margin
 		font-weight: $font-weight-regular;
 		line-height: $line-height-base;
-		color: $white;
+		color: tokens.$coral-color-neutral-background;
 
 		&::after {
 			content: ':';
@@ -26,12 +27,12 @@ $module: key-value-tooltip;
 
 	&__value {
 		margin-left: 5px;
-		color: $scooter;
+		color: tokens.$coral-color-accent-text-weak-active;
 	}
 
 	&--pattern {
 		.#{$module}__value {
-			color: $jaffa;
+			color: tokens.$coral-color-danger-text-weak;
 		}
 	}
 }
diff --git a/packages/dataviz/src/components/LineChart/LineChart.component.tsx b/packages/dataviz/src/components/LineChart/LineChart.component.tsx
index db2f18da257..443f7bc12f6 100644
--- a/packages/dataviz/src/components/LineChart/LineChart.component.tsx
+++ b/packages/dataviz/src/components/LineChart/LineChart.component.tsx
@@ -15,6 +15,7 @@ import { LineChartEntry, LineChartOptions, LineOptions, LineStatus } from './Lin
 
 import { CustomTooltip } from './LineChartTooltip.component';
 import { CustomLegend } from './LineChartLegend.component';
+import style from './LineChart.module.scss';
 
 export interface LineChartProps {
 	data: LineChartEntry[];
@@ -129,7 +130,7 @@ function LineChart({
 	return (
 		<>
 			<ResponsiveContainer width={width || '100%'} height={height || '100%'} debounce={1}>
-				<RLineChart data={data} margin={margin || {}}>
+				<RLineChart data={data} margin={margin || {}} className={style.container}>
 					{!!showGridLines && (
 						<CartesianGrid
 							stroke={tokens.coralColorNeutralBackgroundMedium}
diff --git a/packages/dataviz/src/components/LineChart/LineChart.module.scss b/packages/dataviz/src/components/LineChart/LineChart.module.scss
index ae03f2a4c12..f6bbe8373ae 100644
--- a/packages/dataviz/src/components/LineChart/LineChart.module.scss
+++ b/packages/dataviz/src/components/LineChart/LineChart.module.scss
@@ -4,6 +4,16 @@
 
 $module: line-chart;
 
+.container {
+	:global(.recharts-cartesian-axis-line) {
+		stroke: tokens.$coral-color-neutral-text;
+	}
+
+	:global(.recharts-text) {
+		fill: tokens.$coral-color-neutral-text;
+	}
+}
+
 .#{$module} {
 	&-custom-tooltip {
 		list-style: none;
diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss
index 82ef43c91a3..a89a2bd1f98 100755
--- a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss
+++ b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss
@@ -1,8 +1,14 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $module: range-filter;
 
 .#{$module} {
+	:global(.rc-slider-mark-text),
+	:global(.rc-slider-mark-text-active) {
+		color: tokens.$coral-color-neutral-text;
+	}
+
 	&__slider {
 		margin: 20px 0 30px;
 	}
diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx
index 448daf62f37..a74f22be94c 100755
--- a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx
+++ b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx
@@ -95,7 +95,6 @@ function RangeFilter({
 						id={`${id}-range-filter-min-input`}
 						value={range.min}
 						onChange={(value: number) => {
-							console.log('4444');
 							onAfterChange({
 								// Tricky one: we want the corrected value (i.e. day start) to stay between limits
 								min: Math.min(Math.max(getMinValue(value), limits.min), range.max),
diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss
index 57f7bd32356..5698eabe0b4 100755
--- a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss
+++ b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-no-important */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 
 .date-time-input-field {
diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss
index 5b268f7414b..63acc8d9889 100644
--- a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss
+++ b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss
@@ -1,15 +1,13 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@use '~@talend/design-tokens/lib/_tokens.scss';
+@use '~@talend/design-tokens/lib/tokens';
 
 .dataviz-tooltip {
 	padding: tokens.$coral-spacing-m;
 
-	color: tokens.$coral-color-neutral-text-inverted;
+	color: tokens.$coral-color-assistive-text;
 	font: tokens.$coral-paragraph-m;
 
 	background: tokens.$coral-color-assistive-background;
-	border: tokens.$coral-border-s-solid rgba(0, 0, 0, 0.103);
+	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	border-radius: tokens.$coral-radius-s;
 
 	&__title {
diff --git a/packages/faceted-search/.storybook/preview.js b/packages/faceted-search/.storybook/preview.js
index 8078e3aaf14..04f97159c59 100644
--- a/packages/faceted-search/.storybook/preview.js
+++ b/packages/faceted-search/.storybook/preview.js
@@ -20,7 +20,6 @@ export const decorators = [
 					height: '100%',
 					width: '100%',
 					overflow: 'auto',
-					backgroundColor: 'rgba(145, 209, 237, 0.1)',
 				}}
 			>
 				<ThemeProvider>
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 44d2c916b00..9a18baa0fc7 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -36,6 +36,7 @@
     "@talend/daikon-tql-client": "^1.3.1",
     "@talend/utils": "^2.5.1",
     "@talend/react-bootstrap": "^1.35.2",
+    "@talend/design-tokens": "2.7.3",
     "classnames": "^2.3.2",
     "date-fns": "^1.30.1",
     "invariant": "^2.2.4",
diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap
index 9a6a33d08a8..66c3b67725a 100644
--- a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap
+++ b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap
@@ -217,7 +217,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 31 October 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -229,7 +229,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 01 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="1"
                               tabindex="-1"
                               type="button"
@@ -242,7 +242,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 02 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="2"
                               tabindex="-1"
                               type="button"
@@ -255,7 +255,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 03 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="3"
                               tabindex="-1"
                               type="button"
@@ -268,7 +268,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 04 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="4"
                               tabindex="-1"
                               type="button"
@@ -281,7 +281,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 05 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="5"
                               tabindex="-1"
                               type="button"
@@ -294,7 +294,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 06 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="6"
                               tabindex="-1"
                               type="button"
@@ -311,7 +311,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 07 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="7"
                               tabindex="-1"
                               type="button"
@@ -324,7 +324,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 08 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="8"
                               tabindex="-1"
                               type="button"
@@ -337,7 +337,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 09 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="9"
                               tabindex="-1"
                               type="button"
@@ -350,7 +350,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 10 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="10"
                               tabindex="-1"
                               type="button"
@@ -363,7 +363,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 11 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="11"
                               tabindex="-1"
                               type="button"
@@ -376,7 +376,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 12 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="12"
                               tabindex="-1"
                               type="button"
@@ -389,7 +389,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 13 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="13"
                               tabindex="-1"
                               type="button"
@@ -406,7 +406,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 14 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="14"
                               tabindex="-1"
                               type="button"
@@ -419,7 +419,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 15 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="15"
                               tabindex="-1"
                               type="button"
@@ -432,7 +432,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 16 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="16"
                               tabindex="-1"
                               type="button"
@@ -445,7 +445,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 17 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="17"
                               tabindex="-1"
                               type="button"
@@ -459,7 +459,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 18 November 2011, selected"
-                              class="theme-calendar-day theme-selected tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-selected tc-date-picker-day"
                               data-value="18"
                               tabindex="-1"
                               type="button"
@@ -472,7 +472,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 19 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="19"
                               tabindex="-1"
                               type="button"
@@ -485,7 +485,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 20 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="20"
                               tabindex="-1"
                               type="button"
@@ -502,7 +502,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 21 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="21"
                               tabindex="-1"
                               type="button"
@@ -515,7 +515,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 22 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="22"
                               tabindex="-1"
                               type="button"
@@ -528,7 +528,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 23 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="23"
                               tabindex="-1"
                               type="button"
@@ -541,7 +541,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 24 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="24"
                               tabindex="-1"
                               type="button"
@@ -554,7 +554,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 25 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="25"
                               tabindex="-1"
                               type="button"
@@ -567,7 +567,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 26 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="26"
                               tabindex="-1"
                               type="button"
@@ -580,7 +580,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 27 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="27"
                               tabindex="-1"
                               type="button"
@@ -597,7 +597,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 28 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="28"
                               tabindex="-1"
                               type="button"
@@ -610,7 +610,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 29 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="29"
                               tabindex="-1"
                               type="button"
@@ -623,7 +623,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 30 November 2011"
-                              class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day tc-date-picker-day"
                               data-value="30"
                               tabindex="-1"
                               type="button"
@@ -636,7 +636,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 01 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -648,7 +648,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 02 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -660,7 +660,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 03 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -672,7 +672,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 04 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -688,7 +688,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Monday 05 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -700,7 +700,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Tuesday 06 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -712,7 +712,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Wednesday 07 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -724,7 +724,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Thursday 08 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -736,7 +736,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Friday 09 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -748,7 +748,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Saturday 10 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
@@ -760,7 +760,7 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
                           >
                             <button
                               aria-label="Sunday 11 December 2011"
-                              class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                              class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                               tabindex="-1"
                               type="button"
                             >
diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss
index 4f66e0d225a..1b77f2a37c0 100644
--- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss
+++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss
@@ -1,11 +1,12 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $circle-size-large: 2.2rem !default;
 $circle-size-small: 1.8rem !default;
 
 .tc-badge-operator {
 	align-items: center;
-	background: rgba(255, 255, 255, 0.5);
+	background: tokens.$coral-color-neutral-background;
 	border-radius: 10rem;
 	display: inline-flex;
 	justify-content: center;
diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss
index 42ef49af334..0055b170af1 100644
--- a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss
+++ b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // stylelint-disable property-no-vendor-prefix
 
@@ -60,7 +61,7 @@
 				font-size: 3.2rem;
 				font-weight: $font-weight-semi-bold;
 				width: 8rem;
-				color: $dove-gray;
+				color: tokens.$coral-color-neutral-text-weak;
 				box-shadow: none;
 				height: 4.7rem;
 				padding: 0;
@@ -85,7 +86,7 @@
 		justify-content: space-between;
 
 		.tc-badge-slider-form-error {
-			color: $brand-danger;
+			color: tokens.$coral-color-danger-text;
 		}
 	}
 }
diff --git a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.module.scss b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.module.scss
index 71ee7c31c16..daae872dcab 100644
--- a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.module.scss
+++ b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.module.scss
@@ -1,12 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .fs-badge-tags-form {
 	:global(.tc-tooltip-body) {
 		margin: $padding-normal 0 0;
 		padding: $padding-smaller $padding-large $padding-large;
 		overflow-y: auto;
-		background: #FCFCFC;
-		border-top: 1px solid $gallery;
+		background: tokens.$coral-color-neutral-background-medium;
+		border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	}
 
 	&-body {
@@ -33,7 +34,7 @@
 	&-left-button,
 	&-left-button:focus {
 		text-transform: none;
-		color: $st-tropaz;
+		color: tokens.$coral-color-accent-text;
 		font-weight: 600;
 	}
 
diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss
index 5c98c536677..12f126db5fe 100644
--- a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss
+++ b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // stylelint-disable order/order
 $toolbar-height: 5.5rem;
@@ -11,13 +12,13 @@ $toolbar-height: 5.5rem;
 	position: relative;
 	width: 100%;
 
-	.tc-faceted-switch-mode{
+	.tc-faceted-switch-mode {
 		width: auto;
 		margin-right: $padding-small;
 	}
 
 	&-buttons {
-		background: $alto;
+		background: tokens.$coral-color-neutral-background;
 		border-radius: $padding-large $padding-large $padding-large $padding-large;
 		display: flex;
 		margin-right: $padding-large;
@@ -29,13 +30,13 @@ $toolbar-height: 5.5rem;
 		&-basic,
 		&-advanced {
 			&.tc-button-selected {
-				background: $st-tropaz;
+				background: tokens.$coral-color-accent-background-strong;
 				border-radius: $padding-large;
-				color: white;
+				color: tokens.$coral-color-accent-text-weak;
 			}
 
-			background: $alto;
-			color: black;
+			background: tokens.$coral-color-neutral-background;
+			color: tokens.$coral-color-neutral-text;
 			min-height: 2.5rem;
 			height: 2.5rem;
 			font-size: 1rem;
@@ -47,7 +48,7 @@ $toolbar-height: 5.5rem;
 			&:active,
 			&:focus,
 			&:hover {
-				background: $st-tropaz;
+				background: tokens.$coral-color-accent-background-strong;
 			}
 		}
 
diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
index 6dca07fb7f4..677d88e1b9a 100644
--- a/packages/faceted-search/stories/facetedSearch.stories.js
+++ b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -167,25 +167,6 @@ export default {
 	decorators: [
 		(Story, context) => (
 			<div>
-				<style>
-					{`
-				#talend-pie-charts path[class^='ti-slice-'] {
-					fill: #C6C6C6;
-				}
-				#talend-pie-charts path.ti-slice-right {
-					fill: currentColor;
-				}
-				.tc-badge-slider-form .invalid {
-					color: #EA8330;
-				}
-				.tc-badge-slider-form .valid {
-					color: #82BD41;
-				}
-				.tc-badge-slider-form .empty {
-					color: #202020;
-				}
-				`}
-				</style>
 				<Story {...context} />
 			</div>
 		),
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 5ef1be895ab..fe946577e7b 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -41,6 +41,7 @@
     "@talend/json-schema-form-core": "1.1.1",
     "@talend/react-components": "^10.3.5",
     "@talend/design-system": "^7.10.0",
+    "@talend/design-tokens": "^2.7.3",
     "@talend/utils": "^2.5.1",
     "ajv": "^6.12.6",
     "classnames": "^2.3.2",
diff --git a/packages/forms/src/FormSkeleton.module.scss b/packages/forms/src/FormSkeleton.module.scss
index 4ff05444d8b..d1fbc9f8b20 100644
--- a/packages/forms/src/FormSkeleton.module.scss
+++ b/packages/forms/src/FormSkeleton.module.scss
@@ -1,5 +1,4 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/tokens';
 
 $tc-drawer-content-max-width: 65rem !default;
@@ -45,7 +44,7 @@ $tc-drawer-padding: $padding-large !default;
 	}
 
 	.submit {
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 }
 
diff --git a/packages/forms/src/UIForm/UIForm.module.scss b/packages/forms/src/UIForm/UIForm.module.scss
index 9aab77be543..d992b151f0e 100644
--- a/packages/forms/src/UIForm/UIForm.module.scss
+++ b/packages/forms/src/UIForm/UIForm.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-drawer-content-max-width: 65rem !default;
 $tc-drawer-padding: $padding-large !default;
@@ -7,7 +8,7 @@ $tc-drawer-padding: $padding-large !default;
 	:global(.tf-title-text-mode) {
 		font-size: 1.7rem;
 		font-weight: 700;
-		color: #555;
+		color: tokens.$coral-color-neutral-text-weak;
 	}
 }
 
@@ -35,7 +36,7 @@ $tc-drawer-padding: $padding-large !default;
 
 	.form-actions {
 		padding: $padding-small $tc-drawer-padding;
-		background-color: $wild-sand;
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 }
 
diff --git a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss
index f9104991d5e..3450b335b74 100644
--- a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss
+++ b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tf-comparator-operator-height: 3.2rem !default;
 $tf-comparator-operator-width: 5rem !default;
@@ -15,7 +16,6 @@ $tf-comparator-operator-top: 2.4rem !default;
 
 			&-menu {
 				min-width: auto;
-
 			}
 
 			.tc-svg-icon {
@@ -26,9 +26,9 @@ $tf-comparator-operator-top: 2.4rem !default;
 				height: $tf-comparator-operator-height;
 				min-height: $tf-comparator-operator-height;
 				width: $tf-comparator-operator-width;
-				color: var(--t-form-group-interactive-color);
-				background: var(--t-form-group-interactive-background-color);
-				border: 1px solid var(--t-form-border-color);
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-accent-background;
+				border: 1px solid tokens.$coral-color-neutral-border;
 				border-radius: $input-border-radius 0 0 $input-border-radius;
 				z-index: 1;
 				padding: {
diff --git a/packages/forms/src/UIForm/fields/Date/__snapshots__/Date.component.test.js.snap b/packages/forms/src/UIForm/fields/Date/__snapshots__/Date.component.test.js.snap
index 857f672e0cf..2c6c2a51d9a 100644
--- a/packages/forms/src/UIForm/fields/Date/__snapshots__/Date.component.test.js.snap
+++ b/packages/forms/src/UIForm/fields/Date/__snapshots__/Date.component.test.js.snap
@@ -214,7 +214,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 29 January 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -226,7 +226,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 30 January 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -238,7 +238,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 31 January 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -250,7 +250,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Thursday 01 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="1"
                             tabindex="-1"
                             type="button"
@@ -263,7 +263,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 02 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="2"
                             tabindex="-1"
                             type="button"
@@ -276,7 +276,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 03 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="3"
                             tabindex="-1"
                             type="button"
@@ -289,7 +289,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 04 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="4"
                             tabindex="-1"
                             type="button"
@@ -306,7 +306,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 05 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="5"
                             tabindex="-1"
                             type="button"
@@ -319,7 +319,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 06 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="6"
                             tabindex="-1"
                             type="button"
@@ -332,7 +332,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 07 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="7"
                             tabindex="-1"
                             type="button"
@@ -345,7 +345,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Thursday 08 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="8"
                             tabindex="-1"
                             type="button"
@@ -358,7 +358,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 09 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="9"
                             tabindex="-1"
                             type="button"
@@ -371,7 +371,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 10 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="10"
                             tabindex="-1"
                             type="button"
@@ -384,7 +384,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 11 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="11"
                             tabindex="-1"
                             type="button"
@@ -401,7 +401,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 12 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="12"
                             tabindex="-1"
                             type="button"
@@ -414,7 +414,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 13 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="13"
                             tabindex="-1"
                             type="button"
@@ -427,7 +427,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 14 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="14"
                             tabindex="-1"
                             type="button"
@@ -440,7 +440,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Today, Thursday 15 February 2018"
-                            class="theme-calendar-day theme-today tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-today tc-date-picker-day"
                             data-value="15"
                             tabindex="-1"
                             type="button"
@@ -453,7 +453,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 16 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="16"
                             tabindex="-1"
                             type="button"
@@ -466,7 +466,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 17 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="17"
                             tabindex="-1"
                             type="button"
@@ -479,7 +479,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 18 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="18"
                             tabindex="-1"
                             type="button"
@@ -496,7 +496,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 19 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="19"
                             tabindex="-1"
                             type="button"
@@ -509,7 +509,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 20 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="20"
                             tabindex="-1"
                             type="button"
@@ -522,7 +522,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 21 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="21"
                             tabindex="-1"
                             type="button"
@@ -535,7 +535,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Thursday 22 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="22"
                             tabindex="-1"
                             type="button"
@@ -548,7 +548,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 23 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="23"
                             tabindex="-1"
                             type="button"
@@ -561,7 +561,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 24 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="24"
                             tabindex="-1"
                             type="button"
@@ -574,7 +574,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 25 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="25"
                             tabindex="-1"
                             type="button"
@@ -591,7 +591,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 26 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="26"
                             tabindex="-1"
                             type="button"
@@ -604,7 +604,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 27 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="27"
                             tabindex="-1"
                             type="button"
@@ -617,7 +617,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 28 February 2018"
-                            class="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day tc-date-picker-day"
                             data-value="28"
                             tabindex="-1"
                             type="button"
@@ -630,7 +630,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Thursday 01 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -642,7 +642,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 02 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -654,7 +654,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 03 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -666,7 +666,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 04 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -682,7 +682,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Monday 05 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -694,7 +694,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Tuesday 06 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -706,7 +706,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Wednesday 07 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -718,7 +718,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Thursday 08 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -730,7 +730,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Friday 09 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -742,7 +742,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Saturday 10 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
@@ -754,7 +754,7 @@ exports[`Date widget should render date picker 1`] = `
                         >
                           <button
                             aria-label="Sunday 11 March 2018"
-                            class="theme-calendar-day theme-not-current-month tc-date-picker-day btn-tertiary btn-default"
+                            class="theme-calendar-day theme-not-current-month tc-date-picker-day"
                             tabindex="-1"
                             type="button"
                           >
diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss
index a139bbe4408..1eee306ed58 100644
--- a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss
+++ b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss
@@ -1,7 +1,6 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tf-datalist-items-background-color: $white !default;
-$tf-datalist-items-shadow-color: $shadow !default;
 $tf-typeahead-input-width: 135px !default;
 $tc-badge-margin: $padding-smaller !default;
 
@@ -11,7 +10,7 @@ $tc-badge-margin: $padding-smaller !default;
 	flex-wrap: wrap;
 	align-items: flex-end;
 
-	border: 1px solid $input-border;
+	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	height: auto;
 	padding: 0;
 
@@ -40,9 +39,9 @@ $tc-badge-margin: $padding-smaller !default;
 			max-height: 70vh;
 			min-width: $tf-typeahead-input-width;
 			font-size: 1.5rem;
-			background-color: $tf-datalist-items-background-color;
+			background-color: tokens.$coral-color-neutral-background;
 			border-radius: $border-radius-base;
-			box-shadow: 0 1px 3px 0 $tf-datalist-items-shadow-color;
+			box-shadow: tokens.$coral-elevation-shadow-neutral-m;
 		}
 
 		.items {
diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
index ad54f983972..5905adda3aa 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
+++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
@@ -1,9 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tf-array-item {
 	display: flex;
-	background: $wild-sand;
-	border: 1px solid transparent;
+	background: tokens.$coral-color-neutral-background-medium;
+	border: tokens.$coral-border-s-solid transparent;
 
 	.delete,
 	.tf-array-item-reorder {
@@ -11,7 +12,7 @@
 	}
 
 	&:hover {
-		background: $white;
+		background: tokens.$coral-color-neutral-background;
 
 		.control {
 			.delete,
@@ -19,7 +20,7 @@
 				opacity: 1;
 
 				&:disabled {
-					color: $silver;
+					color: tokens.$coral-color-neutral-text-disabled;
 				}
 			}
 		}
@@ -35,7 +36,7 @@
 		flex-grow: 0;
 		flex-shrink: 0;
 
-		border-right: 1px solid $gray-lighter;
+		border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		display: flex;
 		flex-direction: column;
 		padding: 0;
diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.module.scss b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.module.scss
index c87277a3186..88594220026 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.module.scss
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.module.scss
@@ -1,13 +1,22 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+/* stylelint-disable selector-no-qualifying-type */
+@use '~@talend/design-tokens/lib/tokens';
 
 .tf-tabs {
 	li.has-error {
 		> button {
-			color: $brand-danger;
+			color: tokens.$coral-color-danger-text;
+
+			&:hover {
+				color: tokens.$coral-color-danger-text-hover;
+			}
+
+			&::after {
+				border-color: tokens.$coral-color-danger-border;
+			}
 		}
 
 		&:global(.active) > button {
-			@include box-shadow(inset 0 -2px 0 $brand-danger);
+			box-shadow: tokens.$coral-elevation-shadow-danger;
 		}
 	}
 }
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index ba15836a997..ea0e6cca4dc 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -80,20 +80,6 @@ export const i18n = {
 	),
 };
 
-export const globalTypes = {
-	theme: {
-		name: 'Theme',
-		description: 'Choose a theme to apply to the design system',
-		toolbar: {
-			icon: 'paintbrush',
-			items: [
-				{ value: 'light', left: '⚪️', title: 'Default theme' },
-				{ value: 'dark', left: '⚫️', title: 'Dark theme' },
-			],
-		},
-	},
-};
-
 const channel = addons.getChannel();
 
 let statusByPage = {};
diff --git a/packages/theme/.sass-lint.yml b/packages/theme/.sass-lint.yml
deleted file mode 100644
index 6913ca770c2..00000000000
--- a/packages/theme/.sass-lint.yml
+++ /dev/null
@@ -1,169 +0,0 @@
-options:
-  merge-default-rules: false
-#  formatter: html
-#  output-file: 'linters/sass-lint.html'
-
-# File Options
-files:
-  include: 'src/**/*.s+(a|c)ss'
-  ignore:
-    - 'src/app/css/vendors/libs/**/*.*'
-
-# Rule Configuration
-rules:
-  border-zero:
-    - 2
-    -
-      convention: 'none'
-  brace-style:
-    - 1
-    -
-      style: 'stroustrup'
-      allow-single-line: false
-  class-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'hyphenatedlowercase'
-  clean-import-paths:
-    - 2
-    -
-      leading-underscore: false
-      filename-extension: false
-  empty-args:
-    - 2
-    -
-      include: false
-  extends-before-declarations: 2
-  extends-before-mixins: 2
-  final-newline:
-    - 1
-    -
-      include: true
-  force-attribute-nesting: 0
-  force-element-nesting: 0
-  force-pseudo-nesting: 0
-  function-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'hyphenatedlowercase'
-  hex-length:
-    - 2
-    -
-      style: 'short'
-  hex-notation:
-    - 0
-  id-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'hyphenatedlowercase'
-  indentation:
-    - 1
-    -
-      size: tab
-  leading-zero:
-    - 2
-    -
-      include: true
-  mixin-name-format:
-    - 2
-    -
-      allow-leading-underscore: true
-      convention: 'hyphenatedlowercase'
-  mixins-before-declarations: 2
-  nesting-depth:
-    - 2
-    -
-      max-depth: 3
-  no-color-keywords: 0
-  no-color-literals: 0
-  no-css-comments: 0
-  no-debug: 2
-  no-duplicate-properties: 2
-  no-empty-rulesets: 2
-  no-extends: 0
-  no-ids: 0
-  no-important: 2
-  no-invalid-hex: 2
-  no-mergeable-selectors: 0
-  no-misspelled-properties: 2
-  no-qualifying-elements:
-    - 2
-    -
-      allow-element-with-attribute: true
-      allow-element-with-class: false
-      allow-element-with-id: false
-  no-trailing-zero: 1
-  no-transition-all: 2
-  no-url-protocols: 2
-  no-vendor-prefixes: 1
-  no-warn: 2
-  one-declaration-per-line: 2
-  placeholder-in-extend: 2
-  placeholder-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'hyphenatedlowercase'
-  property-sort-order: 0
-  property-units: 0
-  quotes:
-    - 2
-    -
-      style: 'single'
-  shorthand-values:
-    - 1
-    -
-      allowed-shorthands:
-        - 1
-        - 2
-  single-line-per-selector: 1
-  space-after-bang:
-    - 1
-    -
-      include: false
-  space-after-colon:
-    - 1
-    -
-      include: true
-  space-after-comma:
-    - 1
-    -
-      include: true
-  space-around-operator:
-    - 1
-    -
-      include: true
-  space-before-bang:
-    - 1
-    -
-      include: true
-  space-before-brace:
-    - 1
-    -
-      include: true
-  space-before-colon:
-    - 1
-    -
-      include: false
-  space-between-parens:
-    - 1
-    -
-      include: false
-  trailing-semicolon:
-    - 2
-    -
-      include: true
-  url-quotes: 2
-  variable-for-property: 0
-  variable-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'hyphenatedlowercase'
-  zero-unit:
-    - 1
-    -
-      include: false
diff --git a/packages/theme/.stylelintrc.js b/packages/theme/.stylelintrc.js
new file mode 100644
index 00000000000..ba5fe3bee15
--- /dev/null
+++ b/packages/theme/.stylelintrc.js
@@ -0,0 +1 @@
+module.exports = require('@talend/scripts-config-stylelint');
diff --git a/packages/theme/example/index.html b/packages/theme/example/index.html
index 51ad3541c52..4f868c4ae12 100644
--- a/packages/theme/example/index.html
+++ b/packages/theme/example/index.html
@@ -5,6 +5,10 @@
 		<title>Talend Bootstrap Theme example</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<link
+			rel="stylesheet"
+			href="https://unpkg.com/@talend/design-tokens@2.7.3/dist/TalendDesignTokens.css"
+		/>
 		<style>
 			body {
 				padding-top: 50px;
@@ -197,7 +201,7 @@
 			}
 		</style>
 	</head>
-	<body>
+	<body data-theme="light">
 		<div class="navbar navbar-inverse navbar-fixed-top">
 			<div class="container">
 				<div class="navbar-header">
@@ -233,6 +237,9 @@
 								<li><a href="#dialogs">Dialogs</a></li>
 							</ul>
 						</li>
+						<li>
+							<button class="btn" onclick="toggleTheme()">Toggle Dark/Light</button>
+						</li>
 					</ul>
 				</div>
 			</div>
@@ -711,7 +718,7 @@ <h1 id="buttons">Buttons</h1>
 								</svg>
 							</a>
 
-							<a href="#" class="btn btn-link btn-icon-only" style="color: green;">
+							<a href="#" class="btn btn-link btn-icon-only" style="color: green">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 									<title>plus-circle</title>
 									<path
@@ -769,8 +776,8 @@ <h1 id="buttons">Buttons</h1>
 							</a>
 						</p>
 
-						<div id="btn-dropdown" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-dropdown" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="btn-group">
 									<a href="#" class="btn btn-default">Default</a>
 									<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
@@ -843,8 +850,8 @@ <h1 id="buttons">Buttons</h1>
 							</div>
 						</div>
 
-						<div id="btn-dropdown-icons" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-dropdown-icons" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="btn-group">
 									<a href="#" class="btn btn-default">
 										<span>
@@ -967,8 +974,8 @@ <h1 id="buttons">Buttons</h1>
 							</div>
 						</div>
 
-						<div id="btn-dropup-icons" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-dropup-icons" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="dropup btn-group">
 									<a href="#" class="btn btn-default">
 										<span>
@@ -1256,8 +1263,8 @@ <h1 id="buttons">Buttons</h1>
 							</a>
 						</p>
 
-						<div id="btn-inverse-dropdown" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-inverse-dropdown" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="btn-group">
 									<a href="#" class="btn btn-default btn-inverse">Default</a>
 									<a
@@ -1345,8 +1352,8 @@ <h1 id="buttons">Buttons</h1>
 							</div>
 						</div>
 
-						<div id="btn-inverse-dropdown-icons" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-inverse-dropdown-icons" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="btn-group">
 									<a href="#" class="btn btn-default btn-inverse">
 										<span>
@@ -1484,8 +1491,8 @@ <h1 id="buttons">Buttons</h1>
 							</div>
 						</div>
 
-						<div id="btn-inverse-dropup-icons" style="margin-bottom: 15px;">
-							<div class="bs-component" style="margin: 0;">
+						<div id="btn-inverse-dropup-icons" style="margin-bottom: 15px">
+							<div class="bs-component" style="margin: 0">
 								<div class="dropup btn-group">
 									<a href="#" class="btn btn-default btn-inverse">
 										<span>
@@ -1714,7 +1721,7 @@ <h1 id="buttons">Buttons</h1>
 							<a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>
 						</p>
 
-						<div class="bs-component" style="margin-bottom: 15px;">
+						<div class="bs-component" style="margin-bottom: 15px">
 							<div class="btn-group btn-group-justified">
 								<a href="#" class="btn btn-default">Left</a>
 								<a href="#" class="btn btn-default">Middle</a>
@@ -1722,7 +1729,7 @@ <h1 id="buttons">Buttons</h1>
 							</div>
 						</div>
 
-						<div class="bs-component" style="margin-bottom: 15px;">
+						<div class="bs-component" style="margin-bottom: 15px">
 							<div class="btn-toolbar">
 								<div class="btn-group">
 									<a href="#" class="btn btn-default">1</a>
@@ -1868,7 +1875,7 @@ <h1 id="tables">Tables</h1>
 						</div>
 
 						<div id="tables-component" class="bs-component">
-							<table class="table table-striped table-hover ">
+							<table class="table table-striped table-hover">
 								<thead>
 									<tr>
 										<th>#</th>
@@ -1941,7 +1948,7 @@ <h1 id="forms">Forms</h1>
 
 				<div id="forms-component" class="row">
 					<div class="col-lg-6">
-						<div class="well bs-component">
+						<div class="bs-component">
 							<form class="form-horizontal">
 								<fieldset>
 									<legend>Legend</legend>
@@ -2573,9 +2580,7 @@ <h2 id="breadcrumbs">Breadcrumbs</h2>
 							<ul class="breadcrumb">
 								<li class="dropdown">
 									<button class="dropdown-toggle btn btn-link" data-toggle="dropdown">
-										<span>
-											Dropdown
-										</span>
+										<span> Dropdown </span>
 									</button>
 									<ul class="dropdown-menu">
 										<li><a href="#">Action</a></li>
@@ -2607,25 +2612,11 @@ <h2 id="breadcrumbs">Breadcrumbs</h2>
 										type="button"
 										class="btn btn-link"
 									>
-										<span
-											>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
-											tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
-											williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
-											dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex
-											squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
-											american apparel, butcher voluptate nisi qui.</span
-										>
+										<span>test foo</span>
 									</button>
 								</li>
 								<li class="active">
-									<span
-										>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
-										stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
-										williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
-										dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex
-										squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
-										american apparel, butcher voluptate nisi qui.</span
-									>
+									<span>Raw denim</span>
 								</li>
 							</ul>
 						</div>
@@ -2729,7 +2720,7 @@ <h4>Warning!</h4>
 				<div class="row">
 					<div class="col-lg-4">
 						<h2>Labels</h2>
-						<div id="labels-component" class="bs-component" style="margin-bottom: 40px;">
+						<div id="labels-component" class="bs-component" style="margin-bottom: 40px">
 							<span class="label label-default">Default</span>
 							<span class="label label-primary">Primary</span>
 							<span class="label label-success">Success</span>
@@ -2769,7 +2760,7 @@ <h1 id="progress-bars">Progress bars</h1>
 						<h3 id="progress-basic">Basic</h3>
 						<div class="bs-component">
 							<div class="progress">
-								<div class="progress-bar" style="width: 60%;"></div>
+								<div class="progress-bar" style="width: 60%"></div>
 							</div>
 						</div>
 
@@ -2878,9 +2869,7 @@ <h2>List groups</h2>
 					<div class="col-lg-4">
 						<div class="bs-component">
 							<div class="list-group">
-								<a href="#" class="list-group-item active">
-									Cras justo odio
-								</a>
+								<a href="#" class="list-group-item active"> Cras justo odio </a>
 								<a href="#" class="list-group-item">Dapibus ac facilisis in </a>
 								<a href="#" class="list-group-item">Morbi leo risus </a>
 							</div>
@@ -2917,22 +2906,16 @@ <h2>Panels</h2>
 					<div class="col-lg-4">
 						<div class="bs-component">
 							<div class="panel panel-default">
-								<div class="panel-body">
-									Basic panel
-								</div>
+								<div class="panel-body">Basic panel</div>
 							</div>
 
 							<div class="panel panel-default">
 								<div class="panel-heading">Panel heading</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 
 							<div class="panel panel-default">
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 								<div class="panel-footer">Panel footer</div>
 							</div>
 						</div>
@@ -2943,27 +2926,21 @@ <h2>Panels</h2>
 								<div class="panel-heading">
 									<h3 class="panel-title">Panel primary</h3>
 								</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 
 							<div class="panel panel-success">
 								<div class="panel-heading">
 									<h3 class="panel-title">Panel success</h3>
 								</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 
 							<div class="panel panel-warning">
 								<div class="panel-heading">
 									<h3 class="panel-title">Panel warning</h3>
 								</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 						</div>
 					</div>
@@ -2973,18 +2950,14 @@ <h3 class="panel-title">Panel warning</h3>
 								<div class="panel-heading">
 									<h3 class="panel-title">Panel danger</h3>
 								</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 
 							<div class="panel panel-info">
 								<div class="panel-heading">
 									<h3 class="panel-title">Panel info</h3>
 								</div>
-								<div class="panel-body">
-									Panel content
-								</div>
+								<div class="panel-body">Panel content</div>
 							</div>
 						</div>
 					</div>
@@ -2998,23 +2971,17 @@ <h2>Wells</h2>
 				<div id="wells-component" class="row">
 					<div class="col-lg-4">
 						<div class="bs-component">
-							<div class="well">
-								Look, I'm in a well!
-							</div>
+							<div class="well">Look, I'm in a well!</div>
 						</div>
 					</div>
 					<div class="col-lg-4">
 						<div class="bs-component">
-							<div class="well well-sm">
-								Look, I'm in a small well!
-							</div>
+							<div class="well well-sm">Look, I'm in a small well!</div>
 						</div>
 					</div>
 					<div class="col-lg-4">
 						<div class="bs-component">
-							<div class="well well-lg">
-								Look, I'm in a large well!
-							</div>
+							<div class="well well-lg">Look, I'm in a large well!</div>
 						</div>
 					</div>
 				</div>
@@ -3041,7 +3008,10 @@ <h2>Dialog box</h2>
 											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
 												×
 											</button>
-											<h4 class="modal-title">Modal title</h4>
+											<h2 class="modal-title">Modal title</h2>
+											<h3 class="modal-subtitle error">
+												Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+											</h3>
 										</div>
 										<div class="modal-body">
 											<p class="modal-content-tpl">
@@ -3230,19 +3200,27 @@ <h4 class="modal-title">Source Code</h4>
 				var content = document.querySelector(cls);
 				content.parentNode.appendChild(content.cloneNode(true));
 			}
-			(function() {
+			function toggleTheme() {
+				var dataset = document.body.dataset;
+				if (dataset.theme === 'light') {
+					dataset.theme = 'dark';
+				} else {
+					dataset.theme = 'light';
+				}
+			}
+			(function () {
 				function setDropDownMenuVisibility() {
 					var top = $(document).scrollTop();
 					var $banner = $('#banner');
 					var elementTop = $banner.offset().top;
 					var elementBottom = elementTop + $banner.height();
 
-					$('#menu_dropdown').toggle(top >= elementBottom);
+					// $('#menu_dropdown').toggle(top >= elementBottom);
 				}
 
-				$(function() {
+				$(function () {
 					setDropDownMenuVisibility();
-					$('input[type=checkbox][data-checked]').change(function() {
+					$('input[type=checkbox][data-checked]').change(function () {
 						const el = $(this);
 						switch (el.attr('data-checked')) {
 							case '0':
@@ -3263,7 +3241,7 @@ <h4 class="modal-title">Source Code</h4>
 					});
 				});
 
-				$(window).scroll(function() {
+				$(window).scroll(function () {
 					var top = $(document).scrollTop();
 					$('.splash').css({
 						'background-position': '0px -' + (top / 3).toFixed(2) + 'px',
@@ -3273,15 +3251,13 @@ <h4 class="modal-title">Source Code</h4>
 
 					setDropDownMenuVisibility();
 				});
-				$("a[href='#']").click(function(e) {
+				$("a[href='#']").click(function (e) {
 					e.preventDefault();
 				});
 				var $button = $(
 					"<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>",
-				).click(function() {
-					var html = $(this)
-						.parent()
-						.html();
+				).click(function () {
+					var html = $(this).parent().html();
 					html = cleanSource(html);
 					$('#source-modal pre').text(html);
 					$('#source-modal').modal();
@@ -3289,11 +3265,11 @@ <h4 class="modal-title">Source Code</h4>
 				$('.bs-component [data-toggle="popover"]').popover();
 				$('.bs-component [data-toggle="tooltip"]').tooltip();
 				$('.bs-component').hover(
-					function() {
+					function () {
 						$(this).append($button);
 						$button.show();
 					},
-					function() {
+					function () {
 						$button.hide();
 					},
 				);
@@ -3309,7 +3285,7 @@ <h4 class="modal-title">Source Code</h4>
 					lines.splice(-1, 1);
 					var indentSize = lines[0].length - lines[0].trim().length,
 						re = new RegExp(' {' + indentSize + '}');
-					lines = lines.map(function(line) {
+					lines = lines.map(function (line) {
 						if (line.match(re)) {
 							line = line.substring(indentSize);
 						}
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 2b2e8fedf15..e5fae13fdcd 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@talend/bootstrap-sass": "^3.4.8",
+    "@talend/design-tokens": "^2.7.3",
     "@talend/icons": "^6.58.1"
   },
   "devDependencies": {
diff --git a/packages/theme/src/theme/_badges.scss b/packages/theme/src/theme/_badges.scss
new file mode 100644
index 00000000000..556b5444d95
--- /dev/null
+++ b/packages/theme/src/theme/_badges.scss
@@ -0,0 +1,12 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.badge {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-neutral-background-strong;
+}
+
+.list-group-item.active > .badge,
+.nav-pills > .active > a > .badge {
+	color: tokens.$coral-color-accent-text;
+	background-color: tokens.$coral-color-accent-background-weak;
+}
diff --git a/packages/theme/src/theme/_breadcrumbs.scss b/packages/theme/src/theme/_breadcrumbs.scss
index 97e317b2a53..fc188cfde9a 100644
--- a/packages/theme/src/theme/_breadcrumbs.scss
+++ b/packages/theme/src/theme/_breadcrumbs.scss
@@ -1,3 +1,4 @@
+@use '~@talend/design-tokens/lib/tokens';
 ////
 /// Bootstrap breadcrumbs customization
 /// @group Breadcrumbs
@@ -10,8 +11,9 @@
 	padding: 0 $padding-normal;
 	height: $breadcrumb-height;
 	white-space: nowrap;
-	color: $breadcrumb-items-color;
+	color: tokens.$coral-color-neutral-text;
 	border-radius: 0;
+	background-color: tokens.$coral-color-neutral-background;
 
 	> li {
 		display: flex;
@@ -28,6 +30,7 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			color: tokens.$coral-color-accent-text;
 		}
 
 		+ li {
@@ -38,7 +41,7 @@
 				margin: 0 $padding-small $padding-smaller $padding-smaller;
 				padding: 0 0 0 $padding-small;
 				transform: rotate(30deg);
-				border-right: 0.1rem solid $breadcrumb-items-separator-color;
+				border-right: 0.1rem solid tokens.$coral-color-neutral-border;
 				height: 1.25rem;
 			}
 		}
@@ -46,7 +49,7 @@
 		// stylelint-disable-next-line selector-no-qualifying-type
 		&.active span {
 			font-weight: $font-weight-semi-bold;
-			color: $breadcrumb-items-active-color;
+			color: tokens.$coral-color-neutral-text;
 		}
 	}
 
@@ -65,7 +68,7 @@
 		&:active,
 		&:active:focus,
 		&.active {
-			color: $breadcrumb-items-color-hover;
+			color: tokens.$coral-color-accent-text-active;
 			background: transparent;
 			text-decoration: none;
 		}
diff --git a/packages/theme/src/theme/_buttons.scss b/packages/theme/src/theme/_buttons.scss
index 103f5eeaca2..2e76a38149b 100644
--- a/packages/theme/src/theme/_buttons.scss
+++ b/packages/theme/src/theme/_buttons.scss
@@ -3,24 +3,11 @@
 /// @group Buttons
 ////
 
-:root {
-	--t-button-color: currentColor;
-	--t-button-background-color: transparent;
-	--t-button-border-color: transparent;
+@use '@talend/design-tokens/lib/tokens';
 
+:root {
 	--t-button-padding: 0 #{$padding-normal};
 	--t-button-height: #{$btn-line-height - 0.2rem};
-
-	--t-button-primary-color: #{$btn-primary-color};
-	--t-button-primary-background: #{$btn-primary-bg};
-	--t-button-primary-background--hover: #{$btn-primary-bg-hover};
-	--t-button-primary-background--active: #{$btn-primary-bg-active};
-
-	--t-button-secondary-background--hover: #{$lochmara100};
-
-	--t-button-destructive-background: #{$btn-danger-bg};
-	--t-button-destructive-background--hover: #{$btn-danger-bg-hover};
-	--t-button-destructive-background--active: #{$btn-danger-bg-active};
 }
 
 .btn {
@@ -31,14 +18,15 @@
 	padding: var(--t-button-padding);
 	border: 1px solid;
 	box-shadow: none;
+	/* stylelint-disable-next-line declaration-property-value-disallowed-list */
 	transition: all 0.1s ease-out;
 
 	&,
 	&:focus,
 	&:hover {
-		color: var(--t-button-color);
-		background-color: var(--t-button-background-color);
-		border-color: var(--t-button-border-color);
+		color: currentColor;
+		background-color: transparent;
+		border-color: transparent;
 	}
 
 	&:active,
@@ -77,7 +65,7 @@
 	}
 
 	&,
-	& > span {
+	> span {
 		display: inline-flex;
 		gap: 0.5rem;
 		align-items: center;
@@ -98,93 +86,151 @@
 	&-success,
 	&-info,
 	&-warning,
-	&.btn-danger,
-	&--primary,
-	&.btn--destructive {
-		--t-button-color: var(--t-button-primary-color);
+	&--primary {
+		background: tokens.$coral-color-accent-background-strong;
+		color: tokens.$coral-color-accent-text-weak;
+
+		&:hover {
+			background: tokens.$coral-color-accent-background-strong-hover;
+			color: tokens.$coral-color-accent-text-weak-hover;
+		}
+
+		&:active {
+			background: tokens.$coral-color-accent-background-strong-active;
+			color: tokens.$coral-color-accent-text-weak-active;
+		}
 	}
 
-	&-primary,
-	&-success,
-	&-info,
-	&-warning,
-	&--primary {
-		--t-button-background-color: var(--t-button-primary-background);
+	&-inverse {
+		background-color: transparent;
+		border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
+		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-background-color: var(--t-button-primary-background--hover);
+			background: tokens.$coral-color-accent-background-weak-hover;
+			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
+			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-background-color: var(--t-button-primary-background--active);
+			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
+		}
+
+		&:disabled,
+		&[aria-disabled='true'],
+		&[aria-busy='true'] {
+			background: transparent;
+			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
+
+			&:hover {
+				background-color: transparent;
+			}
 		}
 	}
 
-	&-inverse,
-	&--secondary,
-	&-tertiary,
-	&--tertiary,
-	&-link {
-		--t-button-color: var(--t-button-primary-background);
+	&--secondary {
+		background-color: transparent;
+		border-color: tokens.$coral-color-accent-text;
+		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-color: var(--t-button-primary-background--hover);
+			background: tokens.$coral-color-accent-background-weak-hover;
+			border-color: tokens.$coral-color-accent-text;
+			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-color: var(--t-button-primary-background--active);
+			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
+		}
+
+		&:disabled,
+		&[aria-disabled='true'],
+		&[aria-busy='true'] {
+			background: transparent;
+			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
+
+			&:hover {
+				background-color: transparent;
+			}
 		}
 	}
 
-	&-inverse,
-	&--secondary,
 	&-tertiary,
 	&--tertiary {
-		--t-button-background-color: transparent;
+		background-color: transparent;
+		color: tokens.$coral-color-accent-text;
+
+		&:hover {
+			background: tokens.$coral-color-accent-background-weak-hover;
+			color: tokens.$coral-color-accent-text-strong-hover;
+		}
 
-		&:hover,
 		&:active {
-			--t-button-background-color: var(--t-button-secondary-background--hover);
+			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
-		&[disabled] {
+		&:disabled,
+		&[aria-disabled='true'],
+		&[aria-busy='true'] {
+			background: transparent;
+			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
+
 			&:hover {
-				--t-button-background-color: transparent;
+				background-color: transparent;
 			}
 		}
 	}
 
-	&-inverse,
-	&--secondary {
-		--t-button-border-color: var(--t-button-primary-background);
-	}
+	&-link {
+		color: tokens.$coral-color-accent-text;
 
-	&.btn-danger,
-	&.btn--destructive {
-		--t-button-background-color: var(--t-button-destructive-background);
-		--t-button-border-color: var(--t-button-destructive-background);
+		&:hover {
+			color: tokens.$coral-color-accent-text-strong-hover;
+		}
 
-		&,
-		&:hover,
 		&:active {
-			--t-button-color: var(--t-button-primary-color);
+			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
+		&:disabled,
+		&[aria-disabled='true'],
+		&[aria-busy='true'] {
+			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
+		}
+	}
+
+	&.btn-danger,
+	&.btn--destructive {
+		background: tokens.$coral-color-danger-background-strong;
+		border: tokens.$coral-color-danger-background-strong;
+		color: tokens.$coral-color-danger-text-weak;
+
 		&:hover {
-			--t-button-background-color: var(--t-button-destructive-background--hover);
-			--t-button-border-color: var(--t-button-destructive-background--hover);
+			background: tokens.$coral-color-danger-background-strong-hover;
+			color: tokens.$coral-color-danger-text-weak-hover;
 		}
 
 		&:active {
-			--t-button-background-color: var(--t-button-destructive-background--active);
-			--t-button-border-color: var(--t-button-destructive-background--active);
+			background: tokens.$coral-color-danger-background-strong-active;
+			color: tokens.$coral-color-danger-text-weak-active;
+		}
+
+		&[disabled] &:hover,
+		.disabled &:hover {
+			background: tokens.$coral-color-neutral-background-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
 		}
 	}
 
 	&-icon-text {
 		--t-button-padding: 0;
-		--t-button-background-color: transparent;
-		--t-button-border-color: transparent;
 	}
 
 	&-xs,
diff --git a/packages/theme/src/theme/_code.scss b/packages/theme/src/theme/_code.scss
new file mode 100644
index 00000000000..f53210b719c
--- /dev/null
+++ b/packages/theme/src/theme/_code.scss
@@ -0,0 +1,11 @@
+@use '@talend/design-tokens/lib/tokens';
+
+code {
+	color: tokens.$coral-color-danger-text-strong;
+	background-color: tokens.$coral-color-danger-background;
+}
+
+pre {
+	background-color: tokens.$coral-color-neutral-background-medium;
+	color: tokens.$coral-color-neutral-text;
+}
diff --git a/packages/theme/src/theme/_colors.scss b/packages/theme/src/theme/_colors.scss
index 1da9c17689b..f6fb700eb28 100644
--- a/packages/theme/src/theme/_colors.scss
+++ b/packages/theme/src/theme/_colors.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable color-hex-case */
 ////
 /// Talend colors
 /// @group Colors
@@ -7,15 +8,15 @@
 ///
 /// @type Color
 $gray0: white;
-$gray50: #F3F3F3;
-$gray75: #E8E8E8;
-$gray100: #D2D2D2;
-$gray200: #BCBCBC;
-$gray300: #A5A5A5;
-$gray400: #8F8F8F;
+$gray50: #f3f3f3;
+$gray75: #e8e8e8;
+$gray100: #d2d2d2;
+$gray200: #bcbcbc;
+$gray300: #a5a5a5;
+$gray400: #8f8f8f;
 $gray500: #797979;
 $gray600: #626262;
-$gray700: #4C4C4C;
+$gray700: #4c4c4c;
 $gray800: #363636;
 $gray900: #202020;
 $gray: $gray500;
@@ -23,45 +24,45 @@ $gray: $gray500;
 /// Talend coral color
 ///
 /// @type Color
-$coral100: #FFE1E2;
-$coral200: #FFC4C5;
-$coral300: #FFA7A9;
-$coral400: #FF8A8C;
-$coral500: #FF6D70;
-$coral600: #CC5759;
+$coral100: #ffe1e2;
+$coral200: #ffc4c5;
+$coral300: #ffa7a9;
+$coral400: #ff8a8c;
+$coral500: #ff6d70;
+$coral600: #cc5759;
 $coral700: #994143;
-$coral800: #662B2C;
+$coral800: #662b2c;
 $coral900: #321516;
-$coral: #FF6D70;
+$coral: #ff6d70;
 
 /// Talend brand color
 ///
 /// @type Color
-$russian-violet: #2C1F56;
+$russian-violet: #2c1f56;
 
 /// Primary color, mostly used for the selected elements
 /// and to draw attention to the important elements of interaction.
 ///
 /// @type Color
-$deep-blue100: #D1D9E1;
-$deep-blue200: #A3B3C4;
-$deep-blue300: #758DA6;
+$deep-blue100: #d1d9e1;
+$deep-blue200: #a3b3c4;
+$deep-blue300: #758da6;
 $deep-blue400: #476789;
-$deep-blue500: #19426C;
+$deep-blue500: #19426c;
 $deep-blue600: #143456;
-$deep-blue700: #0F2740;
-$deep-blue800: #0A1A2B;
-$deep-blue900: #040D15;
+$deep-blue700: #0f2740;
+$deep-blue800: #0a1a2b;
+$deep-blue900: #040d15;
 $regal-blue: $deep-blue500;
 
-$pale-cyan100: #CDE3F2;
-$pale-cyan200: #9BC7E6;
-$pale-cyan300: #69ACD9;
-$pale-cyan400: #3790CD;
-$pale-cyan500: #0675C1;
-$pale-cyan600: #045D9A;
+$pale-cyan100: #cde3f2;
+$pale-cyan200: #9bc7e6;
+$pale-cyan300: #69acd9;
+$pale-cyan400: #3790cd;
+$pale-cyan500: #0675c1;
+$pale-cyan600: #045d9a;
 $pale-cyan700: #034673;
-$pale-cyan800: #022E4D;
+$pale-cyan800: #022e4d;
 $pale-cyan900: #011726;
 
 /// Primary color, mostly used for the selected elements
@@ -76,21 +77,21 @@ $st-tropaz: #236192;
 ///
 /// @type Color
 /// @deprecated
-$green-talend: #B6BE00;
+$green-talend: #b6be00;
 
 /// Secondary color.
 /// Used to valid/validated/validation elements.
 ///
 /// @type Color
-$rio-grande100: #E6F1D9;
-$rio-grande200: #CDE4B3;
-$rio-grande300: #B4D78D;
-$rio-grande400: #9BCA67;
-$rio-grande500: #82BD41;
+$rio-grande100: #e6f1d9;
+$rio-grande200: #cde4b3;
+$rio-grande300: #b4d78d;
+$rio-grande400: #9bca67;
+$rio-grande500: #82bd41;
 $rio-grande600: #689734;
-$rio-grande700: #4E7127;
-$rio-grande800: #344B1A;
-$rio-grande900: #19250C;
+$rio-grande700: #4e7127;
+$rio-grande800: #344b1a;
+$rio-grande900: #19250c;
 $rio-grande: $rio-grande500;
 
 /// Secondary color.
@@ -98,83 +99,83 @@ $rio-grande: $rio-grande500;
 ///
 /// @type Color
 /// @deprecated
-$scooter: #66BDFF;
+$scooter: #66bdff;
 
 /// Secondary color.
 /// Errors and to notify non-valid elements or warning information.
 ///
 /// @type Color
 /// @deprecated
-$chestnut-rose: #E96065;
+$chestnut-rose: #e96065;
 
 /// Secondary color.
 /// Used to notify invalid elements or warning information.
 ///
 /// @type Color
-$lightning-yellow100: #FCF3DA;
-$lightning-yellow200: #FAE7B5;
-$lightning-yellow300: #F7DB90;
-$lightning-yellow400: #F5CF6B;
-$lightning-yellow500: #F3C446;
-$lightning-yellow600: #C29C38;
-$lightning-yellow700: #91752A;
-$lightning-yellow800: #614E1C;
-$lightning-yellow900: #30270D;
+$lightning-yellow100: #fcf3da;
+$lightning-yellow200: #fae7b5;
+$lightning-yellow300: #f7db90;
+$lightning-yellow400: #f5cf6b;
+$lightning-yellow500: #f3c446;
+$lightning-yellow600: #c29c38;
+$lightning-yellow700: #91752a;
+$lightning-yellow800: #614e1c;
+$lightning-yellow900: #30270d;
 $lightning-yellow: $lightning-yellow500;
 
 /// Secondary color.
 ///
 /// @type Color
-$jaffa100: #FAE6D5;
-$jaffa200: #F6CDAC;
-$jaffa300: #F2B482;
-$jaffa400: #EE9B59;
-$jaffa500: #EA8330;
-$jaffa600: #BB6826;
-$jaffa700: #8C4E1C;
-$jaffa800: #5D3413;
-$jaffa900: #2E1A09;
+$jaffa100: #fae6d5;
+$jaffa200: #f6cdac;
+$jaffa300: #f2b482;
+$jaffa400: #ee9b59;
+$jaffa500: #ea8330;
+$jaffa600: #bb6826;
+$jaffa700: #8c4e1c;
+$jaffa800: #5d3413;
+$jaffa900: #2e1a09;
 $jaffa: $jaffa500;
 
 /// Secondary color.
 ///
 /// @type Color
-$moody-purple100: #E0E0F5;
-$moody-purple200: #C1C1EC;
-$moody-purple300: #A3A2E3;
-$moody-purple400: #8483DA;
-$moody-purple500: #6664D1;
-$moody-purple600: #5150A7;
-$moody-purple700: #3D3C7D;
+$moody-purple100: #e0e0f5;
+$moody-purple200: #c1c1ec;
+$moody-purple300: #a3a2e3;
+$moody-purple400: #8483da;
+$moody-purple500: #6664d1;
+$moody-purple600: #5150a7;
+$moody-purple700: #3d3c7d;
 $moody-purple800: #282853;
 $moody-purple900: #141329;
 
 /// Secondary color.
 ///
 /// @type Color
-$lochmara100: #CDE3F2;
-$lochmara200: #9BC7E6;
-$lochmara300: #69ACD9;
-$lochmara400: #3790CD;
-$lochmara500: #0675C1;
-$lochmara600: #045D9A;
+$lochmara100: #cde3f2;
+$lochmara200: #9bc7e6;
+$lochmara300: #69acd9;
+$lochmara400: #3790cd;
+$lochmara500: #0675c1;
+$lochmara600: #045d9a;
 $lochmara700: #034673;
-$lochmara800: #022E4D;
+$lochmara800: #022e4d;
 $lochmara900: #011726;
 $lochmara: $lochmara500;
 
 /// Secondary color.
 ///
 /// @type Color
-$pale-cyan100: #E9F5FB;
-$pale-cyan200: #D3ECF7;
-$pale-cyan300: #BDE3F4;
-$pale-cyan400: #A7DAF0;
-$pale-cyan500: #91D1ED;
-$pale-cyan600: #74A7BD;
-$pale-cyan700: #577D8E;
-$pale-cyan800: #3A535E;
-$pale-cyan900: #1D292F;
+$pale-cyan100: #e9f5fb;
+$pale-cyan200: #d3ecf7;
+$pale-cyan300: #bde3f4;
+$pale-cyan400: #a7daf0;
+$pale-cyan500: #91d1ed;
+$pale-cyan600: #74a7bd;
+$pale-cyan700: #577d8e;
+$pale-cyan800: #3a535e;
+$pale-cyan900: #1d292f;
 $pale-cyan: $pale-cyan500;
 
 /// Greyscale.
diff --git a/packages/theme/src/theme/_dropdowns.scss b/packages/theme/src/theme/_dropdowns.scss
index 16ba60c7927..e2d8ef74ce0 100644
--- a/packages/theme/src/theme/_dropdowns.scss
+++ b/packages/theme/src/theme/_dropdowns.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 ////
 /// Bootstrap dropdowns customization
 /// @group Dropdowns
@@ -33,14 +35,21 @@ $dropdown-caret-up-axis: -45deg !default;
 		margin: 0;
 		padding: $padding-small 0;
 		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.175);
+		background-color: tokens.$coral-color-neutral-background;
 
 		li > a {
+			color: tokens.$coral-color-neutral-text;
 			display: flex;
 			align-items: center;
 			flex-basis: 100%;
 			padding: calc(#{$padding-normal} / 2) $padding-large;
 			transition: 0.1s background-color ease-out;
 
+			&:hover {
+				background-color: tokens.$coral-color-neutral-background-medium;
+				color: tokens.$coral-color-neutral-text;
+			}
+
 			> svg:first-child {
 				margin-right: $padding-small;
 			}
diff --git a/packages/theme/src/theme/_forms.checkbox.scss b/packages/theme/src/theme/_forms.checkbox.scss
index 09492a5ccaa..fb19ea3f06b 100644
--- a/packages/theme/src/theme/_forms.checkbox.scss
+++ b/packages/theme/src/theme/_forms.checkbox.scss
@@ -1,88 +1,113 @@
-$tt-checkbox-size: 1.4rem !default;
-
-input[type='checkbox'] {
-	&::before,
-	&::after,
-	+ *::before,
-	+ *::after {
-		width: $tt-checkbox-size;
-		height: $tt-checkbox-size;
-	}
-
-	&::before,
-	+ *::before {
-		background-color: var(--t-form-background-color);
-		border: 1px solid var(--t-form-border-color);
-		border-radius: 2px;
-	}
+@use '~@talend/design-tokens/lib/tokens';
 
-	&::after,
-	+ *::after {
-		background-size: contain;
-	}
+$tt-checkbox-size: 1.4rem !default;
+$checkmark-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjA1IDEgMyA1LjEuOTUgMy4wNDk1IDAgNGwzIDMgNS01LjA1TDcuMDUgMVoiIGZpbGw9IiNmZmYiLz48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMSIgd2lkdGg9IjgiIGhlaWdodD0iNiI+PHBhdGggZD0iTTcuMDUgMSAzIDUuMS45NSAzLjA0OTUgMCA0bDMgMyA1LTUuMDVMNy4wNSAxWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48L3N2Zz4=');
+$checkmark-image-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCA1SDBWM2g4djJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+');
 
-	// Indeterminate Checkboxes style
-	&[data-checked='1'] {
+.checkbox {
+	input[type='checkbox'] {
 		&::before,
-		+ *::before {
-			background-color: var(--t-form-border-color--focus);
-			border-color: var(--t-form-border-color--checked);
-		}
-
 		&::after,
+		+ *::before,
 		+ *::after {
-			margin: 0;
 			width: $tt-checkbox-size;
 			height: $tt-checkbox-size;
-			background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMTIgMTIiPgogIDxyZWN0IHg9IjMiIHk9IjUiIHdpZHRoPSI2IiBoZWlnaHQ9IjIiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
 		}
-	}
 
-	&:checked {
 		&::before,
 		+ *::before {
-			background-color: var(--t-form-border-color--focus);
-			border-color: var(--t-form-border-color--checked);
+			background-color: tokens.$coral-color-neutral-background-medium;
+			border: 1px solid tokens.$coral-color-neutral-border;
+			border-radius: 2px;
 		}
 
 		&::after,
 		+ *::after {
-			$check-mark-margin: 0.1rem;
-			$check-mark-size: $tt-checkbox-size - 2 * $check-mark-margin;
-			margin: $check-mark-margin;
-			width: $check-mark-size;
-			height: $check-mark-size;
-			background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImZpbGw6IHdoaXRlIj4KCTxwYXRoIGQ9Ik02IDE0TDAgOGwxLjktMS45TDYgMTAuMiAxNC4xIDIgMTYgMy45eiI+PC9wYXRoPgo8L3N2Zz4=');
+			background-size: contain;
 		}
-	}
 
-	&:hover,
-	+ *:hover {
-		&,
-		&:checked {
+		// Indeterminate Checkboxes style
+		&[data-checked='1'] {
 			&::before,
 			+ *::before {
-				border-color: var(--t-form-border-color--hover);
+				border-color: tokens.$coral-color-accent-border;
+				background-color: tokens.$coral-color-accent-background-strong;
+			}
+
+			&::after,
+			+ *::after {
+				margin: 0;
+				width: calc(#{$tt-checkbox-size} / 2);
+				height: calc(#{$tt-checkbox-size} / 2);
+				left: calc(#{$tt-checkbox-size} / 2 - #{$tt-checkbox-size} / 4);
+				top: calc(#{$tt-checkbox-size} / 2 - #{$tt-checkbox-size} / 4);
+				background-image: none;
+				background-color: tokens.$coral-color-neutral-background;
+				mask-image: $checkmark-image-indeterminate;
 			}
 		}
-	}
 
-	&:disabled {
-		&::before,
-		+ *::before {
-			border-color: var(--t-form-border-color--disabled);
+		&:checked {
+			&::before,
+			+ *::before {
+				background-color: tokens.$coral-color-accent-background-strong;
+				border-color: tokens.$coral-color-accent-border;
+			}
+
+			&::after,
+			+ *::after {
+				width: calc(#{$tt-checkbox-size} / 2);
+				height: calc(#{$tt-checkbox-size} / 2);
+				left: calc(#{$tt-checkbox-size} / 2 - #{$tt-checkbox-size} / 4);
+				top: calc(#{$tt-checkbox-size} / 2 - #{$tt-checkbox-size} / 4);
+				background-image: none;
+				background-color: tokens.$coral-color-neutral-background;
+				mask-image: $checkmark-image;
+			}
 		}
 
-		&[data-checked='1']::before,
-		&[data-checked='1'] + *::before {
-			background-color: var(--t-form-border-color--disabled);
-			border-color: var(--t-form-border-color--disabled);
+		&:hover,
+		+ *:hover {
+			&::before,
+			+ *::before {
+				border-color: tokens.$coral-color-accent-border-hover;
+			}
+
+			&:checked {
+				&::before,
+				+ *::before {
+					background-color: tokens.$coral-color-accent-background-strong-hover;
+				}
+			}
 		}
 
-		&:checked::before,
-		&:checked + *::before {
-			background-color: var(--t-form-border-color--disabled);
-			border-color: var(--t-form-border-color--disabled);
+		&:disabled {
+			&::before,
+			+ *::before {
+				border-color: tokens.$coral-color-neutral-border-disabled;
+			}
+
+			&[data-checked='1']::before,
+			&[data-checked='1'] + *::before {
+				background-color: tokens.$coral-color-neutral-background-disabled;
+				border-color: tokens.$coral-color-neutral-border-disabled;
+			}
+
+			&:checked::before,
+			&:checked + *::before {
+				background-color: tokens.$coral-color-neutral-background-disabled;
+				border-color: tokens.$coral-color-neutral-border-disabled;
+			}
+
+			&:checked::after,
+			&:checked + *::after {
+				background-color: tokens.$coral-color-neutral-icon-weak;
+			}
+
+			&[data-checked='1']::after,
+			&[data-checked='1'] + *::after {
+				background-color: tokens.$coral-color-neutral-icon-weak;
+			}
 		}
 	}
 }
diff --git a/packages/theme/src/theme/_forms.input.scss b/packages/theme/src/theme/_forms.input.scss
index 7c3ca0a6193..94f3922d366 100644
--- a/packages/theme/src/theme/_forms.input.scss
+++ b/packages/theme/src/theme/_forms.input.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 .radio input[type='radio'],
 .radio-inline input[type='radio'],
 .checkbox input[type='checkbox'],
@@ -12,35 +14,40 @@ input::-ms-clear {
 .form-control {
 	padding: 0 10px;
 	margin-bottom: $padding-smaller;
-	color: var(--t-form-color);
-	background-color: var(--t-form-background-color);
-	border: 1px solid var(--t-form-border-color);
+	color: tokens.$coral-color-neutral-text;
+	background-color: transparent;
+	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	font-weight: normal;
 	box-shadow: none;
 
 	&:hover {
-		border-color: var(--t-form-border-color--hover);
+		border-color: tokens.$coral-color-neutral-border-strong-hover;
 	}
 
 	&:focus {
 		border-width: 2px;
-		border-color: var(--t-form-border-color--focus);
+		border-color: tokens.$coral-color-accent-border;
 		box-shadow: none;
 	}
 
 	&[disabled] {
-		border-color: var(--t-form-border-color--disabled);
+		border-color: tokens.$coral-color-neutral-border-disabled;
 	}
 
+	&[disabled],
 	&[readonly],
 	&[readonly]:focus {
 		border-width: 0;
-		color: var(--t-form-color--readonly);
-		background-color: var(--t-form-background-color--readonly);
-		border-color: var(--t-form-border-color--readonly);
+		color: tokens.$coral-color-neutral-text;
+		background-color: tokens.$coral-color-neutral-background-strong;
+		border-color: tokens.$coral-color-neutral-border-weak;
 	}
 
 	&::placeholder {
-		color: var(--t-form-placeholder-color);
+		color: tokens.$coral-color-neutral-text-weak;
 	}
 }
+
+.has-error .form-control {
+	border-color: tokens.$coral-color-danger-border;
+}
diff --git a/packages/theme/src/theme/_forms.label.scss b/packages/theme/src/theme/_forms.label.scss
index db067414472..ba7f4896449 100644
--- a/packages/theme/src/theme/_forms.label.scss
+++ b/packages/theme/src/theme/_forms.label.scss
@@ -1,7 +1,9 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 label {
 	font-size: $font-size-small;
 	font-weight: 600;
-	color: var(--t-form-color);
+	color: tokens.$coral-color-neutral-text;
 	cursor: pointer;
 }
 
@@ -11,6 +13,8 @@ label {
 }
 
 // Mandatory for being stronger than Bootstrap
+.has-success .control-label,
+.has-warning .control-label,
 .has-error .help-block,
 .has-error .control-label,
 .has-error .radio,
@@ -21,5 +25,5 @@ label {
 .has-error.checkbox label,
 .has-error.radio-inline label,
 .has-error.checkbox-inline label {
-	color: var(--t-form-color);
+	color: tokens.$coral-color-neutral-text;
 }
diff --git a/packages/theme/src/theme/_forms.legend.scss b/packages/theme/src/theme/_forms.legend.scss
index 6809745ff95..e097bc1f0ea 100644
--- a/packages/theme/src/theme/_forms.legend.scss
+++ b/packages/theme/src/theme/_forms.legend.scss
@@ -1,5 +1,8 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 legend {
 	font-size: 1.7rem;
 	font-weight: 700;
 	border-bottom: none;
+	color: tokens.$coral-color-neutral-text-weak;
 }
diff --git a/packages/theme/src/theme/_forms.radio.scss b/packages/theme/src/theme/_forms.radio.scss
index 34c200c1ba4..f88ab05a3da 100644
--- a/packages/theme/src/theme/_forms.radio.scss
+++ b/packages/theme/src/theme/_forms.radio.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 $tt-radio-size: 1.4rem !default;
 
 input[type='radio'] {
@@ -14,26 +16,26 @@ input[type='radio'] {
 	&::before,
 	+ *::before {
 		@include scale(0);
-		background-color: var(--t-form-background-color);
+		background-color: tokens.$coral-color-neutral-background-medium;
 		z-index: 1;
 	}
 
 	&::after,
 	+ *::after {
-		background-color: var(--t-form-background-color);
-		border: 1px solid var(--t-form-border-color);
+		background-color: tokens.$coral-color-neutral-background-medium;
+		border: 1px solid tokens.$coral-color-neutral-border;
 	}
 
 	&:checked {
 		&::before,
 		+ *::before {
 			@include scale(0.5);
-			background-color: var(--t-form-border-color--focus);
+			background-color: tokens.$coral-color-accent-border;
 		}
 
 		&::after,
 		+ *::after {
-			border-color: var(--t-form-border-color--focus);
+			border-color: tokens.$coral-color-accent-border;
 		}
 	}
 
@@ -43,7 +45,7 @@ input[type='radio'] {
 		&:checked {
 			&::after,
 			+ *::after {
-				border-color: var(--t-form-border-color--focus);
+				border-color: tokens.$coral-color-accent-border;
 			}
 		}
 	}
@@ -51,14 +53,14 @@ input[type='radio'] {
 	&:disabled {
 		&:checked::before,
 		&:checked + *::before {
-			background-color: var(--t-form-border-color--disabled);
+			background-color: tokens.$coral-color-neutral-background-disabled;
 		}
 
 		&::after,
 		+ *::after,
 		&:checked::after,
 		&:checked + *::after {
-			border-color: var(--t-form-border-color--disabled);
+			border-color: tokens.$coral-color-neutral-background-disabled;
 		}
 	}
 }
diff --git a/packages/theme/src/theme/_forms.scss b/packages/theme/src/theme/_forms.scss
index 43baef6be91..9db40d0600e 100644
--- a/packages/theme/src/theme/_forms.scss
+++ b/packages/theme/src/theme/_forms.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 ////
 /// Bootstrap forms customization
 /// @group Forms
@@ -66,9 +68,9 @@
 @import 'forms.label';
 @import 'forms.legend';
 @import 'forms.select';
+@import 'forms.checkbox';
 @import 'forms.switch';
 @import 'forms.switch-nested';
-@import 'forms.checkbox';
 @import 'forms.radio';
 @import 'forms.textarea';
 
@@ -181,9 +183,9 @@
 	.has-warning &,
 	.has-error &,
 	.has-success & {
-		color: $input-color;
-		border-color: $input-group-addon-border-color;
-		background-color: $input-group-addon-bg;
+		color: tokens.$coral-color-neutral-text;
+		border-color: tokens.$coral-color-neutral-border;
+		background-color: tokens.$coral-color-neutral-background-medium;
 	}
 
 	.btn {
diff --git a/packages/theme/src/theme/_forms.select.scss b/packages/theme/src/theme/_forms.select.scss
index ae7af72dbc3..b879cb92ceb 100644
--- a/packages/theme/src/theme/_forms.select.scss
+++ b/packages/theme/src/theme/_forms.select.scss
@@ -1,11 +1,12 @@
-// stylelint-disable-next-line selector-no-qualifying-type
+/* stylelint-disable selector-no-qualifying-type */
+@use '~@talend/design-tokens/lib/tokens';
+
 select.form-control {
-	border-color: var(--t-form-border-color);
+	border-color: tokens.$coral-color-neutral-border;
 	overflow: auto;
 	cursor: pointer;
 	border-radius: $input-border-radius;
 
-	// stylelint-disable-next-line selector-no-qualifying-type
 	&[multiple] {
 		padding-top: $padding-small;
 		padding-bottom: $padding-small;
@@ -13,14 +14,13 @@ select.form-control {
 
 	&:hover {
 		&:not(:disabled) {
-			border: 1px solid var(--t-form-border-color--hover);
+			border: 1px solid tokens.$coral-color-neutral-border;
 		}
 	}
 
-	// stylelint-disable-next-line selector-no-qualifying-type
 	&:not([multiple]) {
 		appearance: none;
-		background-color: var(--t-form-background-color);
+		background-color: tokens.$coral-color-neutral-background;
 		background-repeat: no-repeat;
 		background-size: $svg-xs-size;
 		background-position-x: calc(100% - 1rem);
@@ -28,7 +28,7 @@ select.form-control {
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.6l-8-8L2.6 3 8 8.4 13.4 3 16 5.6z'%3E%3C/path%3E%3C/svg%3E");
 
 		&:disabled {
-			border: 1px solid var(--t-form-border-color--disabled);
+			border: 1px solid tokens.$coral-color-neutral-border;
 			opacity: 0.54;
 			cursor: not-allowed;
 		}
diff --git a/packages/theme/src/theme/_forms.switch.scss b/packages/theme/src/theme/_forms.switch.scss
index 759e277e562..397ec11b2a2 100644
--- a/packages/theme/src/theme/_forms.switch.scss
+++ b/packages/theme/src/theme/_forms.switch.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 $switch-thumb-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); //$slate-gray;
 $switch-thumb-shadow-focused: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25);
 $switch-thumb-border-disabled: 1px solid rgba(198, 198, 198, 0.3);
@@ -35,7 +37,7 @@ $switch-track-shadow-disabled: inset 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
 		+ *::before {
 			width: 3.2rem;
 			height: 1.6rem;
-			background: $gray75;
+			background: tokens.$coral-color-accent-background;
 			box-shadow: inset 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.25);
 		}
 
@@ -43,25 +45,37 @@ $switch-track-shadow-disabled: inset 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
 			margin: calc((1.2rem - 0.8rem) / 2);
 			width: 1.2rem;
 			height: 1.2rem;
-			background-color: $white;
+			background-color: tokens.$coral-color-neutral-background;
+			mask-image: none;
 		}
 
 		&:disabled {
 			+ * {
-				opacity: 0.54;
+				opacity: 1;
+				color: tokens.$coral-color-neutral-text-disabled;
 				pointer-events: none;
 			}
+
+			+ *::before {
+				background: tokens.$coral-color-neutral-background-disabled;
+			}
+
+			&:checked {
+				+ *::before {
+					background: tokens.$coral-color-neutral-background-disabled;
+				}
+			}
 		}
 
 		&:not(:disabled):hover {
 			+ *::before {
-				background: $gray200;
+				background: tokens.$coral-color-accent-background-hover;
 			}
 		}
 
 		&:checked {
 			+ *::before {
-				background: $lochmara;
+				background: tokens.$coral-color-accent-background-strong;
 			}
 
 			+ *::after {
diff --git a/packages/theme/src/theme/_input-groups.scss b/packages/theme/src/theme/_input-groups.scss
index cc217b505b3..b5a2ae4d460 100644
--- a/packages/theme/src/theme/_input-groups.scss
+++ b/packages/theme/src/theme/_input-groups.scss
@@ -1,3 +1,4 @@
+@use '~@talend/design-tokens/lib/tokens';
 ////
 /// Bootstrap input groups customization
 /// @group Input groups
@@ -12,6 +13,10 @@
 	}
 
 	&-addon {
+		background-color: tokens.$coral-color-neutral-background-medium;
+		color: tokens.$coral-color-neutral-text;
+		border-color: tokens.$coral-color-neutral-border;
+
 		padding-top: $input-group-addon-padding;
 		padding-bottom: $input-group-addon-padding;
 	}
diff --git a/packages/theme/src/theme/_labels.scss b/packages/theme/src/theme/_labels.scss
index 1a1102edd5b..4221e0a184e 100644
--- a/packages/theme/src/theme/_labels.scss
+++ b/packages/theme/src/theme/_labels.scss
@@ -1,14 +1,5 @@
-@mixin label-variant($color) {
-	background-color: rgba($color, 0.2);
-	color: shade($color, 25%);
+@use '~@talend/design-tokens/lib/tokens';
 
-	&[href] {
-		&:hover,
-		&:focus {
-			background-color: shade($color, 10%);
-		}
-	}
-}
 //
 // Labels
 // --------------------------------------------------
@@ -44,7 +35,7 @@
 a.label {
 	&:hover,
 	&:focus {
-		color: $label-link-hover-color;
+		// color: $label-link-hover-color;
 		text-decoration: none;
 		cursor: pointer;
 	}
@@ -54,25 +45,73 @@ a.label {
 // Contextual variations (linked labels get darker on :hover)
 
 .label-default {
-	@include label-variant($label-default-bg);
+	color: tokens.$coral-color-neutral-text;
+	background: tokens.$coral-color-neutral-background-strong;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-neutral-background-strong;
+		}
+	}
 }
 
 .label-primary {
-	@include label-variant($label-primary-bg);
+	color: tokens.$coral-color-accent-text;
+	background: tokens.$coral-color-accent-background;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-accent-background;
+		}
+	}
 }
 
 .label-success {
-	@include label-variant($label-success-bg);
+	color: tokens.$coral-color-success-text;
+	background: tokens.$coral-color-success-background;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-success-background;
+		}
+	}
 }
 
 .label-info {
-	@include label-variant($label-info-bg);
+	color: tokens.$coral-color-accent-text;
+	background: tokens.$coral-color-accent-background;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-accent-background;
+		}
+	}
 }
 
 .label-warning {
-	@include label-variant($label-warning-bg);
+	color: tokens.$coral-color-warning-text;
+	background: tokens.$coral-color-warning-background;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-warning-background;
+		}
+	}
 }
 
 .label-danger {
-	@include label-variant($label-danger-bg);
+	color: tokens.$coral-color-danger-text;
+	background: tokens.$coral-color-danger-background;
+
+	&[href] {
+		&:hover,
+		&:focus {
+			background: tokens.$coral-color-danger-background;
+		}
+	}
 }
diff --git a/packages/theme/src/theme/_list-group.scss b/packages/theme/src/theme/_list-group.scss
new file mode 100644
index 00000000000..2047ed03e64
--- /dev/null
+++ b/packages/theme/src/theme/_list-group.scss
@@ -0,0 +1,25 @@
+/* stylelint-disable selector-no-qualifying-type */
+@use '~@talend/design-tokens/lib/tokens';
+
+.list-group-item {
+	background-color: tokens.$coral-color-neutral-background;
+	border-color: tokens.$coral-color-neutral-border-weak;
+}
+
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-neutral-background-medium;
+	border-color: tokens.$coral-color-neutral-border;
+}
+
+a.list-group-item .list-group-item-heading,
+button.list-group-item .list-group-item-heading {
+	color: tokens.$coral-color-neutral-text;
+}
+
+a.list-group-item,
+button.list-group-item {
+	color: tokens.$coral-color-neutral-text;
+}
diff --git a/packages/theme/src/theme/_modals.scss b/packages/theme/src/theme/_modals.scss
index 39e5a35acbf..4c06ae433a1 100644
--- a/packages/theme/src/theme/_modals.scss
+++ b/packages/theme/src/theme/_modals.scss
@@ -1,3 +1,5 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 .modal-dialog {
 	display: flex;
 	flex-direction: row;
@@ -13,13 +15,14 @@
 		flex-shrink: 0;
 		border: none; // it keeps the border-radius
 		border-radius: $border-radius-base;
+		background: tokens.$coral-color-neutral-background;
 	}
 
 	&-header {
 		border-top-left-radius: $border-radius-base;
 		border-top-right-radius: $border-radius-base;
-		background-color: $modal-header-bg;
-		border-color: $concrete;
+		border: none;
+		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		padding: {
 			top: $modal-title-padding-top;
 			bottom: $modal-title-padding-bottom;
@@ -32,17 +35,16 @@
 		.modal {
 			&-subtitle {
 				font-size: 14px;
-				color: $dark-silver;
 				margin-top: 1px;
 
 				&.error {
-					color: $chestnut-rose;
+					color: tokens.$coral-color-danger-text;
 				}
 			}
 		}
 
 		.close {
-			color: $dove-gray;
+			color: tokens.$coral-color-neutral-text-weak;
 			opacity: 1;
 		}
 	}
@@ -50,7 +52,6 @@
 	&-body {
 		flex-grow: 1;
 		overflow-y: auto;
-		background-color: $wild-sand;
 	}
 
 	&-footer {
diff --git a/packages/theme/src/theme/_navbar.scss b/packages/theme/src/theme/_navbar.scss
index 555ba921135..724b72452e5 100644
--- a/packages/theme/src/theme/_navbar.scss
+++ b/packages/theme/src/theme/_navbar.scss
@@ -1,3 +1,27 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.navbar-inverse {
+	color: tokens.$coral-color-neutral-text-inverted;
+	background: tokens.$coral-color-branding-navigation;
+}
+
+.navbar-default {
+	color: tokens.$coral-color-neutral-text;
+	background: tokens.$coral-color-neutral-background-medium;
+
+	.navbar-nav > li > a {
+		color: tokens.$coral-color-neutral-text;
+	}
+
+	.btn-link:hover,
+	.btn-link:focus,
+	.navbar-nav > li > a:hover,
+	.navbar-nav > li > a:focus {
+		color: tokens.$coral-color-neutral-text;
+		background: tokens.$coral-color-neutral-background-strong;
+	}
+}
+
 .navbar {
 	border: none;
 
@@ -28,3 +52,11 @@
 		font-weight: normal;
 	}
 }
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-neutral-background-strong;
+	// background-color: ;
+}
diff --git a/packages/theme/src/theme/_navs.scss b/packages/theme/src/theme/_navs.scss
index 430320dafd4..91207567715 100644
--- a/packages/theme/src/theme/_navs.scss
+++ b/packages/theme/src/theme/_navs.scss
@@ -1,10 +1,11 @@
 /* stylelint-disable selector-no-qualifying-type */
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-tabbar-active-border-size: 0.2rem !default;
-$tc-tabbar-active-color: $lochmara;
 
 .nav {
 	.btn-link {
+		background-color: inherit;
 		color: inherit;
 		display: inline-block;
 
@@ -21,8 +22,8 @@ $tc-tabbar-active-color: $lochmara;
 	}
 
 	&-inverse {
-		color: $navbar-inverse-color;
-		background-color: $brand-primary;
+		color: tokens.$coral-color-accent-text-weak;
+		background-color: tokens.$coral-color-accent-background-strong;
 	}
 
 	&-pills {
@@ -35,16 +36,25 @@ $tc-tabbar-active-color: $lochmara;
 			&:hover,
 			&.active,
 			&.open {
-				color: $navbar-inverse-color;
-				background-color: $brand-primary-dark;
+				.btn-link {
+					color: tokens.$coral-color-accent-text-weak;
+					background-color: tokens.$coral-color-accent-background-strong;
+				}
 			}
 
 			&.disabled .btn {
 				&:focus,
 				&:hover {
-					color: shade($navbar-inverse-color, 10);
+					// background-color: tokens.$coral-color-accent-background-weak;
+					color: tokens.$coral-color-accent-text-weak;
 				}
 			}
+
+			&.active > a,
+			&.active > a:hover,
+			&.active > a:focus {
+				background-color: tokens.$coral-color-accent-background-strong;
+			}
 		}
 
 		.btn.btn-link {
@@ -72,12 +82,12 @@ $tc-tabbar-active-color: $lochmara;
 			.btn.btn-link {
 				width: 100%;
 				text-align: left;
-				background-color: transparent;
 
 				&:focus,
 				&:hover,
 				&:active {
-					--t-button-color: var(--t-button-color-primary);
+					background-color: tokens.$coral-color-accent-background-strong;
+					color: tokens.$coral-color-accent-text-weak;
 				}
 			}
 		}
@@ -87,13 +97,18 @@ $tc-tabbar-active-color: $lochmara;
 		> li {
 			&:focus,
 			&:hover {
-				background-color: rgba($white, 0.12);
+				background-color: tokens.$coral-color-accent-background-hover;
+
+				.btn-link:hover {
+					color: tokens.$coral-color-accent-text;
+					background-color: tokens.$coral-color-accent-background-hover;
+				}
 			}
 
 			&:active,
 			&.active,
 			&.open {
-				background-color: rgba($white, 0.25);
+				background-color: tokens.$coral-color-accent-background-strong;
 			}
 		}
 	}
@@ -109,7 +124,7 @@ $tc-tabbar-active-color: $lochmara;
 				background: transparent;
 				border: none;
 				border-radius: 0;
-				color: $black;
+				color: tokens.$coral-color-neutral-text;
 				margin-bottom: 0.5rem;
 				outline: none;
 				padding: $padding-smaller $padding-small;
@@ -122,14 +137,14 @@ $tc-tabbar-active-color: $lochmara;
 
 				&:hover,
 				&:focus {
-					color: $lochmara;
+					color: tokens.$coral-color-accent-text;
 				}
 			}
 
 			&.active {
 				> a,
 				> button {
-					color: $lochmara;
+					color: tokens.$coral-color-accent-text;
 					font-weight: $font-weight-semi-bold;
 
 					position: relative;
@@ -142,15 +157,15 @@ $tc-tabbar-active-color: $lochmara;
 						right: $padding-small;
 						bottom: 0;
 
-						border-bottom: solid $tc-tabbar-active-border-size $lochmara;
+						border-bottom: solid $tc-tabbar-active-border-size tokens.$coral-color-accent-text;
 					}
 
 					&:focus {
-						color: $scooter;
+						color: tokens.$coral-color-accent-text-hover;
 					}
 
 					&:hover {
-						color: $lochmara;
+						color: tokens.$coral-color-accent-text-hover;
 					}
 				}
 			}
@@ -159,13 +174,13 @@ $tc-tabbar-active-color: $lochmara;
 				> a,
 				> button {
 					cursor: not-allowed;
-					color: $black;
+					color: tokens.$coral-color-neutral-text-disabled;
 					opacity: 0.54;
 
 					&,
 					&:focus,
 					&:hover {
-						background: transparent;
+						background-color: tokens.$coral-color-neutral-background-disabled;
 						border: none;
 					}
 				}
diff --git a/packages/theme/src/theme/_pager.scss b/packages/theme/src/theme/_pager.scss
new file mode 100644
index 00000000000..e0283061073
--- /dev/null
+++ b/packages/theme/src/theme/_pager.scss
@@ -0,0 +1,15 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.pager li > a,
+.pager li > span {
+	background-color: tokens.$coral-color-neutral-background;
+	border-color: tokens.$coral-color-neutral-border-weak;
+}
+
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > a:focus,
+.pager .disabled > span {
+	color: tokens.$coral-color-neutral-text-disabled;
+	background-color: tokens.$coral-color-neutral-background-disabled;
+}
diff --git a/packages/theme/src/theme/_pagination.scss b/packages/theme/src/theme/_pagination.scss
new file mode 100644
index 00000000000..c138f082843
--- /dev/null
+++ b/packages/theme/src/theme/_pagination.scss
@@ -0,0 +1,28 @@
+/* stylelint-disable selector-no-qualifying-type */
+@use '~@talend/design-tokens/lib/tokens';
+
+.pagination > li > a,
+.pagination > li > span {
+	color: tokens.$coral-color-accent-text;
+	border-color: tokens.$coral-color-neutral-border-weak;
+	background-color: tokens.$coral-color-neutral-background;
+}
+
+.pagination > li > a:hover,
+.pagination > li > a:focus,
+.pagination > li > span:hover,
+.pagination > li > span:focus {
+	color: tokens.$coral-color-accent-text-hover;
+	background-color: tokens.$coral-color-neutral-background-medium;
+}
+
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+	color: tokens.$coral-color-neutral-text-disabled;
+	border-color: tokens.$coral-color-neutral-border-disabled;
+	background-color: tokens.$coral-color-neutral-background;
+}
diff --git a/packages/theme/src/theme/_panels.scss b/packages/theme/src/theme/_panels.scss
new file mode 100644
index 00000000000..5a64028b193
--- /dev/null
+++ b/packages/theme/src/theme/_panels.scss
@@ -0,0 +1,59 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.panel,
+.panel-default {
+	color: tokens.$coral-color-neutral-text;
+	border-color: tokens.$coral-color-neutral-border;
+	background-color: tokens.$coral-color-neutral-background;
+
+	.panel-footer,
+	.panel-heading {
+		color: tokens.$coral-color-neutral-text;
+		background-color: tokens.$coral-color-neutral-background-medium;
+	}
+}
+
+.panel-primary {
+	border-color: tokens.$coral-color-accent-border;
+
+	.panel-heading {
+		color: tokens.$coral-color-accent-text;
+		background-color: tokens.$coral-color-accent-background;
+	}
+}
+
+.panel-success {
+	border-color: tokens.$coral-color-success-border;
+
+	.panel-heading {
+		color: tokens.$coral-color-success-text;
+		background-color: tokens.$coral-color-success-background;
+	}
+}
+
+.panel-warning {
+	border-color: tokens.$coral-color-warning-border;
+
+	.panel-heading {
+		color: tokens.$coral-color-warning-text;
+		background-color: tokens.$coral-color-warning-background;
+	}
+}
+
+.panel-info {
+	border-color: tokens.$coral-color-accent-border;
+
+	.panel-heading {
+		color: tokens.$coral-color-accent-text;
+		background-color: tokens.$coral-color-accent-background;
+	}
+}
+
+.panel-danger {
+	border-color: tokens.$coral-color-danger-border;
+
+	.panel-heading {
+		color: tokens.$coral-color-danger-text;
+		background-color: tokens.$coral-color-danger-background;
+	}
+}
diff --git a/packages/theme/src/theme/_popovers.scss b/packages/theme/src/theme/_popovers.scss
new file mode 100644
index 00000000000..0662b773396
--- /dev/null
+++ b/packages/theme/src/theme/_popovers.scss
@@ -0,0 +1,39 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.popover {
+	background-color: tokens.$coral-color-neutral-background;
+	color: tokens.$coral-color-neutral-text;
+	border-color: tokens.$coral-color-neutral-border;
+}
+
+.popover.left .arrow {
+	border-left-color: tokens.$coral-color-neutral-border;
+}
+
+.popover.left .arrow::after {
+	border-left-color: tokens.$coral-color-neutral-background;
+}
+
+.popover.top .arrow {
+	border-top-color: tokens.$coral-color-neutral-border;
+}
+
+.popover.top .arrow::after {
+	border-top-color: tokens.$coral-color-neutral-background;
+}
+
+.popover.right .arrow {
+	border-right-color: tokens.$coral-color-neutral-border;
+}
+
+.popover.right .arrow::after {
+	border-right-color: tokens.$coral-color-neutral-background;
+}
+
+.popover.bottom .arrow {
+	border-bottom-color: tokens.$coral-color-neutral-border;
+}
+
+.popover.bottom .arrow::after {
+	border-bottom-color: tokens.$coral-color-neutral-background;
+}
diff --git a/packages/theme/src/theme/_tables.scss b/packages/theme/src/theme/_tables.scss
index 87a05fa8b73..1f30968f09c 100644
--- a/packages/theme/src/theme/_tables.scss
+++ b/packages/theme/src/theme/_tables.scss
@@ -1,3 +1,13 @@
+// escape following rule to ovveride bootstrap table styles
+/* stylelint-disable selector-no-qualifying-type */
+/* stylelint-disable declaration-no-important */
+@use '~@talend/design-tokens/lib/tokens';
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+	background-color: tokens.$coral-color-neutral-background;
+	color: tokens.$coral-color-neutral-text;
+}
+
 .table {
 	// Cells
 	> thead,
@@ -9,16 +19,89 @@
 				vertical-align: middle;
 			}
 		}
+
+		> tr.info {
+			td {
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-accent-background;
+			}
+		}
+
+		> tr.success {
+			td {
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-success-background;
+			}
+		}
+
+		> tr.danger {
+			td {
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-danger-background;
+			}
+		}
+
+		> tr.warning {
+			td {
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-warning-background;
+			}
+		}
+
+		> tr.active {
+			td {
+				color: tokens.$coral-color-neutral-text;
+				background: tokens.$coral-color-neutral-background-medium;
+			}
+		}
 	}
 
 	&-hover {
-		> tbody > tr:hover {
-			font-weight: 700;
+		> tbody {
+			> tr:hover {
+				font-weight: 700;
+
+				td {
+					background: tokens.$coral-color-neutral-background-medium;
+				}
+			}
+
+			> tr.info:hover {
+				td {
+					background: tokens.$coral-color-accent-background-hover;
+				}
+			}
+
+			> tr.success:hover {
+				td {
+					background: tokens.$coral-color-success-background-hover;
+				}
+			}
+
+			> tr.danger:hover {
+				td {
+					background: tokens.$coral-color-danger-background-hover;
+				}
+			}
+
+			> tr.warning:hover {
+				td {
+					background: tokens.$coral-color-warning-background-hover;
+				}
+			}
+
+			> tr.active:hover {
+				td {
+					background: tokens.$coral-color-neutral-background-strong;
+				}
+			}
 		}
 	}
 }
 
-@-moz-document url-prefix() { /* fix Firefox only https://bugzilla.mozilla.org/show_bug.cgi?id=410959 */
+/* stylelint-disable-next-line function-url-quotes */
+@-moz-document url-prefix() {
+	/* fix Firefox only https://bugzilla.mozilla.org/show_bug.cgi?id=410959 */
 	.table {
 		border-collapse: separate !important;
 		border-spacing: 0;
diff --git a/packages/theme/src/theme/_tooltip.scss b/packages/theme/src/theme/_tooltip.scss
index d05f5f26b3b..2e36a726c2e 100644
--- a/packages/theme/src/theme/_tooltip.scss
+++ b/packages/theme/src/theme/_tooltip.scss
@@ -1,5 +1,25 @@
+@use '~@talend/design-tokens/lib/tokens';
+
 .tooltip-inner {
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 	text-align: left;
+	background: tokens.$coral-color-assistive-background;
+	color: tokens.$coral-color-assistive-text;
+}
+
+.tooltip.left .tooltip-arrow {
+	border-left-color: tokens.$coral-color-assistive-background;
+}
+
+.tooltip.right .tooltip-arrow {
+	border-right-color: tokens.$coral-color-assistive-background;
+}
+
+.tooltip.top .tooltip-arrow {
+	border-top-color: tokens.$coral-color-assistive-background;
+}
+
+.tooltip.bottom .tooltip-arrow {
+	border-bottom-color: tokens.$coral-color-assistive-background;
 }
diff --git a/packages/theme/src/theme/_type.scss b/packages/theme/src/theme/_type.scss
index ecc87e1b071..d1e5beb2cea 100644
--- a/packages/theme/src/theme/_type.scss
+++ b/packages/theme/src/theme/_type.scss
@@ -1,12 +1,67 @@
+@use '@talend/design-tokens/lib/tokens';
+
+body {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-neutral-background;
+}
+
+h1,
+.h1 {
+	color: tokens.$coral-color-neutral-text;
+	// font: tokens.$coral-heading-l;
+}
+
 h2,
 .h2 {
-	font-weight: $font-weight-semi-bold;
+	color: tokens.$coral-color-neutral-text;
+	// font: tokens.$coral-heading-m;
 }
 
 h3,
 .h3,
 h4,
 .h4 {
-	color: #000;
-	font-weight: $font-weight-semi-bold;
+	color: tokens.$coral-color-neutral-text;
+	// font: tokens.$coral-heading-s;
+}
+
+h5,
+.h5,
+h6,
+.h6 {
+	color: tokens.$coral-color-neutral-text;
+}
+
+p,
+.p {
+	color: tokens.$coral-color-neutral-text;
+	// font: tokens.$coral-paragraph-m;
+}
+
+.text-muted {
+	color: tokens.$coral-color-neutral-text-disabled;
+}
+
+.text-primary {
+	color: tokens.$coral-color-accent-text;
+}
+
+.text-warning {
+	color: tokens.$coral-color-warning-text;
+}
+
+.text-danger {
+	color: tokens.$coral-color-danger-text;
+}
+
+.text-success {
+	color: tokens.$coral-color-success-text;
+}
+
+.text-info {
+	color: tokens.$coral-color-accent-text;
+}
+
+a {
+	color: tokens.$coral-color-accent-text;
 }
diff --git a/packages/theme/src/theme/_variables.scss b/packages/theme/src/theme/_variables.scss
index c160d0aa602..8b4a509f0fb 100644
--- a/packages/theme/src/theme/_variables.scss
+++ b/packages/theme/src/theme/_variables.scss
@@ -1,3 +1,6 @@
+/* stylelint-disable color-hex-case */
+@use '~@talend/design-tokens/lib/tokens';
+
 // This is a fork but try to keep it as close to the original as possible
 $bootstrap-sass-asset-helper: false !default;
 //
@@ -144,13 +147,13 @@ $table-condensed-cell-padding: 5px !default;
 //** Default background color used for all tables.
 $table-bg: transparent !default;
 //** Background color used for `.table-striped`.
-$table-bg-accent: #F9F9F9 !default;
+$table-bg-accent: #f9f9f9 !default;
 //** Background color used for `.table-hover`.
 $table-bg-hover: $gray50 !default;
 $table-bg-active: $table-bg-hover !default;
 
 //** Border color for table and cell borders.
-$table-border-color: #DDD !default;
+$table-border-color: #ddd !default;
 
 //== Buttons
 //
@@ -240,7 +243,7 @@ $input-border-radius-large: $input-border-radius !default;
 $input-border-radius-small: $input-border-radius !default;
 
 //** Border color for inputs on focus
-$input-border-focus: #0675C1 !default;
+$input-border-focus: #0675c1 !default;
 
 //** Placeholder text color
 $input-color-placeholder: #888 !default;
@@ -256,10 +259,10 @@ $input-height-small: $input-height-base !default;
 $form-group-margin-bottom: 25px !default;
 
 $legend-color: $gray-dark !default;
-$legend-border-color: #E5E5E5 !default;
+$legend-border-color: #e5e5e5 !default;
 
 //** Background color for textual input addons
-$input-group-addon-bg: #EAEAEA !default;
+$input-group-addon-bg: #eaeaea !default;
 //** Border color for textual input addons
 $input-group-addon-border-color: $input-border !default;
 
@@ -275,9 +278,9 @@ $dropdown-bg: $white !default;
 //** Dropdown menu `border-color`.
 $dropdown-border: rgba(0, 0, 0, 0.15) !default;
 //** Dropdown menu `border-color` **for IE8**.
-$dropdown-fallback-border: #CCC !default;
+$dropdown-fallback-border: #ccc !default;
 //** Divider color for between dropdown items.
-$dropdown-divider-bg: #E5E5E5 !default;
+$dropdown-divider-bg: #e5e5e5 !default;
 
 //** Dropdown link text color.
 $dropdown-link-color: tint($gray-base, 25) !default;
@@ -398,7 +401,7 @@ $navbar-padding-vertical: calc((#{$navbar-height} - #{$line-height-computed}) /
 $navbar-collapse-max-height: 340px !default;
 
 $navbar-default-color: #777 !default;
-$navbar-default-bg: #F8F8F8 !default;
+$navbar-default-bg: #f8f8f8 !default;
 $navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
 
 // Navbar links
@@ -407,7 +410,7 @@ $navbar-default-link-hover-color: #333 !default;
 $navbar-default-link-hover-bg: transparent !default;
 $navbar-default-link-active-color: $navbar-default-link-color !default;
 $navbar-default-link-active-bg: rgba(0, 0, 0, 0.1) !default;
-$navbar-default-link-disabled-color: #CCC !default;
+$navbar-default-link-disabled-color: #ccc !default;
 $navbar-default-link-disabled-bg: transparent !default;
 
 // Navbar brand label
@@ -416,9 +419,9 @@ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !def
 $navbar-default-brand-hover-bg: transparent !default;
 
 // Navbar toggle
-$navbar-default-toggle-hover-bg: #DDD !default;
+$navbar-default-toggle-hover-bg: #ddd !default;
 $navbar-default-toggle-icon-bar-bg: #888 !default;
-$navbar-default-toggle-border-color: #DDD !default;
+$navbar-default-toggle-border-color: #ddd !default;
 
 //=== Inverted navbar
 // Reset inverted navbar basics
@@ -457,15 +460,15 @@ $nav-disabled-link-color: $gray-light !default;
 $nav-disabled-link-hover-color: $gray-light !default;
 
 //== Tabs
-$nav-tabs-border-color: #DDD !default;
+$nav-tabs-border-color: #ddd !default;
 
 $nav-tabs-link-hover-border-color: $gray-lighter !default;
 
 $nav-tabs-active-link-hover-bg: $body-bg !default;
 $nav-tabs-active-link-hover-color: $gray !default;
-$nav-tabs-active-link-hover-border-color: #DDD !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
 
-$nav-tabs-justified-link-border-color: #DDD !default;
+$nav-tabs-justified-link-border-color: #ddd !default;
 $nav-tabs-justified-active-link-border-color: $body-bg !default;
 
 //== Pills
@@ -479,11 +482,11 @@ $nav-pills-active-link-hover-color: $white !default;
 
 $pagination-color: $link-color !default;
 $pagination-bg: $gray0 !default;
-$pagination-border: #DDD !default;
+$pagination-border: #ddd !default;
 
 $pagination-hover-color: $link-hover-color !default;
 $pagination-hover-bg: $gray-lighter !default;
-$pagination-hover-border: #DDD !default;
+$pagination-hover-border: #ddd !default;
 
 $pagination-active-color: $gray0 !default;
 $pagination-active-bg: $brand-primary !default;
@@ -491,7 +494,7 @@ $pagination-active-border: $brand-primary !default;
 
 $pagination-disabled-color: $gray-light !default;
 $pagination-disabled-bg: $gray0 !default;
-$pagination-disabled-border: #DDD !default;
+$pagination-disabled-border: #ddd !default;
 
 //== Pager
 //
@@ -567,7 +570,7 @@ $popover-max-width: 276px !default;
 //** Popover border color
 $popover-border-color: $shadow !default;
 //** Popover fallback border color
-$popover-fallback-border-color: #CCC !default;
+$popover-fallback-border-color: #ccc !default;
 
 //** Popover title background color
 $popover-title-bg: darken($popover-bg, 3%) !default;
@@ -632,7 +635,7 @@ $modal-backdrop-bg: $black !default;
 //** Modal backdrop opacity
 $modal-backdrop-opacity: 0.5 !default;
 //** Modal header border color
-$modal-header-border-color: #E5E5E5 !default;
+$modal-header-border-color: #e5e5e5 !default;
 //** Modal footer border color
 $modal-footer-border-color: transparent !default;
 
@@ -669,22 +672,22 @@ $alert-danger-border: $state-danger-border !default;
 //##
 
 //** Background color of the whole progress component
-$progress-bg: $gray50 !default;
+$progress-bg: tokens.$coral-color-neutral-background-strong !default;
 //** Progress bar text color
-$progress-bar-color: $gray0 !default;
+$progress-bar-color: tokens.$coral-color-neutral-background !default;
 //** Variable for setting rounded corners on progress bar.
 $progress-border-radius: $border-radius-base !default;
 
 //** Default progress bar color
-$progress-bar-bg: $brand-primary !default;
+$progress-bar-bg: tokens.$coral-color-accent-background-strong !default;
 //** Success progress bar color
-$progress-bar-success-bg: $brand-success !default;
+$progress-bar-success-bg: tokens.$coral-color-success-background-strong !default;
 //** Warning progress bar color
-$progress-bar-warning-bg: $brand-warning !default;
+$progress-bar-warning-bg: tokens.$coral-color-warning-background-strong !default;
 //** Danger progress bar color
-$progress-bar-danger-bg: $brand-danger !default;
+$progress-bar-danger-bg: tokens.$coral-color-danger-background-strong !default;
 //** Info progress bar color
-$progress-bar-info-bg: $brand-info !default;
+$progress-bar-info-bg: tokens.$coral-color-accent-background-strong !default;
 
 //== List group
 //
@@ -693,7 +696,7 @@ $progress-bar-info-bg: $brand-info !default;
 //** Background color on `.list-group-item`
 $list-group-bg: $gray0 !default;
 //** `.list-group-item` border color
-$list-group-border: #DDD !default;
+$list-group-border: #ddd !default;
 //** List group border radius
 $list-group-border-radius: $border-radius-base !default;
 
@@ -730,7 +733,7 @@ $panel-footer-padding: $panel-heading-padding !default;
 $panel-border-radius: $border-radius-base !default;
 
 //** Border color for elements within panels
-$panel-inner-border: #DDD !default;
+$panel-inner-border: #ddd !default;
 $panel-footer-bg: $gray50 !default;
 
 $panel-default-text: $gray-dark !default;
@@ -766,7 +769,7 @@ $thumbnail-padding: 4px !default;
 //** Thumbnail background color
 $thumbnail-bg: $body-bg !default;
 //** Thumbnail border color
-$thumbnail-border: #DDD !default;
+$thumbnail-border: #ddd !default;
 //** Thumbnail border radius
 $thumbnail-border-radius: $border-radius-base !default;
 
@@ -843,15 +846,15 @@ $close-text-shadow: 0 1px 0 $gray0 !default;
 //
 //##
 
-$code-color: #C7254E !default;
-$code-bg: #F9F2F4 !default;
+$code-color: #c7254e !default;
+$code-bg: #f9f2f4 !default;
 
 $kbd-color: $gray0 !default;
 $kbd-bg: #333 !default;
 
 $pre-bg: $gray50 !default;
 $pre-color: $gray-dark !default;
-$pre-border-color: #CCC !default;
+$pre-border-color: #ccc !default;
 $pre-scrollable-max-height: 340px !default;
 
 //== Type
diff --git a/packages/theme/src/theme/_wells.scss b/packages/theme/src/theme/_wells.scss
new file mode 100644
index 00000000000..555838004b7
--- /dev/null
+++ b/packages/theme/src/theme/_wells.scss
@@ -0,0 +1,11 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.well,
+.jumbotron {
+	background-color: tokens.$coral-color-neutral-background;
+}
+
+.well {
+	background-color: tokens.$coral-color-neutral-background-medium;
+	border-color: tokens.$coral-color-neutral-border-weak;
+}
diff --git a/packages/theme/src/theme/alerts.scss b/packages/theme/src/theme/alerts.scss
new file mode 100644
index 00000000000..756e861d7cb
--- /dev/null
+++ b/packages/theme/src/theme/alerts.scss
@@ -0,0 +1,41 @@
+@use '~@talend/design-tokens/lib/tokens';
+
+.alert-warning {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-warning-background;
+	border-color: tokens.$coral-color-warning-border;
+
+	.alert-link {
+		color: tokens.$coral-color-warning-text;
+	}
+}
+
+.alert-danger {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-danger-background;
+	border-color: tokens.$coral-color-danger-border;
+
+	.alert-link {
+		color: tokens.$coral-color-danger-text;
+	}
+}
+
+.alert-success {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-success-background;
+	border-color: tokens.$coral-color-success-border;
+
+	.alert-link {
+		color: tokens.$coral-color-success-text;
+	}
+}
+
+.alert-info {
+	color: tokens.$coral-color-neutral-text;
+	background-color: tokens.$coral-color-accent-background;
+	border-color: tokens.$coral-color-accent-border;
+
+	.alert-link {
+		color: tokens.$coral-color-accent-text;
+	}
+}
diff --git a/packages/theme/src/theme/theme.scss b/packages/theme/src/theme/theme.scss
index 453c6a95fe1..22259988b9a 100644
--- a/packages/theme/src/theme/theme.scss
+++ b/packages/theme/src/theme/theme.scss
@@ -8,6 +8,7 @@
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/type';
 @import './type';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/code';
+@import './code';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/grid';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/tables';
 @import './tables';
@@ -37,17 +38,24 @@
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs';
 @import './breadcrumbs';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/pagination';
+@import './pagination';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/pager';
+@import './pager';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/badges';
+@import './badges';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/alerts';
+@import './alerts';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/media';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/list-group';
+@import './list-group';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/panels';
+@import './panels';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/wells';
+@import './wells';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/close';
 
 // Components w/ JavaScript
@@ -56,6 +64,7 @@
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/tooltip';
 @import './tooltip';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/popovers';
+@import './popovers';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/carousel';
 
 // Utility classes
diff --git a/tools/scripts-config-react-webpack/config/loader.js b/tools/scripts-config-react-webpack/config/loader.js
index cc368347dfc..da37e8f71dd 100644
--- a/tools/scripts-config-react-webpack/config/loader.js
+++ b/tools/scripts-config-react-webpack/config/loader.js
@@ -12,6 +12,7 @@ body {
   height: 100vh;
   width: 100vw;
   background: #f6f6f6;
+  background: var(--coral-color-neutral-background-medium, #f6f6f6);
 }
 
 .tc-app-loader-icon {
@@ -40,6 +41,7 @@ body {
   height: 100%;
   opacity: 0;
   border-color: #ababab;
+  border-color: var(--coral-color-neutral-border, #ababab);
   opacity: 1;
   animation: app-loader-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
 }
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
index 7bd3c95f999..225b5ddffb7 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -44,6 +44,17 @@ const defaultPreview = {
 				],
 			},
 		},
+		theme: {
+			name: 'Theme',
+			description: 'Choose a theme to apply to the design system',
+			toolbar: {
+				icon: 'paintbrush',
+				items: [
+					{ value: 'light', left: '⚪️', title: 'Default theme' },
+					{ value: 'dark', left: '⚫️', title: 'Dark theme' },
+				],
+			},
+		},
 	},
 	loaders: [cmfLoader].filter(Boolean),
 	decorators: [
@@ -63,7 +74,8 @@ const defaultPreview = {
 					key: 'icons-provider-decorator'
 				}),
 				React.createElement(ThemeProvider, {
-					key: 'theme-provider-decorator'
+					key: 'theme-provider-decorator',
+					theme: context.globals.theme,
 				}, storyElement)
 			];
 		},

From 8d64e97f2728dc4ddeca79cf13024b56c7a84ce5 Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 24 Jul 2023 12:01:07 +0200
Subject: [PATCH 27/34] chore: upgrade stylelint to 15 (#4790)

BREAKING CHANGES please read changeset
---
 .changeset/ten-suns-allow.md                  |  14 +
 packages/icons/package.json                   |   1 -
 .../scripts-config-stylelint/.stylelintrc.js  |   4 +-
 tools/scripts-config-stylelint/package.json   |   6 +-
 yarn.lock                                     | 285 ++++++++++++------
 5 files changed, 208 insertions(+), 102 deletions(-)
 create mode 100644 .changeset/ten-suns-allow.md

diff --git a/.changeset/ten-suns-allow.md b/.changeset/ten-suns-allow.md
new file mode 100644
index 00000000000..90841271a69
--- /dev/null
+++ b/.changeset/ten-suns-allow.md
@@ -0,0 +1,14 @@
+---
+'@talend/scripts-config-stylelint': major
+---
+
+chore: upgrade stylelint and rules contains breaking changes:
+
+* stylelint from 14 to 15: https://stylelint.io/migration-guide/to-15/
+* stylelint-config-sass-guidelines from 9 to 10 https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/CHANGELOG.md#1000
+* stylelint-config-standard from 28 to 34 https://github.com/stylelint/stylelint-config-standard/blob/main/CHANGELOG.md#3400
+* hexadecimal colors turn from uppercase to lowercase: https://github.com/prettier/prettier/pull/498#issuecomment-275856264
+
+
+fix:
+> 1:1  ✖  Unknown rule order/properties-alphabetical-order  order/properties-alphabetical-order
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 6f00ff67170..0e6dff8310f 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -50,7 +50,6 @@
     "css-loader": "^4.3.0",
     "mini-css-extract-plugin": "^2.7.6",
     "mkdirp": "^1.0.4",
-    "prettier": "^2.8.8",
     "react": "^17.0.2",
     "react-use": "^17.4.0",
     "string-replace-loader": "^2.3.0",
diff --git a/tools/scripts-config-stylelint/.stylelintrc.js b/tools/scripts-config-stylelint/.stylelintrc.js
index d4cf9da38d3..df6008bf6ee 100644
--- a/tools/scripts-config-stylelint/.stylelintrc.js
+++ b/tools/scripts-config-stylelint/.stylelintrc.js
@@ -2,7 +2,8 @@ module.exports = {
 	extends: 'stylelint-config-sass-guidelines',
 	rules: {
 		'at-rule-disallowed-list': ['debug', 'warn'],
-		'color-hex-case': 'upper',
+		// deprecated but here to help align with current prettier
+		'color-hex-case': 'lower',
 		'color-named': 'always-where-possible',
 		'declaration-block-no-duplicate-properties': true,
 		'declaration-property-value-disallowed-list': {
@@ -12,7 +13,6 @@ module.exports = {
 		indentation: 'tab',
 		'function-calc-no-unspaced-operator': true,
 		'max-nesting-depth': 5,
-		'order/properties-alphabetical-order': null,
 		'scss/at-import-partial-extension-blacklist': ['scss', 'css'],
 		'scss/operator-no-unspaced': true,
 		'selector-class-pattern': ['^(?!_).*$', { resolveNestedSelectors: true }],
diff --git a/tools/scripts-config-stylelint/package.json b/tools/scripts-config-stylelint/package.json
index 39082606362..aa979c4d768 100644
--- a/tools/scripts-config-stylelint/package.json
+++ b/tools/scripts-config-stylelint/package.json
@@ -18,9 +18,9 @@
     "url": "https://github.com/Talend/ui.git"
   },
   "dependencies": {
-    "stylelint": "^14.16.1",
-    "stylelint-config-sass-guidelines": "^9.0.1",
-    "stylelint-config-standard": "^28.0.0"
+    "stylelint": "^15.10.1",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-config-standard": "^34.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/yarn.lock b/yarn.lock
index e7f326f15b5..88f45e67f1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1664,6 +1664,21 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@csstools/css-parser-algorithms@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz#0cc3a656dc2d638370ecf6f98358973bfbd00141"
+  integrity sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==
+
+"@csstools/css-tokenizer@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz#07ae11a0a06365d7ec686549db7b729bc036528e"
+  integrity sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==
+
+"@csstools/media-query-list-parser@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz#6ef642b728d30c1009bfbba3211c7e4c11302728"
+  integrity sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==
+
 "@csstools/postcss-cascade-layers@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz#8a997edf97d34071dd2e37ea6022447dd9e795ad"
@@ -1770,6 +1785,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
+"@csstools/selector-specificity@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz#798622546b63847e82389e473fd67f2707d82247"
+  integrity sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==
+
 "@cypress/react@^7.0.3":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@cypress/react/-/react-7.0.3.tgz#e62d67c1344265ee959e99100ce237663f20abb1"
@@ -4450,7 +4470,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
-"@types/minimist@^1.2.0":
+"@types/minimist@^1.2.0", "@types/minimist@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
@@ -6464,12 +6484,22 @@ camelcase-keys@^6.2.2:
     map-obj "^4.0.0"
     quick-lru "^4.0.1"
 
+camelcase-keys@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-7.0.2.tgz#d048d8c69448745bb0de6fc4c1c52a30dfbe7252"
+  integrity sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==
+  dependencies:
+    camelcase "^6.3.0"
+    map-obj "^4.1.0"
+    quick-lru "^5.1.1"
+    type-fest "^1.2.1"
+
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
+camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -7202,7 +7232,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.0.1, cosmiconfig@^7.1.0:
+cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
@@ -7474,6 +7504,14 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
 css-unit-converter@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
@@ -7988,6 +8026,11 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
+decamelize@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9"
+  integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==
+
 decimal.js-light@^2.4.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
@@ -9395,10 +9438,10 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.2.12, fast-glob@^3.2.7, fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
+  integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -10604,7 +10647,7 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
-html-tags@^3.1.0, html-tags@^3.2.0:
+html-tags@^3.1.0, html-tags@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
@@ -10888,7 +10931,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.9, ignore@^5.2.0, ignore@^5.2.1:
+ignore@^5.1.9, ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -10934,6 +10977,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indent-string@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-5.0.0.tgz#4fd2980fccaf8622d14c64d694f4cf33c81951a5"
+  integrity sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -12499,10 +12547,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
-known-css-properties@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.26.0.tgz#008295115abddc045a9f4ed7e2a84dc8b3a77649"
-  integrity sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==
+known-css-properties@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.27.0.tgz#82a9358dda5fe7f7bd12b5e7142c0a205393c0c5"
+  integrity sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==
 
 language-subtag-registry@~0.3.2:
   version "0.3.22"
@@ -12970,7 +13018,7 @@ map-obj@^1.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
   integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
 
-map-obj@^4.0.0:
+map-obj@^4.0.0, map-obj@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
@@ -13086,6 +13134,11 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -13125,6 +13178,24 @@ memoizerific@^1.11.3:
   dependencies:
     map-or-similar "^1.5.0"
 
+meow@^10.1.5:
+  version "10.1.5"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-10.1.5.tgz#be52a1d87b5f5698602b0f32875ee5940904aa7f"
+  integrity sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==
+  dependencies:
+    "@types/minimist" "^1.2.2"
+    camelcase-keys "^7.0.0"
+    decamelize "^5.0.0"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.2"
+    read-pkg-up "^8.0.0"
+    redent "^4.0.0"
+    trim-newlines "^4.0.2"
+    type-fest "^1.2.2"
+    yargs-parser "^20.2.9"
+
 meow@^6.0.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
@@ -13142,24 +13213,6 @@ meow@^6.0.0:
     type-fest "^0.13.1"
     yargs-parser "^18.1.3"
 
-meow@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
-  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize "^1.2.0"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^3.0.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.18.0"
-    yargs-parser "^20.2.3"
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -13269,7 +13322,7 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-min-indent@^1.0.0:
+min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
@@ -13691,7 +13744,7 @@ normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^3.0.0:
+normalize-package-data@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
   integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
@@ -15004,7 +15057,7 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-scss@^4.0.2:
+postcss-scss@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd"
   integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==
@@ -15016,7 +15069,7 @@ postcss-selector-not@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
@@ -15024,11 +15077,6 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selecto
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-sorting@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-7.0.1.tgz#923b5268451cf2d93ebf8835e17a6537757049a5"
-  integrity sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==
-
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -15062,7 +15110,7 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.2.14, postcss@^8.2.15, postcss@^8.3.11, postcss@^8.4.17, postcss@^8.4.19, postcss@^8.4.24:
+postcss@^8.2.14, postcss@^8.2.15, postcss@^8.4.17, postcss@^8.4.24:
   version "8.4.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
   integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
@@ -15380,6 +15428,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -15867,6 +15920,15 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
+read-pkg-up@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-8.0.0.tgz#72f595b65e66110f43b052dd9af4de6b10534670"
+  integrity sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==
+  dependencies:
+    find-up "^5.0.0"
+    read-pkg "^6.0.0"
+    type-fest "^1.0.1"
+
 read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -15877,6 +15939,16 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
+read-pkg@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-6.0.0.tgz#a67a7d6a1c2b0c3cd6aa2ea521f40c458a4a504c"
+  integrity sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^3.0.2"
+    parse-json "^5.2.0"
+    type-fest "^1.0.1"
+
 read-yaml-file@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-yaml-file/-/read-yaml-file-1.1.0.tgz#9362bbcbdc77007cc8ea4519fe1c0b821a7ce0d8"
@@ -15993,6 +16065,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-4.0.0.tgz#0c0ba7caabb24257ab3bb7a4fd95dd1d5c5681f9"
+  integrity sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==
+  dependencies:
+    indent-string "^5.0.0"
+    strip-indent "^4.0.0"
+
 reduce-css-calc@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
@@ -17171,7 +17251,7 @@ source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -17673,6 +17753,13 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
+strip-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
+  integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==
+  dependencies:
+    min-indent "^1.0.1"
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -17740,36 +17827,27 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
-stylelint-config-recommended@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz#1c9e07536a8cd875405f8ecef7314916d94e7e40"
-  integrity sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==
+stylelint-config-recommended@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz#c48a358cc46b629ea01f22db60b351f703e00597"
+  integrity sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==
 
-stylelint-config-sass-guidelines@^9.0.1:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-9.0.1.tgz#3114ce780f2085ba9ea5da2b7d97a1e85e968fa7"
-  integrity sha512-N06PsVsrgKijQ3YT5hqKA7x3NUkgELTRI1cbWMqcYiCGG6MjzvNk6Cb5YYA1PrvrksBV76BvY9P9bAswojVMqA==
+stylelint-config-sass-guidelines@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-10.0.0.tgz#ace99689eb6769534c9b40d62e2a8562b1ddc9f2"
+  integrity sha512-+Rr2Dd4b72CWA4qoj1Kk+y449nP/WJsrD0nzQAWkmPPIuyVcy2GMIcfNr0Z8JJOLjRvtlkKxa49FCNXMePBikQ==
   dependencies:
-    postcss-scss "^4.0.2"
-    stylelint-order "^5.0.0"
-    stylelint-scss "^4.0.0"
+    postcss-scss "^4.0.6"
+    stylelint-scss "^4.4.0"
 
-stylelint-config-standard@^28.0.0:
-  version "28.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-28.0.0.tgz#7e1926c232631a8445eafee7b186d276d42d7b15"
-  integrity sha512-q/StuowDdDmFCravzGHAwgS9pjX0bdOQUEBBDIkIWsQuYGgYz/xsO8CM6eepmIQ1fc5bKdDVimlJZ6MoOUcJ5Q==
+stylelint-config-standard@^34.0.0:
+  version "34.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz#309f3c48118a02aae262230c174282e40e766cf4"
+  integrity sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==
   dependencies:
-    stylelint-config-recommended "^9.0.0"
+    stylelint-config-recommended "^13.0.0"
 
-stylelint-order@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-5.0.0.tgz#abd20f6b85ac640774cbe40e70d3fe9c6fdf4400"
-  integrity sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==
-  dependencies:
-    postcss "^8.3.11"
-    postcss-sorting "^7.0.1"
-
-stylelint-scss@^4.0.0:
+stylelint-scss@^4.4.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.7.0.tgz#f986bf8c5a4b93eae2b67d3a3562eef822657908"
   integrity sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==
@@ -17779,49 +17857,51 @@ stylelint-scss@^4.0.0:
     postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
 
-stylelint@^14.16.1:
-  version "14.16.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.16.1.tgz#b911063530619a1bbe44c2b875fd8181ebdc742d"
-  integrity sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==
+stylelint@^15.10.1:
+  version "15.10.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.1.tgz#93f189958687e330c106b010cbec0c41dcae506d"
+  integrity sha512-CYkzYrCFfA/gnOR+u9kJ1PpzwG10WLVnoxHDuBA/JiwGqdM9+yx9+ou6SE/y9YHtfv1mcLo06fdadHTOx4gBZQ==
   dependencies:
-    "@csstools/selector-specificity" "^2.0.2"
+    "@csstools/css-parser-algorithms" "^2.3.0"
+    "@csstools/css-tokenizer" "^2.1.1"
+    "@csstools/media-query-list-parser" "^2.1.2"
+    "@csstools/selector-specificity" "^3.0.0"
     balanced-match "^2.0.0"
     colord "^2.9.3"
-    cosmiconfig "^7.1.0"
+    cosmiconfig "^8.2.0"
     css-functions-list "^3.1.0"
+    css-tree "^2.3.1"
     debug "^4.3.4"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     fastest-levenshtein "^1.0.16"
     file-entry-cache "^6.0.1"
     global-modules "^2.0.0"
     globby "^11.1.0"
     globjoin "^0.1.4"
-    html-tags "^3.2.0"
-    ignore "^5.2.1"
+    html-tags "^3.3.1"
+    ignore "^5.2.4"
     import-lazy "^4.0.0"
     imurmurhash "^0.1.4"
     is-plain-object "^5.0.0"
-    known-css-properties "^0.26.0"
+    known-css-properties "^0.27.0"
     mathml-tag-names "^2.1.3"
-    meow "^9.0.0"
+    meow "^10.1.5"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.19"
-    postcss-media-query-parser "^0.2.3"
+    postcss "^8.4.24"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^6.0.0"
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.0.13"
     postcss-value-parser "^4.2.0"
     resolve-from "^5.0.0"
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
     style-search "^0.1.0"
-    supports-hyperlinks "^2.3.0"
+    supports-hyperlinks "^3.0.0"
     svg-tags "^1.0.0"
     table "^6.8.1"
-    v8-compile-cache "^2.3.0"
-    write-file-atomic "^4.0.2"
+    write-file-atomic "^5.0.1"
 
 stylis@^4.0.6:
   version "4.2.0"
@@ -17873,10 +17953,10 @@ supports-color@^8.0.0, supports-color@^8.1.0, supports-color@^8.1.1:
   dependencies:
     has-flag "^4.0.0"
 
-supports-hyperlinks@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
-  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+supports-hyperlinks@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
+  integrity sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==
   dependencies:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
@@ -18310,6 +18390,11 @@ trim-newlines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
+trim-newlines@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-4.1.1.tgz#28c88deb50ed10c7ba6dc2474421904a00139125"
+  integrity sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==
+
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
@@ -18446,11 +18531,6 @@ type-fest@^0.13.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
   integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
 
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
@@ -18471,6 +18551,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^1.0.1, type-fest@^1.2.1, type-fest@^1.2.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
 type-fest@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
@@ -18920,7 +19005,7 @@ uuid@^8.0.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
+v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
@@ -19515,6 +19600,14 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+write-file-atomic@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.1.tgz#68df4717c55c6fa4281a7860b4c2ba0a6d2b11e7"
+  integrity sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^4.0.1"
+
 ws@^7.2.0, ws@^7.3.1:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
@@ -19605,7 +19698,7 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
+yargs-parser@^20.2.2, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==

From 85a4142ce7045a7d6683cc84e8449a254461ca85 Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 24 Jul 2023 12:01:47 +0200
Subject: [PATCH 28/34] feat: add storybook toolbar for DS tokens (#4796)


From 40e70c05583f1aa38055f2b66a4042b2f3a697ae Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 24 Jul 2023 13:54:38 +0200
Subject: [PATCH 29/34] feat(scripts): upgrade to TS 5 (#4730)

---
 .changeset/gold-radios-che.md    | 5 +++++
 .changeset/gold-radios-chew.md   | 5 +++++
 package.json                     | 5 +++--
 packages/components/package.json | 3 +--
 tools/scripts-core/package.json  | 2 +-
 yarn.lock                        | 8 ++++----
 6 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/gold-radios-che.md
 create mode 100644 .changeset/gold-radios-chew.md

diff --git a/.changeset/gold-radios-che.md b/.changeset/gold-radios-che.md
new file mode 100644
index 00000000000..6dbb3647d9c
--- /dev/null
+++ b/.changeset/gold-radios-che.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+chore: remove devDependencies to typescript
diff --git a/.changeset/gold-radios-chew.md b/.changeset/gold-radios-chew.md
new file mode 100644
index 00000000000..42e5c2b3a21
--- /dev/null
+++ b/.changeset/gold-radios-chew.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-core': major
+---
+
+Upgrade typescript to 5.0
diff --git a/package.json b/package.json
index fba127b0407..40d9aee3d97 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "**/webpack-dev-middleware": "^5.3.3",
     "**/@types/react": "^17.0.2",
     "**/@types/react-dom": "^17.0.2",
-    "**/i18next-scanner-typescript/typescript": "^4.9.5",
+    "**/i18next-scanner-typescript/typescript": "^5.0.4",
+    "**/browser-sync-client/typescript": "^5.0.4",
     "**/vinyl-fs/glob-parent": "^5.1.2",
     "**/fast-glob/glob-parent": "^5.1.2",
     "**/trim": "^1.0.1",
@@ -62,7 +63,7 @@
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.4",
     "webpack": "^5.87.0"
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 257370df58b..fec20f9ccc6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -97,8 +97,7 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^11.18.6",
     "react-storybook-addon-props-combinations": "^1.1.0",
-    "react-test-renderer": "^17.0.2",
-    "typescript": "^4.9.5"
+    "react-test-renderer": "^17.0.2"
   },
   "peerDependencies": {
     "@talend/design-system": "^7.5.0",
diff --git a/tools/scripts-core/package.json b/tools/scripts-core/package.json
index 76d6641a57c..aadadb1b52b 100644
--- a/tools/scripts-core/package.json
+++ b/tools/scripts-core/package.json
@@ -34,7 +34,7 @@
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.4",
     "webpack-merge": "^5.9.0",
     "yargs": "^15.4.1"
   },
diff --git a/yarn.lock b/yarn.lock
index 88f45e67f1d..4fbd23421ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18614,10 +18614,10 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^3.0.0, typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^3.0.0, typescript@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
 
 ua-parser-js@^1.0.33:
   version "1.0.35"

From e95da98ed13efd682fc91a0826fb01b0975f620d Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jmfrancois@talend.com>
Date: Mon, 24 Jul 2023 14:11:48 +0200
Subject: [PATCH 30/34] feat(scripts): add script to merge eslint and stylelint
 report (#4607)

---
 .changeset/tasty-dots-leave.md                |  5 ++
 .github/workflows/pr-lint.yml                 |  6 +-
 merge-report.js                               | 62 ----------------
 package.json                                  |  1 +
 run.js                                        | 74 -------------------
 tools/scripts-yarn-workspace/README.md        |  7 +-
 tools/scripts-yarn-workspace/src/index.js     |  4 +-
 .../src/merge-report.js                       | 74 +++++++++++++++++++
 8 files changed, 89 insertions(+), 144 deletions(-)
 create mode 100644 .changeset/tasty-dots-leave.md
 delete mode 100644 merge-report.js
 delete mode 100644 run.js
 create mode 100644 tools/scripts-yarn-workspace/src/merge-report.js

diff --git a/.changeset/tasty-dots-leave.md b/.changeset/tasty-dots-leave.md
new file mode 100644
index 00000000000..d588edf87dc
--- /dev/null
+++ b/.changeset/tasty-dots-leave.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-yarn-workspace': minor
+---
+
+feat: add lint-merge-report command
diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml
index 8a25ad47a33..574bb08a311 100644
--- a/.github/workflows/pr-lint.yml
+++ b/.github/workflows/pr-lint.yml
@@ -44,12 +44,8 @@ jobs:
         id: eslint
         run: yarn lint
 
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@2a968ff601949c81b47d9c1fdb789b0d25ddeea2 #v37.1.2
-
       - name: Merge lint
-        run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }}
+        run: yarn lint-merge-report master ${GITHUB_HEAD_REF}
 
       - name: Annotate Code Linting Results
         uses: ataylorme/eslint-annotate-action@2c426a387ed738e9522e93abfcb4cfc57b46458a #v2.2.0
diff --git a/merge-report.js b/merge-report.js
deleted file mode 100644
index 06eed696a42..00000000000
--- a/merge-report.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/* eslint-disable no-param-reassign */
-const fs = require('fs');
-const run = require('./run');
-
-const reports = ['eslint-report.json', 'stylelint-report.json'];
-
-let buff = [];
-
-function transform(item) {
-	if (item.source && !item.filePath) {
-		item.filePath = item.source;
-		delete item.source;
-	}
-	if (item.warnings && !item.messages) {
-		item.messages = item.warnings.map(w => ({
-			...w,
-			severity: 1,
-			message: w.text,
-			ruleId: w.rule,
-		}));
-		item.warningCount = item.warnings.length;
-		delete item.warning;
-	} else if (item.messages) {
-		item.messages = item.messages.map(w => ({ ...w, severity: 1 }));
-		item.warningCount += item.errorCount;
-		item.errorCount = 0;
-	}
-	return item;
-}
-const info = run({ name: 'yarn', args: ['workspaces', '--silent', 'info'] }).then(info =>
-	JSON.parse(info),
-);
-
-const [, , ...files] = process.argv;
-
-Promise.all([info]).then(results => {
-	const [infos] = results;
-	// eslint-disable-next-line no-console
-	console.log({ files });
-	function onlyIfInDiff(lint) {
-		return !!files.find(f => lint.filePath.endsWith(`/${f}`));
-	}
-	Object.keys(infos).forEach(pkg => {
-		reports.forEach(report => {
-			const fpath = `${infos[pkg].location}/${report}`;
-			if (fs.existsSync(fpath)) {
-				try {
-					buff = buff.concat(
-						JSON.parse(fs.readFileSync(fpath)).map(transform).filter(onlyIfInDiff),
-					);
-				} catch (e) {
-					console.error(e);
-				}
-			}
-		});
-	});
-	const target = `${process.cwd()}/eslint-report.json`;
-
-	// eslint-disable-next-line no-console
-	console.log(`report merge into ${target}`);
-	fs.writeFileSync(target, JSON.stringify(buff, null, 2));
-});
diff --git a/package.json b/package.json
index 40d9aee3d97..0981f530f74 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "release": "yarn pre-release && yarn changeset publish",
     "lint-staged": "lint-staged",
     "lint": "cross-env WORKSPACE_RUN_FAIL=no-bail talend-yarn-workspace run lint",
+    "lint-merge-report": "talend-yarn-workspace lint-merge-report",
     "test": "cross-env TZ=Europe/Paris talend-yarn-workspace run test --silent",
     "test:update": "cross-env TZ=Europe/Paris yarn workspaces run test --silent -u",
     "test:cov": "cross-env TZ=Europe/Paris talend-yarn-workspace run test:cov",
diff --git a/run.js b/run.js
deleted file mode 100644
index b9c0b823874..00000000000
--- a/run.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable import/no-dynamic-require */
-/* eslint-disable global-require */
-/* eslint-disable no-console */
-
-const os = require('os');
-let spawn = require('child_process').spawn;
-
-if (os.platform() === 'win32') {
-	/* eslint-disable-next-line import/no-extraneous-dependencies */
-	spawn = require('cross-spawn');
-}
-
-/**
- * "yarn workspaces run lint:es" command has an issue with eslint which exit in error.
- * It makes the monorepository command fail and stop at the first
- * package.
- * This script let you run a script regardless the exit code.
- * node workspace-run.js SCRIPT_NAME
- *
- */
-function run(cmd, opts = {}) {
-	if (opts.verbose) {
-		console.log(`\n#### RUNNER: ${cmd.name} ${cmd.args.join(' ')}`);
-	}
-	const start = Date.now();
-	return new Promise((resolve, reject) => {
-		const out = spawn(cmd.name, cmd.args);
-		let stdout = '';
-		let stderr = '';
-		out.on('error', error => {
-			console.error(error);
-			reject(error);
-		});
-		out.on('close', () => {
-			resolve(stdout);
-		});
-		out.on('exit', code => {
-			if (opts.verbose && stderr) {
-				console.error(`#### RUNNER: Child Process STDERR: ${stderr}`);
-			}
-			if (opts.verbose && stdout) {
-				console.error(`#### RUNNER: Child Process STDOUT: ${stdout}`);
-			}
-			if (code > 0) {
-				run.exitCode += 1;
-				console.error(`#### RUNNER: ${cmd.name} ${cmd.args.join(' ')} exit code ${code}`);
-				reject(stderr);
-				return;
-			}
-			const end = Date.now();
-			console.log(
-				`#### RUNNER: ${cmd.name} ${cmd.args.join(' ')} exit code ${code} in ${
-					(end - start) / 1000
-				} seconds`,
-			);
-			resolve(stdout);
-		});
-		out.stdout.on('data', data => {
-			const datastr = data.toString();
-			if (data && datastr) {
-				stdout += datastr;
-			}
-		});
-
-		out.stderr.on('data', data => {
-			const datastr = data.toString();
-			if (data && datastr) {
-				stderr += data.toString();
-			}
-		});
-	});
-}
-
-module.exports = run;
diff --git a/tools/scripts-yarn-workspace/README.md b/tools/scripts-yarn-workspace/README.md
index 9dbc5af7364..f48a10c3571 100644
--- a/tools/scripts-yarn-workspace/README.md
+++ b/tools/scripts-yarn-workspace/README.md
@@ -2,6 +2,9 @@
 
 This package expose a command line useful for mono repository management.
 
-For example:
+To use it as usual with scripts packages: `npx talend-yarn-workspace {command} {arguments}`
 
-`talend-yarn-workspace run test` will run test script on every package that has this script. The output will not be verbose by default.
+| command             | arguments      | description                                                                             |
+| ------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `run`               | scriptName     | run package.json script accross all packages inside your mono repository                |
+| `lint-merge-report` | main pr-branch | merge all eslint-report.json and stylelint-report.json and filter on only changed files |
diff --git a/tools/scripts-yarn-workspace/src/index.js b/tools/scripts-yarn-workspace/src/index.js
index 528e435de6c..cc90e08ba4a 100755
--- a/tools/scripts-yarn-workspace/src/index.js
+++ b/tools/scripts-yarn-workspace/src/index.js
@@ -1,11 +1,13 @@
 #!/usr/bin/env node
 import { workspaceRun } from './workspace-run.js';
-
+import { mergeReport } from './merge-report.js';
 const command = process.argv[2];
 const args = process.argv.slice(3);
 
 if (command === 'run') {
 	workspaceRun(args);
+} else if (command === 'lint-merge-report') {
+	mergeReport(args);
 } else {
 	console.error(`Command ${command} not found`);
 	process.exit(1);
diff --git a/tools/scripts-yarn-workspace/src/merge-report.js b/tools/scripts-yarn-workspace/src/merge-report.js
new file mode 100644
index 00000000000..3889fab58ab
--- /dev/null
+++ b/tools/scripts-yarn-workspace/src/merge-report.js
@@ -0,0 +1,74 @@
+/* eslint-disable no-param-reassign */
+import fs from 'fs';
+import { run } from './run.js';
+
+const reports = ['eslint-report.json', 'stylelint-report.json'];
+
+let buff = [];
+
+function transform(item) {
+	if (item.source && !item.filePath) {
+		item.filePath = item.source;
+		delete item.source;
+	}
+	if (item.warnings && !item.messages) {
+		item.messages = item.warnings.map(w => ({
+			...w,
+			severity: 1,
+			message: w.text,
+			ruleId: w.rule,
+		}));
+		item.warningCount = item.warnings.length;
+		delete item.warning;
+	} else if (item.messages) {
+		item.messages = item.messages.map(w => ({ ...w, severity: 1 }));
+		item.warningCount += item.errorCount;
+		item.errorCount = 0;
+	}
+	return item;
+}
+
+export function mergeReport(args) {
+	const info = run({ name: 'yarn', args: ['workspaces', '--silent', 'info'] }).then(info =>
+		JSON.parse(info),
+	);
+	//https://stackoverflow.com/questions/65944700/how-to-run-git-diff-in-github-actions
+	const diff = run({
+		name: 'git',
+		args: ['diff', '--name-only', `origin/${args[0]}`, `origin/${args[1]}`],
+	})
+		.then(out =>
+			out
+				.split('\n')
+				.map(str => str.trim())
+				.filter(Boolean),
+		)
+		.catch(e => console.error(e));
+	Promise.all([info, diff]).then(results => {
+		const [infos, files = []] = results;
+		// eslint-disable-next-line no-console
+		console.log({ files });
+		function onlyIfInDiff(lint) {
+			return !!files.find(f => lint.filePath.endsWith(`/${f}`));
+		}
+		Object.keys(infos).forEach(pkg => {
+			reports.forEach(report => {
+				const fpath = `${infos[pkg].location}/${report}`;
+				if (fs.existsSync(fpath)) {
+					try {
+						buff = buff.concat(
+							JSON.parse(fs.readFileSync(fpath)).map(transform).filter(onlyIfInDiff),
+						);
+					} catch (e) {
+						console.error(e);
+					}
+				}
+			});
+		});
+		const target = `${process.cwd()}/eslint-report.json`;
+
+		// eslint-disable-next-line no-console
+		console.log(`report merge into ${target}`);
+		fs.writeFileSync(target, JSON.stringify(buff, null, 2));
+	});
+}

From cdf248967933e26470a4b57632f9de0da05b273e Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Mon, 24 Jul 2023 14:35:51 +0200
Subject: [PATCH 31/34] chore: prepare release (#4811)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/angry-moles-happen.md              |  5 --
 .changeset/brave-dancers-unite.md             |  5 --
 .changeset/flat-crabs-visit.md                |  5 --
 .changeset/gold-radios-che.md                 |  5 --
 .changeset/gold-radios-chew.md                |  5 --
 .changeset/lovely-months-pretend.md           |  5 --
 .changeset/shaggy-islands-grow.md             |  5 --
 .changeset/strange-ligers-bathe.md            |  5 --
 .changeset/swift-terms-hammer.md              | 33 ------------
 .changeset/tasty-dots-leave.md                |  5 --
 .changeset/ten-suns-allow.md                  | 14 ------
 .changeset/wet-dolls-compare.md               | 43 ----------------
 fork/react-bootstrap/package.json             |  4 +-
 packages/a11y/package.json                    |  2 +-
 packages/assets-api/package.json              |  4 +-
 packages/cmf-cqrs/package.json                |  4 +-
 packages/cmf-router/package.json              |  4 +-
 packages/cmf/package.json                     |  4 +-
 packages/components/CHANGELOG.md              | 50 +++++++++++++++++++
 packages/components/package.json              | 10 ++--
 packages/containers/CHANGELOG.md              | 10 ++++
 packages/containers/package.json              | 12 ++---
 packages/dataviz/CHANGELOG.md                 | 12 +++++
 packages/dataviz/package.json                 | 12 ++---
 packages/design-system/package.json           |  6 +--
 packages/design-tokens/package.json           |  4 +-
 packages/faceted-search/CHANGELOG.md          | 12 +++++
 packages/faceted-search/package.json          | 12 ++---
 packages/flow-designer/package.json           |  4 +-
 packages/forms/CHANGELOG.md                   | 12 +++++
 packages/forms/package.json                   | 12 ++---
 packages/http/package.json                    |  4 +-
 packages/icons/package.json                   |  2 +-
 packages/jsfc/package.json                    |  4 +-
 packages/playground/CHANGELOG.md              | 17 +++++++
 packages/playground/package.json              | 16 +++---
 packages/router-bridge/package.json           |  4 +-
 packages/sagas/package.json                   |  4 +-
 packages/stepper/CHANGELOG.md                 | 12 +++++
 packages/stepper/package.json                 |  8 +--
 packages/storybook-cmf/package.json           |  2 +-
 packages/storybook-docs/package.json          |  2 +-
 packages/storybook/package.json               |  2 +-
 packages/theme/CHANGELOG.md                   | 34 +++++++++++++
 packages/theme/package.json                   |  4 +-
 packages/utils/package.json                   |  2 +-
 .../scripts-config-react-webpack/CHANGELOG.md |  6 +++
 .../scripts-config-react-webpack/package.json |  2 +-
 .../scripts-config-storybook-lib/CHANGELOG.md | 11 ++++
 .../scripts-config-storybook-lib/package.json |  4 +-
 tools/scripts-config-stylelint/CHANGELOG.md   | 15 ++++++
 tools/scripts-config-stylelint/package.json   |  2 +-
 tools/scripts-core/CHANGELOG.md               |  6 +++
 tools/scripts-core/package.json               |  2 +-
 tools/scripts-yarn-workspace/CHANGELOG.md     |  6 +++
 tools/scripts-yarn-workspace/package.json     |  2 +-
 56 files changed, 283 insertions(+), 215 deletions(-)
 delete mode 100644 .changeset/angry-moles-happen.md
 delete mode 100644 .changeset/brave-dancers-unite.md
 delete mode 100644 .changeset/flat-crabs-visit.md
 delete mode 100644 .changeset/gold-radios-che.md
 delete mode 100644 .changeset/gold-radios-chew.md
 delete mode 100644 .changeset/lovely-months-pretend.md
 delete mode 100644 .changeset/shaggy-islands-grow.md
 delete mode 100644 .changeset/strange-ligers-bathe.md
 delete mode 100644 .changeset/swift-terms-hammer.md
 delete mode 100644 .changeset/tasty-dots-leave.md
 delete mode 100644 .changeset/ten-suns-allow.md
 delete mode 100644 .changeset/wet-dolls-compare.md

diff --git a/.changeset/angry-moles-happen.md b/.changeset/angry-moles-happen.md
deleted file mode 100644
index 23370a7ea1f..00000000000
--- a/.changeset/angry-moles-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-faceted-search': major
----
-
-feat: use design-tokens for colors
diff --git a/.changeset/brave-dancers-unite.md b/.changeset/brave-dancers-unite.md
deleted file mode 100644
index 6ae4270ca3e..00000000000
--- a/.changeset/brave-dancers-unite.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-stepper': major
----
-
-feat: upgrade major dependency @talend/react-components
diff --git a/.changeset/flat-crabs-visit.md b/.changeset/flat-crabs-visit.md
deleted file mode 100644
index 2b47fa68dab..00000000000
--- a/.changeset/flat-crabs-visit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-dataviz': major
----
-
-feat: colors now use design-tokens
diff --git a/.changeset/gold-radios-che.md b/.changeset/gold-radios-che.md
deleted file mode 100644
index 6dbb3647d9c..00000000000
--- a/.changeset/gold-radios-che.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-components': patch
----
-
-chore: remove devDependencies to typescript
diff --git a/.changeset/gold-radios-chew.md b/.changeset/gold-radios-chew.md
deleted file mode 100644
index 42e5c2b3a21..00000000000
--- a/.changeset/gold-radios-chew.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/scripts-core': major
----
-
-Upgrade typescript to 5.0
diff --git a/.changeset/lovely-months-pretend.md b/.changeset/lovely-months-pretend.md
deleted file mode 100644
index 3ca06ba3044..00000000000
--- a/.changeset/lovely-months-pretend.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/scripts-config-react-webpack': patch
----
-
-fix: make the static AppLoader use design token if available
diff --git a/.changeset/shaggy-islands-grow.md b/.changeset/shaggy-islands-grow.md
deleted file mode 100644
index be0ed73400a..00000000000
--- a/.changeset/shaggy-islands-grow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/scripts-config-storybook-lib': minor
----
-
-feat: add design token update in the toolbar
diff --git a/.changeset/strange-ligers-bathe.md b/.changeset/strange-ligers-bathe.md
deleted file mode 100644
index dbd739224b4..00000000000
--- a/.changeset/strange-ligers-bathe.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-forms': major
----
-
-All colors are now based on design-tokens
diff --git a/.changeset/swift-terms-hammer.md b/.changeset/swift-terms-hammer.md
deleted file mode 100644
index 577b8fe8958..00000000000
--- a/.changeset/swift-terms-hammer.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-'@talend/bootstrap-theme': major
----
-
-Use @talend/design-tokens for all colors
-
-This is considered as a BREAKING CHANGE.
-
-To be aligned with this theme you should:
-
-* replace all hardcoded colors used in your project and use `@talend/design-tokens`
-* test your application with the dark theme
-
-We have updated the following bootstrap styles:
-* Button
-* Table
-* Form (control)
-* Navbar
-* Modal
-* Tooltip
-* Popover
-* Alert
-* Label
-* Breadcrumb
-* Tabs
-* Progress bar
-* Panel
-* Weel
-* List group
-* Pagination
-* Badge
-* Pills
-
diff --git a/.changeset/tasty-dots-leave.md b/.changeset/tasty-dots-leave.md
deleted file mode 100644
index d588edf87dc..00000000000
--- a/.changeset/tasty-dots-leave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/scripts-yarn-workspace': minor
----
-
-feat: add lint-merge-report command
diff --git a/.changeset/ten-suns-allow.md b/.changeset/ten-suns-allow.md
deleted file mode 100644
index 90841271a69..00000000000
--- a/.changeset/ten-suns-allow.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-'@talend/scripts-config-stylelint': major
----
-
-chore: upgrade stylelint and rules contains breaking changes:
-
-* stylelint from 14 to 15: https://stylelint.io/migration-guide/to-15/
-* stylelint-config-sass-guidelines from 9 to 10 https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/CHANGELOG.md#1000
-* stylelint-config-standard from 28 to 34 https://github.com/stylelint/stylelint-config-standard/blob/main/CHANGELOG.md#3400
-* hexadecimal colors turn from uppercase to lowercase: https://github.com/prettier/prettier/pull/498#issuecomment-275856264
-
-
-fix:
-> 1:1  ✖  Unknown rule order/properties-alphabetical-order  order/properties-alphabetical-order
diff --git a/.changeset/wet-dolls-compare.md b/.changeset/wet-dolls-compare.md
deleted file mode 100644
index 878538afa90..00000000000
--- a/.changeset/wet-dolls-compare.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-'@talend/react-components': major
----
-
-Style now use design tokens instead of bootstrap sass variables
-
-We have updated the following components:
-
-* ActionBar
-* ActionIconToggle
-* AppLoader
-* Badge
-* CollapsiblePanel
-* Datalist
-* DataViewer
-* DateTimePickers + Legacy
-* Drawer
-* EditableText
-* Enumeration (bug on buttons)
-* FilterBar
-* FormatValue
-* GuidedTour
-* GridLayout aka Dashboard
-* HeaderBar
-* List (Virtualized and Composition)
-* ListView
-* MultiSelect
-* Notification
-* ObjectViewer
-* PieChart
-* Progress
-* RadarChart
-* ResourceList
-* ResourcePicker
-* RichLayout
-* Skeleton
-* Slider
-* Status
-* SubHeaderBar
-* Toggle
-* Tooltip
-* TreeView
-* Typeahead
\ No newline at end of file
diff --git a/fork/react-bootstrap/package.json b/fork/react-bootstrap/package.json
index 94c421ed244..21a29e0c47c 100644
--- a/fork/react-bootstrap/package.json
+++ b/fork/react-bootstrap/package.json
@@ -41,8 +41,8 @@
     "react-dom": ">=16.3.0"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 391a229fa38..90e62eba67a 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -29,7 +29,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "@testing-library/react": "^12.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/packages/assets-api/package.json b/packages/assets-api/package.json
index 468ba62d448..6e6c836ce5d 100644
--- a/packages/assets-api/package.json
+++ b/packages/assets-api/package.json
@@ -28,8 +28,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "read-pkg-up": "^7.0.1"
   },
   "publishConfig": {
diff --git a/packages/cmf-cqrs/package.json b/packages/cmf-cqrs/package.json
index ce95ddb36e1..22fac8db7f1 100644
--- a/packages/cmf-cqrs/package.json
+++ b/packages/cmf-cqrs/package.json
@@ -38,8 +38,8 @@
     "redux-saga": "^1.2.3"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/react-hooks": "^8.0.1",
     "mock-socket": "^9.2.1",
     "prop-types": "^15.8.1",
diff --git a/packages/cmf-router/package.json b/packages/cmf-router/package.json
index 7641f257c8b..8e6f58cb439 100644
--- a/packages/cmf-router/package.json
+++ b/packages/cmf-router/package.json
@@ -34,8 +34,8 @@
   },
   "devDependencies": {
     "@redux-saga/testing-utils": "^1.1.5",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "redux-saga-tester": "^1.0.874"
diff --git a/packages/cmf/package.json b/packages/cmf/package.json
index cf645aebf0c..c661fc653d3 100644
--- a/packages/cmf/package.json
+++ b/packages/cmf/package.json
@@ -55,8 +55,8 @@
   },
   "devDependencies": {
     "@redux-saga/testing-utils": "^1.1.5",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/react": "^12.1.5",
     "jest-in-case": "^1.0.2",
     "jsdoc": "^3.6.11",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index fc8e073a7d6..76c6c65a9fd 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,55 @@
 # @talend/react-components
 
+## 11.0.0
+
+### Major Changes
+
+- bfc02c4fb: Style now use design tokens instead of bootstrap sass variables
+
+  We have updated the following components:
+
+  - ActionBar
+  - ActionIconToggle
+  - AppLoader
+  - Badge
+  - CollapsiblePanel
+  - Datalist
+  - DataViewer
+  - DateTimePickers + Legacy
+  - Drawer
+  - EditableText
+  - Enumeration (bug on buttons)
+  - FilterBar
+  - FormatValue
+  - GuidedTour
+  - GridLayout aka Dashboard
+  - HeaderBar
+  - List (Virtualized and Composition)
+  - ListView
+  - MultiSelect
+  - Notification
+  - ObjectViewer
+  - PieChart
+  - Progress
+  - RadarChart
+  - ResourceList
+  - ResourcePicker
+  - RichLayout
+  - Skeleton
+  - Slider
+  - Status
+  - SubHeaderBar
+  - Toggle
+  - Tooltip
+  - TreeView
+  - Typeahead
+
+### Patch Changes
+
+- 40e70c055: chore: remove devDependencies to typescript
+- Updated dependencies [bfc02c4fb]
+  - @talend/bootstrap-theme@8.0.0
+
 ## 10.3.5
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index fec20f9ccc6..d1ff7c28ec5 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/design-tokens": "^2.7.3",
     "@talend/react-a11y": "^1.1.0",
     "@talend/icons": "^6.58.1",
@@ -70,13 +70,13 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.16",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/design-system": "^7.10.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-design-system": "^7.3.0",
     "@talend/locales-tui-components": "^9.5.0",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "10.3.5"
+  "version": "11.0.0"
 }
diff --git a/packages/containers/CHANGELOG.md b/packages/containers/CHANGELOG.md
index 70009ff31a9..08d296ce8e3 100644
--- a/packages/containers/CHANGELOG.md
+++ b/packages/containers/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @talend/react-containers
 
+## 9.1.3
+
+### Patch Changes
+
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-components@11.0.0
+  - @talend/react-forms@10.0.0
+
 ## 9.1.2
 
 ### Patch Changes
diff --git a/packages/containers/package.json b/packages/containers/package.json
index 83330b0450a..909f4e9b8df 100644
--- a/packages/containers/package.json
+++ b/packages/containers/package.json
@@ -35,8 +35,8 @@
   "dependencies": {
     "@talend/react-bootstrap": "^1.35.2",
     "@talend/react-cmf": "^7.3.0",
-    "@talend/react-components": "^10.3.5",
-    "@talend/react-forms": "^9.2.3",
+    "@talend/react-components": "^11.0.0",
+    "@talend/react-forms": "^10.0.0",
     "@talend/utils": "^2.5.1",
     "classnames": "^2.3.2",
     "immutable": "^3.8.2",
@@ -50,12 +50,12 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.16",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-containers": "^8.0.2",
     "@talend/react-storybook-cmf": "^7.2.0",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "i18next": "^20.6.1",
     "jest-in-case": "^1.0.2",
     "prop-types": "^15.8.1",
@@ -75,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.1.2"
+  "version": "9.1.3"
 }
diff --git a/packages/dataviz/CHANGELOG.md b/packages/dataviz/CHANGELOG.md
index 5e7960ee6c2..ffec2dd5650 100755
--- a/packages/dataviz/CHANGELOG.md
+++ b/packages/dataviz/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.0.0
+
+### Major Changes
+
+- bfc02c4fb: feat: colors now use design-tokens
+
+### Patch Changes
+
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-components@11.0.0
+
 ## 2.9.1
 
 ### Patch Changes
diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json
index b32ffef38ff..283168dc7e6 100644
--- a/packages/dataviz/package.json
+++ b/packages/dataviz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-dataviz",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "description": "Talend charts and visualization components",
   "main": "lib/index.js",
   "mainSrc": "src/index.ts",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@talend/assets-api": "^1.2.2",
-    "@talend/react-components": "^10.3.5",
+    "@talend/react-components": "^11.0.0",
     "@talend/design-tokens": "^2.7.3",
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
@@ -50,13 +50,13 @@
   "devDependencies": {
     "@cypress/react": "^7.0.3",
     "@cypress/webpack-dev-server": "^3.4.1",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-components": "^9.5.0",
     "@talend/locales-tui-dataviz": "^0.4.6",
-    "@talend/react-components": "^10.3.5",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/react-components": "^11.0.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/react": "^12.1.5",
     "@types/classnames": "^2.3.1",
     "@types/d3": "^7.4.0",
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 439f945b729..bf76a13c018 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -59,11 +59,11 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.16",
     "@svgr/webpack": "^5.5.0",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/icons": "^6.59.0",
     "@talend/locales-design-system": "^7.3.0",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/cypress": "^9.0.0",
     "@types/classnames": "^2.3.1",
     "@types/react": "^17.0.62",
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index ccf9d44b400..2bf6ce6b8d0 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -34,8 +34,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "typeface-source-sans-pro": "^1.1.13"
   },
   "dependencies": {}
diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md
index 5814939a545..259f2c5e88a 100644
--- a/packages/faceted-search/CHANGELOG.md
+++ b/packages/faceted-search/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 11.0.0
+
+### Major Changes
+
+- bfc02c4fb: feat: use design-tokens for colors
+
+### Patch Changes
+
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-components@11.0.0
+
 ## 10.0.1
 
 ### Patch Changes
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 9a18baa0fc7..47d89a29567 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-faceted-search",
-  "version": "10.0.1",
+  "version": "11.0.0",
   "description": "Faceted search",
   "main": "lib/index.js",
   "mainSrc": "src/index.js",
@@ -46,14 +46,14 @@
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/design-system": "^7.14.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-components": "^9.5.0",
     "@talend/locales-tui-faceted-search": "^8.1.0",
-    "@talend/react-components": "^10.3.5",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/react-components": "^11.0.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "cross-env": "^7.0.3",
     "i18next": "^20.6.1",
@@ -64,7 +64,7 @@
   },
   "peerDependencies": {
     "@talend/design-system": "^7.5.1",
-    "@talend/react-components": "^10.0.0",
+    "@talend/react-components": "^11.0.0",
     "i18next": "^20.6.1",
     "prop-types": "^15.5.10",
     "react": ">= 16.14.0",
diff --git a/packages/flow-designer/package.json b/packages/flow-designer/package.json
index ad1e7754251..ceee020362e 100644
--- a/packages/flow-designer/package.json
+++ b/packages/flow-designer/package.json
@@ -19,8 +19,8 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@talend/scripts-config-jest": "^12.2.0",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@types/d3": "^7.4.0",
     "@types/enzyme": "^3.10.13",
     "@types/invariant": "^2.2.35",
diff --git a/packages/forms/CHANGELOG.md b/packages/forms/CHANGELOG.md
index b4c0cf55ae8..89455cdfaa8 100644
--- a/packages/forms/CHANGELOG.md
+++ b/packages/forms/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @talend/react-forms
 
+## 10.0.0
+
+### Major Changes
+
+- bfc02c4fb: All colors are now based on design-tokens
+
+### Patch Changes
+
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-components@11.0.0
+
 ## 9.3.0
 
 ### Minor Changes
diff --git a/packages/forms/package.json b/packages/forms/package.json
index fe946577e7b..2f215b4478a 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -39,7 +39,7 @@
   "dependencies": {
     "@talend/assets-api": "^1.2.2",
     "@talend/json-schema-form-core": "1.1.1",
-    "@talend/react-components": "^10.3.5",
+    "@talend/react-components": "^11.0.0",
     "@talend/design-system": "^7.10.0",
     "@talend/design-tokens": "^2.7.3",
     "@talend/utils": "^2.5.1",
@@ -58,12 +58,12 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.16",
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-forms": "^9.0.1",
-    "@talend/react-components": "^10.3.5",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/react-components": "^11.0.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
@@ -88,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.3.0"
+  "version": "10.0.0"
 }
diff --git a/packages/http/package.json b/packages/http/package.json
index b63fb1f5b62..0e221342d2f 100644
--- a/packages/http/package.json
+++ b/packages/http/package.json
@@ -27,8 +27,8 @@
     "lint": "talend-scripts lint"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "fetch-mock": "^9.11.0",
     "node-fetch": "^2.6.11",
     "react": "^17.0.2",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0e6dff8310f..7cec009a27d 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -44,7 +44,7 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@svgr/webpack": "^5.5.0",
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "babel-loader": "^8.3.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^4.3.0",
diff --git a/packages/jsfc/package.json b/packages/jsfc/package.json
index 46feb0720c3..b671dff5c1f 100644
--- a/packages/jsfc/package.json
+++ b/packages/jsfc/package.json
@@ -39,8 +39,8 @@
     "json-schema"
   ],
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@types/chai": "^3.5.2",
     "@types/node": "^6.14.13",
     "json-refs": "^3.0.15",
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
index 5a6894e3bcb..f719c6aebd0 100644
--- a/packages/playground/CHANGELOG.md
+++ b/packages/playground/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @talend/ui-playground
 
+## 1.1.15
+
+### Patch Changes
+
+- Updated dependencies [bfc02c4fb]
+- Updated dependencies [bfc02c4fb]
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+- Updated dependencies [bfc02c4fb]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-faceted-search@11.0.0
+  - @talend/react-dataviz@3.0.0
+  - @talend/react-components@11.0.0
+  - @talend/react-forms@10.0.0
+  - @talend/bootstrap-theme@8.0.0
+  - @talend/react-containers@9.1.3
+
 ## 1.1.14
 
 ### Patch Changes
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 1232eb46cbd..e2594237b58 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/ui-playground",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "Showcase Talend/UI",
   "private": true,
   "main": "app/index.js",
@@ -23,23 +23,23 @@
   "author": "Talend Frontend <frontend@talend.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
     "i18next-http-backend": "^1.4.5"
   },
   "dependencies": {
-    "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/bootstrap-theme": "^8.0.0",
     "@talend/react-bootstrap": "^1.35.2",
     "@talend/icons": "^6.58.1",
     "@talend/react-cmf": "^7.3.0",
     "@talend/react-cmf-router": "^5.3.0",
-    "@talend/react-components": "^10.3.5",
-    "@talend/react-containers": "^9.1.2",
-    "@talend/react-dataviz": "^2.9.1",
-    "@talend/react-faceted-search": "^10.0.0",
-    "@talend/react-forms": "^9.2.3",
+    "@talend/react-components": "^11.0.0",
+    "@talend/react-containers": "^9.1.3",
+    "@talend/react-dataviz": "^3.0.0",
+    "@talend/react-faceted-search": "^11.0.0",
+    "@talend/react-forms": "^10.0.0",
     "history": "^5.3.0",
     "i18next": "^20.6.1",
     "prop-types": "^15.8.1",
diff --git a/packages/router-bridge/package.json b/packages/router-bridge/package.json
index 4da0cb4ee87..fb938cf05b7 100644
--- a/packages/router-bridge/package.json
+++ b/packages/router-bridge/package.json
@@ -20,8 +20,8 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/ui/tree/master/packages/router-bridge#readme",
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "connected-react-router": "^6.9.3",
     "history": "^5.3.0",
     "react": "^17.0.2",
diff --git a/packages/sagas/package.json b/packages/sagas/package.json
index e84ab69dd33..efd3565ea2f 100644
--- a/packages/sagas/package.json
+++ b/packages/sagas/package.json
@@ -41,8 +41,8 @@
     "react-dom": ">= 16.14.0"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/packages/stepper/CHANGELOG.md b/packages/stepper/CHANGELOG.md
index eb454c55244..6c515a1e876 100644
--- a/packages/stepper/CHANGELOG.md
+++ b/packages/stepper/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @talend/react-stepper
 
+## 8.0.0
+
+### Major Changes
+
+- bfc02c4fb: feat: upgrade major dependency @talend/react-components
+
+### Patch Changes
+
+- Updated dependencies [40e70c055]
+- Updated dependencies [bfc02c4fb]
+  - @talend/react-components@11.0.0
+
 ## 7.2.0
 
 ### Minor Changes
diff --git a/packages/stepper/package.json b/packages/stepper/package.json
index 9490bcd8dae..4e89bac564b 100644
--- a/packages/stepper/package.json
+++ b/packages/stepper/package.json
@@ -31,7 +31,7 @@
     "url": "https://github.com/Talend/ui.git"
   },
   "dependencies": {
-    "@talend/react-components": "^10.3.5",
+    "@talend/react-components": "^11.0.0",
     "classnames": "^2.3.2",
     "invariant": "^2.2.4",
     "keycode": "^2.2.1",
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@talend/icons": "^6.58.1",
-    "@talend/scripts-core": "^13.3.0",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-core": "^14.0.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "i18next": "^20.6.1",
     "immutable": "^3.8.2",
     "jsdom": "^20.0.3",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "7.2.0"
+  "version": "8.0.0"
 }
diff --git a/packages/storybook-cmf/package.json b/packages/storybook-cmf/package.json
index 4779afd31f3..14ff13dfd7c 100644
--- a/packages/storybook-cmf/package.json
+++ b/packages/storybook-cmf/package.json
@@ -25,7 +25,7 @@
   "mainSrc": "src/index.js",
   "devDependencies": {
     "@talend/react-cmf": "^7.3.0",
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "@testing-library/react": "^12.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/packages/storybook-docs/package.json b/packages/storybook-docs/package.json
index 821f89ffade..e9ab97b57bb 100644
--- a/packages/storybook-docs/package.json
+++ b/packages/storybook-docs/package.json
@@ -33,7 +33,7 @@
     "@talend/design-tokens": "^2.7.3"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0"
+    "@talend/scripts-core": "^14.0.0"
   },
   "peerDependencies": {
     "@talend/icons": "^6.42.0"
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index dcb1208d2dd..9712ba4f13e 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -42,7 +42,7 @@
     "@talend/locales-tui-containers": "^8.0.2",
     "@talend/locales-tui-faceted-search": "^8.1.0",
     "@talend/locales-tui-forms": "^9.0.1",
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "@types/react": "^17.0.62",
     "i18next": "^20.6.1",
     "mdx-embed": "^1.1.2",
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
index 9c0f4f6897e..1933430ba00 100644
--- a/packages/theme/CHANGELOG.md
+++ b/packages/theme/CHANGELOG.md
@@ -1,5 +1,39 @@
 # @talend/bootstrap-theme
 
+## 8.0.0
+
+### Major Changes
+
+- bfc02c4fb: Use @talend/design-tokens for all colors
+
+  This is considered as a BREAKING CHANGE.
+
+  To be aligned with this theme you should:
+
+  - replace all hardcoded colors used in your project and use `@talend/design-tokens`
+  - test your application with the dark theme
+
+  We have updated the following bootstrap styles:
+
+  - Button
+  - Table
+  - Form (control)
+  - Navbar
+  - Modal
+  - Tooltip
+  - Popover
+  - Alert
+  - Label
+  - Breadcrumb
+  - Tabs
+  - Progress bar
+  - Panel
+  - Weel
+  - List group
+  - Pagination
+  - Badge
+  - Pills
+
 ## 7.0.1
 
 ### Patch Changes
diff --git a/packages/theme/package.json b/packages/theme/package.json
index e5fae13fdcd..ffa9621f34e 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@talend/icons": "^6.58.1",
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "html-webpack-plugin": "^5.5.3",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "7.0.1"
+  "version": "8.0.0"
 }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 48dcc4721a5..7fe369617ff 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -20,7 +20,7 @@
     "extends": "talend-scripts extends"
   },
   "devDependencies": {
-    "@talend/scripts-core": "^13.3.0",
+    "@talend/scripts-core": "^14.0.0",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
diff --git a/tools/scripts-config-react-webpack/CHANGELOG.md b/tools/scripts-config-react-webpack/CHANGELOG.md
index a78b91621bf..09922218400 100644
--- a/tools/scripts-config-react-webpack/CHANGELOG.md
+++ b/tools/scripts-config-react-webpack/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/scripts-config-react-webpack
 
+## 15.4.1
+
+### Patch Changes
+
+- bfc02c4fb: fix: make the static AppLoader use design token if available
+
 ## 15.4.0
 
 ### Minor Changes
diff --git a/tools/scripts-config-react-webpack/package.json b/tools/scripts-config-react-webpack/package.json
index c25780ec774..2ae380e5383 100644
--- a/tools/scripts-config-react-webpack/package.json
+++ b/tools/scripts-config-react-webpack/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@talend/scripts-config-react-webpack",
   "description": "Webpack configuration for @talend/scripts-core",
-  "version": "15.4.0",
+  "version": "15.4.1",
   "license": "Apache-2.0",
   "main": "index.js",
   "author": "Talend Frontend <frontend@talend.com>",
diff --git a/tools/scripts-config-storybook-lib/CHANGELOG.md b/tools/scripts-config-storybook-lib/CHANGELOG.md
index 0ab8c0af088..f29a6cffc8a 100644
--- a/tools/scripts-config-storybook-lib/CHANGELOG.md
+++ b/tools/scripts-config-storybook-lib/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @talend/scripts-config-storybook-lib
 
+## 4.1.0
+
+### Minor Changes
+
+- bfc02c4fb: feat: add design token update in the toolbar
+
+### Patch Changes
+
+- Updated dependencies [bfc02c4fb]
+  - @talend/scripts-config-react-webpack@15.4.1
+
 ## 4.0.3
 
 ### Patch Changes
diff --git a/tools/scripts-config-storybook-lib/package.json b/tools/scripts-config-storybook-lib/package.json
index cb57b6c4a6a..c522c1c788c 100644
--- a/tools/scripts-config-storybook-lib/package.json
+++ b/tools/scripts-config-storybook-lib/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@talend/scripts-config-storybook-lib",
   "description": "Storybook configuration for @talend/scripts-core",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "author": "Talend Frontend <frontend@talend.com>",
@@ -30,7 +30,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
-    "@talend/scripts-config-react-webpack": "^15.4.0",
+    "@talend/scripts-config-react-webpack": "^15.4.1",
     "@talend/dynamic-cdn-webpack-plugin": "^13.0.1",
     "assert": "^2.0.0",
     "i18next-http-backend": "^1.4.5",
diff --git a/tools/scripts-config-stylelint/CHANGELOG.md b/tools/scripts-config-stylelint/CHANGELOG.md
index c9219ad4210..c29f0e3163e 100644
--- a/tools/scripts-config-stylelint/CHANGELOG.md
+++ b/tools/scripts-config-stylelint/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @talend/scripts-config-stylelint
 
+## 4.0.0
+
+### Major Changes
+
+- 8d64e97f2: chore: upgrade stylelint and rules contains breaking changes:
+
+  - stylelint from 14 to 15: https://stylelint.io/migration-guide/to-15/
+  - stylelint-config-sass-guidelines from 9 to 10 https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/CHANGELOG.md#1000
+  - stylelint-config-standard from 28 to 34 https://github.com/stylelint/stylelint-config-standard/blob/main/CHANGELOG.md#3400
+  - hexadecimal colors turn from uppercase to lowercase: https://github.com/prettier/prettier/pull/498#issuecomment-275856264
+
+  fix:
+
+  > 1:1 ✖ Unknown rule order/properties-alphabetical-order order/properties-alphabetical-order
+
 ## 3.0.0
 
 ### Major Changes
diff --git a/tools/scripts-config-stylelint/package.json b/tools/scripts-config-stylelint/package.json
index aa979c4d768..2d5c74a621c 100644
--- a/tools/scripts-config-stylelint/package.json
+++ b/tools/scripts-config-stylelint/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@talend/scripts-config-stylelint",
   "description": "Stylelint configuration for @talend/scripts-core",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "author": "Talend Frontend <frontend@talend.com>",
diff --git a/tools/scripts-core/CHANGELOG.md b/tools/scripts-core/CHANGELOG.md
index 7c80a27d81f..c1fc02461f8 100644
--- a/tools/scripts-core/CHANGELOG.md
+++ b/tools/scripts-core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/scripts-core
 
+## 14.0.0
+
+### Major Changes
+
+- 40e70c055: Upgrade typescript to 5.0
+
 ## 13.3.0
 
 ### Minor Changes
diff --git a/tools/scripts-core/package.json b/tools/scripts-core/package.json
index aadadb1b52b..3e9158179c3 100644
--- a/tools/scripts-core/package.json
+++ b/tools/scripts-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@talend/scripts-core",
   "description": "Set of scripts",
-  "version": "13.3.0",
+  "version": "14.0.0",
   "license": "Apache-2.0",
   "exports": "./src/index.js",
   "type": "module",
diff --git a/tools/scripts-yarn-workspace/CHANGELOG.md b/tools/scripts-yarn-workspace/CHANGELOG.md
index 72807007730..f8c25636041 100644
--- a/tools/scripts-yarn-workspace/CHANGELOG.md
+++ b/tools/scripts-yarn-workspace/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/scripts-yarn-workspace
 
+## 1.2.0
+
+### Minor Changes
+
+- e95da98ed: feat: add lint-merge-report command
+
 ## 1.1.0
 
 ### Minor Changes
diff --git a/tools/scripts-yarn-workspace/package.json b/tools/scripts-yarn-workspace/package.json
index 7b37014ee72..ca1b86ff0d7 100644
--- a/tools/scripts-yarn-workspace/package.json
+++ b/tools/scripts-yarn-workspace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/scripts-yarn-workspace",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "yarn workspace commands but more friendly",
   "type": "module",
   "bin": {

From c15088d3bb451a08d5fa25bbf7853a5905ed1688 Mon Sep 17 00:00:00 2001
From: Inna Ivashchuk <innes333@gmail.com>
Date: Mon, 24 Jul 2023 18:50:52 +0300
Subject: [PATCH 32/34] fix(TDOPS-4856): List colors used from DS tokens
 (#4812)

---
 .changeset/hungry-parrots-mate.md                           | 5 +++++
 .../List/ListComposition/Toolbar/ListToolbar.module.scss    | 4 ++--
 .../ColumnChooser/ColumnChooser.module.scss                 | 2 +-
 packages/components/src/List/Toolbar/Toolbar.module.scss    | 4 ++--
 packages/components/src/Rich/Layout/RichLayout.module.scss  | 4 ++--
 .../src/VirtualizedList/ListTable/ListTable.module.scss     | 6 +++---
 .../src/VirtualizedList/RowLarge/RowLarge.module.scss       | 2 +-
 7 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/hungry-parrots-mate.md

diff --git a/.changeset/hungry-parrots-mate.md b/.changeset/hungry-parrots-mate.md
new file mode 100644
index 00000000000..4a6e3f13cb1
--- /dev/null
+++ b/.changeset/hungry-parrots-mate.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': minor
+---
+
+TDOPS-4856 - Fix List colors taken from DS tokens
diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
index de2e006608b..9bb7e4e41bf 100644
--- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
+++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss
@@ -12,8 +12,8 @@ $tc-toolbar-height: 7rem;
 	padding-right: $padding-larger;
 
 	background: tokens.$coral-color-neutral-background-medium;
-	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
-	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
+	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	margin-bottom: 0;
 	flex-shrink: 0;
 	flex-grow: 0;
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
index 4ce84794eb6..21cc79f72ab 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
@@ -50,7 +50,7 @@ $tc-height: 4rem;
 		min-height: $tc-height;
 
 		&-select-all {
-			border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border;
+			border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border-weak;
 		}
 
 		&:global(.ally-focus-within),
diff --git a/packages/components/src/List/Toolbar/Toolbar.module.scss b/packages/components/src/List/Toolbar/Toolbar.module.scss
index cab66a2549b..539e7c25945 100644
--- a/packages/components/src/List/Toolbar/Toolbar.module.scss
+++ b/packages/components/src/List/Toolbar/Toolbar.module.scss
@@ -6,8 +6,8 @@ $tc-list-toolbar-height: 7rem !default;
 
 .tc-list-toolbar {
 	background: tokens.$coral-color-neutral-background-medium;
-	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
-	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+	border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
+	border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	margin-bottom: 0;
 	padding: 0 $padding-larger;
 
diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss
index 40bad98e2a1..8b4092019f8 100644
--- a/packages/components/src/Rich/Layout/RichLayout.module.scss
+++ b/packages/components/src/Rich/Layout/RichLayout.module.scss
@@ -2,12 +2,12 @@
 @use '~@talend/design-tokens/lib/tokens';
 
 $tc-popover-border-width: 0.1rem !default;
-$tc-popover-border-color: tokens.$coral-color-neutral-border !default;
+$tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default;
 $tc-popover-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
 $tc-popover-body-min-height: 10rem !default;
 $tc-popover-body-max-height: 30rem !default;
 $tc-popover-max-width: 40rem !default;
-$tc-popover-header-border-color: tokens.$coral-color-neutral-border !default;
+$tc-popover-header-border-color: tokens.$coral-color-neutral-border-weak !default;
 $tc-popover-header-footer-height: 7rem !default;
 
 :global(.popover) {
diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
index 47a19f5bba7..d6e7fda1de9 100644
--- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
+++ b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss
@@ -14,7 +14,7 @@ $tc-list-table-cell-padding: $padding-small !default;
 	background-color: tokens.$coral-color-neutral-background;
 
 	.row {
-		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		background: tokens.$coral-color-neutral-background;
 		display: flex;
 		align-items: center;
@@ -25,7 +25,7 @@ $tc-list-table-cell-padding: $padding-small !default;
 			background-color: tokens.$coral-color-neutral-background-medium;
 
 			.cell {
-				border-right: 1px solid tokens.$coral-color-neutral-border;
+				border-right: 1px solid tokens.$coral-color-neutral-border-weak;
 			}
 		}
 	}
@@ -65,7 +65,7 @@ $tc-list-table-cell-padding: $padding-small !default;
 		box-shadow: $shadow-default;
 
 		.cell {
-			border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
+			border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
diff --git a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
index 293de273e9a..eada3edb254 100644
--- a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
+++ b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss
@@ -6,7 +6,7 @@
 
 	.inner-box {
 		background: tokens.$coral-color-neutral-background;
-		border: 1px solid tokens.$coral-color-neutral-border;
+		border: 1px solid tokens.$coral-color-neutral-border-weak;
 		border-radius: 3px;
 		height: 100%;
 

From f65073eb9c4c00c62ce6523e86c848899c5f05cf Mon Sep 17 00:00:00 2001
From: jmainguytalend <102585684+jmainguytalend@users.noreply.github.com>
Date: Tue, 25 Jul 2023 14:30:11 +0200
Subject: [PATCH 33/34] feat(CDM-261/Code): update react-ace (#4328)

* feat(CDM-261) update existing Code component to v10 (prerequisite to add it in DS)

* chore: yarn-deduplicate

* Update

* fix: merge master and make sb works

* fix: autocomplete

* fix: autocomplete

* fix: build

* Fix scope override

* fix: make it works without timeout

* chore: cleanup

* test: fix

* Cleanup & add changeset

* Cleanup empty file

* Fix playground compilation

* Remove enter key catcher

* Update .changeset/long-pigs-lie.md

Co-authored-by: Jean-Michel FRANCOIS <jmfrancois@talend.com>

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: jmfrancois <jmfrancois@talend.com>
---
 .changeset/clever-snails-whisper.md           |  5 ++
 .changeset/long-pigs-lie.md                   |  9 +++
 fork/module-to-cdn/modules.json               |  8 +++
 packages/forms/.npmignore                     |  1 -
 packages/forms/README.md                      | 22 +------
 packages/forms/build-utils.js                 | 15 -----
 packages/forms/package.json                   |  6 +-
 .../fields/Code/Code.component.test.tsx       |  1 +
 .../src/UIForm/fields/Code/Code.component.tsx | 63 ++++++++-----------
 .../forms/stories/json/fields/core-code.json  |  1 +
 packages/forms/webpack.ace.config.js          | 32 ----------
 packages/playground/webpack.config.dev.js     |  3 +-
 .../.eslintignore                             |  2 +
 yarn.lock                                     | 37 +++++------
 14 files changed, 72 insertions(+), 133 deletions(-)
 create mode 100644 .changeset/clever-snails-whisper.md
 create mode 100644 .changeset/long-pigs-lie.md
 delete mode 100644 packages/forms/build-utils.js
 delete mode 100644 packages/forms/webpack.ace.config.js
 create mode 100644 tools/scripts-config-storybook-lib/.eslintignore

diff --git a/.changeset/clever-snails-whisper.md b/.changeset/clever-snails-whisper.md
new file mode 100644
index 00000000000..fe4c03d9414
--- /dev/null
+++ b/.changeset/clever-snails-whisper.md
@@ -0,0 +1,5 @@
+---
+'@talend/module-to-cdn': minor
+---
+
+feat: add ace-builds
diff --git a/.changeset/long-pigs-lie.md b/.changeset/long-pigs-lie.md
new file mode 100644
index 00000000000..1371b2478c9
--- /dev/null
+++ b/.changeset/long-pigs-lie.md
@@ -0,0 +1,9 @@
+---
+'@talend/react-forms': minor
+---
+
+Update react-ace lib and improve its lazy loading.
+Fix auto-completion.
+Remove the need to add a copy configuration in application to work.
+
+New library no more use *brace* but *ace-builds* instead.
diff --git a/fork/module-to-cdn/modules.json b/fork/module-to-cdn/modules.json
index a2054af34ba..a7907108c24 100644
--- a/fork/module-to-cdn/modules.json
+++ b/fork/module-to-cdn/modules.json
@@ -155,6 +155,14 @@
       }
     }
   },
+  "ace-builds": {
+    "versions": {
+      ">= 1.10.1": {
+        "development": "/",
+        "production": "/"
+      }
+    }
+  },
   "aframe": {
     "var": "AFRAME",
     "versions": {
diff --git a/packages/forms/.npmignore b/packages/forms/.npmignore
index 9769520dc87..86ef118e7bb 100644
--- a/packages/forms/.npmignore
+++ b/packages/forms/.npmignore
@@ -58,5 +58,4 @@ stylelint-report.json
 talend-scripts.json
 tsconfig.build.json
 tsconfig.json
-webpack.ace.config.js
 talend-i18n.json
diff --git a/packages/forms/README.md b/packages/forms/README.md
index 2759ab0958c..9b07de80d84 100644
--- a/packages/forms/README.md
+++ b/packages/forms/README.md
@@ -143,27 +143,7 @@ function isValid({ payload }) {
 ## Build with webpack
 
 @talend/react-forms comes with react-ace lazy loaded.
-No modes are loaded with the build and ace is trying to fetch modes,
-this is why you need to add a copyconfig to your build to use the 'code' widget.
-
-Please adapt from this webpack config example:
-
-```javascript
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const buildFormUtils = require('@talend/react-forms/build-utils');
-
-const patterns = buildFormUtils.getWebpackCopyConfig();
-
-module.exports = {
-	entry: './src/app/index.js'
-	output: {
-		//...
-	},
-	plugins: [
-		new CopyWebpackPlugin({ patterns })
-	]
-}
-```
+Modes are loaded from CDN. No more additional config is required.
 
 ## LICENSE
 
diff --git a/packages/forms/build-utils.js b/packages/forms/build-utils.js
deleted file mode 100644
index 530f7c4fca0..00000000000
--- a/packages/forms/build-utils.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const path = require('path');
-
-function getWebpackCopyConfig() {
-	return [
-		{
-			from: '+(mode|theme|snippets)-*.js',
-			context: path.resolve(__dirname, 'dist'),
-			info: { minimized: true },
-		},
-	];
-}
-
-module.exports = {
-	getWebpackCopyConfig,
-};
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 2f215b4478a..a8df5b1c0e9 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -6,11 +6,10 @@
   "types": "./lib/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build:ace": "webpack --config=./webpack.ace.config.js",
     "build:dev": "talend-scripts build --umd --dev",
     "build:prod": "talend-scripts build --umd --prod",
     "build-storybook": "talend-scripts build-storybook",
-    "pre-release": "yarn build:dev && yarn build:prod && yarn build:ace",
+    "pre-release": "yarn build:dev && yarn build:prod",
     "build:lib": "talend-scripts build",
     "test": "cross-env TZ=Europe/Paris talend-scripts test",
     "test:watch": "talend-scripts test --watch",
@@ -43,6 +42,7 @@
     "@talend/design-system": "^7.10.0",
     "@talend/design-tokens": "^2.7.3",
     "@talend/utils": "^2.5.1",
+    "ace-builds": "^1.10.1",
     "ajv": "^6.12.6",
     "classnames": "^2.3.2",
     "json-logic-js": "^2.0.2",
@@ -51,7 +51,7 @@
     "memoize-one": "^6.0.0",
     "react-autowhatever": "10.2.0",
     "@talend/react-bootstrap": "^1.35.2",
-    "react-ace": "^6.6.0",
+    "react-ace": "^10.1.0",
     "react-hook-form": "^6.15.8",
     "react-jsonschema-form": "0.51.0",
     "tv4": "^1.3.0"
diff --git a/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx b/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx
index 2e475361286..d1d8a79a547 100644
--- a/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx
+++ b/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx
@@ -5,6 +5,7 @@ import { render, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ReactAce from 'react-ace';
 import Code, { CodeProps } from './Code.component';
+import 'ace-builds/src-noconflict/ext-language_tools';
 
 // fix cannot read appendChild of null;
 jest.mock('ally.js');
diff --git a/packages/forms/src/UIForm/fields/Code/Code.component.tsx b/packages/forms/src/UIForm/fields/Code/Code.component.tsx
index 1334dbbbe6b..3c68968c5b6 100644
--- a/packages/forms/src/UIForm/fields/Code/Code.component.tsx
+++ b/packages/forms/src/UIForm/fields/Code/Code.component.tsx
@@ -1,25 +1,35 @@
-import {
-	lazy,
-	DetailedHTMLProps,
-	KeyboardEvent,
-	LabelHTMLAttributes,
-	Suspense,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
+import { lazy, DetailedHTMLProps, LabelHTMLAttributes, Suspense, useEffect, useState } from 'react';
+import { IAceEditorProps } from 'react-ace';
 import { useTranslation } from 'react-i18next';
-import { isEventKey, codes } from 'keycode';
+
 import assetsApi from '@talend/assets-api';
-import { AceEditorProps } from 'react-ace';
-import FieldTemplate from '../FieldTemplate';
-import { generateId, generateDescriptionId, generateErrorId } from '../../Message/generateId';
 
 import { I18N_DOMAIN_FORMS } from '../../../constants';
+import { generateId, generateDescriptionId, generateErrorId } from '../../Message/generateId';
+import FieldTemplate from '../FieldTemplate';
 import CodeSkeleton from './CodeSkeleton.component';
 
+// Define ace namespace to avoid compiler error
+// And use it during react-ace lazy load without importing it (that will break lazy loading)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const ace: any;
+
 const ReactAce = lazy(() =>
-	assetsApi.getUMD('react-ace').then((mod: any) => assetsApi.toDefaultModule(mod.default)),
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	assetsApi.getUMD('react-ace').then((mod: any) => {
+		const extUrl = assetsApi.getURL('/src-min-noconflict/ext-language_tools.js', 'ace-builds');
+		ace.config.set('basePath', extUrl.replace('ext-language_tools.js', ''));
+		assetsApi.addScript({ src: extUrl });
+		// wait for ext-language_tools.js to be loaded before return the ace module
+		return new Promise(resolve => {
+			const cancel = setInterval(() => {
+				if (ace.require('ace/ext/language_tools')) {
+					clearInterval(cancel);
+					resolve(assetsApi.toDefaultModule(mod.default));
+				}
+			}, 100);
+		});
+	}),
 );
 
 const DEFAULT_SET_OPTIONS = {
@@ -32,7 +42,7 @@ interface CodeSchema {
 	autoFocus: boolean;
 	description: string;
 	disabled: boolean;
-	options: AceEditorProps & { language?: string };
+	options: IAceEditorProps & { language?: string };
 	readOnly: boolean;
 	required: boolean;
 	title: string;
@@ -68,7 +78,6 @@ export default function Code({
 	const descriptionId = generateDescriptionId(id);
 	const errorId = generateErrorId(id);
 	const instructionsId = generateId(id, 'instructions');
-	const containerRef = useRef<any>(null);
 	const [editor, setEditor] = useState<any>(null);
 
 	useEffect(() => {
@@ -79,22 +88,6 @@ export default function Code({
 		}
 	}, [editor, instructionsId, descriptionId, errorId, id]);
 
-	function onKeyDown(event: KeyboardEvent) {
-		if (isEventKey(event.nativeEvent, codes.enter)) {
-			const now = Date.now();
-
-			if (containerRef.current.lastEsc && containerRef.current.lastEsc - now < 1000) {
-				containerRef.current.lastEsc = null;
-				containerRef.current.focus();
-				editor.textInput.getElement().setAttribute('tabindex', -1);
-			} else {
-				containerRef.current.lastEsc = now;
-			}
-		} else {
-			containerRef.current.lastEsc = null;
-		}
-	}
-
 	function onBlur() {
 		editor.textInput.getElement().removeAttribute('tabindex');
 	}
@@ -115,8 +108,6 @@ export default function Code({
 			<div // eslint-disable-line jsx-a11y/no-static-element-interactions
 				id={id && `${id}-editor-container`}
 				onBlur={onBlur}
-				onKeyDown={onKeyDown}
-				ref={containerRef}
 				tabIndex={-1}
 			>
 				<div id={instructionsId} className="sr-only">
@@ -133,7 +124,7 @@ export default function Code({
 						name={`${id}_wrapper`}
 						mode={options?.language}
 						onBlur={(event: Event) => onFinish(event, { schema })}
-						onLoad={(ace: any) => setEditor(ace)}
+						onLoad={(component: unknown) => setEditor(component)}
 						onChange={(newValue: string | number, event: Event) =>
 							onChange(event, { schema: schema, value: newValue })
 						}
diff --git a/packages/forms/stories/json/fields/core-code.json b/packages/forms/stories/json/fields/core-code.json
index 44b5a8c1675..d26ff99e716 100644
--- a/packages/forms/stories/json/fields/core-code.json
+++ b/packages/forms/stories/json/fields/core-code.json
@@ -18,6 +18,7 @@
       "title": "Code with gutter and style",
       "options": {
         "showGutter": true,
+        "language": "sql",
         "style": {
           "border": 0,
           "font": "400 1.4rem/140% 'Inconsolata', monospace",
diff --git a/packages/forms/webpack.ace.config.js b/packages/forms/webpack.ace.config.js
deleted file mode 100644
index 11b19c44bcc..00000000000
--- a/packages/forms/webpack.ace.config.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const path = require('path');
-const MODES = ['json', 'python', 'sql'];
-const THEMES = ['chrome'];
-
-module.exports = MODES.map(mode => ({
-	mode: 'production',
-	entry: `brace/mode/${mode}`,
-	output: {
-		path: path.resolve(__dirname, 'dist'),
-		filename: `mode-${mode}.js`,
-	},
-}))
-	.concat(
-		MODES.map(snippets => ({
-			mode: 'production',
-			entry: `brace/snippets/${snippets}`,
-			output: {
-				path: path.resolve(__dirname, 'dist'),
-				filename: `snippets-${snippets}.js`,
-			},
-		})),
-	)
-	.concat(
-		THEMES.map(theme => ({
-			mode: 'production',
-			entry: `brace/theme/${theme}`,
-			output: {
-				path: path.resolve(__dirname, 'dist'),
-				filename: `theme-${theme}.js`,
-			},
-		})),
-	);
diff --git a/packages/playground/webpack.config.dev.js b/packages/playground/webpack.config.dev.js
index d87f80c7b38..080650d90fa 100644
--- a/packages/playground/webpack.config.dev.js
+++ b/packages/playground/webpack.config.dev.js
@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('@talend/dynamic-cdn-webpack-plugin/src/resolve-pkg');
-const buildFormUtils = require('@talend/react-forms/build-utils');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const mockBackend = require('./mockBackend/server');
@@ -49,7 +48,7 @@ const patterns = PKGS.map(pkg => ({
 	from: path.resolve(getPath(pkg), 'dist'),
 	to: `${to(pkg)}/`,
 	info: { minimized: true },
-})).concat(buildFormUtils.getWebpackCopyConfig());
+}));
 
 const webpackConfig = {
 	plugins: [
diff --git a/tools/scripts-config-storybook-lib/.eslintignore b/tools/scripts-config-storybook-lib/.eslintignore
new file mode 100644
index 00000000000..42b6ec4a392
--- /dev/null
+++ b/tools/scripts-config-storybook-lib/.eslintignore
@@ -0,0 +1,2 @@
+.storybook-templates/main.js
+
diff --git a/yarn.lock b/yarn.lock
index 4fbd23421ec..c063b9ded83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1233,14 +1233,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/polyfill@^7.4.4":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
-  integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==
-  dependencies:
-    core-js "^2.6.5"
-    regenerator-runtime "^0.13.4"
-
 "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.12.11", "@babel/preset-env@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.5.tgz#3da66078b181f3d62512c51cf7014392c511504e"
@@ -5131,6 +5123,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.10.1, ace-builds@^1.4.14:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.10.1.tgz#612b78fabb0f2b6bce2d13ef9e44565d1fe01c6b"
+  integrity sha512-w8Xj6lZUtOYAquVYvdpZhb0GxXrZ+qpVfgj5LP2FwUbXE8fPrCmfu86FjwOiSphx/8PMbXXVldFLD2+RIXayyA==
+
 acorn-class-fields@^0.3.7:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz#a35122f3cc6ad2bb33b1857e79215677fcfdd720"
@@ -6205,11 +6202,6 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-brace@^0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
-  integrity sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==
-
 braces@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -7193,7 +7185,7 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.31.0.tgz#052fd9e82fbaaf86457f5db1fadcd06f15966ff2"
   integrity sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==
 
-core-js@^2.4.0, core-js@^2.6.5:
+core-js@^2.4.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
@@ -8280,7 +8272,7 @@ didyoumean@^1.2.1:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff-match-patch@^1.0.4:
+diff-match-patch@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
   integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
@@ -15509,14 +15501,13 @@ react-a11y@^0.3.4:
   dependencies:
     object.assign "^4.0.3"
 
-react-ace@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.6.0.tgz#a79457ef03c3b1f8d4fc598a003b1d6ad464f1a0"
-  integrity sha512-Jehhp8bxa8kqiXk07Jzy+uD5qZMBwo43O+raniGHjdX7Qk93xFkKaAz8LxtUVZPJGlRnV5ODMNj0qHwDSN+PBw==
+react-ace@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-10.1.0.tgz#d348eac2b16475231779070b6cd16768deed565f"
+  integrity sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==
   dependencies:
-    "@babel/polyfill" "^7.4.4"
-    brace "^0.11.1"
-    diff-match-patch "^1.0.4"
+    ace-builds "^1.4.14"
+    diff-match-patch "^1.0.5"
     lodash.get "^4.4.2"
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
@@ -16208,7 +16199,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==

From fbc72ef512a7d9b7ce98813d241f840f9b124eb4 Mon Sep 17 00:00:00 2001
From: Talend bot <build-travis-ci@talend.com>
Date: Wed, 26 Jul 2023 11:38:13 +0200
Subject: [PATCH 34/34] chore: prepare release (#4813)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/clever-snails-whisper.md |  5 -----
 .changeset/hungry-parrots-mate.md   |  5 -----
 .changeset/long-pigs-lie.md         |  9 ---------
 fork/module-to-cdn/CHANGELOG.md     |  6 ++++++
 fork/module-to-cdn/package.json     |  2 +-
 packages/components/CHANGELOG.md    |  6 ++++++
 packages/components/package.json    |  2 +-
 packages/forms/CHANGELOG.md         | 15 +++++++++++++++
 packages/forms/package.json         |  6 +++---
 9 files changed, 32 insertions(+), 24 deletions(-)
 delete mode 100644 .changeset/clever-snails-whisper.md
 delete mode 100644 .changeset/hungry-parrots-mate.md
 delete mode 100644 .changeset/long-pigs-lie.md

diff --git a/.changeset/clever-snails-whisper.md b/.changeset/clever-snails-whisper.md
deleted file mode 100644
index fe4c03d9414..00000000000
--- a/.changeset/clever-snails-whisper.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/module-to-cdn': minor
----
-
-feat: add ace-builds
diff --git a/.changeset/hungry-parrots-mate.md b/.changeset/hungry-parrots-mate.md
deleted file mode 100644
index 4a6e3f13cb1..00000000000
--- a/.changeset/hungry-parrots-mate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@talend/react-components': minor
----
-
-TDOPS-4856 - Fix List colors taken from DS tokens
diff --git a/.changeset/long-pigs-lie.md b/.changeset/long-pigs-lie.md
deleted file mode 100644
index 1371b2478c9..00000000000
--- a/.changeset/long-pigs-lie.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-'@talend/react-forms': minor
----
-
-Update react-ace lib and improve its lazy loading.
-Fix auto-completion.
-Remove the need to add a copy configuration in application to work.
-
-New library no more use *brace* but *ace-builds* instead.
diff --git a/fork/module-to-cdn/CHANGELOG.md b/fork/module-to-cdn/CHANGELOG.md
index d687a62d330..0266551203f 100644
--- a/fork/module-to-cdn/CHANGELOG.md
+++ b/fork/module-to-cdn/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/module-to-cdn
 
+## 9.9.0
+
+### Minor Changes
+
+-   f65073eb9: feat: add ace-builds
+
 ## 9.8.5
 
 ### Patch Changes
diff --git a/fork/module-to-cdn/package.json b/fork/module-to-cdn/package.json
index 4e38b3fafaf..989ff01b266 100644
--- a/fork/module-to-cdn/package.json
+++ b/fork/module-to-cdn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@talend/module-to-cdn",
-  "version": "9.8.5",
+  "version": "9.9.0",
   "description": "Get cdn config from npm module name",
   "license": "MIT",
   "repository": "https://github.com/Talend/ui",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 76c6c65a9fd..acaab259a97 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/react-components
 
+## 11.1.0
+
+### Minor Changes
+
+- c15088d3b: TDOPS-4856 - Fix List colors taken from DS tokens
+
 ## 11.0.0
 
 ### Major Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index d1ff7c28ec5..c8ca4373b5b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "11.0.0"
+  "version": "11.1.0"
 }
diff --git a/packages/forms/CHANGELOG.md b/packages/forms/CHANGELOG.md
index 89455cdfaa8..f60cbedf71e 100644
--- a/packages/forms/CHANGELOG.md
+++ b/packages/forms/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @talend/react-forms
 
+## 10.1.0
+
+### Minor Changes
+
+- f65073eb9: Update react-ace lib and improve its lazy loading.
+  Fix auto-completion.
+  Remove the need to add a copy configuration in application to work.
+
+  New library no more use _brace_ but _ace-builds_ instead.
+
+### Patch Changes
+
+- Updated dependencies [c15088d3b]
+  - @talend/react-components@11.1.0
+
 ## 10.0.0
 
 ### Major Changes
diff --git a/packages/forms/package.json b/packages/forms/package.json
index a8df5b1c0e9..ee72df105d0 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "@talend/assets-api": "^1.2.2",
     "@talend/json-schema-form-core": "1.1.1",
-    "@talend/react-components": "^11.0.0",
+    "@talend/react-components": "^11.1.0",
     "@talend/design-system": "^7.10.0",
     "@talend/design-tokens": "^2.7.3",
     "@talend/utils": "^2.5.1",
@@ -61,7 +61,7 @@
     "@talend/bootstrap-theme": "^8.0.0",
     "@talend/icons": "^6.58.1",
     "@talend/locales-tui-forms": "^9.0.1",
-    "@talend/react-components": "^11.0.0",
+    "@talend/react-components": "^11.1.0",
     "@talend/scripts-core": "^14.0.0",
     "@talend/scripts-config-react-webpack": "^15.4.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -88,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "10.0.0"
+  "version": "10.1.0"
 }