Merge pull request #2213 from alphagov/inverse-link-mixin

Add inverse link mixin and modifier class

app/views/examples/links/index.njk

@@ -14,7 +14,8 @@
   'Link': '',
   'Link with no visited state': 'govuk-link--no-visited-state',
   'Text link': 'govuk-link--text-colour',
-  'Muted link': 'govuk-link--muted'
+  'Muted link': 'govuk-link--muted',
+  'Inverse': 'govuk-link--inverse'
 } %}
 
 {% set states = {
@@ -49,8 +50,8 @@
 
     {% for variant_description, variant_class in variants %}
 
-      <section class="govuk-!-margin-top-8">
-        <h2 class="govuk-heading-l">{{ variant_description }}</h2>
+      <section class="govuk-!-margin-top-8"{% if variant_class == "govuk-link--inverse"%} style="background: #1d70b8; padding: 15px; margin: -15px;"{% endif %}>
+        <h2 class="govuk-heading-l"{% if variant_class == "govuk-link--inverse"%} style="color: #fff;"{% endif %}>{{ variant_description }}</h2>
 
       {% for state_description, state_class in states %}
         <p class="govuk-body">

src/govuk/core/_links.scss

@@ -27,6 +27,10 @@
     @include govuk-link-style-text;
   }
 
+  .govuk-link--inverse {
+    @include govuk-link-style-inverse;
+  }
+
   .govuk-link--no-underline {
     @include govuk-link-style-no-underline;
   }

src/govuk/helpers/_links.scss

@@ -217,7 +217,6 @@
 /// @access public
 
 @mixin govuk-link-style-text {
-  // Override link colour to use text colour
   &:link,
   &:visited,
   &:hover,
@@ -236,6 +235,43 @@
   }
 }
 
+/// Inverse style link mixin
+///
+/// Overrides the colour of links to work on a dark background.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-inverse;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-inverse {
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: govuk-colour("white");
+  }
+
+  &:focus {
+    color: $govuk-focus-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.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
 /// No visited state link mixin
 ///
 /// Used in cases where it is not helpful to distinguish between visited and