Page MenuHomePhabricator

Language selector menu: Standardize styling to match Vector 2022
Open, LowestPublic

Description

Description

The styling of the menus displayed by Vector 2022 should be updated to get them closer to the Design style guide/ Wikimedia design system (link to Codex).

This task documents the main changes needed to make the language selector menu more consistent, with both the DSG and the rest of the menus in Vector 2022 (which are also in the process of being updated: see related task T317558: [Visual refinements] Standardize menu border radiuses & box shadows).
Please note that this task focuses on the style of menu and menu items. Other menu elements that could potentially be standardized are out of scope and should be tackled separately.

To-do
  • Update the border color of the menu and the search input it contains to #a2a9b1 (@border-color-base)
  • Update the menu's box-shadow to 0 2px 2px rgb(0 0 0 / 20% (@box-shadow-drop-medium)
  • Update the menu item's hover color from #eaeff7 to #eaecf0
  • In case the menu is considered navigational, then the links should be underlined when the items are hovered. Otherwise, the color of the items should be #202122 (@color-base)
  • The background color of the language list (#fcfcfc) is not part of the DSG palette. We recommend using #fff or #f8f9fa.

Event Timeline