Background
We currently handle several types of links (including “red” links) by assigning specific component tokens. However, we’d like to add distinct tokens for normal links (and possibly dark links in the future).
Note that all Wikimedia deployed skins’ 'mediawiki.skin.variables.less' file already implement this pattern.
Why focus on Links?
Links and buttons are in our default "WikimediaUI" Codex theme both “progressive” elements with color-progressive as chosen token, but that's not very common in other user-interface stylings. They often are styled differently.
Right now, “red” links have their own token, and it’d also be consistent to give normal links their own dedicated tokens as well. This prevents styling collisions and keeps the theming of links separate from all other "progressive" elements (like buttons) _if needed_.
Known use cases
- mediawiki.skin.variables.less and (any/all) skins that rely on it.
- T336065: The color of the legacy Vector TOC toggle became lighter highlights having distinct link tokens were beneficial.
Related issues
- T377664: Discussion tool's reply button doesn't have good coloring in dark mode
- T381415: `.cdx-mixin-link-base()` styles links in opt-in skins inconsistent with other links
- T388198: "thanks" action on diffs has a different blue than other links
Goal
Style links simpler without facing theming issues on other, in many skins/themes visually distinct, components.
User stories
- As skin author and Codex theme author, I'd like to separate out link colors from other progressive elements in order to not run into collision with the two similar, but distinctly used styles.
Previous implementations
Design spec
| Component spec sheet tbd |
Open questions
- Nomenclature:
- link or link-default? => link for simplicity and dev-exp reasons here.
- link-red or link-new? => link-red as it not only is a group for new, but also undefined articles and is the term used by the wikis for it. See also T313507
- link-dark or link-subtle? => link-subtle as dark doesn't provide clarity in multi light mode environment like ours.
Acceptance criteria for done
Design
- Rename and move link--visited--x tokens to be component tokens and ensure continued linkage to Link
Code
- Implement the default link component tokens in Codex, as color-link default and color-link--hover etc. as state tokens with current WikimediaUI theme using skin (Vector & MN) values of aliasing color-progressive etc.
- Update components/mixins that use these tokens
Follow-up after Codex release upstream into MediaWiki
Tackle the current skin issues and other architecture issues derived from this: