Page MenuHomePhabricator

Enable importing wikimedia-ui-base.less in skins, extensions
Closed, DeclinedPublic

Description

This card's purpose is to find a way to import 'wikimedia-ui-base.less' in projects that use it (skins, extensions).
Former stalled approach: T123359: Provide WikimediaUI Base's tokens in Wikimedia Design Style Guide following skins

The problem
  • @import 'wikimedia-ui-base' cannot be used in skins and extensions (it's imported to some extensions using OOUI, though)
  • WMUI Base is not specific to OOUI
Status quo

Currently, there's a copy of wikimedia-ui-base.less in core in the 'ooui' library.
Related task: T176964: Upstream font stack to wikimedia-ui-base
Patch that added it: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/372904
There's a task that updates it: resources/lib/foreign-resources.yaml

Worth considering
Questions
  1. Should we split 'wikimedia-ui-base' from OOUI in core/src/lib/ ? Patch 579858
    • This requires updating the ooui import path in 'resources/Resources.php'.
    • And the updater in foreign-resources.yaml.
Current solution

Patch 573403 resources: Enable importing 'wikimedia-ui-base.less' in skins, extensions

Can be used directly by: @import 'mediawiki.theme/wikimedia-ui-base';
However, the preferred way to use it is: @import 'mediawiki.theme/variables';
which imports the active skin's theme variables.

Event Timeline

Change 573403 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Enable importing wikimedia-ui-base.less in skins, extensions (intermediate solution)

https://gerrit.wikimedia.org/r/573403

In lack of any questions or answers, I'm submitting the simplest possible solution: a one-liner that enables skins and extensions to use the following in .less files:
@import 'theme/wikimedia-ui-base';
https://gerrit.wikimedia.org/r/c/mediawiki/core/+/573403/2/resources/src/mediawiki.less/theme/wikimedia-ui-base.less

Please review and merge, so that skins can use this, thank you.

Demian triaged this task as Medium priority.Feb 21 2020, 4:36 AM
Demian added a project: CSS.
Demian added subscribers: Niedzielski, nray.

Which team or feature is this for? Are you currently (or planning to) work on something where you are running into a problem due to not having this?

If this is only meant as helpful hand to make the parent task progress, I would recommend against this for this case because it's not going to be simple without assistence from several of the teams involved on the parent tasks. If and when we can get time and priority to work on that, we should invest that in the parent task instead.

Which team or feature is this for? Are you currently (or planning to) work on something where you are running into a problem due to not having this?

Skin development primarily. Skins have been reusing these values by copy-paste, waiting for this solution. See for ex. minerva.variables.less and the linked patches in the previous comment.
The motivating use-case was: while documenting the font-stack definitions I noticed these are duplicated from WMUI in Minerva and the serif stack in Vector. Now I'm keeping those patches synchronized by hand - duplication of effort -, instead of simply importing it from WMUI and documenting only there.

Also see the comments at:
T123359#3202480
T123359#3274727

If this is only meant as helpful hand to make the parent task progress, I would recommend against this for this case because it's not going to be simple without assistence from several of the teams involved on the parent tasks. If and when we can get time and priority to work on that, we should invest that in the parent task instead.

That's a related task, not the parent task, I've referred to it for completeness. That task is hard to follow, the concepts and ideas changed along the years, off-phabricator discussions are not documented there, so it's very unclear. I have nothing to do with that. A few years ago this import solution (or similar) was hinted at / proposed, but not followed-up, so it's somewhat related.

I'm not sure what's the current vision with that task. It seems to have a much larger aspect, this task solves a simple, immediate need, without delay. The other task T123359 can build upon it, or ignore it, or change it, if necessary when it's time comes. This task can be solved independently, without affecting the targets of that task.

Change 575104 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Make wikimedia.ui importable

https://gerrit.wikimedia.org/r/575104

Change 575104 abandoned by Jdlrobson:
Make wikimedia.ui importable

Reason:
https://gerrit.wikimedia.org/r/#/c/mediawiki/core/ /573403/ would avoid adding more than one place for LESS variable import paths and would be preferred here IMO.

https://gerrit.wikimedia.org/r/575104

Demian renamed this task from Enable importing wikimedia-ui-base.less in skins, extensions (intermediate solution) to Enable importing wikimedia-ui-base.less in skins, extensions.Feb 28 2020, 5:44 PM
Demian updated the task description. (Show Details)

A friendly reminder that this one-liner patch (573403) reached its final form on 28 Feb, that has been accepted by a few developers who have commented. Please finalize it, thank you.

Change 579857 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Provide theme-agnostic style variables

https://gerrit.wikimedia.org/r/579857

Change 579858 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] resources: Separate wikimedia-ui-base.less resource from OOUI into its own folder

https://gerrit.wikimedia.org/r/579858

Demian added a project: Technical-Debt.
Demian updated the task description. (Show Details)

See parent task for more information.