From 6cf507c2b8736cc552bf9359b9c3b3e8798ebb94 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Fri, 22 Sep 2023 15:45:47 +0200
Subject: [PATCH] chore: polish tokens

---
 .../src/tokens/{About.mdx => A-About.mdx}     |  0
 .../tokens/{A-Colors.mdx => AB-Colors.mdx}    |  0
 ...omposition.mdx => AC-ColorComposition.mdx} |  0
 .../src/tokens/ColorComposition.module.scss   |  6 +--
 packages/design-docs/src/tokens/Mesures.mdx   | 38 ++++++++++++++-----
 packages/design-docs/src/tokens/Radius.mdx    | 15 +++++++-
 .../design-docs/src/tokens/TokenValue.tsx     | 17 ++++++---
 .../src/stories/messaging/Tooltip.mdx         |  2 +-
 8 files changed, 58 insertions(+), 20 deletions(-)
 rename packages/design-docs/src/tokens/{About.mdx => A-About.mdx} (100%)
 rename packages/design-docs/src/tokens/{A-Colors.mdx => AB-Colors.mdx} (100%)
 rename packages/design-docs/src/tokens/{A-ColorComposition.mdx => AC-ColorComposition.mdx} (100%)

diff --git a/packages/design-docs/src/tokens/About.mdx b/packages/design-docs/src/tokens/A-About.mdx
similarity index 100%
rename from packages/design-docs/src/tokens/About.mdx
rename to packages/design-docs/src/tokens/A-About.mdx
diff --git a/packages/design-docs/src/tokens/A-Colors.mdx b/packages/design-docs/src/tokens/AB-Colors.mdx
similarity index 100%
rename from packages/design-docs/src/tokens/A-Colors.mdx
rename to packages/design-docs/src/tokens/AB-Colors.mdx
diff --git a/packages/design-docs/src/tokens/A-ColorComposition.mdx b/packages/design-docs/src/tokens/AC-ColorComposition.mdx
similarity index 100%
rename from packages/design-docs/src/tokens/A-ColorComposition.mdx
rename to packages/design-docs/src/tokens/AC-ColorComposition.mdx
diff --git a/packages/design-docs/src/tokens/ColorComposition.module.scss b/packages/design-docs/src/tokens/ColorComposition.module.scss
index 1fd2dfb313..ec4eba69fe 100644
--- a/packages/design-docs/src/tokens/ColorComposition.module.scss
+++ b/packages/design-docs/src/tokens/ColorComposition.module.scss
@@ -7,14 +7,14 @@
 	position: relative;
 
 	display: inline-flex;
-	border-radius: var(--coral-radius-m, 0.8rem);
+	border-radius: tokens.$coral-radius-m;
 	min-height: 8.4rem;
 }
 
 .score {
 	position: absolute;
-	top: var(--coral-spacing-xs, 0.8rem);
-	left: var(--coral-spacing-xs, 0.8rem);
+	top: tokens.$coral-spacing-xs;
+	left: tokens.$coral-spacing-xs;
 }
 
 .grid {
diff --git a/packages/design-docs/src/tokens/Mesures.mdx b/packages/design-docs/src/tokens/Mesures.mdx
index f5a1c2b623..d4b6e96333 100644
--- a/packages/design-docs/src/tokens/Mesures.mdx
+++ b/packages/design-docs/src/tokens/Mesures.mdx
@@ -21,19 +21,37 @@ import { TokenList } from './TokenValue';
 	type="measure"
 	category="spacing"
 >
-	<div
-		style={{
-			border: `${tokens.coralBorderSDashed} ${tokens.coralColorAccentBorder}`,
-			borderRadius: tokens.coralRadiusM,
-			backgroundColor: tokens.coralColorNeutralBackground,
-			width: '100%',
-			minHeight: '100%',
-		}}
-	/>
+	{token => (
+		<div
+			style={{
+				border: `${tokens.coralBorderSDashed} ${tokens.coralColorAccentBorder}`,
+				borderRadius: tokens.coralRadiusM,
+				backgroundColor: tokens.coralColorNeutralBackground,
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				width: '100%',
+				minHeight: '100%',
+			}}
+		>
+			{token.value}
+		</div>
+	)}
 </TokenList>
 
 ## Sizing
 
 <TokenList style={token => ({})} type="measure" category="sizing">
-	{token => `${token.value}`}
+	{token => (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				minHeight: '100%',
+			}}
+		>
+			{token.value}
+		</div>
+	)}
 </TokenList>
diff --git a/packages/design-docs/src/tokens/Radius.mdx b/packages/design-docs/src/tokens/Radius.mdx
index aa602ea5e8..5669bed966 100644
--- a/packages/design-docs/src/tokens/Radius.mdx
+++ b/packages/design-docs/src/tokens/Radius.mdx
@@ -18,4 +18,17 @@ import { TokenList } from './TokenValue';
 	})}
 	type="radius"
 	sortOnValue
-></TokenList>
+>
+	{token => (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				minHeight: '100%',
+			}}
+		>
+			{token.value}
+		</div>
+	)}
+</TokenList>
diff --git a/packages/design-docs/src/tokens/TokenValue.tsx b/packages/design-docs/src/tokens/TokenValue.tsx
index 1609660b65..51524638b5 100644
--- a/packages/design-docs/src/tokens/TokenValue.tsx
+++ b/packages/design-docs/src/tokens/TokenValue.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable @talend/import-depth */
 import { ReactNode, useState } from 'react';
-import { SizedIcon, StackVertical, StackHorizontal, ButtonTertiary } from '@talend/design-system';
+import {
+	SizedIcon,
+	StackVertical,
+	StackHorizontal,
+	ButtonTertiary,
+	Tooltip,
+} from '@talend/design-system';
 import tokens from '@talend/design-tokens';
 import dictionary from '@talend/design-tokens/lib/light/dictionary';
 import * as utils from './TokenFormatter';
@@ -95,10 +101,11 @@ export function TokenList({
 						>
 							{typeof children === 'function' ? children(token) : children}
 						</div>
-						<dl style={{ margin: 0 }}>
-							<dt>{utils.getDisplayName(token.name)}</dt>
-							<dd style={{ width: 300 }}>{token.description}</dd>
-						</dl>
+						<div style={{ width: tokens.coralSizingXxxl, paddingTop: tokens.coralSpacingL }}>
+							<Tooltip title={token.description}>
+								<span>{utils.getDisplayName(token.name)}</span>
+							</Tooltip>
+						</div>
 						<ul style={{ listStyleType: 'none' }}>
 							<li>
 								<TokenValue lang="SCSS">{utils.getScssName(token.name)}</TokenValue>
diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx
index 37c1e1656d..9ab499867a 100644
--- a/packages/design-system/src/stories/messaging/Tooltip.mdx
+++ b/packages/design-system/src/stories/messaging/Tooltip.mdx
@@ -74,7 +74,7 @@ Otherwise, you’ll just add information pollution to your UI and waste the time
 	<Story story={Stories.Usage} />
 </Canvas>
 
-<ArgTypes story={Stories.Usage} />
+<ArgTypes of={Stories.Usage} />
 
 For more info about Tooltip props, refer to [documentation](https://reakit.io/docs/tooltip/) of Reakit.