Background
Codex design tokens are available now as npm package in version 1.0.
They are much more powerful and comprehensive and are aimed to replace WikimediaUI Base.
OOUI is the project with the most extensive use of WikimediaUI Base vars as it was actually the source idea for it.
As we're touching a number of files and among all changes towards Codex design tokens usage also replace very few values that are close, but not 1:1 equivalent, this task is providing the venue to discuss possible visual amendments.
Goal
Replace all calls of the former variable files @import ( reference ) '../../../node_modules/wikimedia-ui-base/wikimedia-ui-base.less'';
While at it, also provide best practice usage of Codex design tokens – but only in CSS property categories that are already in use. For example colors shouldn't be directly referenced in code (don't: color: @wmui-color-base30;, do: color: @color-subtle)
Developer/designer notes
- color: @wmui-color-base30; (#72777d) is replaced by color: @color-subtle (#54595d) as only disabled and placeholder elements receive 72777d in Codex latest token definition. See also T331403
- Luckily(?) we don't feature media query width values, that changed in Codex in OOUI. (Two minor specific demo values that won't change are in)
Roll-out strategy
- Replaced two size variable notations as min-size-* were touched upon in a different task (to close that out)
- Introduce and replace WikimediaUI Base with deprecation token layer from Codex
- Replace equal variables where applicable in sub-grouped patches for better review-ability.
Acceptance criteria for done
- Replace all OOUI calls to WikimediaUI Base @import ( reference ) '../../../node_modules/wikimedia-ui-base/wikimedia-ui-base.less'
- Replace all WikimediaUI Base deprecated variables in favor of Codex tokens and remove 'deprecated-aliases-wikimedia-ui-base.less' import
- Remove WikimediaUI Base variables dependency
- Replace possibly close static values, where applicable