Page MenuHomePhabricator

Less color functions not compatible with CSS custom properties
Open, LowPublic

Description

The GrowthExperiments extension uses the .tint() and .fade() native LESS function. When passed CSS variables these fatal. This interferes with skins redefining Wikimedia skin variables as CSS variables.

e.g.

background-color: tint( @background-color-progressive-subtle, 50% );

I think we should either:

  1. discourage/deprecate the usage of these
  2. Provide additional variables for usage in this way

e.g.

background-color: tint( @background-color-progressive-subtle-LESS, 50% );

Event Timeline

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

[mediawiki/extensions/GrowthExperiments@master] Workaround for night mode incompatibility with LESS mixins

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

Sgs moved this task from Up Next to Sprint 8 (Growth Team) on the Growth-Team board.
Sgs edited projects, added Growth-Team (Sprint 8 (Growth Team)); removed Growth-Team.
Jdrewniak renamed this task from LESS mixins not compatible with CSS variables to LESS color functions not compatible with CSS custom properties.Feb 20 2024, 2:06 PM
Jdrewniak updated the task description. (Show Details)

Change 1004233 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Workaround for night mode incompatibility with LESS mixins

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

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

[mediawiki/extensions/Flow@master] Workaround LESS mixin/CSS variable issue

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

We had some informal discussion around this and it seems there is support for moving away from LESS mixins to get ready for a CSS-first future and improved expansion of the color palette design tokens rather than generating colors programmatically.

Volker_E renamed this task from LESS color functions not compatible with CSS custom properties to Less color functions not compatible with CSS custom properties.Feb 27 2024, 4:48 PM
Volker_E added a project: CSS.

Change 1005204 merged by jenkins-bot:

[mediawiki/extensions/Flow@master] Workaround Less mixin/CSS variable issue

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

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

[mediawiki/extensions/Flow@master] Follow up to Iae1788ccd41cc7596e289caebd0a9507f46fedab

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

Change 1007390 merged by jenkins-bot:

[mediawiki/extensions/Flow@master] Workaround Less mixin usage with another color token II

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

Night mode is unblocked so marking this as low, but definitely something we need to talk about at some future date.

Summarizing the conversation in Slack (I've asked design systems team to officially way in)

  • We prefer longer term expansion of the color palette rather than using LESS mixins to generate gradients / colors in between other two colors. We would like to establish a unified and progressive scale for each color.
  • We should aim to remove LESS functions on the long term (possibly forbidding them in the LESS PHP library)to get ready for a CSS-first future

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

[mediawiki/extensions/SearchVue@master] Fixes: Less_Exception_Compiler

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

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

[mediawiki/extensions/SearchVue@wmf/1.42.0-wmf.21] Fixes: Less_Exception_Compiler

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

Change 1009589 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Fixes: Less_Exception_Compiler

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

Change 1009337 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@wmf/1.42.0-wmf.21] Fixes: Less_Exception_Compiler

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

Mentioned in SAL (#wikimedia-operations) [2024-03-07T21:07:05Z] <brennen@deploy2002> brennen and jdlrobson: Backport for [[gerrit:1009337|Fixes: Less_Exception_Compiler (T359414 T357740)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-03-07T21:19:38Z] <brennen@deploy2002> Finished scap: Backport for [[gerrit:1009337|Fixes: Less_Exception_Compiler (T359414 T357740)]] (duration: 14m 41s)

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

[mediawiki/extensions/MultimediaViewer@master] Use hardcoded color for LESS mixin function

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

Change 1011140 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use hardcoded color for LESS mixin function

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