diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index f1ecf6150e4..e98873afc88 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -70,7 +70,6 @@
     "@types/react-is": "^16.7.2",
     "browser-sync": "^2.29.3",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "color-contrast-checker": "^2.1.0",
     "concurrently": "^7.6.0",
     "core-js": "^3.32.2",
     "cypress": "^12.17.4",
@@ -86,8 +85,7 @@
     "react-is": "^16.13.1",
     "react-router-dom": "~6.3.0",
     "storybook-addon-mdx-embed": "^1.1.1",
-    "storybook-docs-toc": "^1.7.0",
-    "use-overflow": "^1.2.0"
+    "storybook-docs-toc": "^1.7.0"
   },
   "peerDependencies": {
     "@talend/icons": "^6.52.0",
diff --git a/packages/storybook/custom.d.ts b/packages/storybook/custom.d.ts
new file mode 100644
index 00000000000..1ee6d41e8f0
--- /dev/null
+++ b/packages/storybook/custom.d.ts
@@ -0,0 +1,11 @@
+declare module 'color-contrast-checker';
+declare module '*.png';
+declare module '*.svg' {
+	const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+	export default content;
+}
+
+declare module '*.scss' {
+	const contents: Record<string, string>;
+	export default contents;
+}
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 10f3bf30ad6..4181c61f514 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build-storybook": "echo on hold",
     "start-storybook": "echo on hold",
-    "lint": "talend-scripts lint ./src ./storybook/docs ./storybook/blocks",
+    "lint": "talend-scripts lint",
     "start": "cross-env BROWSER=none talend-scripts start-storybook -p 6006 --docs"
   },
   "repository": {
@@ -24,12 +24,15 @@
     "@storybook/react": "^7.4.1",
     "@talend/design-system": "^7.15.0",
     "@talend/design-tokens": "^2.9.0",
+    "@talend/icons": "^6.59.0",
     "algoliasearch": "^4.17.2",
     "classnames": "^2.3.1",
+    "color-contrast-checker": "^2.1.0",
     "figma-js": "^1.16.0",
     "react-hook-form": "^6.15.8",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "use-overflow": "^1.2.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.4.1",
diff --git a/packages/storybook/src/Welcome.module.scss b/packages/storybook/src/Welcome.module.scss
index 65fb952fd92..5a57bbe4a4c 100644
--- a/packages/storybook/src/Welcome.module.scss
+++ b/packages/storybook/src/Welcome.module.scss
@@ -79,7 +79,7 @@
 		}
 
 		.cls-4 {
-			fill: #FB5460;
+			fill: #fb5460;
 		}
 
 		.cls-45,
@@ -89,7 +89,7 @@
 
 		.cls-31,
 		.cls-6 {
-			fill: #FF6D70;
+			fill: #ff6d70;
 		}
 
 		.cls-7 {
@@ -142,7 +142,7 @@
 		}
 
 		.cls-19 {
-			fill: #E1E5F0;
+			fill: #e1e5f0;
 		}
 
 		.cls-20 {
@@ -178,7 +178,7 @@
 		}
 
 		.cls-28 {
-			fill: #0075C7;
+			fill: #0075c7;
 		}
 
 		.cls-29 {
@@ -202,7 +202,7 @@
 		}
 
 		.cls-34 {
-			fill: #FDD3B5;
+			fill: #fdd3b5;
 		}
 
 		.cls-35 {
@@ -214,7 +214,7 @@
 		}
 
 		.cls-37 {
-			fill: #1A2E35;
+			fill: #1a2e35;
 		}
 
 		.cls-38 {
@@ -226,7 +226,7 @@
 		}
 
 		.cls-40 {
-			fill: #2B454E;
+			fill: #2b454e;
 		}
 
 		.cls-41 {
@@ -293,7 +293,7 @@
 		}
 
 		.cls-56 {
-			fill: #E96065;
+			fill: #e96065;
 		}
 	}
 }
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/Card/Card.module.scss b/packages/storybook/src/docs/tokensDocHelpers/components/Card/Card.module.scss
index 0d549859511..ffbb171fc61 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/Card/Card.module.scss
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/Card/Card.module.scss
@@ -68,7 +68,7 @@
 		position: relative;
 		color: tokens.$coral-color-accent-text;
 
-		&:after {
+		&::after {
 			content: 'hover me';
 			position: absolute;
 			bottom: 0;
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx b/packages/storybook/src/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
index 718dd432a5b..03cee2edcb9 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
@@ -210,4 +210,5 @@ const CompositionListItem = forwardRef(
 	},
 );
 
+CompositionListItem.displayName = 'CompositionListItem';
 export default CompositionListItem;
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/BreakpointScale/BreakpointScale.module.scss b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/BreakpointScale/BreakpointScale.module.scss
index 935fc8a69c1..d81095c7642 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/BreakpointScale/BreakpointScale.module.scss
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/BreakpointScale/BreakpointScale.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
 @use '@talend/design-tokens/lib/tokens';
 
 .breakpointScale {
@@ -36,8 +37,8 @@
 		color: tokens.$coral-color-accent-text-strong;
 		scrollbar-width: thin;
 
-		&:before,
-		&:after {
+		&::before,
+		&::after {
 			content: '';
 			display: block;
 			width: calc(#{tokens.$coral-sizing-l} * 2);
@@ -49,21 +50,21 @@
 			transition: opacity tokens.$coral-transition-fast;
 		}
 
-		&:before {
+		&::before {
 			left: 0;
 			background: linear-gradient(to right, #{tokens.$coral-color-neutral-background}, transparent);
 		}
 
-		&:after {
+		&::after {
 			right: 0;
 			background: linear-gradient(to left, #{tokens.$coral-color-neutral-background}, transparent);
 		}
 
-		&__overflowRight:after {
+		&__overflowRight::after {
 			opacity: 1;
 		}
 
-		&__overflowLeft:before {
+		&__overflowLeft::before {
 			opacity: 1;
 		}
 
@@ -124,6 +125,7 @@
 				border-top: tokens.$coral-border-m-solid tokens.$coral-color-accent-border-hover;
 			}
 		}
+
 		&:active {
 			.icons {
 				color: tokens.$coral-color-accent-text-strong-active;
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/ColorScale/ColorScale.module.scss b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/ColorScale/ColorScale.module.scss
index 64aab4c6d18..263c80cb2d7 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/ColorScale/ColorScale.module.scss
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/ColorScale/ColorScale.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
 @use '@talend/design-tokens/lib/tokens';
 
 .colorScale {
@@ -76,6 +77,7 @@
 				background: tokens.$coral-color-accent-background-weak-hover;
 			}
 		}
+
 		&:active {
 			.icons {
 				color: tokens.$coral-color-accent-text-strong-active;
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx
index 5b28051eeed..c86e3c1497e 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx
@@ -32,8 +32,8 @@ const TokensDefinitionList = ({ tokens }: TokensProps) => {
 				{Object.values(filteredTokens).map((entries: Token[], index) => (
 					<Tabs.TabPanel key={index}>
 						<StackVertical gap="S">
-							{entries.map((token, index) => (
-								<DefinitionListItemColor key={`${token.name}-${index}`} token={token} />
+							{entries.map((token, jindex) => (
+								<DefinitionListItemColor key={`${token.name}-${jindex}`} token={token} />
 							))}
 						</StackVertical>
 					</Tabs.TabPanel>
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/CopyValue.module.scss b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/CopyValue.module.scss
index eb9e9a422f0..17090f8a7ec 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/CopyValue.module.scss
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/CopyValue.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
 @use '@talend/design-tokens/lib/tokens';
 
 .copyButton {
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/DefinitionListItem.module.scss b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/DefinitionListItem.module.scss
index ad4b808d300..34eb5c2805b 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/DefinitionListItem.module.scss
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListItem/DefinitionListItem.module.scss
@@ -51,7 +51,7 @@
 			background: transparent;
 			word-break: break-word;
 			hyphens: auto;
-			display: -webkit-box;
+			display: box;
 			-webkit-line-clamp: 2;
 			-webkit-box-orient: vertical;
 			overflow: hidden;
diff --git a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListTypography.tsx b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListTypography.tsx
index 087bd252a10..6afd37abe11 100644
--- a/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListTypography.tsx
+++ b/packages/storybook/src/docs/tokensDocHelpers/components/DefinitionList/DefinitionListTypography.tsx
@@ -18,8 +18,8 @@ const DefinitionListTypography = ({ tokens }: TokensProps) => {
 				<StackVertical gap="M" key={index}>
 					<h2 className={styles.title}>{Object.keys(filteredTokens)[index]}</h2>
 					<StackVertical gap="S">
-						{entries.map((token, index) => (
-							<DefinitionListItemTypography key={`${token.name}-${index}`} token={token} />
+						{entries.map((token, jindex) => (
+							<DefinitionListItemTypography key={`${token.name}-${jindex}`} token={token} />
 						))}
 					</StackVertical>
 				</StackVertical>