Change Details

#####Problem The layout, typography and custom elements that –together with WiKit components – make up Query Builder's UI were styled (in most cases) using WiKit tokens. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the now official Wikimedia design system. WiKit tokens will be deprecated together with the legacy system, and thus their use is not advised. #####Solution We need to import Codex tokens and use them to replace the WiKit tokens (of all global, aliases and component types) that were used to style Query Builder. This will take us a step closer to switching to the new design system and deprecating the old. Here's a [[ https://docs.google.com/spreadsheets/d/1CmrW7JVt9o2TvAfyIVScOE_Vc1h8DLpBqvsVhAB84kU/edit#gid=1602375525 | list of WiKit tokens and their equivalent Codex styles ]]. #####Considerations - Layout and Spacing styles: Unfortunately, `$dimension-layout` tokens (which have `rem` values) and `$dimension-spacing` (which use `em` values) do not have an equivalent style in Codex. We'll need to use custom variables to replace these (see T346261) - The task's goal is to replace WiKit tokens in use in the Query Builder app's Sass files. Nevertheless, we should consider the stretch goal of improving the token coverage by replacing discrete values too, if detected. - We'll have to recreate/replace [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/_typography.scss | _typography.scss ]] and instead use Codex tokens. #####Acceptance criteria [] All the WiKit tokens used to style the Query Builder app that have an equivalent in Codex are replaced [] All CSS discrete values used to style the Query Builder that have a token equivalent in Codex are replaced [] WiKit tokens used to style the Query Builder app that don't have an equivalent in Codex are replaced by custom variables

#####Problem The layout, typography, colors and other styles that – together with WiKit components – make up Query Builder's UI were styled (in most cases) using WiKit tokens. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the now official Wikimedia design system. WiKit tokens will be deprecated together with the legacy system, and thus their use is not advised. #####Solution We need to import Codex tokens and use them to replace the WiKit tokens (of all global, aliases and component types) that were used to style Query Builder. This will take us a step closer to switching to the new design system and deprecating the old. Here's a [[ https://docs.google.com/spreadsheets/d/1CmrW7JVt9o2TvAfyIVScOE_Vc1h8DLpBqvsVhAB84kU/edit#gid=1602375525 | list of WiKit tokens and their equivalent Codex styles ]]. #####Considerations - Like in our previous migration, we'll need to use custom variables (see T360998) to maintain our decision of using relative units for layout spacing - We'll need to decide whether, like with the Mismatch Finder, we should create mixins to reuse typographic styles (see T360999). #####Acceptance criteria [] All the WiKit tokens used to style the Query Builder app that have an equivalent in Codex are replaced [] WiKit spacing tokens used to style the Query Builder app that don't have an equivalent in Codex are replaced by custom variables

#####Problem The layout, typography and custom element, colors and other styles that – together with WiKit components – make up Query Builder's UI were styled (in most cases) using WiKit tokens. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the now official Wikimedia design system. WiKit tokens will be deprecated together with the legacy system, and thus their use is not advised. #####Solution We need to import Codex tokens and use them to replace the WiKit tokens (of all global, aliases and component types) that were used to style Query Builder. This will take us a step closer to switching to the new design system and deprecating the old. Here's a [[ https://docs.google.com/spreadsheets/d/1CmrW7JVt9o2TvAfyIVScOE_Vc1h8DLpBqvsVhAB84kU/edit#gid=1602375525 | list of WiKit tokens and their equivalent Codex styles ]]. #####Considerations - Layout and Spacing styles: Unfortunately, `$dimension-layout` tokens (which have `rem` values) and `$dimension-spacing` (which use `em` values) do not have an equivalent style in Codex.ike in our previous migration, Wwe'll need to use custom variables to replace these (see T346261)(see T360998) to maintain our decision of using relative units for layout spacing - The task's goal is to replace WiKit tokens in use in the Query Builder app's Sass files. Nevertheless- We'll need to decide whether, we should consider the stretch goal of improving the token coverage by replacing discrete values toolike with the Mismatch Finder, if detected. - We'll have to recreate/replace [[ https://github.com/wmde/wikidata-mismatch-finder/blob/development/resources/sass/_typography.scss | _typography.scss ]] and instead use Codex tokenswe should create mixins to reuse typographic styles (see T360999). #####Acceptance criteria [] All the WiKit tokens used to style the Query Builder app that have an equivalent in Codex are replaced [] All CSS discrete values used to style the Query Builder that have a token equivalent in Codex are replaced [] WiKitWiKit spacing tokens used to style the Query Builder app that don't have an equivalent in Codex are replaced by custom variables