Replace inline styles with CSS

[becca-bailey]

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

[becca-bailey]

Are there any gotchas around CSS modules at build time for users?

[santhanam87]

@becca-bailey I am new to open source contribution, If I want to start working on this task what is the next step. I already forked and cloned the code in my local which is working fine, do I need to proceed with branch and PR ?