Page MenuHomePhabricator
Create Task
Maniphest T356074

Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties
Closed, ResolvedPublic3 Estimated Story Points
Actions

Description

We will adopt CSS custom properties in the mobile skin. This has implications on our browser support matrix. Older browsers (very old versions of Opera Mini, IE11) that do not support CSS custom properties will stop receiving certain colors and instead using the default browser color palette.

For example note the lack of a background color on IE11:

Screenshot 2024-02-01 at 3.00.38 PM.png (677×948 px, 469 KB)

TODO

  • Add an ADR to Minerva defining why are we using CSS custom properties
  • Switch all LESS variables using color (background,color,borders) to CSS custom properties
  • Define the light mode color palette using the LESS variables e.g. `--color-base: @color-base;`
  • Define a night mode color palette which is enabled when the .skin-darkmode-1 is on the HTML tag
  • Define a night mode color palette which applies when the .skin-darkmode-2 class is enabled on the HTML tag and the operating system specifies it prefers a night theme.

Design spec

Additional contest: T354891#9456985

@color-base: #EAECF0 gray200
@color-subtle: #C8CCD1 gray300
@color-link: #6699FF blue300
@color-link-new: #6699FF blue300
@color-link-selected: #94B8FF
@color-placeholder: #A2A9B1 gray400
@color-emphasized: #FFFFFF
@color-progressive: #6699FF blue300
@color-destructive: #FF4242 red500
@color-progressive--hover: #94B8FF
@background-color-base: #202122 gray700
@background-color-secondary: #2E3136 gray675
@background-color-secondary--modern: #202122 gray700
@color-visited: #9781BD

Developer sign off

Check that no LESS variables remain in the Minerva skin for the following queries:

ag "@(color|background-color|border-color)" --ignore resources/

QA

QA is covered in T350170.

  • Verify in Pixel that no colors change in the default theme.

QA Results - Beta

ACStatusDetails
1✅T356074#9518227

QA Results - Prod

ACStatusDetails
1⬜T356074#9567933

Details

SubjectRepoBranchLines +/-
[POC] Convert all color related Less variables to CSS custom propertiesmediawiki/skins/MinervaNeuemaster+238 -111
[POC] Skins: Drop support for browsers which do not support CSS variablesmediawiki/coremaster+0 -18
Color subtle should be a CSS variablemediawiki/skins/MinervaNeuemaster+1 -0
Set text color on infoboxesmediawiki/skins/MinervaNeuemaster+1 -0
Skins: Allow skins to use custom properties for colorsmediawiki/coremaster+37 -8
Follow-up to 59fd0cd (red-link typo)mediawiki/skins/MinervaNeuemaster+1 -1
Convert all color related Less variables to CSS custom propertiesmediawiki/skins/MinervaNeuemaster+224 -112
Add ADR for CSS custom properties in Minervamediawiki/skins/MinervaNeuemaster+94 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Jan 29 2024, 4:18 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptJan 29 2024, 4:18 PM
Jdlrobson triaged this task as High priority.Jan 29 2024, 4:19 PM
Jdlrobson added a project: Web-Team-Backlog (FY2023-24 Q3 Sprint 2).
Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.
Jdlrobson updated the task description. (Show Details)Jan 29 2024, 6:15 PM
Jdlrobson updated the task description. (Show Details)Jan 29 2024, 6:18 PM
bwang set the point value for this task to 3.Jan 29 2024, 6:19 PM
gerritbot added a comment.Jan 29 2024, 10:39 PM

Change 993746 had a related patch set uploaded (by Jdlrobson; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Add ADR for CSS custom properties in Minerva

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

gerritbot added a project: Patch-For-Review.Jan 29 2024, 10:39 PM
Jdlrobson assigned this task to Jdrewniak.Jan 30 2024, 5:46 PM
Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.
gerritbot added a comment.Jan 31 2024, 1:33 AM

Change 969955 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Skins: Allow skins to use custom properties for colors

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

gerritbot added a comment.Jan 31 2024, 1:33 AM

Change 994363 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] [POC] Skins: Drop support for browsers which do not support CSS variables

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

PatchDemoBot added a comment.Jan 31 2024, 1:35 AM

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

Jdlrobson moved this task from Backlog to Milestones on the FY2023-24-WE 2.1 Typography and palette customizations board.Jan 31 2024, 5:41 PM
Jdlrobson moved this task from Milestones to Backlog on the FY2023-24-WE 2.1 Typography and palette customizations board.
gerritbot added a comment.Jan 31 2024, 5:44 PM

Change 993746 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add ADR for CSS custom properties in Minerva

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.17; 2024-02-06).Jan 31 2024, 9:00 PM
ovasileva added a parent task: T354843: [Night mode] Make all open-by-default global navigation appear in night mode on mobile.Jan 31 2024, 9:52 PM
Jdlrobson updated the task description. (Show Details)Jan 31 2024, 11:56 PM
Jdlrobson mentioned this in T350170: Update mobile settings to use client side preferences.
Jdlrobson mentioned this in T355065: Set up feature flag and menu for night mode on desktop.
Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 1 2024, 5:29 PM
gerritbot added a comment.Feb 1 2024, 5:39 PM

Change 995065 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Convert all color related Less variables to CSS custom properties

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

Jdlrobson updated the task description. (Show Details)Feb 1 2024, 5:40 PM
PatchDemoBot added a comment.Feb 1 2024, 8:11 PM

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

PatchDemoBot added a comment.Feb 1 2024, 10:57 PM

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

Jdlrobson renamed this task from Implement the dark mode color palette and switch LESS variables in Minerva to use it to Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties.Feb 1 2024, 11:00 PM
Jdlrobson updated the task description. (Show Details)
gerritbot added a comment.Feb 2 2024, 12:40 AM

Change 995125 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] [POC] Convert all color related Less variables to CSS custom properties

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

PatchDemoBot added a comment.Feb 2 2024, 12:42 AM

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 2 2024, 1:48 AM
gerritbot added a comment.Feb 2 2024, 6:18 PM

Change 995065 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Convert all color related Less variables to CSS custom properties

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

Jdrewniak added a comment.Feb 2 2024, 6:19 PM

For the purposes of the Less variables to CSS custom props conversion, I only changed the variables that we already used in Minerva. Some of these might have the same color values but different names than in the task description:

:root {
    --background-color-base: #fff;
    --background-color-destructive: #d73333;
    --background-color-interactive: #eaecf0;
    --background-color-progressive-subtle: #eaf3ff;
    --border-color-base: #a2a9b1;
    --border-color-inverted: #fff;
    --border-color-progressive--focus: #36c;
    --border-color-subtle: #c8ccd1;
    --border-color-transparent: transparent;
    --box-shadow-color-progressive--focus: #36c;
    --color-base: #202122;
    --background-color-interactive-subtle: #f8f9fa;
    --color-inverted: #fff;
    --color-subtle: #54595d;
    --color-progressive: #36c;
    --color-visited: #6b4ba1;
    --color-progressive--active: #2a4b8d;
    --color-link: #0645ad;
    --color-link-red: #d73333;
    --color-link-red--visited: #a55858;
    --color-link-external: #36b;
    --color-link-external--visited: #636;
    --color-link-external--active: #b63;
    --box-shadow-color-drawer: rgba(0,0,0,0.35);
}

I hard coded the color values for dark mode because I don't think we ship variables with color names like gray200 (I might be wrong on that though).

html.skin-night-mode-1 {
    --color-base: #eaecf0;
    --color-subtle: #c8ccd1;
    --color-link: #69f;
    --color-link-red: #ff4242;
    --color-progressive: #69f;
    --background-color-destructive: #ff4242;
    --color-progressive--active: #94b8ff;
    --background-color-base: #202122;
    --color-visited: #9781bd;
    --background-color-interactive: #2e3136;
}
Jdlrobson claimed this task.Feb 2 2024, 7:01 PM
Jdlrobson moved this task from Code Review to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.
Jdlrobson added a subscriber: Jdrewniak.

QA is blocked on T355118 but I think we have what we need here (yay!)

Jdlrobson updated the task description. (Show Details)Feb 2 2024, 7:03 PM
gerritbot added a comment.Feb 2 2024, 9:57 PM

Change 995342 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Follow-up to 59fd0cd (red-link typo)

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

gerritbot added a comment.Feb 2 2024, 10:30 PM

Change 995342 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Follow-up to 59fd0cd (red-link typo)

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

gerritbot added a comment.Feb 2 2024, 10:34 PM

Change 969955 abandoned by Jdlrobson:

[mediawiki/core@master] Skins: Allow skins to use custom properties for colors

Reason:

We are exploring other options where we map LESS variables directly to CSS variables. We do not need this for current stage of development or the prototype.

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

Jdlrobson removed Jdlrobson as the assignee of this task.Feb 2 2024, 11:34 PM
Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

This can now be verified in Pixel. Not sure if I should assign this to you Edward or someone also as anyone can check Pixel on Monday :)

Jdlrobson assigned this task to Edtadros.Feb 5 2024, 6:28 PM
Edtadros removed Edtadros as the assignee of this task.Feb 6 2024, 5:29 PM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

QA is covered in T350170.

✅ AC1: Verify in Pixel that no colors change in the default theme.

screenshot 431.png (376×1 px, 63 KB)

Edtadros updated the task description. (Show Details)Feb 6 2024, 5:36 PM
gerritbot added a comment.Feb 6 2024, 6:23 PM

Change 997940 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Color subtle should be a CSS variable

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

gerritbot added a comment.Feb 6 2024, 8:42 PM

Change 997940 merged by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Color subtle should be a CSS variable

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

gerritbot added a comment.Feb 6 2024, 9:24 PM

Change 997962 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Set text color on infoboxes

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

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.18; 2024-02-13); removed MW-1.42-notes (1.42.0-wmf.17; 2024-02-06).Feb 6 2024, 10:01 PM
gerritbot added a comment.Feb 6 2024, 10:26 PM

Change 997962 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Set text color on infoboxes

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

Jdlrobson closed this task as Resolved.Feb 7 2024, 12:32 AM
Jdlrobson claimed this task.
Jdlrobson added a subtask: T356900: Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables).Feb 7 2024, 7:44 PM
Jdlrobson added a subtask: T356928: Regression: Visited links on mobile appearing as black.Feb 8 2024, 12:38 AM
Jdlrobson closed subtask T356900: Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables) as Resolved.Feb 8 2024, 5:44 PM
Jdlrobson closed subtask T356928: Regression: Visited links on mobile appearing as black as Resolved.Feb 10 2024, 1:02 AM
Dringsim added a subtask: T357381: Regression: Active link color is broken on mobile.Feb 13 2024, 8:49 AM
gerritbot added a comment.Feb 14 2024, 9:37 PM

Change 994363 abandoned by Jdlrobson:

[mediawiki/core@master] [POC] Skins: Drop support for browsers which do not support CSS variables

Reason:

We are taking a slightly different approach to this that uses skin variables and requires no changes to core.

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

Edtadros added a project: Verified.Feb 22 2024, 2:53 PM

This is not testable in Prod.

Edtadros updated the task description. (Show Details)Feb 22 2024, 2:55 PM
Edtadros mentioned this in T356225: Verify 1.42.0-wmf.18 deployment.Feb 22 2024, 10:15 PM
Jdlrobson closed subtask T357381: Regression: Active link color is broken on mobile as Resolved.Feb 26 2024, 6:13 PM
gerritbot added a comment.Wed, Apr 3, 3:06 PM

Change #995125 abandoned by Jdrewniak:

[mediawiki/skins/MinervaNeue@master] [POC] Convert all color related Less variables to CSS custom properties

Reason:

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

Maintenance_bot removed a project: Patch-For-Review.Wed, Apr 3, 3:30 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL