From 8603b8acde0d8a12c4ce341a48899dc49f84609e Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Thu, 27 Jul 2023 11:38:57 +0200
Subject: [PATCH] fix: some tokens

---
 .../docs/tokensDocHelpers/TokenFormatter.ts       |  6 +++---
 .../components/Card/CardComposition.tsx           | 13 ++++++++-----
 .../CompositionList/CompositionListItem.tsx       | 15 ++++++---------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/storybook/.storybook/docs/tokensDocHelpers/TokenFormatter.ts b/packages/storybook/.storybook/docs/tokensDocHelpers/TokenFormatter.ts
index d5ea336e504..37b4a9c7fec 100644
--- a/packages/storybook/.storybook/docs/tokensDocHelpers/TokenFormatter.ts
+++ b/packages/storybook/.storybook/docs/tokensDocHelpers/TokenFormatter.ts
@@ -23,7 +23,7 @@ export const getDisplayName = (name: string) => {
 	const nameArray = name
 		.replace(/^coral/i, '')
 		.replace(/^color/i, '')
-		.split(/(?=[A-Z])/);
+		.split(/(?=[A-Z0])/);
 	return nameArray
 		.map((word: string, index: number, words: string[]) => {
 			let adapted = tShirtSizes.some(tShirtSize => word.toLocaleLowerCase() === tShirtSize)
@@ -41,7 +41,7 @@ export const getDisplayName = (name: string) => {
 
 export const getScssName = (name?: string) => {
 	if (!name) return '';
-	const nameArray = name.split(/(?=[A-Z])/);
+	const nameArray = name.split(/(?=[A-Z0])/);
 	return `tokens.$${nameArray
 		.map((word: string, index: number, words: string[]) => {
 			let adapted = word.toLocaleLowerCase();
@@ -56,7 +56,7 @@ export const getScssName = (name?: string) => {
 export const getCssName = (token: Token) => {
 	if (!token.name) return '';
 	const { name, value } = token;
-	const nameArray = name.split(/(?=[A-Z])/);
+	const nameArray = name.split(/(?=[A-Z0])/);
 	return `var(--${nameArray
 		.map((word: string, index: number, words: string[]) => {
 			let adapted = word.toLocaleLowerCase();
diff --git a/packages/storybook/.storybook/docs/tokensDocHelpers/components/Card/CardComposition.tsx b/packages/storybook/.storybook/docs/tokensDocHelpers/components/Card/CardComposition.tsx
index 84dcf01e2c4..b1279b593eb 100644
--- a/packages/storybook/.storybook/docs/tokensDocHelpers/components/Card/CardComposition.tsx
+++ b/packages/storybook/.storybook/docs/tokensDocHelpers/components/Card/CardComposition.tsx
@@ -5,6 +5,7 @@ import { ColorToken, GradientToken } from '../../../../../src/tokens/types';
 import ColorChecker from '../../ColorChecker';
 
 import styles from './Card.module.scss';
+import { getCssName } from '../../TokenFormatter';
 
 function CardComposition({
 	backgroundColor,
@@ -28,14 +29,16 @@ function CardComposition({
 				[styles.previewBox__composition__isHover]: isHover,
 			})}
 			style={{
-				background:
-					backgroundColor?.type === 'gradient' ? backgroundColor.value : backgroundColor.hsla,
-				borderColor: borderColor.hsla,
-				color: textColor.hsla,
+				background: getCssName(backgroundColor),
+				borderColor: getCssName(borderColor),
+				color: getCssName(textColor),
+				// backgroundColor?.type === 'gradient' ? backgroundColor.value : backgroundColor.hsla,
+				// borderColor: borderColor.hsla,
+				// color: textColor.hsla,
 			}}
 		>
 			<p className={styles.previewBox__composition_copy}>
-				<span style={{ color: iconColor?.hsla || textColor.hsla }}>
+				<span style={{ color: getCssName(iconColor) }}>
 					<SizedIcon size="S" name="overview" />
 				</span>
 				{isHover && <span>On hover</span>}
diff --git a/packages/storybook/.storybook/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx b/packages/storybook/.storybook/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
index 9653073d79e..718dd432a5b 100644
--- a/packages/storybook/.storybook/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
+++ b/packages/storybook/.storybook/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx
@@ -5,6 +5,7 @@ import { StackHorizontal, StackVertical } from '@talend/design-system';
 import CardComposition from '../Card/CardComposition';
 
 import styles from './CompositionListItem.module.scss';
+import { getCssName } from '../../TokenFormatter';
 
 type CompositionListItemPropTypes = {
 	background: string;
@@ -50,7 +51,7 @@ const CompositionListItem = forwardRef(
 												<StackHorizontal gap="XS" align="center">
 													<span
 														style={{
-															background: tokenCodex[t.icon]?.hsla || tokenCodex[t.icon]?.value,
+															background: getCssName(tokenCodex[t.icon]),
 														}}
 														className={styles.colorSwatch}
 													/>
@@ -63,7 +64,7 @@ const CompositionListItem = forwardRef(
 												<StackHorizontal gap="XS" align="center">
 													<span
 														style={{
-															background: tokenCodex[t.color]?.hsla || tokenCodex[t.color]?.value,
+															background: getCssName(tokenCodex[t.color]),
 														}}
 														className={styles.colorSwatch}
 													/>
@@ -76,7 +77,7 @@ const CompositionListItem = forwardRef(
 												<StackHorizontal gap="XS" align="center">
 													<span
 														style={{
-															background: tokenCodex[t.border]?.hsla || tokenCodex[t.border]?.value,
+															background: getCssName(tokenCodex[t.border]),
 														}}
 														className={styles.colorSwatch}
 													/>
@@ -160,9 +161,7 @@ const CompositionListItem = forwardRef(
 														<StackHorizontal gap="XS" align="center">
 															<span
 																style={{
-																	background:
-																		tokenCodex[`${t.icon}Active`]?.hsla ||
-																		tokenCodex[`${t.color}Active`]?.value,
+																	background: getCssName(tokenCodex[`${t.icon}Active`]),
 																}}
 																className={styles.colorSwatch}
 															/>
@@ -175,9 +174,7 @@ const CompositionListItem = forwardRef(
 														<StackHorizontal gap="XS" align="center">
 															<span
 																style={{
-																	background:
-																		tokenCodex[`${t.color}Active`]?.hsla ||
-																		tokenCodex[`${t.color}Active`]?.value,
+																	background: getCssName(tokenCodex[`${t.color}Active`]),
 																}}
 																className={styles.colorSwatch}
 															/>