mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-24 13:43:16 +00:00
2223cb8c1b
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
26 lines
1.5 KiB
Markdown
26 lines
1.5 KiB
Markdown
# 2. Use CSS custom properties in Vector
|
|
|
|
Date: 2023-10-23
|
|
|
|
## Status
|
|
|
|
Accepted.
|
|
|
|
## Context
|
|
|
|
In the context of the [Accessibility for Reading project](https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading) 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](https://phabricator.wikimedia.org/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](https://www.mediawiki.org/wiki/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. |