Page MenuHomePhabricator

[OOUI] Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens
Closed, DeclinedPublic5 Estimated Story PointsFeature

Description

Background

As of v.1.4.0 of Codex, the legacy build of Codex design tokens is being discontinued and will eventually be removed. The newest version of the Codex design token uses CSS custom properties in place of color values. i.e:

@color-progressive: "var( --color-progressive, #36c )";

This change enables color theming and support for dark-mode in various skins (Vector 2022 and Minerva). In order for OOUI to be made compatible with this update, Less color functions such as lighten() darken() and mix() have to be removed from the WikimediaUI theme and replaced with standard design tokens or custom color values.

These color functions expect the token value to be of type color, but it is now of type string.

User story

  • As a general Wikimedia user and/or editor, I expect features that use OOUI to support dark-mode.
  • As a Wikimedia developer/maintainer, I strive to maintain consistency across interfaces by ensuring the same underlying design token values are used across interfaces.

Requirements

NOTE: This task is about enabling OOUI to use a newer version of Codex design tokens, but that version should not be changed yet.

The following functions lighten(), darken() and mix() are remove from the WikimediaUI OOUI theme and replaced with the closest approximate Codex color token. These functions are used in the following places:

  • In .mw-framed-button-colored() mixin: lighten( @active, 60% );
  • In .mw-tool-colored() mixin: lighten( @active, 60% );
  • In .theme-oo-ui-buttonElement() mixin: mix( @color-progressive--active, @background-color-disabled, 35% );
  • In .theme-oo-ui-popupWidget() mixin: darken( @border-color-base, 14% );

POC patch: https://gerrit.wikimedia.org/r/c/oojs/ui/+/1024424

Design

Slight color changes are expected from this change, as colors produced by functions such as lighten(@color-progressive, 10%) are replaced with different color tokens. These changes should be verified by Design.

The following codepen outlines the proposed color changes: https://codepen.io/j4n/pen/poBYJvq

Screenshot 2024-04-30 at 2.46.19 PM.png (832×2 px, 129 KB)

Acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • N/A

Related Objects

StatusSubtypeAssignedTask
OpenJdrewniak
OpenJdrewniak
Openovasileva
ResolvedJdlrobson
Openovasileva
Openovasileva
ResolvedJScherer-WMF
Resolvedovasileva
ResolvedSpikeSToyofuku-WMF
Openovasileva
Openovasileva
OpenNone
OpenBUG REPORTNone
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNone
ResolvedJdrewniak
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdrewniak
ResolvedJScherer-WMF
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Stalledbwang
OpenNone
Resolvedovasileva
OpenNone
OpenJdlrobson
OpenNone
OpenBUG REPORTNone
OpenNone
OpenBUG REPORTNone
In ProgressDTorsani-WMF
ResolvedVolker_E
OpenJdlrobson
OpenBUG REPORTNone
OpenNone
OpenNone
DeclinedFeatureegardner
DuplicateNone
OpenEAkinloose
DuplicateBUG REPORTNone
DeclinedFeatureegardner
DuplicateCCiufo-WMF
Openovasileva
ResolvedNBaca-WMF
DeclinedVolker_E
OpenNone
OpenVolker_E
OpenEdtadros

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdrewniak renamed this task from [OOUI] Remove Less color functions to make WikimediaUI theme compatible with future versions Codex Design Tokens to [OOUI] OOUI Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens.Apr 30 2024, 5:51 PM

Hey @Jdrewniak - I'll share this OOUI task and T363857 in Slack with the team so we can discuss and follow up with the next steps.

Change #1034592 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[oojs/ui@master] WikimediaUI Theme: Update Codex Design Tokens to 1.5.0

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

This is still very much a work in progress, but here's what Special:ApiSandbox looks like currently:

Screenshot 2024-05-21 at 3.40.43 PM.png (1×2 px, 462 KB)

And here's Visual Editor in action under dark mode:

Screenshot 2024-05-21 at 3.42.06 PM.png (1×2 px, 260 KB)

Getting toolbar icons working correctly will be a big improvement for VE.

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

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

CCiufo-WMF renamed this task from [OOUI] OOUI Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens to [OOUI] Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens.Fri, May 24, 2:11 PM
CCiufo-WMF changed the task status from Open to Stalled.Tue, May 28, 5:55 PM
CCiufo-WMF subscribed.

Stalled pending support with QA.

Hi @egardner thanks for bring the icon issue to our attention. I wrote T366189 for that, I think it can be handled by adding the skin-invert class to all OOUI icons.

I think T366189 is a duplicate of T365764 (already in our current sprint)?

@CCiufo-WMF thanks for pointing that out! I didn't see T365764 and T366189 is indeed a duplicate.

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

https://patchdemo.wmflabs.org/wikis/50da94cb4d/w/

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

https://patchdemo.wmflabs.org/wikis/717f060a19/w/

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

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

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

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

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

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

Change #1034592 abandoned by Eric Gardner:

[oojs/ui@master] WikimediaUI Theme: Update Codex Design Tokens to 1.5.0

Reason:

Abandoning this approach in favor of https://gerrit.wikimedia.org/r/c/oojs/ui/+/1041265

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