[OFF-TOPIC][REQUEST] Script for building Style Settings options for a theme

[firinael]

How it'd work:

Style Settings Builder
What is your theme name? <user answers>
What is your theme id? <user answers>
Would you like to add variable --body-color as an option? <user answers>
<if yes> What kind of control do you want? Options are: slider, toggle, text box. <user answers>
<if slider> What are the limits? (Answer as "<floor>" "<ceiling>") <user answers>
--- do this for every variable
What hierarchy would you like? The available variables are: <list>. Answer like so: "<category name>, <optional sub-category name>" "<--variable1>", "<--variable2>" [...]
<user answers>

And it'd build the settings interactively, and make it more accessible and easy. I think it'd help with getting people to add Style Settings to their themes.

[mgmeyers]

This is a great idea. It could even be built into the UI of the plugin as sort of a wizard. Something like:

1. Select the CSS file you'd like to generate a config for
2. Define any class toggles
3. The plugin can the display a list of all CSS variables and allow the user to select a type, output format, write a description, etc
4. Allow the user to add headings/section and drag and drop to arrange everything

This would be a big task, but could really improve the usability of the style-settings plugin

[metruzanca]

I was actually thinking of making something similar to this before I found style-settings. Based on this css-tricks article I wrote this snippet, which might come in handy for building out this feature:

function getCSSVars() {
  const cssVarFilter = propName => propName.trim().indexOf("--") === 0;
  const sheetToDictionary = sheet => {
    let dict = {};
    for (const rule of [...sheet.cssRules]) {
      if (rule.type === 1) {
        const props = [...rule.style].filter(cssVarFilter);
        for (const propName of props) {
          const key = propName.trim()
          if (dict[key] === undefined) {
            dict[key] = [];
          }
          dict[key].push(rule.style.getPropertyValue(propName).trim())
        }
      }
    }
    return dict;
  };

  return [...document.styleSheets]
    .map(sheetToDictionary)
    .filter(dict => Object.entries(dict).length > 0)
}

Its an improved version of the code from the article, for every stylesheet it creates a map of variables and the values being set to them. Since variables can be set and then changed, I'm storing all their possible values in an array and so we'll end up with a key and all values ever assigned to that key.

The issues with this approach is its hard to identify the stylesheets. The only accurate way is to look at the content of the sheets. Though it seems like the second sheet is always obsidian's main stylesheet, the fourth is always the theme + snippets (sadly these are merged together).

Idk if this would help, I salvaged this from a trashed plugin prototype from earlier today before I found this plugin.