Background
The Less compiler does not allow use of CSS custom properties in calculations.
With the introduction of T387778: [breaking change] Font modes: Introduce font modes to Codex, certain Less token values in Codex have changed to reference CSS custom properties. This will break the Less compiler unless we update the code using the affected tokens.
Example:
@max-width-search: unit( ( 500px / @font-size-browser / @font-size-small ), em ); // 35.71428571em @ 16 & 0.875em T270202
Note that @font-size-browser = 16. The Codex token @font-size-small used to be 0.875rem and is being updated to var( --font-size-small, 0.875rem ).
Goal
Determine how to updated each affected line of code with no or acceptable visual changes. The affect lines are:
| Project | Issue(s) | Notes |
|---|---|---|
| Vector | @font-size-small used in unit() | patch to remove this line since the var is unused |
| @font-size-small used in unit() | patch | |
| @font-size-small used in unit() | see patch above | |
| @font-size-small used in unit() | see patch above | |
| @font-size-small used in unit() | see patch above | |
| @font-size-small used in unit() | see patch above | |
| @font-size-small used in unit() | see patch above | |
| MobileFrontend | @size-icon-medium used in unit() | patch |
Acceptance criteria
- Evaluate all cases of unit() calls and update the code to work with the updated Codex tokens
- Vector
- MobileFrontend
- Ensure there are no significant visual changes or regressions