patternfly-org icon indicating copy to clipboard operation
patternfly-org copied to clipboard

Update colors for charts with dynamic values

Open evwilkin opened this issue 2 years ago • 0 comments

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 and token_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, like chart_color_blue_100.value.toUpperCase(), for example.

evwilkin avatar Jan 23 '23 20:01 evwilkin