Page MenuHomePhabricator

LESS variables and Import OOUI base styles mechanism
Open, Needs TriagePublic

Description

In our styles we're importing various variables coming from mediawiki core resources like:

  • @wmui-color-base80 from resources/lib/ooui/wikimedia-ui-base.less in modules/ext.growthExperiments.StructuredTask/MachineSuggestionsMode.less
  • @colorGray5 from mediawiki.ui/variables.less in modules/ext.growthExperiments.StructuredTask/addimage/RecommendedImageRejectionDialog.less

From the information shared in this Slack thread seems like we are not using the preferred mechanism to import OOUI base styles into our extension LESS files. This can lead into "skin coupling" meaning our styles are bound to particular skins and won't work well with non-WMF skins and bypass the skin's ability to provide appropiate theme variables.

We could take some actions to improve this:

  • Use the preferred import mechanism
  • Prefer using semantic variable names. For instance prefer @color-base--disabled over @colorGray7
  • Consolidate GE styles variables in 1 file or 1 file per module and make any needed variable overwrites in these

Event Timeline

Tgr added a subscriber: Tgr.

The preferred mechanism depends on someone standardizing and exposing these variables and multiple skins implementing them, which seems unlikely. Semantic variable names would be nice, but that's an orthogonal issue, I think. I'll move to triaged since I don't think this is actionable from our side, but it would be a good retro topic.

Apparently the imports to wikimedia-ui-base started causing some problems, see T296379: GrowthExperiments: Less_Exception_Parser: File `resources/lib/ooui/wikimedia-ui-base.less` not found. I pushed a possible solution like the one used in the MediaSearch extension. I agree on binging this to a retro to see which steps forward we can make to improve the current status.