Now that the design tokens package has been released, it can be used within MediaWiki. We need to do a few things to enable developers to start using them there.
### ~~Enable usage~~ (✓ done)
**Update:** This was fixed in T326591
Currently, you should be able to import the tokens file relative to your location within MediaWiki. For example, from `extensions/VueTest/resources/codex-demos/Sandbox.vue`, I can do this:
```lang=html
<style lang="less">
@import ( reference ) '../../../../resources/lib/codex-design-tokens/theme-wikimedia-ui.less';
.cdx-sandbox {
background-color: @background-color-progressive;
}
</style>
```
However, when I tried this, I got the following error in the browser console:
```
/w/load.php?lang=en&modules=ext.vueTest.codexdemo%7Cjquery%2Coojs-ui-core%2Cvue&skin=minerva&version=1nm17 Less_Exception_Compiler: error evaluating function `rgba` color functions take numbers as parameters index: 1350
```
This seems to be caused by the Less compiler not liking use of `rgba()` with `calc` inside, like this:
```lang=less
@background-color-quiet--hover: rgba( 0, 24[[ https://www.npmjs.com/package/@wikimedia/codex-design-tokens | Codex design tokens package ]] has been released, 73,it can be used within MediaWiki. calc( 7 / 255 ) );
```We need to do a few things to enable developers to start using them there.
### Improve usage experience
The import path within MediaWiki is relative and not developer friendly:
```lang=less
// From a file in an extension.
@import ( reference ) '../../../../resources/lib/codex-design-tokens/theme-wikimedia-ui.less';
```
You shouldn't need to figure out the relative path per-file.
=== Proposals
==== 1. Add Codex tokens directory to ResourceLoader Less import
Provide a "magic" import path that points to the right theme's tokens. E.g. people write `@import 'codex-design-tokens.less';` and that ends up importing theme-wikimedia-ui.less in Minerva or theme-wikimedia-ui-legacy.less in Vector. (In practice, we would do this through the same mechanism as the skin variables system: each skin adds a custom import path to the Less import paths list, and each skin would place a file called codex-design-tokens.less in that path that imports the correct file.)
==== 2. Reuse `mediawiki.skin.variables` ResourceLoader functionality and import per skin
Do something like #1 but make it part of skin's mediawiki.skin.variables.less, so that code that does `@import 'mediawiki.skin.variables'` automatically gets all the right Codex tokens with the right theme along with it.
Precondition is to add sane defaults (HTML oriented?) values for MediaWiki core in order toskin default variable (Best starting idea was to orient on HTML/CSS defaults) values for MediaWiki core to
- provide a non-Wikimedia look and feel when newly installing core and a non-Wikimedia theme
- make skin overrides with all our current Codex tokens work., therefore the same var must be avail in mediawiki.skin.defaults.less
We're set up right now to have already all tokens needed for Vector (theme-wikimedia-ui-legacy.less)/Vector 2022 and MinervaNeue (theme-wikimedia-ui.less)
For other often used themes like Monobook or Timeless we'd have to either add themes and make the authors/communities aware or depending on feedback take them into list for above.
### Document usage
We should add a section to the [[ https://www.mediawiki.org/wiki/Codex | Codex page on mediawiki.org ]] to explain how to access the tokens from a Less file or style tag.
---
## Acceptance criteria
- [x] Enable use of tokens in MediaWiki
- [] Improve process of accessing tokens
- [] Document usage instructions (started [[ https://www.mediawiki.org/wiki/Codex#Using_Codex_design_tokens | on mw.org ]] but needs updating once the process is improved)
---
---
== Original task scope
### ~~Enable usage~~ (✓ done)
**Update:** This was fixed in T326591
Currently, you should be able to import the tokens file relative to your location within MediaWiki. For example, from `extensions/VueTest/resources/codex-demos/Sandbox.vue`, I can do this:
```lang=html
<style lang="less">
@import ( reference ) '../../../../resources/lib/codex-design-tokens/theme-wikimedia-ui.less';
.cdx-sandbox {
background-color: @background-color-progressive;
}
</style>
```
However, when I tried this, I got the following error in the browser console:
```
/w/load.php?lang=en&modules=ext.vueTest.codexdemo%7Cjquery%2Coojs-ui-core%2Cvue&skin=minerva&version=1nm17 Less_Exception_Compiler: error evaluating function `rgba` color functions take numbers as parameters index: 1350
```
This seems to be caused by the Less compiler not liking use of `rgba()` with `calc` inside, like this:
```lang=less
@background-color-quiet--hover: rgba( 0, 24, 73, calc( 7 / 255 ) );
```