#####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 Sass files:
- [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/_typography.scss | _typography.scss ]]
- [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/app.scss | app.scss ]]
To support the replacement, here's a [[ https://docs.google.com/spreadsheets/d/1CmrW7JVt9o2TvAfyIVScOE_Vc1h8DLpBqvsVhAB84kU/edit#gid=1602375525 | WiKit to Codex tokens mapping ]]. You can find the WiKit tokens matched with their corresponding Codex token.
#####Considerations
- The [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/noscript.scss | noscript.scss ]] file is excluded because it already uses Codex tokens. Although it contains custom variables used for spacing that will have to be replaced (see T350189)
- Any WiKit component tokens used individually in the file will need to also be replaced by an equivalent Codex token.
- Typographic styles are currently defined in the MSMF `app.scss` file, including mixins from [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/_typography.scss | _typography.scss ]] under each relevant selector. The assumption is that we'll replace the values in said mixins by the relevant Codex tokens in each case, and create any missing styles (see [[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=242-12679&mode=design&t=6BPRsqyAKX8OOvL2-0 | specs ]] for more details).
- The current body style will be replaced by Body M. A new Body S style will be used to define the smaller text within the MSMF footer (see [[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=242-12679&mode=design&t=6BPRsqyAKX8OOvL2-0 | specs ]] for more details).
- Components shouldn't inherit Body M. They need to display a smaller line-height. Their font style should be UI text M. To be decided whether the style needs to be internally specified within them, or applied globally.
#####Acceptance criteria
[] All the WiKit tokens used in the MSMF Sass files are replaced by their Codex equivalent