Audit border colours in VE
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Esanders
	Oct 7 2025, 10:50 AM

Description

Codex has a rather large list of border colours to choose from (10 of which are shades of grey): https://doc.wikimedia.org/codex/latest/design-tokens/border.html

VE uses some colours from the old design guide that are no longer on that list, specifically #eaecf0 / color.gray100:

Separator between multiple context items on desktop & mobile, and link label
Close button separator on mobile toolbar
Horizontal separators between head/body/foot on mobile
Symbol list button borders. Fixed in T406982
Add new image button in gallery dialog

The lightest grey allowed now is #dadde3 / color.gray200 / border-color-muted, although that is currently unused in VE. In many places we are using #c8ccd1 / color.gre300 / border-color-subtle for internal borders (e.g. desktop toolbar separators, visual diff sidebar).

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Update VE core submodule to master (714b3ae07)	mediawiki/extensions/VisualEditor	master	+13 -33
Replace gray100 borders with @border-subtle (gray300)	mediawiki/extensions/VisualEditor	master	+3 -4
Replace gray100 borders with @border-subtle (gray300)	VisualEditor/VisualEditor	master	+16 -6

Customize query in gerrit

Related Objects

Mentioned In: T406982: Standardise buttons in SymbolList
T404666: Edit Check: Dialog Title (for Suggestion Mode and Suggested Edits)
Mentioned Here: T406982: Standardise buttons in SymbolList

Event Timeline

Esanders created this task.Oct 7 2025, 10:50 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 7 2025, 10:50 AM

Esanders mentioned this in T404666: Edit Check: Dialog Title (for Suggestion Mode and Suggested Edits).Oct 7 2025, 10:51 AM

Change #1194170 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Replace gray100 borders with @border-subtle (gray300)

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

gerritbot added a project: Patch-For-Review.Oct 7 2025, 11:02 AM

Esanders updated the task description. (Show Details)Oct 7 2025, 11:08 AM

Change #1194173 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Replace gray100 borders with @border-subtle (gray300)

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

I agree on using border-color-muted when the border is purely decorative and it's not really needed. So I think we could use it for all the examples listed in the task.

Except for symbol list button borders. Here, we should use a Normal Neutral Button instead of creating a custom button with custom hover and active states.

DLynch subscribed.Oct 7 2025, 3:33 PM

The reason we don't use regular buttons there is because buttons are variable width based on their content, whereas we want the symbol list to align to a grid, so each button is fixed width, and with tighter margins. We should probably address that feature in a separate task.

Filed as T406982

bmartinezcalvo mentioned this in T406982: Standardise buttons in SymbolList.Mon, Oct 13, 10:05 AM

Change #1194170 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Replace gray100 borders with @border-subtle (gray300)

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

bmartinezcalvo updated the task description. (Show Details)Wed, Oct 15, 8:59 AM

bmartinezcalvo updated the task description. (Show Details)

Is there more that needs to be done here now those gray100 borders have been replaced?

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://7b73b67137.catalyst.wmcloud.org/w/

I've reviewed the updated borders and they look good.

Change #1196039 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (714b3ae07)

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

Change #1194173 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Replace gray100 borders with @border-subtle (gray300)

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

Excellent, thanks for checking! (And sorry you had to make a patchdemo -- I didn't notice that the second patch I'd +2'd had its merge stall out.) We can probably count that as QA for this.

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.24; 2025-10-21).Wed, Oct 15, 7:00 PM

Change #1196039 merged by jenkins-bot: