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
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