PR-341: Add a light link variant for dark backgrounds

Author: Raymond-Ly

packages/core/elements/_links.scss

@@ -27,3 +27,7 @@ a {
 .ofh-link--no-visited-state {
   @include ofh-link-style-no-visited-state;
 }
+
+.ofh-link--light {
+  @include ofh-link-style-light;
+}

packages/core/settings/_colours.scss

@@ -156,7 +156,7 @@ $ofh-link-active-color: #001F42;
 $ofh-link-light-color: #FFF;
 $ofh-link-light-hover-color: #F4F4F4;
 $ofh-link-light-visited-color: #D8B7DE;
-$ofh-link-light-active-color: #001F42;
+$ofh-link-light-active-color: #FFF;
 
 // Breadcrumb links have their own colours
 $ofh-breadcrumb-link-color: $color_ofh-brand-dark-blue;

site/views/design-system/styles/typography/index.njk

@@ -182,6 +182,15 @@
     htmlOnly: true
   }) }}
 
+  <p>Use the <code>ofh-link--light</code> modifier class where a dark background is used.</p>
+
+  {{ designExample({
+    group: "styles",
+    item: "typography",
+    type: "links-light",
+    htmlOnly: true
+  }) }}
+
   <h2 id="lists">Lists</h2>
   <p>Use lists to make blocks of text easier to read, and to break information into manageable chunks.</p>
 
@@ -216,7 +225,7 @@
   <h2 id="section-break">Section break</h2>
   <p class="rich-text">You can use the <code>ofh-section-break</code> classes on an <code>&lt;hr&gt;</code> element to create a thematic break between sections of content. <code>ofh-section-break</code> has class-based modifiers for different size margins.</p>
   <p class="rich-text">By default <code>ofh-section-break</code> is only visible by its margin. You can add the <code>ofh-section-break--visible</code> class to make it visible with a separator line.</p>
-  
+
   <h3 class="rich-text">Colour Variants</h3>
   <ul class="ofh-list">
     <li><code>ofh-section-break--black</code></li>

site/views/design-system/styles/typography/links-light/index.njk

@@ -0,0 +1 @@
+<a href="#" class="ofh-link ofh-link--light">Link ofh-link--light</a>