Skip to content
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

Open
yusufkandemir opened this issue Jun 6, 2024 Discussed in #17263 · 4 comments · May be fixed by #17274
Open

All components to use SASS variable for font size #17264

yusufkandemir opened this issue Jun 6, 2024 Discussed in #17263 · 4 comments · May be fixed by #17274
Labels
area/a11y Accessibility feature-approved ✅ Used when an issue marked as `feature-request` is approved following an internal review. kind/feature 💡 Qv2 🔝 Quasar v2 issues

Comments

@yusufkandemir
Copy link
Member

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.

@yusufkandemir yusufkandemir added kind/feature 💡 feature-approved ✅ Used when an issue marked as `feature-request` is approved following an internal review. Qv2 🔝 Quasar v2 issues area/a11y Accessibility labels Jun 6, 2024
@mstroeve
Copy link

mstroeve commented Jun 7, 2024

We're starting to work on this PR

@thevladisss
Copy link

Can I collaborate on this?

@ekamphuis82
Copy link

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

@ekamphuis82
Copy link

@yusufkandemir PR here: #17274

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/a11y Accessibility feature-approved ✅ Used when an issue marked as `feature-request` is approved following an internal review. kind/feature 💡 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants