== Background
As stated in T331403, from the 10 deprecated legacy tokens in WikimediaUI Base identified, changing the breakpoint variables has some disruptive potential. The change in user-interface presentation needs to be approached sensitively.
See current [[ https://codesearch.wmcloud.org/search/?q=%5C-%3Fwidth%3A+*%5C%28%3F+*%40width-breakpoint&files=&excludeFiles=&repos= | use of legacy breakpoint tokens (CodeSearch) ]]
== Goal
**Why is it important?**
- We need to enable //sunsetting WikimediaUI Base//
- In order to not have devs //looking at different sources of truth//, needing to find their path towards Codex or even wrongly copying WikimediaUI Base vars over.
- Having //different breakpoints blocks further work// like unified responsiveness on design systems patterns or infrastructure like the coming Grid. See {T337282} for the Codex part of it.
**What's changing?**
1. Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile phone only experience.
2. Desktop and desktop-wide kicks in later, by 120px and 480px each.
Specifically latter change will need a closer look when testing the patches.
```lang=less
@width-breakpoint-tablet: 720px; /* Codex: @min-width-breakpoint-tablet is 640px */
@width-breakpoint-desktop: 1000px; /* Codex: @min-width-breakpoint-desktop is 1120px */
```
Update Codex 1.4.0. These breakpoints haven't been used anywhere in our environment again and were removed in 1.4.0.
```lang=less
// Removed in v1.4.0
@width-breakpoint-desktop-wide: 1200px; /* Codex: @min-width-breakpoint-desktop-wide is 1680px */
@width-breakpoint-desktop-extrawide: 2000px; /* Neither A nor B: unique value, no replacement suggested */
```
Note, that `extrawide` is not used in our environment. It was defined in Flow, but never got any other use case.
== Acceptance criteria
[] Replace all mentioned tokens from codebases MediaWiki core
[] Replace all mentioned tokens from codebases MinervaNeue
[x] Replace all mentioned tokens from Vector
[x] Replace all mentioned tokens from WikimediaEvents
[] Replace all mentioned tokens from RelatedArticles
## How to fix
[] Replace `@width-breakpoint-*` [[ https://codesearch-beta.wmcloud.org/search/?q=%40width-breakpoint&files=&excludeFiles=&repos= | CodeSearch ]]
[] Remove them from Codex
[] Remove them from mediawiki.skin.defaults.less