== Background
In Codex, where font-family tokens intended to be used in MediaWiki are defined, there are 3 sans-serif option tokens defined:
- `sans-10` which includes a comment for it to be used as a fallback.
-- `"value": "sans-serif"`
- `sans-50` which is //deprecated//.
-- `"value": "'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif"`
- `sans-100` which includes a font stack that is tailored to provide better operating system-specific readability.
-- `"value": "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif"`
`sans-100` is the font stack that is intended to be used. It is optimized to work best for various operating systems. However, at the application token level, `font-family-base` is set to `sans-10` and not `sans-100`, whereas `font-family-serif`, the intended serif font stack to be used is set to `serif-100`, the serif equivalent to `sans-100`, optimized for various systems.
Anywhere that `font-family` is set in Codex, it is primarily set to `inherit`, except in the typography mixins in `typography.less`, where the sans-serif mixins set the `font-family` to `@font-family-base`. It does this to match the fonts used in Vector. These sans-serif mixins are used in a few components which contain more body text type of content, such as in Accordion, Dialog, and TextArea. The fact that these use both text that inherits its font-family and these mixins, it means that on the Codex docs site where the `font-family` is set to `@font-family-systems-sans`, and potentially other places, there is a discrepancy of sans serif fonts used within the same component. Anything coming from Codex, including typography mixins, should only ever set `font-family` to `inherit`, so that wherever it may be used, it has the same font family as the rest of the interface. OOUI does this already.
Vector sets the sans-serif `font-family` as such:
```
// Body content uses the user setting in browser / the system default sans-serif font:
// Arial on Windows, Roboto on Android.
// FIXME: Use Codex's OS specific default sans-serif fonts.
@font-family-sans: @font-family-sans--fallback; // Codex: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
```
Here, Vector is using `@font-family-sans` but setting to the Codex token `@font-family-sans--fallback`. There's a note here to change this, to essentially be using the `sans-100` font stack as mentioned before, which optimizes for OS specific readability. To do this in its current state, it would need to use the `@font-family-systems-sans` token. However, the `@font-family-base` token implies through its name that it should be the default, or primarily used, sans-serif token used, even if it is the same font stack as the `@font-family-systems-sans` token. So what needs to happen here is in Codex we need to change the value of `@font-family-base` to point to `@font-family-systems-sans`. We then need to change the Codex token that is referenced in Vector to `@font-family-base`.
Minerva sets the sans-serif `font-family` to `@font-family-base` on the `body` element, but it also creates its own `@font-family-base` token, which is set to `@font-family-systems-sans`. So Minerva is using the intended, or correct, font stack, and sort of using the correct token. It just has to set a custom value to the `-base` token to get the right font stack. Once we change the value of `@font-family-base` to point to `@font-family-systems-sans` in Codex, then we can simply remove the custom value in Minerva.
=== Goal
Unify the way that systems define a sans-serif `font-family`, which is to `inherit` and unify the Codex token that Vector and Minerva use to ensure the same sans-serif font stack and token usage.
=== Acceptance criteria
[] Remove whatever [[ https://phabricator.wikimedia.org/T247166#9315066 | barriers ]] we have to using the stack from `@font-family-system-sans`
[] Update `@font-family-base` to use `font-family.sans-100` in Codex `application.json`
[] Update Codex docs site to use `@font-family-base`
[] Update the Codex typography mixins which reference a sans-serif typeface to use `inherit` instead
[] Update Codex components to explicitly use `@font-family-base` except for Accordion, Card, Link, Table
[] Update Vector to use `@font-family-base`
[] Remove the custom `@font-family-base` token in Minerva as it is no longer needed.
[x] `@font-family-sans--fallback` is there as a fallback option if anyone really wants to use just sans-serif for something
[] Add comments to each of these tokens explaining their use case to guide people