Change Details

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: ``` <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: ``` @background-color-quiet--hover: rgba( 0, 24, 73, calc( 7 / 255 ) ); ``` ### Improve usage experience The import path within MediaWiki is relative and very non-ideal: ``` // 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. instead, we should do one of the following: 1. 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. Do something like #1 but make it part of mediawiki.skin.variables.less, so that code that does `@import 'mediawiki.skin.variables'` (which is common) automatically gets all the Codex tokens for the right theme along with it. ### 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

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: ``` <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: ``` @background-color-quiet--hover: rgba( 0, 24, 73, calc( 7 / 255 ) ); ``` ### Improve usage experience The import path within MediaWiki is relative and very non-ideal: ``` // 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. instead, we should do one of the following: 1. 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. Do something like #1 but make it part of mediawiki.skin.variables.less, so that code that does `@import 'mediawiki.skin.variables'` (which is common) automatically gets all the Codex tokens for the right theme along with it. ### 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)

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: ``` <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: ``` @background-color-quiet--hover: rgba( 0, 24, 73, calc( 7 / 255 ) ); ``` ### Improve usage experience The import path within MediaWiki is relative and very non-ideal: ``` // 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. instead, we should do one of the following: 1. 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. Do something like #1 but make it part of mediawiki.skin.variables.less, so that code that does `@import 'mediawiki.skin.variables'` (which is common) automatically gets all the Codex tokens for the right theme along with it. ### 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)