List to audit, from conversation with @NatHillard:

• Where are we using raw values where we shouldn’t be?
• Where are we already using tokens?
• Where are we already using rems?
• Viewport sizes and mobile
• What variables do we need?
• What values are tied that should be?
• What values are tied that shouldn’t be / happen to be currently assuming the same value
• What is the full range of size values we have?
• Where are we overriding the base font size?

Current Less variable usage in Vector

As part of this investigation, we want to know at what variables we're currently using and why. I tracked code-path of just the @font-size-base variable, and I think there's a lot to untangle here.

• @font-size base is defined in mediawiki.skin.defaults.less in core and theme-wikimedia-ui.less/ theme-wikimedia-ui-legacy.less in codex.
• Both of those modules are imported into mediawiki.skin.variables.less in legacy and modern Vector, and subsequently overridden to a value of 1em.
• That value is overridden again in variables.less which is shared by both modern and legacy Vector to a computed value of something like 0.85em.

At a minimum, before we change any variable values, we should entirely separate legacy Vector CSS from modern Vector CSS because we risk making accidental changes to legacy Vector otherwise.

cc: @Volker_E because I think he'd find this interesting 😉

As part of this investigation, we want to know at what variables we're currently using and why.

Current variables in vector.

@font-size-base
@font-size-base--trident-hack
@font-size-heading-2
@font-size-sticky-header-links
@font-size-tabs
@font-size-user-links
@font-size-browser

Usage can be seen here.

Typography Scale Suggestion: Follow Codex

Current Codex Scale

font-size-x-small: 0.75em (Extra Small)
font-size-small: 0.875em (Small)
font-size-medium: 1em (Medium)
font-size-large: 1.125em (Large)
font-size-x-large: 1.25em (Extra Large)
font-size-xx-large: 1.5em (Double Extra Large)
font-size-xxx-large: 1.75em (Triple Extra Large)

Each font size is expressed as a multiple of the base font size (16px).

Caveat: codex scale is in em.

Answers to List of Questions

Where are we using raw values?

Where are we already using tokens?

Where are we already using rems?

What variables do we need?
We need variables for the raw values (see above raw values table)
What values aren't tied that should be?
None in skins.vector.styles (?) but common/variables.less has heading level styles that are defined separately without a consistent pattern.
What values are tied that shouldn’t be /happen to be currently assuming the same value?
None
What is the full range of size values we have?
(See ticket description)
Where are we overriding the base font size?
See above

I've spun out T345766 from this investigation in order address the interdependence between legacy and modern vector CSS.

Since as @KSarabia-WMF mentions above, we're using lots of non-standard values in the CSS, such as 84% I wanted to see what the values actually compute too. By pasting this Gist into the web console, we're able to get a sense of where non-standard values could pose an issue in Vector.

The image below highlights computed font-size values that are either 13px or decimal values (e.g. 13.3333px):

The biggest area that uses non-standard values is the toolbar, which has a font-size of 13px. We should standardize that area to 14px since it contains a lot of complexity -- the font-size is set to 13px on a parent elements but then back to 14px on the child elements.

Jan to capture learnings on https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading

I've started the page at https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading/dev/Vector_font-size_audit