From 54ccfaf318eb812c85c5e6c92457df846de93d47 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 8 Aug 2022 15:33:56 +0100 Subject: [PATCH 1/3] Enable changing of button background and text colour Adds a new `$govuk-button-background-colour` and `$govuk-button-text-colour` public variable inside a new Component / Button section. 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`. --- src/govuk/components/button/_index.scss | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss index 5a43af1a1e..a0f4e53fdf 100644 --- a/src/govuk/components/button/_index.scss +++ b/src/govuk/components/button/_index.scss @@ -1,8 +1,26 @@ +//// +/// @group components/button +//// + +/// Button component background colour +/// +/// @type Colour +/// @access public + +$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default; + +/// Button component text colour +/// +/// @type Colour +/// @access public + +$govuk-button-text-colour: govuk-colour("white") !default; + @include govuk-exports("govuk/component/button") { - $govuk-button-colour: govuk-colour("green", $legacy: #00823b); + $govuk-button-colour: $govuk-button-background-colour; $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); - $govuk-button-text-colour: govuk-colour("white"); + $govuk-button-text-colour: $govuk-button-text-colour; // Secondary button variables $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3"); From f301765d7c485a2b92e0a42717f0767a4db284eb Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 8 Aug 2022 15:36:32 +0100 Subject: [PATCH 2/3] Update sassdocs section to include button --- tasks/sassdoc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tasks/sassdoc.js b/tasks/sassdoc.js index da9d205dc8..5a6514f4fb 100644 --- a/tasks/sassdoc.js +++ b/tasks/sassdoc.js @@ -5,6 +5,7 @@ function buildSassdocs (cb) { sassdoc([paths.src + '**/**/*.scss', `!${paths.src}/vendor/*`], { dest: paths.sassdoc, groups: { + 'components/button': 'Components / Button', 'helpers/accessibility': 'Helpers / Accessibility', 'helpers/colour': 'Helpers / Colour', 'helpers/layout': 'Helpers / Layout', From cada8cc2efa6a4d47cbeccac0c991ccc7be28125 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 8 Aug 2022 15:55:12 +0100 Subject: [PATCH 3/3] Add CHANGELOG entry --- CHANGELOG.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5dedd93e6..7656fb1baf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,26 @@ ## Unreleased +### New features + +#### Change the Button component background and text colour + +For non-GOV.UK branded websites, you can now change the Button component background and text colour. + +To change the Button component background colour set the `$govuk-button-background-colour` Sass variable. + +To change the Button component text colour set the `$govuk-button-text-colour` Sass variable. + +```scss +@import "node_modules/govuk-frontend/govuk/base"; + +$govuk-button-background-colour: govuk-colour("yellow"); +$govuk-button-text-colour: govuk-colour("black"); +@import "node_modules/govuk-frontend/govuk/components/button/index"; +``` + +This was added in [pull request #2752: Change the Button component background and text colour](https://github.com/alphagov/govuk-frontend/pull/2752). Thanks to [Nick Colley](https://github.com/NickColley) for this contribution. + ### Recommended changes #### Remove `aria-labelledby`, remove `id="error-summary-title"` from title and move `role="alert"` to child container on the error summary component