Change Details

== Background While the Less compiler allows to calculate a Less var independently of the content value, a CSS custom properties as value isn't working that way. With the introduction of {T387778}, certain Less token values have changed to carry CSS custom properties. 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 ). This is happening because you can't use CSS variables inside most Less functions, like unit(). == Goal Replace non-working token function calls == Acceptance criteria [] All cases of `unit()` calls are evaluated and the affected tokens are replaced to succeed unchanged rendering in default font size.

== Background The Less compiler does not allow use of CSS custom properties in calculations. With the introduction of {T387778}, 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 | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/PageToolbar.less#1 | @font-size-small used in unit() ]] | [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1129918 | patch ]] to remove this line since the var is unused | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/UserLinks.less#100 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/UserLinks.less#116 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/variables.less#88 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles.legacy/variables.less#111 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/skinStyles/ext.echo.styles.badge.less#17 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/skinStyles/ext.echo.styles.badge.less#18 | @font-size-small used in unit() ]] | | | MobileFrontend | [[ https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/a7183b11e63dc28e6baabfc1eb9e62e02baab130/resources/mobile.editor.overlay/BlockMessageDetails.less#7 | @size-icon-medium used in unit() ]] | | == Acceptance criteria [] Evaluate all cases of `unit()` calls and update the code to work with the updated Codex tokens [] Ensure there are no significant visual changes or regressions

== Background While the Less compiler allows to calculate a Less var independently of the content value, a CSS custom properties as value isn't working that way. The Less compiler does not allow use of CSS custom properties in calculations. With the introduction of {T387778}, certain Less token values in Codex have changed to reference CSS custom properties. certainThis will break the Less token values have changed to carry CSS custom propertiescompiler 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 ). This is happening because you can't use CSS variables inside most Less functions, like unit()`. == 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 | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/PageToolbar.less#1 | @font-size-small used in unit() ]] | [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1129918 | patch ]] to remove this line since the var is unused | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/UserLinks.less#100 | @font-size-small used in unit() ]] | | Replace non-working token function calls| | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/components/UserLinks.less#116 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles/variables.less#88 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/resources/skins.vector.styles.legacy/variables.less#111 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/skinStyles/ext.echo.styles.badge.less#17 | @font-size-small used in unit() ]] | | | | [[ https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/9c89cfbd52cc50eae9b5f56743e30d194cc0c0aa/skinStyles/ext.echo.styles.badge.less#18 | @font-size-small used in unit() ]] | | | MobileFrontend | [[ https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/a7183b11e63dc28e6baabfc1eb9e62e02baab130/resources/mobile.editor.overlay/BlockMessageDetails.less#7 | @size-icon-medium used in unit() ]] | | == Acceptance criteria [] Evaluate all cases of `unit()` calls and update the code to work with the updated Codex tokens [] Ensure there are no significant visual changes or regressions [] All cases of `unit()` calls are evaluated and the affected tokens are replaced to succeed unchanged rendering in default font size.