Merge pull request #2752 from NickColley/change-button-colour

Change the Button component background and text colour

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

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");

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',