Skip to content

Commit

Permalink
Add ability to customise inverse button colours
Browse files Browse the repository at this point in the history
  • Loading branch information
querkmachine committed Aug 4, 2023
1 parent 91d0a5d commit 866240a
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 2 deletions.
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,22 @@ 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 to be used 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";
```

### Breaking changes

You must make the following changes when you migrate to this release, or your service might break.
Expand Down
18 changes: 16 additions & 2 deletions packages/govuk-frontend/src/govuk/components/button/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%);

Expand Down

0 comments on commit 866240a

Please sign in to comment.