Vector 2022 user menu icons are smaller and blurry
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	matmarex
	May 13 2025, 7:10 PM

Description

Vector 2022 user menu icons are smaller and blurry in wmf.1.

https://test.wikipedia.org/wiki/Special:Version (1.45.0-wmf.1)	https://en.wikipedia.org/wiki/Special:Version (1.44.0-wmf.28)

Developer notes

As of Codex v2.0.0-rc.1 the tokens output is

@min-size-icon-x-small: 10px;
@min-size-icon-small: 14px;
@min-size-icon-medium: 18px;
@size-icon-x-small: calc( @font-size-medium - 4px );
@size-icon-small: @font-size-medium;
@size-icon-medium: calc( @font-size-medium + 4px );

With Vector setting --font-size-medium: @font-size-small; in CSSCustomProperties, we end up with value of 0.875rem, which results in 18x18 px icons.

.vector-icon is currently used at:

PageToolbar
Watchstar
LanguageDropdown
Icon

#p-lang-btn-label.cdx-button--icon-only, #vector-page-titlebar-toc-label, .vector-header .cdx-button.cdx-button--icon-

only with Tablet override

Details

	Subject	Repo	Branch	Lines +/-
	styles: Fix blurry sizing of `.vector-icon`s by setting its size to 1rem	mediawiki/skins/Vector	master	+3 -1

Customize query in gerrit

Related Objects

Mentioned Here: T393739: Font modes: prototype integrating font modes into Vector 2022

Event Timeline

matmarex created this task.May 13 2025, 7:10 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 13 2025, 7:10 PM

• Jdlrobson-WMF added projects: Codex, Design-System-Team.May 13 2025, 9:02 PM

Hey @matmarex - the overall size change is an expected result of the latest Codex release, but the blurriness is not - we'll be discussing this tomorrow and will respond here. Thanks for flagging!

This is a side-effect of scaling SVG icons with 20x20 canvas to 18x18 px at default font mode in combination with Vector setting font-size-medium to 0.875rem. We will have a conversation about it in tomorrow's DST design sync meeting on how to proceed.

Volker_E updated the task description. (Show Details)May 13 2025, 10:57 PM

Volker_E updated the task description. (Show Details)May 14 2025, 12:25 AM

Volker_E added a project: CSS.

Volker_E updated the task description. (Show Details)May 14 2025, 4:55 AM

Option 1: vector-icon override

Set vector-icon to use font-size-medium when at medium. That would be self-referential, but fallback to 1rem with the calc to 20px., which would result in a correct rendering.

	.vector-icon {
		--font-size-medium: @font-size-medium;
		--line-height-medium: @line-height-medium;
	}

Pro: Limited code effort and only one place to be concerned about
Con: Self-referential, so code-wise questionable

Option 2: Replacing all size tokens with one token larger

Fixing applications of the cdx-mixin-css-icon() calls
Pro: Works
Con: Basically another workaround on top of something that should work out of the box

Option 3: mixin update on min-size

Fixing .cdx-mixin-css-icon() min-width/min-height
Pro: Limited code effort
Con: Doesn't fix source of issue, also needs another Codex release wait time