FormidableLabs / FormidableLabs/victory

Replace inline styles with CSS

Open
#2,310 2 comments 0 reactions 0 assignees View on GitHub
Issue: Accepted Status: On Hold ⚠️ Type: Enhancement :pencil2:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

Victory currently relies heavily on inline styles and JS objects as themes for styling chart components.

The biggest downside of inline styles is that they are challenging to override. Last year we added a `disableInlineStyles` prop as a hack to allow users to style components with CSS.

Since Victory has been introduced, CSS has evolved to allow us to use CSS for theming and variables. It would be a good idea for us to update Victory to use current CSS standards.

For example, internally Victory could use CSS modules to define our preset themes. https://github.com/css-modules/css-modules/blob/master/docs/theming.md

We should also provide some CSS variables that are easily overridable on the client side to allow users to define their own themes. For example, React Day Picker does this here: https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/style.css.

This would be a breaking change if we phase out the `disableInlineStyles` and theme props, so we should think through a deprecation strategy and ensure these changes are documented.

- [ ] Replace inline themes (using CSS modules or similar)
- [ ] Expose variables and class names for users to create their own themes
- [ ] Deprecate `disableInlineStyles` and `theme` props
- [ ] Update demos, storybook, and documentation
- [ ] Ensure API changes are documented

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.