Background
Codex design tokens are the fundamentals for consistent interface at Wikimedia Foundation.
They are available in two ways:
- Since MW v1.41.0 'mediawiki.skin.variables.less' features Codex design tokens. These are providing a themeable, scalable nomenclature and are following Wikimedia's stylesheet variable naming convention.
- As npm package for use cases like MW independent microsites/projects et al.
Related: T332541
Goal
Replace WikimediaUI-Base @imports with 'mediawiki.skin.variables.less' and static values where easily identifiable.
Benefits
- Reduce design debt
- Reduce technical debt
- Ensure that single source of truth is clarified and established with Codex design tokens via skin variables
- Extension developers benefit from skin aware tokens (vars). Extensions magically adapt to MW skins. The extent is still on extension author (for example only color tokens used, or everything)
Risks
- The change requires MW v1.41, if your extension is required to be further backwards-compatible, please reach out to find intermediate solutions
- As with every code change, there's a minimal chance of human error in token application. The patches provided should not result in visual change aside of a few major extension, where the known small changes are flagged.
Acceptance criteria for done
- Replace all references of WikimediaUI Base and remove it from:
Integrated via package.json dependency
- ContentTranslation
- GrowthExperiments
- Maps (Kartographer)
- JsonConfig
- MachineVision
- SDAW-MediaSearch
- SDAW-SearchVue
- WikibaseMediaInfo
- Wikidata Query GUI
- analytics/wikistats2
-
StructuredNavigation[seems abandonware]
And through OOUI dependency:
Dependent through copy/paste from source repo
- performance/docroot
- integration/docroot
- integration/reporting
- operations/mediawiki-config
Homebrewed copy/paste of several variables
- MediaWiki-extensions-CodeMirror
- #WikibaseLexeme which uses WiKit vars, which use WMUI Base vars
- VisualEditor