Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Sep 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
262 changes: 170 additions & 92 deletions packages/react-charts/src/components/ChartBar/examples/ChartBar.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -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';

/**
Expand All @@ -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
};
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand All @@ -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
};
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/Page.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
14 changes: 7 additions & 7 deletions packages/react-core/src/components/Skeleton/examples/Skeleton.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Toolbar/ToolbarUtils.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/CardDemos.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/examples/Card/CardStatus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
22 changes: 11 additions & 11 deletions packages/react-core/src/helpers/constants.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 2 additions & 2 deletions packages/react-docs/patternfly-docs/pages/icons.js
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion packages/react-table/src/components/Table/examples/Table.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 5 additions & 5 deletions packages/react-tokens/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
2 changes: 1 addition & 1 deletion packages/react-tokens/scripts/generateTokens.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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, '_');
Copy link
Member

@dlabrecq dlabrecq Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious why the version has been removed?

Copy link
Member

@dlabrecq dlabrecq Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I built this branch locally and react-tokens still generates duplicates. The only difference now is one file is prefixed with "t_".

For example:
packages/react-tokens/dist/esm/chart_global_label_Margin.js
packages/react-tokens/dist/esm/t_chart_global_label_margin.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dlabrecq the packages/react-tokens/dist/esm/chart_global_label_Margin.js is the variable.
the packages/react-tokens/dist/esm/t_chart_global_label_margin.js is the token.

@mcoker can add more context from a css perspective as to why they are named the same.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @dlabrecq. The original bug is because the PF CSS has variables named very similarly like these two - --pf-v6-chart-global--label--Margin and --pf-t--chart--global--label--margin. The react-tokens package parses the PF CSS, finds all of our variables, and creates a react-token for each one with a name based based off of what the CSS variable name is. Most of the PF CSS vars fit into 4 categories:

  • Components - --pf-v6-c-[component] creates a react token like c_[component]
  • Layouts - --pf-v6-l-[layout], creates l_[layout]
  • Charts - --pf-v6-chart-[color/global/axis/bar/etc], creates chart_[color/global/axis/bar/etc]
  • Tokens, aka global vars - --pf-t--[color/global/chart/etc], creates [color/global/chart/etc]_

So for the vars reference above, --pf-v6-chart-global--label--Margin and --pf-t--chart--global--label--margin, the resulting tokens are chart_global_label_Margin and chart_global_label_margin. There are a bunch of ways we could address that, but since the CSS token vars (--pf-t--[...]) are always prefixed with -t--, prefixing the react token filename with t_[...] solves this problem and follows the format of other prefixed vars/tokens in PF (--pf-v6-c and --pf-v6-l).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation. I didn't realize we wanted to expose both tokens and variables in this package


const getRegexMatches = (string, regex) => {
const res = {};
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tokens/tests/react-tokens.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Loading