Change 901217 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/GrowthExperiments@master] [WIP] styles: Replace old variables calls with skin variables

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

cc'ing @RHo @JFernandez-WMF about the "Open questions" section of this task.

In T332567#8717854, @kostajh wrote:

cc'ing @RHo @JFernandez-WMF about the "Open questions" section of this task.

@kostajh - would it be possible to provide screenshots of the open questions for @JFernandez-WMF to evaluate with my input?

In T332567#8717965, @RHo wrote:

In T332567#8717854, @kostajh wrote:

cc'ing @RHo @JFernandez-WMF about the "Open questions" section of this task.

@kostajh - would it be possible to provide screenshots of the open questions for @JFernandez-WMF to evaluate with my input?

Sure thing, done!

@Thanks @kostajh!

1. darker borders still need feedback
2. Using :visited on Structured task onboarding

We're enabling different colors for visited links to support basic usability. I'd suggest to use standard :visited treatment here, there's no benefit from my perspective to use always progressive. I've changed it in the latest patch.

3. StartEditing module features background-color: #f5f9ff;

Should we use @background-color-progressive-subtle: #eaf3ff; for it?
It'd be good to have @RHo and @JFernandez-WMF feedback on the three points above.

4. RecommendedLinkToolbarDialog border

Is that border expanding the area as the placeholder image wouldn't span the correct size? @kostajh

In T332567#8730136, @Volker_E wrote:

@Thanks @kostajh!

1. darker borders still need feedback
2. Using :visited on Structured task onboarding

We're enabling different colors for visited links to support basic usability. I'd suggest to use standard :visited treatment here, there's no benefit from my perspective to use always progressive. I've changed it in the latest patch.

3. StartEditing module features background-color: #f5f9ff;

Should we use @background-color-progressive-subtle: #54595D; for it?
It'd be good to have @RHo and @JFernandez-WMF feedback on the three points above.

4. RecommendedLinkToolbarDialog border

Is that border expanding the area as the placeholder image wouldn't span the correct size? @kostajh

Hi @Volker_E - Growth designer capacity is a little slammed right now, but I can look at this and respond before the end of the week. Would that work?

@RHo Totally. There's no big urge, my concern is that this patch is touching a huge number of files and it's problematic to keep this branch in sync with the other ongoing work (lot of manual rebases at worst). What I'd suggest is that Growth devs could review the status quo of 512 changed lines and possibly merge it timely. While the ~one dozen occurrences of non-token usages are FIXMEs for a later point, kept as static values (the patch does this already) and designers are providing feedback when possible.

Hi, took a look and here's some comments and questions about the items in the task:

1. Several modules use border: 1px solid @wmui-color-base80 which equals #eaecf0. This is not a DS border-color yet.

@kostajh - can you see where we are using #eaecf0 on borders? I cannot find this anywhere. AFAICT module borders etc use #c8ccd1 (old name base70) and #a2a9b1 (old name base50) which are DS border colours.

2. Structured task onboarding features a “link”? Visited color should be color-progressive-visited

SGTM.

3. StartEditing module features

background-color: #f5f9ff;, which is not part of the color palette. What to do?
(comment from @kostajh: This is particular block of code can be removed; we used to show it in mobile Special:Homepage for unactivated suggested edits module. > However, we always show an activated suggested edits module on Special:Homepage. And we use the same background-color: #f5f9ff; rule for that, so we do > need to make some kind of update here:

)

This colour is actually the primitive colour Blue100 (old name Accent90) at opacity 50%. I adopted it to as a "brand" colour for Suggested edits module background, and wanted something lighter than Blue100 for the large background area. I would prefer if we could keep the colour (perhaps update to Blue100@50%?), but also won't lose sleep if it is switched to the darker Blue100.

4. RecommendedLinkToolbarDialog features

.mw-ge-recommendedLinkToolbarDialog-linkPreview-icon {
	border: 0.35714em solid @wmui-color-base70;

Assuming that this should feature a 5px border, this is also a non-standard border-width.

The icon is used when the article does not have an image

, added in rEGRE949e5de721e5: Add a link: Update link inspector styles and overflow state.

@kostajh - this does seem to be a non-standard way we should update so that it is an image icon in the thumbnail set to the expected size with background colour, and not even use a border colour at all.

Screenshot showing border changed to #f0f

Change 904254 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/Echo@master] styles: Replace old variables calls with skin variables

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

Change 904257 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/MultimediaViewer@master] styles: Replace old variables calls with skin variables

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

Sorry for the patch spam. Small copy&paste mistake while at 17 different patches.

Test wiki created on Patch demo by KHarlan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cfdfa13682/w

Thanks for the work reviewing and making the PatchDemo @kostajh and @Volker_E. I think only the following items I cannot see from the demo that it'd be good to confirm the result and then this is good to go from my perspective:

In T332567#8745398, @RHo wrote:

Hi, took a look and here's some comments and questions about the items in the task:

1. Several modules use border: 1px solid @wmui-color-base80 which equals #eaecf0. This is not a DS border-color yet.

@kostajh - can you see where we are using #eaecf0 on borders? I cannot find this anywhere. AFAICT module borders etc use #c8ccd1 (old name base70) and #a2a9b1 (old name base50) which are DS border colours.

Still cannot see where we use this?

3. StartEditing module features

background-color: #f5f9ff;, which is not part of the color palette. What to do?
(comment from @kostajh: This is particular block of code can be removed; we used to show it in mobile Special:Homepage for unactivated suggested edits module. > However, we always show an activated suggested edits module on Special:Homepage. And we use the same background-color: #f5f9ff; rule for that, so we do > need to make some kind of update here:

)

This colour is actually the primitive colour Blue100 (old name Accent90) at opacity 50%. I adopted it to as a "brand" colour for Suggested edits module background, and wanted something lighter than Blue100 for the large background area. I would prefer if we could keep the colour (perhaps update to Blue100@50%?), but also won't lose sleep if it is switched to the darker Blue100.

From PatchDemo it looks like this is still using #f5f9ff... is that expected?

4. RecommendedLinkToolbarDialog features

.mw-ge-recommendedLinkToolbarDialog-linkPreview-icon {
	border: 0.35714em solid @wmui-color-base70;

Assuming that this should feature a 5px border, this is also a non-standard border-width.

The icon is used when the article does not have an image

, added in rEGRE949e5de721e5: Add a link: Update link inspector styles and overflow state.

@kostajh - this does seem to be a non-standard way we should update so that it is an image icon in the thumbnail set to the expected size with background colour, and not even use a border colour at all.

Screenshot showing border changed to #f0f

Patchdemo doesn't have link or image recos. Can a screenshot be provided please for review?

@RHo Thanks for picking it up here again. Once more as reminder, the patch I've provided has not included any changes to the open questions.
It doesn't touch them, we're not changing anything of dispute from my perspective right now and do the resolution of open questions in a follow-up patch. It only touches the direct replacement of old keys with unchanged values, with minimally little amendments, for example replacing opacity: 0.65 becomes standard token value 0.67 of key @opacity-icon-subtle.

While re-reviewing, there's another special color, that might end up as open questions.

.mw-ge-inviteToSuggestedEditsDrawer {
	.mw-ge-collapsibleDrawer-content {
		background-color: tint( @background-color-progressive-subtle, 50% );
	}
}

I assume that goes into the same realm what we had once decided, to have special color as modifications of palette colors. Given that it's used more than once I wonder, how we could develop rule around them. As we could end up with tons of colors without guidelines around tint/filter/opacity modifications counter-acting the collective palette.

1. Several modules use border: 1px solid @wmui-color-base80 which equals #eaecf0. This is not a DS border-color yet.

Again, question is could they use a slightly darker border, the @border-color-subtle #c8ccd1. Files:

• 'AddLinkDialog.less':

The example and the image.

• 'MachineSuggestionsMode.less':

.ve-ui-toolbar-group-machineSuggestionsPlaceholder

• 'StructuredTaskSaveDialog.less'

&-watchlistCheckbox bottom border

• 'AddImageSaveDialog.less'

&-summaryLabel bottom border
&-bodyContent bottom border

• 'AddLinkSaveDialog.less'

tr bottom border

In T332567#8820557, @RHo wrote:

Patchdemo doesn't have link or image recos. Can a screenshot be provided please for review?

These are for AddLink:

The visual issues in this dialog are not introduced by the patch for this task, they are documented in T332827: Structured task save dialog on desktop uses different font size and visual display from normal VisualEditor save dialog

AddImage:

Thanks @kostajh for providing these screenshots. I have two points areas to revise:

1. Inactive link suggestion tag border colour is now much darker than expected.

Actual	Expected

I don't think the border-color-warning is appropriate in this context and as this is custom Growth component that I would prefer we keep as is with the same colour that is expected (and on testwiki now), which is Yellow500 in the new Codex primitive token, or else use border-color-base.

2. Thumbnail style for articles without an image in the link inspector

Actual	Expected	Vector2022 Typeahead search result

I guess we used the darker border so also darkened the background colour and image icon - is that right? My preference would be to revise the way we have created this thumbnail element anyway so that it is using the 1px border with the background instead of the non-standard thicker border I mentioned in the end of T332567#8820557. And in doing so, also update to use the same style as no-image thumb that is on the Search results panel - background colour #f8f9fa/background-color-interactive-subtle, with border color #c8ccd1 /border-color-subtle`.
Otherwise if we only want to change the colour values for now, then would prefer we keep the same lighter primitive colour color.gray200 for the thumbnail background.

Thanks @RHo for the detailed look.

1. Inactive link suggestion boundary color

There has been some questions about InfoChip states before. Specifically raise your points on the FeedbackChip proposal in T322524 and

2. (4.) Updated with background-color: #f8f9fa and border-color: #c8ccd1. Need to have verified by Kosta if the rendering is as expected, due to the reduced border. We nicely got rid of the 0.35714em from point 4. as well

In T332567#8839513, @Volker_E wrote:

Thanks @RHo for the detailed look.

1. Inactive link suggestion boundary color

There has been some questions about InfoChip states before. Specifically raise your points on the FeedbackChip proposal in T322524 and

. We also use a lighter border color for the normal InfoChip instead of a darker one on Messages. It will be good to merry these two.
For the patch I went ahead and reverted to Yellow500

2. (4.) Updated with background-color: #f8f9fa and border-color: #c8ccd1. Need to have verified by Kosta if the rendering is as expected, due to the reduced border. We nicely got rid of the 0.35714em from point 4. as well

This is how it looks:

latest patch	status quo
	{F36991372}

Change 901217 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] styles: Replace old variables calls with skin variables

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

Removing T332541 as parent task and updating task description now that patch removing outdated mediawiki.ui and WikimediaUI Base dependencies patch as first big step has been resolved.
The open design quests are tackled in follow-up patches.

Update: Only the lighter border color choice is remaining on this task. cc: @RHo @kostajh

Thanks @Volker! Responses below inline:

In T332567#8839513, @Volker_E wrote:

Thanks @RHo for the detailed look.

1. Inactive link suggestion boundary color

There has been some questions about InfoChip states before. Specifically raise your points on the FeedbackChip proposal in T322524 and

. We also use a lighter border color for the normal InfoChip instead of a darker one on Messages. It will be good to merry these two.

For now, I think we should consider this not a infoChip or Feedback chip as the use-case is a little different from cases documented in the component spec.

In T332567#8863139, @Volker_E wrote:

Update: Only the lighter border color choice is remaining on this task. cc: @RHo @kostajh

Yes I agree. I've reviewed how this looks in the places you've noted (see screenshots below) and it seems fine to use the slightly darker border @border-color-subtle #c8ccd1.

In T332567#8825995, @Volker_E wrote:

1. Several modules use border: 1px solid @wmui-color-base80 which equals #eaecf0. This is not a DS border-color yet.

Again, question is could they use a slightly darker border, the @border-color-subtle #c8ccd1. Files:

• 'AddLinkDialog.less':

The example and the image.

• 'MachineSuggestionsMode.less':

.ve-ui-toolbar-group-machineSuggestionsPlaceholder

• 'StructuredTaskSaveDialog.less'

&-watchlistCheckbox bottom border

• 'AddImageSaveDialog.less'

&-summaryLabel bottom border
&-bodyContent bottom border

• 'AddLinkSaveDialog.less'

tr bottom border

Test wiki on Patch demo by KHarlan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/cfdfa13682/w/