diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md
index d4ded665448..5b09528bd97 100644
--- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md
+++ b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md
@@ -1,30 +1,26 @@
 ---
 id: Bar chart
 section: charts
-propComponents: [
-  'Chart',
-  'ChartAxis',
-  'ChartBar',
-  'ChartGroup',
-  'ChartLabel',
-  'ChartVoronoiContainer'
-]
+propComponents: ['Chart', 'ChartAxis', 'ChartBar', 'ChartGroup', 'ChartLabel', 'ChartVoronoiContainer']
 hideDarkMode: true
 ---
 
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts';
 import { VictoryZoomContainer } from 'victory-zoom-container';
-import global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/global_color_status_danger_100';
-import global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/global_color_status_info_100';
-import global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/global_color_status_warning_100';
+import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
+import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
+import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
 
 ## Introduction
+
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
 
 PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
 
 ## Examples
+
 ### Basic with right aligned legend
+
 ```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
@@ -33,8 +29,10 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@
   <Chart
     ariaDesc="Average number of pets"
     ariaTitle="Bar chart example"
-    containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-    domain={{y: [0,9]}}
+    containerComponent={
+      <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+    }
+    domain={{ y: [0, 9] }}
     domainPadding={{ x: [30, 25] }}
     legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
     legendOrientation="vertical"
@@ -52,13 +50,41 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@
     <ChartAxis />
     <ChartAxis dependentAxis showGrid />
     <ChartGroup offset={11}>
-      <ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
-      <ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
-      <ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
-      <ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
+      <ChartBar
+        data={[
+          { name: 'Cats', x: '2015', y: 1 },
+          { name: 'Cats', x: '2016', y: 2 },
+          { name: 'Cats', x: '2017', y: 5 },
+          { name: 'Cats', x: '2018', y: 3 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Dogs', x: '2015', y: 2 },
+          { name: 'Dogs', x: '2016', y: 1 },
+          { name: 'Dogs', x: '2017', y: 7 },
+          { name: 'Dogs', x: '2018', y: 4 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Birds', x: '2015', y: 4 },
+          { name: 'Birds', x: '2016', y: 4 },
+          { name: 'Birds', x: '2017', y: 9 },
+          { name: 'Birds', x: '2018', y: 7 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Mice', x: '2015', y: 3 },
+          { name: 'Mice', x: '2016', y: 3 },
+          { name: 'Mice', x: '2017', y: 8 },
+          { name: 'Mice', x: '2018', y: 5 }
+        ]}
+      />
     </ChartGroup>
   </Chart>
-</div>
+</div>;
 ```
 
 ### Purple with bottom aligned legend
@@ -170,16 +196,45 @@ import { VictoryZoomContainer } from 'victory-zoom-container';
     <ChartAxis />
     <ChartAxis dependentAxis showGrid />
     <ChartGroup offset={11} horizontal>
-      <ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
-      <ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
-      <ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
-      <ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
+      <ChartBar
+        data={[
+          { name: 'Cats', x: '2015', y: 1 },
+          { name: 'Cats', x: '2016', y: 2 },
+          { name: 'Cats', x: '2017', y: 5 },
+          { name: 'Cats', x: '2018', y: 3 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Dogs', x: '2015', y: 2 },
+          { name: 'Dogs', x: '2016', y: 1 },
+          { name: 'Dogs', x: '2017', y: 7 },
+          { name: 'Dogs', x: '2018', y: 4 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Birds', x: '2015', y: 4 },
+          { name: 'Birds', x: '2016', y: 4 },
+          { name: 'Birds', x: '2017', y: 9 },
+          { name: 'Birds', x: '2018', y: 7 }
+        ]}
+      />
+      <ChartBar
+        data={[
+          { name: 'Mice', x: '2015', y: 3 },
+          { name: 'Mice', x: '2016', y: 3 },
+          { name: 'Mice', x: '2017', y: 8 },
+          { name: 'Mice', x: '2018', y: 5 }
+        ]}
+      />
     </ChartGroup>
   </Chart>
-</div>
+</div>;
 ```
 
 ### Single with right aligned legend
+
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts';
@@ -188,8 +243,10 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts
   <Chart
     ariaDesc="Average number of pets"
     ariaTitle="Bar chart example"
-    containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-    domain={{y: [0,9]}}
+    containerComponent={
+      <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+    }
+    domain={{ y: [0, 9] }}
     domainPadding={{ x: [30, 25] }}
     legendData={[{ name: 'Cats' }]}
     legendOrientation="vertical"
@@ -204,9 +261,16 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts
     }}
     width={600}
   >
-    <ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
+    <ChartBar
+      data={[
+        { name: 'Cats', x: '2015', y: 1 },
+        { name: 'Cats', x: '2016', y: 2 },
+        { name: 'Cats', x: '2017', y: 5 },
+        { name: 'Cats', x: '2018', y: 3 }
+      ]}
+    />
   </Chart>
-</div>
+</div>;
 ```
 
 ### Alerts timeline
@@ -215,85 +279,93 @@ A gnatt-like chart using `y` and `y0` data properties for alert start/end dates
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts';
-import global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/global_color_status_danger_100';
-import global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/global_color_status_info_100';
-import global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/global_color_status_warning_100';
-
+import {
+  Chart,
+  ChartAxis,
+  ChartBar,
+  ChartGroup,
+  ChartLabel,
+  ChartTooltip,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts';
+import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
+import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
+import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
 
 class Timeline extends React.Component {
   render() {
     // Start = y0, end = y
     const alerts = [
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-09T02:30:00"), severity: 'danger' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'danger' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-09T02:30:00'), severity: 'danger' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'danger' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' },
-        { y0: new Date("2024-08-07T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
+        { y0: new Date('2024-08-07T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'info' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'info' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'info' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'info' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'info' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'info' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'info' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'info' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-09T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-09T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-07T04:30:00"), y: new Date("2024-08-08T05:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-11T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' }
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-07T04:30:00'), y: new Date('2024-08-08T05:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-11T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
       ],
       [
-        { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' },
-        { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' },
-        { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' }
-      ],
+        { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
+        { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
+      ]
     ];
 
     const formatDate = (date, isTime) => {
-      const dateString = date?.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
-      const timeString = date?.toLocaleTimeString("en-US", { hour12: false });
+      const dateString = date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+      const timeString = date?.toLocaleTimeString('en-US', { hour12: false });
       return isTime ? `${dateString} ${timeString}` : dateString;
     };
 
     const getChart = (alert, index) => {
       const data = [];
 
-      alert?.map(datum => {
+      alert?.map((datum) => {
         data.push({
           ...datum,
           x: alerts.length - index,
-          fill: datum.severity === "danger"
-            ? global_color_status_danger_100.var
-            : datum.severity === "warn"
-              ? global_color_status_warning_100.var
-              : global_color_status_info_100.var,
+          fill:
+            datum.severity === 'danger'
+              ? t_global_color_status_danger_100.var
+              : datum.severity === 'warn'
+                ? t_global_color_status_warning_100.var
+                : t_global_color_status_info_100.var
         });
       });
 
@@ -307,7 +379,7 @@ class Timeline extends React.Component {
           style={{
             data: {
               fill: ({ datum }) => datum.fill,
-              stroke: ({ datum }) => datum.fill,
+              stroke: ({ datum }) => datum.fill
             }
           }}
         />
@@ -315,7 +387,7 @@ class Timeline extends React.Component {
     };
 
     return (
-      <div style={{ height: "400px", width: "450px" }}>
+      <div style={{ height: '400px', width: '450px' }}>
         <Chart
           ariaDesc="Average number of pets"
           ariaTitle="Bar chart example"
@@ -324,14 +396,16 @@ class Timeline extends React.Component {
               labelComponent={
                 <ChartTooltip constrainToVisibleArea labelComponent={<ChartLabel dx={-65} textAnchor="start" />} />
               }
-              labels={({ datum }) => `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`}
+              labels={({ datum }) =>
+                `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`
+              }
             />
           }
           domainPadding={{ x: [20, 20], y: [20, 20] }}
           legendData={[
-            { name: "Danger", symbol: { fill: global_color_status_danger_100.var } },
-            { name: "Info", symbol: { fill: global_color_status_info_100.var } },
-            { name: "Warning", symbol: { fill: global_color_status_warning_100.var } }
+            { name: 'Danger', symbol: { fill: t_global_color_status_danger_100.var } },
+            { name: 'Info', symbol: { fill: t_global_color_status_info_100.var } },
+            { name: 'Warning', symbol: { fill: t_global_color_status_warning_100.var } }
           ]}
           legendPosition="bottom-left"
           height={400}
@@ -347,30 +421,31 @@ class Timeline extends React.Component {
           <ChartAxis
             dependentAxis
             showGrid
-            tickFormat={(t) => new Date(t).toLocaleDateString("en-US", { month: 'short', day: 'numeric' })}
-            tickValues={[new Date("2024-08-06T00:00:00"), new Date("2024-08-08T00:00:00"), new Date("2024-08-10T00:00:00"), new Date("2024-08-12T00:00:00")]}
+            tickFormat={(t) => new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+            tickValues={[
+              new Date('2024-08-06T00:00:00'),
+              new Date('2024-08-08T00:00:00'),
+              new Date('2024-08-10T00:00:00'),
+              new Date('2024-08-12T00:00:00')
+            ]}
           />
           <ChartAxis
-            axisLabelComponent={
-              <ChartLabel angle={0} dy={-125} />
-            }
+            axisLabelComponent={<ChartLabel angle={0} dy={-125} />}
             label="Incidents"
             padding={{ top: 20, bottom: 60 }}
             style={{
               axis: {
-                stroke: "transparent",
+                stroke: 'transparent'
               },
               ticks: {
-                stroke: "transparent"
+                stroke: 'transparent'
               },
               tickLabels: {
-                fill: "transparent"
+                fill: 'transparent'
               }
             }}
           />
-          <ChartGroup horizontal>
-            {alerts.map((alert, index) => getChart(alert, index))}
-          </ChartGroup>
+          <ChartGroup horizontal>{alerts.map((alert, index) => getChart(alert, index))}</ChartGroup>
         </Chart>
       </div>
     );
@@ -379,7 +454,9 @@ class Timeline extends React.Component {
 ```
 
 ## Documentation
+
 ### Tips
+
 - See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq)
 - For single data points or zero values, you may want to set the `domain` prop
 - `ChartLegend` may be used as a standalone component, instead of using `legendData`
@@ -387,7 +464,8 @@ class Timeline extends React.Component {
 - Use `ChartGroup` to apply theme color scales and other properties to multiple components
 
 ### Note
-Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the 
+
+Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the
 components used in the examples above, Victory pass-thru props are also documented here:
 
 - For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart)
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
index fe488256179..180b58c1096 100644
--- 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
index 02cd605262b..2b9037a8b2b 100644
--- 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
index 8d040bc360f..8ed2e596808 100644
--- 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
index d9b2adbad08..678244bb762 100644
--- 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
index e907bac9efb..ef98fd561dc 100644
--- 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
index 298b6b7e6e3..7f508ac4d44 100644
--- 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
index dc68a0ae67f..c994bbb2489 100644
--- 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
index 1574266d7c6..a921d351e33 100644
--- 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
index 867478f7bd0..4b6d59d73d8 100644
--- 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
index a541673b187..7115fb7aa1d 100644
--- 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
index 6c2b50c5a0b..1a03ff9df71 100644
--- 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
index 07f520ab353..f02f4cc6531 100644
--- 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
index 6eea040eac3..c26de830224 100644
--- 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
index c6da51f22bb..a0a24121f64 100644
--- 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
index 2ee4b5a8849..16d1ae6edf3 100644
--- 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
index 452e3f11c60..fea91f910e6 100644
--- 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
index e8fd613ec9c..b441287b414 100644
--- 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
index 97ed8d86b45..0de0ad7abff 100644
--- 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
index 2e0dad8751a..0e05c4ca10a 100644
--- 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
index 0b794abf7ff..63c68a1eb3b 100644
--- 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();
 });