NOTE: this task is a **draft** and should be considered **work in progress** until resolution or this notice is removed.
This task captures some of the use cases for styling components in MobileFrontend and possible solutions. The task can broken apart as needed.
= Use cases and possible solutions
== LESS variables
Wikimedia design variables for colors and metrics are split into a convenient repo, [[ https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less#L48 | wikimedia-ui-base ]], but there doesn't seem to be a good way to reference them. This issue has come up before but most recently in T219895 where only two colors (#d33 and #00af89) are needed. Some options are:
1. Copy and paste bits and pieces as needed (current approach). Obviously works and obviously not ideal.
1. Copy all of wikimedia-ui-base to a new module in Core or MobileFrontend. This would probably be an easy change in either place but Core would be ideal.
1. `npm install wikimedia-ui-base` and add Webpack LESS processing to dump the styles into resources/dist. We have Webpack but haven't explored stylesheet processing yet. This would give us a useful abstraction between styles written and styles shipped but will need a little initial tooling.
1. Depend on the `oojs-ui-core.styles` ResourceLoader module. This may work but [[ https://en.wikipedia.org/w/load.php?modules=oojs-ui-core.styles | adds quite a lot more than only the variables ]].
== Icons
Icons are usually copied and pasted into MobileFrontend and MinervaNeue. Some options are:
1. Copy the icons into the repo and add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed.
1. Add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed from Core. Seems much better than copying.
1. Add a new module to Core that has all the icons with `useDataURI` to false (URLs like `/w/load.php?modules=wikimedia.ui&image=link&variant=base20&format=original&lang=en&skin=minerva` are used instead of data URIs). The overhead shoudl be smaller than data URIs but this may still be big and may not work for all use cases.
```lang=json,lines=15,name=Adding a module to skin.json
https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/da4c7757cdb77cc30d30bca82de157f5c13fee3a/skin.json#257
"wikimedia.ui": {
"class": "ResourceLoaderImageModule",
"selectorWithoutVariant": ".wikimedia-ui-{name}:before",
"selectorWithVariant": ".wikimedia-ui-{name}-{variant}:before",
"useDataURI": false,
"variants": {
"base20": {
"color": "#54595d",
"global": true
}
},
"images": {
"articleRedirect": {
"file": {
"ltr": "resources/wikimedia.ui/articleRedirect-ltr.svg",
"rtl": "resources/wikimedia.ui/articleRedirect-rtl.svg"
}
},
"info": "resources/wikimedia.ui/info.svg",
"link": "resources/wikimedia.ui/link.svg",
"listBullet": {
"file": {
"ltr": "resources/wikimedia.ui/listBullet-ltr.svg",
"rtl": "resources/wikimedia.ui/listBullet-rtl.svg"
}
},
"logo-Wikidata": "resources/wikimedia.ui/logo-Wikidata.svg",
"logo-Wikimedia": "resources/wikimedia.ui/logo-Wikimedia.svg",
"quotes": {
"file": {
"ltr": "resources/wikimedia.ui/quotes-ltr.svg",
"rtl": "resources/wikimedia.ui/quotes-rtl.svg"
}
},
"upload": "resources/wikimedia.ui/upload.svg",
"userAvatar": "resources/wikimedia.ui/userAvatar.svg"
}
},
```
A new approach to icons was added to [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/510994/ | Core ]] and is only used in one place of MobileFrontend:
```lang=json,lines=15,name=Add a single icon from Core to extension.json
https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/refs/changes/67/510067/11/extension.json#227
"mobile.init.icons": {
"class": "ResourceLoaderOOUIIconPackModule",
"targets": [
"mobile",
"desktop"
],
"icons": [ "close" ]
},
```
== Component styles
MobileFrontend has lots of UI. One example is the link:
```lang=html,name=Anchor.mustache
<a {{#href}}href="{{href}}"{{/href}} class="mw-ui-anchor
{{#progressive}} mw-ui-progressive{{/progressive}}
{{#destructive}} mw-ui-destructive{{/destructive}}
{{additionalClassNames}}">{{label}}</a>
```
These component styles, like mw-ui-progressive, come from [[ https://en.m.wikipedia.org/w/load.php?debug=true&lang=en&modules=mediawiki.ui.button&only=styles&skin=minerva | mediawiki.ui ]] but are [[ https://github.com/wikimedia/mediawiki/blob/a8dae2212cc5e23e181023af2ba1891078b14355/resources/Resources.php#L2391 | deprecated ]]. may be outdated, and may be better divided so it's easier to make consistent interfaces in a modicum of bytes. What component styles are we missing, where should they live, and how should they be referenced?
= Acceptance criteria
[] Task out the proposed solutions