Removing WikimediaUI-Base as we'll only bring changes to the unified Codex design tokens from here on, although they are originated in former.

Change #970483 merged by LWatson:

[design/codex@main] tokens: Remove deprecated breakpoint tokens

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

Change #1020918 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.3.6 to 1.4.0

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

Change #1020918 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.3.6 to 1.4.0

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

Change #970482 abandoned by VolkerE:

[mediawiki/core@master] mediawiki.less: Remove deprecated extrawide breakpoint token

Reason:

Removed in 2c330e6acd7 instead

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

Request from DST for review and QA of proposed changes. Potential changes to the interface expected. Should check to make sure there's no breakages.

Change #1035573 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Skin: Remove usages of deprecated @width-breakpoint-tablet

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

Change #1035573 merged by jenkins-bot:

[mediawiki/core@master] Skin: Use standard tokens and import path

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

This has not been estimated yet so moving columns to reflect.

@Volker_E can you help me clarify the scope of this ticket? The ticket description says only Vector and Minerva, but I think we'd need to do other extensions too? I'm also not seeing any uses of the token in Vector..?

https://codesearch.wmcloud.org/search/?q=%5C-%3Fwidth%3A+*%5C%28%3F+*%40width-breakpoint&files=&excludeFiles=&repos=Extension%3AMobileFrontend%2CExtension%3ARelatedArticles%2CExtension%3AWikimediaMessages%2CSkin%3AMinervaNeue

For core, none of the code results match codebases the web team maintains. It might be better for those to be handled by the design system team?

The scope is these three, core, MN and Vector, as they are blocking the removal of the legacy breakpoint and also impact the possible addition of Grid.
I'm not sure what you refer to with 'For core, none…'? For the extensions I will care about the replacement as I already did for all of the scoped ones.

I just need Web team to review and make sure this is QA'd and you're aware in case any edge case might get flagged afterwards.

Change #1036773 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/WikimediaMessages@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Change #1036773 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

In T349793#9840599, @Volker_E wrote:

The scope is these three, core, MN and Vector, as they are blocking the removal of the legacy breakpoint and also impact the possible addition of Grid.
I'm not sure what you refer to with 'For core, none…'? For the extensions I will care about the replacement as I already did for all of the scoped ones.

I just need Web team to review and make sure this is QA'd and you're aware in case any edge case might get flagged afterwards.

To be more explicit:

• https://gerrit.wikimedia.org/r/c/mediawiki/core/+/945931 has various styles that the web team doesn't maintain or is familiar with. The only change there that seems in scope for our team is the comment addition to Skin.php For example Growth team maintains RCFilters according to https://www.mediawiki.org/wiki/Developers/Maintainers and search platform maintains the search CSS. We are not setup to QA any of these these pages.
• Vector doesn't seem to use legacy tokens (unless the URL in description is incorrect? If you need changes there - happy to review them I just don't understand what changes are needed!)

In T349793#9840622, @Jdlrobson wrote:

In T349793#9840599, @Volker_E wrote:

The scope is these three, core, MN and Vector, as they are blocking the removal of the legacy breakpoint and also impact the possible addition of Grid.
I'm not sure what you refer to with 'For core, none…'? For the extensions I will care about the replacement as I already did for all of the scoped ones.

I just need Web team to review and make sure this is QA'd and you're aware in case any edge case might get flagged afterwards.

To be more explicit:

• https://gerrit.wikimedia.org/r/c/mediawiki/core/+/945931 has various styles that the web team doesn't maintain or is familiar with. The only change there that seems in scope for our team is the comment addition to Skin.php For example Growth team maintains RCFilters according to https://www.mediawiki.org/wiki/Developers/Maintainers and search platform maintains the search CSS. We are not setup to QA any of these these pages.

Fair. My understanding of our environment: if something is off after the change for volunteers, Web team would be the first to get it flagged.
I'm more than willing to take on any conversations about the change and even come up with single fine-tailored changes if everything else is not working. But a +1 by Web team is needed on the pieces that are Web related and awareness about all changes will help possible communication. One example is the change in page.ready.js in the core patch, the code was introduced by you.

• Vector doesn't seem to use legacy tokens (unless the URL in description is incorrect? If you need changes there - happy to review them I just don't understand what changes are needed!)

Right, we've replaced them earlier on with the local variables, that are now part of this task. The local variables have to go though in order to make future amendments of breakpoints visible to DST instead of introducing more local variables mixed into the standard ones.

And none of any of those changes would be mergeable with the sanctus (minimally +1) by Web team.

Change #1037150 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/FlaggedRevs@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

From conversations with both, @Jdlrobson and DST peer engineers, my understanding on how to move this over the finish line:

1. We (DST) are responsible for reviewing and merging the core and the FlaggedRevs patch, former is the predecessor for Vector and MinervaNeue ones, latter is dependent on the Vector one
2. Web team is responsible for reviewing & merging Vector and MF/MinervaNeue and RelatedArticles ones. Latter is dependent on the MinervaNeue one
3. All four should be merged on the same day, preferably a few hours after a Tuesday's cut

Does that sound good for you @Jdlrobson?

Change #1037181 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/RelatedArticles@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Change #1037184 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/MobileFrontend@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Sounds like a plan!

Just for clarification, both mentioned skins, MediaWiki-skins-Mirage and Femiwikiskin have their own @width- variables defined, they are not in scope here.
It's better practice to orient on @min- and @max- like Codex latest does, but it's not necessary.

On a related note, could these breakpoint values be offered as CSS variables, just like we already have CSS variables for colors (e.g. --background-color-base)?

Use case: on frwiki there are some fine-tuned layout tweaks, for example using white-space: nowrap on large screens but not on small screens, and for consistency the same breakpoints as Codex are used, but currently the values have to be hardcoded, as there are no variables offered.

I was thinking the same thing, as I have always used the 720px breakpoint when making templates on dewiki responsive. Would be good to keep it variable based on skins.

I would suggest waiting for container queries to be well supported so that we get basically-skin-agnostic break points, for the content use case. (See also T331227.) WMF will still need their current set but we basically won't once we have those. (We can hardcode the like 2 gadgets that actually play with the full layout e.g. the experimental Timeless and Vector responsive gadgets en.wp has.)

Change #972327 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/MinervaNeue@master] styles: Replace deprecated breakpoints

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

Change #945931 merged by jenkins-bot:

[mediawiki/core@master] styles: Replace deprecated breakpoints

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

Change #972331 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Replace deprecated breakpoints

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

Change #1037150 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Change #1037181 merged by jenkins-bot:

[mediawiki/extensions/RelatedArticles@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Change #972327 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] styles: Replace deprecated breakpoints

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

Thanks for your help on this @Volker_E and for flagging that it needed review from the web team - although at first glance these looked trivial you were right to flag this as more risky than most token changes!

It looks like this work uncovered some problems with the Minerva code, that we wouldn't have known about without doing this. I'm happy we managed to decouple those things and bring skins more in line with the design system team - that's going to reduce a lot of bugs on the long run. There are six visual changes with the above patch but all are improvements so it is an indication we are heading in the right direction. Thanks for the fruitful collaboration.

We will look at the last patch for Vector on Monday 💪

Change #1040301 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Remove remaining deprecated `width-*` breakpoint tokens

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

Related, noticed that Echo defines custom breakpoint ‘@specialpage-hd-width: 982px;’

After T337954 we might now be able to replace that as well

In T349793#9873038, @TheDJ wrote:

Related, noticed that Echo defines custom breakpoint ‘@specialpage-hd-width: 982px;’

After T337954 we might now be able to replace that as well

Nice catch! I think it's better to tackle those in a different task. Researching also uncovered a few more similar, but slightly different breakpoints that would benefit from unification: https://codesearch-beta.wmcloud.org/search/?q=%5C%40media+all+and+%5C%28+min-width&files=&excludeFiles=&repos=#Extension:FlaggedRevs

Change #1040085 had a related patch set uploaded (by Jdlrobson; author: VolkerE):

[mediawiki/skins/Vector@master] Reapply "styles: Replace deprecated breakpoints"

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

Just for completion, an issue in the original implementation of Codex carrying MediaWiki skin variables was uncovered by the work here: T367103: Media queries using max width breakpoints are not working in Monobook and Fallback skin

Change #1040085 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Reapply "styles: Replace deprecated breakpoints"

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

Change #1043218 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.diff: Replace deprecated breakpoint token

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

Change #1043218 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.diff: Replace deprecated breakpoint token

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

Change #1043269 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] rcfilters: Replace deprecated breakpoint token

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

Change #1040301 merged by jenkins-bot:

[design/codex@main] tokens: Remove remaining deprecated `width-*` breakpoint tokens

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

Change #1043269 merged by jenkins-bot:

[mediawiki/core@master] rcfilters: Replace deprecated breakpoint token

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

How can one change the viewport back to 1000px?