From d32e5a681662cb8d4a8c0773b410b666107407bd Mon Sep 17 00:00:00 2001
From: ediblecode <ian.routledge@nice.org.uk>
Date: Tue, 31 Oct 2017 08:40:07 +0000
Subject: [PATCH] Fix inverse button styles

Inverse (light) button had wrong text colour after recent updates.
---
 server/views/components/panels.njk            |  2 +-
 src/components/buttons/_buttons.scss          | 22 +++++++++----------
 .../settings/_settings-colours-semantic.scss  | 12 +++++-----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/server/views/components/panels.njk b/server/views/components/panels.njk
index 03a54fb71..d2b8506fc 100644
--- a/server/views/components/panels.njk
+++ b/server/views/components/panels.njk
@@ -22,7 +22,7 @@
 				Some <a href="#">text</a> content
 			</p>
 			<p>
-				<a href="#" class="btn btn--light">A light button</a>
+				<a href="#" class="btn btn--inverse">An inverse button</a>
 			</p>
 		</div>
 
diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss
index 459521a6d..35a65dda0 100644
--- a/src/components/buttons/_buttons.scss
+++ b/src/components/buttons/_buttons.scss
@@ -37,7 +37,7 @@
   &:focus {
     @include default-focus-style;
     background: $colour-btn-primary;
-    border-color: $colour-focus;
+    border-color: $colour-focus-inverse;
     color: $colour-btn-primary-text;
   }
 
@@ -112,27 +112,27 @@
   }
 }
 
-/// Light button, for use on dark panels/sections
+/// Inverse (light) button, for use on inverse (dark) panels/sections
 /// @since 0.2.0
-.btn--light {
-  background: $colour-btn-light;
-  border: em(1px) solid $colour-btn-light-text;
-  color: $colour-btn-light-text;
+.btn--inverse {
+  background: $colour-btn-inverse;
+  border: em(1px) solid $colour-btn-inverse-text;
+  color: $colour-btn-inverse-text !important; // sass-lint:disable-line no-important
 
   &:visited {
-    color: $colour-btn-light-text;
+    color: $colour-btn-inverse-text;
   }
 
   &:hover {
-    background: $colour-btn-light-hover;
-    color: $colour-btn-light-text;
+    background: $colour-btn-inverse-hover;
+    color: $colour-btn-inverse-text;
   }
 
   &:focus {
-    background: $colour-btn-light-hover;
+    background: $colour-btn-inverse-hover;
   }
 
   &:active {
-    background: $colour-btn-light-hover;
+    background: $colour-btn-inverse-hover;
   }
 }
diff --git a/src/stylesheets/settings/_settings-colours-semantic.scss b/src/stylesheets/settings/_settings-colours-semantic.scss
index d409c156b..971ba242b 100644
--- a/src/stylesheets/settings/_settings-colours-semantic.scss
+++ b/src/stylesheets/settings/_settings-colours-semantic.scss
@@ -138,17 +138,17 @@ $colour-btn-secondary-text: $colour-nice-white;
 
 // LIGHT BUTTONS
 
-/// Light button background colour
+/// Inverse (light) button background colour
 /// @since 0.2.2
-$colour-btn-light: $colour-nice-white;
+$colour-btn-inverse: $colour-nice-white;
 
-/// Light button hover colour
+/// Inverse (light) button hover colour
 /// @since 0.2.2
-$colour-btn-light-hover: $colour-nice-grey-3;
+$colour-btn-inverse-hover: $colour-nice-grey-3;
 
-/// Light button text colour
+/// Inverse (light) button text colour
 /// @since 0.2.2
-$colour-btn-light-text: $colour-nice-rich-black;
+$colour-btn-inverse-text: $colour-nice-rich-black;
 
 
 // BACKGROUNDS/BORDERS