[wp-trac] [WordPress Trac] #62864: Add padding and color changes to buttons and inputs

[WordPress Trac]

#62864: Add padding and color changes to buttons and inputs
---------------------------+-----------------------------------------------
 Reporter:  karmatosed     |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  6.8
Component:  General        |    Version:
 Severity:  normal         |   Keywords:  needs-design-feedback needs-patch
  Focuses:  accessibility  |
---------------------------+-----------------------------------------------
 This continues the work from ticket that brought in the light background:
 https://core.trac.wordpress.org/ticket/62831. This one is a bit different
 though and has more changes, so I have screenshots and can prepare a patch
 depending on appetite.

 In Storybook and the site editor the following values could be brought in:

 - Inputs to have padding: 6px 12px and height 40px where have space, for
 example settings.
 - No background color on secondary buttons.
 - Primary buttons to have a height of 40px, where have space, for example
 not in line with another input or in headings.
 - Compact option of 32px height: for toolbars and headers: this is used in
 site editor header so we can translate to use it for post/pages. For
 compact, I also had to adjust the line-height down for all types of input
 when doing this work.

 **Links in Storybook are:**

 https://wordpress.github.io/gutenberg/?path=/story/components-textcontrol
 --with-label-and-help-text&globals=css:wordpress
 https://wordpress.github.io/gutenberg/?path=/story/components-button--
 primary&globals=css:wordpress

 Attached are images how this looks in site editor and also how this then
 could look on some key screens in the admin screen. I used 40px for the
 admin screen and 32px for headers.

 There are however some issues with this would need to be addressed:

 - Heights of sections would need to be adjusted, for example headers of
 post/pages button rows. (Done in mocks to show).
 - Spacing on headers for post/pages needs to have margin added with
 heading and 'new' buttons. (Done in mocks to show).
 - Line-height work needs doing for lists on settings page (that hasn't
 been done in mocks).

 This is a bigger change so deserves its own ticket. It is however maybe a
 really good one to consider because it makes everything seem a bit more
 belonging. That said if this is too far what could happen is:

 - Just remove background color from the secondary button.
 - Consider using the compact option for all at 32px height. It is an
 increase at least.

 Unfortunately just adding height to inputs doesn't work without also doing
 it to buttons as that impacts lines where both are.

 I am curious if this helps accessibility as it does come from the site
 editor itself into admin but if also improves that it would be a win. It
 this doesn't I don't want to suggest anything impacts, so adding that
 focus for input.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62864>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform