Fix issue with buttons/links focus ring on inverse bg

By default buttons/links have a teal focus ring. But we have the
ability to use an inverse (dark) background. In this instance,
the focus ring should be white to maintain a high contrast between
focus ring and background

server/views/layouts/_layout.njk

@@ -27,12 +27,8 @@
 		{% endblock %}
 	</div>
 
-	<script src="//cdn.nice.org.uk/V3.1/Scripts/nice/NICE.TopHat.min.js"
+	<script src="//cdn.nice.org.uk/V3.1/Scripts/nice/NICE.TopHat.dev.js"
             data-environment="Live"
-            data-search="/search?q=%term"
-            data-typeaheadtype="remote"
-            data-typeaheadsource="/autocomplete?%query"
-            data-search-placeholder="Search NICE..."
             data-cookie="true"
             async></script>
 

src/components/buttons/_buttons.scss

@@ -4,7 +4,7 @@
 
 /// Button
 /// @since 0.1.0
-.btn.btn { // Repeat selector for specificity to avoid link overrides
+.btn {
   @include remove-mz-focus-inner;
   @include font-size(0);
   appearance: none;
@@ -17,7 +17,7 @@
   margin: em(0 $spacing-small $spacing-small -4px); // Negative left margin to combat inline-block gaps
   padding: em($spacing-small $spacing-medium);
   position: relative;
-  text-decoration: none;
+  text-decoration: none !important; // sass-lint:disable-line no-important
   vertical-align: top;
 
   &:first-child {
@@ -38,6 +38,7 @@
     @include default-focus-style;
     background: $colour-btn-primary;
     border-color: $colour-focus;
+    color: $colour-btn-primary-text;
   }
 
   &:active {
@@ -63,7 +64,7 @@
 
 /// CTA/prominent button
 /// @since 0.2.0
-.btn.btn--cta {
+.btn--cta {
   background: $colour-btn-cta;
   border: em(1px) solid $colour-btn-cta-text;
   color: $colour-btn-cta-text;
@@ -88,7 +89,7 @@
 
 /// Secondary button
 /// @since 0.2.0
-.btn.btn--secondary {
+.btn--secondary {
   background: $colour-btn-secondary;
   border: em(1px) solid $colour-btn-secondary-text;
   color: $colour-btn-secondary-text;
@@ -113,7 +114,7 @@
 
 /// Light button, for use on dark panels/sections
 /// @since 0.2.0
-.btn.btn--light {
+.btn--light {
   background: $colour-btn-light;
   border: em(1px) solid $colour-btn-light-text;
   color: $colour-btn-light-text;

src/components/footer/_footer.scss

@@ -5,7 +5,7 @@
 /// Site footer
 /// @since 0.1.0
 .site-footer {
-  @extend %inverse-links;
+  @include links-inverse;
   @include font-size(-1);
   background: $colour-panel-inverse;
   color: $colour-text-inverse;

src/components/hero/_hero.scss

@@ -5,7 +5,7 @@
 /// Hero banner component.
 /// @since 0.2.0
 .hero {
-  @extend %inverse-links;
+  @include links-inverse;
   background: $colour-nice-teal-2;
   color: $colour-text-inverse;
   margin: em(0 0 $spacing-large);

src/components/panel/_panel.scss

@@ -26,7 +26,7 @@
 /// @require .panel
 /// @since 0.1.0
 .panel--inverse {
-  @extend %inverse-links;
+  @include links-inverse;
   background: $colour-panel-inverse;
   color: $colour-text-inverse;
 }

src/components/tabs/_tabs.scss

@@ -67,7 +67,7 @@
 
   // The button/link for the tab itself
   &__tab-btn {
-    @extend %link;
+    @include link-default;
     background: 0;
     border: 0;
     border-left: 1px solid transparent;

src/stylesheets/settings/_settings-colours-semantic.scss

@@ -29,10 +29,6 @@ $colour-text-subtle: $colour-nice-grey-1;
 /// @since 0.2.2
 $colour-text-inverse: $colour-nice-white;
 
-/// Focus colour
-/// @since 0.2.0
-$colour-focus: #0092a6;
-
 /// Icons colour
 /// @since 0.2.0
 $colour-icons: $colour-nice-teal;
@@ -84,6 +80,17 @@ $colour-link-inverse-active: $colour-link-inverse-hover;
 $colour-link-inverse-focus-text: $colour-link-inverse;
 
 
+// FOCUS
+
+/// Focus colour
+/// @since 0.2.0
+$colour-focus: #0092a6;
+
+/// Focus colour
+/// @since 0.3.1
+$colour-focus-inverse: $colour-link-inverse;
+
+
 // CTA BUTTONS
 
 /// CTA button background colour

src/stylesheets/typography/_typography-global.scss

@@ -11,6 +11,14 @@
   outline: 3px solid $colour-focus;
 }
 
+/// The inverse focus style used for elements like anchors and buttons
+/// on an inverse (dark) background
+/// @output the inverse focus styles ie background colour and outline
+/// @since 0.3.1
+@mixin inverse-focus-style {
+  outline: 3px solid $colour-focus-inverse;
+}
+
 html {
   font-size: rem($nice-root-font-size-min);
 

src/stylesheets/typography/_typography-links.scss

@@ -3,8 +3,8 @@
 ////
 
 /// Default link style for use on a normal (light) background
-/// @since 0.2.10
-%link {
+/// @since 0.3.1
+@mixin link-default {
   color: $colour-link;
   text-decoration: underline;
   text-decoration-skip: ink;
@@ -28,8 +28,8 @@
 }
 
 /// Inverse link style for use on an inverse (dark) background
-/// @since 0.2.9
-%inverse-link {
+/// @since 0.3.1
+@mixin link-inverse {
   color: $colour-link-inverse;
   text-decoration: underline;
   text-decoration-skip: ink;
@@ -43,6 +43,7 @@
   }
 
   &:focus {
+    @include inverse-focus-style;
     color: $colour-link-inverse-focus-text;
   }
 
@@ -52,28 +53,28 @@
 }
 
 /// Inverse links for use on a dark background
-/// @since 0.2.9
-%inverse-links {
+/// @since 0.3.1
+@mixin links-inverse {
   a {
-    @extend %inverse-link;
+    @include link-inverse;
   }
 }
 
 a {
-  @extend %link;
+  @include link-default;
 }
 
 /// Inverse link for use on a dark background. Apply to an individual link.
 /// Prefer using `.inverse-links` on the container instead.
 /// @since 0.2.9
 .link--inverse {
-  @extend %inverse-link;
+  @include link-inverse;
 }
 
 /// Inverse links, for use on dark backgrounds e.g dark panels.
 /// Use this class on a containing element to apply to all links within it.
 /// @require %inverse-links
 /// @since 0.2.9
 .inverse-links {
-  @extend %inverse-links;
+  @include links-inverse;
 }