Current CSS solution is a temporary hack #67
Description
The way CSS works in the demo right now is as follows:
First, we import the existingquartz.css, components.css, and quartz-icons.css. This allowed the components to be written without needing brand new CSS.
Because some components need custom CSS in addition to what those stylesheets can provide, the new CSS goes in this repo in /docs/css. Such style changes can be seen as "patches" to go on top of the current quartz css.
Ideally, all of these styles would go directly into quartz. Doing that, while avoiding naming conflicts, probably requires some renaming within both the stylesheets and where the classes are used in the components.
In other places, the legacy CSS placed arbitrary restrictions on the component. A good one to clean up, for example, would be the CSS for the checkbox component.
https://github.com/vhx/quartz-react/blob/master/components/Checkbox/Checkbox.jsx#L34-L44
Notice here that there must be .form > fieldset.checkbox > input[type=checkbox]. This is very restrictive. Instead, the CSS should apply to just a single nesting level. This would allow the html/jsx to be restructured as desired and not tightly couple the CSS representation to the jsx representation.