Whoever picks up this ticket, please do due diligence to ensure we conform to best practices regarding use of color tokens in downstream components (eg. should we be customizing colors on top of provided library components). Thanks!

Updated to make the icon color #54595D, based on the recommendation in T280677#8096926

@Esanders I'm not really finding a precedent for changing the colour of an icon other than by setting the progressive or destructive flags. Do you have any thoughts on this?

We tend to discourage picking arbitrary colours for icons to force people to stick to the style guide. ResourceLoader does allow it, although in this case I would just follow the example of disabled frameless buttons in OOUI and use opacity to set the icon to an colour that is almost exactly the one you want, e.g. #555555 which will be indistinguishable from #54595D. The opacity required would be 1 - ( 0x55 / 0xFF ) = 0.67

Information It looks like there's nothing to do, seems it's already set to #202122 as required (the skin must be doing this, since there's no custom rule in IPInfo):

Icon We can fix this using opacity - thanks @Esanders, I see precedent in variables setting opacity for icons (example)

Heading and missing property These are currently set to @color-base--subtle from mediawiki.ui/variables.less, which is #72777D (code). It seems that to fix the heading and missing property, we'd need to include the variables from Vector/resources/common/variables.less, where @color-base--subtle is set to #54595D (code). @Prtksxna Is it possible to include variables from a particular skin in an extension? Searching the code for @color-base--subtle, other extensions seem to use the mediawiki.ui/variables.less definition (code). (We could just set the colours directly of course. But I'm wondering what the correct architecture for this is, to keep in sync if the standards change, and to be explicit about where the colours come from, etc.)

In T309828#8169126, @Tchanders wrote:

Heading and missing property These are currently set to @color-base--subtle from mediawiki.ui/variables.less, which is #72777D (code). It seems that to fix the heading and missing property, we'd need to include the variables from Vector/resources/common/variables.less, where @color-base--subtle is set to #54595D (code). @Prtksxna Is it possible to include variables from a particular skin in an extension? Searching the code for @color-base--subtle, other extensions seem to use the mediawiki.ui/variables.less definition (code). (We could just set the colours directly of course. But I'm wondering what the correct architecture for this is, to keep in sync if the standards change, and to be explicit about where the colours come from, etc.)

@Volker_E @bmartinezcalvo what would be the right way to approach this?

@Prtksxna updated task description with the right color token names we recently defined for Codex and OOUI (you can also review them in Figma).

Thanks @bmartinezcalvo and @Prtksxna. From what I can gather from a code search and the Codex docs, it looks as though color-subtle is a token defined in Codex.

Would you know whether these tokens are defined anywhere that we can use outside of Codex, and/or do the OOUI and MediaWiki core colours need to be updated?

In the interest of moving this forward, I've defined these variables in the IPInfo extension for now, with a TODO that references this task.

@Prtksxna We were also using @color-base--subtle for the guidelines message (bottom right) and the number of recent edits (in parentheses), so I've updated these to the new colours too. How does this look?

One more question - is the darkness of the info icon OK on the popup pages? Example:

Change 826818 had a related patch set uploaded (by Tchanders; author: Tchanders):

[mediawiki/extensions/IPInfo@master] Define and use new color variables

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

In T309828#8188327, @Tchanders wrote:

@Prtksxna We were also using @color-base--subtle for the guidelines message (bottom right) and the number of recent edits (in parentheses), so I've updated these to the new colours too. How does this look?

Perfect. Thank you, Thalia!

One more question - is the darkness of the info icon OK on the popup pages? Example:

Yeah, we should change this to be subtle too, now with the new icon. Happy for that to be a separate task.

Yeah, we should change this to be subtle too, now with the new icon. Happy for that to be a separate task.

Thanks - filed as T316652: Use icon-opacity-subtle variable for popup button

Change 826818 merged by jenkins-bot:

[mediawiki/extensions/IPInfo@master] Define and use new color variables

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

Here are the colours and contrast ratios of various items in the infobox.

I calculated the contrast ratio using https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=AxeFirefox.

The colour of the (i) icon I got by using Firefox's colour picker tool in its devtools.

The "lightest" colour on the page is the "Not available"/"No access" with colour #72777d. This gives a contrast ratio of 4.51:1, which is just over the 4.5:1 required by WCAG2.1 (https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html).

The colours in the popup for the Heading, Not available and Information are the same as the screenshot above (including the two different colours for text in the "Contributions" section).

Handing over to @Prtksxna to make sure he is happy with the above.

Test environments:

• local docker IP Info 0.0.0 (5a35d97) 06:22, 26 August 2022.
• https://en.wikipedia.beta.wmflabs.org IP Info 0.0.0 (97853ff) 13:10, 1 September 2022.

Test browser: Firefox 91.

I wonder why the color of the icon would be #6a6a6a according to FF dev tools and not #54595d. @Tchanders could it be because the anti-aliasing on a tiny stroke width?

In T309828#8207564, @Prtksxna wrote:

I wonder why the color of the icon would be #6a6a6a according to FF dev tools and not #54595d. @Tchanders could it be because the anti-aliasing on a tiny stroke width?

I think it would be due to changing the opacity rather than the colour, as described in T309828#8165896

This is the same way that icons are re-coloured elsewhere in OOUI - the colour does end up being slightly different. For example, a disabled button widget from the OOUI demo page has text #72777d and icon #7c7c7c (observed using Firefox's colour picker): https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-disabled

In T309828#8211432, @Tchanders wrote:

This is the same way that icons are re-coloured elsewhere in OOUI - the colour does end up being slightly different. For example, a disabled button widget from the OOUI demo page has text #72777d and icon #7c7c7c (observed using Firefox's colour picker): https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-disabled

@Tchanders @Prtksxna the disabled color defined in our color tokens for text and icons is #72777D (named it as color-disabled). You can check it in the Codex demo. We should use this token and avoid using other color values that are not part of our system.

In T309828#8212175, @bmartinezcalvo wrote:

In T309828#8211432, @Tchanders wrote:

This is the same way that icons are re-coloured elsewhere in OOUI - the colour does end up being slightly different. For example, a disabled button widget from the OOUI demo page has text #72777d and icon #7c7c7c (observed using Firefox's colour picker): https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-disabled

@Tchanders @Prtksxna the disabled color defined in our color tokens for text and icons is #72777D (named it as color-disabled). You can check it in the Codex demo. We should use this token and avoid using other color values that are not part of our system.

Thanks @bmartinezcalvo - T309828#8165896 discusses how icons are currently re-coloured in OOUI, using opacity to approximate the colour, because the SVGs are only provided in certain colours.

• Are the colour tokens defined as variables anywhere outside of Codex that we can import for non-Codex features? (E.g. in case they change, etc.)
• Do the OOUI and MediaWiki core colours need to be updated or expanded, and if so could we have a task filed about that?

Thanks!

In T309828#8211432, @Tchanders wrote:

I think it would be due to changing the opacity rather than the colour, as described in T309828#8165896

Sorry, had missed that comment. I understand.

In the comment Ed mentioned that the color would be closer to #555555 but Dom's screenshot is #6a6a6a. I understand that the color won't be exactly right but is this difference expected? Also, Dom noted elsewhere (https://phabricator.wikimedia.org/T316652#8208061) that the icon for the IP Info popup is #545454, which is closer to what we want.

@Tchanders @Prtksxna Since https://gerrit.wikimedia.org/r/c/mediawiki/core/+/832718 and https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/832719 (for Vector, same for MN) you've got the Codex opacities including deprecated ones for OOUI legacy as skin variables usable in your extensions!