chore: polish tokens

Talend · Sep 22, 2023 · 6cf507c · 6cf507c
1 parent 7025700
commit 6cf507c
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 20 deletions.
diff --git a/packages/design-docs/src/tokens/About.mdx → packages/design-docs/src/tokens/A-About.mdx b/packages/design-docs/src/tokens/About.mdx → packages/design-docs/src/tokens/A-About.mdx
diff --git a/packages/design-docs/src/tokens/A-Colors.mdx → ...ages/design-docs/src/tokens/AB-Colors.mdx b/packages/design-docs/src/tokens/A-Colors.mdx → ...ages/design-docs/src/tokens/AB-Colors.mdx
diff --git a/...gn-docs/src/tokens/A-ColorComposition.mdx → ...n-docs/src/tokens/AC-ColorComposition.mdx b/...gn-docs/src/tokens/A-ColorComposition.mdx → ...n-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.