Page MenuHomePhabricator

Extend colour and size guidelines of the Wikimedia icon set
Open, Needs TriagePublic

Description

The current Wikimedia icon set is limited as there is no "tokenisable" way to add icons in all the colours of the style guide, and at a size other than 20x20dp. We should address this as part of the Codex effort (tracked in T277047).

Specific examples:

Colour

Limitations and lack of clarity on how to implement at in different palette colours. E.g., in the Growth projects, we are using the robot icon to denote a task as one suggested by machines. We would like to have it appear in Green30, Yellow30 or Red30 next to the corresponding difficulty level text colour but this is not currently an easy thing to achieve using the OOUI icon set.

image.png (742×256 px, 34 KB)

Size

The DSG is missing guidance on setting at different sizes in certain context (e.g., when in use as an illustration or in headers as a decorative element)

image.png (242×412 px, 19 KB)
image.png (662×748 px, 33 KB)

Use inline with text elements

Easily enabling inclusion of icons when used in for example help text. This includes having the ability to also specify size that is smaller than the 20x20dp. Example from the Growth teams's newcomer help panel and homepage features:

image.png (674×780 px, 55 KB)
image.png (206×624 px, 38 KB)

Event Timeline

Note that MediaWiki currently already provides an ability to define color variants for specific icons via ResourceLoaderImageModule.
While GrowthExperiments has already defined certain icons itself, and also features a non-guideline default color #4A4F53 for the 'newspaper' icon(?!), it doesn't define further variants.

In the example provided in the task description for the levels the code would translate to:

"ext.growthExperiments.Homepage.icons": {
	"class": "ResourceLoaderImageModule",
	"selectorWithVariant": ".oo-ui-image-{variant}.oo-ui-icon-{name}",
	"selectorWithoutVariant": ".oo-ui-icon-{name}",
	"variants": {
		"green30": {
			"color": "#14866d"
		},
		"yellow30": {
			"color": "#ac6600"
		},
		"red30": {
			"color": "#b32424"
		}
	},
	"images": {
		"difficulty-outline": {
			"file": {
				"ltr": "../images/levels-outline-ltr.svg",
				"rtl": "../images/levels-outline-rtl.svg"
			}
		},
		"difficulty-easy": {
			"file": {
				"ltr": "../images/difficulty-easy-ltr.svg",
				"rtl": "../images/difficulty-easy-rtl.svg"
			},
			"variants": [ "green30" ]
		},
		"difficulty-medium": {
			"file": {
				"ltr": "../images/difficulty-medium-ltr.svg",
				"rtl": "../images/difficulty-medium-rtl.svg"
			},
			"variants": [ "yellow30" ]
		},
		"difficulty-hard": {
			"file": {
				"ltr": "../images/difficulty-hard-ltr.svg",
				"rtl": "../images/difficulty-hard-rtl.svg"
			},
			"variants": [ "red30" ]
		},
		"info-unpadded": "../images/info-unpadded.svg",
		"live-broadcast": "../images/live-broadcast.svg",
		"live-broadcast-anim": "../images/live-broadcast-anim.svg",
		"mentor": {
			"file": {
				"ltr": "../images/mentor-ltr.svg",
				"rtl": "../images/mentor-rtl.svg"
			}
		},
		"robot-task-type": "../images/suggestededits/robot-green.svg"
	}
},

{F34415592}

Note that MediaWiki currently already provides an ability to define color variants for specific icons via ResourceLoaderImageModule.
While GrowthExperiments has already defined certain icons itself, and also features a non-guideline default color #4A4F53 for the 'newspaper' icon(?!), it doesn't define further variants.

Thanks for flagging this @Volker_E - that colour should definitely not be there as it's not in the colour palette, but also because it's for the "Main page" navigation menu item (not part of the newcomer features) which should just use the same icon colours as the rest of the mobile side nav. I'll file a task.

The new Codex library features a different ability to icon usage and inclusion, catering to all three needs mentioned in the task description, implemented by @Catrope.

  • The icon element uses SVGs fill=currentColor. With that it defaults to the wrapper HTML element's color style. And can be easily overwritten by a CSS class or even an inline style (not advised).
  • The size setting is similarly easy with classes amending the min-width or width of the Codex Icon component when placed inline. See demo for an example of those inline Icons. The remaining question is if the icon should be specifically set-able or if a number of specific typography wrapper bound styles could be sufficient. Thinking of all block level elements direct icon component children here.

And how this should be clarified in the Design Style Guide.