Customization via CSS variables

[humitos]

I've been using --readthedocs-flyout-font-size and --readthedocs-notification-font-size and I found them pretty good. Mainly the ones for flyout since by defining one variable the rest of font-sizes are calculated based on only that variable. This is thank to the PR #181

However, we may need to calculate other variables based on a global setting. For example line-height and similar stuffs. Otherwise, when reducing the font-size it looks weird since the line-height is not reduced:

Normal style

Using --readthedocs-notification-font-size: 0.8rem

---

It's clear how the line-height is bigger in the Material for MkDocs example.

Questions:

• Is there a simple way to "change all them together" that makes sense?
• Should we add more CSS variables to change line-height as well? (e.g. --readthedocs-flyout-line-height)
• What approach should we take here?

[zanderle]

I think we could have stuff like line-height depend on font-size (for example, it could use --readthedocs-notification-font-size). I don't think we need a separate CSS variable for line-height.

I think that should suffice. I don't think we need a more clever approach than that.

[humitos]

@zanderle sounds good to me! I'm assigning this issue to you to work on when you have time 👍🏼

[humitos]

Note there are other properties that need to be adjusted as well. For example the svg.header.icon { height } is also based on rem. I'm not sure if there is an easy way to do this in a generic way, but padding and other properties will also need to be based on this setting.

[humitos]

Could use something like the following to make all the rem units relative to this particular font-size?

readthedocs-notification {
  font-size: 16px;
}

readthedocs-flyout {
  font-size: 18px;
}

[humitos]

Here is another example that doesn't look good when updating CSS variable for notification: https://sphinx-extensions--47.org.readthedocs.build/en/47/

Note that I made the font-size smaller, but the icon size and the padding need to be updated accordingly as well.

[flying-sheep]

This issue has a generic title but the description only mentions flyout.

Is this the right issue to talk about making everything customizable using CSS variables? Because that’s what I want.
I want to easily override every single color used in e.g. the search popup by redefining four or so CSS variables.

The alternative is the the frustrating task of overriding specific properties of specific classes and have that break whenever the upstream repository changes how it does things (e.g. if this repo switches border to outline, suddenly a downstream border-color: ... frustratingly does nothing anymore)