Page MenuHomePhabricator

Directly use the WikimediaUI values in the WikimediaUI theme in OOUI, rather than via copy-paste
Open, NormalPublic

Description

In order to implement WikimediaUI Base in WikimediaUI theme, we need to minimize differences between rWMUI WikimediaUI Base /wikimedia-ui-base.less and the existing theme variables in common.less. (continuing work from @Prtksxna comment)

SAME variable name

  • @color-placeholder
  • @color-destructive
  • @background-color-framed
  • @background-color-destructive
  • @background-color-tabs
  • @box-shadow-dialog
  • ...some more shadow stuff...

VALUE is slightly different

MISTAKE in rWMUI?

  • Should @background-color-primary be @wmui-color-accent90?

Yes. Fixed in D660.

  • Should @color-primary--focus be @color-primary instead of @wmui-color-accent50?

tl;dr Yes. I'm not having a strong conviction on what is the more insightful way for devs, but consistency is important so let's follow the OOUI way.

MISSING variables

  • @background-color-base--disabled added
  • @background-color-filled--disabled added
  • min-size-* and size-base
  • Toolbar and Tools specific variables
  • @border-style-base
  • Transitions

OOUI specific variables, that we shouldn't put into WikimediaUI Base right now

  • A bunch of font stuff
  • @oo-ui-font-size-browser – debatable if we should generalize this
  • @oo-ui-font-size-default – debatable if we should generalize this
  • @color-destructive-non-primary – OOUI specific
  • @opacity-disabled-indicator– OOUI specific
  • @opacity-disabled-tool – debatable if we should generalize this
  • @border-radius-frameless – debatable if we should generalize this

Event Timeline

Prtksxna created this task.May 18 2017, 7:13 AM

I am attempting to document things that are needed by OOUI /src/themes/mediawiki/common.less and aren't present in rWMUI WikimediaUI Base /wikimedia-ui-base.less. Some of them might not even need to be in in rWMUI WikimediaUI Base and will stay in OOUI, but I'll try to document all.


SAME variable name

  • @color-placeholder
  • @color-destructive
  • @background-color-framed
  • @background-color-destructive
  • @background-color-tabs
  • @box-shadow-dialog
  • @box-shadow-toolbar*
  • @box-shadow-widget
  • @box-shadow-frameless-focus
  • ...some more shadow stuff...

VALUE is slightly different

  • @background-color-destructive

MISTAKE in rWMUI?

  • Should @background-color-primary be @wmui-color-accent90?
  • Should @color-primary--focus be @color-primary instead of @wmui-color-accent50?
  • Should @border-color-filled--disabled be @wmui-color-base70 instead of base30?

MISSING variables

  • Most size stuff
  • A bunch of font stuff
  • @oo-ui-font-size-browser
  • @oo-ui-font-size-default
  • @color-destructive-non-primary
  • @opacity-disabled-indicator
  • @opacity-disabled-tool
  • @border-radius-frameless
  • @border-width-medium

I haven't documented these, but there are some cases in which common.less is assigning a variable to a variable instead of a value, and wikimedia-ui-base.less is doing the same. In such cases do we want to use the WMUI variable or let it be. For example in @color-erroneous. Not sure what should REF what.


These changes can be seen in Gerrit - https://gerrit.wikimedia.org/r/354205. I wont be updating this comment as that patch or rWMUI get updated.

Prtksxna assigned this task to Volker_E.May 18 2017, 6:04 PM
Jdforrester-WMF renamed this task from Use the WikimediaUI values in the Mediawiki theme in OOjs UI to Directly use the WikimediaUI values in the WikimediaUI theme in OOjs UI, rather than via copy-paste.May 20 2017, 8:22 AM
Volker_E updated the task description. (Show Details)May 21 2017, 2:37 PM
  • Should @border-color-filled--disabled be @wmui-color-base70 instead of base30?

Not sure if I understand. It's referring to @wmui-color-base100 right now and that's intended

Change 355433 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Align @background-color-destructive to WikimediaUI Base

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

Volker_E updated the task description. (Show Details)May 24 2017, 2:59 PM
Volker_E updated the task description. (Show Details)May 24 2017, 6:28 PM
Volker_E moved this task from Backlog to Next-up on the OOUI board.May 24 2017, 9:13 PM

Change 355433 merged by jenkins-bot:
[oojs/ui@master] Align @background-color-destructive to WikimediaUI Base

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

Change 357965 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[oojs/ui@master] WikimedaUI: Pull in and use upstream WikimediaUI package

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

Jdforrester-WMF moved this task from Next-up to OOjs-UI-0.22.2 on the OOUI board.Jun 12 2017, 11:04 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.22.2); removed OOUI.

Change 360328 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] themes: Align variable names to WikimediaUI Base scheme

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

Change 362800 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Align variable pseudo classes names to WikimediaUI Base

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

Change 362801 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] themes: Align read-only variable names to pseudo-class selector scheme

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

Change 362802 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Align checked variable names to pseudo-class scheme

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

Change 362806 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Align disabled variable names to pseudo-class scheme

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

Change 362956 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Align opacity-icon* variable names to WikimediaUI Base

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

Volker_E updated the task description. (Show Details)Jul 3 2017, 9:55 AM

Change 363416 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Replace @color-light with @color-base--inverted

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

Change 360328 merged by jenkins-bot:
[oojs/ui@master] themes: Align variable names to WikimediaUI Base scheme

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

Change 362800 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Align variable pseudo classes names to WikimediaUI Base

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

Change 362801 merged by jenkins-bot:
[oojs/ui@master] themes: Align read-only variable names to pseudo-class selector scheme

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

Change 362802 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Align checked variable names to pseudo-class scheme

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

Change 362806 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Align disabled variable names to pseudo-class scheme

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

Change 362956 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Align opacity-icon* variable names to WikimediaUI Base

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

Change 363416 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Replace @color-base-light with @color-base--inverted

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

Change 357965 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI: Pull in the upstream WikimediaUI package

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

Change 364634 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[oojs/ui@master] [WIP] WikimediaUI theme: Directly use the LESS values rather than via copy-paste

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

Change 364634 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Directly use the Less values rather than via copy-paste

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

Is this now Resolved enough?

I'd like to add a few more aligned before closing this.

Change 369703 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Align vars to WikimediaUI Base and remove them as OOjs UI vars

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

Change 369703 merged by jenkins-bot:
[oojs/ui@master] Align vars to WikimediaUI Base and remove them as OOjs UI vars

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

Krinkle removed a subscriber: Krinkle.Aug 16 2017, 12:32 AM

I'd like to add a few more aligned before closing this.

How many more? :-)

Change 379165 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Remove vars covered by WikimediaUI Base

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

Change 379165 merged by jenkins-bot:
[oojs/ui@master] Remove vars covered by WikimediaUI Base

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

Volker_E renamed this task from Directly use the WikimediaUI values in the WikimediaUI theme in OOjs UI, rather than via copy-paste to Directly use the WikimediaUI values in the WikimediaUI theme in OOUI, rather than via copy-paste.Dec 21 2017, 4:47 PM
Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Mar 19 2018, 5:10 AM

That was the task I was searching for earlier.
Further variables reused in https://gerrit.wikimedia.org/r/#/c/oojs/ui/+/452842/

Volker_E updated the task description. (Show Details)Aug 15 2018, 3:52 PM

That was the task I was searching for earlier.
Further variables reused in https://gerrit.wikimedia.org/r/#/c/oojs/ui/+/452842/

Does that mean we can close it now? It's been a year since you said you wanted to do a little more. :-)

Volker_E updated the task description. (Show Details)Aug 16 2018, 9:00 PM
Volker_E updated the task description. (Show Details)Aug 17 2018, 12:48 AM
Volker_E updated the task description. (Show Details)Aug 17 2018, 4:40 AM
Volker_E updated the task description. (Show Details)

Change 453350 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Use WikimediaUI Base size* variables

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

Change 464060 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Remove vars covered by WikimediaUI Base vars

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

Change 464060 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Remove vars covered by WikimediaUI Base vars

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

Change 464370 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.29.0

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

Change 464607 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.29.1

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

Change 464370 abandoned by Jforrester:
Update OOUI to v0.29.0

Reason:
Replaced by Ie847465af6762.

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

Change 464607 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.29.1

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