Docs as Code for Custom CSS

Ideas
1

Currently, various CSS variables need to be reverse-engineered if one wants to tweak the appearance (eg. change the color of some component).

Perhaps it would be nice to build a page where these variables are automatically discovered and explained in the "docs as code" style, or simply use queries or live widgets (or whatever other silverbullet magic) to explain them in a systematic manner.

This way users can appreciate the vast customizabity of SB and its ability to cut through tasks that are often deemed too boring for innovation credits like documenting CSS options.

I got inspired by the theme picker of the Ghostty terminal emulator. Rather than directing the user to a theme gallery, one command triggers a theme preview wizard which shows the themes directly.

2

Yeah, no promises, but I'm looking at improving the styling/theming situation in SilverBullet at the moment. I have some ideas. Documenting is definitely part of it, with the caveat that once it's document "it's law" and I cannot change things as easily. I always have told myself that CSS classes are not part of the API and you're on your own if you start hacking it, but maybe it's a time to change this.

3

Sure!

Perhaps once SilverBullet's UI starts "opening up" some harmless components, a lot of fun for the user would already have been created

4

Are we considering something similar to Plugs?

5

No, more likely a few things:

  1. Standardizing and documenting CSS selectors
  2. I like Lua APIs like the dom.* one that can be used to dynamically create HTML structures and feel we can have a Lua API that wraps CSS as well in a similar way.
  3. Maybe a more "standardized" way to achieve theming with a nice way to load and switch between them.

Likely all encoded as SilverBullet libraries.