wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-09-23 10:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

minerva.less: use rem instead of em for browser-relative font sizes

Browse source 
em values are calculated relative to the parent element's font-size, not
the root or browser-default font-size. However, @font-size-minerva-small
and @font-size-minerva-smallest are supposed to be relative to the
assumed 16px browser default font-size. If they are used in an element
that already has a smaller-than-100% font-size, the resulting font-sizes
will compound and can be smaller than accessability minimums. This change
uses rems instead, so -small and -smallest will be the same sizes
everywhere on the page.

If -small or -smallest were used anywhere where parent-relative font
sizing is expected, this patch will change the size of that text. This
is only a problem if the new size is smaller than the old size, as any
sizes smaller than -smallest are an accessability issue. I looked for
any potential problems, but didn't see any.

Bug: T282315
Change-Id: Ib578f2cc4597b4dbfb5d1f5e4842962433af3748
This commit is contained in:
AntiCompositeNumber 2021-07-16 22:31:56 -04:00 committed by bwang
parent ad7057d560
commit fae41df135
1 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
minerva.less/minerva.variables.less
View file

@ -19,8 +19,9 @@
@font-size-browser: 16; // Assumed browser default of `16px`.
@font-size-root: 100%;
@font-size-root--feature-phone: 0.8 * @font-size-root;
@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.
@font-size-minerva-smallest: unit( 13 / @font-size-browser, em ); // Equals `13px` at `16px` browser default.
// T282315: Use rem instead of em to avoid font-size compounding, resulting in smaller than intended text
@font-size-minerva-small: unit( 14 / @font-size-browser, rem ); // Equals `14px` at `16px` browser default.
@font-size-minerva-smallest: unit( 13 / @font-size-browser, rem ); // Equals `13px` at `16px` browser default.
// colors
@grayMediumLight: @colorGray10;