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).