This task is split off from the earlier investigation T369505.
We want to use Codex design tokens in Special:NewLexeme. However, because the special page is developed in a separate repository, with SCSS styles compiled to CSS and then included in WikibaseLexeme, the best way to do this isn’t obvious. The options we have include:
- Import @wikimedia/codex-design-tokens in new-lexeme-special-page, import the design tokens as SASS/SCSS variables, and use those variables in our stylesheets. This works, and it’s the approach we’re currently using as the result of T369505; however, it has the big downside that it “inlines” the design tokens into the compiled CSS which is then added to WikibaseLexeme. This means that, when a new version of Codex is released and used in MediaWiki, the design tokens will be potentially outdated; new-lexeme-special-page has to be updated, rebuilt, and the new build added to WikibaseLexeme in order to update the tokens. (Also, while we haven’t looked into dark mode compatibility for Special:NewLexeme yet – compare T369385 – I guess it would be an issue that the color tokens can’t vary by light/dark mode.)
- Use all the design tokens as CSS variables from Codex. This is not currently possible because Codex and skins don’t make all design tokens available as CSS variables – see T375373: [WtC] Make more Codex design tokens available as CSS variables. But if that changes in Codex, then this would be the most attractive solution.
- Use all the design tokens as CSS variables, with our own stylesheet in WikibaseLexeme re-exporting the needed LESS variables as CSS variables. This is an alternative workaround if the previous solution (design tokens directly from Codex) isn’t available. However, it would require us to use a custom prefix for these CSS variables, e.g. --snl-border-color-muted: @border-color-muted. (This is because some of the LESS variables are actually defined as CSS variable expressions, e.g. @border-color-muted: var( --border-color-muted, #dadde3 ), so if we declare --border-color-muted: @border-color-muted then it gets compiled down to --border-color-muted: var( --border-color-muted, #dadde3 ) which is invalid.)
Quality attributes to be taken into consideration
- Maintainability
- Reusability
- Performance
Acceptance Criteria
- Examine each of the approaches based on the quality attributes
- A decision is made on the best way forward