#####Problem
The Query Builder'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 the WiKit tokens used to style the Query Builder's font styles by their Codex equivalents.
Besides links, all fonts in the Query Builder UI can be replaced by three styles: h4, body M and UI text S. Only the font weight and color of said styles can vary, as indicate by the specs.
| [[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=503-18553&mode=design&t=nxHX0ax8AmKnG4zr-0 | Figma specs ]]|
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
Files where font tokens are used (please beware the list might be incomplete!):
- [[ https://github.com/wmde/query-builder/blob/master/src/components/Footer.vue#L51 | Footer.vue ]]
- [[ https://github.com/wmde/query-builder/blob/master/src/components/QueryBuilder.vue | QueryBuilder.vue ]]
- [[ https://github.com/wmde/query-builder/blob/master/src/components/QueryResult.vue | QueryResult.vue ]]
- The class `.querybuilder__sharable-link` and its styles can be deleted since the text being used currently will be replaced by a button (see T360997)
#####Acceptance criteria
[] WiKit tokens used to define the font styles of the Query Builder app are replaced by Codex tokens