fix: some tokens

Talend · Jul 27, 2023 · 8603b8a · 8603b8a
1 parent c7943e1
commit 8603b8a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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/...ybook/.storybook/docs/tokensDocHelpers/components/CompositionList/CompositionListItem.tsx b/...ybook/.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}
 															/>