In T387778, we are introducing 4 different font modes in Codex. This involves:
- Changing font-size, line-height, and size-icon design tokens from raw values to CSS custom properties. These custom properties can then be changed depending on which font mode is desired. Note that we are not actually implementing font modes in skins yet, we are just setting them up in Codex.
- Changing the line-height scale from unitless to rem-based. This means larger font sizes will use larger line heights (typically the same font-size and line-height tokens will be used together, e.g. font-size-xxx-large will be used with line-height-xxx-large).
- Updating some component styles to ensure they all look good in all font modes.
The latter 2 issues could potentially cause visual regressions in features that use Codex design tokens and components. Because of this, we'd like to ask the Abstract Wikipedia team to test the font modes patch locally with Wikifunctions and document any regressions. Note that we do expect you to see minor changes, but they should be small and neutral/positive changes.
Testing font modes
Setup
- Clone the codex repo and pull the patch that implements font modes.
- Ensure you're using the right version of npm with nvm use or by upgrading to the version of Node listed in nvmrc.
- Install node modules with npm i.
- Build the Codex library by running npm run build-all.
- Set up MediaWiki to use your local version of Codex.
- You can confirm you're using your local version of Codex by looking for a warning message in the console.
- Check out this patch in Vector (styles will be broken otherwise). Let @AnneT know if you encounter any Less compilation errors.
Feedback
The DST would appreciate feedback on:
- Any visual regressions or unexpected changes you see
- Any instances where the Codex update interferes with your feature code, meaning you'd need to edit your feature code to fix it
- Any problems when switching text sizes using the appearance menu
Acceptance criteria
- DST asks AW to review font modes work
- AW reviews the effects of font modes work on Wikifunctions
- AW provides feedback to DST