Background
Currently, Codex buttons don't feature a specific line-height. They also don't have any inline padding applied to them. Both conditions prevent buttons from correctly adjusting to bigger font sizes: for example, whenever the browser's default font size is increased to satisfy accessibility needs.
Here are some examples of the visual aspect of Codex buttons in Chrome when the font size is changed to "Very large" in the Appearance settings (24px):
| Button component | Combobox* | ToggleButton | |
| {F35263330} | {F35263333} | {F35263337} | |
*Please note that the issue related to the also unresponsive size of text inputs is covered by this separate task: T311267
Goal
Buttons should scale to display correct proportions and proper spacing around their text.
Considerations
The solution might consist on specifying a line-height for Button (probably @line-height-component, to keep its height aligned with the rest of Codex elements) and default inline paddings (of 4px, in order to match that of other components).
We should apply an approach and values that make buttons to reshape in a way that's consistent with the rest of system elements (e.g. apply same padding values to inputs and buttons, apply same line-height, specify the same relative height...)
ACs
- The height of Codex Button components increases proportionally with font size