Background
Codex design tokens are the smallest stylistic pieces of our design system – the fundamentals for consistent interfaces in Wikimedia products, like skins and extensions or microsites like TransparencyReport. The design system tokens are providing a themeable, scalable nomenclature and are following Wikimedia's stylesheet variable naming convention.
They are available in two ways:
- Since MediaWiki v1.41.0 'mediawiki.skin.variables.less' features Codex design tokens.
- As npm package for use cases like MW independent microsites/projects et al.
Related: T332541
Goal
Replace WikimediaUI-Base @imports with @import '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 in MW context)
- Simpler transformation of other Vue components bases, like ContentTranslation or Wikit based ones;
- Prep for Grid T337282 as we're basing interfaces largely on one source of truth for breakpoint tokens
- Extension developers benefit from skin aware tokens (vars). Extensions magically adapt to MW skins. The extent is still on extension author to decide (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 T350048 – https://gerrit.wikimedia.org/r/c/969232
- GrowthExperiments
- Maps (Kartographer)
- JsonConfig
- MachineVision
- MediaWiki-extensions-Phonos
- MediaSearch
- SDAW-SearchVue
- WikibaseMediaInfo
- Wikidata-Termbox – https://gerrit.wikimedia.org/r/c/972533
- Wikidata Query GUI – https://gerrit.wikimedia.org/r/c/969215
- analytics/wikistats2 – https://gerrit.wikimedia.org/r/c/971605
- Wikimedia-Portals T336970
StructuredNavigation[seems abandonware]- OOUI T350071; and through OOUI dependency (after next release v0.49.0):
- Vector (legacy skin) – https://gerrit.wikimedia.org/r/c/987209
- VisualEditor
MachineVision[disabled on commons; planned to be archived]
Dependent through copy/paste from source repo, all similarly architected:
- performance/docroot – https://gerrit.wikimedia.org/r/c/969495
- integration/docroot – https://gerrit.wikimedia.org/r/c/969496
integration/reporting[seems abandonware]- operations/mediawiki-config – https://gerrit.wikimedia.org/r/c/971604
- mediawiki/libs/node-cssjanus – https://gerrit.wikimedia.org/r/c/971335
Homebrewed copy/paste of several variables
- MediaWiki-extensions-CodeMirror
- #WikibaseLexeme which uses WiKit vars, which use WMUI Base vars – https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseLexeme/+/968622
- VisualEditor
Only comments referring to base vars before
3rd party skins
- MediaWiki-skins-Mirage see also T272217
- StarCitizenTools/mediawiki-skins-Citizen skin copied the vars over and has expanded on them. It's technically safe continued.
From here on, actions and tasks are not part of this EPIC, only to provide overview:
- T350447: Remove deprecated WikimediaUI Base tokens technical layer
- T331403: Replace legacy value tokens in Codex, OOUI and downstream; originated in WikimediaUI Base
Lastly