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
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
Acceptance criteria
- VisualEditor workarounds added in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1031043 are removed or a task has been created to remove them
Communication criteria - does this need an announcement or discussion?
- N/A
