Task Breakdown Notes:

• We cannot import the less mixin, as we are using sass
• Compose our own link from codex tokens, which can be done by copy-pasting /packages/codex/src/themes/mixins/public/link.less into MSMF and "translating" it into sass
• Note: @Sarai-WMDE, we cannot find another way to use this mixin other than "recreating" it for use in mismatch finder. This means that no changes for this mixin in codex will trickle downstream to MSMF. The best way to ensure this "trickling down" happens is by exporting pure CSS classes derived from the mixin to the codex stylesheet for use in a language agnostic way (CC Design-System-Team).

Potential Plan of Action:

1. Copy the link.less file to MSMF
2. Convert the file into sass
3. Replace Wikit Links with the new local Codex-based mixin
4. Make sure browser tests and unit tests pass

https://github.com/wmde/wikidata-mismatch-finder/pull/772

Hey hey. Finally reviewing this. Sorry for the delay, @noarave. Here are a couple of comments:

1. The current implementation applies the Codex link mixin styles to all <a> elements via app.scss. Nevertheless, this styling should be reserved only for text elements (or text+icon). The MSMF logo shouldn't display the link's outline when active/focused:

2. The "Log in" link displays the color #a2a9b1 in its default state (the style of all other states are fine). It appears to be inheriting it from the auth-widget div:

3. This is rather an improvement, so let's evaluate if we should capture it in a separate small task instead (att @Arian_Bozorg): It's not relevant for users to know if they have visited the "Log in", "Log out" or their user page (involuntary revisits are unlikely). The auth links don't need to display a visited state.

4. Also not critical, as it affects the MSMF Store, but there the focus outline of the auth links is too big. (We could apply the same solution we applied in the app here):

{F41601695}

putting this back into doing since there's more work needed

Some of the requested improvements are addressed here https://github.com/wmde/wikidata-mismatch-finder/pull/793

• :visited and :hover styles were removed from auth widget links
• navigation outline was removed from the logo

Thanks for removing the navigation outline of the logo (1) and the :visited state in auth links (3)! The default :hover state of the links should remain, though, since this indication is needed. (I actually can still see hover states in staging. In fact, each auth widget link displays a slightly different style on hover now).

I can see that the issue with the default color of the auth links has also been fixed (2). None of the fixes have been applied to the Mismatch Finder store, but I guess that's out of scope and I shouldn't have brought it up (won't do it again unless severe UX issues are detected – which will hardly be the case).

I noticed that the alignment of the links in relation to the language button got a bit off-center. I'm unsure if this is related to the latest link changes, and of whether it should be fixed as part of this task or any other. Here's a comparison:

Before	Current

https://github.com/wmde/wikidata-mismatch-finder/pull/830

Hello, @Sarai-WMDE I guess more of a question for UX: if the log in link in the AuthWidget is not supposed to have a visited state (aka purple color after visited)... is it supposed to have a visited state when it is part of the message component?

In T347161#9468604, @guergana.tzatchkova wrote:

Hello, @Sarai-WMDE I guess more of a question for UX: if the log in link in the AuthWidget is not supposed to have a visited state (aka purple color after visited)... is it supposed to have a visited state when it is part of the message component?

Copying here my answer from GitHub:

Good question. TL;DR: It doesn't have to, but it's also not as important to remove the visited state in this case.
This is one of those "it depends" scenarios: providing people with the indication that they have followed the log in link included in the message becomes irrelevant after the first use. But, since this is not a static navigation option on the page, I don't think removing the visited state is so essential either. Consistency between the log in links is also not obligated because they have different context of use (static header navigation vs. content). So, I would tentatively leave it as is? Unless you had any other arguments that I might be overlooking. In which case, please feel free to share 🙏

Thanks for the latest changes! There is just a small fix left to make: As mentioned in a previous comment, the "user page" and the "log out"/"log in" links display different colors on hover. The former has the correct style: in both cases, the link text color should be progressive-hover.

https://github.com/wmde/wikidata-mismatch-finder/pull/838

Taking this back to Peer Review

All fixed. Thank you!

Unfortunately, I just noticed that the MSMF logo still displays (or displays again?) the unwanted outline on click:

I'll move this ticket back to Product verification for now, just to signal that it's not done. Let's decide how we want to approach the fix from that point on.

This style was overwritten when merging the replaced token chain
https://github.com/wmde/wikidata-mismatch-finder/pull/877

Thanks for the speedy fix! :)

In T347161#9516504, @noarave wrote:

This style was overwritten when merging the replaced token chain
https://github.com/wmde/wikidata-mismatch-finder/pull/877

Comment from the side-lines: I've skimmed the change and saw outline: none there. When setting outline to none or 0 users of Windows High Contrast Mode are taken a navigational helper.
It's preferable to use outline: 1px solid transparent as the Codex outline-base--focus token currently carries as value.