Opened 14 hours ago
#65991 new defect (bug)
Remove line-height values in pixels from _tokens.scss
| Reported by: | afercia | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | Administration | Version: | |
| Severity: | normal | Keywords: | |
| Cc: | Focuses: | accessibility |
Description
The _tokens.scss file contains 3 scss variables with line-height values expressed in pixels:
// Line Heights $line-height-xs: 16px; // xs $line-height-s: 20px; // s - Most UI elements $line-height-m: 24px; // m - Body large
According to the WordPress CSS Coding Standards, line-height values should be unit-less:
Line height should also be unit-less, unless necessary to be defined as a specific pixel value.
Exceptions can be made for cases where the line-height value doesn't impact typography metrics, for example decorative icons and such. In all the cases where the line-height value is used for actual typography the value should be unit-less. This is a long-standing best practice in WordPress. See the reasoning documented in the CSS Coding Standards.
These 3 values in _tokens.scss should be either removed or changed to use unit-less values.
Introduced in [61645].
It is also worth checking whether these values come from the scss used in the Gutenberg repository and change them there as well.
Before submitting any patch or PR, I suggest to wait for feedback on why these values have been introduced in Core and why they don't meet the CSS Coding Standards.
Cc @fabiankaegy
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)