Make WordPress Core

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

Change History (0)

Note: See TracTickets for help on using tickets.