This task captures some of the use cases for styling components in MobileFrontend and possible solutions. The task can broken apart as needed.

Acceptance criteria

• Task out the proposed solutions.
• Use cases and requirements are published on wiki.

Use cases and possible solutions

LESS variables

Wikimedia design variables for colors and metrics are split into a convenient repo, 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.
2. 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.
3. 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.
4. Depend on the oojs-ui-core.styles ResourceLoader module. This may work but 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.
2. Add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed from Core. Seems much better than copying.
3. 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.

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 Core and is only used in one place of MobileFrontend:

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:

<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 mediawiki.ui but are 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?