How to achieve this, I am not quite clear? Lets take headings (h1, h2…) for example.
Options:
-
Wrap entire website with prose class. Obviously very bad and impossible solution. Prose will add lot of vertical margins that I have to override. Also i can control classes for my own components, prose isn’t meant for that.
-
Use prose just for markdown and duplicate prose styles in my custom components. Whenever I change from prose-slate to prose-grey I will need to redo styles for entire website, very unpractical. Also I need to manually debug and extract styles for each tag for each breakpoint from Typography plugin, very tedious work. There is no way to read styles from prose classes, only overrides are possible and documented. For example prose-h1 is modifier, not a class.
-
Write independent styles for my components from prose classes. Again very bad, inconsistent design on website, you can easily tell which content comes from markdown.
This is very common use case for SSG websites, how come there is no already optimal and documented solution and best practice for this? How this should be done with consistency and reusability?