diff --git a/packages/module/patternfly-docs/content/tokensTable.js b/packages/module/patternfly-docs/content/tokensTable.js
index c47822d..8d2fd87 100644
--- a/packages/module/patternfly-docs/content/tokensTable.js
+++ b/packages/module/patternfly-docs/content/tokensTable.js
@@ -43,8 +43,9 @@ const getTokenChain = (themeTokenData) => {
return tokenChain;
};
-const showTokenChain = (themeTokenData) => {
- const tokenChain = getTokenChain(themeTokenData);
+const showTokenChain = (themeTokenData, hasReferences) => {
+ // Show final value if isColorToken but no references - otherwise color value not displayed in table
+ const tokenChain = hasReferences ? getTokenChain(themeTokenData) : [themeTokenData.value];
return (
{tokenChain.map((nextValue, index) => (
@@ -158,6 +159,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
const hasReferences = tokenThemesArr.some(([_themeName, themeToken]) =>
themeToken.hasOwnProperty('references')
);
+ const isColorToken = tokenThemesArr[0][1].type === 'color';
const tokenDescription = tokenThemesArr[0][1].description;
return (
@@ -166,7 +168,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
{/* Expandable row icon */}
{
{/* Expandable token chain */}
- {hasReferences && isTokenExpanded(tokenName) && (
+ {(hasReferences || isColorToken) && isTokenExpanded(tokenName) && (
|
|
@@ -223,7 +225,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
{tokenThemesArr.map(([themeName, themeToken]) => (
<>
{formatThemeText(themeName)}:
- {showTokenChain(themeToken)}
+ {showTokenChain(themeToken, hasReferences)}
>
))}
|