Make all 'font-size's and 'line-height's rem #4305
Conversation
Font size of the whole app would ideally be controlled by a single value. This value is currently hard coded using the :root CSS selector. It is the intention to make this value configurable within riot. In the interim all font-sizes have been converted to rem by the simple process of regex. Replacing px values with their equivalent rem values assuming a font size of 15px and then rounded to three decimal places, which was the base at the time of this transformation. I'm expecting another commit cleaning up rem values but I thought it best to leave that to review. This commit doesn't address any scaling issues. I thought it better to land this unwieldy, mechanical, invisible change before the others otherwise the pr would be impossible to review thoroughly.
There was a problem hiding this comment.
Is design going to start giving us mockups using rem values instead of pixel values? If not, it would be good to introduce some variables like $font-14px: 0.933rem (or real css variables) so we don't need to do the math ourselves every time. Might be good to have the variables anyways, actually.
Also please don't forget to add cards to the workflow board :) I've gone ahead and done it this time (https://github.com/vector-im/riot-web/projects/11#card-35448990) though sometimes stuff will be missed because it hadn't made it to the workflow board yet.
|
Hey @JorikSchellekens, btw you can request reviews from @matrix-org/design and they automatically get put on the design teams radar. :) For visual changes, we'd normally ask for an ad hoc build to be thrown up somewhere to interact with, but given the px/rem tests we did with @bwindels yesterday these specific changes look reasonable to me.
Design tools aren't this flexible sadly. |
|
Alright, I'll reformat everything to use 'pixel variables'. Thanks for the tips! |
It's become obvious that these random floating points everywhere are unwieldy. Now they're all in one place with some fairly logical variable names which will help out in design->implementation phase.
|
Just put all the variables into one place |
|
Working on getting a test riot hosted for this and in general |
|
@JorikSchellekens Is this ready to merge or did you want another look? |
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.
This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.