Page MenuHomePhabricator

[WtC-M3] [QB] Use Codex tokens and custom spacing variables in the QB's layout
Closed, ResolvedPublic5 Estimated Story Points

Description

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 define the Query Builder's spacing by their Codex equivalents. In case a Codex equivalent is missing, we'll have to use our custom relative variables (see T350189).

[No specs are required because spacing values should remain the same in the migrated version of the Query Builder]

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

Files where spacing tokens are used (please beware the list might be incomplete!):

Acceptance criteria
  • WiKit tokens used to define the spacing of the Query Builder app are replaced by Codex tokens or custom variables

Event Timeline

Arian_Bozorg renamed this task from Use Codex tokens and custom spacing variables in the QB's layout to [SW] [WtC-M3] [QB] Use Codex tokens and custom spacing variables in the QB's layout.Mar 27 2024, 9:37 AM

Custom variables with relative units were created for use within the Mismatch finder and are available in the following file: https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/css/custom-variables.css

Arian_Bozorg renamed this task from [SW] [WtC-M3] [QB] Use Codex tokens and custom spacing variables in the QB's layout to [WtC-M3] [QB] Use Codex tokens and custom spacing variables in the QB's layout.Mar 27 2024, 9:51 AM
karapayneWMDE set the point value for this task to 5.Apr 16 2024, 8:20 AM

Change #1037463 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Use Codex tokens and custom spacing variables in the QB's layout

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

Change #1037463 merged by jenkins-bot:

[wikidata/query-builder@master] Use Codex tokens and custom spacing variables in the QB's layout

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

All looking good! 💯

There's an unrelated issue that I discovered while looking at 1037463's build. It might be related to the color replacement task, so I left a comment there. Just mentioning it here too in case it needs to be taking into consideration before deployment.