fix(generate tokens): prefix tokens with a t_ (#11002)

tlabaj · web-flow · commit 0dac6b88b9f5 · 2024-09-18T17:06:19.000-04:00
* fix(generate tokens): prefix tokens with a t_

* fix lint issues

* update tokens in codebase

* fix unit test

* fix demos
diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md
diff --git a/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts
@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/global_font_weight_heading_bold';
+import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold';
 import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill';
 
 /**
@@ -12,6 +12,6 @@ export const BoxPlotTooltipStyles = {
   },
   label: {
     fill: chart_voronoi_labels_Fill.var,
-    fontWeight: global_font_weight_heading_bold.value
+    fontWeight: t_global_font_weight_heading_bold.value
   } as any
 };
diff --git a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts
@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/global_font_weight_heading_bold';
+import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold';
 import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill';
 
 /**
@@ -12,6 +12,6 @@ export const LegendTooltipStyles = {
   },
   label: {
     fill: chart_voronoi_labels_Fill.var,
-    fontWeight: global_font_weight_heading_bold.value
+    fontWeight: t_global_font_weight_heading_bold.value
   } as any
 };
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';
diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
@@ -5,13 +5,13 @@ cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx
@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_font_size_4xl.name}
+    {t_global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_font_size_3xl.name}
+    {t_global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_font_size_2xl.name}
+    {t_global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_font_size_xl.name}
+    {t_global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_font_size_lg.name}
+    {t_global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_font_size_md.name}
+    {t_global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_font_size_sm.name}
+    {t_global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { RefObject } from 'react';
-import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
-import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
+import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl';
 
 export interface ToolbarContextProps {
   isExpanded: boolean;
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
@@ -15,7 +15,7 @@ import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_colo
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
-import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
+import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx
@@ -27,7 +27,7 @@ import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
+import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
   const [drawerExpanded, setDrawerExpanded] = React.useState(false);
@@ -176,7 +176,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Operators</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_text_color_subtle.var }}>1 degraded</span>
+                <span style={{ color: t_global_text_color_subtle.var }}>1 degraded</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -193,7 +193,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Image Vulnerabilities</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_text_color_subtle.var }}>0 vulnerabilities</span>
+                <span style={{ color: t_global_text_color_subtle.var }}>0 vulnerabilities</span>
               </FlexItem>
             </Flex>
           </Flex>
diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts
@@ -1,14 +1,14 @@
-import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm';
-import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
-import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
-
-import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_sm';
-import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_md';
-import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_lg';
-import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_xl';
-import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_2xl';
+import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_sm';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
+import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl';
+
+import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_sm';
+import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_md';
+import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_lg';
+import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_xl';
+import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_2xl';
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip, Grid, GridItem, PageSection, Content } from '@patternfly/react-core';
-import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md';
-import labelFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md';
+import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 import * as IconsModule from '@patternfly/react-icons/dist/esm';
 
 const iconsPage = () => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx
@@ -30,7 +30,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 /* eslint-disable camelcase */
-import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
+import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default';
 
 export const TableComposableDemo = () => {
   const ComposableTableBasic = () => {
@@ -143,7 +143,7 @@ export const TableComposableDemo = () => {
           {rows.map((row, rowIndex) => {
             const isOddRow = (rowIndex + 1) % 2;
             const customStyle = {
-              borderLeft: `3px solid ${global_color_brand_default.var}`
+              borderLeft: `3px solid ${t_global_color_brand_default.var}`
             };
             return (
               <Tr
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
@@ -5,7 +5,7 @@ import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-tab
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 /* eslint-disable camelcase */
-import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
+import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default';
 
 interface ITableRowWrapperDemoState {
   rows: IRow[];
@@ -36,7 +36,7 @@ export class TableRowWrapperDemo extends Component<TableProps, ITableRowWrapperD
       const isExpanded = rest.row ? rest.row.isExpanded : false;
       const isOddRow = (rowProps.rowIndex + 1) % 2;
       const customStyle = {
-        borderLeft: `3px solid ${global_color_brand_default.var}`
+        borderLeft: `3px solid ${t_global_color_brand_default.var}`
       };
       return (
         <tr
diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md
@@ -60,7 +60,7 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
-import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
+import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 ## Table examples
 
@@ -172,6 +172,7 @@ This selectable rows feature is intended for use when a table is used to present
 This example shows a table with editable rows. Cells in a row can be edited after clicking on the edit icon.
 
 ```ts file="TableEditable.tsx"
+
 ```
 
 ### Actions
diff --git a/packages/react-table/src/components/Table/examples/TableMisc.tsx b/packages/react-table/src/components/Table/examples/TableMisc.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
-import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
+import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 interface Repository {
   name: string;
@@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: global_background_color_secondary_default.var
+            backgroundColor: t_global_background_color_secondary_default.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 /* eslint-disable camelcase */
-import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
+import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default';
 
 interface Repository {
   name: string;
@@ -32,7 +32,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
   const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     const customStyle = {
-      borderLeft: `3px solid ${global_color_brand_default.var}`
+      borderLeft: `3px solid ${t_global_color_brand_default.var}`
     };
     return (
       <tr
diff --git a/packages/react-table/src/deprecated/components/Table/examples/Table.md b/packages/react-table/src/deprecated/components/Table/examples/Table.md
@@ -31,7 +31,7 @@ SelectOption as NewSelectOption,
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
+import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default';
 
 ## Table Columns
 
diff --git a/packages/react-tokens/README.md b/packages/react-tokens/README.md
@@ -22,7 +22,7 @@ All Tokens and their corresponding values can be viewed on the
 ## Examples
 
 ```js
-import global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/global_background_color_primary_default';
+import t_global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_primary_default';
 ```
 
 #### Each token as three properties
@@ -32,11 +32,11 @@ import global_background_color_primary_default from '@patternfly/react-tokens/di
 - `var`: The property name wrapped in `var()`.
 
 ```js
-import global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/global_background_color_primary_default';
+import t_global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_primary_default';
 
-global_background_color_primary_default.name === '--pf-t--global--background--color--primary--default'; // true
-global_background_color_primary_default.value === '#fff'; // true
-global_background_color_primary_default.var === 'var(--pf-t--global--background--color--primary--default)'; // true
+t_global_background_color_primary_default.name === '--pf-t--global--background--color--primary--default'; // true
+t_global_background_color_primary_default.value === '#fff'; // true
+t_global_background_color_primary_default.var === 'var(--pf-t--global--background--color--primary--default)'; // true
 ```
 
 [token-page]: https://react-staging.patternfly.org/developer-resources/global-css-variables
diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs
@@ -10,7 +10,7 @@ const version = 'v6';
 
 // Helpers
 const formatCustomPropertyName = (key) =>
-  key.replace(`--pf-${version}-`, '').replace('--pf-t--', '').replace(/-+/g, '_');
+  key.replace(`--pf-${version}-`, '').replace('--pf-t--', 't_').replace(/-+/g, '_');
 
 const getRegexMatches = (string, regex) => {
   const res = {};
diff --git a/packages/react-tokens/tests/react-tokens.test.js b/packages/react-tokens/tests/react-tokens.test.js
@@ -2,6 +2,6 @@ const reactTokens = require('@patternfly/react-tokens');
 
 // Test importing CJS tokens
 test('CJS token', () => {
-  const { color_black: black } = reactTokens;
+  const { t_color_black: black } = reactTokens;
   expect(black.value).toBeTruthy();
 });
