FE - Font-sizes should adjust to user settings

[marcelluscaio]

Is your feature request related to a problem? Please describe. Fonts are declared using px, and that does not respect user's settings, violating WCAG Success Criterion 1.4.4 (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html_

Describe the solution you'd like Fonts can be declared using the REM unit

Describe alternatives you've considered I cannot think of an alternative.

[gorkem-bwl]

Are there any SaaS projects that do this so I can check? And how does one change the user's settings so the app respects it?

[gorkem-bwl]

Forget what I said earlier :) I’ve watched two videos and feel I got the point. I just suggest we prioritize addressing small bugs and building our infrastructure monitoring first. After we launch version 2.0, we can tackle this issue. What do you think?

[ajhollid]

I'm on board for this issue after @marcelluscaio 's presentation this morning :+1:

After infrastructure monitoring we can work on this and perhaps the big boogeyman, responsive design :ghost:

[blastoncrush]

Hello ! Is this issue still relevant and can I be assigned to this if it is the case?

[gorkem-bwl]

Hello @blastoncrush - sure, it's still relevant. Can you please give us some more information about what you are going to do, very shortly, so we are all on the same page?

[blastoncrush]

Hello @gorkem-bwl ! Thanks for the quick answer. I think I will start by changing all px sizes by equivalent rem size (using a converter), starting by this file : https://github.com/bluewave-labs/Checkmate/blob/develop/src/index.css Then let me know if there are other files to adress :)

[gorkem-bwl]

Let's go! :)

[blastoncrush]

I have automated the task by using a python programm and using the conversion 1rem = 16px

[ajhollid]

Hi @blastoncrush ,

I see your open PR on this, however we are moving away from using CSS at all.

Fonts are set in the theme and should not be overridden by CSS:

const typographyBase = 13;

const typographyLevels = {
	base: typographyBase,
	xs: `${(typographyBase - 4) / 16}rem`,
	s: `${(typographyBase - 2) / 16}rem`,
	m: `${typographyBase / 16}rem`,
	l: `${(typographyBase + 2) / 16}rem`,
	xl: `${(typographyBase + 10) / 16}rem`,
};

All that should be required to set the font size on a per user basis should be to make the typographyBase value configurable.

All CSS set font sizes should be removed entirely really.

Relevant docs here

[blastoncrush]

Hello @ajhollid, thanks for the answer. I don't understand the issue : in the code you show, fonts are declared using rem, not px

[blastoncrush]

In the file your talking about (https://github.com/bluewave-labs/Checkmate/blob/7df42357cdb3682150d6bcaad49eb5ac07d90374/src/Utils/Theme/constants.js#L1), it is written that every px should be replaced by rem ; that was the point of my pr (maybe the problem is that I'm not limiting only to fonts)

[IsraelMancha]

Hi! Can I work in this?