Button styles: Add secondary button style

[anandamaryon-gov]

Current issue

Currently the prototype kit relies on the standard button styles from gov design system.

However, the secondary button style on the gov design system (https://design-system.service.gov.uk/components/button/) uses a light grey background colour which clashes with the home office design system's page grey background colour.

Gov design system secondary button style:

Gov design system secondary button style when used on home office design system background:

Suggested change

My suggestion would be to implement the button styles used in the home office design system, detailed here: https://www.figma.com/file/y90OmHLuhtNuCUOc7jzQlj/Home-Office-design-library-(Roboto)?node-id=4%3A88

Screenshot of button styles detailed in the home office design system, from the link above.

Note: I'm not sure on the usage and history behind the 'Affordable action' button styles, so I'd leave these for a separate issue for now, unless anybody can make a case for adding these too.

[isobelseacombe]

NHS have an off-white background, these are the button styles that they use https://service-manual.nhs.uk/design-system/components/buttons. I wonder if we could borrow some of this for the Home Office styles?

[isobelseacombe]

I don't think I've ever seen the 'affordable' action buttons used anywhere

[anandamaryon-gov]

I've now gotten to a point in my service where I'll need to implement some secondary buttons.

I explored a darker background version @isobelseacombe but I feel it looks a little too much like a button:disbaled style.

Currently I have gone for the style used in the HO Design System Figma file.

It looks like this:

Had to add the following to my app.scss:

.govuk-button.govuk-button--secondary { // for specificity since 'vendor' styles are loaded after local ones
  background: #F8F8F8;
  border: 1px solid #0B0C0C; // text colour, should be replaced with variable name
  padding: 9px 10px; // 2px taller to account for the transparent 2px border in the default button styles
  box-shadow: 0px 1px 0px #0B0C0C; // text colour, should be replaced with variable name
}

I'd suggest these styles are added into the main HO CSS, since I know that others would like to use secondary buttons too.