All components to use SASS variable for font size

[yusufkandemir]

Discussed in https://github.com/quasarframework/quasar/discussions/17263

^{Originally posted by **mstroeve** June 6, 2024} 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.

[mstroeve]

We're starting to work on this PR

[thevladisss]

Can I collaborate on this?

[ekamphuis82]

Sure, but i'm almost done. Monday i can commit everything i have already, is that okay?

[ekamphuis82]

@yusufkandemir PR here: https://github.com/quasarframework/quasar/pull/17274