Change the Button component background and text colour

[NickColley]

Expands the public API to include a new $govuk-button-background-colour and $govuk-button-text-colour scss variable.

Allows users who brand GOV.UK to do so without brittle selector overrides
which can break in future updates.

This variable naming matches other similar variables such as
$govuk-body-background-colour and $govuk-canvas-background-colour.

At the moment I have to do this sort of thing:

@import "node_modules/govuk-frontend/govuk/base";
@import "node_modules/govuk-frontend/govuk/components/button/index";

$app-button-colour: $app-primary-color;
$app-button-hover-colour: govuk-shade($app-button-colour, 20%);
$app-button-shadow-colour: govuk-shade($app-button-colour, 60%);
.govuk-button:not(.govuk-button--secondary):not(.govuk-button--warning) {
    background-color: $app-button-colour;
    box-shadow: 0 $govuk-border-width-form-element 0 $app-button-shadow-colour;
}

.govuk-button:not(.govuk-button--secondary):not(.govuk-button--warning):hover {
    background-color: $app-button-hover-colour;
}

After:

@import "node_modules/govuk-frontend/govuk/base";

$govuk-button-background-colour: govuk-colour("blue");
@import "node_modules/govuk-frontend/govuk/components/button/index";

[NickColley]

Is it possible to get this considered for triage please?

@36degrees @vanitabarrett

[NickColley]

Thank you @vanitabarrett ! Appreciate it.

[querkmachine]

Couple of thoughts. Nothing explicitly blocking.

[querkmachine]

Would this line be better placed in src/govuk/settings/_colours-applied.scss? That's where other default variables definitions seem to be located.

I'm conscious that this variable is specific to the button component, however, and we don't seem to have precedent for where to put them specifically. Happy to keep it here if we think that makes more sense.

[NickColley]

I'm thinking over time I can contribute the different high level component variables based on me branding the GOV.UK Design System so it'll make more sense.

[querkmachine]

As we're allowing customisation of the background-color, it feels like we should also provide a mechanism to customise the text color so that it's possible to maintain accessible contrast.

[NickColley]

Agreed, this'll also be useful when either I or the GOV.UK Design System team writes about branding. My plan is to contribute these improvements based on real world usage of branding while doing client work. Then I will write guidance on how this is done that could be contributed back to the main GOV.UK Design System if it becomes useful to do so.

[NickColley]

@querkmachine pushed an update addressing your feedback.

[querkmachine]

A commit from your accordion focus colour PR seems to have snuck in and caused a merge conflict. If you can fix that up, I'm happy to approve!

[NickColley]

Ah yeah rouge rebase gone wrong, will sort that thanks.

[querkmachine]

Hi @NickColley,

Sorry! This has ended up overlapping with some other work we're doing and we've inadvertently introduced a new merge conflict to your PR — the file at tasks/gulp/sassdoc.js has been moved to tasks/sassdoc.js on the main branch now.

If you're okay to take a look at it, please do. We're currently preparing a bugfix release of Frontend however, so it may be a few more days until this is approved and merged.

[NickColley]

@querkmachine okay sorted that conflict thanks for the heads up. 👍🏻

[querkmachine]

@NickColley I've just rebased your branch and moved the changelog entry to the right place now that the 4.3.1 release has gone out. Will approve once the tests have ran. Thanks for putting up with the faff!

[owenatgov]

🟢 🔴 🟡 👍🏻

[NickColley]

Thanks @querkmachine @owenatgov for your help getting this one in 👍🏻