Height seems to be because of how the vector styles treat .mw-ui-icon-element and .mw-ui-button:not(.mw-ui-icon-element). It's definitely deliberately-specified, though I agree that the highlights being different between adjacent buttons seems a bit strange.

You can see the same design-choice happening in the non-sticky header between your username and the notification buttons (albeit with different classes involved):

I think the icon should have the same color as the text next to it at all times—in normal mode dark blue, in hover mode a somewhat lighter blue (if I see it correctly), and in active mode white.

• 1. The height of the "Active (current)" button is less than that of other buttons in the sticky header. How – if at all – should the height of this button be adjusted?

@nayoub before I signal to engineering that this task is ready to be worked on, what do you think about the question I'm quoting above that @DLynch posed in T314488#8128473?

@ppelberg I wonder why that height changes, I guess it has to do with the icons being bigger due to badges. Given they serve different purposes and thus visual treatments, I don't see any particular issue with this.
cc @alexhollender_WMF – curious to get your thoughts on this :)

In T314488#8175721, @nayoub wrote:

@ppelberg I wonder why that height changes, I guess it has to do with the icons being bigger due to badges. Given they serve different purposes and thus visual treatments, I don't see any particular issue with this.
cc @alexhollender_WMF – curious to get your thoughts on this :)

I mentioned this to @nayoub in Slack, adding here for additional clarity: after we do T314323: [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022) all buttons should be 32px tall. cc @bmartinezcalvo who is helping with that and can further clarify any questions about correct button sizing.

Currently there are some visual differences between our OOUI and our Codex quiet progressive buttons inspect the Figma here:

As our Codex components are the ones we are improving and they are more aligned with what we want for our Design System, I would recommend to use the Codex quiet button states that are the following:

• Hover: background-color-progressive--subtle
• Active: our current colors are background-color-progressive--active for background and color-inverted for text

(The rest of states are the same in OOUI and Codex components)

In T314488#8128473, @DLynch wrote:

Height seems to be because of how the vector styles treat .mw-ui-icon-element and .mw-ui-button:not(.mw-ui-icon-element). It's definitely deliberately-specified, though I agree that the highlights being different between adjacent buttons seems a bit strange.

You can see the same design-choice happening in the non-sticky header between your username and the notification buttons (albeit with different classes involved):

Hi @DLynch as an FYI our current plan is to eventually replace mw-ui-icon with Codex. We're talking with design systems team about how to keep them in sync (as they are currently not but they should be). T314323 is the task for that.

Notifications button are a whole separate issue we're trying to find space to do with the Growth team (see https://phabricator.wikimedia.org/T257143). OOUI is not loaded on page view, and currently loaded only when you click those icons. We're trying to minimize use of OOUI in the new Vector as keeping mw-ui-icon and Codex is complicated enough without adding OOUI to the mix!

In T314488#8216102, @ppelberg wrote:

hi @bmartinezcalvo! The guidance you shared in T314488#8193133 is helpful...thank you!

A resulting meta question for you (I think)...

Is the current expectation for teams like us (the Editing Team) to start designing and implementing interfaces using Codex?

@ppelberg the intention is to start applying the same styles defined in Codex, since they are the ones we are improving and those we want to last over time. From a technical point of view, each team must decide whether to use OOUI/Codex based on their own requirements.

In T314488#8220123, @bmartinezcalvo wrote:

In T314488#8216102, @ppelberg wrote:

hi @bmartinezcalvo! The guidance you shared in T314488#8193133 is helpful...thank you!

A resulting meta question for you (I think)...

Is the current expectation for teams like us (the Editing Team) to start designing and implementing interfaces using Codex?

@ppelberg the intention is to start applying the same styles defined in Codex, since they are the ones we are improving and those we want to last over time. From a technical point of view, each team must decide whether to use OOUI/Codex based on their own requirements.

Understood – thank you for sharing this additional context, @bmartinezcalvo ^ _ ^

@nayoub, based on what Barbara shared above, it sounds like we ought to modify the task description's Desired behavior to match the specification in T314488#8193133...does that sound right to you?

Thanks a lot @bmartinezcalvo for all the context!

@nayoub, based on what Barbara shared above, it sounds like we ought to modify the task description's Desired behavior to match the specification in T314488#8193133...does that sound right to you?

Yes agreed @ppelberg updating now :)

In terms of colors and heights, web team (mostly I) and @Volker_E are working on aligning those as part of T317800 and associated epic T314323 (participation welcomed if that doesn't address the issues here!). I would rather we didn't add interim solutions here, unless you are happy to own fixing any UI regressions relating to the work we'll doing.

Regarding the icon being the wrong color in the active state, feel free to fix that with an interim solution (T198770 has some ideas worth trying). Currently, that's not in the scope of the work I'm trying to address with Volker.

META
Per the 29-Sep, "Web Editing check-in" meeting, we (the Editing Team) are going to wait on addressing this issue until Web/DST are able to offer guidance about how/if the buttons within the Vector 2022 sticky header will become CODEX components.