-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
All components to use SASS variable for font size #17264
Comments
We're starting to work on this PR |
Can I collaborate on this? |
Sure, but i'm almost done. Monday i can commit everything i have already, is that okay? |
@yusufkandemir PR here: #17274 |
Enhancement will go into Quasar v2.16.8 |
Sorry for being late to the party, I‘ve only seen this work when it was released in 2.16.8. I‘ve tried to increase the font size for some time and it was difficult due to the hardcoded values, so a big step in the right direction, thanks! 🙏🏻 I would have preferred a base font size variable that can be changed where all other font sizes are calculated from. Is this something you also like to see? |
Discussed in #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.
The text was updated successfully, but these errors were encountered: