diff --git a/CHANGELOG.md b/CHANGELOG.md index a5e90e5260..6c11c2f639 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -55,6 +55,24 @@ These styles can be used in your own code by including the `govuk-focused-box` S This change was made in [pull request #3819: Add linked image focus style](https://github.com/alphagov/govuk-frontend/pull/3819). +#### Customise inverse button colours + +For non-GOV.UK branded websites, you can now change the colours of inverse buttons — buttons intended for use on dark backgrounds. + +To change the inverse button's background colour, set the `$govuk-inverse-button-background-colour` Sass variable. + +To change the inverse button's text colour, set the `$govuk-inverse-button-text-colour` Sass variable. + +```scss +@import "node_modules/govuk-frontend/govuk/base"; + +$govuk-inverse-button-background-colour: govuk-colour("yellow"); +$govuk-inverse-button-text-colour: govuk-colour("black"); +@import "node_modules/govuk-frontend/govuk/components/button/index"; +``` + +This change was made in [pull request #4043: Add ability to customise inverse button colours](https://github.com/alphagov/govuk-frontend/pull/4043). + ### Breaking changes You must make the following changes when you migrate to this release, or your service might break. @@ -293,6 +311,21 @@ If you were using `$govuk-font-family-gds-transport` to set the font on an eleme This change was introduced in [pull request #3949: Simplify font family settings](https://github.com/alphagov/govuk-frontend/pull/3949). +#### Check that inverse buttons still look as expected + +Inverse button components now use the `$govuk-brand-colour` setting to determine the button's text colour and the button's background tint when hovered or activated. The button will only look different if `$govuk-brand-colour` has been changed from the default. + +You can restore the previous blue colour by setting `$govuk-inverse-button-text-colour` before importing the button component's Sass. + +```scss +@import "node_modules/govuk-frontend/govuk/base"; + +$govuk-inverse-button-text-colour: govuk-colour("blue"); +@import "node_modules/govuk-frontend/govuk/components/button/index"; +``` + +This change was made in [pull request #4043: Add ability to customise inverse button colours](https://github.com/alphagov/govuk-frontend/pull/4043). + ### Suggested changes #### Update the Pagination component's default `aria-label` diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss index 7cdafe9204..4fe813d355 100644 --- a/packages/govuk-frontend/src/govuk/components/button/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/button/_index.scss @@ -16,6 +16,20 @@ $govuk-button-background-colour: govuk-colour("green") !default; $govuk-button-text-colour: govuk-colour("white") !default; +/// Inverted button component background colour +/// +/// @type Colour +/// @access public + +$govuk-inverse-button-background-colour: govuk-colour("white") !default; + +/// Inverted button component text colour +/// +/// @type Colour +/// @access public + +$govuk-inverse-button-text-colour: $govuk-brand-colour !default; + @include govuk-exports("govuk/component/button") { $govuk-button-colour: $govuk-button-background-colour; $govuk-button-text-colour: $govuk-button-text-colour; @@ -35,8 +49,8 @@ $govuk-button-text-colour: govuk-colour("white") !default; $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%); // Inverse button variables - $govuk-inverse-button-colour: govuk-colour("white"); - $govuk-inverse-button-text-colour: govuk-colour("blue"); + $govuk-inverse-button-colour: $govuk-inverse-button-background-colour; + $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour; $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%); $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);