From fae41df13543136cdbab539892c14772ad9b13df Mon Sep 17 00:00:00 2001 From: AntiCompositeNumber Date: Fri, 16 Jul 2021 22:31:56 -0400 Subject: [PATCH] minerva.less: use rem instead of em for browser-relative font sizes 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 --- minerva.less/minerva.variables.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 632654cc8..e7faaa1ff 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -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;