Problem
Headings and body text in MPIC are not aligned with Codex's Typographic styles and form standards.
Solution
To make the tool look consistent with other wiki environments, we should apply the right properties to its different typographic styles.
Specifications are provided both as discrete values and Codex tokens. Using the latter is advice to ensure adaptable consistency:
1. Update h1 titles' style
Font-size: 1.75rem (@font-size-xxx-large)
Line-height: 1.25 (@line-height-xxx-small)
Font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif (@font-family-serif)
Font-weight: 400 (@font-weight-normal)
Color: #f8f9fa [dark mode], #000 [light mode] (@color-emphasized)
2. Apply a h2 style to form section titles
Font-size: 1.5rem (@font-size-xx-large)
Line-height: 1.25 (@line-height-xxx-small)
Font-family:'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif (@font-family-serif)
Font-weight: 400 (@font-weight-normal)
Color: #f8f9fa [dark mode], #000 [light mode] (@color-emphasized)
(It might also be worth evaluating whether form sections should actually be h2 headings, which would help improve the page's semantic structure and accessibility)
3. Adjust body text
The base font-size of all body text (all non-title elements such as descriptions, labels, table contents, etc.) should be 0.875rem (@font-size-small) instead of the discrete 15px.
Labels included in the forms (fields, text inputs outside or inside modules, radio buttons, checkboxes) display incorrect colors on dark mode (#ebebeba3, #a2a9b1). In all cases, they should be #eaecf0 (@color-base).
4. Apply correct color to links
All the links included in the application should be blue (@color-progressive) by default instead of green. Their color should translate to the right shade in dark mode.
For simplicity, and to ensure that this element displays the right colors in its different states, we could use the Link mixin provided by Codex.
Acceptance criteria
- MPIC's font styles are consistent with Wikimedia standards
