Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | Feature | None | T355244 Support Codex design tokens in TemplateStyles | ||
| Resolved | Mabualruz | T360562 CSS sanitizer should support using CSS variables (not setting/creating them) for use in color values in TemplateStyles | |||
| Open | BUG REPORT | None | T359894 Module:Citation introduces accessibility issue (cs1-visible-error) | ||
| Resolved | Jdlrobson | T361934 Support CSS variable fallbacks in template styles | |||
| Open | None | T360726 Tokens: Make the rest of the Codex decision tokens available as CSS variables |
Event Timeline
This would probably require adding LESS support to TemplateStyles, but I'm not 100% sure.
Are Codex variables available also as CSS variables, or only as Less variables? If the latter (which I suspect), I don’t see how T320322 would help.
The point of T296689 was to consider whether they should be available as CSS or Less.
Note we are currently exploring this topic in T353172: [SPIKE] Investigate Codex support for CSS custom properties.
Codex design tokens are available as CSS, Less, Sass, and soon as JS variables (T324688). I think the question is more about being able to access these tokens in some way in TemplateStyles so I agree with T320322 being one approach (and appropriate as a subtask).
Moving to the backlog for now as this isn't on our radar. We can come back to this once some of the child tasks become prioritized.
Less support in TemplateStyles is very unlikely to happen. Either we'd need to write a secure Less sanitizer, and not only is that an implausibly large task, but also unlike CSS (which comes with exact parser specifications) Less isn't a very well-defined, robust and stable language. Or we'd have to transform first and then sanitize, and then you'd get error messages that are disconnected from the source text.
CSS variables are not impossible but hard to do safely (as explained in the second half of T200632#4623300). MW Platform might do some work on TemplateStyles in the next quarters, but the low-hanging fruit there is adding support for all the straightforward properties that didn't exist or weren't widely supported at the time of the last major update to it in 2018, so (absent a volunteer picking up this fairly complex task) I wouldn't expect CSS variable support soon.
For now I think the best workaround is to write your CSS code in Less, pull in Codex variables, and have a build step before putting it into the template.
I checked, and it seems that Codex tokens are available on every skin (with mediawiki.skin.default.less) ? Or have I misunderstood? I wouldn't mind a hint as to where the ResourceLoader comes in to load the tokens, and for the default autoloaded modules. I really need to dig the ResourceLoader, cause I'm lost about the chaining, don't know where to ask.
In my opinion, this task is very important both in the long term and in the short term for the night mode:
- Wikis could follow the design system decisions by using CSS variables without having to stupidly copy CSS values (and static, ewh)
- Wikis could use the Codex design tokens to mimic the Codex CSS-only components (unless you can find a way to load component styles with the ResourceLoader "on the fly"?)
Without it, wikis would have to keep using Commons.css instead of TemplateStyles subpages for wiki templates if they want to keep sync with Codex.
Edit: guess I'm again late with the progress of T360562.