Adopt :where() selector for defining classes in built-in themes

[yhatt]

Let's consider the following example, covering invert color scheme class.

/* @theme example */

section {
  background: white;
  color: black;
}

section.invert {
  background: black;
  color: white;
}

If user thought to override colors through inline <style> in Markdown, a below Markdown will work correctly:

---
theme: example
---

<style>
section {
  background: yellow;
  color: red;
}
</style>

However, this overloading will not work if used the custom color scheme through class: invert. CSS specificity of section.invert (0-1-1) is higher than section (0-0-1) so its style is always overloaded.

---
theme: example
class: invert
---

<style>
/* Not working */
section {
  background: yellow;
  color: red;
}
</style>

This behavior may bring confusion of user who expected to overload styles.

By using :where() pseudo-selector to apply classes, built-in themes will allow simple overloading via section selector and reduce users stressful. :where() always has 0 specificity so styles in section:where(.invert) (0-0-1) can overload through section selector.

/* @theme example */

section {
  background: white;
  color: black;
}

section:where(.invert) {
  background: black;
  color: white;
}