patternfly-org
patternfly-org copied to clipboard
Update colors for charts with dynamic values
Per comment in #3361, we can update the colors for charts page to avoid so many hard-coded values as mentioned below:
FWIW, another way to get the values on this page would be to import the react token into the page - the token stores the token name (eg,
--pf-chart-color-black-100
), value (#f0f0f0
), and the full var for use in a CSS style (var(--pf-chart-color-black-100)
, but you wouldn't use that here).Then if the value ever changes in the CSS, this page will automatically reflect the new value. You would just import the tokens for each chart color at the top of the file, then instead of typing the var name and value manually, just reference the
token_name.name
for the var andtoken_name.value
for the hex value.The only difference I see in the output is that the hex values from the CSS are lower case, but if they need to be upper case, you can use
.toUpperCase()
on the values, likechart_color_blue_100.value.toUpperCase()
, for example.