regarding the hover state: in an attempt to keep styles somewhat limited and consistent let's follow what the ULS links are doing:

for the <li>: background-color: #eaeff7
for the <a>: text-decoration: none

I've added this to the task description

I don't quite understand how links in the header and dropdowns are considered unique link styles or "non-standard styling". I don't have a say on the design itself, but I do feel like the reasoning for this change isn't very consistent.

The "Create Account" link is styled as a quiet button, same as the watchlist button. Both are links styled as design system buttons, why is only "Create Account" considered non standard? Similarly, the links inside the menu are styled as menu items. That's why clicking the whitespace activates the link, and why there isn't a "visited" style on any of the menu items. This is the same reason why if we put a button inside a dropdown menu (i.e. "Opt out of new skin" or "pin menu to sidebar"), they don't need to be styled as a button with active states and a separate border/padding.

In T312157#8088689, @bwang wrote:

The "Create Account" link is styled as a quiet button, same as the watchlist button. Both are links styled as design system buttons, why is only "Create Account" considered non standard?

I also consider the watchlist icon-button non-standard. However there is not yet a simple solution to fix that, whereas for "Create account" or "Username" there is.

Similarly, the links inside the menu are styled as menu items. That's why clicking the whitespace activates the link, and why there isn't a "visited" style on any of the menu items.

We don't yet have a clear concept of a "menu item" in our design system. We do however have a clear concept for a link, and the elements discussed in this task are links presented inside a menu. As the design system progresses we may decide upon a different styling for links vs. links inside of menus.

This is the same reason why if we put a button inside a dropdown menu (i.e. "Opt out of new skin" or "pin menu to sidebar"), they don't need to be styled as a button with active states and a separate border/padding.

As I shared in my comment on a related task (T311270#8056457) we have yet to decide how explicit to be about buttons within menus. In earlier prototypes, before I was focused on this issue, I used black text for both links and buttons. As I discovered the lack of design system guidance I started using blue for links and for buttons. Currently our two options for such buttons ("Opt out of new skin" or "pin menu to sidebar") are quiet buttons (black w/ bold text), or normal buttons.

Just noting that as part of this task, I'm aiming to consolidate the styles for all vector dropdowns, not just the user menu:

Change 816195 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [Refactor] Split MenuDropdown.less for modern and legacy

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

Change 816788 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Unify dropdown styles

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

Hi @alexhollender_WMF , I have a patch in progress for this ticket.
Patchdemo available here: https://patchdemo.wmflabs.org/wikis/f33d66756f/w/index.php?title=Main_Page&useskin=vector-2022

username:Patch Demo
pass: patchdemo1

A few questions:

• Should the link to the user-page be red if the page doesn't exist yet? This is the case for legacy Vector and most other skins.
• I made the chevron point up if the dropdown is open (like in legacy Vector), just confirming if that's desired.
• (maybe out of scope) Do we still want the slightly gray text for the anon editor description "pages for logged out editors (learn more)"?
• (maybe out of scope) Do we still want the slightly gray text on dropdowns in the tabs (i.e. "more" menu)?

In T312157#8101861, @Jdrewniak wrote:

Hi @alexhollender_WMF , I have a patch in progress for this ticket.
Patchdemo available here: https://patchdemo.wmflabs.org/wikis/d91ad86f86/wiki/Main_Page?useskin=vector-2022

nice, this is looking great : )

A few questions:

• Should the link to the user-page be red if the page doesn't exist yet? //This is the case for legacy Vector and most other skins.

yes, i think we should keep this functionality

• I made the chevron point up if the dropdown is open (like in legacy Vector), just confirming if that's desired.

nice, that looks awesome

• (maybe out of scope) Do we still want the slightly gray text for the anon editor description "pages for logged out editors (learn more)"?

good catch, let's switch that to black now that the links are blue

• (maybe out of scope) Do we still want the slightly gray text on dropdowns in the tabs (i.e. "more" menu)?

ugh yea, this is a whole other can of worms. for now we can use black, just to eliminate more random styles

one other thing I noticed: since the username & "Create account" links aren't in a menu, they should have the normal hover styling (i.e. underline), and no additional padding

@alexhollender_WMF One more question regarding the dropdown hover behaviour.
In legacy Vector, the dropdowns in the tabs (e.g. more menu) open when you hover over them. Do we want that to happen in modern Vector?
Never mind this was regarding an omission in the patch in legacy Vector.

In T312157#8102397, @Jdrewniak wrote:

@alexhollender_WMF One more question regarding the dropdown hover behaviour.
In legacy Vector, the dropdowns in the tabs (e.g. more menu) open when you hover over them. Do we want that to happen in modern Vector?

nope, they should open only when clicked (pretty sure we fixed this already, because for me in Vector 2022 those menus only open on click?)

Change 816195 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Refactor] Split MenuDropdown.less for modern and legacy

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

In T312157#8102397, @Jdrewniak wrote:

@alexhollender_WMF One more question regarding the dropdown hover behaviour.
In legacy Vector, the dropdowns in the tabs (e.g. more menu) open when you hover over them. Do we want that to happen in modern Vector?
Never mind this was regarding an omission in the patch in legacy Vector.

@Jdrewniak could you document this in the code in a logical place? This has come up numerous times in bug reports so it seems like a good thing to document as explicit behaviour.

Change 816788 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Unify dropdown styles

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

@Jdrewniak reassigning to you because the user links styles arent updated yet and i dont see any other patches open

Change 819747 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Followup to ce007e0 - Unify dropdown styles

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

@alexhollender_WMF the patch above addresses the issue you discovered with Twinkle.

It explicitly sets the font-size and font-weight for the dropdown menu labels (to very generic values though, font-size:inherit and font-weight:normal) which is what we want anyway.

@Jdrewniak reassigning to you because the user links styles arent updated yet and i dont see any other patches open

https://gerrit.wikimedia.org/r/816788 is visible on beta. That patch updates the menu styles, but since I posted a new patch: https://gerrit.wikimedia.org/r/819747 I'll pass it back to code-review 😉.

one other thing I noticed: since the username & "Create account" links aren't in a menu, they should have the normal hover styling (i.e. underline), and no additional padding

That was an omission on my part. Just noting that it still needs to be done!

Change 819747 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Followup to ce007e0 - Unify dropdown styles

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

Change 820443 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/UniversalLanguageSelector@master] Horizontally center trigger icon + label for Vector 2022

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

Change 820445 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Remove .mw-ui-button styles from user-links overflow menu

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

The last two patches should address the create account/userpage links as shown in the description.

Removing the button styles does expose the redlink style on the userpage though. Is that ok?

From Gerrit:

We intentionally decided to not have these red (I remember refactoring core to explicit avoid this). See https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/721622 commit message and associated https://phabricator.wikimedia.org/T288739. IIRC the thought process was the user page and red link for contributions might be discouraging as red is associated with error and doing something wrong and both of these pages have information of value.
If we want these back to the way we were before I'd suggest doing this change separately as we'll likely want to undo those changes.

Ok. Per @Jdlrobson's comment above & previous discussion about the userpage redlink color, and the previous comment about the language switcher, I've updated the patch so that the userpage link is always blue, and the language switcher is black and carries the .mw-ui-button-quiet styles.

@Jdrewniak is it just https://gerrit.wikimedia.org/r/c/820445 that is remaining on this ticket?

@Jdlrobson sure hope so!

Change 820445 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove .mw-ui-button styles from user-links overflow menu

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

This may have caused T315219

Change 820443 abandoned by Jdrewniak:

[mediawiki/extensions/UniversalLanguageSelector@master] Horizontally center trigger icon + label for Vector 2022

Reason:

Addressed in Vector's addPortletLink hook.

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