[Spike] Try using the default WikimediaUI Codex theme in Vector
Closed, ResolvedPublic5 Estimated Story Points
Actions

Description

Codex has a legacy Wikimedia stylesheet in core that it sets for Vector 2022. We'd like to see if we can get rid of this.

@Jdlrobson discovered that Codex icons are sometimes larger in Vector than they should be. This is because Vector is using the WikimediaUI Legacy theme from Codex, which uses a 14px base font size, but the font size in much of Vector is actually 16px. In such contexts, em-based calculations that were meant for a 14px base font size output larger sizes.

For example, icons should effectively be 20px minimum in all contexts, but should scale up with increasing font size. We do this by setting the icon size to the em equivalent of 20px (1.25em at a 16px font size and 1.42857em at 14px), then setting a min-size of 20px so the icons can't shrink beyond that. In Vector, when the font size is set to 16px, the 1.42857em height/width value is still used and produces an icon that is 22.857px. This is a regression compared to the existing mw.ui icons.

To resolve this issue, we propose swapping out the legacy theme for the default theme, wikimedia-ui, in Vector. This should resolve any sizing issues in a 16px context. However, we will need to see what happens with the header search box, which is currently set to 14px.

Acceptance criteria

Try using the wikimedia-ui Codex theme in Vector and evaluate the results, especially for TypeaheadSearch. To do this, replace the line here: https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/784fa9a13523f894fc6ee4487c900cd17d65d33d/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less#19 with an import for theme-wikimedia-ui.less.
Note any Pixel-related regressions that occur with the change
Note CSS that can be used to fix the Pixel-related regressions.
Determine whether doing this is a good idea.

Details

	Subject	Repo	Branch	Lines +/-
	Use the standardized Codex design tokens	mediawiki/skins/Vector	master	+1 -3
	POC: Use default codex theme	mediawiki/skins/Vector	master	+11 -31

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		AnneT	T322077 Lower the maintenance costs of TypeaheadSearch in Vector
		Resolved		Jdlrobson	T336548 [Spike] Try using the default WikimediaUI Codex theme in Vector

Event Timeline

AnneT created this task.May 11 2023, 9:24 PM

AnneT mentioned this in T322436: Codex should provide mechanism for flushing icons.

Jdlrobson mentioned this in T336526: Use Codex button/icon markup instead of mediawiki ui markup in Vector.May 11 2023, 11:27 PM

@AnneT would there be any work on the DST side as part of this ticket? I see that you're currently assigned. I'm wondering if we should move it to Following or if we need to take this through refinement.

CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.May 15 2023, 1:30 PM

@CCiufo-WMF Sorry, I must have assigned myself by accident - this would be for the Web team to do, but we will want to discuss the results of the experiment to determine if we want to continue to offer the legacy Wikimedia UI theme in Codex (the one with the 14px base font size).

Jdlrobson triaged this task as Medium priority.May 15 2023, 3:30 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4); removed Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5).

ldelench_wmf moved this task from Needs Refinement to Following on the Design-System-Team board.May 15 2023, 5:02 PM

Volker_E renamed this task from Try using the default Wikimedia UI Codex theme in Vector to Try using the default WikimediaUI Codex theme in Vector.May 15 2023, 9:23 PM

Volker_E updated the task description. (Show Details)

Jdlrobson updated the task description. (Show Details)May 16 2023, 12:38 AM

Note: As soon as we would swap that out we will have to live with the font-sizes of the default theme over the base font-size optimized legacy ones. In a mixed base size interface we'd have more issues scaling down than up from my experience.

Jdlrobson updated the task description. (Show Details)May 16 2023, 11:22 PM

Jdrewniak renamed this task from Try using the default WikimediaUI Codex theme in Vector to [Spike] Try using the default WikimediaUI Codex theme in Vector.May 18 2023, 5:48 PM

Jdrewniak set the point value for this task to 5.

LGoto moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4) board.May 22 2023, 5:35 PM

bwang claimed this task.May 30 2023, 4:54 PM

Change 925019 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Use default codex theme

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

gerritbot added a project: Patch-For-Review.May 31 2023, 8:43 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4) board.Jun 1 2023, 4:40 PM

LGoto edited projects, added Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5); removed Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4).Jun 5 2023, 5:48 PM

LGoto moved this task from Incoming to Doing on the Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5) board.

Try using the wikimedia-ui Codex theme in Vector and evaluate the results, especially for TypeaheadSearch. To do this, replace the line here: https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/784fa9a13523f894fc6ee4487c900cd17d65d33d/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less#19 with an import for theme-wikimedia-ui.less.

Making the 1 line change described here seems pretty easy, running pixel on that change doesnt show any changes. I also ran pixel with this change on the work that uses Codex styles for the buttons and search.

However, the reason for this is that we are overriding theme variables like @font-size-base in common/variables.less, meaning we weren't really relying on the Codex theme and tokens to begin with. The larger issue is that are using @font-size-base instead of @font-size-small. We probably shouldn't switch those variables right now though, because we want to increase the default font size with the font size preference anyway, that work might allow us to stop overriding @font-size-base

I also noticed that the adoption of Codex button styles seems to have reduced font size issues for the icons/buttons in Vector, so theres some nice CSS clean up that we can do around font sizes.

In short, we *could* easily import the default theme right now, but that wouldnt really do anything because we are overriding it anyway. Instead, I'd suggest a new task that handles importing the default theme, removing as many overrides as possible, and cleaning up misc font size related CSS. This new task might be blocked on the font size preference work.

Change 925019 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Use default codex theme

Reason:

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

Maintenance_bot removed a project: Patch-For-Review.Jun 7 2023, 10:11 PM

bwang removed bwang as the assignee of this task.Jun 7 2023, 10:59 PM

bwang moved this task from Doing to Ready for Signoff on the Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5) board.

bwang assigned this task to Jdlrobson.Jun 8 2023, 4:39 PM

In short, we *could* easily import the default theme right now, but that wouldnt really do anything because we are overriding it anyway. Instead, I'd suggest a new task that handles importing the default theme, removing as many overrides as possible, and cleaning up misc font size related CSS. This new task might be blocked on the font size preference work.

@bwang I think that might be worth it, just as it makes clear that the web team has ownership of this issue. While it's there, it gives the design team the impression that it's being used and they have to maintain it with every release. Would you have any concerns with us doing that one line change now?

I'd suggest a new task that handles importing the default theme, removing as many overrides as possible, and cleaning up misc font size related CSS. This new task might be blocked on the font size preference work.

but yes I agree we should do this! Could you set one up?