Change Details

#####Problem The layout and component spacing of the different views and elements of the Mismatch Finder 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, we'll need to create a set of reusable spacing variables to replace existing WiKit `$dimension-layout` and `$dimension-spacing` tokens (see T350189) and reuse them to replace WiKit tokens in the Mismatch finder. #####Considerations The layout spacing of Mismatch Finder (in all the main page, header and footer) should not change as a consequence of this replacement. #####Acceptance criteria [] WiKit layout and spacing tokens used to style the Mismatch Finder app are replaced by our new reusable custom variables (T350189) [] Current layout and spacing values remain unaltered after the replacement

#####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

#####Problem The layout and component spacing of the different views and elements of the Mismatch FinderQuery 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). we'll need to create a set of reusable spacing variables to replace existing WiKit `$dimension-layout` and `$dimension-spacing` tokens (see T350189) and reuse them to replace WiKit tokens in the Mismatch finderNow we need to reuse said variables in the Query Builder to replace WiKit tokens. #####Considerations The layout spacing of Mismatch Finder (in all the main page, header and footer)the Query Builder tool should not change as a consequence of this replacement. #####Acceptance criteria [] WiKit layout and spacing tokens used to style the Mismatch FinderQuery Builder app are replaced by our new reusable custom variables (T350189) [] Current layout and spacing values remain unaltered after the replacement