[OOUI] Make WikimediaUI theme compatible with 'rem' units and future versions Codex Design Tokens
Open, HighPublic5 Estimated Story PointsFeature
Actions

Description

Background

As of v.1.3.6 of Codex, the legacy build of Codex design tokens uses rems for size values. i.e:

@font-size-base: 1rem;

In order for OOUI to be compatible with this update, it has to be modified to support rem values.
Currently, if v.1.3.6 of Codex is used (and the CSS variable issues outlined in T363849 have been resolved) the following error prevents the build from generating:

Running "less:wikimediaui" (less) task
>> src/styles/elements/ButtonElement.less: [L40:C1] Incompatible units. Change the units or use the unit function. Bad units: 'em' and 'rem'.
Warning: Error compiling src/styles/elements/ButtonElement.less Use --force to continue.

Aborted due to warnings.

This error stems from somewhere in the .theme-oo-ui-buttonElement() mixin.

It was generated by using this POC patch and upgrading the version of Codex to 1.3.6.

User story

As a Wikimedia developer/maintainer, I strive to maintain consistency across interfaces by ensuring the same underlying design token values are used across interfaces.

Requirements

NOTE: This task is about enabling OOUI to use a newer version of Codex design tokens, but that version should not be changed yet.

The OOUI build should pass without error when using Codex v1.3.6.
Whether that means changing one instance of an em+rem unit addition or switch to rems in OOUI more broadly remains to be seen.

Design

No visual changes are expected from this change, however switching to rem's might have unintended consequences with regards to accessibility and font-sizes.

Acceptance criteria

The OOUI WikimediaUI theme is capable with successfully compiling using Codex v.1.3.6

Communication criteria - does this need an announcement or discussion?

Details

	Subject	Repo	Branch	Lines +/-
	WikimediaUI theme: Update Codex Design Tokens to 1.4.0 and use `rem` units	oojs/ui	master	+33 -22

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
In Progress		DTorsani-WMF	T355147 [EPIC] Dark Mode
Open		None	T364777 [Epic] Upgrade OOUI's WikimediaUI theme to the current version of Codex design tokens
Open	Feature	egardner	T363857 [OOUI] Make WikimediaUI theme compatible with 'rem' units and future versions Codex Design Tokens

Event Timeline

Jdrewniak created this task.Tue, Apr 30, 5:44 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptTue, Apr 30, 5:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jdrewniak added a project: FY2023-24-WE 2.1 Typography and palette customizations.Tue, Apr 30, 5:52 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 4); removed Web-Team-Backlog.Tue, Apr 30, 7:01 PM

lwatson mentioned this in T363849: [OOUI] OOUI Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens.Fri, May 3, 5:28 PM

lwatson moved this task from Inbox to Backlog on the Design-System-Team board.

ovasileva subscribed.Tue, May 7, 4:42 PM

CCiufo-WMF moved this task from Backlog to Up Next on the Design-System-Team board.Tue, May 7, 4:52 PM

ppelberg subscribed.Tue, May 7, 5:51 PM

ppelberg added a subscriber: Esanders.Tue, May 7, 5:54 PM

ovasileva triaged this task as High priority.Thu, May 9, 10:12 AM

egardner mentioned this in T364777: [Epic] Upgrade OOUI's WikimediaUI theme to the current version of Codex design tokens.Mon, May 13, 7:31 PM

egardner added a parent task: T364777: [Epic] Upgrade OOUI's WikimediaUI theme to the current version of Codex design tokens.

egardner edited projects, added Design-System-Team (DST-Sprint-23 (2024-05-13 to 2024-05-24)); removed Design-System-Team.Mon, May 13, 7:34 PM

egardner set the point value for this task to 5.

Jdlrobson moved this task from Backlog to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 4) board.Tue, May 14, 6:30 PM

egardner moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-23 (2024-05-13 to 2024-05-24)) board.Wed, May 15, 10:40 PM

Change #1032083 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[oojs/ui@master] Update Codex to 1.4.0 and use rem units

https://gerrit.wikimedia.org/r/1032083

gerritbot added a project: Patch-For-Review.Wed, May 15, 10:41 PM

So I was able to get OOUI to build successfully using Codex design tokens v1.4.0 (the first to include rem units) by updating the common.less file for the WikimediaUI theme as follows (the snippet is from the top of the file):

// WikimediaUI theme variables

@ooui-default-image-path: 'themes/wikimediaui/images';
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: ( 0.875 / 1rem ); // equals `14px` at browser default of `16px`
@ooui-unit: rem;

I changed @ooui-font-size-base and @ooui-unit to use rem values, specifically.

I also had to change some inline unit calculations in the WikimediaUI widgets.less file.

This produces some visual changes on the demo page, so we may need to adjust some styles a little bit before this can move forward. I'll dig a bit deeper tomorrow.

egardner claimed this task.Wed, May 15, 10:58 PM

ovasileva moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q4 Sprint 4) board.Thu, May 16, 6:11 PM

Jdlrobson moved this task from Blocked on Others to Backlog on the Web-Team-Backlog (FY2023-24 Q4 Sprint 4) board.Mon, May 20, 3:45 PM

Jdlrobson subscribed.Mon, May 20, 5:32 PM

ovasileva mentioned this in T365383: [Spike] Review outcome of OOUI work .Mon, May 20, 5:32 PM

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 4).Mon, May 20, 5:42 PM