All components to use SASS variable for font size

[mstroeve]

For our projects, we would like the font-sizes of the Quasar components to be adjustable to comply with WCAG accessibility standards and fit our design.
There are some font-sizes which have SASS variable overrides, but not all.

For example, the font-size of the .q-table th is hardcoded (12px) and the .q-table tbody td is hardcoded (13px).
We'd like to see all the hardcoded font-size variables inside the components (quasar/src/components) customizable in quasar/src/css/variables.sass

A component where it's already possible to alter it with a variable is i.e. the $button-font-size inside QBtn.sass.

Perhaps this involves more than only changing the font-size, since sometimes component heights and line-heights have the same hardcoded value as the font-size.
I.e. inside QBadge.sass there is a min-height and line-height defined with the same value as the font-size, where if we'd change the font-size only, things wouldn't fit properly anymore.

Line-height should also be adjustable there (and in other components), for WCAG AA compliance demands a minimum of 1.5, and that combined should make the min-height a value of (font-size * line-height) as default, which in the current situation would be the same if line-height has default value of 1, which is the same as the current pixel value of 12.

Anyway, with flexibility of variables, it can stay all the same by default but we'd be able to customize it for ourselves.

[yusufkandemir]

Hello, thanks for submitting this proposal. It would be awesome if you or someone else who is interested could document the components, sections, CSS properties, SCSS variables, etc. that need to be created/updated/etc. You can go ahead and create a PR to change them, which would be even more awesome! Just leave down a comment before starting to work on documenting or implementing, so that not more than one person works on it simultaneously.

Converted this to an issue: #17264

[mstroeve]

@yusufkandemir thanks for the quick reply. Of course we are willing to submit a PR .
We first wanted to check if the proposal is ok 😄 .

We will leave a comment when starting on the PR.

[yusufkandemir]

@mstroeve that's great to hear, thanks!