=== 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.65`/`opacity: 0.66` is replaced by `opacity: @opacity-icon-subtle` which features `0.67` as value.
==== Open questions
Several modules use `border: 1px solid @wmui-color-base80` which equals `#eaecf0`. This is not a DS border-color yet.
**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;
}
```
**StartEditing module** features
`background-color: #f5f9ff;`, which is not part of the color palette. What to do?
**RecommendedLinkToolbarDialog** features
```lang=less
.mw-ge-recommendedLinkToolbarDialog-linkPreview-icon {
background-color: @wmui-color-base70;
border: 0.35714em solid @wmui-color-base70;
```
Assuming that this should feature a 5px border, this is also a non-standard border-width.
==== 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