Page MenuHomePhabricator

Vector 2022 should use the experimental Codex build
Open, HighPublic3 Estimated Story Points

Description

The experimental Codex build provides CSS variable support and a palette. Following T358059, we want to copy the approach in Minerva inside Vector 2022.

Acceptance criteria

  • Vector 2022 uses the Codex experimental CSS build
  • Vector 2022 has a light mode color palette using the LESS variables e.g. `--color-base: @color-base;`
  • Vector 2022 has a night mode color palette identical to Minerva's which is enabled when the .skin-darkmode-1 class is enabled on the body tag.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson renamed this task from [In design] Implement the dark mode color palette and switch LESS variables in Vector to use it to [Design] Implement the dark mode color palette and switch LESS variables in Vector to use it.Jan 11 2024, 5:42 PM
Jdlrobson assigned this task to JScherer-WMF.
Jdlrobson renamed this task from [Design] Implement the dark mode color palette and switch LESS variables in Vector to use it to Implement the dark mode color palette and switch LESS variables in Vector to use it.Jan 11 2024, 6:02 PM
Jdlrobson removed JScherer-WMF as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
ovasileva set the point value for this task to 3.Jan 11 2024, 6:49 PM
Jdlrobson changed the task status from Open to Stalled.Feb 28 2024, 6:37 PM
Jdlrobson added a subscriber: ovasileva.

@ovasileva this is blocked on T358059.

Jdlrobson renamed this task from Implement the dark mode color palette and switch LESS variables in Vector to use it to Vector 2022 should use the experimental Codex build.Feb 28 2024, 6:40 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson changed the task status from Stalled to Open.Mar 11 2024, 5:53 PM

Questions:

  • What steps will ensure the smooth integration of the experimental Codex build with Vector 2022?
  • How will the light and night mode colour palettes be implemented to maintain consistency across Vector themes?
  • Are there any potential impacts on performance or user experience to consider with this integration?

Context to add:
Considering the widespread use of Vector, should we consider waiting until the experimental Codex build stabilises before integrating it? This would ensure a smooth transition and maintain user experience quality.

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

[mediawiki/skins/Vector@master] [pOC] Night mode on Vector

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

What steps will ensure the smooth integration of the experimental Codex build with Vector 2022?

The change will impact the stable code, so it's essential that as part of this work, we run Pixel to flag any unexpected visual regressions. The approach we are taking is identical to Minerva so we should learn from the mistakes there (for example undefined CSS variables). https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1009358 is a proof of concept of the work we need to do here. @Jdrewniak
should have a good handle on the changes required here - so make sure you talk to him before working on this ticket.

How will the light and night mode colour palettes be implemented to maintain consistency across Vector themes?

Currently Minerva maintains a local version of the night mode palette. The light and night mode palettes should be defined within Codex eventually but depending on our schedule we may need to maintain 2 palettes. The palettes should be relatively stable so I think this is okay if needed.

Are there any potential impacts on performance or user experience to consider with this integration?

Keep an eye on bundle sizes. We may need to adjust the budget as part of this change, which is okay, as on the long term we expect this to lead to less CSS> We should be concerned if we see an increase in more than 1kb.

The night mode palette is not available in Codex yet. Hopefully will land sprint 1. We have enough work already for switching to Vector so I think it's okay to delay this.

Jdlrobson lowered the priority of this task from High to Medium.Fri, Apr 5, 6:26 AM
Jdlrobson raised the priority of this task from Medium to High.EditedFri, Apr 5, 6:28 AM

Moving to sprint 2 as we haven't discussed this with the Design systems team yet (last time we talked to them they were not ready for this) and we still have more pieces of the jigsaw to put in place e.g. T361589 and T361717

Jdrewniak subscribed.
Jdlrobson added subscribers: CCiufo-WMF, egardner, Volker_E.

@Jdrewniak and I met with @egardner, @CCiufo-WMF and @Volker_E today. The next steps are as follows:

  • Design systems team will fold the experimental build into the main build
  • Design systems team will document the CSS variables that are available and their stability on https://mediawiki.org/wiki/Codex

Once that's done, this ticket can be ready for work on. In terms of timeline we should be able to work on it May 7th (sprint 3).

@CCiufo-WMF is there a ticket on your side for which we can track your work?

I don't think we have tickets set up for this yet but once we do I can share them here.

Change #1009358 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] [pOC] Night mode on Vector

Reason:

We will work on this in about 2-3 weeks time.

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