Cleaning up our font system

UX
26

If you’re okay with the relative changes in the font sizes, you can simply set a different font size on the :root element, and the ems will scale to match.

3 Likes
27

Am I missing something, or is this just a case of not wanting to give a footgun to theme/plugins? Declaring all of these variables with !default seems like an easy way to allow for overriding these.

2 Likes
28

I don’t believe it worked before because core styles were compiled before a theme could override them? It was that way for colors anyway… I know some things about how we compile SCSS changed so maybe that’s not an issue anymore?

We can also switch these to CSS custom properties like we did with colors if !default isn’t enough.

3 Likes
29

Derp that’s right. It sounds like custom properties are the right way to go after all! :muscle:

4 Likes
30

Here’s a refactor for your review, this one may work better to allow any stylesheet to use or update the vars:

https://github.com/discourse/discourse/pull/12746

OK I’ve wrapped my head around it a little more – Currently, all the variables defined here are able to be read from themes/plugins, but not write new values, as each stylesheet is compiled separately. Adding css custom properties allows themes/plugins to override the variables dynamically, and all dependent stylesheets pick up the new values. :slight_smile:

3 Likes
31

hey @bekircem with the above merged, you can now add a theme that overrides the base font variables by way of re-defining the (client side) css properties now:

// probably don't use these values, but you can get the idea here:
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}
3 Likes