Page MenuHomePhabricator

[EPIC] Replace WikimediaUI Base variables with Codex design tokens (mediawiki.skin.variables)
Closed, ResolvedPublic

Description

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:

  1. Since MediaWiki v1.41.0 'mediawiki.skin.variables.less' features Codex design tokens.
  2. 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

Integrated via package.json dependency

Dependent through copy/paste from source repo, all similarly architected:

Homebrewed copy/paste of several variables

Only comments referring to base vars before

3rd party skins


From here on, actions and tasks are not part of this EPIC, only to provide overview:

Lastly

Details

SubjectRepoBranchLines +/-
mediawiki/extensions/MobileFrontendmaster+38 -60
mediawiki/skins/Vectormaster+28 -24
mediawiki/libs/node-cssjanusmaster+357 -354
mediawiki/skins/Miragemaster+231 -503
integration/docrootmaster+387 -335
performance/docrootmaster+714 -602
operations/mediawiki-configmaster+351 -301
analytics/wikistats2master+1 -6
wikidata/query/guimaster+138 -211
mediawiki/extensions/VisualEditormaster+13 -17
mediawiki/extensions/VisualEditormaster+4 -3
wikidata/query/gui-deployproduction+7 -7
mediawiki/extensions/TwoColConflictmaster+0 -5
mediawiki/extensions/WikibaseMediaInfomaster+38 -139
mediawiki/extensions/Citemaster+2 -2
mediawiki/extensions/CodeMirrormaster+1 -1
mediawiki/skins/Vectormaster+12 -45
mediawiki/extensions/Phonosmaster+10 -10
mediawiki/extensions/MachineVisionmaster+164 -158
mediawiki/extensions/PasswordlessLoginmaster+11 -4
mediawiki/extensions/SearchVuemaster+20 -311
mediawiki/extensions/StructuredNavigationmaster+7 -7
mediawiki/extensions/MediaSearchmaster+205 -538
mediawiki/extensions/CodeMirrormaster+9 -15
mediawiki/extensions/GrowthExperimentsmaster+537 -1 K
mediawiki/extensions/MachineVisionmaster+4 -308
mediawiki/extensions/JsonConfigmaster+50 -374
mediawiki/extensions/Kartographermaster+50 -366
Show related patches Customize query in gerrit

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 969495 had a related patch set uploaded (by VolkerE; author: VolkerE):

[performance/docroot@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/969495

Change 969496 had a related patch set uploaded (by VolkerE; author: VolkerE):

[integration/docroot@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/969496

Change 969215 merged by jenkins-bot:

[wikidata/query/gui@master] styles: Replace WikimediaUI Base with Codex Design Tokens

https://gerrit.wikimedia.org/r/969215

Change 969707 had a related patch set uploaded (by WDQSGuiBuilder; author: WDQSGuiBuilder):

[wikidata/query/gui-deploy@production] Merging from fe3c2c8f0376b952e02c58977ad17dc6ec8ac15c

https://gerrit.wikimedia.org/r/969707

Change 969707 merged by Lucas Werkmeister (WMDE):

[wikidata/query/gui-deploy@production] Merging from fe3c2c8f0376b952e02c58977ad17dc6ec8ac15c

https://gerrit.wikimedia.org/r/969707

Change 968796 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] styles: Use 'mediawiki.skin.variables.less', remove WikimediaUI Base ref

https://gerrit.wikimedia.org/r/968796

Volker_E updated the task description. (Show Details)

Change 971335 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/libs/node-cssjanus@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/971335

Change 971548 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] WikimediaUI theme, build: Replace WikimediaUI Base with Codex tokens

https://gerrit.wikimedia.org/r/971548

Change 971604 had a related patch set uploaded (by VolkerE; author: VolkerE):

[operations/mediawiki-config@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/971604

Change 971605 had a related patch set uploaded (by VolkerE; author: VolkerE):

[analytics/wikistats2@master] build: Remove 'wmui-base' dependency, has never been used

https://gerrit.wikimedia.org/r/971605

Removing T293127: [EPIC] Design System Foundation: Design and define design tokens as parent task. Yes, definition of the tokens was a predecessor but not a parent of this EPIC.

Change 971605 merged by jenkins-bot:

[analytics/wikistats2@master] build: Remove 'wmui-base' dependency, has never been used anyways

https://gerrit.wikimedia.org/r/971605

Change 971604 merged by jenkins-bot:

[operations/mediawiki-config@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/971604

Mentioned in SAL (#wikimedia-operations) [2023-11-07T22:09:25Z] <ladsgroup@deploy2002> Started scap: Backport for [[gerrit:971604|Replace WikimediaUI Base with Codex design tokens (T331403 T334934)]]

Mentioned in SAL (#wikimedia-operations) [2023-11-07T22:10:52Z] <ladsgroup@deploy2002> ladsgroup and volker-e: Backport for [[gerrit:971604|Replace WikimediaUI Base with Codex design tokens (T331403 T334934)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-11-07T22:18:41Z] <ladsgroup@deploy2002> Finished scap: Backport for [[gerrit:971604|Replace WikimediaUI Base with Codex design tokens (T331403 T334934)]] (duration: 09m 15s)

Change 969495 merged by jenkins-bot:

[performance/docroot@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/969495

Change 969496 merged by jenkins-bot:

[integration/docroot@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/969496

Mentioned in SAL (#wikimedia-operations) [2023-11-13T09:16:52Z] <hashar@deploy2002> Started deploy [integration/docroot@9bf1967]: Replace WikimediaUI Base with Codex design tokens T331403 T334934

Mentioned in SAL (#wikimedia-operations) [2023-11-13T09:16:59Z] <hashar@deploy2002> Finished deploy [integration/docroot@9bf1967]: Replace WikimediaUI Base with Codex design tokens T331403 T334934 (duration: 00m 07s)

Change 909743 merged by jenkins-bot:

[mediawiki/skins/Mirage@master] Use Codex design tokens instead of bundling 'wikimedia-ui-base.less'

https://gerrit.wikimedia.org/r/909743

Change 971335 merged by jenkins-bot:

[mediawiki/libs/node-cssjanus@master] Replace WikimediaUI Base with Codex design tokens

https://gerrit.wikimedia.org/r/971335

Change 987209 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] build: Update 'oojs-ui' to 0.48.3

https://gerrit.wikimedia.org/r/987209

Change 987209 merged by jenkins-bot:

[mediawiki/skins/Vector@master] build: Update 'oojs-ui' to 0.48.3

https://gerrit.wikimedia.org/r/987209

Change 987502 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/MobileFrontend@master] build: Update 'oojs' to 7.0.1 and 'oojs-ui' to 0.48.3

https://gerrit.wikimedia.org/r/987502

Change 987502 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] build: Update 'oojs' to 7.0.1 and 'oojs-ui' to 0.48.3

https://gerrit.wikimedia.org/r/987502

Volker_E claimed this task.

Successfully resolved! \o/

The final pieces of WikimediaUI-Base are going to be addressed in T350447, T331403 and lastly T354310