Problem
The layout and component spacing of the different views and elements of the Query Builder app were defined using $dimension-layout and $dimension-spacing WiKit tokens, which consume values in rem and em units respectively.
We need to replace these legacy styles, but the new Wikimedia design system (Codex) doesn't include equivalent tokens that use the same units of measurement, which we prefer to use due to consistent scaling/accessibility and predictability reasons. Instead, it provides only spacing tokens in px.
Solution
In order to unblock the migration project and preserve our preferred approach to pacing, we created a set of reusable spacing variables to replace existing WiKit $dimension-layout and $dimension-spacing tokens (see T350189). Now we need to reuse said variables in the Query Builder to replace WiKit tokens.
Considerations
The layout spacing of the Query Builder tool should not change as a consequence of this replacement.
Acceptance criteria
- WiKit layout and spacing tokens used to style the Query Builder app are replaced by our new reusable custom variables
- Current layout and spacing values remain unaltered after the replacement