Page MenuHomePhabricator

`.cdx-mixin-link-base()` styles links in opt-in skins inconsistent with other links
Closed, ResolvedPublicBUG REPORT

Description

Reported by @stjn in T378771#10375376

Background

Wikimedia skin variables can be overriden on a skin level. Many skins define link color without cdx-mixin-link-base but as we adopt cdx-mixin-link-base in more places, this results in links having inconsistent colors across the UI.

Previously we had tokens for links but we have since moved to using progressive colors for links and these are used by the cdx-mixin-link-base.

Perhaps we need to add overrides for color-progressive in all the 3rd party skins or update the mixin to respect any overrides?

Issue not present in Vector 2022 or Minerva.

Steps to replicate the issue (include links if applicable):

  • Visit

https://en.wikipedia.org/wiki/Special:RecentChanges?hidebots=1&hidecategorization=1&hideWikibase=1&limit=500&days=30&useskin=vector&urlversion=2

  • Compare link color for "thanks" link (.mw-pager-tools a) and title a.mw-changeslist-title

What happens?:

  • Thanks link is color-progressive
  • Title link is #0645ad

In Monobook: #002bb8, #0645ad

image.png (456×1 px, 109 KB)

In Timeless: #36c, #0645ad
In CologneBlue: #236, #0645ad
In Modern: #036, #0645ad

What should have happened instead?:

The colors should be the same.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: stjn.
Jdlrobson updated the task description. (Show Details)
CCiufo-WMF subscribed.

I'm trying to better understand this issue -- can classes like .mw-pager-tools a and title a.mw-changeslist-title not use the mixin for just Vector 2022 and Minerva? I don't think the colors need to be consistent across skins, but I agree they should be consistent within a skin.

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

[mediawiki/skins/Vector@master] Legacy Vector: Sync color-link with color-progressive

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

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

[mediawiki/skins/Timeless@master] Add Timeless support for MediaWiki skin variables

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

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/1aa17a28b9/w/

I'm trying to better understand this issue -- can classes like .mw-pager-tools a and title a.mw-changeslist-title not use the mixin for just Vector 2022 and Minerva? I don't think the colors need to be consistent across skins, but I agree they should be consistent within a skin.

Typically extensions write CSS that should work across skins. We can write skin-specific stylesheets but that means maintaining the different versions and I don't think we can want to do that. This specific issue relates to button-links.

I think the problem here is that a lot of these skins were written prior to mediawiki.skin.variables and previously we had a dedicated variable for link color @color-link that has now been replaced with @color-progressive. Since @color-progressive applies to more elements, it means that if skins want different link colors, they also need to modify other elements that use color-progressive.

I made a patchdemo to demonstrate how this might look and how it might subtly impact other parts of the UI
https://patchdemo.wmcloud.org/wikis/1aa17a28b9/w/index.php?hidebots=1&limit=50&days=7&enhanced=1&title=Special:RecentChanges&useskin=vector&urlversion=2
(please login)

I would rather modernize the existing skins to embrace the theming controls than writing code targeting our default skins. It seems better for the sustainability of our skins.

I'd also consider if skins using MediaWiki skin variables were better off handling an alias for tokens like color-link as aliases already in core's default.
Having a full fledged state handling there, not the semi-complete looking

@color-link: #0645ad;
@color-link--visited: #0b0080;
@color-link--active: #faa700;

as part of bigger skin architecture thinking.

Change #1101939 abandoned by Jdlrobson:

[mediawiki/skins/Timeless@master] Add Timeless support for MediaWiki skin variables

Reason:

(Proof of concept only for patchdemo)

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

Change #1101938 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Legacy Vector: Sync color-link with color-progressive

Reason:

(Proof of concept only for patchdemo)

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

Task ping-pong aside, when is something going to be done about this? Codex link colours are worse for accessibility, and I am using Vector 2010 partially to never have to see them while logged-in. Even if Modern and Cologne Blue get undeployed, all other skins still get detrimental experience because of Vector 2022, so this still needs fixing.

@stjn I will bring this back to Design System Planning in the next sprint starting 17 Feb. Given our workload, I'm not fully sure when the earliest is that we will be able to care about it. But I have already a proposal on my mind, that would work with relatively little effort if agreed-on.

We'll explore solutions to this as related issues in T336344.

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/1aa17a28b9/w/

Catrope triaged this task as Medium priority.Jul 15 2025, 3:13 AM
Catrope moved this task from Upcoming to Ready for Design/Dev on the Codex board.
Volker_E renamed this task from cdx-mixin-link-base generates links in opt-in skins inconsistent with other links to `.cdx-mixin-link-base()` styles links in opt-in skins inconsistent with other links.Jul 24 2025, 7:32 AM
Volker_E edited projects, added CSS; removed Design-System-Team.

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

[mediawiki/skins/Vector@master] styles: Re-ordering skin variables overrides in legacy

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

This looks fixed to me @Volker_E even without your patch? Did it get fixed upstream?

Only because .mw-logevent-actionlink a, .mw-logevent-tool a, .mw-diff-tool a, .mw-pager-tools a is now assigned a link colour. There are other places where this might still fail the same way.

Only because .mw-logevent-actionlink a, .mw-logevent-tool a, .mw-diff-tool a, .mw-pager-tools a is now assigned a link colour. There are other places where this might still fail the same way.

From what I can see @stjn all links are now using the same CSS variable so this is issue is fixed. What am I missing? What are the other places it might fail ?

  • In Vector I'm seeing color: #0645ad; for the a selector which uses the color-link variable in mediawiki.skinning.
  • This matches the rules for .mw-logevent-actionlink a, .mw-logevent-tool a, .mw-diff-tool a, .mw-pager-tools a which is in the helpers module and is using the mixin which also uses @color-link so my understanding is that all links are using the same variable now.
matmarex subscribed.

This looks fixed to me @Volker_E even without your patch? Did it get fixed upstream?

Yes, I think this has been resolved by the color tokens (including @color-link) added in T336344 (Codex v2.3.1).

If I understand correctly, Volker's patch here is just a documentation change (moving the token overrides from the "Non-Codex Legacy Vector Variables" section to the "Legacy Vector specific overrides for Codex Design Tokens" section, since Codex now defines these tokens).

Only because .mw-logevent-actionlink a, .mw-logevent-tool a, .mw-diff-tool a, .mw-pager-tools a is now assigned a link colour. There are other places where this might still fail the same way.

I found several other tasks about incorrect link colors (I linked them all to T336344) and they are all resolved now, so I'm pretty sure that this is really resolved, and not just an accident.

Change #1181104 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Re-ordering skin variables overrides in legacy

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