Problem
We have the need to keep reusing a set of styling variables for layout spacing that use em and rem units. Codex doesn’t provide equivalent tokens for these.
The values were originally created as WiKit tokens (see spacing tokens and layout tokens), and used in the layout of both our quality tools and the Special:NewLexeme page. We could create custom variables to replace these WiKit tokens in the individual styling file(s) relevant to each product, but that option would cause redundancy and overhead.
Solution
Since these spacing values are shared across domains, we could create them as CSS variables and collect them in a shared stylesheet file. To enable the distribution of these variables, they should either need to be in a gist file or exist in a dedicated repo.
Considerations
- The variables should be created in a language agnostic way. Our quality tools use Sass, while Special:NewLexeme uses Less.
- In the context of the Mismatch finder, the files that include inline variables, discrete values or WiKit tokens for spacing that need replacement are:
- noscript.scss
- app.scss
- AuthWidget.vue
- MismatchRow.vue
- WikidataToolFooter.vue
- Home.vue
- Layout.vue
- Results.vue
- Please note that this task is about replacing spacing variables used to space layouts and page areas (i.e. all values in em and rem). For consistency with other components, custom elements like LanguageSelector should use Codex tokens for internal spacing (in px).
Acceptance criteria
- We (re)create a set of variables for internal and layout spacing that use our preferred units
- Any Wikidata product can reuse these variables, regardless of the selected pre-processor
- WiKit layout and spacing tokens used to style the Mismatch Finder app are replaced by our new reusable custom variables
- Current layout and spacing values remain unaltered after the replacement