mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-14 11:15:33 +00:00

Jan Drewniak 2223cb8c1b Introduce CSS custom properties under font-size feature flag

Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.

CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.

Includes ADR on CSS custom properties decisions.

Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b

2023-10-24 14:33:33 +00:00

1.5 KiB

Raw Blame History

2. Use CSS custom properties in Vector

Date: 2023-10-23

Status

Accepted.

Context

In the context of the Accessibility for Reading project we needed a way to enable font-size customization in Vector in a scalable way. CSS custom properties were the mechanism chosen to enable this functionality. Full discussion available on T346072.

Decision

CSS Custom properties will be implemented in Vector on a very tightly scoped basis. The implementation assumes that we will eventually want to up-stream CSS custom properties to MediaWiki core/Codex.

In order to facility an eventual migration, the following implementation measures will be taken:

CSS custom properties will be used only when needed for client-size customization.
CSS custom properties will be grouped in the following file resources/skins.vector.styles/CSSCustomProperties.less.
CSS custom properties will maintain consistency with the naming convention of Codex design tokens.
When possible, we'll assign CSS custom properties to existing Codex token values.

Consequences

CSS Custom properties will be marked as @private and @experimental in the spirit of the Stable interface policy/Frontend in order to discourage usage outside of Vector. This could be changes to @internal if usage outside of Vector is deemed necessary.

1.5 KiB Raw Blame History