6f98cc6460
Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
2 KiB
1. Drop support for Less color functions with Codex design tokens
Date: 2024-02-16 Last Edited: 2024-06-10
Update June 2024
As of T363743, we will no longer be using CSS variables directly, rather we are back to using codex design tokens (LESS variables) so that the design system team can maintain a unified source of truth and also supply fallback values
Given that the LESS variables are still of type string, color function support is still dropped
Status
Updated
Context
In order to reduce the strain on other teams/developers to update their extensions to use CSS variables rather than LESS, we decided to use Wikimedia skin variables to re-map LESS variables to their CSS variable equivalent.
e.i. @color-progressive: var( --color-progressive );
This is consistent with the Codex design token experimental build which we will make use of in T358059.
This approach has implications on LESS function that manipulate colors, such as
average, fade and tint. These functions expect a parameter of type color.
This approach changes the variable type from color to string, causing these
functions to fail.
Decision
Given there are few consumers of these LESS functions, we've decided to remove support for LESS functions that operate on colors. The benefit of this decision is that it will reduce non-standard colors across the UI.
Consequences
Extensions that need to work with MinervaNeue for the time being can no longer use Less color functions with Codex design tokens. They can continue to use these function if they instead make use of hardcoded hex values (with an accompanying comment explaining this reason).
We filed a ticket for addressing this on the long term. This may require upgrading our version of LESS to a more modern version or a decision to drop support altogether.