[OOUI] Make WikimediaUI theme compatible with 'rem' units and future versions Codex Design Tokens
Closed, DeclinedPublic5 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?

Internal #front-end Slack channel

Details

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

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open		ovasileva	T341632 [EPIC] Palette customizations and dark mode
Resolved		ovasileva	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Resolved		Jdlrobson	T354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
Open		ovasileva	T354837 [Night mode] Page background appears in night mode on desktop
Resolved		ovasileva	T354838 [Night mode] Page background appears in night mode on mobile
Resolved		JScherer-WMF	T356825 Implement the new night mode color palette in Minerva
Resolved		ovasileva	T357759 Deploy night mode on the minerva skin on test wiki
Resolved	Spike	SToyofuku-WMF	T357077 [Spike] Explore different options for code sharing of page-specific configuration between Minerva and Vector
Open		ovasileva	T354842 [Night mode] All global navigation open by default appear in night mode on desktop
Resolved		ovasileva	T354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
Resolved		Jdlrobson	T356074 Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties
Resolved		ovasileva	T356900 Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables)
Resolved	BUG REPORT	Jdlrobson	T356928 Regression: Visited links on mobile appearing as black
Resolved	BUG REPORT	JScherer-WMF	T357381 Regression: Active link color is broken on mobile
Resolved		Jdlrobson	T356344 [Night mode] Templates can be fixed by editors when necessary for night mode
Duplicate	Feature	None	T353887 Support prefers-color-scheme in css-sanitizer
Resolved	Spike	Jdlrobson	T356432 [spike] Audit broken experiences in templates night mode
Resolved		Jdlrobson	T357453 WCAG Color Contrast Violations in Infobox on Minerva Skin Night Mode
Resolved		ovasileva	T359658 [QA task] WCAG Color Contrast Violations in Infobox on Minerva Skin Night Mode
Resolved	Feature	Jdlrobson	T241946 Support @media (prefers-color-scheme: ...) rule in css-sanitizer
Duplicate		None	T357585 WCAG Color Contrast Violations in Tables with Inline Style Attributes on Minerva Night Mode
Resolved		Jdlrobson	T357717 Color Contrast Issue on Wikipedia Portal: Current Events
Resolved		ovasileva	T357721 Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night Mode
Duplicate		Jdlrobson	T358007 [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information
Resolved		Jdlrobson	T357730 Template:Track listing has color contrast issues with Minerva Night Mode
Duplicate		None	T357733 Color Contrast Issue in ambox
Resolved		Jdlrobson	T357735 Color contrast issues with Template:Quote_box in Minerva Night Mode
Resolved	BUG REPORT	ovasileva	T358608 Phonos is not night mode friendly
Resolved		ovasileva	T357998 Address color contrast issues in .wikitable
Invalid		None	T358000 Color Contrast Error - [style] Styling in .reference > a Element in Minerva Night Mode
Invalid		Jdlrobson	T358004 Color Contrast Issue in Minerva Night Mode - table.sidebar Template
Duplicate		None	T358005 Minerva Night Mode Color Contrast Issue - current-events-sidebar (Portal Pages)
Duplicate		None	T358010 Main Page Template Color Contrast Issue in Minerva Night Mode
Duplicate		None	T358013 Citation Reference Color Contrast Issue - Minerva Night Mode
Duplicate		None	T358014 Color Contrast Issue in Minerva Night Mode - .colonnes.liste-simple
Resolved		ovasileva	T358015 Color Contrast Issue in Minerva Night Mode - a.mw-redirect
Resolved		Jdlrobson	T358387 [EPIC] Ensure all template text is readable in night mode: Fix all templates using background without color
Resolved		Jdlrobson	T358164 Set color/background to inherit or #333 on common templates/use of HTML4 bgcolor
Resolved		Jdlrobson	T358012 Navbox Related Color Contrast Issue in Minerva Night Mode
Resolved		Jdlrobson	T357726 Color contrast issue with Template:Side_box in Minerva Night Mode
Duplicate		Jdlrobson	T358016 Other Projects Template Color Contrast Issue - Minerva Night Mode
Resolved		Jdlrobson	T358385 Address issues with usage of [bgcolor]
Resolved		Jdlrobson	T356899 [Spike] Explore automatic night mode fixes with content transform team
Declined		Jdlrobson	T358239 Automatic Correction of Template and Inline Styles
Resolved		SToyofuku-WMF	T358240 [Spike 4hours] Performance Impact Assessment for Night Mode Style Correction
Resolved		Jdlrobson	T358388 Tag problematic pages with tracking category
Resolved		KSarabia-WMF	T358003 [3hr] [FRENCH WIKIPEDIA] Color Contrast Issue in Minerva Night Mode - .alternance
Resolved		None	T359488 Make MediaWiki:Minerva.css render blocking to allow editors to ship styles that fix issues with night mode
Open		None	T248416 [EPIC] Drop MediaWiki:Mobile.css and MediaWiki:Mobile.js in favor of TemplateStyles and MediaWiki:Minerva.css
Resolved		ovasileva	T359644 Apply night mode fixes to French infoboxes
Resolved		Jdlrobson	T360683 How should Template:Color work in night mode?
Resolved	BUG REPORT	Jdlrobson	T360844 Links in elements with background color should become black so they are accessible
Duplicate	BUG REPORT	None	T365318 Dark/night mode shouldn't reset .metadata styles
Resolved	BUG REPORT	ovasileva	T357179 Page issues as rendered in article is not compatible with night mode
Open		ovasileva	T358192 [Bug] Page issues icon disappearing on click
Resolved	BUG REPORT	ovasileva	T356822 Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
Resolved	BUG REPORT	abi_	T356821 Make <languages> compatible with night mode by using Codex design tokens
Resolved	BUG REPORT	• Nikerabbit	T358381 Make Translate outdated translations text compatible with night mode
Resolved	BUG REPORT	ovasileva	T359081 [Bug] Page previews currently does not work in night mode.
Resolved		Jdlrobson	T360877 [Bug] Page previews gradient not working in night mode
Resolved	BUG REPORT	Jdlrobson	T358822 Translate extension needs to import mediawiki.skin.variables to get night mode
Resolved		ovasileva	T356341 [Night Mode] I want to opt into or out of night mode on mobile
Resolved		ovasileva	T355065 Set up feature flag and menu for night mode on desktop
Resolved		ovasileva	T357707 Re-order Vector preferences - night mode should be above limited width
Resolved		ovasileva	T355118 Set up feature flag for night mode on mobile
Resolved		ovasileva	T355705 Allow pages to not appear in night mode
Resolved	Feature	None	T328850 Minerva/Vector: Dark mode toggle needs to be tri state
Open		None	T362923 Dark mode toggle needs to be tri state in Extension:DarkMode
Resolved		ovasileva	T356653 Show a toast notification on page load for night mode when the setting doesn't take effect in Minerva
Resolved		ovasileva	T358811 Set Minerva default to day mode
Resolved		ovasileva	T361047 Minerva Night Mode launch notifications
Resolved		ovasileva	T356434 [Night Mode] All pages and overlays that can be accessed within 2 clicks by a logged in user (AMC disabled) appear in night mode on mobile
Resolved		ovasileva	T359152 Deploy initial version of night mode to pilot wikis on the mobile website for testing
Resolved		ovasileva	T359183 Exclude non-functional pages from night mode
Resolved	BUG REPORT	ovasileva	T359958 Exclude list is not working for special page names
Resolved		Jdlrobson	T358238 Implement Linting Rule for Template Style Fixes
Resolved		Jdlrobson	T359205 Deployment Ticket - Linting Rule for Template Style Fixes
Resolved		None	T358241 Document new night mode linting rules
Resolved		Jdrewniak	T358059 Use Codex experimental build in Minerva to allow codex components to appear in night mode
Resolved		ovasileva	T357722 Main pages should work in night mode
Resolved	BUG REPORT	ovasileva	T358528 Mobile editor inconsistently renders both night mode and light mode elements
Resolved		ovasileva	T358797 Autocorrect content which uses inline styles using background without color
Resolved		ovasileva	T359571 Add note specifying night mode release is experimental
Resolved		Jdlrobson	T360132 QA: Night mode linting rule
Resolved		Jdlrobson	T359983 Rename the skin night mode classes to something more sensible before they become widely used
Resolved		ovasileva	T363814 Release dark mode as a beta feature on desktop (May 15th)
Resolved		Jdrewniak	T354889 Vector 2022 should get night theme
Resolved		JScherer-WMF	T354891 [Design] Implement the dark mode color palette and switch LESS variables in Vector to use it
Resolved		ovasileva	T361157 Change "Night" to "Dark" in Appearance settings
Resolved		ovasileva	T362726 [config] Enable night mode styles on Vector 2022 skin
Resolved	BUG REPORT	ovasileva	T363779 [Bug] Echo not compatible with desktop night theme
Resolved	BUG REPORT	ovasileva	T363861 Visual Editor overlays do not work in night theme
Stalled		bwang	T363920 Migrate ResourceLoader Icons in Vector to use Codex
Open		KSarabia-WMF	T367150 Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin
Resolved		ovasileva	T366738 ULS should have a dark theme
Open		GMikesell-WMF	T365509 Enable night mode on talk page namespaces
Resolved		ovasileva	T366378 [Config change] Enable night theme on preferences pages
Resolved		ovasileva	T360656 [GOAL] Interfaces using OOUI should work in night mode
Invalid	BUG REPORT	None	T358410 Special:MovePage has color contrast issue in night mode
Open		None	T366760 [EPIC] Dark mode for Growth team maintained features
Resolved	BUG REPORT	ovasileva	T358405 Special:Notifications should work in night mode
In Progress		DTorsani-WMF	T355147 [EPIC] Dark Mode
Resolved		Volker_E	T334790 tokens: Implement new static layout background-color tokens
Resolved		ovasileva	T366520 [Config] Dark mode is not available on Special:ApiSandbox
Open	BUG REPORT	GMikesell-WMF	T357575 File pages are not compatible with night mode
Duplicate	BUG REPORT	None	T366336 Color contrast: Non JavasScript editor should use design tokens to work in dark mode
Resolved		ovasileva	T366375 Special:QrCode and Special:UrlShortener has night mode issues
Resolved		Jdlrobson	T364777 [EPIC] Enable dark mode in OOUI
Declined	Feature	egardner	T363849 [OOUI] Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens
Duplicate		None	T364420 QA Editing-related night mode changes (desktop)
Open		ovasileva	T360691 QA Editing-related OOUI updates (mobile + desktop)
Duplicate	BUG REPORT	None	T365517 PopupWidget notification for hidden sidebars has white background
Declined	Feature	egardner	T363857 [OOUI] Make WikimediaUI theme compatible with 'rem' units and future versions Codex Design Tokens
Duplicate		CCiufo-WMF	T365521 QA Editing-related REM changes
Resolved		ovasileva	T365764 [OOUI] Icons: Add support for use in dark mode
Resolved		NBaca-WMF	T366709 [Spike] Make a decision on what needs to happen for icons before the new OOUI release
Declined		Volker_E	T366101 [OOUI] Fix font size inconsistencies across skins with `rem` based sizing

Event Timeline

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

Restricted Application added a project: Design-System-Team. · View Herald TranscriptApr 30 2024, 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.Apr 30 2024, 5:52 PM

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

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

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

ovasileva subscribed.May 7 2024, 4:42 PM

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

ppelberg subscribed.May 7 2024, 5:51 PM

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

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

egardner mentioned this in T364777: [EPIC] Enable dark mode in OOUI.May 13 2024, 7:31 PM

egardner added a parent task: T364777: [EPIC] Enable dark mode in OOUI.

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

egardner set the point value for this task to 5.

Jdlrobson moved this task from Needs analysis to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 4) board.May 14 2024, 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.May 15 2024, 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.May 15 2024, 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.May 15 2024, 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.May 16 2024, 6:11 PM

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

Jdlrobson subscribed.May 20 2024, 5:32 PM

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

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

Jdlrobson added a parent task: T365509: Enable night mode on talk page namespaces.May 21 2024, 5:13 PM

Jdlrobson moved this task from Backlog to Font Size on the FY2023-24-WE 2.1 Typography and palette customizations board.May 21 2024, 5:25 PM

ppelberg mentioned this in T364420: QA Editing-related night mode changes (desktop).May 21 2024, 6:35 PM

ppelberg mentioned this in T365521: QA Editing-related REM changes.May 21 2024, 6:50 PM

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6fa409140a/w

Also created an OOUI Demos page:
https://patchdemo.wmflabs.org/wikis/6fa409140a/w/build/ooui/demos

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0dfbce8572/w

Also created an OOUI Demos page:
https://patchdemo.wmflabs.org/wikis/0dfbce8572/w/build/ooui/demos

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/6fa409140a/w/~~

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/0dfbce8572/w/~~

Jdlrobson moved this task from Incoming to Tracking on the Web-Team-Backlog board.May 22 2024, 5:41 AM

egardner moved this task from In Progress to Blocked ⛔ on the Design-System-Team (DST-Sprint-23 (2024-05-13 to 2024-05-24)) board.May 23 2024, 9:11 PM

bmartinezcalvo edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-23 (2024-05-13 to 2024-05-24)).May 28 2024, 5:52 PM

Stalled pending support with QA.

@CCiufo-WMF is this editing QA or web team QA?

In T363857#9847587, @Jdlrobson wrote:

@CCiufo-WMF is this editing QA or web team QA?

General QA across different features, according to the testing plan outlined in T364777. I will provide more context in that task.

Volker_E mentioned this in T366101: [OOUI] Fix font size inconsistencies across skins with `rem` based sizing.May 30 2024, 9:32 PM

Volker_E updated the task description. (Show Details)Jun 5 2024, 10:09 AM

@egardner I think we are better off also putting an equivalent to the current @ooui-unit variable as token into Codex, first idea sizing-unit or more limited font-sizing-unit.
I think, not only for the OOUI use case, but for themability that could be a good offering too.