Problem
The Mismatch Finder's user interface was styled using WiKit tokens. With the WiKit design system being superseded by Codex, the official Wikimedia design system. The utilization of WiKit tokens is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.
Solution
We have to replace all WiKit tokens used to style the Mismatch Finder app.
This task focuses on the replacement of the deprecated tokens used in the project's Component files:
To support the replacement, here's a WiKit to Codex tokens mapping. You can find the WiKit tokens matched with their corresponding Codex token.
Considerations
- Some of the files listed above contain spacing and layout tokens from WiKit. Their replacement depends on the creation of custom variables (see T350189)
- MismatchesTable.vue was excluded because it doesn't contain tokens to replace
- I believe LoadingOverlay.vue won't be used anymore in Mismatch finder. I'm not sure whether we use it anywhere in the store
- The LanguageSelector component files were excluded: they contain several discrete values that should ideally be replaced by Codex tokens whenever possible. This work will be done as part of the future visual adjustment of this component to new guidelines (T345905)
- Any WiKit component tokens used individually in the files will need to also be replaced by an equivalent Codex token
Acceptance criteria
- All the WiKit tokens used in the MSMF Component files are replaced by their Codex equivalent