[v4] Explore exposing options as custom properties

[fvsch]

At least some of the Sass options could be defined as CSS custom properties, so that they can be modified on the base container directly:

.remarkdown {
  --rmd-base-font: monospace, monospace;
  --rmd-code-font: inherit;
  --rmd-base-line-height: 1.5;
  --rmd-hr-stars: "* * * *";
  --rmd-hr-hyphens: "-------";
  --rmd-heading-sign: "#";
  --rmd-h1-underline: "==========";
  --rmd-h2-underline: "----------";
}

One challenge is that we currently use Sass to repeat strings in content values, so for a h6 we end up with content: "###### " / "";. Using CSS variables, we'd need to repeat the variable in the CSS output, which gets verbose:

.remarkdown h6::before {
  content:
    var(--rmd-heading-sign)
    var(--rmd-heading-sign)
    var(--rmd-heading-sign)
    var(--rmd-heading-sign)
    var(--rmd-heading-sign)
    var(--rmd-heading-sign)
    / "";
}

Possible solutions:

• Mitigation: shorten the variable name (no rmd- prefix, maybe --hn-sign?).
• Use Sass to output per-element variables like --rmd-h1-prefix: "# "; --rmd-h2-prefix: "## "; --rmd-h3-prefix: "### "; etc.