RFC: theming
Before https://gitlab.coko.foundation/pubsweet/pubsweet-components/issues/38 goes ahead, maybe there needs to be some discussion around theming.
Some things to think about:
-
Do we want to use a css framework that relies on global classes, like Bootstrap? If so, themes may also have to provide global overrides. Or do we try to use css modules only?
-
How should themes be passed down to components?
1. Bootstrap
Personally I think we should avoid Bootstrap if it's possible. It can be used 'locally' by importing it into a css module, but then you can still get problems like that described here.
A lot of components use components from react-bootstrap
. This is rather more problematic than raw bootstrap because (as far as I know), these force you to use global classnames. This could create unpredictable behaviour in a larger scale app. react-toolbox
provides a similar set of components we could use instead, which are compatible with css modules.
2. Passing themes to components
The current system for theming (as far as I can make it out) is to have a webpack plugin replace imports of local and global css with files in corresponding locations inside a theme component. This seems to have a few problems:
-
There is no easy way partially to override css in css modules. If you want to use most of the default css but change one value you have to import the original module. It's OK but not ideal.
-
The way the plugin is written (I think!), a set of themes will only apply to pubsweet components. If any React components from the wider ecosystem are incorporated, they may have to be themed separately. By the same token, any themes written for pubsweet may not be usable on the open source market for other applications.
-
It may be reinventing the wheel to some extent.
How about using a library for theming, like react-css-themr? This is likely to involve less overhead for new developers. react-css-themr
makes it more explicit how themes are applied and makes partial overrides easier. A theme would export an object mapping component api names to sass files, which can be directly imported and passed to the ThemeProvider.
Thoughts?