Parametric Theme

As a Maintainer or Designer,

I want to be able to inspect and modify the theme at a single place and trust that the build process succeeds and the layout doesn't fall apart

So that we can manage the theme as orthogonal to other components.

---

Motivation: The theme affects many places in the build code.

A common pattern is to defuntionalize the theme into parameters, i.e. make it declarative:

• (a) --color-primary:, --font-size-small:... in a theme.css
• (b) a json file theme.json
• (c) a theme table on the CMS

In accordance with our goal to have data managed by the CMS, and regarding the beauty of the auto-generated typescript, and because directus offers a Color type, I suggest moving the theme there.

Blocks #96 (closed)

---

• Authors can edit the theme online
• The theme is typechecked on build-time
• The theme is the single source of truth for the relevant tokens in the generated CSS.
  • Fluid Scale parameters for font sizes and vertical rhythm units on a range of screen sizes
  • Colors
  • Spacings
• There are no .(s)css files anywhere
• <style> tags and style= attributes are narrowed (see #note_44584)
  • widths: --width-unit, --width-cell, --width-column which scale with font size
  • heights: --height-${s|m|l|xl|unit} which are multiples, 1/3, or 1/2 of line height
  • In addition, widths can be added to widths and heights to heights
  • colors: color variables as well as color-mix(in oklab...) out of color variables