Page MenuHomePhabricator

Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables)
Closed, ResolvedPublic0 Estimated Story Points

Assigned To
Authored By
Jdlrobson
Feb 7 2024, 6:02 PM
Referenced Files
F41817173: screenshot 438.png
Feb 8 2024, 5:32 PM
F41817163: screenshot 437.png
Feb 8 2024, 5:32 PM
F41817160: screenshot 436.png
Feb 8 2024, 5:32 PM
F41817158: screenshot 435.png
Feb 8 2024, 5:32 PM
F41817143: screenshot 434.png
Feb 8 2024, 5:32 PM
F41805949: Screenshot 2024-02-07 at 10.03.26 AM.png
Feb 7 2024, 6:03 PM

Description

57 failures in https://pixel.wmcloud.org/reports/mobile/index.html

With the following code we expect to change the fill color of the icon to color-base

.cdx-mixin-css-icon( @cdx-icon-close, --color-base );

This generates

url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"var%28--color-subtle%29\"><path d=\"m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z\"/><path d=\"M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z\"/></svg>")

On the long term it looks like this will be addressed by T356540 but in the mean time we should look to fix this by reverting the related change.

QA steps

Check icons

Check text color

Event Timeline

Jdlrobson renamed this task from Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables to Regression: Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables.Feb 7 2024, 7:38 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Regression.
Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 0.
Jdlrobson renamed this task from Regression: Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables to Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables).Feb 7 2024, 7:51 PM
Jdlrobson updated the task description. (Show Details)
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Check icons
Visit https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930
Sign in
✅ AC1: the bell icon in the top right should not be pure black. It should be off-black.

screenshot 434.png (269×313 px, 29 KB)

❌ AC2: Confirm no visual regressions in https://pixel.wmcloud.org/reports/mobile/index.html

screenshot 435.png (348×1 px, 58 KB)

screenshot 436.png (912×1 px, 101 KB)

screenshot 437.png (757×1 px, 99 KB)

Check text color
Visit https://en.m.wikipedia.org/wiki/Special:Nearby / https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:Nearby
✅ AC3: Confirm "You can read interesting Beta Wikipedia pages about places around you" uses the color# 54595d

screenshot 438.png (518×714 px, 69 KB)

✅ AC4 Confirm no visual regressions relating to NearbyPages on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:Nearby
No visual regression in Pixel for the Special:Nearby page.

Jdlrobson added a subscriber: bwang.

❌ AC2: Confirm no visual regressions in https://pixel.wmcloud.org/reports/mobile/index.html

These regressions are related to something else, and expected improvements. Thanks for checking Edward!