Background

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

ContentTranslation has used WikimediaUI Base vars interchangeably and extensively.
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 "@/lib/mediawiki.ui/variables/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)

User story

As a developer when browsing Wikimedia repositories and search for best practices, I'm currently seeing different styling variables and don't know what best latest practice is. Ensure simplicity for developers.

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 "@/lib/mediawiki.ui/variables/wikimedia-ui-base.less"'
  • 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
• Replace outdated color names with new Codex Design System color names
• Replace all mentions of WikimediaUI Base with Codex tokens in documentation