The following features maintained by the Growth team use Codex, and should be tested against the upcoming font-modes changes in Codex before they are released to identify any potential issues ahead of time:

• Special:Homepage (impact module and community updates module are Codex-based)
• Special:MentorDashboard (mentees module and "send praise" module are Codex-based)

Acceptance Criteria

• Set up a local development environment for the GrowthExperiments extension, following the instructions here
• Set up local wiki environment to use a local version of Codex which includes the font modes changes, as well as any other local patches in skins like Vector that integrate with those changes
• Review the relevant features for any visual regressions

Findings

I only noticed one significant visual change with the Codex font modes patches applied – the Impact module on Special:Homepage sees the font size and line heights shift into what is probably an undesired state. But nothing breaks Less compilation or generally harms usability as far as I can tell; this is just a cosmetic regression that can be adjusted with some slight tweaking.

Before:

After:

Mitigation

The GrowthExperiments extension includes a shared CText component used for basic text layout; this component has its own custom typographic scale which pre-dates the Codex font modes work.

It would be simple to replace the custom font-size values used in this component with the Codex font-size and line-height tokens after the font modes work is released. This would preserve the existing visual hierarchy with very minor changes, bring things in line with other codex components, and provide automatic support for font-mode switching once that is enabled in the skins.

Example code:

.ext-growthExperiments-CText {
	font-size: @font-size-medium;
	font-weight: @font-weight-normal;

	&--size-xs {
		font-size: @font-size-x-small;
		line-height: @line-height-x-small;
	}

	&--size-sm {
		font-size: @font-size-small;
		line-height: @line-height-small;
	}

	&--size-md {
		font-size: @font-size-medium;
		line-height: @line-height-medium;
	}

	&--size-lg {
		font-size: @font-size-large;
		line-height: @line-height-large;
	}

	&--size-xl {
		font-size: @font-size-x-large;
		line-height: @line-height-x-large;
	}

	&--size-xxl {
		font-size: @font-size-xx-large;
		line-height: @line-height-xx-large;
	}
}