Add modifiers for secondary and warning buttons

alphagov · Apr 18, 2019 · 4eb4940 · 4eb4940
1 parent 676e893
commit 4eb4940
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 6 deletions.
diff --git 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,42 @@
     }
   }
 
+  .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;
+    }
+
+    &: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;
+    }
+
+    &: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 +224,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
@@ -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/_shade.scss b/src/helpers/_shade.scss
@@ -6,5 +6,5 @@
 /// @access public
 
 @function govuk-shade($colour, $percentage) {
-  @return mix(govuk-colour("black"), $colour, $percentage);
+  @return mix(#000000, $colour, $percentage);
 }