fix(www): size variables were missing from listing after #3866

unekinn · unekinn · commit 5b4e8218d94d · 2025-09-19T12:30:36.000+02:00
diff --git a/.changeset/true-sites-nail.md b/.changeset/true-sites-nail.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/apps/www/app/_components/tokens/semantic/semantic-table.tsx b/apps/www/app/_components/tokens/semantic/semantic-table.tsx
@@ -29,7 +29,7 @@ const groupedByPathIndex = (index = 0) =>
   groupBy((token: PreviewToken) => token.path[index] || 'rest');
 
 const getValuePreview = (variable: string, value: string, size?: string) => {
-  if (/^--ds-size.*\d$/.test(variable)) {
+  if (/^--ds-size.*(\d+|unit)$/.test(variable)) {
     return <SizePreview value={value} size={size} />;
   }
   if (/^--ds-border-radius(?!.*(scale|base)$)/.test(variable)) {
diff --git a/apps/www/app/_components/tokens/token-list/token-list.tsx b/apps/www/app/_components/tokens/token-list/token-list.tsx
@@ -12,6 +12,7 @@ import { capitalizeString } from '~/_utils/string-helpers';
 import { ColorTokensTable } from '../color/color-table';
 import colorTokens from '../design-tokens/color.json';
 import semanticTokens from '../design-tokens/semantic.json';
+import sizeTokens from '../design-tokens/size.json';
 import typeScaleTokens from '../design-tokens/type-scale.json';
 import typographyTokens from '../design-tokens/typography.json';
 import { SemanticTokensTable } from '../semantic/semantic-table';
@@ -114,6 +115,7 @@ export const TokenList = () => {
             </Heading>
             <Paragraph>{t('token-preview.size.description')}</Paragraph>
             <div className={classes.section}>
+              <SemanticTokensTable tokens={sizeTokens} />
               <SemanticTokensTable tokens={filteredSemanticTokens} />
             </div>
           </>

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const groupedByPathIndex = (index = 0) =>`
`29`	`29`	`groupBy((token: PreviewToken) => token.path[index] \|\| 'rest');`
`30`	`30`
`31`	`31`	`const getValuePreview = (variable: string, value: string, size?: string) => {`
`32`		`- if (/^--ds-size.*\d$/.test(variable)) {`
	`32`	`+ if (/^--ds-size.*(\d+\|unit)$/.test(variable)) {`
`33`	`33`	`return <SizePreview value={value} size={size} />;`
`34`	`34`	`}`
`35`	`35`	`if (/^--ds-border-radius(?!.*(scale\|base)$)/.test(variable)) {`