Page MenuHomePhabricator

Portals: Replace WikimediaUI Base vars for Codex design tokens
Open, Needs TriagePublic



Codex design tokens are available now as npm package.
They are much more powerful and comprehensive and aim to replace WikimediaUI Base.

Portals has used WikimediaUI Base vars interchangeably and extensively.
As we're touching a number of files and also replace some values that are close, but not 1:1 equivalent, this task is providing the venue to discuss possible visual amendments.


Replace all calls of the former central variable files @import 'wikimedia-ui-base/wikimedia-ui-base.css';
While at it, also provide best practice usage of Codex design tokens. 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.
Open questions
Acceptance criteria for done
  • Replace all calls to WikimediaUI Base '@import 'wikimedia-ui-base/wikimedia-ui-base.css';'
    • Replace all WikimediaUI Base deprecated variables in favor of Codex tokens
  • Remove WikimediaUI Base variables dependency
  • Replace close static values, starting with background-colors, colors, opacities, border properties and border-radius

Event Timeline

Volker_E renamed this task from Portals: Replace WikimediaUI Base vars for to Portals: Replace WikimediaUI Base vars for Codex design tokens.May 18 2023, 8:00 PM
Volker_E created this task.