#####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 background and border color tokens used to style the Query Builder's interface by their Codex equivalents.
| [[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=470-34335&mode=design&t=nxHX0ax8AmKnG4zr-0 ]]|
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 color tokens and/or variables are used (please beware the list might be incomplete!):
- [[ https://github.com/wmde/query-builder/blob/master/src/components/Footer.vue#L51 | InfoTooltip.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/QueryCondition.vue | QueryCondition.vue ]]
- [[ https://github.com/wmde/query-builder/blob/master/src/components/QueryResult.vue | QueryResult.vue ]]
#####Acceptance criteria
[] WiKit tokens used to define the colors of the Query Builder app are replaced by Codex tokens