diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index f1279b5c80..d132662375 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -3,12 +3,24 @@ @import "../../helpers/all"; @include govuk-exports("govuk/component/button") { - - $govuk-button-colour: #00823b; - $govuk-button-hover-colour: darken($govuk-button-colour, 5%); - $govuk-button-shadow-colour: darken($govuk-button-colour, 15%); + // Primary button variables + $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals + $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"); + // Secondary button variables + $govuk-secondary-button-colour: govuk-colour("grey-3"); + $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%); + $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%); + $govuk-secondary-button-text-colour: govuk-colour("black"); + + // Warning button variables + $govuk-warning-button-colour: govuk-colour("red"); + $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%); + $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%); + $govuk-warning-button-text-colour: govuk-colour("white"); + // Because the shadow (s0) is visually 'part of' the button, we need to reduce // the height of the button to compensate by adjusting its padding (s1) and // increase the bottom margin to include it (s2). @@ -141,6 +153,64 @@ } } + .govuk-button--secondary { + background-color: $govuk-secondary-button-colour; + box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour; + + &, + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-secondary-button-text-colour; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-secondary-button-text-colour; + } + } + + &:hover, + &:focus { + background-color: $govuk-secondary-button-hover-colour; + } + } + + .govuk-button--warning { + background-color: $govuk-warning-button-colour; + box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour; + + &, + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-warning-button-text-colour; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-warning-button-text-colour; + } + } + + &:hover, + &:focus { + background-color: $govuk-warning-button-hover-colour; + } + } + .govuk-button--start { @include govuk-typography-weight-bold; @include govuk-typography-responsive($size: 24, $override-line-height: 1); @@ -176,5 +246,4 @@ padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 } - } diff --git a/src/components/button/button.yaml b/src/components/button/button.yaml index 905342a859..adb22389b9 100644 --- a/src/components/button/button.yaml +++ b/src/components/button/button.yaml @@ -98,3 +98,29 @@ examples: name: focus text: Focussed classes: :focus +- name: Secondary + description: A button for secondary actions + data: + name: secondary + text: Secondary button + classes: govuk-button--secondary +- name: Secondary link + description: A link button for secondary actions + data: + name: secondary + text: Secondary button + href: '/' + classes: govuk-button--secondary +- name: Warning + description: A button for actions that need a warning + data: + name: Warning + text: Warning button + classes: govuk-button--warning +- name: Warning link + description: A link button for actions that need a warning + data: + name: Warning + text: Warning button + href: '/' + classes: govuk-button--warning diff --git a/src/helpers/_colour.scss b/src/helpers/_colour.scss index 8c9e58a7ea..e2a34153d6 100644 --- a/src/helpers/_colour.scss +++ b/src/helpers/_colour.scss @@ -49,3 +49,25 @@ @return map-get($org-colour, colour); } } + +/// Make a colour darker by mixing it with black +/// +/// @param {Colour} $colour - colour to shade +/// @param {Number} $percentage - percentage of `$colour` in returned color +/// @return {Colour} +/// @access public + +@function govuk-shade($colour, $percentage) { + @return mix(#000000, $colour, $percentage); +} + +/// Make a colour lighter by mixing it with white +/// +/// @param {Colour} $colour - colour to tint +/// @param {Number} $percentage - percentage of `$colour` in returned color +/// @return {Colour} +/// @access public + +@function govuk-tint($colour, $percentage) { + @return mix(govuk-colour("white"), $colour, $percentage); +}