=== Background
As outlined in parent task T332541 MediaWiki core v1.41.0 on provides [[ https://doc.wikimedia.org/codex/main/design-tokens/overview.html | Codex design tokens ]] via mediawiki.skin.variables.
They are much more powerful and comprehensive and aim to replace both, 'mediawiki.ui/variables' and WikimediaUI Base.
GrowthExperiments have used both variable files interchangeably and extensively.
As we're touching a number of files and also replace some values that are close, but not 1:1 equivalent, this task is providing the venue to discuss possible visual amendments.
=== Goal
Replace all calls of the former central variable files
While at it, also provide best practice usage of Codex design tokens. For example colors shouldn't be directly referenced in code (don't: `color: @wmui-color-base30;`, do: `color: @color-subtle`)
==== Developer/designer notes
* `color: @wmui-color-base30;` (#72777d) is replaced by `color: @color-subtle` (#54595d) as only disabled and placeholder elements receive `72777d` in Codex latest token definition.
* `opacity: 0.64`/`opacity: 0.65`/`opacity: 0.66` is replaced by `opacity: @opacity-icon-subtle` which features `0.67` as value.
* `sup { color: #0645ad; }` is replaced by `color-progressive`. No clue why the legacy Vector was used here.
==== Open questions
1. **Several modules use `border: 1px solid @wmui-color-base80`** which equals `#eaecf0`. This is not a DS border-color yet.
2. **Structured task onboarding** features a “link”? Visited color should be `color-progressive-visited`
```lang=less
&-link {
color: @color-progressive;
&:visited {
// TODO: This should actually feature `@color-progressive--visited`.
color: @color-progressive;
}
```
The link is used on step two of the onboarding dialog for the "Learn more about machine suggestions" text {F36922785}
3. **StartEditing module** features
`background-color: #f5f9ff;`, which is not part of the color palette. What to do?
(comment from @kostajh: This is particular block of code can be removed; we used to show it in mobile Special:Homepage for unactivated suggested edits module. However, we always show an activated suggested edits module on Special:Homepage. And we use the same `background-color: #f5f9ff;` rule for that, so we do need to make some kind of update here: {F36922814})
4. **RecommendedLinkToolbarDialog** features
```lang=less
.mw-ge-recommendedLinkToolbarDialog-linkPreview-icon {
border: 0.35714em solid @wmui-color-base70;
```
Assuming that this should feature a 5px border, this is also a non-standard border-width.
The icon is used when the article does not have an image {F36922819}, added in {949e5de7}.
==== Acceptance criteria for done
[] Replace all calls to 'mediawiki.ui/variables'
[] Replace all mediawiki.ui variables
[] Replace all calls to '[…]lib/wikimedia-ui-base/wikimedia-ui-base.less'
[] Replace all WikimediaUI Base variables
[] Replace close static values, starting with background-colors, colors, opacities, border properties and border-radius