Bug - Charts dark theme styles not working

[mcoker]

I'm not sure where this issue belongs, but looks like dark theme charts styles are no longer working reliably on org - https://www.patternfly.org/charts/box-plot-chart. They are working in the pf-react workspace though - https://pf-react-staging.patternfly.org/charts/box-plot-chart/

For dark theme charts styles to work, you need to import patternfly-charts.css separately, so the first spot I looked was in org's patternfly-docs.css.js - doesn't look like it's ever been there. It is in react's patternfly-docs.css.js though, and dark theme charts work in react.

I realized you can get them to load if you either go to an example on org that imports patternfly-charts.css, or hover over a tab that will load an example that imports patternfly-charts.css (looks like hovering a tab/nav link on org pre-fetches the link's content). For example you can go to https://www.patternfly.org/charts/colors-for-charts and hover over the "design guidelines" tab, and the styles should load. The styles will also load if you go to https://www.patternfly.org/charts/colors-for-charts/design-guidelines and then to any other charts page. I'm guessing that works because the design guidelines page includes this file, which imports patternfly-charts.css

patternfly-org/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js

Line 3 in cb6b669

import '@patternfly/patternfly/patternfly-charts.css';

FWIW looks like patternfly-charts.css is also imported in these react-charts examples, so you can go to any of these examples (or go to an example that doesn't work, then hover over the link to one of these examples) and the dark theme styles will load.

• https://github.com/patternfly/patternfly-react/blob/7a5d71d36e67a772c9c4990f80597d1ea602fa88/packages/react-charts/src/victory/components/Patterns/examples/patterns.md?plain=1#L51
• https://github.com/patternfly/patternfly-react/blob/7a5d71d36e67a772c9c4990f80597d1ea602fa88/packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md?plain=1#L38
• https://github.com/patternfly/patternfly-react/blob/7a5d71d36e67a772c9c4990f80597d1ea602fa88/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md?plain=1#L47

All that said, any objections to just importing it in patternfly-docs.css.js? I'm not sure if we would also want to remove the imports on those charts example files above, and from the colors-for-charts design guidelines page?